@rancher/shell 3.0.9-rc.1 → 3.0.9-rc.3

package/components/ResourceDetail/Masthead/__tests__/latest.test.ts

@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils';
+import Latest from '@shell/components/ResourceDetail/Masthead/latest.vue';
+
+jest.mock('@shell/components/Resource/Detail/TitleBar/index.vue', () => ({
+  name:     'TitleBar',
+  template: `<div data-testid="title-bar">TitleBar</div>`
+}));
+jest.mock('@shell/components/Resource/Detail/TitleBar/composables', () => ({ useDefaultTitleBarProps: jest.fn(() => ({})) }));
+jest.mock('@shell/components/Resource/Detail/Metadata/index.vue', () => ({
+  name:     'Metadata',
+  template: `<div data-testid="metadata">Metadata</div>`
+}));
+jest.mock('@shell/components/Resource/Detail/Metadata/composables', () => ({ useDefaultMetadataForLegacyPagesProps: jest.fn(() => ({})) }));
+jest.mock('@shell/components/Resource/Detail/composables', () => ({ useResourceDetailBannerProps: jest.fn(() => null) }));
+jest.mock('@shell/components/Resource/Detail/Cards.vue', () => ({
+  name:     'Cards',
+  template: `<div data-testid="cards">Cards</div>`,
+  props:    ['resource']
+}));
+jest.mock('@components/Banner', () => ({
+  Banner: {
+    name:     'Banner',
+    template: `<div data-testid="banner">Banner</div>`
+  }
+}));
+
+const defaultMocks = {
+  directives: { 'ui-context': () => {} },
+  global:     {
+    mocks: {
+      $store: {
+        getters:  { 'i18n/t': jest.fn() },
+        dispatch: jest.fn()
+      }
+    }
+  }
+};
+
+describe('component: Masthead/latest', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render Cards when isCustomDetailOrEdit is true', () => {
+    const props = {
+      value:                { name: 'test-resource' },
+      isCustomDetailOrEdit: true
+    };
+
+    const wrapper = mount(Latest, { props, ...defaultMocks });
+
+    expect(wrapper.find('[data-testid="cards"]').exists()).toBe(true);
+  });
+
+  it('should not render Cards when isCustomDetailOrEdit is false', () => {
+    const props = {
+      value:                { name: 'test-resource' },
+      isCustomDetailOrEdit: false
+    };
+
+    const wrapper = mount(Latest, { props, ...defaultMocks });
+
+    expect(wrapper.find('[data-testid="cards"]').exists()).toBe(false);
+  });
+
+  it('should not render Cards when isCustomDetailOrEdit is not provided (defaults to false)', () => {
+    const props = { value: { name: 'test-resource' } };
+
+    const wrapper = mount(Latest, { props, ...defaultMocks });
+
+    expect(wrapper.find('[data-testid="cards"]').exists()).toBe(false);
+  });
+
+  it('should always render TitleBar and Metadata', () => {
+    const props = {
+      value:                { name: 'test-resource' },
+      isCustomDetailOrEdit: false
+    };
+
+    const wrapper = mount(Latest, { props, ...defaultMocks });
+
+    expect(wrapper.find('[data-testid="title-bar"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="metadata"]').exists()).toBe(true);
+  });
+});

package/components/ResourceDetail/Masthead/index.vue

@@ -48,6 +48,7 @@ const showLatestMasthead = computed(() => isNewDetailPageEnabled.value && isView
     v-if="showLatestMasthead"
     :value="props.value"
     :resourceSubtype="props.resourceSubtype"
+    :isCustomDetailOrEdit="props.hasDetail || props.hasEdit"
   />
   <Legacy
     v-else

package/components/ResourceDetail/Masthead/latest.vue

@@ -7,11 +7,13 @@ import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
 import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resource/Detail/Metadata/composables';
 import { useResourceDetailBannerProps } from '@shell/components/Resource/Detail/composables';
 import { computed } from 'vue';
+import Cards from '@shell/components/Resource/Detail/Cards.vue';
 
 // We are disabling eslint for this script to allow the use of the Props interface
 export interface Props {
   value?: Object;
   resourceSubtype?: string;
+  isCustomDetailOrEdit?: boolean;
 }
 
 </script>
@@ -19,7 +21,7 @@ export interface Props {
 <script lang="ts" setup>
 import { useStore } from 'vuex';
 
-const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined });
+const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined, isCustomDetailOrEdit: false });
 
 const uiCtxResource = computed(() => {
   const {
@@ -64,6 +66,11 @@ const store = useStore();
       v-bind="metadataProps"
       class="mmt-4"
     />
+    <Cards
+      v-if="props.isCustomDetailOrEdit"
+      class="mb-20"
+      :resource="props.value"
+    />
   </div>
 </template>
 

package/components/ResourceDetail/Masthead/legacy.vue

@@ -559,7 +559,7 @@ export default {
             <template v-if="featureDropdownMenu">
               <ActionMenu
                 v-if="isView"
-                button-role="multiAction"
+                button-variant="multiAction"
                 button-size="compact"
                 :resource="value"
                 data-testid="masthead-action-menu"

package/components/ResourceTable.vue

@@ -427,7 +427,7 @@ export default {
     },
 
     _applicableExtensionTableHooks() {
-      if (this.$store.$plugin?.getUIConfig) {
+      if (this.$store.$extension?.getUIConfig) {
         const extensionTableHooks = getApplicableExtensionEnhancements(this, ExtensionPoint.TABLE, TableLocation.RESOURCE, this.$route);
 
         return extensionTableHooks;

package/components/Setting.vue

@@ -45,7 +45,7 @@ export default {
           :resource="value.data"
           :button-aria-label="t('advancedSettings.edit.label')"
           data-testid="action-button"
-          button-role="tertiary"
+          button-variant="tertiary"
         />
       </div>
     </div>

package/components/SortableTable/index.vue

@@ -1590,6 +1590,18 @@ export default {
             :onRowMouseEnter="onRowMouseEnter"
             :onRowMouseLeave="onRowMouseLeave"
           >
+            <slot
+              :full-colspan="fullColspan"
+              :row="row.row"
+              :show-sub-row="row.row.stateDescription"
+              :sub-matches="subMatches"
+              :keyField="keyField"
+              :componentTestid="componentTestid"
+              :i="i"
+              :onRowMouseEnter="onRowMouseEnter"
+              :onRowMouseLeave="onRowMouseLeave"
+              name="additional-sub-row"
+            />
             <tr
               v-if="row.row.stateDescription"
               :key="row.row[keyField] + '-description'"
@@ -1924,12 +1936,25 @@ export default {
         &.main-row.has-sub-row {
           border-bottom: 0;
         }
+        &.additional-sub-row.has-sub-row {
+          border-bottom: 0;
+        }
 
         // if a main-row is hovered also hover it's sibling sub row. note - the reverse is handled in selection.js
         &.main-row:not(.row-selected):hover + .sub-row {
           background-color: var(--sortable-table-hover-bg);
         }
 
+        // Case with only additional-sub-row
+        &.main-row:not(.row-selected):hover + .additional-sub-row {
+          background-color: var(--sortable-table-hover-bg);
+        }
+
+        // Case with both additional-sub-row and sub-row
+        &.main-row:not(.row-selected):hover + .additional-sub-row + .sub-row{
+          background-color: var(--sortable-table-hover-bg);
+        }
+
         &:last-of-type {
           border-bottom: 0;
         }

package/components/SortableTable/selection.js

@@ -177,24 +177,32 @@ export default {
       }
     },
 
-    onRowMouseEnter(e) {
+    removeOrAddHover(option, e) {
+      // Hardcoded logic to not overcomplicate just adding the conditions of next and previous
       const tr = e.target.closest('TR');
 
-      if (tr.classList.contains('sub-row')) {
-        const trMainRow = tr.previousElementSibling;
+      if (tr.classList.contains('sub-row') || tr.classList.contains('additional-sub-row')) {
+        const trPreviousRow = tr.previousElementSibling;
+        const trNextRow = tr.nextElementSibling;
+
+        trPreviousRow.classList[option]('sub-row-hovered');
 
-        trMainRow.classList.add('sub-row-hovered');
+        if (!trPreviousRow.classList.contains('main-row')) {
+          const trMainRow = trPreviousRow.previousElementSibling;
+
+          trMainRow.classList[option]('sub-row-hovered');
+        }
+        if (trNextRow?.classList.contains('sub-row')) {
+          trNextRow.classList[option]('sub-row-hovered');
+        }
       }
     },
+    onRowMouseEnter(e) {
+      this.removeOrAddHover('add', e);
+    },
 
     onRowMouseLeave(e) {
-      const tr = e.target.closest('TR');
-
-      if (tr.classList.contains('sub-row')) {
-        const trMainRow = tr.previousElementSibling;
-
-        trMainRow.classList.remove('sub-row-hovered');
-      }
+      this.removeOrAddHover('remove', e);
     },
 
     nodeForEvent(e) {
@@ -486,6 +494,11 @@ export default {
 
       this.$nextTick(() => {
         this.$emit('selection', this.selectedRows);
+        if (this.selectedRows && this.selectedRows.length) {
+          for ( let i = 0 ; i < this.selectedRows.length ; i++ ) {
+            this.updateInput(this.selectedRows[i], true, this.keyField);
+          }
+        }
       });
     },
 
@@ -505,7 +518,7 @@ export default {
           let tr = input.closest('tr');
           let first = true;
 
-          while ( tr && (first || tr.classList.contains('sub-row') ) ) {
+          while ( tr && (first || tr.classList.contains('sub-row') || tr.classList.contains('additional-sub-row')) ) {
             if (on) {
               tr.classList.add('row-selected');
             } else {

package/components/SortableTable/sorting.js

@@ -79,7 +79,7 @@ export default {
 
       if ( markedColumn ) {
         this._defaultSortBy = markedColumn.name;
-        descending = markedColumn.defaultSortDescending;
+        descending = markedColumn.defaultSortDescending || false;
       } else if ( nameColumn ) {
         // Use the name column if there is one
         this._defaultSortBy = nameColumn.name;

package/components/Tabbed/Tab.vue

@@ -15,6 +15,10 @@ export default {
       default: null,
       type:    String
     },
+    labelIcon: {
+      type:    String,
+      default: null
+    },
     name: {
       required: true,
       type:     String
@@ -137,6 +141,7 @@ export default {
     :id="name"
     :aria-hidden="!active"
     role="tabpanel"
+    :aria-labelledby="`tab-${name}`"
   >
     <div
       v-if="shouldShowHeader"

package/components/Tabbed/index.vue

@@ -83,6 +83,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'tabbed'
+    },
+
+    removeBorders: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -128,7 +133,8 @@ export default {
     return {
       tabs:          [...parsedExtTabs],
       extensionTabs: parsedExtTabs,
-      activeTabName: null
+      activeTabName: null,
+      tabRefs:       {}
     };
   },
 
@@ -201,7 +207,7 @@ export default {
         return TabLocation.OTHER;
       }
     },
-    hasIcon(tab) {
+    hasErrorIcon(tab) {
       return tab.displayAlertIcon || (tab.error && !tab.active);
     },
     hashChange() {
@@ -263,7 +269,10 @@ export default {
       this.select(nextName);
 
       this.$nextTick(() => {
-        this.$refs.tablist.focus();
+        this.$refs.tablist.removeAttribute('tabindex');
+        if (this.tabRefs[nextName]) {
+          this.tabRefs[nextName].focus();
+        }
       });
 
       function getCyclicalIdx(currentIdx, direction, tabsLength) {
@@ -299,7 +308,8 @@ export default {
     class="tabbed-container"
     :class="{
       'side-tabs': !!sideTabs,
-      'tabs-only': tabsOnly
+      'tabs-only': tabsOnly,
+      'remove-borders': removeBorders
     }"
     :data-testid="componentTestid"
   >
@@ -308,7 +318,7 @@ export default {
       ref="tablist"
       role="tablist"
       class="tabs"
-      :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
+      :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs, 'remove-borders': removeBorders}"
       :data-testid="`${componentTestid}-block`"
       tabindex="0"
       @keydown.right.prevent="selectNext(1)"
@@ -323,17 +333,23 @@ export default {
         :key="tab.name"
         :data-testid="tab.name"
         :class="{tab: true, active: tab.active, disabled: tab.disabled, error: (tab.error)}"
-        role="presentation"
       >
         <a
+          :id="`tab-${tab.name}`"
+          :ref="(el) => { if (el) tabRefs[tab.name] = el; }"
           :data-testid="`btn-${tab.name}`"
           :aria-controls="tab.name"
           :aria-selected="tab.active"
           :aria-label="tab.labelDisplay || ''"
           role="tab"
+          :tabindex="tab.active ? '0' : '-1'"
           @click.prevent="select(tab.name, $event)"
           @keyup.enter.space="select(tab.name, $event)"
         >
+          <i
+            v-if="tab.labelIcon"
+            :class="`tab-label-icon icon ${tab.labelIcon}`"
+          />
           <span>
             {{ tab.labelDisplay }}
           </span>
@@ -342,7 +358,7 @@ export default {
             class="tab-badge"
           >{{ tab.badge }}</span>
           <i
-            v-if="hasIcon(tab)"
+            v-if="hasErrorIcon(tab)"
             v-clean-tooltip="t('validation.tab')"
             class="conditions-alert-icon icon-error"
           />
@@ -442,6 +458,17 @@ export default {
     display: flex;
     flex-direction: row;
 
+    &.remove-borders {
+      border: none;
+
+      + .tab-container {
+        border: none;
+        border-top: 1px solid var(--border);
+        padding: 0;
+        padding-top: 24px;
+      }
+    }
+
     + .tab-container {
       border: solid thin var(--border);
     }
@@ -458,7 +485,7 @@ export default {
   .tab {
     position: relative;
     float: left;
-    padding: 0 8px 0 0;
+    padding: 0 4px 0 4px;
     cursor: pointer;
 
     A {
@@ -491,11 +518,15 @@ export default {
     }
 
     &.error {
-      & A > i {
+      & A > .icon-error {
         color: var(--error);
       }
     }
 
+    .tab-label-icon {
+      margin-right: 8px;
+    }
+
     .tab-badge {
       margin-left: 5px;
       background-color: var(--link);

package/components/Window/ContainerShell.vue

@@ -172,8 +172,11 @@ export default {
         await this.$store.dispatch('cluster/find', { type: NODE, id: nodeId });
       }
     } catch {}
-
-    await this.setupTerminal();
+    try {
+      await this.setupTerminal();
+    } catch (e) {
+      this.errorMsg = e;
+    }
     await this.connect();
 
     clearInterval(this.keepAliveTimer);
@@ -234,26 +237,20 @@ export default {
 
       this.fitAddon = new addons.fit.FitAddon();
       this.searchAddon = new addons.search.SearchAddon();
+      terminal.loadAddon(this.fitAddon);
+      terminal.loadAddon(this.searchAddon);
+      terminal.loadAddon(new addons.weblinks.WebLinksAddon());
+      terminal.open(this.$refs.xterm);
 
       try {
         this.webglAddon = new addons.webgl.WebglAddon();
+        terminal.loadAddon(this.webglAddon);
       } catch (e) {
         // Some browsers (Safari) don't support the webgl renderer, so don't use it.
         this.webglAddon = null;
         this.canvasAddon = new addons.canvas.CanvasAddon();
-      }
-
-      terminal.loadAddon(this.fitAddon);
-      terminal.loadAddon(this.searchAddon);
-      terminal.loadAddon(new addons.weblinks.WebLinksAddon());
-      terminal.open(this.$refs.xterm);
-
-      if (this.webglAddon) {
-        terminal.loadAddon(this.webglAddon);
-      } else {
         terminal.loadAddon(this.canvasAddon);
       }
-
       this.fit();
       this.flush();
 

package/components/__tests__/ProjectRow.test.ts

@@ -1,31 +1,39 @@
 import ProjectRow from '@shell/components/form/ResourceQuota/ProjectRow.vue';
-import { RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
+import { RANCHER_TYPES, TYPES } from '@shell/components/form/ResourceQuota/shared';
 import { shallowMount } from '@vue/test-utils';
 
-const CONFIGMAP_STRING = RANCHER_TYPES[0].value;
+const CONFIGMAP_STRING = TYPES.CONFIG_MAPS;
 
 describe('component: ProjectRow.vue', () => {
-  const wrapper = shallowMount(ProjectRow,
-    {
-      props: {
-        mode:  'edit',
-        types: RANCHER_TYPES,
-        type:  CONFIGMAP_STRING,
-        value: {
-          spec: {
-            namespaceDefaultResourceQuota: { limit: {} },
-            resourceQuota:                 { limit: {} }
-          }
+  const defaultMountOptions = {
+    props: {
+      mode:  'edit',
+      types: RANCHER_TYPES,
+      type:  CONFIGMAP_STRING,
+      index: 0,
+      value: {
+        spec: {
+          namespaceDefaultResourceQuota: { limit: {} },
+          resourceQuota:                 { limit: {} }
         }
       }
-    });
+    }
+  };
 
   it('should render the correct input fields and set the correct computed values, based on the provided data', () => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
     const typeInput = wrapper.find(`[data-testid="projectrow-type-input"]`);
+    const customTypeInput = wrapper.find(`[data-testid="projectrow-custom-type-input"]`);
     const projectQuotaInput = wrapper.find(`[data-testid="projectrow-project-quota-input"]`);
     const namespaceQuotaInput = wrapper.find(`[data-testid="projectrow-namespace-quota-input"]`);
 
     expect(typeInput.exists()).toBe(true);
+    expect(customTypeInput.exists()).toBe(true);
+    expect(customTypeInput.attributes().disabled).toBe('true');
     expect(projectQuotaInput.exists()).toBe(true);
     expect(namespaceQuotaInput.exists()).toBe(true);
     expect(wrapper.vm.resourceQuotaLimit).toStrictEqual({});
@@ -33,6 +41,11 @@ describe('component: ProjectRow.vue', () => {
   });
 
   it('triggering "updateQuotaLimit" should trigger Vue.set with the correct data', () => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
     wrapper.vm.updateQuotaLimit('resourceQuota', CONFIGMAP_STRING, 10);
 
     expect(wrapper.vm.value).toStrictEqual({
@@ -44,6 +57,11 @@ describe('component: ProjectRow.vue', () => {
   });
 
   it('triggering "updateType" with the same type that existed should clear limits and trigger emit', () => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
     wrapper.vm.updateType(CONFIGMAP_STRING);
 
     expect(wrapper.vm.value).toStrictEqual({
@@ -54,6 +72,75 @@ describe('component: ProjectRow.vue', () => {
     });
 
     expect(wrapper.emitted('type-change')).toBeTruthy();
-    expect(wrapper.emitted('type-change')[0]).toStrictEqual([CONFIGMAP_STRING]);
+    expect(wrapper.emitted('type-change')[0]).toStrictEqual([{ index: 0, type: CONFIGMAP_STRING }]);
+  });
+
+  it('should update standard resource types', async() => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
+    expect(wrapper.vm.isCustom).toBe(false);
+
+    await wrapper.vm.updateQuotaLimit('resourceQuota', 'limitsCpu', '100m');
+    await wrapper.vm.updateQuotaLimit('namespaceDefaultResourceQuota', 'limitsCpu', '50m');
+
+    expect(wrapper.vm.value.spec.resourceQuota.limit.limitsCpu).toBe('100m');
+    expect(wrapper.vm.value.spec.namespaceDefaultResourceQuota.limit.limitsCpu).toBe('50m');
+    expect(wrapper.vm.value.spec.resourceQuota.limit.extended).toBeUndefined();
+  });
+
+  it('should switch to a custom resource type', async() => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      { ...defaultMountOptions }
+    );
+
+    await wrapper.vm.updateType(TYPES.EXTENDED);
+
+    expect(wrapper.emitted('type-change')).toHaveLength(1);
+    expect(wrapper.emitted('type-change')[0][0]).toStrictEqual({ index: 0, type: TYPES.EXTENDED });
+  });
+
+  it('should update custom resource types', async() => {
+    const wrapper = shallowMount(
+      ProjectRow,
+      {
+        ...defaultMountOptions,
+        props: {
+          ...defaultMountOptions.props,
+          type: TYPES.EXTENDED
+        }
+      }
+    );
+
+    expect(wrapper.vm.isCustom).toBe(true);
+
+    const customTypeInput = wrapper.find(`[data-testid="projectrow-custom-type-input"]`);
+
+    expect(customTypeInput.attributes().disabled).toBe('false');
+    await wrapper.vm.updateCustomType('custom.resource/foo');
+
+    expect(wrapper.vm.customType).toBe('custom.resource/foo');
+
+    await wrapper.vm.updateQuotaLimit('resourceQuota', 'custom.resource/foo', 1);
+    await wrapper.vm.updateQuotaLimit('namespaceDefaultResourceQuota', 'custom.resource/foo', 2);
+
+    expect(wrapper.vm.value.spec.resourceQuota.limit.extended['custom.resource/foo']).toBe(1);
+    expect(wrapper.vm.value.spec.namespaceDefaultResourceQuota.limit.extended['custom.resource/foo']).toBe(2);
+  });
+
+  it('should handle custom resource types with periods', () => {
+    const wrapper = shallowMount(ProjectRow, {
+      ...defaultMountOptions,
+      props: {
+        ...defaultMountOptions.props,
+        type: 'extended.requests.nvidia.com/gpu'
+      }
+    });
+
+    expect(wrapper.vm.isCustom).toBe(true);
+    expect(wrapper.vm.customType).toBe('requests.nvidia.com/gpu');
   });
 });