feat: 🎸 Update alert designs (#2496)

2024-09-24 14:30:52 -04:00
1 parent 97258f7525
commit b40c53fb45
@@ -173,7 +173,8 @@ export default class CacheDaemonHandler {
          totalItems: results?.length ?? 0,
          isLoadIncomplete: cacheDaemonResults.incomplete ?? false,
          // Sometimes the refresh status returns an error status if it takes too long but it's still refreshing
-          isRefreshing: cacheDaemonResults.refresh_status !== 'not-refreshing',
+          isCacheRefreshing:
+            cacheDaemonResults.refresh_status !== 'not-refreshing',
        };

        return records;
@@ -3,17 +3,10 @@
  SPDX-License-Identifier: BUSL-1.1
 }}

-<Rose::Button
-  ...attributes
-  @style='inline-link-action'
-  @iconLeft={{if
-    this.isLoading
-    'flight-icons/svg/loading-16'
-    'flight-icons/svg/reload-16'
-  }}
-  class={{if this.isLoading 'loading-button is-loading' 'loading-button'}}
+<Hds::Button
+  @text={{t 'actions.refresh'}}
+  @color='secondary'
+  @icon={{if this.isLoading 'loading' 'reload'}}
  @disabled={{this.isLoading}}
  {{on 'click' this.toggleRefresh}}
->
-  {{yield}}
-</Rose::Button>
+/>
@@ -3,12 +3,17 @@
  SPDX-License-Identifier: BUSL-1.1
 }}

-{{#if this.lastRefreshed}}
-  <Rose::Toolbar::Info>
-    {{relative-datetime-live this.lastRefreshed}}
-  </Rose::Toolbar::Info>
-{{/if}}
-
-<LoadingButton @onClick={{this.onClick}}>
-  {{t 'actions.refresh'}}
-</LoadingButton>
+<div class='toolbar-refresher'>
+  {{#if (has-block)}}
+    {{yield}}
+  {{else}}
+    {{#if this.lastRefreshed}}
+      <Hds::Text::Body @tag='p' @color='faint'>
+        {{relative-datetime-live this.lastRefreshed}}
+      </Hds::Text::Body>
+    {{/if}}
+  {{/if}}
+  <LoadingButton @onClick={{this.onClick}}>
+    {{t 'actions.refresh'}}
+  </LoadingButton>
+</div>
@@ -15,7 +15,7 @@ export default class ToolbarRefresherComponent extends Component {
  // =methods

  /**
-   * Executes the click handler argument and trackes the time it completed.
+   * Executes the click handler argument and tracks the time it completed.
   */
  @action
  async onClick() {
@@ -39,18 +39,6 @@
  .search-filtering-toolbar {
    display: flex;

-    // TODO: Remove these copied styles by migrating to HDS for the toolbar refresher component.
-    //  The original styles assumed we were using the old toolbar component under a "rose-toolbar" class.
-    .rose-button-inline-link-action {
-      font-size: 0.8125rem;
-      line-height: 1.8461538462;
-      font-weight: 600;
-      color: var(--stark);
-      display: inline-block;
-      vertical-align: middle;
-      padding: 0.375rem 1rem;
-    }
-
    > :last-child {
      margin-left: auto;
    }
@@ -64,3 +52,15 @@
    color: var(--token-color-foreground-primary);
  }
 }
+
+.toolbar-refresher {
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  gap: 1rem;
+
+  > .hds-text {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
@@ -7,19 +7,22 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, find, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';

 module('Integration | Component | loading-button', function (hooks) {
  setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
+
  test('it renders', async function (assert) {
    await render(hbs`<LoadingButton />`);
-    assert.ok(find('.loading-button'));
+    assert.ok(find('.hds-button'));
  });

  test('it executes a function on refresh button click', async function (assert) {
    assert.expect(2);
    this.onClick = () => assert.ok(true, 'refresh was clicked');
    await render(hbs`<LoadingButton @onClick={{this.onClick}} />`);
-    assert.ok(find('.loading-button'));
+    assert.ok(find('.hds-button'));
    await click('button');
  });
 });
@@ -25,5 +25,7 @@ loading:
  description: All of your {resource} are still loading. Please wait while we finish loading everything on screen.
  generic-description: All of your resources are still loading. Please wait while we finish loading everything on screen.
 incomplete-loading:
-  limit: We've reached the result limit. Please narrow down your search or filters if the result you're looking for is not shown.
-  refreshing: We're still currently loading the results. Please wait a moment before refreshing again.
+  limit: Loaded the first {resultCount} results. Please narrow down your search or filters if the result you're looking for is not shown.
+  refreshing:
+    description: Updating cache...
+    tooltip: Some items may not appear until the cache is finished updating
@@ -73,9 +73,7 @@
            />
          </S.Generic>
        </Hds::SegmentedGroup>
-        <span>
-          <ToolbarRefresher @onClick={{this.refresh}} />
-        </span>
+        <ToolbarRefresher @onClick={{this.refresh}} />
      </div>

      <FilterTags @filters={{this.filters}} />
@@ -78,7 +78,7 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
   *
   * @returns {Promise<{totalItems: number, targets: [TargetModel], projects: [ScopeModel], allTargets: [TargetModel] }> }
   * @return {Promise<{totalItems: number, targets: [TargetModel], projects: [ScopeModel],
-   * isCacheDaemonRunning: boolean, isLoadIncomplete: boolean, isRefreshing: boolean}>}
+   * isCacheDaemonRunning: boolean, isLoadIncomplete: boolean, isCacheRefreshing: boolean}>}
   */
  async model({ search, scopes, availableSessions, types, page, pageSize }) {
    const isCacheRunningPromise = this.ipc.invoke('isCacheDaemonRunning');
@@ -113,7 +113,7 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
      query.filter = orgFilter;
    }
    let targets = await this.store.query('target', query);
-    const { totalItems, isLoadIncomplete, isRefreshing } = targets.meta;
+    const { totalItems, isLoadIncomplete, isCacheRefreshing } = targets.meta;
    // Filter out targets to which users do not have the connect ability
    targets = targets.filter((target) =>
      this.can.can('connect target', target),
@@ -148,7 +148,7 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
      projects,
      totalItems,
      isLoadIncomplete,
-      isRefreshing,
+      isCacheRefreshing,
      isCacheDaemonRunning: await isCacheRunningPromise,
    };
  }
@@ -56,9 +56,7 @@
        </Dropdown>
      </S.Generic>
    </Hds::SegmentedGroup>
-    <span>
-      <ToolbarRefresher @onClick={{route-action 'refreshAll'}} />
-    </span>
+    <ToolbarRefresher @onClick={{route-action 'refreshAll'}} />
  </div>

  <FilterTags @filters={{this.filters}} />
@@ -62,23 +62,21 @@
        </Dropdown>
      </S.Generic>
    </Hds::SegmentedGroup>
-    <span>
+    {{#if @model.isCacheRefreshing}}
+      <ToolbarRefresher @onClick={{route-action 'refreshAll'}}>
+        <Hds::TooltipButton
+          @text={{t 'states.incomplete-loading.refreshing.tooltip'}}
+        >
+          <Hds::Text::Body @tag='p' @color='faint'>
+            {{t 'states.incomplete-loading.refreshing.description'}}
+          </Hds::Text::Body>
+        </Hds::TooltipButton>
+      </ToolbarRefresher>
+    {{else}}
      <ToolbarRefresher @onClick={{route-action 'refreshAll'}} />
-    </span>
+    {{/if}}
  </div>
  <FilterTags @filters={{this.filters}} />
-  {{#if @model.isLoadIncomplete}}
-    <Hds::Alert @color='warning' @type='compact' as |A|>
-      <A.Description>{{t 'states.incomplete-loading.limit'}}</A.Description>
-    </Hds::Alert>
-  {{/if}}
-  {{#if @model.isRefreshing}}
-    <Hds::Alert @color='warning' @type='compact' as |A|>
-      <A.Description>{{t
-          'states.incomplete-loading.refreshing'
-        }}</A.Description>
-    </Hds::Alert>
-  {{/if}}
 {{/if}}

 {{#if @model.targets}}
@@ -174,6 +172,14 @@
      </B.Tr>
    </:body>
  </Hds::Table>
+  {{#if @model.isLoadIncomplete}}
+    <Hds::Alert @type='compact' as |A|>
+      <A.Description>{{t
+          'states.incomplete-loading.limit'
+          resultCount=@model.totalItems
+        }}</A.Description>
+    </Hds::Alert>
+  {{/if}}
  <Rose::Pagination
    @totalItems={{@model.totalItems}}
    @currentPage={{this.page}}