@rancher/shell 3.0.5-rc.8 → 3.0.5

package/components/Resource/Detail/__tests__/CopyToClipboard.spec.ts

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils';
+import CopyToClipboard from '@shell/components/Resource/Detail/CopyToClipboard.vue';
+import { copyTextToClipboard } from '@shell/utils/clipboard';
+
+// Mock the clipboard utility
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+jest.mock('vuex', () => ({ useStore: () => { } }));
+
+describe('component: CopyToClipboard', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  it('should render a button', () => {
+    const wrapper = mount(CopyToClipboard, { props: { value: 'test-value' } });
+
+    const button = wrapper.find('button');
+
+    expect(button.exists()).toBe(true);
+    expect(button.classes()).toContain('copy-to-clipboard');
+  });
+
+  it('should call copyTextToClipboard with the correct value on click', async() => {
+    const testValue = 'my-secret-text';
+    const wrapper = mount(CopyToClipboard, { props: { value: testValue } });
+
+    await wrapper.find('button').trigger('click');
+
+    expect(copyTextToClipboard).toHaveBeenCalledTimes(1);
+    expect(copyTextToClipboard).toHaveBeenCalledWith(testValue);
+  });
+
+  it('should add the "copied" class on click and remove it after a timeout', async() => {
+    const wrapper = mount(CopyToClipboard, { props: { value: 'test-value' } });
+
+    const button = wrapper.find('button');
+
+    await button.trigger('click');
+
+    expect(button.classes()).toContain('copied');
+
+    // Advance timers by 2 seconds
+    jest.advanceTimersByTime(2000);
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('button').classes()).not.toContain('copied');
+  });
+
+  it('should not reset the timeout if clicked multiple times', async() => {
+    const wrapper = mount(CopyToClipboard, { props: { value: 'test-value' } });
+
+    const button = wrapper.find('button');
+
+    // First click
+    await button.trigger('click');
+    expect(wrapper.find('button').classes()).toContain('copied');
+
+    // Advance time by 1 second
+    jest.advanceTimersByTime(1000);
+
+    // Second click
+    await button.trigger('click');
+    expect(wrapper.find('button').classes()).toContain('copied');
+
+    // The timeout should not have been reset. After another 1 second, the original timeout should fire.
+    jest.advanceTimersByTime(1000);
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('button').classes()).not.toContain('copied');
+  });
+});

package/components/ResourceDetail/Masthead/legacy.vue

@@ -526,25 +526,6 @@ export default {
               :value="value.creationTimestamp"
             />
           </span>
-          <span
-            v-if="value.showCreatedBy"
-            data-testid="masthead-subheader-createdBy"
-          >
-            {{ t("resourceDetail.masthead.createdBy") }}:
-            <router-link
-              v-if="value.createdBy.location"
-              :to="value.createdBy.location"
-              data-testid="masthead-subheader-createdBy-link"
-            >
-              {{ value.createdBy.displayName }}
-            </router-link>
-            <span
-              v-else
-              data-testid="masthead-subheader-createdBy_plain-text"
-            >
-              {{ value.createdBy.displayName }}
-            </span>
-          </span>
         </div>
       </div>
       <slot name="right">

package/components/ResourceDetail/index.vue

@@ -4,7 +4,7 @@ import Loading from '@shell/components/Loading';
 import ResourceYaml from '@shell/components/ResourceYaml';
 import {
   _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
-  AS, _YAML, _DETAIL, _CONFIG, _GRAPH, PREVIEW, MODE,
+  AS, _YAML, _DETAIL, _CONFIG, PREVIEW, MODE,
 } from '@shell/config/query-params';
 import { SCHEMA } from '@shell/config/types';
 import { createYaml } from '@shell/utils/create-yaml';
@@ -12,7 +12,6 @@ import Masthead from '@shell/components/ResourceDetail/Masthead';
 import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
-import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
 
@@ -45,7 +44,6 @@ export default {
   components: {
     Loading,
     DetailTop,
-    ForceDirectedTreeChart,
     ResourceYaml,
     Masthead,
     IconMessage,
@@ -106,8 +104,6 @@ export default {
     // know about:  view, edit, create (stage, import and clone become "create")
     const mode = ([_CLONE, _IMPORT, _STAGE].includes(realMode) ? _CREATE : realMode);
 
-    const getGraphConfig = store.getters['type-map/hasGraph'](resourceType);
-    const hasGraph = !!getGraphConfig;
     const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resourceType, id);
     const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resourceType, id);
 
@@ -120,8 +116,6 @@ export default {
 
     if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
       as = _DETAIL;
-    } else if ( mode === _VIEW && hasGraph && requested === _GRAPH) {
-      as = _GRAPH;
     } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
       as = _CONFIG;
     } else {
@@ -213,10 +207,6 @@ export default {
         }
       }
 
-      if ( as === _GRAPH ) {
-        this.chartData = liveModel;
-      }
-
       if ( [_CLONE, _IMPORT, _STAGE].includes(realMode) ) {
         model.cleanForNew();
         yaml = model.cleanYaml(yaml, realMode);
@@ -231,8 +221,6 @@ export default {
     }
 
     const out = {
-      hasGraph,
-      getGraphConfig,
       hasCustomDetail,
       hasCustomEdit,
       canViewYaml,
@@ -256,11 +244,9 @@ export default {
   },
   data() {
     return {
-      chartData:       null,
       resourceSubtype: null,
 
       // Set by fetch
-      hasGraph:        null,
       hasCustomDetail: null,
       hasCustomEdit:   null,
       resourceType:    null,
@@ -298,10 +284,6 @@ export default {
       return this.as === _DETAIL;
     },
 
-    isGraph() {
-      return this.as === _GRAPH;
-    },
-
     offerPreview() {
       return this.as === _YAML && [_EDIT, _CLONE, _IMPORT, _STAGE].includes(this.mode);
     },
@@ -468,7 +450,6 @@ export default {
       :mode="mode"
       :real-mode="realMode"
       :as="as"
-      :has-graph="hasGraph"
       :has-detail="hasCustomDetail"
       :has-edit="hasCustomEdit"
       :can-view-yaml="canViewYaml"
@@ -498,12 +479,6 @@ export default {
       />
     </div>
 
-    <ForceDirectedTreeChart
-      v-if="isGraph"
-      :data="chartData"
-      :fdc-config="getGraphConfig"
-    />
-
     <ResourceYaml
       v-else-if="isYaml"
       ref="resourceyaml"

package/components/ResourceTable.vue

@@ -304,6 +304,7 @@ export default {
     },
 
     _headers() {
+      // :TableColumn[]
       let headers;
       const showNamespace = this.showNamespaceColumn;
 
@@ -339,6 +340,29 @@ export default {
 
         // adding extension defined cols to the correct header config
         extensionCols.forEach((col) => {
+          if (this.externalPaginationEnabled) {
+            // validate that the required settings are supplied to enable search and sort server-side
+            // these do not check other invalid scenarios like a path is a string but to a model property, or that the field supports sort/search via api (some basic non-breaking checks are done further on)
+            if (
+              col.search !== false && // search is explicitly disabled
+              (typeof col.search !== 'string' && !Array.isArray(col.search)) && // primary property path to search on
+              typeof col.value !== 'string' // secondary property path to search on
+            ) {
+              console.warn(`Unable to support server-side search for extension provided column "${ col.name || col.label || col.labelKey }" (column must provide \`search\` or \`value\` property containing a path to a property in the resource. search can be an array).`); // eslint-disable-line no-console
+
+              col.search = false;
+            }
+
+            if (
+              col.sort !== false && // sort is explicitly disabled
+              (typeof col.sort !== 'string' && !Array.isArray(col.sort)) // primary property path to sort on
+            ) {
+              console.warn(`Unable to support server-side sort for extension provided column "${ col.name || col.label || col.labelKey }" (column must provide \`sort\` property containing a path to a property, or array of paths, in the resource)`); // eslint-disable-line no-console
+
+              col.sort = false;
+            }
+          }
+
           // we need the 'value' prop to be populated in order for the rows to show the values
           if (!col.value && col.getValue) {
             col.value = col.getValue;

package/components/SortableTable/index.vue

@@ -26,6 +26,7 @@ import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 import ActionDropdownShell from '@shell/components/ActionDropdownShell.vue';
+import { useTabCountUpdater } from '@shell/components/form/ResourceTabs/composable';
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -51,7 +52,7 @@ export default {
     'group-value-change',
     'selection',
     'rowClick',
-    'enter',
+    'enter'
   ],
 
   components: {
@@ -432,6 +433,7 @@ export default {
     $main?.addEventListener('scroll', this._onScroll);
 
     this.debouncedPaginationChanged();
+    this.updateTabCount(this.totalRows);
   },
 
   beforeUnmount() {
@@ -445,6 +447,7 @@ export default {
     const $main = document.querySelector('main');
 
     $main?.removeEventListener('scroll', this._onScroll);
+    this.clearTabCount();
   },
 
   watch: {
@@ -559,10 +562,13 @@ export default {
 
     const store = useStore();
     const { featureDropdownMenu } = useRuntimeFlag(store);
+    const { updateTabCount, clearTabCount } = useTabCountUpdater();
 
     return {
       table,
       featureDropdownMenu,
+      updateTabCount,
+      clearTabCount
     };
   },
 

package/components/SortableTable/paging.js

@@ -99,6 +99,9 @@ export default {
       this.debouncedPaginationChanged();
     },
 
+    totalRows() {
+      this.updateTabCount(this.totalRows);
+    }
   },
 
   methods: {

package/components/Tabbed/Tab.vue

@@ -1,4 +1,6 @@
 <script>
+import { useTabCountWatcher } from '@shell/components/form/ResourceTabs/composable';
+
 export default {
   inject: ['addTab', 'removeTab', 'sideTabs'],
 
@@ -43,6 +45,20 @@ export default {
       required: false,
       type:     Number
     },
+    /**
+     * False to hide the count from being displayed in a tab.
+     * Number override/display the number as the count on the tab.
+     */
+    count: {
+      default: undefined,
+      type:    [Number, Boolean]
+    }
+  },
+
+  setup(props) {
+    const { count, isCountVisible } = useTabCountWatcher();
+
+    return { inferredCount: count, isInferredCountVisible: isCountVisible };
   },
 
   data() {
@@ -50,7 +66,7 @@ export default {
   },
 
   computed: {
-    labelDisplay() {
+    baseLabelDisplay() {
       if ( this.labelKey ) {
         return this.$store.getters['i18n/t'](this.labelKey);
       }
@@ -62,12 +78,38 @@ export default {
       return this.name;
     },
 
+    labelDisplay() {
+      const baseLabel = this.baseLabelDisplay;
+
+      if ( this.displayCount === false ) {
+        return baseLabel;
+      }
+
+      return `${ baseLabel } (${ this.displayCount })`;
+    },
+
     shouldShowHeader() {
       if ( this.showHeader !== null ) {
         return this.showHeader;
       }
 
       return this.sideTabs || false;
+    },
+
+    displayCount() {
+      if (this.count === false) {
+        return false;
+      }
+
+      if (typeof this.count === 'number') {
+        return this.count;
+      }
+
+      if (this.isInferredCountVisible) {
+        return this.inferredCount;
+      }
+
+      return false;
     }
   },
 

package/components/Tabbed/index.vue

@@ -299,7 +299,9 @@ export default {
           @click.prevent="select(tab.name, $event)"
           @keyup.enter.space="select(tab.name, $event)"
         >
-          <span>{{ tab.labelDisplay }}</span>
+          <span>
+            {{ tab.labelDisplay }}
+          </span>
           <span
             v-if="tab.badge"
             class="tab-badge"

package/components/__tests__/Cron/CronExpressionEditor.test.ts

@@ -0,0 +1,151 @@
+/* eslint-disable jest/no-hooks */
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { createStore } from 'vuex';
+import CronExpressionEditor from '@shell/components/Cron/CronExpressionEditor.vue';
+import type { CronField } from '@shell/components/Cron/types';
+
+const translations: Record<string, string> = {
+  'component.cron.expressionEditor.label.minute':     'Minute',
+  'component.cron.expressionEditor.label.hour':       'Hour',
+  'component.cron.expressionEditor.label.dayOfMonth': 'Day of Month',
+  'component.cron.expressionEditor.label.month':      'Month',
+  'component.cron.expressionEditor.label.dayOfWeek':  'Day of Week',
+  'component.cron.expressionEditor.invalidValue':     'Invalid value',
+};
+
+const store = createStore({});
+
+interface CronExpressionEditorVm extends InstanceType<typeof CronExpressionEditor> {
+  cronValues: Record<CronField, string>;
+  handleInput: (field: CronField, value: string) => void;
+  isValid: boolean;
+  readableCron: string;
+  errors: Record<CronField, boolean>;
+  focusedField: Record<CronField, boolean>;
+  tooltipRefs: Record<CronField, unknown>;
+  popperInstances: Record<CronField, unknown>;
+  handleFocus: (field: CronField) => void;
+  handleBlur: (field: CronField) => void;
+}
+
+describe('cronExpressionEditor', () => {
+  let wrapper: VueWrapper<CronExpressionEditorVm>;
+
+  const factory = (props: Partial<CronExpressionEditorVm> = {}) => mount(CronExpressionEditor, {
+    global: {
+      plugins: [store],
+      stubs:   {
+        CronTooltip:  true,
+        LabeledInput: {
+          name:     'LabeledInput',
+          props:    ['label', 'tooltip', 'type', 'value'],
+          template: `
+            <div>
+              <label>{{ label }}</label>
+              <input ref="value" :value="value" />
+            </div>
+          `
+        }
+      },
+      mocks: { t: (key: string) => translations[key] || key },
+    },
+    props: { cronExpression: '0 0 * * *', ...props },
+  }) as VueWrapper<CronExpressionEditorVm>;
+
+  afterEach(() => wrapper?.unmount());
+
+  const getEmitted = (event: string) => wrapper.emitted(event) as unknown[][] || [];
+
+  it('renders 5 input fields with correct labels', () => {
+    wrapper = factory();
+    const labels = wrapper.findAll('label').map((l) => l.text());
+
+    expect(labels).toStrictEqual(['Minute', 'Hour', 'Day of Month', 'Month', 'Day of Week']);
+  });
+
+  it('initializes cron values and emits initial events', () => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    expect(vm.cronValues).toStrictEqual({
+      minute: '0', hour: '0', dayOfMonth: '*', month: '*', dayOfWeek: '*'
+    });
+    expect(vm.isValid).toBe(true);
+    expect(vm.readableCron).toContain('12:00');
+
+    expect(getEmitted('update:cronExpression')[0][0]).toBe('0 0 * * *');
+    expect(typeof getEmitted('update:readableCron')[0][0]).toBe('string');
+    expect(getEmitted('update:isValid')[0][0]).toBe(true);
+  });
+
+  it('emits correct events when cron value changes', async() => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    vm.handleInput('minute', '5');
+    await nextTick();
+
+    expect(getEmitted('update:cronExpression')[1][0]).toBe('5 0 * * *');
+    expect(getEmitted('update:readableCron')[1][0]).toBe(vm.readableCron);
+    expect(getEmitted('update:isValid')[1][0]).toBe(true);
+  });
+
+  it('validates individual fields correctly', () => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    vm.handleInput('minute', '0');
+    expect(vm.errors.minute).toBe(false);
+
+    vm.handleInput('minute', '61');
+    expect(vm.errors.minute).toBe(true);
+  });
+
+  it('handles invalid cron expressions gracefully', async() => {
+    wrapper = factory({ cronExpression: '61 * * * *' });
+    const vm = wrapper.vm;
+
+    await nextTick();
+    expect(vm.isValid).toBe(false);
+  });
+
+  it('updates readableCron correctly for valid and invalid inputs', async() => {
+    wrapper = factory({ cronExpression: '0 12 * * *' });
+    const vm = wrapper.vm;
+
+    await nextTick();
+    expect(vm.readableCron).toContain('12:00');
+
+    vm.handleInput('hour', '25');
+    await nextTick();
+    expect(vm.isValid).toBe(false);
+  });
+
+  it('shows tooltip and manages popper on focus/blur', async() => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    await vm.handleFocus('minute');
+    expect(vm.focusedField.minute).toBe(true);
+    expect(vm.tooltipRefs.minute).not.toBeNull();
+    expect(vm.popperInstances.minute).not.toBeNull();
+
+    vm.handleBlur('minute');
+    await nextTick();
+    expect(vm.focusedField.minute).toBe(false);
+    expect(vm.popperInstances.minute).toBeNull();
+  });
+
+  it('displays error tooltip for invalid input', async() => {
+    wrapper = factory();
+    const vm = wrapper.vm;
+
+    vm.handleInput('minute', '61');
+    await nextTick();
+
+    const inputWrapper = wrapper.findComponent({ name: 'LabeledInput' });
+
+    expect(inputWrapper.props('tooltip')).toBe('Invalid value');
+  });
+});

package/components/__tests__/Cron/CronExpressionEditorModal.test.ts

@@ -0,0 +1,81 @@
+/* eslint-disable jest/no-hooks */
+import { mount, VueWrapper } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import CronExpressionEditorModal from '@shell/components/Cron/CronExpressionEditorModal.vue';
+
+interface CronExpressionEditorModalVm extends InstanceType<typeof CronExpressionEditorModal> {
+  localCron: string;
+  confirmCron?: () => void;
+  closeModal?: () => void;
+}
+
+const store = createStore({});
+
+describe('cronExpressionEditorModal', () => {
+  let modalsDiv: HTMLElement;
+  let wrapper: VueWrapper<CronExpressionEditorModalVm>;
+
+  const factory = (props: Partial<CronExpressionEditorModalVm> = {}) => mount(CronExpressionEditorModal, {
+    global: {
+      plugins: [store],
+      stubs:   {
+        AppModal:             true,
+        CronExpressionEditor: true,
+      },
+    },
+    props: {
+      cronExpression: '0 0 * * *',
+      show:           true,
+      ...props,
+    },
+  }) as VueWrapper<CronExpressionEditorModalVm>;
+
+  const getEmitted = (event: string) => wrapper.emitted(event) as unknown[][] || [];
+
+  beforeEach(() => {
+    modalsDiv = document.createElement('div');
+    modalsDiv.id = 'modals';
+    document.body.appendChild(modalsDiv);
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    modalsDiv.remove();
+  });
+
+  it('renders modal with correct initial props', () => {
+    wrapper = factory();
+    expect(wrapper.props('cronExpression')).toBe('0 0 * * *');
+    expect(wrapper.props('show')).toBe(true);
+  });
+
+  it('updates localCron when cronExpression prop changes', async() => {
+    wrapper = factory();
+    await wrapper.setProps({ cronExpression: '*/5 * * * *' });
+    expect(wrapper.vm.localCron).toBe('*/5 * * * *');
+  });
+
+  it('emits update:cronExpression and update:show on confirm', async() => {
+    wrapper = factory();
+    await wrapper.vm.confirmCron?.();
+
+    const cronEmits = getEmitted('update:cronExpression');
+    const showEmits = getEmitted('update:show');
+
+    expect(cronEmits).toHaveLength(1);
+    expect(cronEmits[0][0]).toBe('0 0 * * *');
+
+    expect(showEmits).toHaveLength(1);
+    expect(showEmits[0][0]).toBe(false);
+  });
+
+  it('emits update:show on cancel', async() => {
+    wrapper = factory();
+    await wrapper.vm.closeModal?.();
+
+    const showEmits = getEmitted('update:show');
+
+    expect(showEmits).toHaveLength(1);
+    expect(showEmits[0][0]).toBe(false);
+  });
+});