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

package/components/form/WorkloadPorts.vue

@@ -130,14 +130,11 @@ export default {
       const version = this.provisioningCluster?.kubernetesVersion;
 
       if (this.provisioningCluster?.isRke2) {
+        // This is a candidate for using the prov cluster provisioner (or now the mgmt cluster provisioner directly)
         const machineSelectorConfig = this.provisioningCluster?.spec?.rkeConfig?.machineSelectorConfig || {};
         const agentConfig = (machineSelectorConfig[0] || {}).config;
 
         cloudProvider = agentConfig?.['cloud-provider-name'];
-      } else if (this.provisioningCluster?.isRke1) {
-        const currentCluster = this.$store.getters['currentCluster'];
-
-        cloudProvider = currentCluster?.spec?.rancherKubernetesEngineConfig?.cloudProvider?.name;
       }
 
       return cloudProvider === HARVESTER &&
@@ -145,9 +142,7 @@ export default {
     },
 
     provisioningCluster() {
-      const out = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((c) => c?.status?.clusterName === this.currentCluster.metadata.name);
-
-      return out;
+      return this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.currentCluster.provClusterId);
     },
   },
 

package/components/form/__tests__/KeyValue.test.ts

@@ -177,6 +177,72 @@ describe('component: KeyValue', () => {
     expect(firstValueInput.element.value).toBe('testvalue1');
   });
 
+  describe('valueConcealed', () => {
+    it('should not render actual secret values in the DOM when valueConcealed is true', () => {
+      const secretValue = 'super-secret-api-key-12345';
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { mySecret: secretValue },
+          mode:           'view',
+          valueConcealed: true,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.exists()).toBe(true);
+      expect(wrapper.html()).not.toContain(secretValue);
+    });
+
+    it('should render a TextAreaAutoGrow with the real value when valueConcealed is false', () => {
+      const secretValue = 'visible-value';
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { myKey: secretValue },
+          mode:           'view',
+          valueConcealed: false,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.exists()).toBe(false);
+
+      const multilineEl = wrapper.find('[data-testid="value-multiline"]');
+
+      expect(multilineEl.exists()).toBe(true);
+    });
+
+    it('should have user-select none on the concealed placeholder to prevent text selection', () => {
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { mySecret: 'secret' },
+          mode:           'view',
+          valueConcealed: true,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.classes()).toContain('concealed-value');
+    });
+  });
+
   it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
     const value = [{ key: 'testkey1', value: 'testvalue1' }];
 

package/components/form/__tests__/NodeScheduling.test.ts

@@ -1,9 +1,18 @@
 import { mount } from '@vue/test-utils';
 import NodeScheduling from '@shell/components/form/NodeScheduling.vue';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import { createStore } from 'vuex';
 
 const requiredSetup = () => {
   return {
+    provide: {
+      store: createStore({
+        getters: {
+          currentStore:                () => 'cluster',
+          'cluster/paginationEnabled': () => () => false,
+        },
+      }),
+    },
     global: {
       mocks: {
         $fetchState: { pending: false },

package/components/form/__tests__/Security.test.ts

@@ -79,6 +79,42 @@ describe('component: Security', () => {
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
 
+    // Regression: clearing runAsUser must drop the key from the emitted object.
+    // Otherwise the spec is sent with `runAsUser: ""` and the API rejects with
+    // "cannot unmarshal string ... of type int64". See issue #9601.
+    it('should omit runAsUser from the emitted value when the input is cleared', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, value: { runAsUser: 33 }
+        }
+      });
+      const input = wrapper.find('[data-testid="input-security-runAsUser"]').find('input');
+
+      await input.setValue('');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, 'runAsUser')).toBe(false);
+    });
+
+    it('should omit runAsUser from the emitted value when it is undefined', async() => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.CONTAINER, value: {}
+        }
+      });
+
+      const checkbox = wrapper.find('[data-testid="input-security-runasNonRoot"]').find('label');
+
+      await checkbox.trigger('click');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, 'runAsUser')).toBe(false);
+    });
+
     it.each([
       'privileged',
       'allowPrivilegeEscalation',
@@ -139,5 +175,45 @@ describe('component: Security', () => {
 
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });
+
+    it.each([
+      'runAsUser',
+      'fsGroup',
+    ])('should omit %p from the emitted value when it is undefined', async(field) => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.POD, value: {}
+        }
+      });
+
+      const checkbox = wrapper.find('[data-testid="input-security-runasNonRoot"]').find('label');
+
+      await checkbox.trigger('click');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, field)).toBe(false);
+    });
+
+    // Regression for #9601 — see equivalent container-level test above.
+    it.each([
+      ['runAsUser', { runAsUser: 33 }],
+      ['fsGroup', { fsGroup: 100 }],
+    ])('should omit %p from the emitted value when the input is cleared', async(field, initial) => {
+      const wrapper = mount(Security, {
+        props: {
+          mode: _EDIT, formType: FORM_TYPES.POD, value: initial
+        }
+      });
+      const input = wrapper.find(`[data-testid="input-security-${ field }"]`).find('input');
+
+      await input.setValue('');
+
+      const events = wrapper.emitted('update:value') ?? [];
+      const last = events[events.length - 1][0] as Record<string, unknown>;
+
+      expect(Object.prototype.hasOwnProperty.call(last, field)).toBe(false);
+    });
   });
 });

package/components/form/labeled-select-utils/useLabeledSelectPagination.ts

@@ -0,0 +1,138 @@
+/**
+ * composable to provide pagination support to LabeledSelect
+ */
+import {
+  ref, computed, onMounted, ComputedRef, Ref, PropType
+} from 'vue';
+import { useStore } from 'vuex';
+import { debounce } from 'lodash';
+import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
+
+interface LabeledSelectPaginationProps {
+  paginate?: LabelSelectPaginateFn | null;
+  inStore?: string;
+  resourceType?: string | null;
+  options?: Array<any>;
+}
+
+interface UseLabeledSelectPagination {
+  canPaginate: ComputedRef<boolean>;
+  canLoadMore: ComputedRef<boolean>;
+  optionCounts: ComputedRef<string>;
+  _options: ComputedRef<any[]>;
+  pages: Ref<number>;
+  totalResults: Ref<number>;
+  paginating: Ref<boolean>;
+  loadMore: () => void;
+  setPaginationFilter: (filter: string) => void;
+}
+
+export const labeledSelectPaginationProps = {
+  paginate: {
+    default: null,
+    type:    Function as PropType<LabelSelectPaginateFn>,
+  },
+
+  inStore: {
+    type:    String,
+    default: 'cluster',
+  },
+
+  /**
+   * Resource to show
+  */
+  resourceType: {
+    type:    String,
+    default: null,
+  },
+};
+
+export const useLabeledSelectPagination = (props: LabeledSelectPaginationProps): UseLabeledSelectPagination => {
+  const store = useStore();
+
+  // Internal
+  const currentPage = ref(1);
+  const search = ref('');
+  const pageSize = ref(10);
+  const pages = ref(0);
+
+  // External
+  const page = ref<any[]>([]);
+  const totalResults = ref(0);
+  const paginating = ref(false);
+
+  const canPaginate = computed(() => {
+    return !!props.paginate && !!props.resourceType && store.getters[`${ props.inStore }/paginationEnabled`](props.resourceType);
+  });
+
+  const _options = computed(() => canPaginate.value ? page.value : (props.options || []));
+
+  const canLoadMore = computed(() => pages.value > currentPage.value);
+
+  const optionsInPage = computed(() => {
+    // Number of genuine options (not groups, dividers, etc)
+    return canPaginate.value ? _options.value.filter((o: any) => {
+      return o.kind !== LABEL_SELECT_KINDS.NONE && !LABEL_SELECT_NOT_OPTION_KINDS.includes(o.kind);
+    }).length : 0;
+  });
+
+  const optionCounts = computed(() => {
+    if (!canPaginate.value || optionsInPage.value === totalResults.value) {
+      return '';
+    }
+
+    return store.getters['i18n/t']('labelSelect.pagination.counts', {
+      count:      optionsInPage.value,
+      totalCount: totalResults.value
+    });
+  });
+
+  const requestPagination = async(resetPage = false) => {
+    paginating.value = true;
+
+    const { page: p, pages: pg, total } = await (props.paginate as LabelSelectPaginateFn)({
+      resetPage,
+      pageContent: page.value || [],
+      page:        currentPage.value,
+      filter:      search.value,
+      pageSize:    pageSize.value,
+    });
+
+    page.value = p;
+    pages.value = pg || 0;
+    totalResults.value = total || 0;
+    paginating.value = false;
+  };
+
+  const debouncedRequestPagination = debounce(requestPagination, 700);
+
+  const setPaginationFilter = (filter: string) => {
+    paginating.value = true; // Do this before debounce
+    currentPage.value = 1;
+    search.value = filter;
+    debouncedRequestPagination(true);
+  };
+
+  const loadMore = () => {
+    currentPage.value++;
+    requestPagination();
+  };
+
+  onMounted(async() => {
+    if (canPaginate.value) {
+      await requestPagination();
+    }
+  });
+
+  return {
+    canPaginate,
+    canLoadMore,
+    optionCounts,
+    _options,
+    pages,
+    totalResults,
+    paginating,
+    loadMore,
+    setPaginationFilter,
+  };
+};

package/components/formatter/Autoscaler.vue

@@ -21,8 +21,8 @@ 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 actionIcon = computed(() => props.row.provCluster.isAutoscalerPaused ? 'icon-play' : 'icon-pause');
+const actionText = computed(() => props.row.provCluster.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();
@@ -45,7 +45,7 @@ const stopPropagation = (event: Event) => {
         #heading-action="{close}"
       >
         <RcButton
-          v-if="row.canPauseResumeAutoscaler"
+          v-if="row.provCluster.canPauseResumeAutoscaler"
           variant="secondary"
           size="small"
           class="action"
@@ -56,7 +56,7 @@ const stopPropagation = (event: Event) => {
         </RcButton>
       </template>
       <template #card-body>
-        <AutoscalerCard :value="props.row" />
+        <AutoscalerCard :value="props.row.provCluster" />
       </template>
     </PopoverCard>
   </span>

package/components/formatter/ClusterKubeVersion.vue

@@ -0,0 +1,27 @@
+<script>
+
+export default {
+  name: 'ClusterKubeVersion',
+
+  props: {
+    row: {
+      type:    Object,
+      default: null,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span>
+      {{ row.kubernetesVersion }}
+    </span>
+    <div
+      v-clean-tooltip="{content: row.architecture.tooltip, placement: 'left'}"
+      class="text-muted"
+    >
+      {{ row.architecture.label }}
+    </div>
+  </div>
+</template>

package/components/formatter/ClusterLink.vue

@@ -31,7 +31,7 @@ export default {
         return this.getCustomDetailLink(this.row);
       }
 
-      return this.row?.detailLocation;
+      return this.row?.provCluster?.detailLocation;
     },
 
     statusErrorConditions() {
@@ -77,12 +77,6 @@ export default {
       class="conditions-alert-icon icon-alert icon"
       data-testid="unavailable-machines-alert-icon"
     />
-    <i
-      v-if="row.isRke1"
-      v-clean-tooltip="t('cluster.rke1Unsupported')"
-      class="rke1-unsupported-icon icon-warning icon"
-      data-testid="rke1-unsupported-icon"
-    />
     <i
       v-if="row.hasError && statusErrorConditions.length > 0"
       v-clean-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"

package/components/formatter/ClusterProvider.vue

@@ -12,26 +12,22 @@ export default {
 <template>
   <div>
     <template v-if="row.machineProvider">
-      <span v-if="row.isHarvester && row.mgmt && row.mgmt.isReady && !row.hasError">
+      <span v-if="row.isHarvester && row.isReady && !row.hasError">
         <a
-          v-if="row.mgmt.isReady && !row.hasError"
           role="button"
           @click="row.goToHarvesterCluster()"
         >
           {{ row.machineProviderDisplay }}
         </a>
       </span>
-      <span v-else>
+      <span v-else-if="row.machineProviderDisplay">
         {{ row.machineProviderDisplay }}
       </span>
     </template>
-    <template v-else-if="row.isImported">
-      {{ t('cluster.provider.imported') }}
-    </template>
-    <template v-else-if="row.isCustom">
-      {{ t('cluster.provider.custom') }}
-    </template>
-    <div class="text-muted">
+    <div
+      v-if="row.machineProviderDisplay !== row.provisionerDisplay"
+      class="text-muted"
+    >
       {{ row.provisionerDisplay }}
     </div>
   </div>

package/components/formatter/FleetSummaryGraph.vue

@@ -26,9 +26,6 @@ export default {
       if (this.clusterId) {
         return this.row.statusResourceCountsForCluster(this.clusterId);
       }
-      if (this.row.statusResourceCountsForCluster) {
-        return this.row.statusResourceCountsForCluster;
-      }
 
       return this.row.status?.resourceCounts || {};
     },

package/components/formatter/MachineSummaryGraph.vue

@@ -18,7 +18,7 @@ export default {
   computed: {
     ready() {
       // Ensure we never show more ready machines than desired
-      // If w can address in backedn, we could revert this in the future
+      // If we can address in backend, we could revert this in the future
       const ready = this.row?.ready || 0;
       const desired = this.row?.desired || 0;
 

package/components/formatter/PodsUsage.vue

@@ -9,8 +9,8 @@ export default {
   },
   computed: {
     podsUsage() {
-      const usedPods = this.row?.mgmt?.status?.requested?.pods;
-      const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
+      const usedPods = this.row?.status?.requested?.pods;
+      const totalPods = this.row?.status?.allocatable?.pods;
 
       if (!this.row?.isReady || !totalPods) {
         return '—';

package/components/formatter/__tests__/Autoscaler.test.ts

@@ -30,6 +30,10 @@ describe('component: formatter/Autoscaler.vue', () => {
         stubs:   {
           PopoverCard:    PopoverCardStub,
           RcButton:       { template: '<button><slot /></button>' },
+          // RcButton:    {
+          //   template: '<button><i v-if="icon" :class="icon" /><i v-if="leftIcon" :class="leftIcon" /><slot /></button>',
+          //   props:    ['icon', 'leftIcon']
+          // },
           AutoscalerCard: {
             name:     'AutoscalerCard',
             props:    ['value'],
@@ -88,30 +92,26 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should render AutoscalerCard with correct row data', () => {
-      const rowData = { id: 'test-row' };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { id: 'test-row' };
+      const wrapper = createWrapper({ value: true, row: { provCluster } });
       const card = wrapper.findComponent({ name: 'AutoscalerCard' });
 
       expect(card.exists()).toBe(true);
-      expect(card.props('value')).toStrictEqual(rowData);
+      expect(card.props('value')).toStrictEqual(provCluster);
     });
   });
 
   describe('heading action button', () => {
     it('should NOT render if canExplore is false', () => {
-      const rowData = { canExplore: false };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { canExplore: false };
+      const wrapper = createWrapper({ value: true, row: { provCluster } });
 
       expect(wrapper.find('button').exists()).toBe(false);
     });
 
     it('should render "Pause" button if autoscaler is running', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: false, canPauseResumeAutoscaler: true
-      };
-      const wrapper = createWrapper({
-        value: true, row: rowData, canPauseResumeAutoscaler: true
-      });
+      const provCluster = { isAutoscalerPaused: false, canPauseResumeAutoscaler: true };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(true);
@@ -120,10 +120,8 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should render "Resume" button if autoscaler is paused', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: true
-      };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { isAutoscalerPaused: true, canPauseResumeAutoscaler: true };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(true);
@@ -132,20 +130,19 @@ describe('component: formatter/Autoscaler.vue', () => {
     });
 
     it('should hide "Resume" button if canPauseResumeAutoscaler is false', () => {
-      const rowData = {
-        canExplore: true, isAutoscalerPaused: true, canPauseResumeAutoscaler: false
-      };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const provCluster = { isAutoscalerPaused: true, canPauseResumeAutoscaler: false };
+      const wrapper = createWrapper({ value: true, row: { canExplore: true, provCluster } });
       const button = wrapper.find('button');
 
       expect(button.exists()).toBe(false);
     });
 
     it('should call toggleAutoscalerRunner and close on click', async() => {
-      const rowData = {
-        canExplore: true, toggleAutoscalerRunner: mockToggleRunner, canPauseResumeAutoscaler: true
+      const provCluster = { canPauseResumeAutoscaler: true };
+      const mgmtCluster = {
+        toggleAutoscalerRunner: mockToggleRunner, canExplore: true, provCluster
       };
-      const wrapper = createWrapper({ value: true, row: rowData });
+      const wrapper = createWrapper({ value: true, row: mgmtCluster });
 
       wrapper.find('button').trigger('click');