@rancher/shell 0.2.3 → 0.2.4

package/dialog/RollbackWorkloadDialog.vue

@@ -10,6 +10,8 @@ import { WORKLOAD_TYPES } from '@shell/config/types';
 import { diffFrom } from '@shell/utils/time';
 import { mapGetters } from 'vuex';
 import { ACTIVELY_REMOVE, NEVER_ADD } from '@shell/utils/create-yaml';
+import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { escapeHtml } from '@shell/utils/string';
 
 const HIDE = [
   'metadata.labels.pod-template-hash',
@@ -99,7 +101,13 @@ export default {
     },
     sanitizedSelectedRevision() {
       return this.sanitizeYaml(this.selectedRevision);
-    }
+    },
+    timeFormatStr() {
+      const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
+      const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
+
+      return `${ dateFormat }, ${ timeFormat }`;
+    },
   },
   fetch() {
     // Fetch revisions of the current workload
@@ -161,14 +169,18 @@ export default {
       const isCurrentRevision = revisionNumber === this.currentRevisionNumber;
       const now = day();
       const createdDate = day(revision.metadata.creationTimestamp);
-      const revisionAge = diffFrom(createdDate, now, this.t);
-      const units = this.t(revisionAge.unitsKey, { count: revisionAge.label });
+      const createdDateFormatted = createdDate.format(this.timeFormatStr);
+
+      const revisionAgeObject = diffFrom(createdDate, now, this.t);
+      const revisionAge = `${ createdDateFormatted }, ${ revisionAgeObject.label }`;
+      const units = this.t(revisionAgeObject.unitsKey, { count: revisionAgeObject.label });
       const currentLabel = this.t('promptRollback.currentLabel');
+
       const optionLabel = this.t('promptRollback.revisionOption', {
         revisionNumber,
-        revisionAge:    revisionAge.label,
+        revisionAge,
         units,
-        currentLabel:   isCurrentRevision ? currentLabel : ''
+        currentLabel: isCurrentRevision ? currentLabel : ''
       });
 
       return {
@@ -219,11 +231,21 @@ export default {
     class="prompt-rollback"
     :show-highlight-border="false"
   >
-    <h4 slot="title" class="text-default-text">
+    <h4
+      slot="title"
+      class="text-default-text"
+    >
       {{ t('promptRollback.modalTitle', { workloadName }, true) }}
     </h4>
-    <div slot="body" class="pl-10 pr-10 ">
-      <Banner v-if="revisions.length === 1" color="info" :label="t('promptRollback.singleRevisionBanner')" />
+    <div
+      slot="body"
+      class="pl-10 pr-10 "
+    >
+      <Banner
+        v-if="revisions.length === 1"
+        color="info"
+        :label="t('promptRollback.singleRevisionBanner')"
+      />
       <form>
         <LabeledSelect
           v-model="selectedRevision"
@@ -234,7 +256,13 @@ export default {
           :get-option-label="getOptionLabel"
         />
       </form>
-      <Banner v-for="(error, i) in errors" :key="i" class="" color="error" :label="error" />
+      <Banner
+        v-for="(error, i) in errors"
+        :key="i"
+        class=""
+        color="error"
+        :label="error"
+      />
       <YamlEditor
         v-if="selectedRevision && showDiff"
         :key="selectedRevisionId"
@@ -245,7 +273,10 @@ export default {
         :as-object="true"
       />
     </div>
-    <div slot="actions" class="buttons ">
+    <div
+      slot="actions"
+      class="buttons "
+    >
       <div class="left">
         <button
           :disabled="!selectedRevision"
@@ -256,7 +287,10 @@ export default {
         </button>
       </div>
       <div class="right">
-        <button class="btn role-secondary mr-10" @click="close">
+        <button
+          class="btn role-secondary mr-10"
+          @click="close"
+        >
           {{ t('generic.cancel') }}
         </button>
         <AsyncButton

package/dialog/RotateCertificatesDialog.vue

@@ -125,12 +125,22 @@ export default {
 </script>
 
 <template>
-  <Card class="prompt-rotate" :show-highlight-border="false" :style="{'height':'100%'}">
+  <Card
+    class="prompt-rotate"
+    :show-highlight-border="false"
+    :style="{'height':'100%'}"
+  >
     <template #title>
       <h3>{{ t('cluster.rotateCertificates.modalTitle') }}</h3>
     </template>
     <template #body>
-      <Banner v-for="(error, i) in errors" :key="i" class="" color="error" :label="error" />
+      <Banner
+        v-for="(error, i) in errors"
+        :key="i"
+        class=""
+        color="error"
+        :label="error"
+      />
       <div class="options">
         <RadioGroup
           v-model="rotateAllServices"
@@ -146,14 +156,29 @@ export default {
             }
           ]"
         />
-        <Select v-model="selectedService" :options="serviceOptions" class="service-select" :class="{'invisible': rotateAllServices}" />
+        <Select
+          v-model="selectedService"
+          :options="serviceOptions"
+          class="service-select"
+          :class="{'invisible': rotateAllServices}"
+        />
       </div>
     </template>
-    <div slot="actions" class="buttons">
-      <button class="btn role-secondary mr-20" @click="close">
+    <div
+      slot="actions"
+      class="buttons"
+    >
+      <button
+        class="btn role-secondary mr-20"
+        @click="close"
+      >
         {{ t('generic.cancel') }}
       </button>
-      <AsyncButton mode="rotate" :disabled="!rotateAllServices && !selectedService" @click="rotate" />
+      <AsyncButton
+        mode="rotate"
+        :disabled="!rotateAllServices && !selectedService"
+        @click="rotate"
+      />
     </div>
   </Card>
 </template>

package/dialog/RotateEncryptionKeyDialog.vue

@@ -122,22 +122,48 @@ export default {
 </script>
 
 <template>
-  <Card class="prompt-rotate" :show-highlight-border="false">
-    <h4 slot="title" class="text-default-text" v-html="t('promptRotateEncryptionKey.title')" />
-
-    <div slot="body" class="pl-10 pr-10">
-      <Banner color="warning" label-key="promptRotateEncryptionKey.warning" />
+  <Card
+    class="prompt-rotate"
+    :show-highlight-border="false"
+  >
+    <h4
+      slot="title"
+      class="text-default-text"
+      v-html="t('promptRotateEncryptionKey.title')"
+    />
+
+    <div
+      slot="body"
+      class="pl-10 pr-10"
+    >
+      <Banner
+        color="warning"
+        label-key="promptRotateEncryptionKey.warning"
+      />
 
       <div v-if="!$fetchState.pending">
-        <p v-if="latestBackup" class="pt-10 pb-10">
+        <p
+          v-if="latestBackup"
+          class="pt-10 pb-10"
+        >
           {{ t('promptRotateEncryptionKey.description', latestBackup, true) }}
         </p>
-        <Banner v-else color="error" label-key="promptRotateEncryptionKey.error" />
+        <Banner
+          v-else
+          color="error"
+          label-key="promptRotateEncryptionKey.error"
+        />
       </div>
     </div>
 
-    <div slot="actions" class="buttons">
-      <button class="btn role-secondary mr-10" @click="close">
+    <div
+      slot="actions"
+      class="buttons"
+    >
+      <button
+        class="btn role-secondary mr-10"
+        @click="close"
+      >
         {{ t('generic.cancel') }}
       </button>
 
@@ -147,7 +173,12 @@ export default {
         @click="apply"
       />
 
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </div>
   </Card>
 </template>

package/dialog/SaveAsRKETemplateDialog.vue

@@ -76,15 +76,28 @@ export default {
 </script>
 
 <template>
-  <Card class="prompt-restore" :show-highlight-border="false">
-    <h4 slot="title" class="text-default-text" v-html="t('promptSaveAsRKETemplate.title', { cluster: cluster.displayName }, true)" />
+  <Card
+    class="prompt-restore"
+    :show-highlight-border="false"
+  >
+    <h4
+      slot="title"
+      class="text-default-text"
+      v-html="t('promptSaveAsRKETemplate.title', { cluster: cluster.displayName }, true)"
+    />
 
-    <div slot="body" class="pl-10 pr-10">
+    <div
+      slot="body"
+      class="pl-10 pr-10"
+    >
       <form>
         <p class="pt-10 pb-10">
           {{ t('promptSaveAsRKETemplate.description') }}
         </p>
-        <Banner color="warning" label-key="promptSaveAsRKETemplate.warning" />
+        <Banner
+          color="warning"
+          label-key="promptSaveAsRKETemplate.warning"
+        />
 
         <LabeledInput
           ref="templateName"
@@ -95,8 +108,14 @@ export default {
       </form>
     </div>
 
-    <div slot="actions" class="buttons">
-      <button class="btn role-secondary mr-10" @click="close">
+    <div
+      slot="actions"
+      class="buttons"
+    >
+      <button
+        class="btn role-secondary mr-10"
+        @click="close"
+      >
         {{ t('generic.cancel') }}
       </button>
 
@@ -106,7 +125,12 @@ export default {
         @click="apply"
       />
 
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
+      <Banner
+        v-for="(err, i) in errors"
+        :key="i"
+        color="error"
+        :label="err"
+      />
     </div>
   </Card>
 </template>

package/dialog/ScaleMachineDownDialog.vue

@@ -96,7 +96,10 @@ export default {
 </script>
 
 <template>
-  <GenericPrompt :resources="[config]" @close="$emit('close')">
+  <GenericPrompt
+    :resources="[config]"
+    @close="$emit('close')"
+  >
     <template slot="body">
       <div class="pl-10 pr-10 mt-20 mb-20 body">
         <div v-if="allToDelete.length === 1">
@@ -105,9 +108,16 @@ export default {
         <div v-else>
           {{ t('promptScaleMachineDown.attemptingToRemove', { type, count: allToDelete.length }, true) }}
         </div>
-        <div v-if="ignored.length" class="retained-machine">
+        <div
+          v-if="ignored.length"
+          class="retained-machine"
+        >
           <span class="mb-20">{{ t('promptScaleMachineDown.retainedMachine1') }}</span>
-          <span v-for="i in ignored" :key="i.name" v-html="t('promptScaleMachineDown.retainedMachine2', { name: i.name }, true)"></span>
+          <span
+            v-for="i in ignored"
+            :key="i.name"
+            v-html="t('promptScaleMachineDown.retainedMachine2', { name: i.name }, true)"
+          />
         </div>
       </div>
     </template>

package/edit/__tests__/management.cattle.io.setting.test.ts

@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils';
+import Settings from '@shell/edit/management.cattle.io.setting.vue';
+import { SETTING } from '@shell/config/settings';
+
+describe('management.cattle.io.setting should', () => {
+  const requiredSetup = () => ({
+    // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
+    mocks:     {
+      $store: {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  jest.fn(),
+          'i18n/exists':             jest.fn(),
+        }
+      },
+      $route:  { query: { AS: '' } },
+      $router: { applyQuery: jest.fn() },
+    }
+  });
+
+  it('allowing to save if no rules in settings', () => {
+    const wrapper = mount(Settings, {
+      propsData: { value: { value: 'anything' } },
+      data:      () => ({ setting: { } }),
+      ...requiredSetup()
+    });
+    const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+    expect(saveButton.disabled).toBe(false);
+  });
+
+  describe('using predefined generic rule', () => {
+    const id = SETTING.CATTLE_PASSWORD_MIN_LENGTH;
+
+    describe('validate input with provided settings', () => {
+      it('allowing to save if pass', () => {
+        const wrapper = mount(Settings, {
+          propsData: { value: { id, value: '3' } },
+          ...requiredSetup()
+        });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+
+      // TODO: Test results incorrectly false, but it's not possible to identify the reason and required premises
+      // eslint-disable-next-line jest/no-disabled-tests
+      it.skip('preventing to save if any error', () => {
+        const wrapper = mount(Settings, {
+          propsData: { value: { id, value: '1' } },
+          ...requiredSetup()
+        });
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
+
+    it('retrieve correct rules based on settings', () => {
+      const wrapper = mount(Settings, {
+        propsData: { value: { id, value: '' } },
+        ...requiredSetup()
+      });
+      const expectation = [{
+        path:  'value',
+        rules: ['betweenValues']
+      }];
+
+      expect(wrapper.vm.$data['fvFormRuleSets']).toStrictEqual(expectation);
+    });
+
+    it('generate extra rules based on settings', () => {
+      const wrapper = mount(Settings, {
+        propsData: { value: { id, value: '' } },
+        ...requiredSetup()
+      });
+      const expectation = ['betweenValues'];
+
+      // Avoid integration tests with mixin as it returns the whole function
+      const rules = Object.keys((wrapper.vm as any)['fvExtraRules']);
+
+      expect(rules).toStrictEqual(expectation);
+    });
+  });
+});

package/edit/auth/azuread.vue

@@ -267,7 +267,11 @@ export default {
       @cancel="cancel"
     >
       <template v-if="model.enabled && !isEnabling && !editConfig">
-        <AuthBanner :t-args="tArgs" :disable="disable" :edit="goToEdit">
+        <AuthBanner
+          :t-args="tArgs"
+          :disable="disable"
+          :edit="goToEdit"
+        >
           <template slot="rows">
             <tr>
               <td>{{ t(`authConfig.azuread.tenantId`) }}:</td>
@@ -294,7 +298,10 @@ export default {
               <td>{{ model.authEndpoint }}</td>
             </tr>
           </template>
-          <template v-if="needsUpdate" slot="actions">
+          <template
+            v-if="needsUpdate"
+            slot="actions"
+          >
             <button
               type="button"
               class="btn btn-sm role-secondary mr-10 update"
@@ -305,7 +312,7 @@ export default {
           </template>
         </AuthBanner>
 
-        <hr />
+        <hr>
 
         <AllowedPrincipals
           provider="azuread"
@@ -321,11 +328,18 @@ export default {
           color="warning"
         />
 
-        <InfoBox v-if="!model.enabled" id="reply-info" class="mt-20 mb-20 p-10">
+        <InfoBox
+          v-if="!model.enabled"
+          id="reply-info"
+          class="mt-20 mb-20 p-10"
+        >
           {{ t('authConfig.azuread.reply.info') }}
-          <br />
+          <br>
           <label class="reply-url">{{ t('authConfig.azuread.reply.label') }} </label>
-          <CopyToClipboardText :plain="true" :text="replyUrl" />
+          <CopyToClipboardText
+            :plain="true"
+            :text="replyUrl"
+          />
         </InfoBox>
 
         <div class="row mb-20">

package/edit/auth/github.vue

@@ -132,20 +132,32 @@ export default {
       @cancel="cancel"
     >
       <template v-if="model.enabled && !isEnabling && !editConfig">
-        <AuthBanner :t-args="tArgs" :disable="disable" :edit="goToEdit">
+        <AuthBanner
+          :t-args="tArgs"
+          :disable="disable"
+          :edit="goToEdit"
+        >
           <template slot="rows">
             <tr><td>{{ t(`authConfig.${ NAME }.table.server`) }}: </td><td>{{ baseUrl }}</td></tr>
             <tr><td>{{ t(`authConfig.${ NAME }.table.clientId`) }}: </td><td>{{ value.clientId }}</td></tr>
           </template>
         </AuthBanner>
 
-        <hr />
+        <hr>
 
-        <AllowedPrincipals provider="github" :auth-config="model" :mode="mode" />
+        <AllowedPrincipals
+          provider="github"
+          :auth-config="model"
+          :mode="mode"
+        />
       </template>
 
       <template v-else>
-        <Banner v-if="!model.enabled" :label="t('authConfig.stateBanner.disabled', tArgs)" color="warning" />
+        <Banner
+          v-if="!model.enabled"
+          :label="t('authConfig.stateBanner.disabled', tArgs)"
+          color="warning"
+        />
 
         <h3 v-t="`authConfig.${NAME}.target.label`" />
         <RadioGroup
@@ -170,27 +182,50 @@ export default {
           </div>
         </div>
 
-        <InfoBox :step="1" class="step-box">
+        <InfoBox
+          :step="1"
+          class="step-box"
+        >
           <ul class="step-list">
             <li v-html="t(`authConfig.${NAME}.form.prefix.1`, tArgs, true)" />
             <li v-html="t(`authConfig.${NAME}.form.prefix.2`, tArgs, true)" />
             <li v-html="t(`authConfig.${NAME}.form.prefix.3`, tArgs, true)" />
           </ul>
         </InfoBox>
-        <InfoBox :step="2" class="step-box">
+        <InfoBox
+          :step="2"
+          class="step-box"
+        >
           <ul class="step-list">
             <li>
               {{ t(`authConfig.${NAME}.form.instruction`, tArgs, true) }}
               <ul class="mt-10">
                 <li><b>{{ t(`authConfig.${NAME}.form.app.label`) }}</b>: <span v-html="t(`authConfig.${NAME}.form.app.value`, tArgs, true)" /></li>
-                <li><b>{{ t(`authConfig.${NAME}.form.homepage.label`) }}</b>: {{ serverUrl }} <CopyToClipboard label-as="tooltip" :text="serverUrl" class="icon-btn" action-color="bg-transparent" /></li>
+                <li>
+                  <b>{{ t(`authConfig.${NAME}.form.homepage.label`) }}</b>: {{ serverUrl }} <CopyToClipboard
+                    label-as="tooltip"
+                    :text="serverUrl"
+                    class="icon-btn"
+                    action-color="bg-transparent"
+                  />
+                </li>
                 <li><b>{{ t(`authConfig.${NAME}.form.description.label`) }}</b>: <span v-html="t(`authConfig.${NAME}.form.description.value`, tArgs, true)" /></li>
-                <li><b>{{ t(`authConfig.${NAME}.form.callback.label`) }}</b>: {{ serverUrl }} <CopyToClipboard :text="serverUrl" label-as="tooltip" class="icon-btn" action-color="bg-transparent" /></li>
+                <li>
+                  <b>{{ t(`authConfig.${NAME}.form.callback.label`) }}</b>: {{ serverUrl }} <CopyToClipboard
+                    :text="serverUrl"
+                    label-as="tooltip"
+                    class="icon-btn"
+                    action-color="bg-transparent"
+                  />
+                </li>
               </ul>
             </li>
           </ul>
         </InfoBox>
-        <InfoBox :step="3" class="mb-20">
+        <InfoBox
+          :step="3"
+          class="mb-20"
+        >
           <ul class="step-list">
             <li v-html="t(`authConfig.${NAME}.form.suffix.1`, tArgs, true)" />
             <li v-html="t(`authConfig.${NAME}.form.suffix.2`, tArgs, true)" />
@@ -214,9 +249,15 @@ export default {
             />
           </div>
         </div>
-        <div v-if="!model.enabled" class="row">
+        <div
+          v-if="!model.enabled"
+          class="row"
+        >
           <div class="col span-12">
-            <Banner color="info" v-html="t('authConfig.associatedWarning', tArgs, true)" />
+            <Banner
+              color="info"
+              v-html="t('authConfig.associatedWarning', tArgs, true)"
+            />
           </div>
         </div>
       </template>