custom message list

hashicorp · Feb 8, 2024 · 37b48ee · 37b48ee
1 parent 77186bf
commit 37b48ee
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/ui/lib/config-ui/addon/components/messages/page/list.hbs b/ui/lib/config-ui/addon/components/messages/page/list.hbs
@@ -56,28 +56,22 @@
         </div>
         <div class="level-right is-flex is-paddingless is-marginless">
           <div class="level-item">
-            <PopupMenu @name="engine-menu">
-              <nav class="menu">
-                <ul class="menu-list">
-                  {{#if message.canEditCustomMessages}}
-                    <li class="action">
-                      <LinkTo @route="messages.message.edit" @model={{message.id}}>
-                        Edit
-                      </LinkTo>
-                    </li>
-                  {{/if}}
-                  {{#if message.canDeleteCustomMessages}}
-                    <ConfirmAction
-                      @isInDropdown={{true}}
-                      @buttonText="Delete"
-                      @confirmTitle="Are you sure?"
-                      @confirmMessage="This will delete this message permanently. You cannot undo this action."
-                      @onConfirmAction={{perform this.deleteMessage message}}
-                    />
-                  {{/if}}
-                </ul>
-              </nav>
-            </PopupMenu>
+            {{#if (or message.canEditCustomMessages message.canDeleteCustomMessages)}}
+              <Hds::Dropdown @isInline={{true}} as |dd|>
+                <dd.ToggleIcon
+                  @icon="more-horizontal"
+                  @text="Message popup menu"
+                  @hasChevron={{false}}
+                  data-test-popup-menu-trigger
+                />
+                {{#if message.canEditCustomMessages}}
+                  <dd.Interactive @text="Edit" @route="messages.message.edit" @model={{message.id}} />
+                {{/if}}
+                {{#if message.canDeleteCustomMessages}}
+                  <dd.Interactive @text="Disable" @color="critical" {{on "click" (fn (mut this.messageToDelete) message)}} />
+                {{/if}}
+              </Hds::Dropdown>
+            {{/if}}
           </div>
         </div>
       </div>
@@ -117,4 +111,13 @@
       <Hds::Button @text="Close" {{on "click" F.close}} data-test-modal-button="maximum-message-modal" />
     </M.Footer>
   </Hds::Modal>
+{{/if}}
+
+{{#if this.messageToDelete}}
+  <ConfirmModal
+    @color="critical"
+    @confirmMessage="This will delete this message permanently. You cannot undo this action."
+    @onClose={{fn (mut this.messageToDelete) null}}
+    @onConfirm={{perform this.deleteMessage this.messageToDelete}}
+  />
 {{/if}}
diff --git a/ui/lib/config-ui/addon/components/messages/page/list.js b/ui/lib/config-ui/addon/components/messages/page/list.js
@@ -30,6 +30,7 @@ export default class MessagesList extends Component {
   @service customMessages;
 
   @tracked showMaxMessageModal = false;
+  @tracked messageToDelete = null;
 
   // This follows the pattern in sync/addon/components/secrets/page/destinations for FilterInput.
   // Currently, FilterInput doesn't do a full page refresh causing it to lose focus.
@@ -110,6 +111,8 @@ export default class MessagesList extends Component {
     } catch (e) {
       const message = errorMessage(e);
       this.flashMessages.danger(message);
+    } finally {
+      this.messageToDelete = null;
     }
   }