@rancher/shell 3.0.7 → 3.0.8-rc.10

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

@@ -32,8 +32,6 @@ export interface TitleBarProps {
   actionMenuResource?: any;
   onShowConfiguration?: (returnFocusSelector: string) => void;
 }
-
-const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
 </script>
 
 <script setup lang="ts">
@@ -84,6 +82,7 @@ watch(
         </span>
         <BadgeState
           v-if="badge"
+          v-ui-context="{ store: store, icon: 'icon-folder', hookable: true, value: resource, tag: '__details-state', description: 'Details' }"
           class="badge-state"
           :color="badge.color"
           :label="badge.label"
@@ -99,11 +98,10 @@ watch(
           :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
           @click="() => emit('show-configuration', showConfigurationReturnFocusSelector)"
         >
-          <img
-            :src="showConfigurationIcon"
-            class="mmr-3"
+          <i
+            class="icon icon-document"
             aria-hidden="true"
-          >
+          />
           {{ i18n.t('component.resource.detail.titleBar.showConfiguration') }}
         </RcButton>
         <ActionMenu
@@ -139,6 +137,12 @@ watch(
     position: relative;
   }
 
+  .icon-document {
+    width: 15px;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
   .show-configuration {
     margin-left: 16px;
   }

package/components/Resource/Detail/composables.ts

@@ -2,6 +2,7 @@ import { computed, Ref, toValue } from 'vue';
 import { useStore } from 'vuex';
 import { Props as BannerProps } from '@components/Banner/Banner.vue';
 import { useI18n } from '@shell/composables/useI18n';
+import ResourceClass from '@shell/plugins/dashboard-store/resource-class';
 
 export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | undefined> => {
   const store = useStore();
@@ -43,3 +44,14 @@ export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | u
     return undefined;
   });
 };
+
+export const useOnShowConfiguration = (resource: any) => {
+  return (returnFocusSelector?: string, defaultTab?: string) => {
+    const resourceValue = toValue(resource);
+    // Because extensions can make a copy of the resource-class it's possible that an extension will have a resource-class which predates the inclusion of showConfiguration
+    // to still the rest of shell to consume
+    const showConfiguration = resourceValue.showConfiguration ? resourceValue.showConfiguration.bind(resourceValue) : ResourceClass.prototype.showConfiguration.bind(resourceValue);
+
+    showConfiguration(returnFocusSelector, defaultTab);
+  };
+};

package/components/ResourceDetail/Masthead/latest.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* eslint-disable */
 import { Banner } from '@components/Banner';
 import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
@@ -7,6 +8,7 @@ import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resourc
 import { useResourceDetailBannerProps } from '@shell/components/Resource/Detail/composables';
 import { computed } from 'vue';
 
+// We are disabling eslint for this script to allow the use of the Props interface
 export interface Props {
   value?: Object;
   resourceSubtype?: string;
@@ -15,18 +17,45 @@ export interface Props {
 </script>
 
 <script lang="ts" setup>
+import { useStore } from 'vuex';
+
 const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined });
 
+const uiCtxResource = computed(() => {
+  const {
+    name, metadata, kind, state
+  } = (props.value || {}) as any;
+
+  return {
+    name,
+    namespace: metadata?.namespace,
+    kind,
+    state,
+  };
+});
 const resourceSubtype = computed(() => props.resourceSubtype);
 const titleBarProps = useDefaultTitleBarProps(props.value, resourceSubtype);
 const metadataProps = useDefaultMetadataForLegacyPagesProps(props.value);
 const bannerProps = useResourceDetailBannerProps(props.value);
+
+const store = useStore();
 </script>
 
 <template>
   <TitleBar v-bind="titleBarProps" />
   <Banner
     v-if="bannerProps"
+    v-ui-context="{
+      store: store,
+      icon: 'icon-info',
+      hookable: true,
+      value: {
+        bannerProps,
+        resource: uiCtxResource
+      },
+      tag: '__details-state-banner',
+      description: 'Status Message'
+    }"
     class="new state-banner"
     v-bind="bannerProps"
   />

package/components/ResourceDetail/index.vue

@@ -310,7 +310,7 @@ export default {
       }), {});
     },
     isFullPageOverride() {
-      return this.isView && this.value.fullDetailPageOverride;
+      return this.isView && this.value.fullDetailPageOverride && !this.isYaml;
     }
   },
 
@@ -430,6 +430,7 @@ export default {
     :is="showComponent"
     v-else-if="isFullPageOverride"
     v-model:value="value"
+    v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
     v-bind="$data"
     :done-params="doneParams"
     :done-route="doneRoute"
@@ -446,6 +447,7 @@ export default {
   <div v-else>
     <Masthead
       v-if="showMasthead"
+      v-ui-context="{ icon: 'icon-folder', value: liveModel.name, tag: liveModel.kind?.toLowerCase(), description: liveModel.kind }"
       :resource="resourceType"
       :value="liveModel"
       :mode="mode"
@@ -481,7 +483,7 @@ export default {
     </div>
 
     <ResourceYaml
-      v-else-if="isYaml"
+      v-if="isYaml"
       ref="resourceyaml"
       :value="value"
       :mode="mode"
@@ -499,6 +501,7 @@ export default {
       v-else
       ref="comp"
       v-model:value="value"
+      v-ui-context="{ icon: 'icon-folder', value: value.name, tag: value.kind?.toLowerCase(), description: value.kind }"
       v-bind="$data"
       :done-params="doneParams"
       :done-route="doneRoute"

package/components/ResourceList/Masthead.vue

@@ -141,7 +141,7 @@ export default {
       }
 
       // blocked-post means you can post through norman, but not through steve.
-      if ( this.schema && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
+      if ( this.schema && this.schema?.collectionMethods && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
         return false;
       }
 

package/components/SortableTable/index.vue

@@ -1090,7 +1090,7 @@ export default {
       <div
         v-if="showHeaderRow"
         class="fixed-header-actions"
-        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
+        :class="{button: !!$slots['header-button'], 'with-sub-header': !!$slots['sub-header-row'], 'advanced-filtering': hasAdvancedFiltering}"
       >
         <div
           :class="bulkActionsClass"
@@ -1296,6 +1296,12 @@ export default {
           <slot name="header-button" />
         </div>
       </div>
+      <div
+        v-if="!!$slots['sub-header-row']"
+        class="sub-header-row"
+      >
+        <slot name="sub-header-row" />
+      </div>
     </div>
     <table
       ref="table"
@@ -1468,6 +1474,7 @@ export default {
                     <td
                       v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
                       :key="col.col.name"
+                      v-ui-context="col.col.name === 'state' ? { icon: 'icon-folder', hookable: true, value: row.row, tag: '__sortable-table-row', description: 'Row' } : undefined"
                       :data-title="col.col.label"
                       :data-testid="`sortable-cell-${ i }-${ j }`"
                       :align="col.col.align || 'left'"
@@ -2047,8 +2054,17 @@ export default {
     grid-template-columns: [bulk] auto [middle] min-content [search] minmax(min-content, 350px);
   }
 
+  $header-padding: 20px;
+  .sub-header-row {
+    padding: 0 0 $header-padding / 2 0;
+  }
+
   .fixed-header-actions {
-    padding: 0 0 20px 0;
+    padding: 0 0 $header-padding 0;
+    &.with-sub-header {
+      padding: 0 0 $header-padding / 4 0;
+    }
+
     width: 100%;
     z-index: z-index('fixedTableHeader');
     background: transparent;

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

@@ -0,0 +1,86 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+
+jest.mock('@shell/components/form/ResourceTabs/composable', () => ({ useTabCountWatcher: () => ({}) }));
+
+const mockT = (key: string) => key;
+
+const defaultGlobalMountOptions = {
+  components: { Tab },
+  mocks:      {
+    $router: {
+      replace:      jest.fn(),
+      currentRoute: { _value: { hash: '' } }
+    },
+    $route: { hash: '' },
+    t:      mockT,
+    store:  { getters: { 'i18n/t': mockT } }
+  }
+};
+
+describe('component: Tabbed', () => {
+  const findTabNav = (wrapper: VueWrapper<any>) => wrapper.find('[data-testid="tabbed-block"]');
+
+  it('should display tab navigation for a single tab when hideSingleTab is false (default)', async() => {
+    const wrapper = mount(Tabbed, {
+      slots:  { default: { components: { Tab }, template: '<Tab name="tab1" label="Tab 1" />' } },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+
+  it('should display tab navigation for multiple tabs when hideSingleTab is false (default)', async() => {
+    const wrapper = mount(Tabbed, {
+      slots: {
+        default: {
+          components: { Tab },
+          template:   `
+            <Tab name="tab1" label="Tab 1" />
+            <Tab name="tab2" label="Tab 2" />
+          `,
+        },
+      },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+
+  it('should NOT display tab navigation for a single tab when hideSingleTab is true', async() => {
+    const wrapper = mount(Tabbed, {
+      props:  { hideSingleTab: true },
+      slots:  { default: { components: { Tab }, template: '<Tab name="tab1" label="Tab 1" />' } },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(false);
+  });
+
+  it('should display tab navigation for multiple tabs when hideSingleTab is true', async() => {
+    const wrapper = mount(Tabbed, {
+      props: { hideSingleTab: true },
+      slots: {
+        default: {
+          components: { Tab },
+          template:   `
+            <Tab name="tab1" label="Tab 1" />
+            <Tab name="tab2" label="Tab 2" />
+          `,
+        },
+      },
+      global: { ...defaultGlobalMountOptions },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(findTabNav(wrapper).exists()).toBe(true);
+  });
+});

package/components/{nav/WindowManager → Window}/ContainerLogs.vue

@@ -10,7 +10,7 @@ import AsyncButton from '@shell/components/AsyncButton';
 import Select from '@shell/components/form/Select';
 import VirtualList from 'vue3-virtual-scroll-list';
 import LogItem from '@shell/components/LogItem';
-import ContainerLogsActions from '@shell/components/nav/WindowManager/ContainerLogsActions.vue';
+import ContainerLogsActions from '@shell/components/Window/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
 import { useStore } from 'vuex';
 import { debounce } from 'lodash';

package/components/{nav/WindowManager → Window}/ContainerLogsActions.vue

@@ -49,6 +49,7 @@ defineEmits([
       <rc-dropdown-item-select
         :model-value="range"
         :options="rangeOptions"
+        :label="t('wm.containerLogs.range.label')"
         @select="$emit('toggleRange', $event)"
       />
       <rc-dropdown-item-checkbox

package/components/{nav/WindowManager → Window}/__tests__/ContainerLogs.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
-import ContainerLogs from '@shell/components/nav/WindowManager/ContainerLogs.vue';
+import ContainerLogs from '@shell/components/Window/ContainerLogs.vue';
 import { base64Encode } from '@shell/utils/crypto';
 import { Buffer } from 'buffer';
 import { addEventListener } from '@shell/utils/socket';

package/components/{nav/WindowManager → Window}/__tests__/ContainerShell.test.ts

@@ -1,9 +1,9 @@
 import { flushPromises, mount, Wrapper } from '@vue/test-utils';
-import ContainerShell from '@shell/components/nav/WindowManager/ContainerShell.vue';
+import ContainerShell from '@shell/components/Window/ContainerShell.vue';
 import Socket, {
   addEventListener, EVENT_CONNECTED, EVENT_CONNECTING, EVENT_DISCONNECTED, EVENT_MESSAGE, EVENT_CONNECT_ERROR
 } from '@shell/utils/socket';
-import Window from '@shell/components/nav/WindowManager/Window.vue';
+import Window from '@shell/components/Window/Window.vue';
 
 jest.mock('@shell/utils/socket');
 jest.mock('@shell/utils/crypto', () => {

package/components/__tests__/AutoscalerCard.test.ts

@@ -0,0 +1,154 @@
+
+import { mount } from '@vue/test-utils';
+import AutoscalerCard from '@shell/components/AutoscalerCard.vue';
+import { ref } from 'vue';
+import { createStore } from 'vuex';
+
+const mockUseFetch = jest.fn();
+
+jest.mock('@shell/components/Resource/Detail/FetchLoader/composables', () => ({ useFetch: (...args: any[]) => mockUseFetch(...args) }));
+
+const mockUseInterval = jest.fn();
+
+jest.mock('@shell/composables/useInterval', () => ({ useInterval: (...args: any[]) => mockUseInterval(...args) }));
+
+describe('component: AutoscalerCard.vue', () => {
+  const mockLoadDetails = jest.fn();
+  const mockRefresh = jest.fn();
+
+  const createWrapper = (props: any, useFetchState: any) => {
+    // Reset and configure the useFetch mock for each test
+    mockUseFetch.mockImplementation(() => {
+      return ref({
+        loading:    false,
+        refreshing: false,
+        data:       null,
+        refresh:    mockRefresh,
+        ...useFetchState,
+      });
+    });
+
+    return mount(AutoscalerCard, {
+      props: {
+        value: { loadAutoscalerDetails: mockLoadDetails },
+        ...props,
+      },
+      global:  { plugins: [createStore({})] },
+      // Shallow mount to avoid rendering child components like the dynamic ones
+      shallow: true,
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call useFetch with the correct loader function', () => {
+    createWrapper({}, {});
+    // The first argument to useFetch is the loader function
+    expect(mockUseFetch).toHaveBeenCalledWith(expect.any(Function));
+    // We can invoke the loader to ensure it calls the prop method
+    const loader = mockUseFetch.mock.calls[0][0];
+
+    loader();
+    expect(mockLoadDetails).toHaveBeenCalledWith();
+  });
+
+  it('should setup a polling interval to refresh data', () => {
+    createWrapper({}, {});
+    expect(mockUseInterval).toHaveBeenCalledWith(expect.any(Function), 10000);
+
+    // Invoke the interval function to ensure it calls refresh
+    const intervalFn = mockUseInterval.mock.calls[0][0];
+
+    intervalFn();
+    expect(mockRefresh).toHaveBeenCalledWith();
+  });
+
+  describe('uI States', () => {
+    it('should display a loading spinner on initial load', () => {
+      const wrapper = createWrapper({}, { loading: true, refreshing: false });
+
+      expect(wrapper.find('.loading').exists()).toBe(true);
+      expect(wrapper.find('.icon-spinner').exists()).toBe(true);
+      expect(wrapper.find('.details').exists()).toBe(false);
+      expect(wrapper.find('.text-warning').exists()).toBe(false);
+    });
+
+    it('should NOT display the main loading spinner during a background refresh', () => {
+      const wrapper = createWrapper({}, {
+        loading: true, refreshing: true, data: []
+      });
+
+      expect(wrapper.find('.loading').exists()).toBe(false);
+      // Data should still be visible
+      expect(wrapper.find('.details').exists()).toBe(true);
+    });
+
+    it('should display an error message if loading fails', () => {
+      const wrapper = createWrapper({}, { loading: false, data: null });
+
+      expect(wrapper.find('.text-warning').exists()).toBe(true);
+      expect(wrapper.find('.text-warning').text()).toBe('autoscaler.card.loadingError');
+      expect(wrapper.find('.loading').exists()).toBe(false);
+      expect(wrapper.find('.details').exists()).toBe(false);
+    });
+
+    it('should display details when data is loaded', () => {
+      const mockData = [
+        { label: 'Status', value: 'Active' },
+        { label: 'Nodes', value: '3' },
+      ];
+      const wrapper = createWrapper({}, { loading: false, data: mockData });
+
+      expect(wrapper.find('.details').exists()).toBe(true);
+      const details = wrapper.findAll('.detail');
+
+      expect(details).toHaveLength(2);
+      expect(details[0].text()).toContain('Status');
+      expect(details[0].text()).toContain('Active');
+      expect(details[1].text()).toContain('Nodes');
+      expect(details[1].text()).toContain('3');
+    });
+  });
+
+  describe('detail Rendering', () => {
+    it('should render a string value', () => {
+      const mockData = [{ label: 'My Label', value: 'My Value' }];
+      const wrapper = createWrapper({}, { data: mockData });
+      const valueDiv = wrapper.find('.value');
+
+      expect(valueDiv.find('span').exists()).toBe(true);
+      expect(valueDiv.text()).toBe('My Value');
+    });
+
+    it('should render a dynamic component value', () => {
+      const DynamicComponent = {
+        name:     'DynamicComponent',
+        props:    ['text'],
+        template: '<div>{{ text }}</div>'
+      };
+      const mockData = [{
+        label: 'My Component',
+        value: { component: DynamicComponent, props: { text: 'Dynamic Text' } }
+      }];
+      const wrapper = createWrapper({}, { data: mockData });
+      const valueDiv = wrapper.find('.value');
+      const renderedComponent = valueDiv.findComponent(DynamicComponent);
+
+      expect(renderedComponent.exists()).toBe(true);
+      expect(renderedComponent.props('text')).toBe('Dynamic Text');
+    });
+
+    it('should render a heading for details without a value', () => {
+      const mockData = [{ label: 'Section Header' }];
+      const wrapper = createWrapper({}, { data: mockData });
+
+      expect(wrapper.find('h5').exists()).toBe(true);
+      expect(wrapper.find('h5').text()).toBe('Section Header');
+      // Label and value should not be rendered
+      expect(wrapper.find('label').exists()).toBe(false);
+      expect(wrapper.find('.value').exists()).toBe(false);
+    });
+  });
+});

package/components/__tests__/AutoscalerTab.test.ts

@@ -0,0 +1,125 @@
+
+import { mount } from '@vue/test-utils';
+import AutoscalerTab from '@shell/components/AutoscalerTab.vue';
+import { ref } from 'vue';
+import { createStore } from 'vuex';
+
+const mockUseFetch = jest.fn();
+
+jest.mock('@shell/components/Resource/Detail/FetchLoader/composables', () => ({ useFetch: (...args: any[]) => mockUseFetch(...args) }));
+
+const mockUseInterval = jest.fn();
+
+jest.mock('@shell/composables/useInterval', () => ({ useInterval: (...args: any[]) => mockUseInterval(...args) }));
+
+describe('component: AutoscalerTab.vue', () => {
+  const mockLoadEvents = jest.fn();
+  const mockRefresh = jest.fn();
+  const mockChangeSort = jest.fn();
+
+  const SortableTableStub = {
+    name:     'SortableTable',
+    template: '<div></div>',
+    setup() {
+      return { changeSort: mockChangeSort };
+    },
+    props: ['namespaced', 'rowActions', 'defaultSortBy', 'headers', 'rows']
+  };
+
+  const createWrapper = (props: any, useFetchState: any) => {
+    mockUseFetch.mockImplementation(() => {
+      return ref({
+        data:    null,
+        refresh: mockRefresh,
+        ...useFetchState,
+      });
+    });
+
+    return mount(AutoscalerTab, {
+      props: {
+        value: { loadAutoscalerEvents: mockLoadEvents },
+        ...props,
+      },
+      global: {
+        plugins: [createStore({})],
+        stubs:   {
+          Tab: {
+            name:     'Tab',
+            template: '<div><slot/></div>',
+            props:    ['label']
+          },
+          SortableTable: SortableTableStub,
+        },
+      }
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('initialization and Data Fetching', () => {
+    it('should call useFetch with the correct loader function', () => {
+      createWrapper({}, {});
+      expect(mockUseFetch).toHaveBeenCalledWith(expect.any(Function));
+
+      const loader = mockUseFetch.mock.calls[0][0];
+
+      loader();
+      expect(mockLoadEvents).toHaveBeenCalledWith();
+    });
+
+    it('should setup a polling interval to refresh data', () => {
+      createWrapper({}, {});
+      expect(mockUseInterval).toHaveBeenCalledWith(expect.any(Function), 20000);
+
+      const intervalFn = mockUseInterval.mock.calls[0][0];
+
+      intervalFn();
+      expect(mockRefresh).toHaveBeenCalledWith();
+    });
+
+    it('should call changeSort on the table on mounted', () => {
+      createWrapper({}, {});
+      expect(mockChangeSort).toHaveBeenCalledWith('date', true);
+    });
+  });
+
+  describe('sortableTable props', () => {
+    it('should pass static props to the table', () => {
+      const wrapper = createWrapper({}, {});
+      const table = wrapper.findComponent(SortableTableStub);
+
+      expect(table.props('namespaced')).toBe(false);
+      expect(table.props('rowActions')).toBe(false);
+      expect(table.props('defaultSortBy')).toBe('date');
+      expect(table.props('headers')).toHaveLength(4);
+      expect(table.props('headers')[0].name).toBe('type');
+    });
+
+    it('should pass an empty array to rows when data is null', () => {
+      const wrapper = createWrapper({}, { data: null });
+      const table = wrapper.findComponent(SortableTableStub);
+
+      expect(table.props('rows')).toStrictEqual([]);
+    });
+
+    it('should pass fetched data to the rows prop', () => {
+      const mockEvents = [
+        { id: 1, message: 'Event 1' },
+        { id: 2, message: 'Event 2' },
+      ];
+      const wrapper = createWrapper({}, { data: mockEvents });
+      const table = wrapper.findComponent(SortableTableStub);
+
+      expect(table.props('rows')).toStrictEqual(mockEvents);
+    });
+  });
+
+  it('should pass correct label to Tab component', () => {
+    const wrapper = createWrapper({}, {});
+    const tab = wrapper.findComponent({ name: 'Tab' });
+
+    expect(tab.props('label')).toBe('autoscaler.tab.title');
+  });
+});