backport of Hds::Dropdown replace PopupMenu (#25337)

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

changelog/25321.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Use Hds::Dropdown component to replace list view popup menus
+```

ui/app/components/identity/popup-alias.js

@@ -3,25 +3,38 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Base from './_popup-base';
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import errorMessage from 'vault/utils/error-message';
 
-export default Base.extend({
-  messageArgs(model) {
-    const type = model.get('identityType');
-    const id = model.id;
-    return [type, id];
-  },
+export default class IdentityPopupAlias extends Component {
+  @service flashMessages;
+  @tracked showConfirmModal = false;
 
-  successMessage(type, id) {
-    return `Successfully deleted ${type}: ${id}`;
-  },
+  onSuccess(type, id) {
+    if (this.args.onSuccess) {
+      this.args.onSuccess();
+    }
+    this.flashMessages.success(`Successfully deleted ${type}: ${id}`);
+  }
+  onError(err, type, id) {
+    if (this.args.onError) {
+      this.args.onError();
+    }
+    const error = errorMessage(err);
+    this.flashMessages.danger(`There was a problem deleting ${type}: ${id} - ${error}`);
+  }
 
-  errorMessage(e, type, id) {
-    const error = e.errors ? e.errors.join(' ') : e.message;
-    return `There was a problem deleting ${type}: ${id} - ${error}`;
-  },
-
-  transaction(model) {
-    return model.destroyRecord();
-  },
-});
+  @action
+  async deleteAlias() {
+    const { identityType, id } = this.args.item;
+    try {
+      await this.args.item.destroyRecord();
+      this.onSuccess(identityType, id);
+    } catch (e) {
+      this.onError(e, identityType, id);
+    }
+  }
+}

ui/app/components/identity/popup-members.js

@@ -3,37 +3,44 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import { alias } from '@ember/object/computed';
-import { computed } from '@ember/object';
-import Base from './_popup-base';
-
-export default Base.extend({
-  model: alias('params.firstObject'),
-
-  groupArray: computed('params', function () {
-    return this.params.objectAt(1);
-  }),
-
-  memberId: computed('params', function () {
-    return this.params.objectAt(2);
-  }),
-
-  messageArgs(/*model, groupArray, memberId*/) {
-    return [...arguments];
-  },
-
-  successMessage(model, groupArray, memberId) {
-    return `Successfully removed '${memberId}' from the group`;
-  },
-
-  errorMessage(e, model, groupArray, memberId) {
-    const error = e.errors ? e.errors.join(' ') : e.message;
-    return `There was a problem removing '${memberId}' from the group - ${error}`;
-  },
-
-  transaction(model, groupArray, memberId) {
-    const members = model.get(groupArray);
-    model.set(groupArray, members.without(memberId));
-    return model.save();
-  },
-});
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import errorMessage from 'vault/utils/error-message';
+
+export default class IdentityPopupMembers extends Component {
+  @service flashMessages;
+  @tracked showConfirmModal = false;
+
+  onSuccess(memberId) {
+    if (this.args.onSuccess) {
+      this.args.onSuccess();
+    }
+    this.flashMessages.success(`Successfully removed '${memberId}' from the group`);
+  }
+  onError(err, memberId) {
+    if (this.args.onError) {
+      this.args.onError();
+    }
+    const error = errorMessage(err);
+    this.flashMessages.danger(`There was a problem removing '${memberId}' from the group - ${error}`);
+  }
+
+  transaction() {
+    const members = this.args.model[this.args.groupArray];
+    this.args.model[this.args.groupArray] = members.without(this.args.memberId);
+    return this.args.model.save();
+  }
+
+  @action
+  async removeGroup() {
+    const memberId = this.args.memberId;
+    try {
+      await this.transaction();
+      this.onSuccess(memberId);
+    } catch (e) {
+      this.onError(e, memberId);
+    }
+  }
+}

ui/app/components/identity/popup-metadata.js

@@ -3,32 +3,45 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Base from './_popup-base';
-import { computed } from '@ember/object';
-import { alias } from '@ember/object/computed';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import errorMessage from 'vault/utils/error-message';
 
-export default Base.extend({
-  model: alias('params.firstObject'),
-  key: computed('params', function () {
-    return this.params.objectAt(1);
-  }),
+export default class IdentityPopupMetadata extends Component {
+  @service flashMessages;
+  @tracked showConfirmModal = false;
 
-  messageArgs(model, key) {
-    return [model, key];
-  },
+  onSuccess(key) {
+    if (this.args.onSuccess) {
+      this.args.onSuccess();
+    }
+    this.flashMessages.success(`Successfully removed '${key}' from metadata`);
+  }
+  onError(err, key) {
+    if (this.args.onError) {
+      this.args.onError();
+    }
+    const error = errorMessage(err);
+    this.flashMessages.danger(`There was a problem removing '${key}' from the metadata - ${error}`);
+  }
 
-  successMessage(model, key) {
-    return `Successfully removed '${key}' from metadata`;
-  },
-  errorMessage(e, model, key) {
-    const error = e.errors ? e.errors.join(' ') : e.message;
-    return `There was a problem removing '${key}' from the metadata - ${error}`;
-  },
+  transaction() {
+    const metadata = this.args.model.metadata;
+    delete metadata[this.args.key];
+    this.args.model.metadata = { ...metadata };
+    return this.args.model.save();
+  }
 
-  transaction(model, key) {
-    const metadata = model.metadata;
-    delete metadata[key];
-    model.set('metadata', { ...metadata });
-    return model.save();
-  },
-});
+  @action
+  async removeMetadata() {
+    const key = this.args.key;
+    try {
+      await this.transaction();
+      this.onSuccess(key);
+    } catch (e) {
+      this.onError(e, key);
+    }
+  }
+}

ui/app/components/identity/popup-policy.js

@@ -3,32 +3,47 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import { alias } from '@ember/object/computed';
-import { computed } from '@ember/object';
-import Base from './_popup-base';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import errorMessage from 'vault/utils/error-message';
+import { tracked } from '@glimmer/tracking';
 
-export default Base.extend({
-  model: alias('params.firstObject'),
-  policyName: computed('params', function () {
-    return this.params.objectAt(1);
-  }),
+export default class IdentityPopupPolicy extends Component {
+  @service flashMessages;
+  @tracked showConfirmModal = false;
 
-  messageArgs(model, policyName) {
-    return [model, policyName];
-  },
+  onSuccess(policyName, modelId) {
+    if (this.args.onSuccess) {
+      this.args.onSuccess();
+    }
+    this.flashMessages.success(`Successfully removed '${policyName}' policy from ${modelId}`);
+  }
+  onError(err, policyName) {
+    if (this.args.onError) {
+      this.args.onError();
+    }
+    const error = errorMessage(err);
+    this.flashMessages.danger(`There was a problem removing '${policyName}' policy - ${error}`);
+  }
 
-  successMessage(model, policyName) {
-    return `Successfully removed '${policyName}' policy from ${model.id} `;
-  },
+  transaction() {
+    const policies = this.args.model.policies;
+    this.args.model.policies = policies.without(this.args.policyName);
+    return this.args.model.save();
+  }
 
-  errorMessage(e, model, policyName) {
-    const error = e.errors ? e.errors.join(' ') : e.message;
-    return `There was a problem removing '${policyName}' policy - ${error}`;
-  },
-
-  transaction(model, policyName) {
-    const policies = model.get('policies');
-    model.set('policies', policies.without(policyName));
-    return model.save();
-  },
-});
+  @action
+  async removePolicy() {
+    const {
+      policyName,
+      model: { id },
+    } = this.args;
+    try {
+      await this.transaction();
+      this.onSuccess(policyName, id);
+    } catch (e) {
+      this.onError(e, policyName);
+    }
+  }
+}

ui/app/components/secret-list/aws-role-item.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class SecretListAwsRoleItemComponent extends Component {
+  @tracked showConfirmModal = false;
+}