From 7f39915f10da1d98f5e835e02e46c39015449798 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 1 May 2023 14:28:09 -0600
Subject: [PATCH 01/19] initial WIP glimmerize the controller

---
 .../vault/cluster/secrets/backends.js         | 61 ++++++++++++-------
 .../vault/cluster/secrets/backends.hbs        | 16 +++++
 2 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index fd1ef17c794d..d2cb4f20b9d8 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -2,36 +2,36 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
-import { filterBy } from '@ember/object/computed';
-import { computed } from '@ember/object';
+/* eslint ember/no-computed-properties-in-native-classes: 'warn' */
 import Controller from '@ember/controller';
-import { task } from 'ember-concurrency';
-import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { filterBy } from '@ember/object/computed';
+import { dropTask, task } from 'ember-concurrency';
+import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
+
 const LINKED_BACKENDS = supportedSecretBackends();
 
-export default Controller.extend({
-  flashMessages: service(),
-  displayableBackends: filterBy('model', 'shouldIncludeInList'),
+export default class VaultClusterSecretsBackendController extends Controller {
+  @service flashMessages;
+  @filterBy('model', 'shouldIncludeInList') displayableBackends;
+
+  @tracked secretEngineOptions = [];
 
-  supportedBackends: computed('displayableBackends', 'displayableBackends.[]', function () {
+  get supportedBackends() {
     return (this.displayableBackends || [])
       .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
       .sortBy('id');
-  }),
+  }
 
-  unsupportedBackends: computed(
-    'displayableBackends',
-    'displayableBackends.[]',
-    'supportedBackends',
-    'supportedBackends.[]',
-    function () {
-      return (this.displayableBackends || []).slice().removeObjects(this.supportedBackends).sortBy('id');
-    }
-  ),
+  get unsupportedBackends() {
+    return (this.displayableBackends || []).slice().removeObjects(this.supportedBackends).sortBy('id');
+  }
 
-  disableEngine: task(function* (engine) {
+  @task
+  @dropTask
+  *disableEngine(engine) {
     const { engineType, path } = engine;
     try {
       yield engine.destroyRecord();
@@ -41,5 +41,22 @@ export default Controller.extend({
         `There was an error disabling the ${engineType} Secrets Engine at ${path}: ${err.errors.join(' ')}.`
       );
     }
-  }).drop(),
-});
+  }
+
+  @action
+  selectEngineType([engine]) {
+    this.engineType = engine;
+    if (!engine) {
+      this.secretEngineOptions = [];
+      // // on clear, also make sure auth method is cleared
+      // this.selectedAuthMethod = null;
+    } else {
+      // Side effect: set auth namespaces
+      // const mounts = this.filteredActivityByNamespace.mounts?.map((mount) => ({
+      //   id: mount.label,
+      //   name: mount.label,
+      // }));
+      this.secretEngineOptions = ['Test', 'test'];
+    }
+  }
+}
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index e4bd54c5926d..31611a848664 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -7,6 +7,21 @@
 </PageHeader>
 
 <Toolbar>
+  <ToolbarFilters>
+    {{#if true}}
+      <SearchSelect
+        @id="namespace-search-select"
+        @options={{array "blah" "blah"}}
+        @selectLimit="1"
+        @disallowNewItems={{true}}
+        @fallbackComponent="input-search"
+        @onChange={{this.selectEngineType}}
+        @placeholder={{"Filter by engine type"}}
+        @displayInherit={{true}}
+        class="is-marginless"
+      />
+    {{/if}}
+  </ToolbarFilters>
   <ToolbarActions>
     <ToolbarLink @route="vault.cluster.settings.mount-secret-backend" @type="add" data-test-enable-engine>
       Enable new engine
@@ -57,6 +72,7 @@
                     />
                   </li>
                 {{/if}}
+                {{! ARG THERE IS NO ITEM??? }}
                 {{#if this.item.updatePath.isPending}}
                   <li class="action">
                     <button disabled type="button" class="link button is-loading is-transparent">

From 152aac3fc24045b2c64449c2a136a7231a8ae9dd Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 2 May 2023 11:33:37 -0600
Subject: [PATCH 02/19] wip got the filter engine type by supported backends
 working

---
 .../vault/cluster/secrets/backends.js         | 38 ++++++++++++-------
 .../vault/cluster/secrets/backends.hbs        | 24 ++++++------
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index d2cb4f20b9d8..52ebacbbb274 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -18,15 +18,28 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @filterBy('model', 'shouldIncludeInList') displayableBackends;
 
   @tracked secretEngineOptions = [];
+  @tracked selectedEngineType = null;
+  @tracked selectedEngineName = null;
 
   get supportedBackends() {
+    // if list has been filtered by engineType
+    if (this.selectedEngineType) {
+      return (this.displayableBackends || [])
+        .filter((backend) => this.selectedEngineType === backend.get('engineType'))
+        .sortBy('id');
+    }
     return (this.displayableBackends || [])
       .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
       .sortBy('id');
   }
 
   get unsupportedBackends() {
-    return (this.displayableBackends || []).slice().removeObjects(this.supportedBackends).sortBy('id');
+    return (
+      (this.displayableBackends || [])
+        // exact same as supportedBackends but negated
+        .filter((backend) => !LINKED_BACKENDS.includes(backend.get('engineType')))
+        .sortBy('id')
+    );
   }
 
   @task
@@ -43,20 +56,17 @@ export default class VaultClusterSecretsBackendController extends Controller {
     }
   }
 
+  get secretEngineArray() {
+    // if list has not been filtered by name or engineType
+    return this.displayableBackends.map((modelObject) => ({
+      name: modelObject.engineType,
+      id: modelObject.engineType,
+    }));
+  }
+
   @action
   selectEngineType([engine]) {
-    this.engineType = engine;
-    if (!engine) {
-      this.secretEngineOptions = [];
-      // // on clear, also make sure auth method is cleared
-      // this.selectedAuthMethod = null;
-    } else {
-      // Side effect: set auth namespaces
-      // const mounts = this.filteredActivityByNamespace.mounts?.map((mount) => ({
-      //   id: mount.label,
-      //   name: mount.label,
-      // }));
-      this.secretEngineOptions = ['Test', 'test'];
-    }
+    this.selectedEngineType = engine;
+    // filter the list
   }
 }
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 31611a848664..20d91b009da8 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -8,19 +8,17 @@
 
 <Toolbar>
   <ToolbarFilters>
-    {{#if true}}
-      <SearchSelect
-        @id="namespace-search-select"
-        @options={{array "blah" "blah"}}
-        @selectLimit="1"
-        @disallowNewItems={{true}}
-        @fallbackComponent="input-search"
-        @onChange={{this.selectEngineType}}
-        @placeholder={{"Filter by engine type"}}
-        @displayInherit={{true}}
-        class="is-marginless"
-      />
-    {{/if}}
+    <SearchSelect
+      @id="namespace-search-select"
+      @options={{this.secretEngineArray}}
+      @selectLimit="1"
+      @disallowNewItems={{true}}
+      @fallbackComponent="input-search"
+      @onChange={{this.selectEngineType}}
+      @placeholder={{"Filter by engine type"}}
+      @displayInherit={{true}}
+      class="is-marginless"
+    />
   </ToolbarFilters>
   <ToolbarActions>
     <ToolbarLink @route="vault.cluster.settings.mount-secret-backend" @type="add" data-test-enable-engine>

From 252c3968ce927f83941ca8fa2fbe08c8a88fcbec Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 2 May 2023 12:16:33 -0600
Subject: [PATCH 03/19] got filter by engine type working

---
 .../vault/cluster/secrets/backends.js         | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index 52ebacbbb274..47cef767b806 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -21,12 +21,32 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @tracked selectedEngineType = null;
   @tracked selectedEngineName = null;
 
+  // ARG TODO cleaner way to write this??
+  filterByEngineType(getSupportedBackends = true) {
+    // 1. Need to confirm if the selected engineType is a supported engine type or unsupported
+    const isSupported = LINKED_BACKENDS.includes(this.selectedEngineType);
+    if (isSupported) {
+      // 2. if the filtered engineType is supported return a value only if the call is coming from get supportedBackends
+      return getSupportedBackends
+        ? this.displayableBackends
+            .filter((backend) => this.selectedEngineType === backend.get('engineType'))
+            .sortBy('id')
+        : [];
+    } else {
+      // 3. if the filtered engineType is unsupported return nothing if the call is coming from the get supportedBackend but return if call is from  get unsupportedBackends
+      return getSupportedBackends
+        ? []
+        : this.displayableBackends
+            // exact same as supportedBackends but negated
+            .filter((backend) => this.selectedEngineType === backend.get('engineType'))
+            .sortBy('id');
+    }
+  }
+
   get supportedBackends() {
     // if list has been filtered by engineType
     if (this.selectedEngineType) {
-      return (this.displayableBackends || [])
-        .filter((backend) => this.selectedEngineType === backend.get('engineType'))
-        .sortBy('id');
+      return this.filterByEngineType();
     }
     return (this.displayableBackends || [])
       .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
@@ -34,6 +54,10 @@ export default class VaultClusterSecretsBackendController extends Controller {
   }
 
   get unsupportedBackends() {
+    // if list has been filtered by engineType
+    if (this.selectedEngineType) {
+      return this.filterByEngineType(false);
+    }
     return (
       (this.displayableBackends || [])
         // exact same as supportedBackends but negated

From 4e9682e77906c61d0ce067138918b3b53400780c Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 2 May 2023 12:56:10 -0600
Subject: [PATCH 04/19] wip need to refactor but working ish for name

---
 .../vault/cluster/secrets/backends.js         | 101 ++++++++++++------
 .../vault/cluster/secrets/backends.hbs        |  15 ++-
 2 files changed, 80 insertions(+), 36 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index 47cef767b806..d567ab041192 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -21,7 +21,48 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @tracked selectedEngineType = null;
   @tracked selectedEngineName = null;
 
-  // ARG TODO cleaner way to write this??
+  get supportedBackends() {
+    if (this.selectedEngineType) {
+      return this.filterByEngineType();
+    }
+    if (this.selectedEngineName) {
+      return this.filterByEngineName();
+    }
+    return (this.displayableBackends || [])
+      .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
+      .sortBy('id');
+  }
+
+  get unsupportedBackends() {
+    if (this.selectedEngineType) {
+      return this.filterByEngineType(false);
+    }
+    if (this.selectedEngineType) {
+      return this.filterByEngineName(false);
+    }
+    return (
+      (this.displayableBackends || [])
+        // exact same as supportedBackends but negated
+        .filter((backend) => !LINKED_BACKENDS.includes(backend.get('engineType')))
+        .sortBy('id')
+    );
+  }
+
+  // FOR FILTER LISTS
+  get secretEngineArrayByType() {
+    return this.displayableBackends.map((modelObject) => ({
+      name: modelObject.engineType,
+      id: modelObject.engineType,
+    }));
+  }
+
+  get secretEngineArrayByName() {
+    return this.displayableBackends.map((modelObject) => ({
+      name: modelObject.id,
+      id: modelObject.id,
+    }));
+  }
+
   filterByEngineType(getSupportedBackends = true) {
     // 1. Need to confirm if the selected engineType is a supported engine type or unsupported
     const isSupported = LINKED_BACKENDS.includes(this.selectedEngineType);
@@ -43,27 +84,35 @@ export default class VaultClusterSecretsBackendController extends Controller {
     }
   }
 
-  get supportedBackends() {
-    // if list has been filtered by engineType
-    if (this.selectedEngineType) {
-      return this.filterByEngineType();
+  filterByEngineName(getSupportedBackends = true) {
+    // 1. check if the engine is supported. We only have the name so we need to return the engineType.
+    const engineObject = this.displayableBackends.find(
+      (modelObject) => modelObject.id === this.selectedEngineName
+    );
+    const engineType = engineObject.engineType;
+    const isSupported = LINKED_BACKENDS.includes(engineObject.engineType);
+    if (isSupported) {
+      return getSupportedBackends
+        ? this.displayableBackends.filter((backend) => engineType === backend.get('engineType')).sortBy('id')
+        : [];
+    } else {
+      return getSupportedBackends
+        ? []
+        : this.displayableBackends
+            // exact same as supportedBackends but negated
+            .filter((backend) => engineType === backend.get('engineType'))
+            .sortBy('id');
     }
-    return (this.displayableBackends || [])
-      .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
-      .sortBy('id');
   }
 
-  get unsupportedBackends() {
-    // if list has been filtered by engineType
-    if (this.selectedEngineType) {
-      return this.filterByEngineType(false);
-    }
-    return (
-      (this.displayableBackends || [])
-        // exact same as supportedBackends but negated
-        .filter((backend) => !LINKED_BACKENDS.includes(backend.get('engineType')))
-        .sortBy('id')
-    );
+  @action
+  filterEngineType([type]) {
+    this.selectedEngineType = type;
+  }
+
+  @action
+  filterEngineName([name]) {
+    this.selectedEngineName = name;
   }
 
   @task
@@ -79,18 +128,4 @@ export default class VaultClusterSecretsBackendController extends Controller {
       );
     }
   }
-
-  get secretEngineArray() {
-    // if list has not been filtered by name or engineType
-    return this.displayableBackends.map((modelObject) => ({
-      name: modelObject.engineType,
-      id: modelObject.engineType,
-    }));
-  }
-
-  @action
-  selectEngineType([engine]) {
-    this.selectedEngineType = engine;
-    // filter the list
-  }
 }
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 20d91b009da8..227e6a6653bf 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -9,16 +9,25 @@
 <Toolbar>
   <ToolbarFilters>
     <SearchSelect
-      @id="namespace-search-select"
-      @options={{this.secretEngineArray}}
+      @options={{this.secretEngineArrayByType}}
       @selectLimit="1"
       @disallowNewItems={{true}}
       @fallbackComponent="input-search"
-      @onChange={{this.selectEngineType}}
+      @onChange={{this.filterEngineType}}
       @placeholder={{"Filter by engine type"}}
       @displayInherit={{true}}
       class="is-marginless"
     />
+    <SearchSelect
+      @options={{this.secretEngineArrayByName}}
+      @selectLimit="1"
+      @disallowNewItems={{true}}
+      @fallbackComponent="input-search"
+      @onChange={{this.filterEngineName}}
+      @placeholder={{"Filter by name"}}
+      @displayInherit={{true}}
+      class="is-marginless has-left-padding-s"
+    />
   </ToolbarFilters>
   <ToolbarActions>
     <ToolbarLink @route="vault.cluster.settings.mount-secret-backend" @type="add" data-test-enable-engine>

From e54db03b178166894bfa61c6187bc23dcc60c9a4 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 2 May 2023 20:08:16 -0600
Subject: [PATCH 05/19] wip working state with both filters, does not work if
 both fiters are set

---
 .../vault/cluster/secrets/backends.js         | 88 +++++--------------
 ui/app/models/secret-engine.js                |  7 ++
 .../vault/cluster/secrets/backends.hbs        | 59 ++-----------
 3 files changed, 38 insertions(+), 116 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index d567ab041192..0c01e36ca173 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -9,9 +9,6 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { filterBy } from '@ember/object/computed';
 import { dropTask, task } from 'ember-concurrency';
-import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
-
-const LINKED_BACKENDS = supportedSecretBackends();
 
 export default class VaultClusterSecretsBackendController extends Controller {
   @service flashMessages;
@@ -21,31 +18,32 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @tracked selectedEngineType = null;
   @tracked selectedEngineName = null;
 
-  get supportedBackends() {
-    if (this.selectedEngineType) {
-      return this.filterByEngineType();
-    }
-    if (this.selectedEngineName) {
-      return this.filterByEngineName();
-    }
-    return (this.displayableBackends || [])
-      .filter((backend) => LINKED_BACKENDS.includes(backend.get('engineType')))
-      .sortBy('id');
-  }
+  // ARG TODO: check multiple types of same secret Engine
+  // check pagination.
+  // ARG TMRW: solve for when both filters are set
 
-  get unsupportedBackends() {
+  get sortedDisplayableBackends() {
+    // show supported SE first and organize those groups by id.
+    const sortedDisplayableBackends = this.displayableBackends.sort(
+      (a, b) => b.isSupportedBackend - a.isSupportedBackend || a.id - b.id
+    );
+    // filter list by engine type, ex: 'kv'
     if (this.selectedEngineType) {
-      return this.filterByEngineType(false);
+      return sortedDisplayableBackends.filter(
+        (backend) => this.selectedEngineType === backend.get('engineType')
+      );
     }
-    if (this.selectedEngineType) {
-      return this.filterByEngineName(false);
+    // filter list by engine name, ex: 'secret'
+    if (this.selectedEngineName) {
+      const engineObject = sortedDisplayableBackends.find(
+        (modelObject) => modelObject.id === this.selectedEngineName
+      );
+      return sortedDisplayableBackends.filter(
+        (backend) => engineObject.engineType === backend.get('engineType')
+      );
     }
-    return (
-      (this.displayableBackends || [])
-        // exact same as supportedBackends but negated
-        .filter((backend) => !LINKED_BACKENDS.includes(backend.get('engineType')))
-        .sortBy('id')
-    );
+    // if no filter, return full sorted list
+    return sortedDisplayableBackends;
   }
 
   // FOR FILTER LISTS
@@ -63,48 +61,6 @@ export default class VaultClusterSecretsBackendController extends Controller {
     }));
   }
 
-  filterByEngineType(getSupportedBackends = true) {
-    // 1. Need to confirm if the selected engineType is a supported engine type or unsupported
-    const isSupported = LINKED_BACKENDS.includes(this.selectedEngineType);
-    if (isSupported) {
-      // 2. if the filtered engineType is supported return a value only if the call is coming from get supportedBackends
-      return getSupportedBackends
-        ? this.displayableBackends
-            .filter((backend) => this.selectedEngineType === backend.get('engineType'))
-            .sortBy('id')
-        : [];
-    } else {
-      // 3. if the filtered engineType is unsupported return nothing if the call is coming from the get supportedBackend but return if call is from  get unsupportedBackends
-      return getSupportedBackends
-        ? []
-        : this.displayableBackends
-            // exact same as supportedBackends but negated
-            .filter((backend) => this.selectedEngineType === backend.get('engineType'))
-            .sortBy('id');
-    }
-  }
-
-  filterByEngineName(getSupportedBackends = true) {
-    // 1. check if the engine is supported. We only have the name so we need to return the engineType.
-    const engineObject = this.displayableBackends.find(
-      (modelObject) => modelObject.id === this.selectedEngineName
-    );
-    const engineType = engineObject.engineType;
-    const isSupported = LINKED_BACKENDS.includes(engineObject.engineType);
-    if (isSupported) {
-      return getSupportedBackends
-        ? this.displayableBackends.filter((backend) => engineType === backend.get('engineType')).sortBy('id')
-        : [];
-    } else {
-      return getSupportedBackends
-        ? []
-        : this.displayableBackends
-            // exact same as supportedBackends but negated
-            .filter((backend) => engineType === backend.get('engineType'))
-            .sortBy('id');
-    }
-  }
-
   @action
   filterEngineType([type]) {
     this.selectedEngineType = type;
diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
index dbe083c4e3eb..e16c85a6d154 100644
--- a/ui/app/models/secret-engine.js
+++ b/ui/app/models/secret-engine.js
@@ -8,6 +8,9 @@ import { computed } from '@ember/object'; // eslint-disable-line
 import { equal } from '@ember/object/computed'; // eslint-disable-line
 import { withModelValidations } from 'vault/decorators/model-validations';
 import { withExpandedAttributes } from 'vault/decorators/model-expanded-attributes';
+import { supportedSecretBackends } from 'vault/helpers/supported-secret-backends';
+
+const LINKED_BACKENDS = supportedSecretBackends();
 
 // identity will be managed separately and the inclusion
 // of the system backend is an implementation detail
@@ -143,6 +146,10 @@ export default class SecretEngineModel extends Model {
     return !LIST_EXCLUDED_BACKENDS.includes(this.engineType);
   }
 
+  get isSupportedBackend() {
+    return LINKED_BACKENDS.includes(this.engineType);
+  }
+
   get localDisplay() {
     return this.local ? 'local' : 'replicated';
   }
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 227e6a6653bf..38e326ca8709 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -36,7 +36,7 @@
   </ToolbarActions>
 </Toolbar>
 
-{{#each this.supportedBackends as |backend|}}
+{{#each this.sortedDisplayableBackends as |backend|}}
   {{#let
     (if
       (eq backend.engineType "kmip")
@@ -47,19 +47,24 @@
     )
     as |backendLink|
   }}
-    <LinkableItem data-test-secret-backend-row={{backend.id}} @link={{hash route=backendLink model=backend.id}} as |Li|>
+    <LinkableItem
+      data-test-secret-backend-row={{backend.id}}
+      @link={{if backend.isSupportedBackend (hash route=backendLink model=backend.id) ""}}
+      @disabled={{if backend.isSupportedBackend false true}}
+      as |Li|
+    >
       <Li.content
         @accessor={{if (eq backend.version 2) (concat "v2 " backend.accessor) backend.accessor}}
         @description={{backend.description}}
         @glyphText={{backend.engineType}}
         @glyph={{backend.icon}}
-        @link={{hash route=backendLink model=backend.id}}
+        @link={{if backend.isSupportedBackend (hash route=backendLink model=backend.id) ""}}
         @title={{backend.path}}
       />
       <Li.menu>
         <PopupMenu @name="engine-menu">
           <Confirm as |c|>
-            <nav class="menu" aria-label="supported secrets engine menu">
+            <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
               <ul class="menu-list">
                 <li class="action">
                   <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
@@ -79,14 +84,6 @@
                     />
                   </li>
                 {{/if}}
-                {{! ARG THERE IS NO ITEM??? }}
-                {{#if this.item.updatePath.isPending}}
-                  <li class="action">
-                    <button disabled type="button" class="link button is-loading is-transparent">
-                      loading
-                    </button>
-                  </li>
-                {{/if}}
               </ul>
             </nav>
           </Confirm>
@@ -94,42 +91,4 @@
       </Li.menu>
     </LinkableItem>
   {{/let}}
-{{/each}}
-
-{{#each this.unsupportedBackends as |backend|}}
-  <LinkableItem data-test-secret-backend-row={{backend.id}} @disabled={{true}} as |Li|>
-    <Li.content
-      @accessor={{if (eq backend.version 2) (concat "v2 " backend.accessor) backend.accessor}}
-      @description={{backend.description}}
-      @glyphText={{backend.engineType}}
-      @glyph={{or (if (eq backend.engineType "kmip") "secrets" backend.engineType) "secrets"}}
-      @title={{backend.path}}
-    />
-    <Li.menu>
-      <PopupMenu name="engine-menu">
-        <Confirm as |c|>
-          <nav class="menu" aria-label="unsupported secrets engine menu">
-            <ul class="menu-list">
-              <li class="action">
-                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}} data-test-engine-config>
-                  View configuration
-                </LinkTo>
-              </li>
-              <li>
-                <c.Message
-                  @id={{backend.id}}
-                  @triggerText="Disable"
-                  @message="Any data in this engine will be permanently deleted."
-                  @title="Disable engine?"
-                  @confirmButtonText="Disable"
-                  @onConfirm={{perform this.disableEngine backend}}
-                  data-test-engine-disable="true"
-                />
-              </li>
-            </ul>
-          </nav>
-        </Confirm>
-      </PopupMenu>
-    </Li.menu>
-  </LinkableItem>
 {{/each}}
\ No newline at end of file

From c143cf9078fe7e14f61cd4c56b1a1f513010cebd Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 2 May 2023 20:31:45 -0600
Subject: [PATCH 06/19] fixed when you have two selected filters, but broken
 for multiples of the same type with different names

---
 ui/app/controllers/vault/cluster/secrets/backends.js | 7 +++----
 ui/app/templates/vault/cluster/secrets/backends.hbs  | 2 ++
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index 0c01e36ca173..a989c466bf9e 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -23,7 +23,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
   // ARG TMRW: solve for when both filters are set
 
   get sortedDisplayableBackends() {
-    // show supported SE first and organize those groups by id.
+    // show supported secret engines first and then organize those by id.
     const sortedDisplayableBackends = this.displayableBackends.sort(
       (a, b) => b.isSupportedBackend - a.isSupportedBackend || a.id - b.id
     );
@@ -46,16 +46,15 @@ export default class VaultClusterSecretsBackendController extends Controller {
     return sortedDisplayableBackends;
   }
 
-  // FOR FILTER LISTS
   get secretEngineArrayByType() {
-    return this.displayableBackends.map((modelObject) => ({
+    return this.sortedDisplayableBackends.map((modelObject) => ({
       name: modelObject.engineType,
       id: modelObject.engineType,
     }));
   }
 
   get secretEngineArrayByName() {
-    return this.displayableBackends.map((modelObject) => ({
+    return this.sortedDisplayableBackends.map((modelObject) => ({
       name: modelObject.id,
       id: modelObject.id,
     }));
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 38e326ca8709..33052187bb46 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -16,6 +16,7 @@
       @onChange={{this.filterEngineType}}
       @placeholder={{"Filter by engine type"}}
       @displayInherit={{true}}
+      @inputValue={{if this.selectedEngineType (array this.selectedEngineType)}}
       class="is-marginless"
     />
     <SearchSelect
@@ -26,6 +27,7 @@
       @onChange={{this.filterEngineName}}
       @placeholder={{"Filter by name"}}
       @displayInherit={{true}}
+      @inputValue={{if this.selectedEngineName (array this.selectedEngineName)}}
       class="is-marginless has-left-padding-s"
     />
   </ToolbarFilters>

From 97b80df03445354d4de70f77b2524c63f6f7449a Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 3 May 2023 08:24:43 -0600
Subject: [PATCH 07/19] remove repeated engineTypes in filter list

---
 ui/app/controllers/vault/cluster/secrets/backends.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index a989c466bf9e..aef310b7747b 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -21,6 +21,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
   // ARG TODO: check multiple types of same secret Engine
   // check pagination.
   // ARG TMRW: solve for when both filters are set
+  // test with hundreds of mounts
 
   get sortedDisplayableBackends() {
     // show supported secret engines first and then organize those by id.
@@ -47,9 +48,13 @@ export default class VaultClusterSecretsBackendController extends Controller {
   }
 
   get secretEngineArrayByType() {
-    return this.sortedDisplayableBackends.map((modelObject) => ({
-      name: modelObject.engineType,
-      id: modelObject.engineType,
+    const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
+    // filter out repeated engineTypes (e.g. [secret, secret] => [secret])
+    const arrayOfUniqueEngineTypes = [...new Set(arrayOfAllEngineTypes)];
+
+    return arrayOfUniqueEngineTypes.map((engineType) => ({
+      name: engineType,
+      id: engineType,
     }));
   }
 

From b5c2e93831d341f93b4af3c659c99e1db54aa745 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 3 May 2023 08:54:11 -0600
Subject: [PATCH 08/19] add disabled to power select

---
 ui/app/controllers/vault/cluster/secrets/backends.js | 10 ++++------
 ui/app/templates/vault/cluster/secrets/backends.hbs  |  3 +++
 ui/lib/core/addon/components/search-select.hbs       |  1 +
 ui/lib/core/addon/components/search-select.js        |  1 +
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index aef310b7747b..aa0943854ba0 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -36,12 +36,10 @@ export default class VaultClusterSecretsBackendController extends Controller {
     }
     // filter list by engine name, ex: 'secret'
     if (this.selectedEngineName) {
-      const engineObject = sortedDisplayableBackends.find(
-        (modelObject) => modelObject.id === this.selectedEngineName
-      );
-      return sortedDisplayableBackends.filter(
-        (backend) => engineObject.engineType === backend.get('engineType')
-      );
+      // const engineObject = sortedDisplayableBackends.find(
+      //   (modelObject) => modelObject.id === this.selectedEngineName
+      // );
+      return sortedDisplayableBackends.filter((backend) => this.selectedEngineName === backend.get('id'));
     }
     // if no filter, return full sorted list
     return sortedDisplayableBackends;
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 33052187bb46..f4bea52e463b 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -9,6 +9,7 @@
 <Toolbar>
   <ToolbarFilters>
     <SearchSelect
+      @id="filter-by-engine-type"
       @options={{this.secretEngineArrayByType}}
       @selectLimit="1"
       @disallowNewItems={{true}}
@@ -17,9 +18,11 @@
       @placeholder={{"Filter by engine type"}}
       @displayInherit={{true}}
       @inputValue={{if this.selectedEngineType (array this.selectedEngineType)}}
+      @disabled={{if this.selectedEngineName true false}}
       class="is-marginless"
     />
     <SearchSelect
+      @id="filter-by-name"
       @options={{this.secretEngineArrayByName}}
       @selectLimit="1"
       @disallowNewItems={{true}}
diff --git a/ui/lib/core/addon/components/search-select.hbs b/ui/lib/core/addon/components/search-select.hbs
index 94a9a7d276bb..2a6ebfd74b8d 100644
--- a/ui/lib/core/addon/components/search-select.hbs
+++ b/ui/lib/core/addon/components/search-select.hbs
@@ -39,6 +39,7 @@
         @onChange={{this.selectOrCreate}}
         @placeholderComponent={{component "search-select-placeholder"}}
         @verticalPosition="below"
+        @disabled={{@disabled}}
         as |option|
       >
         {{#if this.shouldRenderName}}
diff --git a/ui/lib/core/addon/components/search-select.js b/ui/lib/core/addon/components/search-select.js
index 7380e6d57b5d..f3c13c40737f 100644
--- a/ui/lib/core/addon/components/search-select.js
+++ b/ui/lib/core/addon/components/search-select.js
@@ -53,6 +53,7 @@ import { filterOptions, defaultMatcher } from 'ember-power-select/utils/group-ut
  * @param {string} [placeholder] - text you wish to replace the default "search" with
  * @param {boolean} [displayInherit=false] - if you need the search select component to display inherit instead of box.
  * @param {function} [renderInfoTooltip] - receives each inputValue string and list of dropdownOptions as args, so parent can determine when to render a tooltip beside a selectedOption and the tooltip text. see 'oidc/provider-form.js'
+ * @param {boolean} [disabled] - if true sets the disabled property on the ember-power-select component and makes it unusable.
  *
  // * advanced customization
  * @param {Array} options - array of objects passed directly to the power-select component. If doing this, `models` should not also be passed as that will overwrite the

From 577886c4cd6b1384aba16bb6c4a0886728370615 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 3 May 2023 10:49:02 -0600
Subject: [PATCH 09/19] fix bug of glimmer for the concurrency task.

---
 .../vault/cluster/secrets/backends.js         | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index aa0943854ba0..012ccd3e10d4 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -8,7 +8,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { filterBy } from '@ember/object/computed';
-import { dropTask, task } from 'ember-concurrency';
+import { dropTask } from 'ember-concurrency';
 
 export default class VaultClusterSecretsBackendController extends Controller {
   @service flashMessages;
@@ -18,9 +18,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @tracked selectedEngineType = null;
   @tracked selectedEngineName = null;
 
-  // ARG TODO: check multiple types of same secret Engine
   // check pagination.
-  // ARG TMRW: solve for when both filters are set
   // test with hundreds of mounts
 
   get sortedDisplayableBackends() {
@@ -28,23 +26,33 @@ export default class VaultClusterSecretsBackendController extends Controller {
     const sortedDisplayableBackends = this.displayableBackends.sort(
       (a, b) => b.isSupportedBackend - a.isSupportedBackend || a.id - b.id
     );
+
     // filter list by engine type, ex: 'kv'
     if (this.selectedEngineType) {
-      return sortedDisplayableBackends.filter(
-        (backend) => this.selectedEngineType === backend.get('engineType')
-      );
+      // check first if the user has also filtered by name.
+      if (this.selectedEngineName) {
+        return this.filterByName(sortedDisplayableBackends);
+      }
+      // otherwise filter by engine type
+      return this.filterByEngineType(sortedDisplayableBackends);
     }
+
     // filter list by engine name, ex: 'secret'
     if (this.selectedEngineName) {
-      // const engineObject = sortedDisplayableBackends.find(
-      //   (modelObject) => modelObject.id === this.selectedEngineName
-      // );
-      return sortedDisplayableBackends.filter((backend) => this.selectedEngineName === backend.get('id'));
+      return this.filterByName(sortedDisplayableBackends);
     }
-    // if no filter, return full sorted list
+    // no filters, return full sorted list.
     return sortedDisplayableBackends;
   }
 
+  filterByName(backendList) {
+    return backendList.filter((backend) => this.selectedEngineName === backend.get('id'));
+  }
+
+  filterByEngineType(backendList) {
+    return backendList.filter((backend) => this.selectedEngineType === backend.get('engineType'));
+  }
+
   get secretEngineArrayByType() {
     const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
     // filter out repeated engineTypes (e.g. [secret, secret] => [secret])
@@ -73,7 +81,6 @@ export default class VaultClusterSecretsBackendController extends Controller {
     this.selectedEngineName = name;
   }
 
-  @task
   @dropTask
   *disableEngine(engine) {
     const { engineType, path } = engine;

From 4a1c09f80a48c8c929f241d14993c514e01ad0fc Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Wed, 3 May 2023 11:01:41 -0600
Subject: [PATCH 10/19] wording fix

---
 ui/app/templates/vault/cluster/secrets/backends.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index f4bea52e463b..75e5f9c5a801 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -28,7 +28,7 @@
       @disallowNewItems={{true}}
       @fallbackComponent="input-search"
       @onChange={{this.filterEngineName}}
-      @placeholder={{"Filter by name"}}
+      @placeholder={{"Filter by engine name"}}
       @displayInherit={{true}}
       @inputValue={{if this.selectedEngineName (array this.selectedEngineName)}}
       class="is-marginless has-left-padding-s"

From 34f71f9ad07b1c01019c0efd8048424cbcc96d27 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 4 May 2023 13:13:20 -0600
Subject: [PATCH 11/19] remove linkableItem and the nested contextual compnents
 to help with loading speed.

---
 .../vault/cluster/secrets/backends.js         |  13 +-
 ui/app/models/secret-engine.js                |  17 +++
 .../vault/cluster/secrets/backends.hbs        | 130 ++++++++++--------
 ui/lib/core/addon/components/linkable-item.js |  28 ----
 .../addon/components/linkable-item/content.js |  36 -----
 .../addon/components/linkable-item/menu.js    |  27 ----
 .../templates/components/linkable-item.hbs    |  17 ---
 .../components/linkable-item/content.hbs      |  44 ------
 .../components/linkable-item/menu.hbs         |   3 -
 ui/lib/core/app/components/linkable-item.js   |   6 -
 10 files changed, 98 insertions(+), 223 deletions(-)
 delete mode 100644 ui/lib/core/addon/components/linkable-item.js
 delete mode 100644 ui/lib/core/addon/components/linkable-item/content.js
 delete mode 100644 ui/lib/core/addon/components/linkable-item/menu.js
 delete mode 100644 ui/lib/core/addon/templates/components/linkable-item.hbs
 delete mode 100644 ui/lib/core/addon/templates/components/linkable-item/content.hbs
 delete mode 100644 ui/lib/core/addon/templates/components/linkable-item/menu.hbs
 delete mode 100644 ui/lib/core/app/components/linkable-item.js

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index 012ccd3e10d4..7e5f6bdfec8d 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -18,12 +18,9 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @tracked selectedEngineType = null;
   @tracked selectedEngineName = null;
 
-  // check pagination.
-  // test with hundreds of mounts
-
   get sortedDisplayableBackends() {
     // show supported secret engines first and then organize those by id.
-    const sortedDisplayableBackends = this.displayableBackends.sort(
+    const sortedBackends = this.displayableBackends.sort(
       (a, b) => b.isSupportedBackend - a.isSupportedBackend || a.id - b.id
     );
 
@@ -31,18 +28,18 @@ export default class VaultClusterSecretsBackendController extends Controller {
     if (this.selectedEngineType) {
       // check first if the user has also filtered by name.
       if (this.selectedEngineName) {
-        return this.filterByName(sortedDisplayableBackends);
+        return this.filterByName(sortedBackends);
       }
       // otherwise filter by engine type
-      return this.filterByEngineType(sortedDisplayableBackends);
+      return this.filterByEngineType(sortedBackends);
     }
 
     // filter list by engine name, ex: 'secret'
     if (this.selectedEngineName) {
-      return this.filterByName(sortedDisplayableBackends);
+      return this.filterByName(sortedBackends);
     }
     // no filters, return full sorted list.
-    return sortedDisplayableBackends;
+    return sortedBackends;
   }
 
   filterByName(backendList) {
diff --git a/ui/app/models/secret-engine.js b/ui/app/models/secret-engine.js
index e16c85a6d154..afda9977d87f 100644
--- a/ui/app/models/secret-engine.js
+++ b/ui/app/models/secret-engine.js
@@ -150,6 +150,23 @@ export default class SecretEngineModel extends Model {
     return LINKED_BACKENDS.includes(this.engineType);
   }
 
+  get backendLink() {
+    if (this.engineType === 'kmip') {
+      return 'vault.cluster.secrets.backend.kmip.scopes';
+    }
+    if (this.engineType === 'database') {
+      return 'vault.cluster.secrets.backend.overview';
+    }
+    return 'vault.cluster.secrets.backend.list-root';
+  }
+
+  get accessor() {
+    if (this.version === 2) {
+      return `v2 ${this.accessor}`;
+    }
+    return this.accessor;
+  }
+
   get localDisplay() {
     return this.local ? 'local' : 'replicated';
   }
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 75e5f9c5a801..7d894424748b 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -22,7 +22,7 @@
       class="is-marginless"
     />
     <SearchSelect
-      @id="filter-by-name"
+      @id="filter-by-engine-name"
       @options={{this.secretEngineArrayByName}}
       @selectLimit="1"
       @disallowNewItems={{true}}
@@ -40,60 +40,82 @@
     </ToolbarLink>
   </ToolbarActions>
 </Toolbar>
-
 {{#each this.sortedDisplayableBackends as |backend|}}
-  {{#let
-    (if
-      (eq backend.engineType "kmip")
-      "vault.cluster.secrets.backend.kmip.scopes"
-      (if
-        (eq backend.engineType "database") "vault.cluster.secrets.backend.overview" "vault.cluster.secrets.backend.list-root"
-      )
-    )
-    as |backendLink|
-  }}
-    <LinkableItem
-      data-test-secret-backend-row={{backend.id}}
-      @link={{if backend.isSupportedBackend (hash route=backendLink model=backend.id) ""}}
-      @disabled={{if backend.isSupportedBackend false true}}
-      as |Li|
-    >
-      <Li.content
-        @accessor={{if (eq backend.version 2) (concat "v2 " backend.accessor) backend.accessor}}
-        @description={{backend.description}}
-        @glyphText={{backend.engineType}}
-        @glyph={{backend.icon}}
-        @link={{if backend.isSupportedBackend (hash route=backendLink model=backend.id) ""}}
-        @title={{backend.path}}
-      />
-      <Li.menu>
-        <PopupMenu @name="engine-menu">
-          <Confirm as |c|>
-            <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
-              <ul class="menu-list">
+  <LinkedBlock
+    @params={{array backend.backendLink backend.id}}
+    class="list-item-row linkable-item is-no-underline"
+    data-test-auth-backend-link={{backend.id}}
+    @disabled={{if backend.isSupportedBackend false true}}
+  >
+    <div class="linkable-item-content" data-test-linkable-item-content>
+      <div class="has-text-grey">
+        {{#if backend.icon}}
+          <ToolTip @horizontalPosition="left" as |T|>
+            <T.Trigger>
+              <Icon @name={{backend.icon}} class="has-text-grey-light" data-test-linkable-item-glyph />
+            </T.Trigger>
+            <T.Content @defaultClass="tool-tip">
+              <div class="box">
+                {{or backend.engineType backend.path}}
+              </div>
+            </T.Content>
+          </ToolTip>
+        {{/if}}
+        {{#if backend.path}}
+          {{#if backend.isSupportedBackend}}
+            <LinkTo
+              @route={{backend.backendLink}}
+              @model={{backend.id}}
+              class="has-text-black has-text-weight-semibold"
+              data-test-secret-path
+            >
+              {{backend.path}}
+            </LinkTo>
+          {{else}}
+            <span data-test-secret-path>{{backend.path}}</span>
+          {{/if}}
+        {{/if}}
+      </div>
+      {{#if backend.accessor}}
+        <code class="has-text-grey is-size-8" data-test-linkable-item-accessor>
+          {{backend.accessor}}
+        </code>
+      {{/if}}
+      {{#if backend.description}}
+        <ReadMore data-test-linkable-item-description>
+          {{backend.description}}
+        </ReadMore>
+      {{/if}}
+      {{yield}}
+    </div>
+    {{! meatball sandwich menu }}
+    <div class="linkable-item-menu" data-test-linkable-item-menu>
+      <PopupMenu @name="engine-menu">
+        <Confirm as |c|>
+          <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
+            <ul class="menu-list">
+              <li class="action">
+                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
+                  View configuration
+                </LinkTo>
+              </li>
+              {{#if (not-eq backend.type "cubbyhole")}}
                 <li class="action">
-                  <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
-                    View configuration
-                  </LinkTo>
+                  <c.Message
+                    @id={{backend.id}}
+                    @triggerText="Disable"
+                    @message="Any data in this engine will be permanently deleted."
+                    @title="Disable engine?"
+                    @confirmButtonText="Disable"
+                    @onConfirm={{perform this.disableEngine backend}}
+                    data-test-engine-disable="true"
+                  />
                 </li>
-                {{#if (not-eq backend.type "cubbyhole")}}
-                  <li class="action">
-                    <c.Message
-                      @id={{backend.id}}
-                      @triggerText="Disable"
-                      @message="Any data in this engine will be permanently deleted."
-                      @title="Disable engine?"
-                      @confirmButtonText="Disable"
-                      @onConfirm={{perform this.disableEngine backend}}
-                      data-test-engine-disable="true"
-                    />
-                  </li>
-                {{/if}}
-              </ul>
-            </nav>
-          </Confirm>
-        </PopupMenu>
-      </Li.menu>
-    </LinkableItem>
-  {{/let}}
+              {{/if}}
+            </ul>
+          </nav>
+        </Confirm>
+      </PopupMenu>
+    </div>
+  </LinkedBlock>
 {{/each}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/linkable-item.js b/ui/lib/core/addon/components/linkable-item.js
deleted file mode 100644
index 00ea3100c840..000000000000
--- a/ui/lib/core/addon/components/linkable-item.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import layout from '../templates/components/linkable-item';
-import { setComponentTemplate } from '@ember/component';
-
-/**
- * @module LinkableItem
- * LinkableItem components have two contextual components, a Content component used to show information on the left with a Menu component on the right, all aligned vertically centered. If passed a link, the block will be clickable.
- *
- * @example
- * ```js
- * <LinkableItem @link={{hash route='vault.backends' model='my-backend-path'}} data-test-row="my-backend-path">
- * // Use <LinkableItem.content> and <LinkableItem.menu> here
- * </LinkableItem>
- * ```
- *
- * @param {object} [link=null] - Link should have route and model
- * @param {boolean} [disabled=false] - If no link then should be given a disabled attribute equal to true
- */
-
-/* eslint ember/no-empty-glimmer-component-classes: 'warn' */
-class LinkableItemComponent extends Component {}
-
-export default setComponentTemplate(layout, LinkableItemComponent);
diff --git a/ui/lib/core/addon/components/linkable-item/content.js b/ui/lib/core/addon/components/linkable-item/content.js
deleted file mode 100644
index 5f29692e3bba..000000000000
--- a/ui/lib/core/addon/components/linkable-item/content.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import layout from '../../templates/components/linkable-item/content';
-import { setComponentTemplate } from '@ember/component';
-
-/**
- * @module Content
- * Content components are contextual components of LinkableItem, used to display content on the left side of a LinkableItem component.
- *
- * @example
- * ```js
- * <LinkableItem as |Li|>
- *  <Li.content
- *    @accessor="cubbyhole_e21f8ee6"
- *    @description="per-token private secret storage"
- *    @glyphText="tooltip text"
- *    @glyph=glyph
- *    @title="title"
- *  />
- * </LinkableItem>
- * ```
- * @param {string} accessor=null - formatted as HTML <code> tag
- * @param {string} description=null - will truncate if wider than parent div
- * @param {string} glyphText=null - tooltip for glyph
- * @param {string} glyph=null - will display as icon beside the title
- * @param {string} title=null - if @link object is passed in then title will link to @link.route
- */
-
-/* eslint ember/no-empty-glimmer-component-classes: 'warn' */
-class ContentComponent extends Component {}
-
-export default setComponentTemplate(layout, ContentComponent);
diff --git a/ui/lib/core/addon/components/linkable-item/menu.js b/ui/lib/core/addon/components/linkable-item/menu.js
deleted file mode 100644
index acc36b3eec34..000000000000
--- a/ui/lib/core/addon/components/linkable-item/menu.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import layout from '../../templates/components/linkable-item/menu';
-import { setComponentTemplate } from '@ember/component';
-
-/**
- * @module Menu
- * Menu components are contextual components of LinkableItem, used to display a menu on the right side of a LinkableItem component.
- *
- * @example
- * ```js
- * <LinkableItem as |Li|>
- *  <Li.menu>
- *     Some menu here
- *  </Li.menu>
- * </LinkableItem>
- * ```
- */
-
-/* eslint ember/no-empty-glimmer-component-classes: 'warn' */
-class MenuComponent extends Component {}
-
-export default setComponentTemplate(layout, MenuComponent);
diff --git a/ui/lib/core/addon/templates/components/linkable-item.hbs b/ui/lib/core/addon/templates/components/linkable-item.hbs
deleted file mode 100644
index d2de17e04502..000000000000
--- a/ui/lib/core/addon/templates/components/linkable-item.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<div ...attributes>
-  {{#if @disabled}}
-    <div class="list-item-row linkable-item is-no-underline">
-      {{yield (hash content=(component "linkable-item/content"))}}
-      {{yield (hash menu=(component "linkable-item/menu"))}}
-    </div>
-  {{else}}
-    <LinkedBlock
-      @params={{array @link.route @link.model}}
-      class="list-item-row linkable-item is-no-underline"
-      data-test-auth-backend-link={{@link.model}}
-    >
-      {{yield (hash content=(component "linkable-item/content"))}}
-      {{yield (hash menu=(component "linkable-item/menu"))}}
-    </LinkedBlock>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/linkable-item/content.hbs b/ui/lib/core/addon/templates/components/linkable-item/content.hbs
deleted file mode 100644
index d8f77fa01b84..000000000000
--- a/ui/lib/core/addon/templates/components/linkable-item/content.hbs
+++ /dev/null
@@ -1,44 +0,0 @@
-<div class="linkable-item-content" data-test-linkable-item-content ...attributes>
-  <div class="has-text-grey">
-    {{#if @glyph}}
-      <ToolTip @horizontalPosition="left" as |T|>
-        <T.Trigger>
-          <Icon @name={{@glyph}} class="has-text-grey-light" data-test-linkable-item-glyph />
-        </T.Trigger>
-        <T.Content @defaultClass="tool-tip">
-          <div class="box">
-            {{or @glyphText @title}}
-          </div>
-        </T.Content>
-      </ToolTip>
-    {{/if}}
-
-    {{#if @title}}
-      {{#if @link}}
-        <LinkTo
-          @route={{@link.route}}
-          @model={{@link.model}}
-          class="has-text-black has-text-weight-semibold"
-          data-test-secret-path
-        >
-          {{@title}}
-        </LinkTo>
-      {{else}}
-        <span data-test-secret-path>{{@title}}</span>
-      {{/if}}
-    {{/if}}
-  </div>
-  {{#if @accessor}}
-    <code class="has-text-grey is-size-8" data-test-linkable-item-accessor>
-      {{@accessor}}
-    </code>
-  {{/if}}
-
-  {{#if @description}}
-    <ReadMore data-test-linkable-item-description>
-      {{@description}}
-    </ReadMore>
-  {{/if}}
-
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/ui/lib/core/addon/templates/components/linkable-item/menu.hbs b/ui/lib/core/addon/templates/components/linkable-item/menu.hbs
deleted file mode 100644
index 2361fb7da48e..000000000000
--- a/ui/lib/core/addon/templates/components/linkable-item/menu.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="linkable-item-menu" data-test-linkable-item-menu ...attributes>
-  {{yield}}
-</div>
\ No newline at end of file
diff --git a/ui/lib/core/app/components/linkable-item.js b/ui/lib/core/app/components/linkable-item.js
deleted file mode 100644
index 628caf8912b9..000000000000
--- a/ui/lib/core/app/components/linkable-item.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-export { default } from 'core/components/linkable-item';

From 586d8e5327f114c3a4d92255eb908c5c56d22ea2 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 4 May 2023 13:34:51 -0600
Subject: [PATCH 12/19] add changelog

---
 changelog/20481.txt | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelog/20481.txt

diff --git a/changelog/20481.txt b/changelog/20481.txt
new file mode 100644
index 000000000000..49e1fe867626
--- /dev/null
+++ b/changelog/20481.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Add filtering by engine type and engine name on the Secret Engine list view.
+```
\ No newline at end of file

From 994ccde81084f0815f06795dbd03a5443b30ecd9 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Thu, 4 May 2023 19:53:43 -0600
Subject: [PATCH 13/19] fix some tests

---
 ui/app/controllers/vault/cluster/secrets/backends.js      | 6 +++---
 ui/tests/acceptance/settings/mount-secret-backend-test.js | 2 +-
 ui/tests/pages/secrets/backends.js                        | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index 7e5f6bdfec8d..2ee3dfe978ec 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -24,7 +24,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
       (a, b) => b.isSupportedBackend - a.isSupportedBackend || a.id - b.id
     );
 
-    // filter list by engine type, ex: 'kv'
+    // return an options list to filter by engine type, ex: 'kv'
     if (this.selectedEngineType) {
       // check first if the user has also filtered by name.
       if (this.selectedEngineName) {
@@ -34,7 +34,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
       return this.filterByEngineType(sortedBackends);
     }
 
-    // filter list by engine name, ex: 'secret'
+    // return an options list to filter by engine name, ex: 'secret'
     if (this.selectedEngineName) {
       return this.filterByName(sortedBackends);
     }
@@ -52,7 +52,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
 
   get secretEngineArrayByType() {
     const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
-    // filter out repeated engineTypes (e.g. [secret, secret] => [secret])
+    // filter out repeated engineTypes (e.g. [kv, kv] => [kv])
     const arrayOfUniqueEngineTypes = [...new Set(arrayOfAllEngineTypes)];
 
     return arrayOfUniqueEngineTypes.map((engineType) => ({
diff --git a/ui/tests/acceptance/settings/mount-secret-backend-test.js b/ui/tests/acceptance/settings/mount-secret-backend-test.js
index 33c9152e5994..12c3ef68446f 100644
--- a/ui/tests/acceptance/settings/mount-secret-backend-test.js
+++ b/ui/tests/acceptance/settings/mount-secret-backend-test.js
@@ -126,7 +126,7 @@ module('Acceptance | settings/mount-secret-backend', function (hooks) {
     await page.secretList();
     await settled();
     assert
-      .dom(`[data-test-secret-backend-row=${path}]`)
+      .dom(`[data-test-auth-backend-link=${path}]`)
       .exists({ count: 1 }, 'renders only one instance of the engine');
   });
 
diff --git a/ui/tests/pages/secrets/backends.js b/ui/tests/pages/secrets/backends.js
index f0dc796e47f6..1a7d3ebbbfdf 100644
--- a/ui/tests/pages/secrets/backends.js
+++ b/ui/tests/pages/secrets/backends.js
@@ -9,7 +9,7 @@ import uiPanel from 'vault/tests/pages/components/console/ui-panel';
 export default create({
   consoleToggle: clickable('[data-test-console-toggle]'),
   visit: visitable('/vault/secrets'),
-  rows: collection('[data-test-secret-backend-row]', {
+  rows: collection('[data-test-auth-backend-link]', {
     path: text('[data-test-secret-path]'),
     menu: clickable('[data-test-popup-menu-trigger]'),
   }),

From f11e204603dcb47f7db537fb7eb77dce2cdb6b67 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 5 May 2023 10:15:01 -0600
Subject: [PATCH 14/19] add test coverage

---
 .../vault/cluster/secrets/backends.hbs        |  2 +-
 .../secrets/backend/engines-test.js           | 99 ++++++++++++++++---
 .../components/linkable-item-test.js          | 88 -----------------
 3 files changed, 87 insertions(+), 102 deletions(-)
 delete mode 100644 ui/tests/integration/components/linkable-item-test.js

diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 7d894424748b..a3bf5d6a499d 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -89,7 +89,7 @@
       {{yield}}
     </div>
     {{! meatball sandwich menu }}
-    <div class="linkable-item-menu" data-test-linkable-item-menu>
+    <div class="linkable-item-menu" data-test-linkable-item-menu={{backend.path}}>
       <PopupMenu @name="engine-menu">
         <Confirm as |c|>
           <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
diff --git a/ui/tests/acceptance/secrets/backend/engines-test.js b/ui/tests/acceptance/secrets/backend/engines-test.js
index b6b7ef8f08a9..d82730316199 100644
--- a/ui/tests/acceptance/secrets/backend/engines-test.js
+++ b/ui/tests/acceptance/secrets/backend/engines-test.js
@@ -4,6 +4,8 @@
  */
 
 import { currentRouteName, settled } from '@ember/test-helpers';
+import { clickTrigger } from 'ember-power-select/test-support/helpers';
+import { create } from 'ember-cli-page-object';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { v4 as uuidv4 } from 'uuid';
@@ -11,8 +13,23 @@ import { v4 as uuidv4 } from 'uuid';
 import mountSecrets from 'vault/tests/pages/settings/mount-secret-backend';
 import backendsPage from 'vault/tests/pages/secrets/backends';
 import authPage from 'vault/tests/pages/auth';
+import ss from 'vault/tests/pages/components/search-select';
 
-module('Acceptance | engine/disable', function (hooks) {
+const searchSelect = create(ss);
+
+const disableEngine = async (enginePath) => {
+  await backendsPage.visit();
+  await settled();
+  const row = backendsPage.rows.filterBy('path', `${enginePath}/`)[0];
+  await row.menu();
+  await settled();
+  await backendsPage.disableButton();
+  await settled();
+  await backendsPage.confirmDisable();
+  await settled();
+};
+
+module('Acceptance | secret-engine list view', function (hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function () {
@@ -20,32 +37,88 @@ module('Acceptance | engine/disable', function (hooks) {
     return authPage.login();
   });
 
-  test('disable engine', async function (assert) {
+  test('it allows you to disable an engine', async function (assert) {
     // first mount an engine so we can disable it.
     const enginePath = `alicloud-disable-${this.uid}`;
     await mountSecrets.enable('alicloud', enginePath);
     await settled();
     assert.ok(backendsPage.rows.filterBy('path', `${enginePath}/`)[0], 'shows the mounted engine');
-
-    await backendsPage.visit();
-    await settled();
-    const row = backendsPage.rows.filterBy('path', `${enginePath}/`)[0];
-    await row.menu();
-    await settled();
-    await backendsPage.disableButton();
-    await settled();
-    await backendsPage.confirmDisable();
-    await settled();
+    await disableEngine(enginePath);
     assert.strictEqual(
       currentRouteName(),
       'vault.cluster.secrets.backends',
       'redirects to the backends page'
     );
-
     assert.strictEqual(
       backendsPage.rows.filterBy('path', `${enginePath}/`).length,
       0,
       'does not show the disabled engine'
     );
   });
+
+  test('it adds disabled css styling to unsupported secret engines', async function (assert) {
+    assert.expect(3);
+    // first mount engine that is not supported
+    const enginePath = `nomad-${this.uid}`;
+
+    await mountSecrets.enable('nomad', enginePath);
+    await settled();
+    await backendsPage.visit();
+    await settled();
+
+    const rows = document.querySelectorAll('[data-test-auth-backend-link]');
+    rows.forEach((node) => {
+      if (node.innerText.includes('nomad')) {
+        assert
+          .dom(node)
+          .doesNotHaveClass(
+            'linked-block',
+            `the linked-block class is not added to unsupported engines, which effectively disables it.`
+          );
+      } else {
+        assert.dom(node).hasClass('linked-block', `linked-block class is added to supported engines.`);
+      }
+    });
+    await disableEngine(enginePath);
+  });
+
+  test('it filters by name and engine type', async function (assert) {
+    assert.expect(6);
+    const enginePath1 = `aws-1-${this.uid}`;
+    const enginePath2 = `aws-2-${this.uid}`;
+
+    await mountSecrets.enable('aws', enginePath1);
+    await mountSecrets.enable('aws', enginePath2);
+    await backendsPage.visit();
+    await settled();
+    await clickTrigger('#filter-by-engine-type');
+    await searchSelect.options.objectAt(0).click();
+
+    assert
+      .dom('[data-test-auth-backend-link]')
+      .exists({ count: 2 }, 'Filter by aws engine type and 2 are returned');
+
+    const rows = document.querySelectorAll('[data-test-auth-backend-link]');
+    rows.forEach((block) => {
+      assert.ok(block.innerText.includes('aws'), 'all the rows are engine type aws.');
+    });
+
+    await clickTrigger('#filter-by-engine-name');
+    await searchSelect.options.objectAt(1).click();
+    const row = document.querySelectorAll('[data-test-auth-backend-link]');
+
+    assert.dom(row[0]).includesText('aws-2', 'shows the filtered by name engine');
+    // clear filter by engine name
+    await searchSelect.deleteButtons.objectAt(1).click();
+
+    assert.dom('[data-test-auth-backend-link]').exists({ count: 2 }, 'Back to filtering by aws only');
+    // clear filter by engine type
+    await searchSelect.deleteButtons.objectAt(0).click();
+    assert
+      .dom('[data-test-auth-backend-link]')
+      .exists({ count: 4 }, 'No filters shows two aws and cubbyhole and secrets.');
+
+    await disableEngine(enginePath1);
+    await disableEngine(enginePath2);
+  });
 });
diff --git a/ui/tests/integration/components/linkable-item-test.js b/ui/tests/integration/components/linkable-item-test.js
deleted file mode 100644
index 1b376da1a773..000000000000
--- a/ui/tests/integration/components/linkable-item-test.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | linkable-item', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders anything passed in', async function (assert) {
-    await render(hbs`<LinkableItem />`);
-    assert.dom(this.element).hasText('', 'No content rendered');
-
-    await render(hbs`
-      <LinkableItem as |Li|>
-        <Li.content>
-          stuff here
-        </Li.content>
-        <Li.menu>
-          menu
-        </Li.menu>
-      </LinkableItem>
-    `);
-    assert.dom('[data-test-linkable-item-content]').hasText('stuff here');
-    assert.dom('[data-test-linkable-item-menu]').hasText('menu');
-  });
-
-  test('it is not wrapped in a linked block if disabled is true', async function (assert) {
-    await render(hbs`
-      <LinkableItem @disabled={{true}} as |Li|>
-        <Li.content>
-          stuff here
-        </Li.content>
-      </LinkableItem>
-    `);
-    assert.dom('.list-item-row').exists('List item row exists');
-    assert.dom('.list-item-row.linked-block').doesNotExist('Does not render linked block');
-    assert.dom('[data-test-secret-path]').doesNotExist('Title is not rendered');
-    assert.dom('[data-test-linkable-item-accessor]').doesNotExist('Accessor is not rendered');
-    assert.dom('[data-test-linkable-item-accessor]').doesNotExist('Accessor is not rendered');
-    assert.dom('[data-test-linkable-item-glyph]').doesNotExist('Glyph is not rendered');
-  });
-
-  test('it is wrapped in a linked block if a link is passed', async function (assert) {
-    await render(hbs`
-      <LinkableItem @link={{hash route="vault" model="modelId"}} as |Li|>
-        <Li.content
-          @title="A title"
-          @link={{hash route="vault" model="modelId"}}
-        >
-          stuff here
-        </Li.content>
-      </LinkableItem>
-    `);
-
-    assert.dom('.list-item-row.linked-block').exists('Renders linked block');
-  });
-
-  test('it renders standard attributes on content', async function (assert) {
-    this.set('title', 'A Title');
-    this.set('accessor', 'my accessor');
-    this.set('description', 'my description');
-    this.set('glyph', 'key');
-    this.set('glyphText', 'Here is some extra info');
-
-    // Template block usage:
-    await render(hbs`
-      <LinkableItem data-test-example as |Li|>
-        <Li.content
-          @accessor={{this.accessor}}
-          @description={{this.description}}
-          @glyph={{this.glyph}}
-          @glyphText={{this.glyphText}}
-          @title={{this.title}}
-        />
-      </LinkableItem>
-    `);
-    assert.dom('.list-item-row').exists('List item row exists');
-    assert.dom('[data-test-secret-path]').hasText(this.title, 'Title is rendered');
-    assert.dom('[data-test-linkable-item-accessor]').hasText(this.accessor, 'Accessor is rendered');
-    assert.dom('[data-test-linkable-item-description]').hasText(this.description, 'Description is rendered');
-    assert.dom('[data-test-linkable-item-glyph]').exists('Glyph is rendered');
-  });
-});

From 7d1c095161202a18e37b76f4ba4b4d55238f0b6c Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Fri, 5 May 2023 10:20:09 -0600
Subject: [PATCH 15/19] Update 20481.txt

update changelog text
---
 changelog/20481.txt | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/changelog/20481.txt b/changelog/20481.txt
index 49e1fe867626..c6f27116311b 100644
--- a/changelog/20481.txt
+++ b/changelog/20481.txt
@@ -1,3 +1,3 @@
 ```release-note:improvement
-ui: Add filtering by engine type and engine name on the Secret Engine list view.
-```
\ No newline at end of file
+ui: Add filtering by engine type and engine name to the Secret Engine list view.
+```

From 3faa498b0e4bd5b6b42f30d89973701448e71902 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Fri, 5 May 2023 13:51:26 -0600
Subject: [PATCH 16/19] =?UTF-8?q?test=20fixes=20=F0=9F=A4=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../secrets/backend/engines-test.js           | 82 ++++++++-----------
 1 file changed, 36 insertions(+), 46 deletions(-)

diff --git a/ui/tests/acceptance/secrets/backend/engines-test.js b/ui/tests/acceptance/secrets/backend/engines-test.js
index d82730316199..97404016aaaf 100644
--- a/ui/tests/acceptance/secrets/backend/engines-test.js
+++ b/ui/tests/acceptance/secrets/backend/engines-test.js
@@ -7,6 +7,7 @@ import { currentRouteName, settled } from '@ember/test-helpers';
 import { clickTrigger } from 'ember-power-select/test-support/helpers';
 import { create } from 'ember-cli-page-object';
 import { module, test } from 'qunit';
+import { runCommands } from 'vault/tests/helpers/pki/pki-run-commands';
 import { setupApplicationTest } from 'ember-qunit';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -17,18 +18,6 @@ import ss from 'vault/tests/pages/components/search-select';
 
 const searchSelect = create(ss);
 
-const disableEngine = async (enginePath) => {
-  await backendsPage.visit();
-  await settled();
-  const row = backendsPage.rows.filterBy('path', `${enginePath}/`)[0];
-  await row.menu();
-  await settled();
-  await backendsPage.disableButton();
-  await settled();
-  await backendsPage.confirmDisable();
-  await settled();
-};
-
 module('Acceptance | secret-engine list view', function (hooks) {
   setupApplicationTest(hooks);
 
@@ -43,7 +32,16 @@ module('Acceptance | secret-engine list view', function (hooks) {
     await mountSecrets.enable('alicloud', enginePath);
     await settled();
     assert.ok(backendsPage.rows.filterBy('path', `${enginePath}/`)[0], 'shows the mounted engine');
-    await disableEngine(enginePath);
+
+    await backendsPage.visit();
+    await settled();
+    const row = backendsPage.rows.filterBy('path', `${enginePath}/`)[0];
+    await row.menu();
+    await settled();
+    await backendsPage.disableButton();
+    await settled();
+    await backendsPage.confirmDisable();
+    await settled();
     assert.strictEqual(
       currentRouteName(),
       'vault.cluster.secrets.backends',
@@ -57,7 +55,7 @@ module('Acceptance | secret-engine list view', function (hooks) {
   });
 
   test('it adds disabled css styling to unsupported secret engines', async function (assert) {
-    assert.expect(3);
+    assert.expect(2);
     // first mount engine that is not supported
     const enginePath = `nomad-${this.uid}`;
 
@@ -67,23 +65,22 @@ module('Acceptance | secret-engine list view', function (hooks) {
     await settled();
 
     const rows = document.querySelectorAll('[data-test-auth-backend-link]');
-    rows.forEach((node) => {
-      if (node.innerText.includes('nomad')) {
-        assert
-          .dom(node)
-          .doesNotHaveClass(
-            'linked-block',
-            `the linked-block class is not added to unsupported engines, which effectively disables it.`
-          );
-      } else {
-        assert.dom(node).hasClass('linked-block', `linked-block class is added to supported engines.`);
-      }
-    });
-    await disableEngine(enginePath);
+    const rowUnsupported = Array.from(rows).filter((row) => row.innerText.includes('nomad'));
+    const rowSupported = Array.from(rows).filter((row) => row.innerText.includes('cubbyhole'));
+    assert
+      .dom(rowUnsupported[0])
+      .doesNotHaveClass(
+        'linked-block',
+        `the linked-block class is not added to unsupported engines, which effectively disables it.`
+      );
+    assert.dom(rowSupported[0]).hasClass('linked-block', `linked-block class is added to supported engines.`);
+
+    // cleanup
+    await runCommands([`delete sys/mounts/${enginePath}`]);
   });
 
   test('it filters by name and engine type', async function (assert) {
-    assert.expect(6);
+    assert.expect(3);
     const enginePath1 = `aws-1-${this.uid}`;
     const enginePath2 = `aws-2-${this.uid}`;
 
@@ -91,34 +88,27 @@ module('Acceptance | secret-engine list view', function (hooks) {
     await mountSecrets.enable('aws', enginePath2);
     await backendsPage.visit();
     await settled();
+    // filter by type
     await clickTrigger('#filter-by-engine-type');
     await searchSelect.options.objectAt(0).click();
 
-    assert
-      .dom('[data-test-auth-backend-link]')
-      .exists({ count: 2 }, 'Filter by aws engine type and 2 are returned');
-
     const rows = document.querySelectorAll('[data-test-auth-backend-link]');
-    rows.forEach((block) => {
-      assert.ok(block.innerText.includes('aws'), 'all the rows are engine type aws.');
-    });
+    const rowsAws = Array.from(rows).filter((row) => row.innerText.includes('aws'));
 
+    assert.strictEqual(rows.length, rowsAws.length, 'all rows returned are aws');
+    // filter by name
     await clickTrigger('#filter-by-engine-name');
     await searchSelect.options.objectAt(1).click();
-    const row = document.querySelectorAll('[data-test-auth-backend-link]');
+    const singleRow = document.querySelectorAll('[data-test-auth-backend-link]');
 
-    assert.dom(row[0]).includesText('aws-2', 'shows the filtered by name engine');
+    assert.dom(singleRow[0]).includesText('aws-1', 'shows the filtered by name engine');
     // clear filter by engine name
     await searchSelect.deleteButtons.objectAt(1).click();
+    const rowsAgain = document.querySelectorAll('[data-test-auth-backend-link]');
+    assert.ok(rowsAgain.length > 1, 'filter has been removed');
 
-    assert.dom('[data-test-auth-backend-link]').exists({ count: 2 }, 'Back to filtering by aws only');
-    // clear filter by engine type
-    await searchSelect.deleteButtons.objectAt(0).click();
-    assert
-      .dom('[data-test-auth-backend-link]')
-      .exists({ count: 4 }, 'No filters shows two aws and cubbyhole and secrets.');
-
-    await disableEngine(enginePath1);
-    await disableEngine(enginePath2);
+    // cleanup
+    await runCommands([`delete sys/mounts/${enginePath1}`]);
+    await runCommands([`delete sys/mounts/${enginePath2}`]);
   });
 });

From ed8ec45ee49000ccc975c7023e8d6daddc88334f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 15 May 2023 09:28:02 -0600
Subject: [PATCH 17/19] test fix?

---
 ui/app/templates/vault/cluster/secrets/backends.hbs | 2 +-
 ui/tests/acceptance/secrets/backend/engines-test.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index a3bf5d6a499d..429813f6a5df 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -95,7 +95,7 @@
           <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
             <ul class="menu-list">
               <li class="action">
-                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}}>
+                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}} data-test-engine-config>
                   View configuration
                 </LinkTo>
               </li>
diff --git a/ui/tests/acceptance/secrets/backend/engines-test.js b/ui/tests/acceptance/secrets/backend/engines-test.js
index 97404016aaaf..617799259fb7 100644
--- a/ui/tests/acceptance/secrets/backend/engines-test.js
+++ b/ui/tests/acceptance/secrets/backend/engines-test.js
@@ -101,7 +101,7 @@ module('Acceptance | secret-engine list view', function (hooks) {
     await searchSelect.options.objectAt(1).click();
     const singleRow = document.querySelectorAll('[data-test-auth-backend-link]');
 
-    assert.dom(singleRow[0]).includesText('aws-1', 'shows the filtered by name engine');
+    assert.dom(singleRow[0]).includesText('aws-2', 'shows the filtered by name engine');
     // clear filter by engine name
     await searchSelect.deleteButtons.objectAt(1).click();
     const rowsAgain = document.querySelectorAll('[data-test-auth-backend-link]');

From 92f8aa9be0962d341857749b69acdf6d9a78dc0d Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 15 May 2023 09:40:17 -0600
Subject: [PATCH 18/19] address a pr comment and save

---
 .../controllers/vault/cluster/secrets/backends.js  | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index 2ee3dfe978ec..ed0671fea072 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -28,28 +28,20 @@ export default class VaultClusterSecretsBackendController extends Controller {
     if (this.selectedEngineType) {
       // check first if the user has also filtered by name.
       if (this.selectedEngineName) {
-        return this.filterByName(sortedBackends);
+        return sortedBackends.filter((backend) => this.selectedEngineName === backend.get('id'));
       }
       // otherwise filter by engine type
-      return this.filterByEngineType(sortedBackends);
+      return sortedBackends.filter((backend) => this.selectedEngineType === backend.get('engineType'));
     }
 
     // return an options list to filter by engine name, ex: 'secret'
     if (this.selectedEngineName) {
-      return this.filterByName(sortedBackends);
+      return sortedBackends.filter((backend) => this.selectedEngineName === backend.get('id'));
     }
     // no filters, return full sorted list.
     return sortedBackends;
   }
 
-  filterByName(backendList) {
-    return backendList.filter((backend) => this.selectedEngineName === backend.get('id'));
-  }
-
-  filterByEngineType(backendList) {
-    return backendList.filter((backend) => this.selectedEngineType === backend.get('engineType'));
-  }
-
   get secretEngineArrayByType() {
     const arrayOfAllEngineTypes = this.sortedDisplayableBackends.map((modelObject) => modelObject.engineType);
     // filter out repeated engineTypes (e.g. [kv, kv] => [kv])

From 5ea6e664d63954ae95932a5827427e49a5eceac9 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Mon, 15 May 2023 10:28:28 -0600
Subject: [PATCH 19/19] address pr comment

---
 ui/app/controllers/vault/cluster/secrets/backends.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
index ed0671fea072..13420ef8d48f 100644
--- a/ui/app/controllers/vault/cluster/secrets/backends.js
+++ b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -28,15 +28,15 @@ export default class VaultClusterSecretsBackendController extends Controller {
     if (this.selectedEngineType) {
       // check first if the user has also filtered by name.
       if (this.selectedEngineName) {
-        return sortedBackends.filter((backend) => this.selectedEngineName === backend.get('id'));
+        return sortedBackends.filter((backend) => this.selectedEngineName === backend.id);
       }
       // otherwise filter by engine type
-      return sortedBackends.filter((backend) => this.selectedEngineType === backend.get('engineType'));
+      return sortedBackends.filter((backend) => this.selectedEngineType === backend.engineType);
     }
 
     // return an options list to filter by engine name, ex: 'secret'
     if (this.selectedEngineName) {
-      return sortedBackends.filter((backend) => this.selectedEngineName === backend.get('id'));
+      return sortedBackends.filter((backend) => this.selectedEngineName === backend.id);
     }
     // no filters, return full sorted list.
     return sortedBackends;