From 13da35c06b5cb22d71ec489e77e8cac49a824b78 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 12 Apr 2024 10:43:27 -0500
Subject: [PATCH] Icu 13357 create loading screen for admin UI list routes
 (#2231)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* test: 💍 fix failing tests

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357

* feat: 🎸 add generic loading indicator for admin ui

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357

* feat: 🎸 add custom loading logic for search and filtering

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357

* chore: 🤖 fix lint error

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357

* refactor: 💡 remove commented helper for sessions list

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357

* style: 💄 update loading indicator margin to relative unit

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357

* refactor: 💡 remove unneeded custom loading action

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-13357
---
 addons/core/translations/states/en-us.yaml         |  1 +
 ui/admin/app/routes/scopes/scope/sessions/index.js | 12 ++----------
 ui/admin/app/styles/app.scss                       |  5 +++++
 ui/admin/app/templates/scopes/scope/loading.hbs    |  4 ++++
 4 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100644 ui/admin/app/templates/scopes/scope/loading.hbs

diff --git a/addons/core/translations/states/en-us.yaml b/addons/core/translations/states/en-us.yaml
index dad826358..5ca603c38 100644
--- a/addons/core/translations/states/en-us.yaml
+++ b/addons/core/translations/states/en-us.yaml
@@ -17,3 +17,4 @@ failed: Failed
 loading:
   title: Loading all items...
   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.
diff --git a/ui/admin/app/routes/scopes/scope/sessions/index.js b/ui/admin/app/routes/scopes/scope/sessions/index.js
index 5621ec9ee..fa10af493 100644
--- a/ui/admin/app/routes/scopes/scope/sessions/index.js
+++ b/ui/admin/app/routes/scopes/scope/sessions/index.js
@@ -44,6 +44,8 @@ export default class ScopesScopeSessionsIndexRoute extends Route {
   associatedUsers = [];
   associatedTargets = [];
 
+  // =methods
+
   /**
    * Loads all sessions under the current scope and encapsulates them into
    * an array of objects containing their associated users and targets.
@@ -116,16 +118,6 @@ export default class ScopesScopeSessionsIndexRoute extends Route {
     });
   }
 
-  // async canListUsers(orgId) {
-  //   const orgScope = await this.store.findRecord('scope', orgId);
-  //   const globalScope = await this.store.findRecord('scope', 'global');
-
-  //   return (
-  //     this.can.can('list model', globalScope, { collection: 'users' }) &&
-  //     this.can.can('list model', orgScope, { collection: 'users' })
-  //   );
-  // }
-
   /**
    * Get all the users but only load them once when entering the route.
    * @param scope
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 6908e71ff..147d69faa 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -1005,3 +1005,8 @@
 .add-policy-link {
   margin-bottom: 1.5rem;
 }
+
+// generic loading indicator
+.loading-indicator {
+  margin-top: 20%;
+}
diff --git a/ui/admin/app/templates/scopes/scope/loading.hbs b/ui/admin/app/templates/scopes/scope/loading.hbs
new file mode 100644
index 000000000..49241fc3d
--- /dev/null
+++ b/ui/admin/app/templates/scopes/scope/loading.hbs
@@ -0,0 +1,4 @@
+<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