refactor: 💡 Optimize the retrieval of targets for scopes filter (#2047)

ui/desktop/app/controllers/scopes/scope/projects/targets/index.js

@@ -52,15 +52,13 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
    * @returns {[ScopeModel]}
    */
   get availableScopes() {
-    const targetScopeIds = this.model.allTargets.map(
-      (target) => target.scope.id,
+    const uniqueTargetScopeIds = new Set(
+      this.model.allTargets.map((target) => target.scope.id),
     );
 
-    let availableScopes = this.model.projects.filter((project) =>
-      targetScopeIds.includes(project.id),
+    return this.model.projects.filter((project) =>
+      uniqueTargetScopeIds.has(project.id),
     );
-
-    return availableScopes;
   }
 
   /**

ui/desktop/app/routes/scopes/scope/projects/targets/index.js

@@ -40,6 +40,8 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
     },
   };
 
+  allTargets;
+
   // =methods
 
   /**
@@ -53,9 +55,10 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
    * Loads queried targets, the number of targets under current scope, and
    * projects for filtering options.
    *
-   * @returns {Promise<{totalItems: number, targets: [TargetModel], projects: [ScopeModel]}>, allTargets: [TargetModel]}
+   * @returns {Promise<{totalItems: number, targets: [TargetModel], projects: [ScopeModel], allTargets: [TargetModel] }> }
    */
-  async model({ search, scopes, page, pageSize }) {
+  async model({ search, scopes, page, pageSize }, transition) {
+    const from = transition.from?.name;
     // TODO: Filter targets by scope we're in manually
     // const { id: scope_id } = this.modelFor('scopes.scope');
     const filters = { scope_id: [] };
@@ -96,15 +99,22 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
       targetsWithSessions.push({ target, sessions });
     }
 
-    // Query all targets for defining filtering values
-    const options = { pushToStore: false };
-    let allTargets = await this.store.query('target', {}, options);
+    // Query all targets for defining filtering values if entering route for first time
+    if (from !== 'scopes.scope.projects.targets.index') {
+      const options = { pushToStore: false };
+      const allTargets = await this.store.query('target', {}, options);
 
-    // Filter out targets to which users do not have the connect ability
-    allTargets = allTargets.filter((target) =>
-      target.authorized_actions.includes('authorize-session'),
-    );
+      // Filter out targets to which users do not have the connect ability
+      this.allTargets = allTargets.filter((target) =>
+        target.authorized_actions.includes('authorize-session'),
+      );
+    }
 
-    return { targets: targetsWithSessions, projects, allTargets, totalItems };
+    return {
+      targets: targetsWithSessions,
+      projects,
+      allTargets: this.allTargets,
+      totalItems,
+    };
   }
 }

ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs

@@ -17,6 +17,7 @@
     {{#if (or @model.targets this.search)}}
       <Hds::SegmentedGroup as |S|>
         <S.TextInput
+          @value={{this.search}}
           @type='search'
           placeholder={{t 'actions.search'}}
           aria-label={{t 'actions.search'}}