@rancher/shell 3.0.2-rc.5 → 3.0.2

package/edit/resources.cattle.io.backup.vue

@@ -11,7 +11,7 @@ import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Loading from '@shell/components/Loading';
 import S3 from '@shell/chart/rancher-backup/S3';
 import { mapGetters } from 'vuex';
-import { SECRET, BACKUP_RESTORE, CATALOG } from '@shell/config/types';
+import { SECRET, BACKUP_RESTORE, CATALOG, COUNT } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { NAMESPACE, _VIEW, _CREATE } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
@@ -20,6 +20,10 @@ import { formatEncryptionSecretNames } from '@shell/utils/formatter';
 import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { SECRET_TYPES } from '@shell/config/secret';
 
+const DEFAULT_RANCHER_BACKUP_RESOURCE_SET_ID = 'rancher-resource-set-basic';
+const FULL_RANCHER_BACKUP_RESOURCE_SET_ID = 'rancher-resource-set-full';
+const CUSTOM_RESOURCE_SET_ID = 'custom';
+
 export default {
 
   components: {
@@ -50,18 +54,38 @@ export default {
 
   async fetch() {
     const hash = await allHash({
-      catalog:     this.$store.dispatch('catalog/load'),
-      resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
-      apps:        this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
+      catalog:         this.$store.dispatch('catalog/load'),
+      allResourceSets: this.$store.dispatch('cluster/findAll', { type: BACKUP_RESTORE.RESOURCE_SET }),
+      apps:            this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
     });
 
     this.apps = hash.apps;
-    this.resourceSet = hash.resourceSet;
+    this.allResourceSets = hash.allResourceSets;
 
     const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
 
     this.chartNamespace = BRORelease?.spec.namespace || '';
 
+    if (!this.value.spec.resourceSetName) {
+      this.value.spec.resourceSetName = this.defaultExistingResourceSetOptionIds[0] || this.allResourceSets[0].id;
+    }
+
+    const computeResourceSetSelection = () => {
+      if (!this.value?.spec?.resourceSetName) {
+        const defaults = this.defaultExistingResourceSetOptionIds;
+
+        if (defaults.length > 0) {
+          return defaults[0];
+        }
+
+        return this.allResourceSets[0].id;
+      }
+
+      return this.defaultResourceSetOptionIds.includes(this.value?.spec?.resourceSetName) ? this.value?.spec?.resourceSetName : CUSTOM_RESOURCE_SET_ID;
+    };
+
+    this.resourceSetSelection = computeResourceSetSelection();
+
     if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
       const findPageArgs = { // Of type ActionFindPageArgs
         namespaced: this.chartNamespace,
@@ -105,17 +129,25 @@ export default {
       s3 = this.value.spec.storageLocation.s3;
     }
 
+    const counts = this.$store.getters[`cluster/all`](COUNT);
+    const defaultResourceSetOptionIds = [DEFAULT_RANCHER_BACKUP_RESOURCE_SET_ID, FULL_RANCHER_BACKUP_RESOURCE_SET_ID];
+
     return {
-      secrets:        [],
-      resourceSet:    null,
+      secrets:              [],
+      resourceSetCounts:    counts?.[0]?.counts?.[BACKUP_RESTORE.RESOURCE_SET]?.summary?.count,
+      defaultResourceSetOptionIds,
+      allResourceSets:      [],
+      resourceSetSelection: null,
       s3,
       storageSource,
       useEncryption,
-      apps:           [],
+      apps:                 [],
       setSchedule,
-      name:           this.value?.metadata?.name,
-      fvFormRuleSets: [{
-        path: 'metadata.name', rules: ['dnsLabel', 'noUpperCase'], translationKey: 'nameNsDescription.name.label'
+      name:                 this.value?.metadata?.name,
+      fvFormRuleSets:       [{
+        path:           'metadata.name',
+        rules:          ['dnsLabel', 'noUpperCase'],
+        translationKey: 'nameNsDescription.name.label'
       }],
       chartNamespace: null,
     };
@@ -144,6 +176,48 @@ export default {
       return { options, labels };
     },
 
+    defaultExistingResourceSetOptionIds() {
+      return this.defaultResourceSetOptionIds.filter((id) => {
+        return this.allResourceSetIds.includes(id);
+      });
+    },
+
+    resourceSetOptions() {
+      const optionIds = [...this.defaultExistingResourceSetOptionIds];
+      const addCustom = !optionIds.includes(this.value.spec?.resourceSetName) || this.allResourceSetIds.length > optionIds.length;
+
+      if (addCustom) {
+        optionIds.push(CUSTOM_RESOURCE_SET_ID);
+      }
+
+      return optionIds.map((id) => {
+        return {
+          label: this.t(`backupRestoreOperator.backup.resourceSetOptions.${ id }`),
+          value: id
+        };
+      });
+    },
+
+    allResourceSetIds() {
+      return this.allResourceSets.map((rs) => rs.id);
+    },
+
+    customResourceSetOptions() {
+      return this.allResourceSetIds.filter((id) => !this.defaultResourceSetOptionIds.includes(id));
+    },
+
+    showCustomResourceSetOptions() {
+      return this.resourceSetSelection === CUSTOM_RESOURCE_SET_ID;
+    },
+
+    showEncryptionWarningBanner() {
+      return this.resourceSetSelection === 'rancher-resource-set-full';
+    },
+
+    showMissingResourceSetWarningBanner() {
+      return !this.allResourceSetIds.includes(this.value.spec.resourceSetName);
+    },
+
     namespaces() {
       const choices = this.$store.getters['cluster/all'](NAMESPACE);
       const out = sortBy(choices.map((obj) => {
@@ -172,9 +246,16 @@ export default {
       }
     },
 
-    resourceSet(neu) {
-      if (neu?.metadata?.name) {
-        this.value.spec['resourceSetName'] = neu?.metadata?.name;
+    resourceSetSelection(neu, old) {
+      // We don't want to handle this when this gets triggered in fetch
+      if (!old) {
+        return;
+      }
+
+      if (neu === CUSTOM_RESOURCE_SET_ID) {
+        this.value.spec.resourceSetName = this.customResourceSetOptions[0];
+      } else {
+        this.value.spec.resourceSetName = neu;
       }
     },
 
@@ -212,7 +293,7 @@ export default {
       :rules="{name: fvGetAndReportPathRules('metadata.name')}"
       @change="name=value.metadata.name"
     />
-    <template v-if="!!resourceSet">
+    <template v-if="resourceSetCounts > 0">
       <div class="bordered-section">
         <RadioGroup
           v-model:value="setSchedule"
@@ -245,6 +326,60 @@ export default {
           </div>
         </div>
       </div>
+      <div class="bordered-section">
+        <div class="row mb-10">
+          <div class="col span-12">
+            <h3>{{ t('backupRestoreOperator.backup.label') }}</h3>
+            <div>{{ t('backupRestoreOperator.backup.description') }}</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col span-12">
+            <RadioGroup
+              v-model:value="resourceSetSelection"
+              name="resourceSet"
+              :options="resourceSetOptions"
+              :mode="mode"
+            />
+          </div>
+        </div>
+        <div
+          v-if="showCustomResourceSetOptions"
+          class="row mt-10"
+        >
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="value.spec.resourceSetName"
+              :mode="mode"
+              :options="customResourceSetOptions"
+              :label="t('backupRestoreOperator.backup.resourceSetOptions.customResourceSetLabel')"
+            />
+          </div>
+        </div>
+        <div
+          v-if="showEncryptionWarningBanner"
+          class="row mt-10"
+        >
+          <div class="col span-12">
+            <Banner
+              color="warning"
+              role="alert"
+            >
+              <span v-clean-html="t('backupRestoreOperator.backup.enableEncryptionWarning')" />
+            </Banner>
+          </div>
+        </div>
+        <div
+          v-if="showMissingResourceSetWarningBanner"
+          class="row mt-10"
+        >
+          <div class="col span-12">
+            <Banner color="warning">
+              <span v-clean-html="t('backupRestoreOperator.backup.missingResourceSetWarning', {resourceSet: value.spec.resourceSetName})" />
+            </Banner>
+          </div>
+        </div>
+      </div>
 
       <div class="bordered-section">
         <div class="row">

package/edit/secret/__tests__/ssh.test.ts

@@ -0,0 +1,79 @@
+import { mount } from '@vue/test-utils';
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
+import Ssh from '@shell/edit/secret/ssh.vue';
+
+const mockedStore = () => {
+  return { getters: { 'i18n/t': jest.fn() } };
+};
+
+const mockedRoute = { query: {} };
+
+const requiredSetup = () => {
+  return {
+    global: {
+      mocks: {
+        $store:      mockedStore(),
+        $route:      mockedRoute,
+        $fetchState: {},
+      }
+    }
+  };
+};
+
+const decodedData = {
+  known_hosts:      'S05PV05fSE9TVFM=',
+  'ssh-privatekey': 'dGVzdDE=',
+  'ssh-publickey':  'dGVzdDE='
+};
+
+describe.each([
+  _CREATE,
+  _EDIT,
+  _VIEW
+])('component: Ssh.vue', (mode) => {
+  it(`mode: ${ mode }, should show input fields`, () => {
+    const wrapper = mount(Ssh, {
+      ...requiredSetup(),
+      props: {
+        value: {
+          name:                  'foo',
+          decodedData,
+          supportsSshKnownHosts: true
+        },
+        mode,
+      },
+    });
+
+    const publicKey = wrapper.find('[data-testid="ssh-public-key"]').element as HTMLInputElement;
+    const privateKey = wrapper.find('[data-testid="ssh-private-key"]').element as HTMLInputElement;
+    const knownHosts = wrapper.find('[data-testid="ssh-known-hosts"]').element as HTMLInputElement;
+
+    expect(publicKey.value).toBe('dGVzdDE=');
+    expect(privateKey.value).toBe('dGVzdDE=');
+    expect(knownHosts.value).toBe('S05PV05fSE9TVFM=');
+  });
+
+  it.each([
+    ['show', true],
+    ['hide', false],
+  ])(`mode: ${ mode }, should %p known_hosts`, (
+    _,
+    supportsSshKnownHosts,
+  ) => {
+    const wrapper = mount(Ssh, {
+      ...requiredSetup(),
+      props: {
+        value: {
+          name: 'foo',
+          decodedData,
+          supportsSshKnownHosts
+        },
+        mode: _EDIT,
+      },
+    });
+
+    const knownHosts = wrapper.find('[data-testid="ssh-known-hosts"]');
+
+    expect(knownHosts.exists()).toBe(supportsSshKnownHosts);
+  });
+});

package/edit/secret/ssh.vue

@@ -44,7 +44,10 @@ export default {
     update() {
       this.value.setData('ssh-publickey', this.username);
       this.value.setData('ssh-privatekey', this.password);
-      this.value.setData('known_hosts', this.knownHosts);
+
+      if (this.showKnownHosts) {
+        this.value.setData('known_hosts', this.knownHosts);
+      }
     }
   }
 };
@@ -57,6 +60,7 @@ export default {
         <LabeledInput
           v-model:value="username"
           type="multiline"
+          data-testid="ssh-public-key"
           :label="t('secret.ssh.public')"
           :mode="mode"
           required
@@ -72,6 +76,7 @@ export default {
         <LabeledInput
           v-model:value="password"
           type="multiline"
+          data-testid="ssh-private-key"
           :label="t('secret.ssh.private')"
           :mode="mode"
           required
@@ -90,6 +95,7 @@ export default {
           v-if="showKnownHosts"
           v-model:value="knownHosts"
           type="multiline"
+          data-testid="ssh-known-hosts"
           :label="t('secret.ssh.knownHosts')"
           :mode="mode"
           :placeholder="t('secret.ssh.knownHostsPlaceholder')"

package/edit/service.vue

@@ -521,9 +521,6 @@ export default {
               "
               :label="t('servicesPage.affinity.timeout.label')"
               :placeholder="t('servicesPage.affinity.timeout.placeholder')"
-              @input="
-                (e) => value.spec.sessionAffinityConfig.clientIP.timeoutSeconds = e
-              "
             />
           </div>
         </div>

package/edit/workload/Job.vue

@@ -161,7 +161,7 @@ export default {
           :suffix="t('suffix.times', {count: completions})"
           label-key="workload.job.completions.label"
           tooltip-key="workload.job.completions.tip"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -174,7 +174,7 @@ export default {
           :suffix="t('suffix.times', {count: parallelism})"
           label-key="workload.job.parallelism.label"
           tooltip-key="workload.job.parallelism.tip"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -189,7 +189,7 @@ export default {
           :suffix="t('suffix.times', {count: backoffLimit})"
           label-key="workload.job.backoffLimit.label"
           tooltip-key="workload.job.backoffLimit.tip"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -202,7 +202,7 @@ export default {
           :suffix="t('suffix.seconds', {count: activeDeadlineSeconds})"
           label-key="workload.job.activeDeadlineSeconds.label"
           tooltip-key="workload.job.activeDeadlineSeconds.tip"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
@@ -245,7 +245,7 @@ export default {
             :suffix="t('suffix.seconds', {count: startingDeadlineSeconds})"
             label-key="workload.job.startingDeadlineSeconds.label"
             tooltip-key="workload.job.startingDeadlineSeconds.tip"
-            @input="update"
+            @update:value="update"
           />
         </div>
         <div
@@ -254,10 +254,10 @@ export default {
         >
           <UnitInput
             v-model:value="terminationGracePeriodSeconds"
-            :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
+            :suffix="t('suffix.seconds', { count: terminationGracePeriodSeconds })"
             :label="t('workload.upgrading.activeDeadlineSeconds.label')"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           >
             <template #label>
               <label
@@ -316,7 +316,7 @@ export default {
       >
         <UnitInput
           v-model:value="terminationGracePeriodSeconds"
-          :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
+          :suffix="t('suffix.seconds', { count: terminationGracePeriodSeconds })"
           :label="t('workload.upgrading.activeDeadlineSeconds.label')"
           :mode="mode"
         >

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

@@ -64,7 +64,6 @@ describe('component: Job', () => {
       const newValue = 123;
 
       input.setValue(newValue);
-      input.trigger('blur');
 
       expect(wrapper.emitted('update:value')).toHaveLength(1);
     });

package/edit/workload/index.vue

@@ -262,8 +262,10 @@ export default {
                 <h3>
                   {{ t('workload.container.ports.expose') }}
                   <i
-                    v-clean-tooltip="t('workload.container.ports.toolTip')"
+                    v-clean-tooltip="{content: t('workload.container.ports.toolTip'), triggers: ['hover', 'touch', 'focus'] }"
+                    v-stripped-aria-label="t('workload.container.ports.toolTip')"
                     class="icon icon-info"
+                    tabindex="0"
                   />
                 </h3>
                 <p class="padded">

package/initialize/install-directives.js

@@ -10,6 +10,7 @@ import cleanTooltipDirective from '@shell/directives/clean-tooltip';
 import positiveIntNumberDirective from '@shell/directives/positive-int-number.js';
 import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
 import intNumberDirective from '@shell/directives/int-number';
+import htmlStrippedAriaLabelDirective from '@shell/directives/strip-html-aria-label';
 
 /**
  * Prevent extensions from overriding existing directives
@@ -47,6 +48,7 @@ function addDirectives(vueApp) {
   vueApp.directive('focus', focusDirective);
   vueApp.directive('intNumber', intNumberDirective);
   vueApp.directive('positiveIntNumber', positiveIntNumberDirective);
+  vueApp.directive('stripped-aria-label', htmlStrippedAriaLabelDirective);
 }
 
 /**

package/initialize/install-plugins.js

@@ -35,7 +35,12 @@ export async function installPlugins(vueApp) {
   vueApp.use(PortalVue);
   vueApp.use(Vue3Resize);
   vueApp.use(FloatingVue, floatingVueOptions);
-  vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
+  vueApp.use(
+    ShortKey,
+    {
+      prevent:          ['input', 'textarea', 'select'],
+      preventContainer: ['#modal-container-element']
+    });
   vueApp.use(InstallCodeMirror);
   vueApp.component('v-select', vSelect);
 }

package/list/catalog.cattle.io.app.vue

@@ -1,5 +1,6 @@
 <script>
 import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
+import { APP_UPGRADE_STATUS } from '@shell/store/catalog';
 
 export default {
   name:       'ListApps',
@@ -21,6 +22,10 @@ export default {
     }
   },
 
+  data() {
+    return { APP_UPGRADE_STATUS };
+  },
+
   async fetch() {
     await this.$store.dispatch('catalog/load');
   },
@@ -36,18 +41,30 @@ export default {
   >
     <template #cell:upgrade="{row}">
       <span
-        v-if="row.upgradeAvailable"
+        v-if="row.upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE"
         class="badge-state bg-warning hand"
-        @click="row.goToUpgrade(row.upgradeAvailable)"
+        @click="row.goToUpgrade(row.upgradeAvailableVersion)"
       >
-        {{ row.upgradeAvailable }}
+        {{ row.upgradeAvailableVersion }}
         <i class="icon icon-upload" />
       </span>
       <span
-        v-else-if="row.upgradeAvailable === false"
+        v-else-if="row.upgradeAvailable === APP_UPGRADE_STATUS.NOT_APPLICABLE"
         v-t="'catalog.app.managed'"
         class="text-muted"
       />
+      <span
+        v-else-if="row.upgradeAvailable === APP_UPGRADE_STATUS.NO_UPGRADE"
+        class="text-muted"
+      />
+      <span
+        v-else-if="row.upgradeAvailable === APP_UPGRADE_STATUS.MULTIPLE_UPGRADES"
+      >
+        <i
+          v-clean-tooltip="t('catalog.app.upgrade.uncertainUpgradeWarningTooltip')"
+          class="icon icon-info"
+        />
+      </span>
     </template>
   </PaginatedResourceTable>
 </template>

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

@@ -118,7 +118,7 @@ export default {
           v-if="row.status && row.status.summary && (row.status.summary.desiredReady !== row.status.summary.ready)"
           class="text-warning"
         >
-          {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
+          {{ 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>