From b40c53fb455f07c17bca73cd45fc7b8657317c3b Mon Sep 17 00:00:00 2001
From: Zhihe Li <zhihe.li@hashicorp.com>
Date: Fri, 20 Sep 2024 13:43:06 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Update=20alert=20designs?=
 =?UTF-8?q?=20(#2496)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/handlers/cache-daemon-handler.js    |  3 +-
 .../addon/components/loading-button/index.hbs | 17 +++-------
 .../components/toolbar-refresher/index.hbs    | 23 ++++++++-----
 .../components/toolbar-refresher/index.js     |  2 +-
 addons/core/addon/styles/addon.scss           | 24 ++++++-------
 .../components/loading-button-test.js         |  7 ++--
 addons/core/translations/states/en-us.yaml    |  6 ++--
 .../templates/scopes/scope/sessions/index.hbs |  4 +--
 .../scopes/scope/projects/targets/index.js    |  6 ++--
 .../scopes/scope/projects/sessions/index.hbs  |  4 +--
 .../scopes/scope/projects/targets/index.hbs   | 34 +++++++++++--------
 11 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/addons/api/addon/handlers/cache-daemon-handler.js b/addons/api/addon/handlers/cache-daemon-handler.js
index 21f543359..d712df086 100644
--- a/addons/api/addon/handlers/cache-daemon-handler.js
+++ b/addons/api/addon/handlers/cache-daemon-handler.js
@@ -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;
diff --git a/addons/core/addon/components/loading-button/index.hbs b/addons/core/addon/components/loading-button/index.hbs
index efa691339..48f2ecda8 100644
--- a/addons/core/addon/components/loading-button/index.hbs
+++ b/addons/core/addon/components/loading-button/index.hbs
@@ -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>
\ No newline at end of file
+/>
\ No newline at end of file
diff --git a/addons/core/addon/components/toolbar-refresher/index.hbs b/addons/core/addon/components/toolbar-refresher/index.hbs
index 41c7cf4b5..b81831782 100644
--- a/addons/core/addon/components/toolbar-refresher/index.hbs
+++ b/addons/core/addon/components/toolbar-refresher/index.hbs
@@ -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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/addons/core/addon/components/toolbar-refresher/index.js b/addons/core/addon/components/toolbar-refresher/index.js
index 697835097..528b4483c 100644
--- a/addons/core/addon/components/toolbar-refresher/index.js
+++ b/addons/core/addon/components/toolbar-refresher/index.js
@@ -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() {
diff --git a/addons/core/addon/styles/addon.scss b/addons/core/addon/styles/addon.scss
index 544912585..8f9841175 100644
--- a/addons/core/addon/styles/addon.scss
+++ b/addons/core/addon/styles/addon.scss
@@ -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;
+  }
+}
diff --git a/addons/core/tests/integration/components/loading-button-test.js b/addons/core/tests/integration/components/loading-button-test.js
index 737abc8f7..d45c5856f 100644
--- a/addons/core/tests/integration/components/loading-button-test.js
+++ b/addons/core/tests/integration/components/loading-button-test.js
@@ -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');
   });
 });
diff --git a/addons/core/translations/states/en-us.yaml b/addons/core/translations/states/en-us.yaml
index 13eabdb4d..fcfa96f4a 100644
--- a/addons/core/translations/states/en-us.yaml
+++ b/addons/core/translations/states/en-us.yaml
@@ -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
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 9fc7ba399..bf4c92d1f 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -73,9 +73,7 @@
             />
           </S.Generic>
         </Hds::SegmentedGroup>
-        <span>
-          <ToolbarRefresher @onClick={{this.refresh}} />
-        </span>
+        <ToolbarRefresher @onClick={{this.refresh}} />
       </div>
 
       <FilterTags @filters={{this.filters}} />
diff --git a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
index a3d3642c0..24011ddd0 100644
--- a/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
+++ b/ui/desktop/app/routes/scopes/scope/projects/targets/index.js
@@ -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,
     };
   }
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index 6775b115c..ce5ada9e2 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -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}} />
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index 829284296..b1cc502e1 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -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}}