From 3e091e96525c313cfa2cce7237b196e3166de9c3 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 25 Feb 2025 08:20:48 -0700
Subject: [PATCH 1/3] Accept custom actions in `ActionMenuShell.vue`

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/ActionMenuShell.vue | 37 +++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/shell/components/ActionMenuShell.vue b/shell/components/ActionMenuShell.vue
index 5eddfa56167..bd5eb866db1 100644
--- a/shell/components/ActionMenuShell.vue
+++ b/shell/components/ActionMenuShell.vue
@@ -1,15 +1,15 @@
 <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;
@@ -17,6 +17,7 @@ type RcDropdownMenuComponentProps = {
   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)"

From 51d1328e353f4d66019eba6da164f152d64d19e9 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 25 Feb 2025 08:21:35 -0700
Subject: [PATCH 2/3] Replace extensions menu with ActionMenuShell

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/pages/c/_cluster/uiplugins/index.vue | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/shell/pages/c/_cluster/uiplugins/index.vue b/shell/pages/c/_cluster/uiplugins/index.vue
index d7a4e12bdbd..331e86d1941 100644
--- a/shell/pages/c/_cluster/uiplugins/index.vue
+++ b/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"

From 7f7603daf98146dc46c538a479ae3c0bcf6f4c83 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 25 Feb 2025 13:29:42 -0700
Subject: [PATCH 3/3] Use optional chaining when accessing properties of node

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/store/action-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shell/store/action-menu.js b/shell/store/action-menu.js
index b990d6d0dd8..ef3b323e4fd 100644
--- a/shell/store/action-menu.js
+++ b/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);
         }