Icu 12137 add additional session sorting and add default filters (#2084)

* chore: 🤖 add additional session sorting and add default filters

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

* test: 💍 fix test

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

* Update ui/desktop/app/controllers/scopes/scope/projects/sessions/index.js

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

---------

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

addons/core/addon/components/filter-tags/index.js

@@ -11,9 +11,10 @@ export default class FilterTagsIndexComponent extends Component {
   // =attributes
 
   get filters() {
-    return Object.entries(this.args.filters).flatMap(([key, value]) => {
+    const { allFilters, selectedFilters } = this.args.filters;
+    return Object.entries(allFilters).flatMap(([key, value]) => {
       assert(`Tags must be an array for key ${key}`, Array.isArray(value));
-      const paramsSet = new Set(this.getCurrentQueryParams(key));
+      const paramsSet = new Set(selectedFilters[key]);
       const filters = value.filter((item) => paramsSet.has(item.id));
 
       return filters.map((item) => ({
@@ -26,24 +27,13 @@ export default class FilterTagsIndexComponent extends Component {
 
   // =methods
 
-  getCurrentQueryParams(key) {
-    let queryParamValue;
-    try {
-      queryParamValue = JSON.parse(this.router.currentRoute.queryParams[key]);
-    } catch {
-      // We should never get an error as we are always asserting the queryParam to an array
-      queryParamValue = [];
-    }
-    return queryParamValue;
-  }
-
   /**
    * Clears a single filter from queryParams for current route
    * @param {object} tag
    */
   @action
   removeFilter(tag) {
-    const queryParamValue = this.getCurrentQueryParams(tag.type);
+    const queryParamValue = this.args.filters.selectedFilters[tag.type];
 
     const queryParams = {
       [tag.type]: queryParamValue.filter((item) => item !== tag.id),
@@ -57,10 +47,13 @@ export default class FilterTagsIndexComponent extends Component {
    */
   @action
   clearAllFilters() {
-    const queryParams = Object.keys(this.args.filters).reduce((params, key) => {
-      params[key] = [];
-      return params;
-    }, {});
+    const queryParams = Object.keys(this.args.filters.allFilters).reduce(
+      (params, key) => {
+        params[key] = [];
+        return params;
+      },
+      {},
+    );
 
     this.router.replaceWith({ queryParams });
   }

addons/core/tests/integration/components/filter-tags/index-test.js

@@ -3,25 +3,16 @@ import { setupRenderingTest } from 'ember-qunit';
 import { setupIntl } from 'ember-intl/test-support';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
-import sinon from 'sinon';
 
 module('Integration | Component | filter-tags/index', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks);
 
-  hooks.afterEach(function () {
-    sinon.restore();
-  });
-
   test('it renders', async function (assert) {
-    const router = this.owner.lookup('service:router');
-    sinon.stub(router, 'currentRoute').value({
-      queryParams: {
-        scopes: JSON.stringify(['1']),
-      },
+    this.set('filter', {
+      allFilters: { scopes: [{ id: '1', name: 'Project 1' }] },
+      selectedFilters: { scopes: ['1'] },
     });
-
-    this.set('filter', { scopes: [{ id: '1', name: 'Project 1' }] });
     await render(hbs`<FilterTags @filters={{this.filter}} />`);
 
     assert.dom('.hds-tag__text').hasText('Project 1');

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

@@ -26,7 +26,7 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
   ];
 
   @tracked targets = [];
-  @tracked status = [];
+  @tracked status = ['active', 'pending', 'canceling'];
   @tracked scopes = [];
   @tracked page = 1;
   @tracked pageSize = 10;
@@ -34,11 +34,15 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
   // =methods
 
   /**
-   * A list of sessions sorted by created time
+   * A list of sessions sorted by created time then sorted by availability
    * @type {[SessionModel]}
    */
   get sortedSessions() {
-    return orderBy(this.model.sessions, 'created_time', 'desc');
+    return orderBy(
+      this.model.sessions,
+      ['isAvailable', 'created_time'],
+      ['desc', 'desc'],
+    );
   }
 
   /**
@@ -84,9 +88,16 @@ export default class ScopesScopeProjectsSessionsIndexController extends Controll
    */
   get filters() {
     return {
-      targets: this.availableTargets,
-      status: this.sessionStatusOptions,
-      scopes: this.availableScopes,
+      allFilters: {
+        targets: this.availableTargets,
+        status: this.sessionStatusOptions,
+        scopes: this.availableScopes,
+      },
+      selectedFilters: {
+        targets: this.targets,
+        status: this.status,
+        scopes: this.scopes,
+      },
     };
   }
 

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

@@ -141,9 +141,16 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
    */
   get filters() {
     return {
-      scopes: this.availableScopes,
-      availableSessions: this.availableSessionOptions,
-      types: this.targetTypeOptions,
+      allFilters: {
+        scopes: this.availableScopes,
+        availableSessions: this.availableSessionOptions,
+        types: this.targetTypeOptions,
+      },
+      selectedFilters: {
+        scopes: this.scopes,
+        availableSessions: this.availableSessions,
+        types: this.types,
+      },
     };
   }