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

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/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/__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');
+  });
+});

package/components/__tests__/PopoverCard.test.ts

@@ -0,0 +1,204 @@
+
+import { mount } from '@vue/test-utils';
+import PopoverCard from '@shell/components/PopoverCard.vue';
+
+const mockFocusTrap = jest.fn();
+
+jest.mock('@shell/composables/focusTrap', () => ({
+  ...jest.requireActual('@shell/composables/focusTrap'), // Keep DEFAULT_FOCUS_TRAP_OPTS
+  useWatcherBasedSetupFocusTrapWithDestroyIncluded: (...args: any[]) => mockFocusTrap(...args),
+}));
+
+const VDropdownStub = {
+  props:    ['shown'],
+  template: `
+    <div>
+      <slot />
+      <div v-if="shown">
+        <slot name="popper" />
+      </div>
+    </div>
+  `,
+};
+
+describe('component: PopoverCard.vue', () => {
+  const createWrapper = (props = {}, slots = {}) => {
+    return mount(PopoverCard, {
+      props: {
+        cardTitle: 'Test Title',
+        ...props,
+      },
+      slots,
+      global: {
+        stubs: {
+          VDropdown: VDropdownStub,
+          Card:      {
+            template: `
+              <div>
+                <slot name="heading-action" />
+                <slot />
+              </div>
+            `,
+          },
+          RcButton: { template: '<button><slot /></button>' },
+        },
+      }
+    });
+  };
+
+  beforeEach(() => {
+    mockFocusTrap.mockClear();
+  });
+
+  describe('props', () => {
+    it('should use default props', () => {
+      const wrapper = createWrapper();
+      const button = wrapper.find('button');
+
+      expect(button.attributes('aria-label')).toBe('Show more');
+    });
+
+    it('should accept and render custom props', () => {
+      const props = {
+        cardTitle:            'My Custom Title',
+        showPopoverAriaLabel: 'Click for details'
+      };
+      const wrapper = createWrapper(props);
+      const button = wrapper.find('button');
+
+      expect(button.attributes('aria-label')).toBe(props.showPopoverAriaLabel);
+      // Note: cardTitle is passed to the Card component inside the popper,
+      // which is only rendered when the popover is shown.
+    });
+  });
+
+  describe('popover Visibility', () => {
+    it('should not be visible initially', () => {
+      const wrapper = createWrapper();
+
+      expect(wrapper.find('[id="popover-card"]').exists()).toBe(false);
+    });
+
+    it('should show on mouseenter and hide on mouseleave', async() => {
+      const wrapper = createWrapper();
+      const target = wrapper.find('.popover-card-target');
+
+      await target.trigger('mouseenter');
+      expect(wrapper.vm.showPopover).toBe(true);
+
+      const root = wrapper.find('.popover-card-base');
+
+      await root.trigger('mouseleave');
+      expect(wrapper.vm.showPopover).toBe(false);
+    });
+
+    it('should show on button click', async() => {
+      const wrapper = createWrapper();
+      const button = wrapper.find('button');
+
+      await button.trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+    });
+
+    it('should hide on Escape keydown', async() => {
+      const wrapper = createWrapper();
+
+      // Open it first
+      await wrapper.find('button').trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+
+      // Trigger escape
+      const root = wrapper.find('.popover-card-base');
+
+      await root.trigger('keydown.escape');
+
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
+    });
+  });
+
+  describe('focus Trap', () => {
+    it('should NOT setup focus trap on mouseenter', async() => {
+      const wrapper = createWrapper();
+      const target = wrapper.find('.popover-card-target');
+
+      await target.trigger('mouseenter');
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.focusOpen).toBe(false);
+      expect(mockFocusTrap).not.toHaveBeenCalled();
+    });
+
+    it('should setup focus trap when opened via click', async() => {
+      const wrapper = createWrapper({ fallbackFocus: '#my-fallback' });
+      const button = wrapper.find('button');
+
+      await button.trigger('click');
+      await wrapper.vm.$nextTick(); // Let watcher for `card` run
+
+      expect(wrapper.vm.focusOpen).toBe(true);
+      expect(mockFocusTrap).toHaveBeenCalledTimes(1);
+
+      // Check arguments passed to the composable
+      const focusTrapOptions = mockFocusTrap.mock.calls[0][2];
+
+      expect(focusTrapOptions.fallbackFocus).toBe('#my-fallback');
+      expect(focusTrapOptions.setReturnFocus()).toBe('.focus-button');
+    });
+  });
+
+  describe('slots', () => {
+    it('should render the default slot content', () => {
+      const wrapper = createWrapper({}, { default: '<span class="default-slot-content">Hello</span>' });
+
+      expect(wrapper.find('.default-slot-content').exists()).toBe(true);
+      expect(wrapper.find('.default-slot-content').text()).toBe('Hello');
+    });
+
+    it('should render the card-body slot content', async() => {
+      const wrapper = createWrapper({}, { 'card-body': '<div class="card-body-content">Card Body</div>' });
+
+      // Open popover to render the slot
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.find('.card-body-content').exists()).toBe(true);
+      expect(wrapper.find('.card-body-content').text()).toBe('Card Body');
+    });
+
+    it('should pass a close function to the heading-action slot', async() => {
+      const wrapper = createWrapper({}, {
+        'heading-action': `
+          <template #heading-action="{ close }">
+            <button class="close-button" @click="close">Close</button>
+          </template>
+        `
+      });
+
+      // Open popover
+      await wrapper.find('button').trigger('click');
+      expect(wrapper.vm.showPopover).toBe(true);
+      expect(wrapper.vm.focusOpen).toBe(true);
+
+      // Click the button that uses the `close` slot prop
+      await wrapper.find('.close-button').trigger('click');
+
+      // Due to the bug, this should be true, not false
+      expect(wrapper.vm.showPopover).toBe(false);
+      expect(wrapper.vm.focusOpen).toBe(false);
+    });
+
+    it('should allow overriding the entire card via the card slot', async() => {
+      const wrapper = createWrapper({}, { card: '<div class="custom-card">My Custom Card</div>' });
+
+      // Open popover
+      await wrapper.find('button').trigger('click');
+
+      expect(wrapper.find('.custom-card').exists()).toBe(true);
+      expect(wrapper.find('.custom-card').text()).toBe('My Custom Card');
+      // The default Card component should not be rendered
+      expect(wrapper.find('[id="popover-card"]').exists()).toBe(false);
+    });
+  });
+});

package/components/formatter/Autoscaler.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import PopoverCard from '@shell/components/PopoverCard.vue';
+import { computed } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import AutoscalerCard from '@shell/components/AutoscalerCard.vue';
+
+export interface Props {
+  value: string | boolean;
+  row: any;
+}
+
+export interface Detail {
+  label: string;
+  value?: string | { component: any; props: any };
+}
+
+const props = withDefaults(defineProps<Props>(), { value: true });
+const store = useStore();
+const i18n = useI18n(store);
+
+const checked = computed(() => props.value === true || props.value === 'true');
+const actionIcon = computed(() => props.row.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
+const actionText = computed(() => props.row.isAutoscalerPaused ? i18n.t('autoscaler.card.resume') : i18n.t('autoscaler.card.pause'));
+const stopPropagation = (event: Event) => {
+  // This is to prevent click events from getting to the table row which ends up selecting the row
+  event.stopPropagation();
+};
+</script>
+
+<template>
+  <span
+    v-if="checked"
+    class="autoscaler"
+    @click="stopPropagation"
+  >
+    <PopoverCard
+      :card-title="i18n.t('autoscaler.card.title')"
+      fallback-focus=".autoscaler .action"
+    >
+      <i class="icon icon-checkmark" />
+      <template
+        v-if="props.row.canExplore"
+        #heading-action="{close}"
+      >
+        <RcButton
+          v-if="row.canPauseResumeAutoscaler"
+          secondary
+          small
+          class="action"
+          @click="() => {props.row.toggleAutoscalerRunner(); close()}"
+        >
+          <i :class="`icon ${actionIcon} icon-sm`" />
+          {{ actionText }}
+        </RcButton>
+      </template>
+      <template #card-body>
+        <AutoscalerCard :value="props.row" />
+      </template>
+    </PopoverCard>
+  </span>
+  <span
+    v-else
+    class="text-muted autoscaler"
+  >
+    &mdash;
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.autoscaler {
+  &:deep() {
+    .heading {
+      height: 24px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+
+    button.btn.action {
+      line-height: 15px;
+      font-size: 12px;
+      height: 24px;
+      min-height: initial;
+      padding: 0 8px;
+
+      i {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>