From 25a99a4fb615dbb7d17d792463310e1bf12e4539 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:20:51 -0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20small=20text=20updat?=
 =?UTF-8?q?es=20&=20loading=20state=20(#2410)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 small text updates & loading state
---
 addons/core/translations/resources/en-us.yaml | 10 ++++----
 .../form/role/manage-custom-scopes/index.hbs  | 10 ++++++--
 .../form/role/manage-org-projects/index.hbs   | 18 ++++++++++----
 .../form/role/manage-scopes/index.hbs         | 12 ++++++++--
 .../app/routes/scopes/scope/roles/role.js     | 24 +++++++++++++++++++
 .../manage-scopes/manage-custom-scopes.js     |  1 +
 .../role/manage-scopes/manage-org-projects.js |  3 ++-
 .../routes/scopes/scope/roles/role/scopes.js  |  3 ++-
 .../scopes/scope/roles/role/loading.hbs       |  9 +++++++
 .../roles/role/manage-scopes/loading.hbs      |  9 +++++++
 10 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 ui/admin/app/templates/scopes/scope/roles/role/loading.hbs
 create mode 100644 ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/loading.hbs

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 8ad847c93..ff85c94f4 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -586,7 +586,7 @@ role:
         description: Select which scopes you want to add to this role.
         success: Scope selection saved
       keywords-selected:
-        description: Just a heads up, you can't select both add all descendants and add all children. You can only choose one or the other.
+        description: Just a heads up, you can't select both <strong>add all descendants</strong> and <strong>add all children</strong>. You can only choose one or the other.
         link: You can read more about it here
       manage-custom-scopes:
         title: Manage Custom Scopes
@@ -596,9 +596,9 @@ role:
         title: Manage Projects in {orgDisplayName}
         description: Select which projects in this org you want to apply to this role's grant sets.
         success: Projects in org have been updated
-      no-org-scopes:
-        title: No Org Scopes Available
-        description: Org scopes are not available for assignment.
+      no-scopes:
+        title: No {type} Scopes Available
+        description: '{type} scopes are not available for assignment.'
     keywords:
       this:
         sub-title: This scope
@@ -618,7 +618,7 @@ role:
     form:
       this:
         label: Add this scope
-        help: Add this scope.
+        help: Add {scopeDisplayName} scope.
       children:
         label: Add all children
         help:
diff --git a/ui/admin/app/components/form/role/manage-custom-scopes/index.hbs b/ui/admin/app/components/form/role/manage-custom-scopes/index.hbs
index b7cd2495c..5faf3ffff 100644
--- a/ui/admin/app/components/form/role/manage-custom-scopes/index.hbs
+++ b/ui/admin/app/components/form/role/manage-custom-scopes/index.hbs
@@ -108,10 +108,16 @@
 {{else}}
   <Hds::ApplicationState as |A|>
     <A.Header
-      @title={{t 'resources.role.scope.messages.no-org-scopes.title'}}
+      @title={{t
+        'resources.role.scope.messages.no-scopes.title'
+        type=(t 'resources.org.title')
+      }}
     />
     <A.Body
-      @text={{t 'resources.role.scope.messages.no-org-scopes.description'}}
+      @text={{t
+        'resources.role.scope.messages.no-scopes.description'
+        type=(t 'resources.org.title')
+      }}
     />
     <A.Footer as |F|>
       <F.LinkStandalone
diff --git a/ui/admin/app/components/form/role/manage-org-projects/index.hbs b/ui/admin/app/components/form/role/manage-org-projects/index.hbs
index 2cb683ce8..743c71398 100644
--- a/ui/admin/app/components/form/role/manage-org-projects/index.hbs
+++ b/ui/admin/app/components/form/role/manage-org-projects/index.hbs
@@ -64,7 +64,7 @@
         </:body>
       </Hds::Table>
       <Rose::Pagination
-        @model={{array @model.role.id @model.orgScope.id}}
+        @model={{@model.orgScope.id}}
         @totalItems={{@model.totalItems}}
         @currentPage={{@page}}
         @currentPageSize={{@pageSize}}
@@ -90,16 +90,26 @@
 {{else}}
   <Hds::ApplicationState as |A|>
     <A.Header
-      @title={{t 'resources.role.scope.messages.no-org-scopes.title'}}
+      @title={{t
+        'resources.role.scope.messages.no-scopes.title'
+        type=(t 'resources.project.title')
+      }}
     />
     <A.Body
-      @text={{t 'resources.role.scope.messages.no-org-scopes.description'}}
+      @text={{t
+        'resources.role.scope.messages.no-scopes.description'
+        type=(t 'resources.project.title')
+      }}
     />
     <A.Footer as |F|>
       <F.LinkStandalone
         @icon='arrow-left'
         @text={{t 'actions.back'}}
-        @route='scopes.scope.roles.role.manage-scopes'
+        @route={{if
+          @model.role.scope.isGlobal
+          'scopes.scope.roles.role.manage-scopes.manage-custom-scopes'
+          'scopes.scope.roles.role.manage-scopes'
+        }}
       />
     </A.Footer>
   </Hds::ApplicationState>
diff --git a/ui/admin/app/components/form/role/manage-scopes/index.hbs b/ui/admin/app/components/form/role/manage-scopes/index.hbs
index d98e2ec81..fb745d512 100644
--- a/ui/admin/app/components/form/role/manage-scopes/index.hbs
+++ b/ui/admin/app/components/form/role/manage-scopes/index.hbs
@@ -20,7 +20,12 @@
     as |F|
   >
     <F.Label>{{t 'resources.role.scope.form.this.label'}}</F.Label>
-    <F.HelperText>{{t 'resources.role.scope.form.this.help'}}</F.HelperText>
+    <F.HelperText>{{t
+        'resources.role.scope.form.this.help'
+        scopeDisplayName=(if
+          @model.scope.name @model.scope.name @model.scope.id
+        )
+      }}</F.HelperText>
   </Hds::Form::Toggle::Field>
 
   <Hds::Form::Toggle::Field
@@ -58,7 +63,10 @@
   {{#if this.showAlert}}
     <Hds::Alert @type='compact' as |A|>
       <A.Description>
-        {{t 'resources.role.scope.messages.keywords-selected.description'}}
+        {{t
+          'resources.role.scope.messages.keywords-selected.description'
+          htmlSafe=true
+        }}
         <Hds::Link::Inline
           @color='secondary'
           @href={{(doc-url 'role.add-grant-scopes')}}
diff --git a/ui/admin/app/routes/scopes/scope/roles/role.js b/ui/admin/app/routes/scopes/scope/roles/role.js
index e15c1ef14..c12f8ebb1 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role.js
@@ -5,6 +5,7 @@
 
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ScopesScopeRolesRoleRoute extends Route {
   // =services
@@ -40,4 +41,27 @@ export default class ScopesScopeRolesRoleRoute extends Route {
       this.router.replaceWith(transition.to.name, role.scopeID, role.id);
     }
   }
+
+  // =actions
+
+  /**
+   * Event to determine whether the loading template should be shown.
+   * Only show the loading template during initial loads for specified
+   * routes. Don't show it when a user is just searching or
+   * filtering on the same page as it can be jarring.
+   * @param transition
+   * @returns {boolean}
+   */
+  @action
+  loading(transition) {
+    const to = transition.to?.name;
+    const from = transition.from?.name;
+    return (
+      (to === 'scopes.scope.roles.role.index' ||
+        to === 'scopes.scope.roles.role.manage-scopes.manage-custom-scopes' ||
+        to === 'scopes.scope.roles.role.manage-scopes.manage-org-projects' ||
+        to === 'scopes.scope.roles.role.scopes') &&
+      from !== to
+    );
+  }
 }
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-custom-scopes.js b/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-custom-scopes.js
index 807a7f271..c6821407b 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-custom-scopes.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-custom-scopes.js
@@ -46,6 +46,7 @@ export default class ScopesScopeRolesRoleManageScopesManageCustomScopesRoute ext
       query: { search, filters },
       page,
       pageSize,
+      recursive: true,
     });
     const totalItems = orgScopes.meta?.totalItems;
     const totalItemsCount = await this.getTotalItemsCount(
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-org-projects.js b/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-org-projects.js
index 82f38b0b8..64e89984c 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-org-projects.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/manage-scopes/manage-org-projects.js
@@ -40,10 +40,11 @@ export default class ScopesScopeRolesRoleManageScopesManageOrgProjectsRoute exte
     };
 
     const projectScopes = await this.store.query('scope', {
-      scope_id: org_id,
+      scope_id: role.scope.id,
       query: { search, filters },
       page,
       pageSize,
+      recursive: true,
     });
     const totalItems = projectScopes.meta?.totalItems;
     const totalItemsCount = await this.getTotalItemsCount(
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/scopes.js b/ui/admin/app/routes/scopes/scope/roles/role/scopes.js
index 64c0c82c1..be6b23205 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/scopes.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/scopes.js
@@ -71,10 +71,11 @@ export default class ScopesScopeRolesRoleScopesRoute extends Route {
       allGrantScopes = await this.getAllGrantScopes(filters.id);
 
       const queriedScopes = await this.store.query('scope', {
-        scope_id: 'global',
+        scope_id: role.scope.id,
         query: { search, filters },
         page,
         pageSize: pageSize - totalItems,
+        recursive: true,
       });
       grantScopes =
         page === 1 ? [...grantScopes, ...queriedScopes] : queriedScopes;
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/loading.hbs b/ui/admin/app/templates/scopes/scope/roles/role/loading.hbs
new file mode 100644
index 000000000..ea9fdaa6f
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/roles/role/loading.hbs
@@ -0,0 +1,9 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Hds::ApplicationState class='loading-indicator' as |A|>
+  <A.Header @title={{t 'states.loading.title'}} @icon='loading' />
+  <A.Body @text={{t 'states.loading.generic-description'}} />
+</Hds::ApplicationState>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/loading.hbs b/ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/loading.hbs
new file mode 100644
index 000000000..ea9fdaa6f
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/roles/role/manage-scopes/loading.hbs
@@ -0,0 +1,9 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Hds::ApplicationState class='loading-indicator' as |A|>
+  <A.Header @title={{t 'states.loading.title'}} @icon='loading' />
+  <A.Body @text={{t 'states.loading.generic-description'}} />
+</Hds::ApplicationState>
\ No newline at end of file