@rancher/shell 3.0.5-rc.8 → 3.0.5

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

@@ -0,0 +1,245 @@
+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) }));
+
+const mockResource = {
+  id:                 'test-ns/test-pod',
+  type:               'pod',
+  nameDisplay:        'My Test Pod',
+  stateBackground:    'bg-success',
+  detailLocation:     { name: 'pod-detail', params: { id: 'test-pod' } },
+  glance:             [{ label: 'Status', content: 'Active' }],
+  parentNameOverride: 'Overridden Pod',
+};
+
+describe('component: ResourcePopover/index.vue', () => {
+  let store: any;
+  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 wrapper = mount(ResourcePopover, {
+      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,
+        },
+      },
+    });
+
+    // 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
+
+      expect(wrapper.find('.display').exists()).toBe(false);
+      expect(wrapper.text()).toContain('...');
+    });
+
+    it('should call the fetch composable and dispatch a store action', async() => {
+      await createWrapper();
+
+      expect(mockClusterFind).toHaveBeenCalledWith(expect.objectContaining({}), expect.objectContaining({ 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'
+      });
+
+      expect(mockSomethingFind).toHaveBeenCalledWith(expect.objectContaining({}), expect.objectContaining({ type: 'pod', id: 'test-ns/test-pod' }));
+    });
+
+    it('should render resource name and link when data is loaded', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+      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' };
+
+      const wrapper = await createWrapper({
+        type:           'pod',
+        id:             'test-ns/test-pod',
+        detailLocation: detailLocationProp
+      });
+
+      const link = wrapper.findComponent(RouterLinkStub);
+
+      expect(link.props('to')).toStrictEqual(detailLocationProp);
+    });
+  });
+
+  describe('computed Properties', () => {
+    it('should return empty resourceTypeLabel if no data', async() => {
+      mockClusterFind.mockReturnValue(null);
+
+      const wrapper = await createWrapper();
+
+      expect(wrapper.vm.resourceTypeLabel).toBe('');
+    });
+
+    it('should return resourceTypeLabel from type-map getter', async() => {
+      const resourceWithoutOverride = { ...mockResource, parentNameOverride: undefined };
+
+      mockClusterFind.mockReturnValue(resourceWithoutOverride);
+      const wrapper = await createWrapper();
+
+      expect(wrapper.vm.resourceTypeLabel).toBe('Pod');
+    });
+
+    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');
+
+      expect(dropdown.attributes('aria-label')).toBe(expectedAriaLabel);
+      expect(button.attributes('aria-label')).toBe(expectedAriaLabel);
+    });
+  });
+
+  describe('popover Visibility', () => {
+    it('should not show popover card initially', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+    });
+
+    it('should show popover on mouseenter', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      await wrapper.find('.display').trigger('mouseenter');
+      expect(wrapper.vm.showPopover).toBe(true);
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(true);
+    });
+
+    it('should hide popover on mouseleave', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      await wrapper.find('.display').trigger('mouseenter');
+      expect(wrapper.vm.showPopover).toBe(true);
+
+      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);
+    });
+
+    it('should show popover on focus button click', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await 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);
+    });
+
+    it('should hide popover when action is invoked from card', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      await wrapper.find('.display').trigger('mouseenter');
+      await wrapper.vm.$nextTick();
+
+      const card = wrapper.findComponent({ name: 'ResourcePopoverCard' });
+
+      await card.vm.$emit('action-invoked');
+      expect(wrapper.vm.showPopover).toBe(false);
+      await wrapper.vm.$nextTick();
+      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+    });
+
+    it('should hide popover on Escape keydown', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      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();
+
+      expect(wrapper.findComponent({ name: 'ResourcePopoverCard' }).exists()).toBe(false);
+    });
+  });
+
+  describe('focus Trap', () => {
+    it('should not setup focus trap on mouseenter', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      await wrapper.find('.display').trigger('mouseenter');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.focusOpen).toBe(false);
+      expect(mockFocusTrap).not.toHaveBeenCalled();
+    });
+
+    it('should setup focus trap when opened via focus button', async() => {
+      mockClusterFind.mockReturnValue(mockResource);
+      const wrapper = await createWrapper();
+
+      await wrapper.find('.focus-button').trigger('click');
+      await wrapper.vm.$nextTick(); // Triggers the watch
+
+      expect(wrapper.vm.focusOpen).toBe(true);
+      expect(mockFocusTrap).toHaveBeenCalledTimes(1);
+
+      // Verify the options passed to the focus trap
+      const focusTrapOptions = mockFocusTrap.mock.calls[0][2];
+
+      expect(focusTrapOptions.fallbackFocus).toBe('#first-glance-item');
+      expect(focusTrapOptions.setReturnFocus()).toBe('.focus-button');
+    });
+  });
+});

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

@@ -0,0 +1,226 @@
+<script lang="ts">
+import { useFetch } from '@shell/components/Resource/Detail/FetchLoader/composables';
+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';
+
+export interface Props {
+  type: string;
+  id: string;
+  currentStore?: string;
+  detailLocation?: object;
+}
+</script>
+
+<script setup lang="ts">
+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 resourceTypeLabel = computed(() => {
+  if (!fetch.value.data) {
+    return '';
+  }
+
+  const resource = fetch.value.data;
+  const currentStore = store.getters['currentStore'](resource.type);
+  const schema = store.getters[`${ currentStore }/schemaFor`](resource.type);
+
+  return resource.parentNameOverride || store.getters['type-map/labelFor'](schema);
+});
+
+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
+    class="resource-popover"
+    @mouseleave="showPopover=false"
+  >
+    <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"
+        />
+      </template>
+    </v-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-popover {
+  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 {
+      margin-right: 12px;
+      margin-top: 4px;
+      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>

package/components/Resource/Detail/SpacedRow.vue

@@ -10,5 +10,6 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));;
   grid-auto-flow: dense;
   grid-gap: 24px;
+  justify-content: space-evenly;
 }
 </style>

package/components/Resource/Detail/TitleBar/__tests__/composables.test.ts

@@ -5,7 +5,6 @@ import { useRoute } from 'vue-router';
 const mockStore = {
   getters: {
     'type-map/labelFor': jest.fn(),
-    'type-map/hasGraph': jest.fn(),
     currentStore:        jest.fn(),
     'cluster/schemaFor': jest.fn()
   }
@@ -27,7 +26,6 @@ describe('composables: TitleBar', () => {
   };
   const labelFor = 'LABEL_FOR';
   const schema = { type: 'SCHEMA' };
-  const hasGraph = true;
 
   it('should return the appropriate values based on input', async() => {
     const route = useRoute();
@@ -35,13 +33,11 @@ describe('composables: TitleBar', () => {
     mockStore.getters['currentStore'].mockImplementation(() => 'cluster');
     mockStore.getters['cluster/schemaFor'].mockImplementation(() => schema);
     mockStore.getters['type-map/labelFor'].mockImplementation(() => labelFor);
-    mockStore.getters['type-map/hasGraph'].mockImplementation(() => hasGraph);
 
     const props = useDefaultTitleBarProps(resource, ref(undefined));
 
     expect(props.value.resourceTypeLabel).toStrictEqual(labelFor);
     expect(mockStore.getters['type-map/labelFor']).toHaveBeenLastCalledWith(schema);
-    expect(mockStore.getters['type-map/hasGraph']).toHaveBeenLastCalledWith(resource.type);
     expect(mockStore.getters['currentStore']).toHaveBeenLastCalledWith(resource.type);
     expect(mockStore.getters['cluster/schemaFor']).toHaveBeenLastCalledWith(resource.type);
     expect(props.value.resourceTo?.params.product).toStrictEqual('explorer');
@@ -54,7 +50,6 @@ describe('composables: TitleBar', () => {
     expect(props.value.badge?.color).toStrictEqual(resource.stateBackground);
     expect(props.value.badge?.label).toStrictEqual(resource.stateDisplay);
     expect(props.value.description).toStrictEqual(resource.description);
-    expect(props.value.showViewOptions).toStrictEqual(hasGraph);
 
     props.value.onShowConfiguration?.('callback');
     expect(resource.showConfiguration).toHaveBeenCalledTimes(1);

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

@@ -9,7 +9,7 @@ describe('component: TitleBar/index', () => {
   const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
   const resourceTo = 'RESOURCE_TO';
   const resourceName = 'RESOURCE_NAME';
-  const store = createStore({});
+  const store = createStore({ getters: {} });
 
   it('should render container with class title-bar', async() => {
     const wrapper = mount(TitleBar, {

package/components/Resource/Detail/TitleBar/composables.ts

@@ -23,7 +23,6 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         resource:  resourceValue.type
       }
     };
-    const hasGraph = !!store.getters['type-map/hasGraph'](resourceValue.type);
     const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector);
 
     return {
@@ -36,8 +35,7 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
         color: resourceValue.stateBackground,
         label: resourceValue.stateDisplay
       },
-      description:     resourceValue.description,
-      showViewOptions: hasGraph,
+      description: resourceValue.description,
       onShowConfiguration
     };
   });

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

@@ -9,8 +9,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import RcButton from '@components/RcButton/RcButton.vue';
 import TabTitle from '@shell/components/TabTitle';
 import { computed, ref, watch } from 'vue';
-import { _CONFIG, _GRAPH, AS } from '@shell/config/query-params';
-import ButtonGroup from '@shell/components/ButtonGroup';
+import { _CONFIG, AS } from '@shell/config/query-params';
 import { ExtensionPoint, PanelLocation } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
 
@@ -31,10 +30,6 @@ export interface TitleBarProps {
   // This should be replaced with a list of menu items we want to render.
   // I don't have the time right now to swap this out though.
   actionMenuResource?: any;
-
-  // Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet.
-  showViewOptions?: boolean;
-
   onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
@@ -43,7 +38,7 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
+  resource, resourceTypeLabel, resourceTo, resourceName, description, badge, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
 const store = useStore();
@@ -55,22 +50,6 @@ const showConfigurationDataTestId = 'show-configuration-cta';
 const showConfigurationReturnFocusSelector = computed(() => `[data-testid="${ showConfigurationDataTestId }"]`);
 
 const currentView = ref(router?.currentRoute?.value?.query?.as || _CONFIG);
-const viewOptions = computed(() => {
-  if (!showViewOptions) {
-    return;
-  }
-
-  return [
-    {
-      labelKey: 'resourceDetail.masthead.config',
-      value:    _CONFIG,
-    },
-    {
-      labelKey: 'resourceDetail.masthead.graph',
-      value:    _GRAPH,
-    }
-  ];
-});
 
 watch(
   () => currentView.value,
@@ -111,12 +90,6 @@ watch(
         />
       </Title>
       <div class="actions">
-        <!-- Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet. -->
-        <ButtonGroup
-          v-if="viewOptions"
-          v-model:value="currentView"
-          :options="viewOptions"
-        />
         <slot name="additional-actions" />
         <RcButton
           v-if="onShowConfiguration"

package/components/Resource/Detail/ViewOptions/composable.ts

@@ -0,0 +1,9 @@
+import { _CONFIG, VIEW } from '@shell/config/query-params';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export const useCurrentView = () => {
+  const route = useRoute();
+
+  return computed(() => route.query[VIEW] || _CONFIG);
+};

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { useRouter } from 'vue-router';
+import { computed, ref, watch } from 'vue';
+import { _CONFIG, _GRAPH } from '@shell/config/query-params';
+import ButtonGroup from '@shell/components/ButtonGroup';
+import { useCurrentView } from '@shell/components/Resource/Detail/ViewOptions/composable';
+</script>
+
+<script setup lang="ts">
+const router = useRouter();
+
+const currentView = useCurrentView();
+const view = ref(currentView.value);
+const viewOptions = computed(() => {
+  return [
+    {
+      labelKey: 'resourceDetail.masthead.config',
+      value:    _CONFIG,
+    },
+    {
+      labelKey: 'resourceDetail.masthead.graph',
+      value:    _GRAPH,
+    }
+  ];
+});
+
+watch(
+  () => view.value,
+  () => {
+    router.push({ query: { view: view.value } });
+  }
+);
+</script>
+
+<template>
+  <ButtonGroup
+    v-if="viewOptions"
+    v-model:value="view"
+    :options="viewOptions"
+  />
+</template>