@rancher/shell 0.5.2 → 1.2.0

package/components/TabTitle.vue

@@ -0,0 +1,84 @@
+<script>
+import { mapGetters } from 'vuex';
+import { updatePageTitle } from '@shell/utils/title';
+import { getVendor } from '@shell/config/private-label';
+
+export default {
+  props: {
+    /**
+     * Include can be 'full', 'vendor-only' or false
+     *   'full': Show's the entire breadcrumb include vendor, product and cluster
+     *   'vendor-only': Show only the vendor name in the breadcrumb i.e. 'Rancher > "child"'
+     *   false: Don't include any part of the breadcrumb
+     */
+    breadcrumb: {
+      type:    [String, Boolean],
+      default: 'full',
+      validator(value) {
+        return ['full', 'vendor-only'].includes(value) || value === false;
+      }
+    },
+    includeVendor: {
+      type:    Boolean,
+      default: true
+    },
+    showChild: {
+      type:    Boolean,
+      default: true
+    }
+  },
+  computed: { ...mapGetters(['isExplorer', 'currentCluster', 'currentProduct']) },
+
+  methods: {
+    // This isn't a computed prop because it would trigger a recompute when the $slots changed
+    computeTitle() {
+      if (!this.$slots.default || this.$slots.default.length !== 1 || this.$slots.default[0].tag || (typeof this.$slots.default[0].text !== 'string')) {
+        console.error('The <TabTitle> component only supports text as the child.'); // eslint-disable-line no-console
+
+        return [];
+      }
+
+      const breadcrumb = [this.$slots.default[0].text.trim()];
+
+      if (this.breadcrumb === 'full') {
+        if (this.currentCluster && (this.isExplorer || this.currentCluster.isHarvester ) ) {
+          breadcrumb.unshift(this.currentCluster.nameDisplay);
+        } else if (this.currentProduct?.name) {
+          const productName = this.$store.getters['i18n/withFallback'](`product.${ this.currentProduct.name }`, null, null);
+
+          if (productName) {
+            breadcrumb.unshift(productName);
+          }
+        }
+      }
+
+      if (this.includeVendor && ['full', 'vendor-only'].includes(this.breadcrumb)) {
+        breadcrumb.unshift(getVendor());
+      }
+
+      return breadcrumb;
+    },
+    updatePageTitle() {
+      updatePageTitle(...this.computeTitle());
+    }
+  },
+
+  created() {
+    this.updatePageTitle();
+  },
+
+  // Using the render function instead of <template> because <template><slot /></template> will yield a compiler error since
+  // <slot /> is not allowed to be a root node of a <template> and I don't want to wrap the child to avoid affecting existing styling
+  render() {
+    if (this.$slots.default) {
+      this.$slots.default.forEach((e) => {
+        e.text = (e.text || '').trim();
+      });
+    }
+
+    this.updatePageTitle();
+
+    return this.showChild ? this.$slots.default : null;
+  }
+};
+</script>

package/components/Tabbed/index.vue

@@ -19,11 +19,6 @@ export default {
       default: false
     },
 
-    hideSingleTab: {
-      type:    Boolean,
-      default: false
-    },
-
     showTabsAddRemove: {
       type:    Boolean,
       default: false
@@ -91,11 +86,6 @@ export default {
     sortedTabs() {
       return sortBy(this.tabs, ['weight:desc', 'labelDisplay', 'name']);
     },
-
-    // hide tabs based on tab count IF flag is active
-    hideTabs() {
-      return this.hideSingleTab && this.sortedTabs.length === 1;
-    }
   },
 
   watch: {
@@ -235,13 +225,11 @@ export default {
 <template>
   <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
     <ul
-      v-if="!hideTabs"
       ref="tablist"
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
       tabindex="0"
-      data-testid="tabbed-block"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
       @keydown.down.prevent="selectNext(1)"

package/components/__tests__/ChartPsp.test.ts

@@ -0,0 +1,75 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import ChartPsp from '@shell/components/ChartPsp.vue';
+
+describe('component: ChartPsp', () => {
+  it.each([
+    true, false
+  ])('should render checkbox referencing value.global.cattle.psp.enabled as %p', (value) => {
+    const version = 'v1.24.11+rke2r1';
+    const wrapper = shallowMount(ChartPsp, {
+      propsData: {
+        value:   { global: { cattle: { psp: { enabled: value } } } },
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    expect(wrapper.findComponent({ name: 'Checkbox' }).props().value).toBe(value);
+  });
+
+  it.each([
+    ['v1.24.11+rke2r1'],
+  ])('should display the checkbox for cluster with k8s version %p', (version) => {
+    const wrapper = shallowMount(ChartPsp, {
+      propsData: {
+        value:   { global: { cattle: { psp: { enabled: false } } } },
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    const input = wrapper.find(`[data-testid="psp-checkbox"]`).element as HTMLInputElement;
+
+    expect(input).toBeDefined();
+  });
+
+  it.each([
+    ['v1.25.11+rke2r1'],
+  ])('should not display the checkbox for cluster with k8s version %p', (version) => {
+    const wrapper = shallowMount(ChartPsp, {
+      propsData: {
+        value:   { global: { cattle: { psp: { enabled: false } } } },
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    const input = wrapper.find(`[data-testid="psp-checkbox"]`).element as HTMLInputElement;
+
+    expect(input).toBeUndefined();
+  });
+
+  it('should update value.global.cattle.psp.enabled when checkbox is toggled', async() => {
+    const chartValues = { global: {} } as any;
+    const version = 'v1.24.11+rke2r1';
+    const wrapper = mount(ChartPsp, {
+      propsData: {
+        value:   chartValues,
+        cluster: { kubernetesVersion: version }
+      }
+    });
+
+    await wrapper.find('.checkbox-container').trigger('click');
+
+    expect(chartValues.global.cattle.psp.enabled).toBe(true);
+
+    await wrapper.find('.checkbox-container').trigger('click');
+    expect(chartValues.global.cattle.psp.enabled).toBe(false);
+  });
+
+  it.each([
+    { global: {} } as any,
+    { global: { cattle: {} } } as any,
+  ])('should define cattle.psp.enabled and set to false', (chartValues) => {
+    shallowMount(ChartPsp, { propsData: { value: chartValues } });
+
+    expect(chartValues.global.cattle.psp.enabled).toBe(false);
+  });
+});

package/components/__tests__/CopyCode.test.ts

@@ -1,13 +1,12 @@
 import { mount } from '@vue/test-utils';
 import CopyCode from '@shell/components/CopyCode.vue';
 
-jest.mock('@shell/utils/clipboard', () => {
-  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
-});
-
 describe('component: CopyCode', () => {
   it('should emit copied after click', async() => {
-    const wrapper = mount(CopyCode, { slots: { default: '<div></div>' } });
+    const wrapper = mount(CopyCode, {
+      mocks: { $copyText: () => new Promise(() => undefined) },
+      slots: { default: '<div></div>' }
+    });
 
     await wrapper.find('code').trigger('click');
 

package/components/fleet/FleetBundles.vue

@@ -37,8 +37,8 @@ export default {
 
   computed: {
 
-    allBundlesInRepo() {
-      // gitrepo model has getter for its bundles.
+    allBundles() {
+      // gitrepo model has getter for bundles.
       return this.value.bundles || [];
     },
 
@@ -65,7 +65,13 @@ export default {
     bundles() {
       const harvester = this.harvesterClusters;
 
-      return this.allBundlesInRepo.filter((bundle) => {
+      return this.allBundles.filter((bundle) => {
+        const isRepoBundle = bundle.metadata.name.startsWith(`${ this.value.metadata.name }-`);
+
+        if (!isRepoBundle) {
+          return false;
+        }
+
         const targets = bundle.spec?.targets || [];
 
         // Filter out any bundle that has one target whose cluster is a harvester cluster
@@ -78,7 +84,7 @@ export default {
     },
 
     hidden() {
-      return this.allBundlesInRepo.length - this.bundles.length;
+      return this.allBundles.length - this.bundles.length;
     },
 
     headers() {
@@ -99,6 +105,7 @@ export default {
       return out;
     },
   },
+
   methods: {
     displayWarning(row) {
       return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
@@ -106,7 +113,6 @@ export default {
   }
 };
 </script>
-
 <template>
   <div>
     <Loading v-if="$fetchState.pending" />

package/components/fleet/FleetRepos.vue

@@ -8,16 +8,8 @@ import {
   AGE,
   STATE,
   NAME,
-  FLEET_SUMMARY,
-  FLEET_REPO,
-  FLEET_REPO_TARGET,
-  FLEET_REPO_CLUSTERS_READY,
-  FLEET_REPO_CLUSTER_SUMMARY,
-  FLEET_REPO_PER_CLUSTER_STATE
-
+  FLEET_SUMMARY
 } from '@shell/config/table-headers';
-import { FLEET } from '@shell/config/labels-annotations';
-import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -27,11 +19,6 @@ export default {
     ResourceTable, Link, Shortened, FleetIntro
   },
   props: {
-    clusterId: {
-      type:     String,
-      required: false,
-      default:  null,
-    },
     rows: {
       type:     Array,
       required: true,
@@ -67,46 +54,35 @@ export default {
       });
     },
 
-    isClusterView() {
-      return !!this.clusterId;
-    },
-
     noRows() {
       return !this.filteredRows.length;
     },
 
     headers() {
-      // Cluster summary is only shown in the cluster view
-      const fleetClusterSummary = {
-        ...FLEET_REPO_CLUSTER_SUMMARY,
-        formatterOpts: {
-          // Fleet uses labels to identify clusters
-          clusterLabel: this.clusterId
-        },
-      };
-
-      // if hasPerClusterState then use the repo state
-      const fleetPerClusterState = {
-        ...FLEET_REPO_PER_CLUSTER_STATE,
-        value: (row) => {
-          const statePerCluster = row.clusterResourceStatus?.find((c) => {
-            return c.clusterLabel === this.clusterId;
-          });
-
-          return statePerCluster ? statePerCluster?.status?.displayStatus : STATES_ENUM.ACTIVE;
-        },
-      };
-
-      const summary = this.isClusterView ? [fleetClusterSummary] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
-
-      const state = this.isClusterView ? fleetPerClusterState : STATE;
-
       const out = [
-        state,
+        STATE,
         NAME,
-        FLEET_REPO,
-        FLEET_REPO_TARGET,
-        ...summary,
+        {
+          name:     'repo',
+          labelKey: 'tableHeaders.repo',
+          value:    'repoDisplay',
+          sort:     'repoDisplay',
+          search:   ['spec.repo', 'status.commit'],
+        },
+        {
+          name:     'target',
+          labelKey: 'tableHeaders.target',
+          value:    'targetInfo.modeDisplay',
+          sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
+        },
+        {
+          name:     'clustersReady',
+          labelKey: 'tableHeaders.clustersReady',
+          value:    'status.readyClusters',
+          sort:     'status.readyClusters',
+          search:   false,
+        },
+        FLEET_SUMMARY,
         AGE
       ];
 
@@ -116,12 +92,6 @@ export default {
   methods: {
     parseTargetMode(row) {
       return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.gitRepo.warningTooltip.clusterGroup') : this.t('fleet.gitRepo.warningTooltip.cluster');
-    },
-
-    clusterViewResourceStatus(row) {
-      return row.clusterResourceStatus.find((c) => {
-        return c.metadata?.labels[FLEET.CLUSTER_NAME] === this.clusterId;
-      });
     }
   },
 };
@@ -141,7 +111,7 @@ export default {
       key-field="_key"
       v-on="$listeners"
     >
-      <template #cell:repo="{ row }">
+      <template #cell:repo="{row}">
         <Link
           :row="row"
           :value="row.spec.repo"
@@ -149,7 +119,6 @@ export default {
           before-icon-key="repoIcon"
           url-key="spec.repo"
         />
-        {{ row.cluster }}
         <template v-if="row.commitDisplay">
           <div class="text-muted">
             <Shortened
@@ -161,10 +130,7 @@ export default {
         </template>
       </template>
 
-      <template
-        v-if="!isClusterView"
-        #cell:clustersReady="{ row }"
-      >
+      <template #cell:clustersReady="{row}">
         <span
           v-if="!row.clusterInfo"
           class="text-muted"
@@ -172,8 +138,7 @@ export default {
         <span
           v-else-if="row.clusterInfo.unready"
           class="text-warning"
-        >{{ row.clusterInfo.ready }}/{{
-          row.clusterInfo.total }}</span>
+        >{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
         <span
           v-else
           class="cluster-count-info"
@@ -187,7 +152,7 @@ export default {
         </span>
       </template>
 
-      <template #cell:target="{ row }">
+      <template #cell:target="{row}">
         {{ row.targetInfo.modeDisplay }}
       </template>
     </ResourceTable>

package/components/fleet/FleetResources.vue

@@ -11,12 +11,7 @@ export default {
     value: {
       type:     Object,
       required: true,
-    },
-    clusterId: {
-      type:     String,
-      required: false,
-      default:  null,
-    },
+    }
   },
 
   computed: {

package/components/fleet/FleetStatus.vue

@@ -1,7 +1,7 @@
 <script>
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
-import { stateSort, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { stateSort } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -50,8 +50,8 @@ export default {
   computed: {
     meta() {
       return {
-        total:      this.values.map((x) => x.value).reduce((a, b) => a + b, 0),
-        readyCount: this.values.filter((x) => x.status === STATES_ENUM.SUCCESS || x.status === STATES_ENUM.READY).map((x) => x.value).reduce((a, b) => a + b, 0)
+        total:      this.values.map((x) => x.value).reduce((a, b) => a + b),
+        readyCount: this.values.filter((x) => x.label === 'Success' || x.label === 'Ready').map((x) => x.value).reduce((a, b) => a + b)
       };
     },
 

package/components/fleet/FleetSummary.vue

@@ -1,56 +1,52 @@
 <script>
+import capitalize from 'lodash/capitalize';
 import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
 
 const getResourceDefaultState = (labelGetter, stateKey) => {
   return {
     ready: {
-      count:  0,
-      color:  STATES[STATES_ENUM.READY].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label ),
-      status: STATES_ENUM.READY
+      count: 0,
+      color: STATES[STATES_ENUM.READY].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label )
     },
     info: {
-      count:  0,
-      color:  STATES[STATES_ENUM.INFO].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label ),
-      status: STATES_ENUM.INFO
+      count: 0,
+      color: STATES[STATES_ENUM.INFO].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label )
     },
     warning: {
-      count:  0,
-      color:  STATES[STATES_ENUM.WARNING].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label ),
-      status: STATES_ENUM.WARNING
+      count: 0,
+      color: STATES[STATES_ENUM.WARNING].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label )
     },
     notready: {
-      count:  0,
-      color:  STATES[STATES_ENUM.NOT_READY].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label ),
-      status: STATES_ENUM.NOT_READY
+      count: 0,
+      color: STATES[STATES_ENUM.NOT_READY].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label )
     },
     error: {
-      count:  0,
-      color:  STATES[STATES_ENUM.ERROR].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label ),
-      status: STATES_ENUM.ERROR
+      count: 0,
+      color: STATES[STATES_ENUM.ERROR].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label )
+
     },
     errapplied: {
-      count:  0,
-      color:  STATES[STATES_ENUM.ERR_APPLIED].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label ),
-      status: STATES_ENUM.ERR_APPLIED,
+      count: 0,
+      color: STATES[STATES_ENUM.ERR_APPLIED].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label )
+
     },
     waitapplied: {
-      count:  0,
-      color:  STATES[STATES_ENUM.WAIT_APPLIED].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label ),
-      status: STATES_ENUM.WAIT_APPLIED
+      count: 0,
+      color: STATES[STATES_ENUM.WAIT_APPLIED].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label )
+
     },
     unknown: {
-      count:  0,
-      color:  STATES[STATES_ENUM.UNKNOWN].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label ),
-      status: STATES_ENUM.UNKNOWN
+      count: 0,
+      color: STATES[STATES_ENUM.UNKNOWN].color,
+      label: labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label )
     }
   };
 };
@@ -84,7 +80,7 @@ export default {
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.repoName === this.repoName);
+      const resources = this.bundles.filter((item) => item.metadata.name.startsWith(`${ this.repoName }-`));
 
       if (!resources.length) {
         return [];
@@ -178,6 +174,7 @@ export default {
 
   },
 
+  methods: { capitalize },
 };
 </script>
 
@@ -188,13 +185,11 @@ export default {
       title="Bundles"
       :values="bundleCounts"
       value-key="count"
-      data-testid="gitrepo-bundle-summary"
     />
     <FleetStatus
       title="Resources"
       :values="resourceCounts"
       value-key="count"
-      data-testid="gitrepo-deployment-summary"
     />
   </div>
 </template>

package/components/form/ArrayList.vue

@@ -56,6 +56,10 @@ export default {
       type:    Boolean,
       default: true,
     },
+    addDisabled: {
+      type:    Boolean,
+      default: false,
+    },
     removeLabel: {
       type: String,
       default() {
@@ -107,6 +111,9 @@ export default {
     showAdd() {
       return this.addAllowed;
     },
+    disableAdd() {
+      return this.addDisabled;
+    },
     showRemove() {
       return this.removeAllowed;
     },
@@ -338,7 +345,7 @@ export default {
         <button
           type="button"
           class="btn role-tertiary add"
-          :disabled="loading"
+          :disabled="loading || disableAdd"
           data-testid="array-list-button"
           @click="add()"
         >

package/components/form/ArrayListSelect.vue

@@ -24,10 +24,6 @@ export default {
     loading: {
       type:    Boolean,
       default: false
-    },
-    disabled: {
-      type:    Boolean,
-      default: true
     }
   },
   computed: {
@@ -37,18 +33,22 @@ export default {
     },
 
     addAllowed() {
-      return this.filteredOptions.length > 0;
+      return this.arrayListProps?.addAllowed || this.filteredOptions.length > 0;
     },
 
     defaultAddValue() {
       return this.options[0]?.value;
+    },
+
+    getOptionLabel() {
+      return this.selectProps?.getOptionLabel ? (opt) => (this.selectProps?.getOptionLabel(opt) || opt) : undefined;
     }
   },
 
   methods: {
     updateRow(index, value) {
       this.value.splice(index, 1, value);
-      this.$emit(value);
+      this.$emit('input', this.value);
     },
     calculateOptions(value) {
       const valueOption = this.options.find((o) => o.value === value);
@@ -71,7 +71,6 @@ export default {
     :add-allowed="addAllowed || loading"
     :loading="loading"
     :defaultAddValue="defaultAddValue"
-    :disabled="disabled"
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">
@@ -79,6 +78,7 @@ export default {
         :value="scope.row.value"
         v-bind="selectProps"
         :options="calculateOptions(scope.row.value)"
+        :get-option-label="getOptionLabel"
         @input="updateRow(scope.i, $event)"
       />
     </template>
@@ -87,6 +87,6 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep .unlabeled-select {
-    height: 61px;
-}
+  height: 61px;
+  }
 </style>

package/components/form/KeyValue.vue

@@ -343,7 +343,6 @@ export default {
 
         for ( const row of input ) {
           let value = row[this.valueName] || '';
-
           const decodedValue = base64Decode(row[this.valueName]);
           const asciiValue = asciiLike(decodedValue);
 

package/components/form/LabeledSelect.vue

@@ -88,10 +88,6 @@ export default {
       default: null,
       type:    [String, Object, Number, Array, Boolean]
     },
-    options: {
-      type:     Array,
-      required: true
-    },
     closeOnSelect: {
       type:    Boolean,
       default: true