@rancher/shell 3.0.7 → 3.0.8-rc.10

package/components/Questions/__tests__/index.test.ts

@@ -0,0 +1,159 @@
+import { shallowMount } from '@vue/test-utils';
+import Questions from '@shell/components/Questions/index.vue';
+
+const mockT = jest.fn((key) => key);
+const mockWithFallback = jest.fn((key, args, fallback) => fallback || key);
+
+const defaultMocks = {
+  $fetchState: { pending: false },
+  $store:      {
+    getters: {
+      'i18n/t':            mockT,
+      'i18n/withFallback': mockWithFallback
+    }
+  }
+};
+
+const defaultProps = {
+  source:          { questions: { questions: [] } },
+  value:           {},
+  targetNamespace: 'default',
+  mode:            'edit',
+};
+
+describe('component: Questions', () => {
+  describe('computed: groups', () => {
+    it('should group questions with the same group into a single group', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2', group: 'Group 1' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].name).toBe('Group 1');
+      expect(groups[0].questions).toHaveLength(2);
+    });
+
+    it('should place questions without a group into a default group', () => {
+      const questions = [
+        { variable: 'q1' },
+        { variable: 'q2' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(1);
+      expect(groups[0].name).toBe('Questions'); // Default group name
+      expect(groups[0].questions).toHaveLength(2);
+    });
+
+    it('should create multiple groups for questions with different groups', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2', group: 'Group 2' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(2);
+    });
+
+    it('should correctly group a mix of grouped and ungrouped questions', () => {
+      const questions = [
+        { variable: 'q1', group: 'Group 1' },
+        { variable: 'q2' },
+        { variable: 'q3', group: 'Group 1' },
+      ];
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, source: { questions: { questions } } },
+        global: { mocks: defaultMocks },
+      });
+
+      const groups = wrapper.vm.groups;
+
+      expect(groups).toHaveLength(2); // 'Group 1' and 'Questions'
+      const group1 = groups.find((g: any) => g.name === 'Group 1');
+      const defaultGroup = groups.find((g: any) => g.name === 'Questions');
+
+      expect(group1.questions).toHaveLength(2);
+      expect(defaultGroup.questions).toHaveLength(1);
+    });
+  });
+
+  describe('computed: asTabs', () => {
+    it('should be true by default', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  defaultProps,
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(true);
+    });
+
+    it('should be true when tabbed is true', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: true },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(true);
+    });
+
+    it('should be false when tabbed is false', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: false },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(false);
+    });
+
+    it('should be false when tabbed is "never"', () => {
+      const wrapper = shallowMount(Questions, {
+        props:  { ...defaultProps, tabbed: 'never' },
+        global: { mocks: defaultMocks },
+      });
+
+      expect(wrapper.vm.asTabs).toBe(false);
+    });
+
+    describe('when tabbed is "multiple"', () => {
+      it('should be true if there are groups', () => {
+        const questions = [{ variable: 'q1', group: 'Group 1' }];
+        const wrapper = shallowMount(Questions, {
+          props: {
+            ...defaultProps, source: { questions: { questions } }, tabbed: 'multiple'
+          },
+          global: { mocks: defaultMocks },
+        });
+
+        expect(wrapper.vm.groups).toHaveLength(1);
+        expect(wrapper.vm.asTabs).toBe(true);
+      });
+
+      it('should be false if there are no groups', () => {
+        const wrapper = shallowMount(Questions, {
+          props:  { ...defaultProps, tabbed: 'multiple' },
+          global: { mocks: defaultMocks },
+        });
+
+        expect(wrapper.vm.groups).toHaveLength(0);
+        expect(wrapper.vm.asTabs).toBe(false);
+      });
+    });
+  });
+});

package/components/Resource/Detail/CopyToClipboard.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 import { useStore } from 'vuex';
 
 export interface Props {
-    value: string;
+  value: string;
 }
 
 const props = defineProps<Props>();
@@ -52,6 +52,9 @@ const onClick = (ev: MouseEvent) => {
     border-radius: 50%;
     justify-content: center;
     align-items: center;
+    padding: 0;
+    line-height: initial;
+    min-height: initial;
 
     border: 1px solid var(--primary);
     color: var(--primary);

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

@@ -1,7 +1,8 @@
 import { computed, ref, toValue } from 'vue';
 
-export const useFetch = <T>(fetch: () => Promise<T> ) => {
+export const useFetch = <T>(fetch: () => Promise<T>) => {
   const loading = ref<boolean>(true);
+  const refreshing = ref<boolean>(false);
   const data = ref<T>();
   const error = ref<any>();
 
@@ -12,16 +13,29 @@ export const useFetch = <T>(fetch: () => Promise<T> ) => {
       data.value = toValue(await fetch());
     } catch (ex) {
       error.value = ex;
+      console.error('Error fetching data', ex); // eslint-disable-line no-console
     } finally {
       loading.value = false;
     }
   };
 
+  const refresh = async() => {
+    if (loading.value) {
+      return;
+    }
+
+    refreshing.value = true;
+    await load();
+    refreshing.value = false;
+  };
+
   load();
 
   return computed(() => ({
-    loading: loading.value,
-    data:    data.value,
-    error:   error.value
+    loading:    loading.value,
+    data:       data.value,
+    error:      error.value,
+    refresh,
+    refreshing: refreshing.value
   }));
 };

package/components/Resource/Detail/Metadata/Annotations/index.vue

@@ -8,7 +8,7 @@ export type Annotation = Row;
 export interface AnnotationsProps {
   annotations: Annotation[];
 
-  onShowConfiguration?: (returnFocusSelector: string) => void;
+  onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -26,6 +26,6 @@ const i18n = useI18n(store);
     :rows="annotations"
     type="active"
 
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -6,7 +6,7 @@ import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 
 const mockStore = {
   getters: {
-    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn()
+    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn(), currentCluster: 'CLUSTER_ID'
   }
 };
 const mockRoute = { params: { cluster: 'CLUSTER', namespace: 'NAMESPACE' } };

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -139,6 +139,10 @@ export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]
   }
 
   const extractValueOverride = (detail: any) => {
+    if (detail.valueOverride) {
+      return detail.valueOverride;
+    }
+
     if (!detail.formatter) {
       return;
     }

package/components/Resource/Detail/Metadata/KeyValueRow.vue

@@ -81,7 +81,7 @@ const previewId = randomStr();
     position: fixed;
 
     right: -20px;
-    top: -9px;
+    top: -6px;
     z-index: 20px;
   }
 

package/components/Resource/Detail/Metadata/Labels/index.vue

@@ -8,7 +8,7 @@ export type Label = Row;
 export interface LabelsProps {
     labels: Label[];
 
-    onShowConfiguration?: (returnFocusSelector: string) => void;
+    onShowConfiguration?: (returnFocusSelector: string, defaultTab: string) => void;
 }
 
 </script>
@@ -27,6 +27,6 @@ const i18n = useI18n(store);
     :propertyName="i18n.t('component.resource.detail.metadata.labels.title')"
     :rows="labels"
     type="active"
-    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+    @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector, 'labels-and-annotations')"
   />
 </template>

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

@@ -6,18 +6,19 @@ import { computed, toValue, Ref } from 'vue';
 import {
   useLiveDate, useNamespace, useProject, useResourceDetails, useWorkspace
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
+import { useOnShowConfiguration } from '@shell/components/Resource/Detail/composables';
 
 export const useBasicMetadata = (resource: any) => {
   const labels = useDefaultLabels(resource);
   const annotations = useDefaultAnnotations(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
-      resource:            toValue(resource),
-      labels:              labels.value,
-      annotations:         annotations.value,
-      onShowConfiguration: () => resourceValue.showConfiguration()
+      resource:    toValue(resource),
+      labels:      labels.value,
+      annotations: annotations.value,
+      onShowConfiguration
     };
   });
 };
@@ -28,7 +29,7 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
 
   const identifyingInformation = computed(() => [...defaultIdentifyingInformation.value, ...(additionalIdentifyingInformationValue || [])]);
   const basicMetaData = useBasicMetadata(resource);
-  const resourceValue = toValue(resource);
+  const onShowConfiguration = useOnShowConfiguration(resource);
 
   return computed(() => {
     return {
@@ -36,7 +37,7 @@ export const useDefaultMetadataProps = (resource: any, additionalIdentifyingInfo
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration
     };
   });
 };
@@ -47,7 +48,6 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
   const workspace = useWorkspace(resource);
   const namespace = useNamespace(resource);
   const liveDate = useLiveDate(resource);
-  const resourceValue = toValue(resource);
 
   const identifyingInformation = computed((): IdentifyingInformationRow[] => {
     const defaultInfo = [
@@ -71,7 +71,7 @@ export const useDefaultMetadataForLegacyPagesProps = (resource: any) => {
       identifyingInformation: identifyingInformation.value,
       labels:                 basicMetaData.value.labels,
       annotations:            basicMetaData.value.annotations,
-      onShowConfiguration:    (returnFocusSelector?: string) => resourceValue.showConfiguration(returnFocusSelector)
+      onShowConfiguration:    basicMetaData.value.onShowConfiguration
     };
   });
 };

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

@@ -48,7 +48,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
         type="active"
         :rows="[]"
         :propertyName="i18n.t('component.resource.detail.metadata.labelsAndAnnotations')"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <!-- I'm not using v-else here so I can maintain the spacing correctly with the other columns in other rows. -->
@@ -58,7 +58,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Labels
         :labels="labels"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
     <div
@@ -67,7 +67,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
     >
       <Annotations
         :annotations="annotations"
-        @show-configuration="(returnFocusSelector: string) => emit('show-configuration', returnFocusSelector)"
+        @show-configuration="(returnFocusSelector: string, defaultTab: string) => emit('show-configuration', returnFocusSelector, defaultTab)"
       />
     </div>
   </SpacedRow>

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

@@ -1,37 +1,20 @@
 <script lang="ts">
-import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import { useStore } from 'vuex';
-import ActionMenu from '@shell/components/ActionMenuShell.vue';
-import { useI18n } from '@shell/composables/useI18n';
-
 export interface Props {
   resource: any;
 }
 </script>
 
 <script setup lang="ts">
-const emit = defineEmits(['action-invoked']);
 const props = defineProps<Props>();
-const store = useStore();
-const i18n = useI18n(store);
 
 const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.label }:${ glanceItem.content }`.toLowerCase().replaceAll(' ', '');
 </script>
 
 <template>
-  <Card
+  <div
     class="resource-popover-card"
     :title="resource.nameDisplay"
   >
-    <template #heading-action>
-      <ActionMenu
-        :resource="props.resource"
-        :button-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.actionMenu', { resource: props.resource.nameDisplay })"
-        data-testid="resource-popover-action-menu"
-        @action-invoked="emit('action-invoked')"
-      />
-    </template>
-
     <div>
       <div
         v-for="(glanceItem, i) in props.resource.glance"
@@ -64,7 +47,7 @@ const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.l
         </div>
       </div>
     </div>
-  </Card>
+  </div>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,12 +1,6 @@
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import ResourcePopoverCard from '@shell/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue';
-import Card from '@shell/components/Resource/Detail/Card/index.vue';
-import ActionMenu from '@shell/components/ActionMenuShell.vue';
-
-const mockI18n = { t: (key: string) => key };
-
-jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => mockI18n }));
 
 describe('component: ResourcePopoverCard.vue', () => {
   let wrapper: VueWrapper<any>;
@@ -44,7 +38,6 @@ describe('component: ResourcePopoverCard.vue', () => {
       props:  { resource },
       global: {
         plugins:    [store],
-        stubs:      { ActionMenu: true },
         components: { SomeFormatterComponent }
       },
     });
@@ -58,28 +51,6 @@ describe('component: ResourcePopoverCard.vue', () => {
     wrapper.unmount();
   });
 
-  it('should render the Card with the correct title', () => {
-    const card = wrapper.findComponent(Card);
-
-    expect(card.exists()).toBe(true);
-    expect(card.props('title')).toBe(mockResource.nameDisplay);
-  });
-
-  it('should render the ActionMenu with the correct resource prop', () => {
-    const actionMenu = wrapper.findComponent(ActionMenu);
-
-    expect(actionMenu.exists()).toBe(true);
-    expect(actionMenu.props('resource')).toStrictEqual(mockResource);
-  });
-
-  it('should emit "action-invoked" when ActionMenu emits it', async() => {
-    const actionMenu = wrapper.findComponent(ActionMenu);
-
-    await actionMenu.vm.$emit('action-invoked');
-
-    expect(wrapper.emitted('action-invoked')).toHaveLength(1);
-  });
-
   it('should render a row for each item in resource.glance', () => {
     const rows = wrapper.findAll('.row');