attempt of backends.hbs dropdown

hashicorp · Feb 9, 2024 · fdd7878 · fdd7878
1 parent b2f4cff
commit fdd7878
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/ui/app/controllers/vault/cluster/secrets/backends.js b/ui/app/controllers/vault/cluster/secrets/backends.js
@@ -17,6 +17,7 @@ export default class VaultClusterSecretsBackendController extends Controller {
   @tracked secretEngineOptions = [];
   @tracked selectedEngineType = null;
   @tracked selectedEngineName = null;
+  @tracked engineToDisable = null;
 
   get sortedDisplayableBackends() {
     // show supported secret engines first and then organize those by id.
@@ -80,6 +81,8 @@ export default class VaultClusterSecretsBackendController extends Controller {
       this.flashMessages.danger(
         `There was an error disabling the ${engineType} Secrets Engine at ${path}: ${err.errors.join(' ')}.`
       );
+    } finally {
+      this.engineToDisable = null;
     }
   }
 }
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -86,28 +86,39 @@
         </ReadMore>
       {{/if}}
     </div>
-    {{! meatball sandwich menu }}
     <div class="linked-block-popup-menu">
-      <PopupMenu @name="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}} data-test-engine-config>
-                View configuration
-              </LinkTo>
-            </li>
-            {{#if (not-eq backend.type "cubbyhole")}}
-              <ConfirmAction
-                @isInDropdown={{true}}
-                @confirmMessage="Any data in this engine will be permanently deleted."
-                @confirmTitle="Disable engine?"
-                @buttonText="Disable"
-                @onConfirmAction={{perform this.disableEngine backend}}
-              />
-            {{/if}}
-          </ul>
-        </nav>
-      </PopupMenu>
+      <Hds::Dropdown @isInline={{true}} as |dd|>
+        <dd.ToggleIcon
+          @icon="more-horizontal"
+          @text="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu"
+          @hasChevron={{false}}
+          data-test-popup-menu-trigger
+        />
+        <dd.Interactive
+          @text="View configuration"
+          @route="vault.cluster.secrets.backend.configuration"
+          @model={{backend.id}}
+          data-test-engine-config
+        />
+        {{#if (not-eq backend.type "cubbyhole")}}
+          <dd.Interactive
+            @text="Disable"
+            @color="critical"
+            {{on "click" (fn (mut this.engineToDisable) backend)}}
+            data-test-confirm-action-trigger
+          />
+        {{/if}}
+      </Hds::Dropdown>
     </div>
   </LinkedBlock>
-{{/each}}
+{{/each}}
+
+{{#if this.engineToDisable}}
+  <ConfirmModal
+    @color="critical"
+    @confirmMessage="Any data in this engine will be permanently deleted."
+    @confirmTitle="Disable engine?"
+    @onClose={{fn (mut this.engineToDisable) null}}
+    @onConfirm={{perform this.disableEngine this.engineToDisable}}
+  />
+{{/if}}