Replace extension menu with ActionMenuShell.vue

shell/components/ActionMenuShell.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
 
 import { isAlternate } from '@shell/utils/platform';
 import { RcDropdownMenu } from '@components/RcDropdown';
 import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
+import { DropdownOption } from '@components/RcDropdown/types';
 
 const store = useStore();
 
-const options = computed(() => store.getters['action-menu/optionsArray']);
-
 type RcDropdownMenuComponentProps = {
   buttonRole?: keyof ButtonRoleProps;
   buttonSize?: keyof ButtonSizeProps;
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;
   resource: Object;
+  customActions?: DropdownOption[];
 }
 
 const props = defineProps <RcDropdownMenuComponentProps>();
@@ -27,6 +28,9 @@ const openChanged = (event: boolean) => {
   }
 };
 
+const emit = defineEmits<{(event: string, payload: any): void}>();
+const route = useRoute();
+
 const execute = (action: any, event: MouseEvent, args?: any) => {
   if (action.disabled) {
     return;
@@ -48,6 +52,23 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
         fn.apply(this, [opts, resources]);
       }
     }
+  } else if (props.customActions) {
+    // If the state of this component is controlled
+    // by props instead of Vuex, we assume you wouldn't want
+    // the mutation to have a dependency on Vuex either.
+    // So in that case we use events to execute actions instead.
+    // If an action list item is clicked, this
+    // component emits that event, then we assume the parent
+    // component will execute the action.
+    emit(
+      action.action,
+      {
+        action,
+        event,
+        ...args,
+        route,
+      }
+    );
   } else {
     // If the state of this component is controlled
     // by Vuex, mutate the store when an action is clicked.
@@ -58,6 +79,16 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
     });
   }
 };
+
+const options = computed(() => store.getters['action-menu/optionsArray']);
+
+const menuOptions = () => {
+  if (props.customActions && props.customActions.length > 0) {
+    return props.customActions;
+  }
+
+  return options.value;
+};
 </script>
 
 <template>
@@ -66,7 +97,7 @@ const execute = (action: any, event: MouseEvent, args?: any) => {
     :button-size="buttonSize || 'small'"
     :button-aria-label="buttonAriaLabel"
     :dropdown-aria-label="dropdownAriaLabel"
-    :options="options"
+    :options="menuOptions()"
     :data-testid="dataTestid"
     @update:open="openChanged"
     @select="(e: MouseEvent, option: object) => execute(option, e)"

shell/pages/c/_cluster/uiplugins/index.vue

@@ -9,7 +9,7 @@ import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { getVersionData, isRancherPrime } from '@shell/config/version';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { NAME as APP_PRODUCT } from '@shell/config/product/apps';
-import ActionMenu from '@shell/components/ActionMenu';
+import ActionMenu from '@shell/components/ActionMenuShell';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
@@ -688,25 +688,11 @@ export default {
         </div>
         <!-- extensions menu -->
         <div v-if="hasFeatureFlag && hasMenuActions">
-          <button
-            ref="actions"
-            aria-haspopup="true"
-            type="button"
-            class="btn role-multi-action actions"
-            data-testid="extensions-page-menu"
-            role="button"
-            :aria-label="t('plugins.labels.menu')"
-            @click="setMenu"
-          >
-            <i class="icon icon-actions" />
-          </button>
           <ActionMenu
+            data-testid="extensions-page-menu"
+            button-role="tertiary"
+            :button-aria-label="t('plugins.labels.menu')"
             :custom-actions="menuActions"
-            :open="menuOpen"
-            :use-custom-target-element="true"
-            :custom-target-element="menuTargetElement"
-            :custom-target-event="menuTargetEvent"
-            @close="setMenu(false)"
             @devLoad="showDeveloperLoadDialog"
             @manageRepos="manageRepos"
             @addRancherRepos="showAddExtensionReposDialog"

shell/store/action-menu.js

@@ -41,7 +41,7 @@ export const getters = {
     const map = {};
 
     for ( const node of selected ) {
-      if (node.availableActions) {
+      if (node?.availableActions) {
         for ( const act of node.availableActions ) {
           _add(map, act);
         }