@rancher/shell 3.0.8-rc.2 → 3.0.8-rc.3

package/components/Resource/Detail/ResourcePopover/__tests__/index.test.ts

@@ -1,12 +1,7 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import ResourcePopover from '@shell/components/Resource/Detail/ResourcePopover/index.vue';
-
-const mockI18n = { t: (key: string, args: any) => JSON.stringify({ key, args }) };
-const mockFocusTrap = jest.fn();
-
-jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => mockI18n }));
-jest.mock('@shell/composables/focusTrap', () => ({ useWatcherBasedSetupFocusTrapWithDestroyIncluded: (...args: any) => mockFocusTrap(...args) }));
+import PopoverCard from '@shell/components/PopoverCard.vue';
 
 const mockResource = {
   id:                 'test-ns/test-pod',
@@ -14,7 +9,6 @@ const mockResource = {
   nameDisplay:        'My Test Pod',
   stateBackground:    'bg-success',
   detailLocation:     { name: 'pod-detail', params: { id: 'test-pod' } },
-  glance:             [{ label: 'Status', content: 'Active' }],
   parentNameOverride: 'Overridden Pod',
 };
 
@@ -23,223 +17,211 @@ describe('component: ResourcePopover/index.vue', () => {
   const mockClusterFind = jest.fn();
   const mockSomethingFind = jest.fn();
 
-  const createWrapper = async(props: any = { type: 'pod', id: 'test-ns/test-pod' }) => {
-    store = createStore({
-      getters: {
-        'i18n/t':            () => (key: string) => key,
-        currentStore:        () => () => 'cluster',
-        'cluster/schemaFor': () => () => ({ id: 'pod' }),
-        'type-map/labelFor': () => () => 'Pod',
-      },
-      actions: { 'cluster/find': mockClusterFind, 'something/find': mockSomethingFind }
-    });
+  const defaultStore = {
+    getters: {
+      'i18n/t':            () => (key: string) => key,
+      currentStore:        () => () => 'cluster',
+      'cluster/schemaFor': () => () => ({ id: 'pod' }),
+      'type-map/labelFor': () => () => 'Pod',
+    },
+    actions: { 'cluster/find': mockClusterFind, 'something/find': mockSomethingFind }
+  };
 
-    const wrapper = mount(ResourcePopover, {
-      props,
+  const PopoverCardStub = {
+    PopoverCard: {
+      template: `
+              <div>
+                <slot />
+                <slot name="heading-action" :close="() => {}" />
+                <slot name="card-body" />
+              </div>
+            `,
+    },
+  };
+
+  const createWrapper = (props: any = {}, storeConfig: any = defaultStore, stubs: any = {}) => {
+    store = createStore(storeConfig);
+
+    return mount(ResourcePopover, {
+      props: {
+        type: 'pod',
+        id:   'test-ns/test-pod',
+        ...props,
+      },
       global: {
         plugins: [store],
         stubs:   {
-          'v-dropdown':        { name: 'v-dropdown', template: '<div><slot /><slot name="popper" /></div>' },
-          'router-link':       RouterLinkStub,
-          ResourcePopoverCard: {
-            name:     'ResourcePopoverCard',
-            template: '<div id="resource-popover-card" />'
-          },
-          RcStatusIndicator: true,
+          RouterLink:          RouterLinkStub,
+          RcStatusIndicator:   true,
+          ActionMenu:          true,
+          ResourcePopoverCard: true,
+          VDropdown:           true,
+          ...stubs
         },
       },
     });
-
-    // Requires two so the fetch can be resolved
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
-
-    return wrapper;
   };
 
-  // Reset mocks before each test
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  describe('data Fetching and Initial State', () => {
-    it('should show loading state initially', async() => {
-      const wrapper = await createWrapper(); // Override default fetch value
+  describe('data Fetching and Rendering', () => {
+    it('should display a loading indicator while fetching data', async() => {
+      mockClusterFind.mockImplementation(() => new Promise(() => { }));
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      expect(wrapper.find('.display').exists()).toBe(false);
       expect(wrapper.text()).toContain('...');
+      expect(wrapper.find('.display').exists()).toBe(false);
     });
 
-    it('should call the fetch composable and dispatch a store action', async() => {
-      await createWrapper();
+    it('should fetch data using the default store', async() => {
+      const wrapper = createWrapper();
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      expect(mockClusterFind).toHaveBeenCalledWith(expect.objectContaining({}), expect.objectContaining({ type: 'pod', id: 'test-ns/test-pod' }));
+      expect(mockClusterFind).toHaveBeenCalledWith(expect.any(Object), { type: 'pod', id: 'test-ns/test-pod' });
     });
 
-    it('should dispatch to the specified store', async() => {
-      await createWrapper({
-        type: 'pod', id: 'test-ns/test-pod', currentStore: 'something'
-      });
+    it('should fetch data using the store specified in props', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = createWrapper({ currentStore: 'something' });
 
-      expect(mockSomethingFind).toHaveBeenCalledWith(expect.objectContaining({}), expect.objectContaining({ type: 'pod', id: 'test-ns/test-pod' }));
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      expect(mockSomethingFind).toHaveBeenCalledWith(expect.any(Object), { type: 'pod', id: 'test-ns/test-pod' });
+      expect(mockClusterFind).not.toHaveBeenCalled();
     });
 
-    it('should render resource name and link when data is loaded', async() => {
+    it('should display resource details after data is fetched', async() => {
       mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
       const link = wrapper.findComponent(RouterLinkStub);
 
-      expect(link.exists()).toBe(true);
       expect(link.text()).toBe(mockResource.nameDisplay);
       expect(link.props('to')).toStrictEqual(mockResource.detailLocation);
     });
 
-    it('should use `detailLocation` prop for router-link if provided', async() => {
-      const detailLocationProp = { name: 'custom-route' };
+    it('should use detailLocation prop for the link if provided', async() => {
+      const customLocation = { name: 'custom-route' };
 
-      const wrapper = await createWrapper({
-        type:           'pod',
-        id:             'test-ns/test-pod',
-        detailLocation: detailLocationProp
-      });
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = createWrapper({ detailLocation: customLocation }, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
       const link = wrapper.findComponent(RouterLinkStub);
 
-      expect(link.props('to')).toStrictEqual(detailLocationProp);
+      expect(link.props('to')).toStrictEqual(customLocation);
     });
   });
 
   describe('computed Properties', () => {
-    it('should return empty resourceTypeLabel if no data', async() => {
-      mockClusterFind.mockReturnValue(null);
-
-      const wrapper = await createWrapper();
+    it('resourceTypeLabel: should be empty if data is not loaded', async() => {
+      mockClusterFind.mockReturnValue(undefined);
+      const wrapper = createWrapper();
 
-      expect(wrapper.vm.resourceTypeLabel).toBe('');
-    });
-
-    it('should return resourceTypeLabel from type-map getter', async() => {
-      const resourceWithoutOverride = { ...mockResource, parentNameOverride: undefined };
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      mockClusterFind.mockReturnValue(resourceWithoutOverride);
-      const wrapper = await createWrapper();
+      const popoverCard = wrapper.findComponent(PopoverCard);
+      const ariaLabel = popoverCard.props('showPopoverAriaLabel');
 
-      expect(wrapper.vm.resourceTypeLabel).toBe('Pod');
+      expect(ariaLabel).toBe('component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"\",\"resource\":\"\"}');
     });
 
-    it('should generate correct aria-labels', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
-
-      const expectedAriaLabel = JSON.stringify({ key: 'component.resource.detail.glance.ariaLabel.showDetails', args: { name: mockResource.nameDisplay, resource: mockResource.parentNameOverride } });
-      const dropdown = wrapper.findComponent({ name: 'v-dropdown' });
-      const button = wrapper.find('.focus-button');
+    it('resourceTypeLabel: should use parentNameOverride when available', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper();
 
-      expect(dropdown.attributes('aria-label')).toBe(expectedAriaLabel);
-      expect(button.attributes('aria-label')).toBe(expectedAriaLabel);
-    });
-  });
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-  describe('popover Visibility', () => {
-    it('should not show popover card initially', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      const popoverCard = wrapper.findComponent(PopoverCard);
+      const ariaLabel = popoverCard.props('showPopoverAriaLabel');
 
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+      expect(ariaLabel).toBe('component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"My Test Pod\",\"resource\":\"Overridden Pod\"}');
     });
 
-    it('should show popover on mouseenter', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+    it('resourceTypeLabel: should use type-map label as a fallback', async() => {
+      const resourceWithoutOverride = { ...mockResource, parentNameOverride: null };
 
-      await wrapper.find('.display').trigger('mouseenter');
-      expect(wrapper.vm.showPopover).toBe(true);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(true);
-    });
+      mockClusterFind.mockResolvedValue(resourceWithoutOverride);
+      const wrapper = createWrapper();
 
-    it('should hide popover on mouseleave', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      await wrapper.find('.display').trigger('mouseenter');
-      expect(wrapper.vm.showPopover).toBe(true);
+      const popoverCard = wrapper.findComponent(PopoverCard);
+      const ariaLabel = popoverCard.props('showPopoverAriaLabel');
 
-      await wrapper.find('.resource-popover').trigger('mouseleave');
-      expect(wrapper.vm.showPopover).toBe(false);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+      expect(ariaLabel).toBe('component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"My Test Pod\",\"resource\":\"Pod\"}');
     });
+  });
 
-    it('should show popover on focus button click', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+  describe('props passed to child components', () => {
+    it('should pass correct props to PopoverCard', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper();
 
-      await wrapper.find('.focus-button').trigger('click');
-      expect(wrapper.vm.showPopover).toBe(true);
-      expect(wrapper.vm.focusOpen).toBe(true);
       await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(true);
-    });
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-    it('should hide popover when action is invoked from card', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      const popoverCard = wrapper.findComponent(PopoverCard);
 
-      await wrapper.find('.display').trigger('mouseenter');
-      await wrapper.vm.$nextTick();
+      expect(popoverCard.props('cardTitle')).toBe(mockResource.nameDisplay);
+      expect(popoverCard.props('fallbackFocus')).toBe("[data-testid='resource-popover-action-menu']");
 
-      const card = wrapper.findComponent({ name: 'ResourcePopoverCard' });
+      const expectedAriaLabel = 'component.resource.detail.glance.ariaLabel.showDetails-{\"name\":\"My Test Pod\",\"resource\":\"Overridden Pod\"}';
 
-      await card.vm.$emit('action-invoked');
-      expect(wrapper.vm.showPopover).toBe(false);
-      await wrapper.vm.$nextTick();
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+      expect(popoverCard.props('showPopoverAriaLabel')).toBe(expectedAriaLabel);
     });
 
-    it('should hide popover on Escape keydown', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+    it('should pass correct props to ActionMenu', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
 
-      await wrapper.find('.focus-button').trigger('click');
       await wrapper.vm.$nextTick();
-
-      const card = wrapper.findComponent({ name: 'ResourcePopoverCard' });
-
-      await card.trigger('keydown.escape');
+      await wrapper.vm.$nextTick();
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
-    });
-  });
+      const actionMenu = wrapper.findComponent({ name: 'ActionMenu' });
 
-  describe('focus Trap', () => {
-    it('should not setup focus trap on mouseenter', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+      expect(actionMenu.props('resource')).toStrictEqual(mockResource);
 
-      await wrapper.find('.display').trigger('mouseenter');
-      await wrapper.vm.$nextTick();
+      const expectedAriaLabel = 'component.resource.detail.glance.ariaLabel.actionMenu-{\"resource\":\"My Test Pod\"}';
 
-      expect(wrapper.vm.focusOpen).toBe(false);
-      expect(mockFocusTrap).not.toHaveBeenCalled();
+      expect(actionMenu.props('buttonAriaLabel')).toBe(expectedAriaLabel);
     });
 
-    it('should setup focus trap when opened via focus button', async() => {
-      mockClusterFind.mockReturnValue(mockResource);
-      const wrapper = await createWrapper();
+    it('should pass correct props to ResourcePopoverCard', async() => {
+      mockClusterFind.mockResolvedValue(mockResource);
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
 
-      await wrapper.find('.focus-button').trigger('click');
-      await wrapper.vm.$nextTick(); // Triggers the watch
-
-      expect(wrapper.vm.focusOpen).toBe(true);
-      expect(mockFocusTrap).toHaveBeenCalledTimes(1);
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
 
-      // Verify the options passed to the focus trap
-      const focusTrapOptions = mockFocusTrap.mock.calls[0][2];
+      const resourceCard = wrapper.findComponent({ name: 'ResourcePopoverCard' });
 
-      expect(focusTrapOptions.fallbackFocus).toBe('#first-glance-item');
-      expect(focusTrapOptions.setReturnFocus()).toBe('.focus-button');
+      expect(resourceCard.props('resource')).toStrictEqual(mockResource);
     });
   });
 });

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -4,11 +4,9 @@ import { useStore } from 'vuex';
 import ResourcePopoverCard from '@shell/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue';
 import RcStatusIndicator from '@components/Pill/RcStatusIndicator/RcStatusIndicator.vue';
 import { useI18n } from '@shell/composables/useI18n';
-import { computed, ref, watch } from 'vue';
-import {
-  DEFAULT_FOCUS_TRAP_OPTS,
-  useWatcherBasedSetupFocusTrapWithDestroyIncluded
-} from '@shell/composables/focusTrap';
+import { computed, ref } from 'vue';
+import PopoverCard from '@shell/components/PopoverCard.vue';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
 
 export interface Props {
   type: string;
@@ -23,14 +21,14 @@ const store = useStore();
 const i18n = useI18n(store);
 const props = defineProps<Props>();
 const card = ref<any>(null);
-const popoverContainer = ref(null);
 const showPopover = ref<boolean>(false);
-const focusOpen = ref<boolean>(false);
 
 const fetch = useFetch(async() => {
   const currentStore = props.currentStore || store.getters['currentStore'](props.type);
 
-  return store.dispatch(`${ currentStore }/find`, { type: props.type, id: props.id });
+  const r = await store.dispatch(`${ currentStore }/find`, { type: props.type, id: props.id });
+
+  return r;
 });
 
 const resourceTypeLabel = computed(() => {
@@ -45,88 +43,63 @@ const resourceTypeLabel = computed(() => {
   return resource.parentNameOverride || store.getters['type-map/labelFor'](schema);
 });
 
+const nameDisplay = computed(() => {
+  return fetch.value.data?.nameDisplay || '';
+});
+
 const actionInvoked = () => {
   showPopover.value = false;
 };
-
-// Set focus trap when card opened using keyboard
-watch(
-  () => card.value,
-  (neu) => {
-    if (neu && focusOpen.value) {
-      const opts = {
-        ...DEFAULT_FOCUS_TRAP_OPTS,
-        fallbackFocus:  '#first-glance-item',
-        setReturnFocus: () => '.focus-button'
-      };
-
-      useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => showPopover.value, '#resource-popover-card', opts);
-    }
-  }
-);
 </script>
 
 <template>
-  <div
+  <PopoverCard
     class="resource-popover"
-    @mouseleave="showPopover=false"
+    :card-title="nameDisplay"
+    fallback-focus="[data-testid='resource-popover-action-menu']"
+    :show-popover-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.showDetails', { name: nameDisplay, resource: resourceTypeLabel })"
   >
-    <v-dropdown
-      :triggers="[]"
-      :container="popoverContainer"
-      :shown="showPopover"
-      placement="bottom-start"
-      :aria-label="i18n.t('component.resource.detail.glance.ariaLabel.showDetails', { name: fetch.data?.nameDisplay, resource: resourceTypeLabel })"
-    >
-      <div class="target">
-        <span class="display-container">
-          <span
-            v-if="fetch.data"
-            class="display"
-            @mouseenter="showPopover=true"
-          >
-            <RcStatusIndicator
-              shape="disc"
-              :status="fetch.data?.stateBackground || 'unknown'"
-            />
-            <router-link
-              :to="props.detailLocation || fetch.data.detailLocation || '#'"
-            >
-              {{ fetch.data.nameDisplay }}
-            </router-link>
-            <div
-              ref="popoverContainer"
-              class="resource-popover-container"
-            >
-              <!--Empty container for mounting popper content-->
-            </div>
-          </span>
-          <span v-else>...</span>
-          <button
-            v-if="fetch.data"
-            class="focus-button role-secondary"
-            :aria-label="i18n.t('component.resource.detail.glance.ariaLabel.showDetails', { name: fetch.data?.nameDisplay, resource: resourceTypeLabel })"
-            aria-haspopup="true"
-            :aria-expanded="showPopover"
-            @click="showPopover=true; focusOpen=true;"
-          >
-            <i class="icon icon-chevron-down icon-sm" />
-          </button>
-        </span>
-      </div>
-
-      <template #popper>
-        <ResourcePopoverCard
-          v-if="showPopover"
-          id="resource-popover-card"
-          ref="card"
-          :resource="fetch.data"
-          @action-invoked="actionInvoked"
-          @keydown.escape="showPopover=false; focusOpen=false"
+    <span>
+      <span
+        v-if="fetch.data"
+        class="display"
+        @mouseenter="showPopover=true"
+      >
+        <RcStatusIndicator
+          shape="disc"
+          :status="fetch.data?.stateBackground || 'unknown'"
         />
-      </template>
-    </v-dropdown>
-  </div>
+        <router-link
+          :to="props.detailLocation || fetch.data.detailLocation || '#'"
+        >
+          {{ nameDisplay }}
+        </router-link>
+      </span>
+      <span v-else>{{ fetch.loading }}...</span>
+    </span>
+    <template
+      v-if="fetch.data"
+      #heading-action="{close}"
+    >
+      <ActionMenu
+        :resource="fetch.data"
+        :button-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.actionMenu', { resource: nameDisplay })"
+        data-testid="resource-popover-action-menu"
+        @action-invoked="close"
+      />
+    </template>
+    <template
+      v-if="fetch.data"
+      #card-body
+    >
+      <ResourcePopoverCard
+        id="resource-popover-card"
+        ref="card"
+        :resource="fetch.data"
+        @action-invoked="actionInvoked"
+      />
+    </template>
+  </PopoverCard>
 </template>
 
 <style lang="scss" scoped>
@@ -134,44 +107,8 @@ watch(
   position: relative;
   width: 100%;
 
-  .target, a {
-    @include clip;
-  }
-
-  .display-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-
   .display {
     display: inline-flex;
-    max-width: 100%;
-    a {
-      flex: 1;
-    }
-  }
-
-  .target {
-    width: 100%;
-    height: 17px;
-  }
-
-  .focus-button {
-    margin-left: 4px;
-    padding: 0;
-    width: 0px;
-    height: initial;
-    min-height: initial;
-    overflow: hidden;
-    border-width: 0;
-
-    &:focus {
-      width: initial;
-      border-width: 1px;
-    }
   }
 
   .rc-status-indicator {
@@ -180,47 +117,5 @@ watch(
       height: initial;
       line-height: initial;
   }
-
-  .resource-popover-card {
-    border: none;
-  }
-
-  .resource-popover-container {
-    position: absolute;
-    $size: 10px;
-    height: $size;
-    bottom: -$size;
-    width: 100%;
-  }
-
-  &:deep() {
-    & > .v-popper > .btn.role-link {
-      padding: 0;
-      min-height: initial;
-      line-height: initial;
-
-      &:hover {
-        background: none;
-      }
-    }
-
-    .resource-popover-container > .v-popper__popper {
-      border-radius: 6px;
-      box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.04);
-
-      & > .v-popper__wrapper {
-        .v-popper__arrow-container {
-          display: none;
-        }
-
-        & > .v-popper__inner {
-          overflow: initial;
-          &, & > div > .dropdownTarget {
-            padding: 0;
-          }
-        }
-      }
-    }
-  }
 }
 </style>