Merge pull request #12045 from rak-phillip/bugfix/12007-menu-action

Create new `ButtonMultiAction.vue` component

shell/components/ButtonMultiAction.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, defineEmits } from 'vue';
+
+defineEmits(['click']);
+
+type Props = {
+  borderless?: boolean;
+  invisible?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const buttonClass = computed(() => {
+  return {
+    borderless: props?.borderless,
+    invisible:  props?.invisible,
+  };
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="btn btn-sm role-multi-action actions"
+    :class="buttonClass"
+    @click="(e: Event) => $emit('click', e)"
+  >
+    <i class="icon icon-actions" />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.borderless {
+  background-color: transparent;
+  border: none;
+  &:hover, &:focus {
+    background-color: var(--accent-btn);
+    box-shadow: none;
+  }
+}
+</style>

shell/components/ExplorerProjectsNamespaces.vue

@@ -10,6 +10,7 @@ import ExtensionPanel from '@shell/components/ExtensionPanel';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
+import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
 import ResourceFetch from '@shell/mixins/resource-fetch';
@@ -18,7 +19,11 @@ import DOMPurify from 'dompurify';
 export default {
   name:       'ListProjectNamespace',
   components: {
-    ExtensionPanel, Masthead, MoveModal, ResourceTable
+    ExtensionPanel,
+    Masthead,
+    MoveModal,
+    ResourceTable,
+    ButtonMultiAction,
   },
   mixins: [ResourceFetch],
 
@@ -430,14 +435,12 @@ export default {
             >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
-            <button
-              type="button"
-              class="project-action btn btn-sm role-multi-action actions mr-10"
-              :class="{invisible: !showProjectActionButton(group.group)}"
+            <ButtonMultiAction
+              class="project-action mr-10"
+              :borderless="true"
+              :invisible="!showProjectActionButton(group.group)"
               @click="showProjectAction($event, group.group)"
-            >
-              <i class="icon icon-actions" />
-            </button>
+            />
           </div>
         </div>
       </template>

shell/components/SortableTable/index.vue

@@ -22,6 +22,7 @@ import AdvancedFiltering from './advanced-filtering';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
+import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -44,7 +45,12 @@ export default {
   emits: ['clickedActionButton', 'pagination-changed', 'group-value-change', 'selection', 'rowClick'],
 
   components: {
-    THead, Checkbox, AsyncButton, ActionDropdown, LabeledSelect
+    THead,
+    Checkbox,
+    AsyncButton,
+    ActionDropdown,
+    LabeledSelect,
+    ButtonMultiAction,
   },
   mixins: [
     filtering,
@@ -1415,18 +1421,15 @@ export default {
                     name="row-actions"
                     :row="row.row"
                   >
-                    <button
+                    <ButtonMultiAction
                       :id="`actionButton+${i}+${(row.row && row.row.name) ? row.row.name : ''}`"
                       :ref="`actionButton${i}`"
-                      :data-testid="componentTestid + '-' + i + '-action-button'"
                       aria-haspopup="true"
                       aria-expanded="false"
-                      type="button"
-                      class="btn btn-sm role-multi-action actions"
+                      :data-testid="componentTestid + '-' + i + '-action-button'"
+                      :borderless="true"
                       @click="handleActionButtonClick(i, $event)"
-                    >
-                      <i class="icon icon-actions" />
-                    </button>
+                    />
                   </slot>
                 </td>
               </tr>
@@ -1661,17 +1664,7 @@ export default {
     }
   }
 
-  // Remove colors from multi-action buttons in the table
   td {
-    .actions.role-multi-action {
-      background-color: transparent;
-      border: none;
-      &:hover, &:focus {
-        background-color: var(--accent-btn);
-        box-shadow: none;
-      }
-    }
-
     // Aligns with COLUMN_BREAKPOINTS
     @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) {
       // HIDE column on sizes below 480px

shell/components/__tests__/ButtonMultiAction.test.ts

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
+
+describe('buttonMultiAction.vue', () => {
+  it('renders correct classes when props are provided', () => {
+    const wrapper = shallowMount(ButtonMultiAction, {
+      props: {
+        borderless: true,
+        invisible:  true,
+      },
+    });
+
+    expect(wrapper.find('button').classes()).toContain('borderless');
+    expect(wrapper.find('button').classes()).toContain('invisible');
+  });
+
+  it('renders correct classes when props are absent', () => {
+    const wrapper = shallowMount(ButtonMultiAction);
+
+    expect(wrapper.find('button').classes()).not.toContain('borderless');
+    expect(wrapper.find('button').classes()).not.toContain('invisible');
+  });
+
+  it('emits click event when button is clicked', () => {
+    const wrapper = shallowMount(ButtonMultiAction);
+
+    wrapper.find('button').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+});