refactor: 💡 small text updates & loading state (#2410)

* refactor: 💡 small text updates & loading state

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:

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

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>

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')}}

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
+    );
+  }
 }

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(

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(

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;

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>

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>