@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/edit/secret/ssh.vue

@@ -1,6 +1,9 @@
 <script>
+import { useStore } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+import { useFormRules } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: { LabeledInput, FileSelector },
@@ -17,6 +20,28 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'ssh-publickey',
+          rules:          ['required'],
+          translationKey: 'secret.ssh.public',
+        },
+        {
+          path:           'ssh-privatekey',
+          rules:          ['required'],
+          translationKey: 'secret.ssh.private',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     const username = this.value.decodedData['ssh-publickey'] || '';
     const password = this.value.decodedData['ssh-privatekey'] || '';
@@ -60,10 +85,12 @@ export default {
         <LabeledInput
           v-model:value="username"
           type="multiline"
+          name="ssh-publickey"
           data-testid="ssh-public-key"
           :label="t('secret.ssh.public')"
           :mode="mode"
           required
+          :rules="getRules('ssh-publickey')"
           :placeholder="t('secret.ssh.publicPlaceholder')"
         />
         <FileSelector
@@ -76,10 +103,12 @@ export default {
         <LabeledInput
           v-model:value="password"
           type="multiline"
+          name="ssh-privatekey"
           data-testid="ssh-private-key"
           :label="t('secret.ssh.private')"
           :mode="mode"
           required
+          :rules="getRules('ssh-privatekey')"
           :placeholder="t('secret.ssh.privatePlaceholder')"
         />
         <FileSelector

package/edit/secret/tls.vue

@@ -1,7 +1,10 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
+import { useStore } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+import { useFormRules } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: { LabeledInput, FileSelector },
@@ -18,6 +21,28 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'tls.key',
+          rules:          ['required'],
+          translationKey: 'secret.certificate.privateKey',
+        },
+        {
+          path:           'tls.crt',
+          rules:          ['required'],
+          translationKey: 'secret.certificate.certificate',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     // do not show existing key when editing
     const originalKey = this.value.decodedData['tls.key'] || '';
@@ -63,9 +88,12 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="key"
+          name="tls.key"
+          required
           type="multiline"
           :label="t('secret.certificate.privateKey')"
           :mode="mode"
+          :rules="getRules('tls.key')"
           :placeholder="t('secret.certificate.privateKeyPlaceholder')"
         />
         <FileSelector
@@ -77,10 +105,12 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="crt"
+          name="tls.crt"
           required
           type="multiline"
           :label="t('secret.certificate.certificate')"
           :mode="mode"
+          :rules="getRules('tls.crt')"
           :placeholder="t('secret.certificate.certificatePlaceholder')"
         />
         <FileSelector

package/edit/service.vue

@@ -203,10 +203,9 @@ 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.currentCluster.provCluster;
     },
+
     errorMessages() {
       if (!this.serviceType) {
         return [];
@@ -273,8 +272,9 @@ export default {
         const hash = {};
 
         if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
-          hash.provClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+          hash.provClusters = this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
         }
+
         if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {
           hash.harvesterConfigs = this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG });
         }

package/edit/workload/Upgrading.vue

@@ -133,10 +133,10 @@ export default {
       } = this;
       let { maxSurge, maxUnavailable } = this;
 
-      if (this.surgeUnits === '%' && !maxSurge.includes('%')) {
+      if (this.surgeUnits === '%' && !`${ maxSurge }`.includes('%')) {
         maxSurge = `${ maxSurge }%`;
       }
-      if (this.unavailableUnits === '%' && !maxUnavailable.includes('%')) {
+      if (this.unavailableUnits === '%' && !`${ maxUnavailable }`.includes('%')) {
         maxUnavailable = `${ maxUnavailable }%`;
       }
 
@@ -204,7 +204,7 @@ export default {
       if (units === 'Pods') {
         this[target] = parseInt(value);
       } else {
-        this[target] = `${ value }%`;
+        this[target] = value;
       }
       if (target === 'maxSurge') {
         this.surgeUnits = units;

package/edit/workload/__tests__/Upgrading.test.ts

@@ -25,20 +25,17 @@ describe('component: Upgrading', () => {
     expect(wrapper.props('value')?.[key]).toBe(newValue);
   });
 
-  // TODO: #6179: Integrate test with component fix, as the scope is not to check the value of the input
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip.each([
-    ['surge', 'maxSurge', '%'],
-    ['unavailable', 'maxUnavailable', '%'],
-  ])('should set typed value in %p into %p and unit', (field, key, unit) => {
+  it.each([
+    ['maxSurge', '%'],
+    ['maxUnavailable', '%'],
+  ])('should set typed value in %p with %p unit', (key, unit) => {
     const wrapper = mount(Upgrading);
-    const input = wrapper.find(`[data-testid="input-policy-${ field }"]`).find('input');
     const newValue = 123;
     const expectation = `${ newValue }${ unit }`;
 
-    input.setValue(newValue);
-    input.trigger('blur');
+    wrapper.vm.updateWithUnits({ selected: unit, text: newValue }, key);
 
+    expect(wrapper.vm[key]).toBe(newValue);
     expect(wrapper.props('value')?.strategy.rollingUpdate[key]).toBe(expectation);
   });
 

package/edit/workload/mixins/workload.js

@@ -151,7 +151,8 @@ export default {
     const fetches = {};
 
     if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
-      fetches.rancherClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+      // I could only find one place where a prov cluster might be used by this and parent components - shell/components/form/WorkloadPorts.vue provisioningCluster
+      fetches.rancherCluster = this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
     }
 
     if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {

package/list/fleet.cattle.io.bundle.vue

@@ -1,19 +1,9 @@
 <script>
-import { FLEET } from '@shell/config/types';
-import { Banner } from '@components/Banner';
-import ResourceTable from '@shell/components/ResourceTable';
-import ResourceFetch from '@shell/mixins/resource-fetch';
-import {
-  AGE,
-  STATE,
-  NAME,
-} from '@shell/config/table-headers';
-import { isHarvesterCluster } from '@shell/utils/cluster';
+import FleetBundles from '@shell/components/fleet/FleetBundles';
 
 export default {
   name:       'ListBundle',
-  components: { Banner, ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { FleetBundles },
   props:      {
     resource: {
       type:     String,
@@ -28,100 +18,13 @@ export default {
       default: false
     }
   },
-
-  async fetch() {
-    await this.$fetchType(this.resource);
-    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
-      this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
-    }
-  },
-
-  data() {
-    return { allFleet: [] };
-  },
-
-  computed: {
-    harvesterClusters() {
-      const harvester = {};
-
-      this.allFleet.forEach((c) => {
-        if (isHarvesterCluster(c)) {
-          harvester[c.metadata.name] = c;
-        }
-      });
-
-      return harvester;
-    },
-
-    bundles() {
-      const harvester = this.harvesterClusters;
-
-      return this.rows.filter((bundle) => {
-        const targets = bundle.spec?.targets || [];
-
-        // Filter out any bundle that has one target whose cluster is a harvester cluster
-        if (targets.length === 1) {
-          return !harvester[targets[0].clusterName];
-        }
-
-        return true;
-      });
-    },
-
-    hidden() {
-      return this.rows.length - this.bundles.length;
-    },
-
-    headers() {
-      const out = [
-        STATE,
-        NAME,
-        {
-          name:     'deploymentsReady',
-          labelKey: 'tableHeaders.bundleDeploymentsReady',
-          value:    'status.display.readyClusters',
-          sort:     'status.display.readyClusters',
-          search:   ['status.summary.ready', 'status.summary.desiredReady'],
-        },
-        AGE
-      ];
-
-      return out;
-    },
-  },
-
-  // override with relevant info for the loading indicator since this doesn't use it's own masthead
-  $loadingResources() {
-    // results are filtered so we wouldn't get the correct count on indicator...
-    return { loadIndeterminate: true };
-  },
 };
 </script>
 
 <template>
-  <div>
-    <Banner
-      v-if="hidden"
-      color="info"
-      :label="t('fleet.bundles.harvester', {count: hidden} )"
-    />
-    <ResourceTable
-      :schema="schema"
-      :headers="headers"
-      :rows="bundles"
-      :loading="loading"
-      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-    >
-      <template #cell:deploymentsReady="{row}">
-        <span
-          v-if="row.status && row.status.summary && (row.status.summary.desiredReady !== row.status.summary.ready)"
-          class="text-warning"
-        >
-          {{ row.status.summary.ready || 0 }}/{{ row.status.summary.desiredReady }}</span>
-        <span v-else-if="row.status && row.status.summary">{{ row.status.summary.desiredReady }}</span>
-        <span v-else>-</span>
-      </template>
-    </ResourceTable>
-  </div>
+  <FleetBundles
+    :resource="resource"
+    :schema="schema"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+  />
 </template>

package/list/fleet.cattle.io.clusterregistrationtoken.vue

@@ -4,6 +4,8 @@ import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 export default {
   name:       'ListClusterGroup',
@@ -25,6 +27,16 @@ export default {
   },
 
   async fetch() {
+    try {
+      await checkSchemasForFindAllHash({
+        cluster: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER
+        },
+      }, this.$store);
+    } catch (e) {
+    }
+
     await this.$fetchType(this.resource);
     if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
       this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
@@ -35,6 +47,10 @@ export default {
     return { allFleet: [] };
   },
 
+  mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
+  },
+
   computed: {
     harvesterClusters() {
       const harvester = {};
@@ -50,6 +66,10 @@ export default {
     tokens() {
       const harvester = this.harvesterClusters;
 
+      if (this.areHarvesterHostsVisible) {
+        return this.rows;
+      }
+
       return this.rows.filter((token) => {
         const refs = token.metadata?.ownerReferences || [];
 

package/list/group.principal.vue

@@ -9,10 +9,11 @@ import { NAME } from '@shell/config/product/auth';
 import { MODE, _EDIT } from '@shell/config/query-params';
 import { mapState } from 'vuex';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
-    AsyncButton, ResourceTable, Masthead, Loading
+    AsyncButton, ResourceTable, Masthead, Loading, RcButton
   },
   props: {
     resource: {
@@ -130,13 +131,13 @@ export default {
           :class="{'mr-5': canCreateGlobalRoleBinding}"
           @click="refreshGroupMemberships"
         />
-        <router-link
+        <rc-button
           v-if="canCreateGlobalRoleBinding"
+          size="large"
           :to="assignLocation"
-          class="btn role-primary"
         >
           {{ t("authGroups.actions.assignRoles") }}
-        </router-link>
+        </rc-button>
       </template>
     </Masthead>
 

package/list/harvesterhci.io.management.cluster.vue

@@ -8,6 +8,7 @@ import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { CAPI, HCI, MANAGEMENT } from '@shell/config/types';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import { allHash } from '@shell/utils/promise';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
@@ -15,7 +16,8 @@ export default {
     ResourceTable,
     Masthead,
     TypeDescription,
-    Loading
+    Loading,
+    RcButton,
   },
 
   props: {
@@ -128,12 +130,12 @@ export default {
         v-if="canCreateCluster"
         slot="extraActions"
       >
-        <n-link
+        <rc-button
           :to="importLocation"
-          class="btn role-primary"
+          size="large"
         >
           {{ t('cluster.importAction') }}
-        </n-link>
+        </rc-button>
       </template>
     </Masthead>
 
@@ -166,12 +168,9 @@ export default {
       </template>
 
       <template #cell:harvester="{row}">
-        <n-link
-          class="btn btn-sm role-primary"
-          :to="row.detailLocation"
-        >
+        <rc-button :to="row.detailLocation">
           {{ t('harvesterManager.manage') }}
-        </n-link>
+        </rc-button>
       </template>
     </ResourceTable>
     <div v-else>

package/list/management.cattle.io.user.vue

@@ -7,6 +7,7 @@ import Masthead from '@shell/components/ResourceList/Masthead';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { isAdminUser } from '@shell/store/type-map';
 import TableDataUserIcon from '@shell/components/TableDataUserIcon';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
@@ -14,6 +15,7 @@ export default {
     ResourceTable,
     Masthead,
     TableDataUserIcon,
+    RcButton
   },
   mixins: [ResourceFetch],
   props:  {
@@ -128,14 +130,17 @@ export default {
         v-if="isAdmin"
         #subHeader
       >
-        <router-link
+        <rc-button
+          variant="link"
+          class="btn-user-retention"
           :to="{ name: 'c-cluster-auth-user.retention'}"
-          class="btn role-link btn-sm btn-user-retention"
           data-testid="router-link-user-retention"
         >
-          <i class="icon icon-gear" />
+          <template #before>
+            <i class="icon icon-gear" />
+          </template>
           {{ t('user.retention.button.label') }}
-        </router-link>
+        </rc-button>
       </template>
     </Masthead>
 
@@ -159,10 +164,8 @@ export default {
   </div>
 </template>
 
-<style lang="scss">
-  .btn-user-retention {
-    display: flex;
-    gap: 0.25rem;
-    padding: 0;
+<style lang="scss" scoped>
+  a.rc-button.variant-link.btn-user-retention {
+    padding: 0; //retain the padding override for left-alignment with the header
   }
 </style>