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

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

@@ -159,23 +159,20 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
 
 <style lang="scss" scoped>
 .title-bar {
-  min-width: 740px;
+  min-width: $resource-detail-min-width;
 
   .badge-state {
     font-size: 16px;
     margin-left: 12px;
     position: relative;
-  }
-
-  .icon-document {
-    width: 15px;
-    font-size: 16px;
-    margin-right: 10px;
+    flex: 0 0 auto;
   }
 
   .actions {
     display: flex;
     align-items: center;
+    flex: 0 0 auto;
+    margin-left: 16px;
   }
 
   .show-configuration, &:deep() .actions > button {
@@ -198,15 +195,17 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
     max-width: 60%;
   }
 
-  // This prevents the title from overlapping with the actions
+  // Title takes the remaining row space; min-width: 0 lets its children
+  // (resource-name) shrink so the action buttons stay visible on narrow viewports.
   .title {
-    max-width: calc(100% - 260px);
+    flex: 1 1 auto;
+    min-width: 0;
   }
 
-  // We want the resource name to be what collaspes wh
   .resource-name {
     display: inline-block;
-    flex: 1;
+    flex: 0 1 auto;
+    min-width: 0;
     white-space: nowrap;
     overflow-x: hidden;
     overflow-y: clip;

package/components/ResourceList/Masthead.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import Favorite from '@shell/components/nav/Favorite';
 import TypeDescription from '@shell/components/TypeDescription';
+import { RcButton } from '@components/RcButton';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
@@ -16,6 +17,7 @@ export default {
 
   components: {
     Favorite,
+    RcButton,
     TypeDescription,
     ResourceLoadingIndicator,
     TabTitle
@@ -221,22 +223,24 @@ export default {
           <slot name="extraActions" />
 
           <slot name="createButton">
-            <router-link
+            <RcButton
               v-if="hasEditComponent && _isCreatable"
-              :to="_createLocation"
-              class="btn role-primary"
+              variant="primary"
+              size="large"
               :data-testid="componentTestid+'-create'"
+              :to="_createLocation"
             >
               {{ _createButtonlabel }}
-            </router-link>
-            <router-link
+            </RcButton>
+            <RcButton
               v-else-if="_isYamlCreatable"
-              :to="_yamlCreateLocation"
-              class="btn role-primary"
+              variant="primary"
+              size="large"
               :data-testid="componentTestid+'-create-yaml'"
+              :to="_yamlCreateLocation"
             >
               {{ t("resourceList.head.createFromYaml") }}
-            </router-link>
+            </RcButton>
           </slot>
         </div>
       </slot>

package/components/SelectIconGrid.vue

@@ -38,6 +38,10 @@ export default {
       type:    String,
       default: 'disabled',
     },
+    tooltipField: {
+      type:    String,
+      default: 'tooltip',
+    },
 
     asLink: {
       type:    Boolean,
@@ -104,6 +108,7 @@ export default {
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
+      v-clean-tooltip="get(r, tooltipField) || null"
       :role="asLink ? 'link' : null"
       :aria-disabled="asLink && get(r, disabledField) === true ? true : null"
       :aria-label="get(r, nameField)"
@@ -126,16 +131,6 @@ export default {
         class="side-label"
         :class="{'indicator': true }"
       />
-      <div v-if="r.deploysOnWindows">
-        <label class="deploys-os-label">
-          {{ t('catalog.charts.deploysOnWindows') }}
-        </label>
-      </div>
-      <div v-if="r.windowsIncompatible">
-        <label class="os-incompatible-label">
-          {{ t('catalog.charts.windowsIncompatible') }}
-        </label>
-      </div>
       <div
         v-if="get(r, sideLabelField)"
         class="side-label"

package/components/SingleClusterInfo.vue

@@ -13,6 +13,7 @@ export default {
   },
 
   async fetch() {
+    // There's only one cluster, might as well fetch them all...
     this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
   },
 

package/components/SortableTable/__tests__/sorting.test.ts

@@ -0,0 +1,126 @@
+import sorting from '@shell/components/SortableTable/sorting';
+
+const { arrangedRows } = sorting.computed;
+
+describe('sorting mixin', () => {
+  describe('arrangedRows', () => {
+    function createContext({
+      rows = [] as any[],
+      sortFields = ['id'],
+      descending = false,
+      sortGeneration = undefined as string | undefined,
+      sortGenerationFn = (() => 'gen1') as (() => string) | undefined,
+      externalPaginationEnabled = false,
+      cacheKey = null as string | null,
+      cachedRows = null as any[] | null,
+      cachedRowsRef = null as any[] | null,
+    } = {}) {
+      return {
+        rows,
+        sortFields,
+        descending,
+        sortGeneration,
+        sortGenerationFn,
+        externalPaginationEnabled,
+        cacheKey,
+        cachedRows,
+        cachedRowsRef,
+      };
+    }
+
+    it('should return undefined when externalPaginationEnabled is true', () => {
+      const ctx = createContext({ externalPaginationEnabled: true });
+
+      expect(arrangedRows.call(ctx)).toBeUndefined();
+    });
+
+    it('should sort rows by the given sort fields', () => {
+      const rows = [{ id: 'b' }, { id: 'a' }, { id: 'c' }];
+      const ctx = createContext({ rows, sortGenerationFn: undefined });
+
+      const result = arrangedRows.call(ctx);
+
+      expect(result.map((r: any) => r.id)).toStrictEqual(['a', 'b', 'c']);
+    });
+
+    it('should cache results when sortGenerationFn is provided', () => {
+      const rows = [{ id: 'b' }, { id: 'a' }];
+      const ctx = createContext({ rows });
+
+      const result1 = arrangedRows.call(ctx);
+
+      expect(ctx.cacheKey).not.toBeNull();
+      expect(ctx.cachedRows).toStrictEqual(result1);
+
+      const result2 = arrangedRows.call(ctx);
+
+      expect(result2).toBe(ctx.cachedRows);
+    });
+
+    it('should invalidate cache when rows change to different items with the same count', () => {
+      const rowsA = [{ id: 'alpha' }];
+      const rowsB = [{ id: 'beta' }];
+      const ctx = createContext({ rows: rowsA });
+
+      const resultA = arrangedRows.call(ctx);
+
+      expect(resultA.map((r: any) => r.id)).toStrictEqual(['alpha']);
+
+      ctx.rows = rowsB;
+      const resultB = arrangedRows.call(ctx);
+
+      expect(resultB.map((r: any) => r.id)).toStrictEqual(['beta']);
+    });
+
+    it('should return cached rows when same rows are passed again', () => {
+      const rows = [{ id: 'x' }, { id: 'y' }];
+      const ctx = createContext({ rows });
+
+      arrangedRows.call(ctx);
+      const cached = ctx.cachedRows;
+
+      const result = arrangedRows.call(ctx);
+
+      expect(result).toBe(cached);
+    });
+
+    it('should invalidate cache when descending changes', () => {
+      const rows = [{ id: 'a' }, { id: 'b' }];
+      const ctx = createContext({ rows });
+
+      arrangedRows.call(ctx);
+
+      ctx.descending = true;
+      const result = arrangedRows.call(ctx);
+
+      expect(result.map((r: any) => r.id)).toStrictEqual(['b', 'a']);
+    });
+
+    it('should not cache when there is no sortGenerationFn or sortGeneration', () => {
+      const rows = [{ id: 'a' }];
+      const ctx = createContext({ rows });
+
+      ctx.sortGenerationFn = undefined;
+      ctx.sortGeneration = undefined;
+
+      arrangedRows.call(ctx);
+
+      expect(ctx.cacheKey).toBeNull();
+      expect(ctx.cachedRows).toBeNull();
+    });
+
+    it('should use sortGeneration over sortGenerationFn when provided', () => {
+      const rows = [{ id: 'a' }];
+      const ctx = createContext({
+        rows,
+        sortGeneration:   'custom-gen',
+        sortGenerationFn: () => 'fn-gen',
+      });
+
+      arrangedRows.call(ctx);
+
+      expect(ctx.cacheKey).toContain('custom-gen');
+      expect(ctx.cacheKey).not.toContain('fn-gen');
+    });
+  });
+});

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 { RcButton } from '@components/RcButton';
 import { useTabCountUpdater } from '@shell/components/form/ResourceTabs/composable';
 
 // Uncomment for table performance debugging
@@ -65,6 +66,7 @@ export default {
     ButtonMultiAction,
     ActionMenu,
     ActionDropdownShell,
+    RcButton,
   },
 
   mixins: [
@@ -1116,17 +1118,17 @@ export default {
         >
           <slot name="header-left">
             <template v-if="tableActions">
-              <button
+              <RcButton
                 v-for="(act) in availableActions"
                 :id="act.action"
                 :key="act.action"
                 v-clean-tooltip="actionTooltip"
                 type="button"
-                class="btn role-primary"
+                variant="primary"
+                size="large"
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
-                role="button"
                 :aria-label="act.label"
                 @click="applyTableAction(act, null, $event)"
                 @keydown.enter.stop
@@ -1138,7 +1140,7 @@ export default {
                   :class="act.icon"
                 />
                 <span v-clean-html="act.label" />
-              </button>
+              </RcButton>
               <template v-if="featureDropdownMenu">
                 <ActionDropdownShell
                   :disabled="!selectedRows.length"
@@ -2154,11 +2156,6 @@ export default {
         }
       }
 
-      .bulk-action  {
-        .icon {
-          vertical-align: -10%;
-        }
-      }
     }
 
     .middle {

package/components/SortableTable/selection.js

@@ -626,27 +626,45 @@ function _execute(resources, action, args, opts = {}, ctx) {
     return action.invoke.apply(ctx, [actionOpts, resources || [], args]);
   }
 
+  /**
+   * for the given resource find it's action matching the target action. if that target action has an alt resource return it
+   */
+  const findResourceFromAction = (r) => {
+    const actualAction = r.availableActions.find((aa) => aa.action === action.action);
+
+    return actualAction?.altResource || r;
+  };
+
+  // if there there are multiple resources and a bulk action, use it and pass in the resources
+  // for example cluster management cluster list Download KubeConfig
   if ( resources.length > 1 && action.bulkAction && !opts.alt ) {
-    const fn = resources[0][action.bulkAction];
+    const applyResource = findResourceFromAction(resources[0]);
+    const fn = applyResource[action.bulkAction];
 
     if ( fn ) {
-      return fn.call(resources[0], resources, ...args);
+      const applyResources = resources.map(findResourceFromAction);
+
+      return fn.call(applyResource, applyResources, ...args);
     }
   }
 
   const promises = [];
 
+  // if there is a single resource or no bulk action, for each resource execute it's action
+  // for example delete when only one row is selected
   for ( const resource of resources ) {
     let fn;
 
+    const applyResource = findResourceFromAction(resource);
+
     if (opts.alt && action.altAction) {
-      fn = resource[action.altAction];
+      fn = applyResource[action.altAction];
     } else {
-      fn = resource[action.action];
+      fn = applyResource[action.action];
     }
 
     if ( fn ) {
-      promises.push(fn.apply(resource, args));
+      promises.push(fn.apply(applyResource, args));
     }
   }
 

package/components/SortableTable/sorting.js

@@ -50,7 +50,8 @@ export default {
 
       if ( sortGenerationKey) {
         key = `${ sortGenerationKey }/${ this.rows.length }/${ this.descending }/${ this.sortFields.join(',') }`;
-        if ( this.cacheKey === key ) {
+
+        if ( this.cacheKey === key && this.cachedRowsRef === this.rows ) {
           return this.cachedRows;
         }
       }
@@ -60,6 +61,7 @@ export default {
       if ( key ) {
         this.cacheKey = key;
         this.cachedRows = out;
+        this.cachedRowsRef = this.rows;
       }
 
       return out;
@@ -104,8 +106,9 @@ export default {
     return {
       sortBy,
       descending,
-      cachedRows: null,
-      cacheKey:   null,
+      cachedRows:    null,
+      cachedRowsRef: null,
+      cacheKey:      null,
     };
   },
 

package/components/Wizard.vue

@@ -2,6 +2,7 @@
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
+import { RcButton } from '@components/RcButton';
 import Loading from '@shell/components/Loading';
 import { stringify } from '@shell/utils/error';
 import LazyImage from '@shell/components/LazyImage';
@@ -28,6 +29,7 @@ export default {
   components: {
     AsyncButton,
     Banner,
+    RcButton,
     Loading,
     LazyImage,
   },
@@ -44,7 +46,6 @@ export default {
     loading: Wizard will block until all steps are not loading
     nextButton?: {
       labelKey?: default to `wizard.next`
-      style?:  defaults to `btn role-primary`
     },
     previousButton: {
       disable: defaults to false
@@ -185,9 +186,6 @@ export default {
       return this.steps.filter((step) => !step.hidden);
     },
 
-    nextButtonStyle() {
-      return this.activeStep.nextButton?.style || `btn role-primary`;
-    },
     nextButtonLabel() {
       return this.activeStep.nextButton?.labelKey || `wizard.next`;
     }
@@ -444,13 +442,14 @@ export default {
             name="cancel"
             :cancel="cancel"
           >
-            <button
+            <RcButton
               type="button"
-              class="btn role-secondary"
+              variant="secondary"
+              size="large"
               @click="cancel"
             >
               <t k="generic.cancel" />
-            </button>
+            </RcButton>
           </slot>
           <div class="controls-steps">
             <slot
@@ -458,14 +457,15 @@ export default {
               name="back"
               :back="back"
             >
-              <button
+              <RcButton
                 :disabled="!canPrevious || (!editFirstStep && activeStepIndex===1)"
                 type="button"
-                class="btn role-secondary"
+                variant="secondary"
+                size="large"
                 @click="back()"
               >
                 <t k="wizard.previous" />
-              </button>
+              </RcButton>
             </slot>
             <slot
               v-if="activeStepIndex === visibleSteps.length-1"
@@ -484,14 +484,15 @@ export default {
               name="next"
               :next="next"
             >
-              <button
+              <RcButton
                 :disabled="!canNext"
                 type="button"
-                :class="nextButtonStyle"
+                variant="primary"
+                size="large"
                 @click="next()"
               >
                 <t :k="nextButtonLabel" />
-              </button>
+              </RcButton>
             </slot>
           </div>
         </div>

package/components/__tests__/CountBox.test.ts

@@ -0,0 +1,72 @@
+import { shallowMount } from '@vue/test-utils';
+import CountBox from '@shell/components/CountBox.vue';
+
+describe('component: CountBox', () => {
+  const defaultProps = {
+    name:            'Test',
+    count:           5,
+    primaryColorVar: '--sizzle-1',
+  };
+
+  describe('when clickable is false', () => {
+    it('should render as a div', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.element.tagName).toBe('DIV');
+    });
+
+    it('should not have the clickable class', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.classes()).not.toContain('clickable');
+    });
+
+    it('should not emit click event when clicked', async() => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      await wrapper.trigger('click');
+
+      expect(wrapper.emitted('click')).toBeUndefined();
+    });
+  });
+
+  describe('when clickable is true', () => {
+    it('should have the clickable class', () => {
+      const wrapper = shallowMount(CountBox, {
+        props: {
+          ...defaultProps,
+          clickable: true,
+        },
+      });
+
+      expect(wrapper.classes()).toContain('clickable');
+    });
+
+    it('should emit click event when clicked', async() => {
+      const wrapper = shallowMount(CountBox, {
+        props: {
+          ...defaultProps,
+          clickable: true,
+        },
+      });
+
+      await wrapper.trigger('click');
+
+      expect(wrapper.emitted('click')).toHaveLength(1);
+    });
+  });
+
+  describe('display', () => {
+    it('should display the count', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.find('h1').text()).toBe('5');
+    });
+
+    it('should display the name', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.find('label').text()).toBe('Test');
+    });
+  });
+});

package/components/__tests__/DetailText.test.ts

@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils';
+
+import DetailText from '@shell/components/DetailText.vue';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+
+describe('component: DetailText', () => {
+  const defaultMocks = {
+    $store: {
+      getters: {
+        'i18n/t':    jest.fn((key: string) => `%${ key }%`),
+        'prefs/get': jest.fn(() => true),
+      }
+    }
+  };
+
+  describe('concealment', () => {
+    it('should not render the actual secret value in the content area when concealed', () => {
+      const secretValue = 'super-secret-password-xyz';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   secretValue,
+          conceal: true,
+          label:   'Password',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain(secretValue);
+    });
+
+    it('should render the actual value when not concealed', () => {
+      const visibleValue = 'visible-value-123';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   visibleValue,
+          conceal: false,
+          label:   'Data',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html': (el: HTMLElement, binding: { value: string }) => {
+              el.innerHTML = binding.value;
+            },
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const contentSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(contentSpan.exists()).toBe(true);
+      expect(contentSpan.classes()).not.toContain('conceal');
+    });
+
+    it('should not render JSON secret values in CodeMirror when concealed', () => {
+      const jsonSecret = '{"api_key": "secret-key-123"}';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   jsonSecret,
+          conceal: true,
+          label:   'Config',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const codeMirror = wrapper.findComponent({ name: 'CodeMirror' });
+
+      expect(codeMirror.exists()).toBe(false);
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain('secret-key-123');
+    });
+  });
+});