@rancher/shell 0.3.20 → 0.3.22

package/assets/translations/en-us.yaml

@@ -2291,6 +2291,7 @@ gatekeeperIndex:
   poweredBy: OPA Gatekeeper
   unavailable: OPA + Gatekeeper is not available in the system-charts catalog.
   violations: Violations
+  deprecated: The OPA Gatekeeper chart is deprecated as of Rancher 2.8 and will be removed in a future release. Please consider switching to <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.kubewarden.io">Kubewarden</a>.
 
 gatekeeperInstall:
   auditInterval: Auto Interval
@@ -2357,6 +2358,9 @@ growl:
   podSecurity:
     message: "The creation of this Pod would violate existing restricted policies for the adopted Namespace"
     title: PodSecurity violation
+  kubeApiHeaderWarning:
+    titleCreate: "{resourceType} Creation Warning"
+    titleUpdate: "{resourceType} Update Warning"
 
 hpa:
   detail:
@@ -3041,7 +3045,7 @@ login:
     noResponse: "No response received"
   error: An error occurred logging in. Please try again.
   clientError: Invalid username or password. Please try again.
-  specificError: 'An error occured logging in: {msg}'
+  specificError: 'An error occurred logging in: {msg}'
   useLocal: Use a local user
   loginWithProvider: Log in with {provider}
   username: Username
@@ -3442,7 +3446,7 @@ namespace:
   workloads: Workloads
   label: Namespace
   selectNamespace: Select Namespace
-  createNamespace: Create a New Namespace
+  createNamespace: Create a new Namespace
   selectOrCreate: Select or Create a Namespace
   resourceStates:
       success: 'Active'
@@ -5634,6 +5638,8 @@ validation:
     logdna:
       apiKey: Required an "Api Key" to be set.
   invalidCron: Invalid cron schedule
+  invalidCidr: "Invalid CIDR"
+  invalidIP: "Invalid IP"
   k8s:
     name: Must consist of lower case alphanumeric characters or '-', and must start and end with an alphanumeric character (e.g. 'my-name', or '123-abc').
     identifier:

package/assets/translations/zh-hans.yaml

@@ -3051,6 +3051,7 @@ login:
     noResponse: "没有收到响应。"
   error: 登录时发生错误，请重试。
   clientError: 无效的用户名或密码，请重试。
+  specificError: '登录时发生错误：{msg}'
   useLocal: 使用本地账号登录
   loginWithProvider: 使用 {provider} 登录
   username: 用户名
@@ -3525,8 +3526,11 @@ navLink:
         label: 链接标签
       description:
         label: 链接描述
+    groupImage:
+      label: 组图片
       iconSrc:
-        label: 添加镜像
+        tip: '图片的高度应为 21 像素，最大宽度为 200 像素。最大文件大小为 20KB。支持的格式：JPEG、PNG、SVG。'
+        label: 添加图片
 networkpolicy:
   egress:
     label: Egress 规则
@@ -5640,6 +5644,8 @@ validation:
     logdna:
       apiKey: 需要设置“API 密钥”。
   invalidCron: 无效的 cron 调度
+  invalidCidr: "无效的 CIDR"
+  invalidIP: "无效的 IP"
   k8s:
     name: 必须由小写字母数字或“-”组成，并且开头和结尾必须是字母数字（例如“my-name”或“123-abc”）。
     identifier:
@@ -5776,6 +5782,7 @@ wm:
   containerShell:
     clear: 清除
     containerName: "容器：{label}"
+    failed: "无法打开容器 shell（所有 shell 命令均未成功）\n\r"
   kubectlShell:
     title: "Kubectl: {name}"
 

package/cloud-credential/__tests__/azure.test.ts

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import AzureCloudCreds from '@shell/cloud-credential/azure.vue';
+
+const mockStore = {
+  getters:  { 'i18n/t': jest.fn() },
+  dispatch: () => jest.fn()
+};
+
+describe('cloud credentials: Azure', () => {
+  const wrapper = mount(AzureCloudCreds, {
+    propsData: {
+      value: {
+        decodedData: {
+          environment:    '',
+          subscriptionId: '',
+          clientId:       '',
+          clientSecret:   '',
+        },
+        setData: jest.fn()
+      }
+    },
+    mocks: { $store: mockStore }
+  });
+
+  it('should pass all the correct fields when checking if credentials are valid', async() => {
+    const spyDispatch = jest.spyOn(mockStore, 'dispatch');
+
+    wrapper.setData({
+      value: {
+        decodedData: {
+          environment:    'my-env',
+          subscriptionId: 'my-sub-id',
+          clientId:       'my-c-id',
+          clientSecret:   'my-c-secret',
+        }
+      }
+    });
+
+    await wrapper.vm.test();
+
+    expect(spyDispatch).toHaveBeenCalledWith('management/request', {
+      data: {
+        environment:    'my-env',
+        subscriptionId: 'my-sub-id',
+        clientId:       'my-c-id',
+        clientSecret:   'my-c-secret',
+      },
+      method:               'POST',
+      redirectUnauthorized: false,
+      url:                  '/meta/aksCheckCredentials'
+    });
+  });
+});

package/cloud-credential/azure.vue

@@ -40,6 +40,7 @@ export default {
         clientId,
         clientSecret,
         subscriptionId,
+        environment,
       } = this.value.decodedData;
 
       try {
@@ -50,6 +51,7 @@ export default {
             clientId,
             clientSecret,
             subscriptionId,
+            environment,
           },
           redirectUnauthorized: false,
         });
@@ -96,6 +98,7 @@ export default {
           :searchable="false"
           :required="true"
           :label="t('cluster.credential.azure.environment.label')"
+          data-testid="azure-cloud-credentials-environment"
           @input="value.setData('environment', $event)"
         />
       </div>
@@ -106,6 +109,7 @@ export default {
           type="text"
           :mode="mode"
           :required="true"
+          data-testid="azure-cloud-credentials-subscription-id"
           @input="value.setData('subscriptionId', $event)"
         />
       </div>
@@ -118,6 +122,7 @@ export default {
           type="text"
           :mode="mode"
           :required="true"
+          data-testid="azure-cloud-credentials-client-id"
           @input="value.setData('clientId', $event)"
         />
       </div>
@@ -128,6 +133,7 @@ export default {
           type="password"
           :mode="mode"
           :required="true"
+          data-testid="azure-cloud-credentials-client-secret"
           @input="value.setData('clientSecret', $event)"
         />
       </div>

package/components/GrowlManager.vue

@@ -99,15 +99,17 @@ export default {
             <i :class="{icon: true, ['icon-'+growl.icon]: true}" />
           </div>
           <div class="growl-text">
-            <div>{{ growl.title }}</div>
+            <i
+              class="close hand icon icon-close"
+              @click="close(growl)"
+            />
+            <div class="growl-text-title">
+              {{ growl.title }}
+            </div>
             <p v-if="growl.message">
               {{ growl.message }}
             </p>
           </div>
-          <i
-            class="close hand icon icon-close"
-            @click="close(growl)"
-          />
         </div>
       </div>
     </div>
@@ -135,7 +137,7 @@ export default {
     width: 100%;
 
     @media only screen and (min-width: map-get($breakpoints, '--viewport-7')) {
-      width: 350px;
+      width: 420px;
     }
   }
 
@@ -149,13 +151,15 @@ export default {
     margin: 10px;
     position: relative;
     word-break: break-all;
-
-    .close {
-      padding: 5px;
-    }
+    box-shadow: 0 3px 5px 0px var(--shadow);
 
     .icon-container {
       align-self: center;
+      flex-basis: 10%;
+      padding: 10px 20px 10px 10px;
+      i {
+        font-size: 24px;
+      }
     }
 
     .growl-message {
@@ -164,28 +168,27 @@ export default {
       &.growl-center {
         align-items: center;
       }
-    }
-
-    .growl-text {
-      flex-basis: 90%;
-      padding: 10px 10px 10px 0;
-      word-break: break-word;
-      white-space: normal;
-
-      > div {
-        font-size: 16px;
-      }
 
-      > P {
-        margin-top: 5px;
-      }
-    }
+      .growl-text {
+        position: relative;
+        flex-basis: 90%;
+        padding: 10px 10px 10px 0;
+        word-break: break-word;
+        white-space: normal;
+
+        .close {
+          position: absolute;
+          top: 12px;
+          right: 10px;
+        }
+        .growl-text-title {
+          font-size: 16px;
+          margin-bottom: 20px;
+        }
 
-    .icon-container {
-      flex-basis: 10%;
-      padding: 10px;
-      i {
-        font-size: 24px;
+        > P {
+          margin-top: 5px;
+        }
       }
     }
   }

package/components/Questions/Array.vue

@@ -19,11 +19,11 @@ export default {
     <div class="col span-6">
       <ArrayList
         :key="question.variable"
-        v-model="value[question.variable]"
+        v-model="value"
         :title="question.label"
         :mode="mode"
-        :protip="false"
         :disabled="disabled"
+        :protip="displayTooltip"
         @input="update"
       />
     </div>

package/components/Questions/Boolean.vue

@@ -9,18 +9,24 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`boolean-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <Checkbox
         :mode="mode"
         :label="displayLabel"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :data-testid="`boolean-input-${question.variable}`"
         @input="$emit('input', $event)"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`boolean-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ displayDescription }}

package/components/Questions/CloudCredential.vue

@@ -39,6 +39,7 @@ export default {
         :placeholder="question.description"
         :required="question.required"
         :value="value"
+        :tooltip="displayTooltip"
         @input="!$fetchState.pending && $emit('input', $event)"
       />
     </div>

package/components/Questions/Enum.vue

@@ -4,7 +4,23 @@ import Question from './Question';
 
 export default {
   components: { LabeledSelect },
-  mixins:     [Question]
+  mixins:     [Question],
+  computed:   {
+    options() {
+      const options = this.question.options;
+
+      if (Array.isArray(options)) {
+        return options;
+      }
+
+      return Object.entries(options).map(([key, value]) => {
+        return {
+          value: key,
+          label: value,
+        };
+      });
+    }
+  }
 };
 </script>
 
@@ -14,11 +30,14 @@ export default {
       <LabeledSelect
         :mode="mode"
         :label="displayLabel"
-        :options="question.options"
+        :options="options"
         :placeholder="question.description"
         :required="question.required"
+        :multiple="question.multiple"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :searchable="question.searchable"
         @input="$emit('input', $event)"
       />
     </div>

package/components/Questions/Float.vue

@@ -2,8 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
-//  @TODO valid_chars, invalid_chars
-
 export default {
   components: { LabeledInput },
   mixins:     [Question]
@@ -11,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`float-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <LabeledInput
         type="text"
@@ -21,11 +22,15 @@ export default {
         :required="question.required"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :rules="rules"
+        :data-testid="`float-input-${question.variable}`"
         @input="val = parseFloat($event); if ( !isNaN(val) ) { $emit('input', val) }"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`float-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ question.description }}

package/components/Questions/Int.vue

@@ -2,8 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
-//  @TODO valid_chars, invalid_chars
-
 export default {
   components: { LabeledInput },
   mixins:     [Question]
@@ -11,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`int-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <LabeledInput
         type="text"
@@ -21,11 +22,15 @@ export default {
         :required="question.required"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :rules="rules"
+        :data-testid="`int-input-${question.variable}`"
         @input="val = parseInt($event, 10); if ( !isNaN(val) ) { $emit('input', val) }"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`int-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ displayDescription }}

package/components/Questions/Question.js

@@ -1,4 +1,7 @@
 import { _EDIT } from '@shell/config/query-params';
+import { validateChars, validateHostname, validateLength } from '@shell/utils/validators';
+import { cronSchedule } from '@shell/utils/validators/cron-schedule';
+import { isValidCIDR, isValidIP } from '@shell/utils/validators/cidr';
 
 export default {
   props: {
@@ -57,6 +60,75 @@ export default {
 
       return this.$store.getters['i18n/withFallback'](`charts.${ this.chartName }."${ variable }".description`, null, this.question?.description);
     },
+
+    displayTooltip() {
+      if (!this.question?.tooltip) {
+        return null;
+      }
+      const variable = this.question?.variable;
+
+      return this.$store.getters['i18n/withFallback'](`charts.${ this.chartName }."${ variable }".tooltip`, null, this.question?.tooltip);
+    },
+
+    rules() {
+      return [
+        (val) => {
+          let errors = [];
+
+          errors = validateChars(
+            val,
+            {
+              validChars:   this.question.valid_chars,
+              invalidChars: this.question.invalid_chars
+            },
+            this.displayLabel,
+            this.$store.getters,
+            errors,
+          );
+
+          errors = validateLength(
+            val,
+            {
+              minLength: this.question?.min_length,
+              maxLenght: this.question?.max_length,
+              min:       this.question?.min,
+              max:       this.question?.max,
+            },
+            this.displayLabel,
+            this.$store.getters,
+            errors,
+          );
+
+          if (this.question.type === 'hostname') {
+            errors = validateHostname(
+              val,
+              this.displayLabel,
+              this.$store.getters,
+              {},
+              errors,
+            );
+          }
+
+          if (this.question.type === 'cron') {
+            cronSchedule(
+              val,
+              this.$store.getters,
+              errors,
+            );
+          }
+
+          if (this.question.type === 'cidr' && !isValidCIDR(val)) {
+            errors.push(this.$store.getters['i18n/t']('validation.invalidCidr'));
+          }
+
+          if (this.question.type === 'ipaddr' && !isValidIP(val)) {
+            errors.push(this.$store.getters['i18n/t']('validation.invalidIP'));
+          }
+
+          return errors;
+        }
+      ];
+    }
   },
 
   created() {

package/components/Questions/QuestionMap.vue

@@ -29,11 +29,12 @@ export default {
       <div class="col span-12 mt-10">
         <KeyValue
           :key="question.variable"
-          v-model="value[question.variable]"
+          v-model="value"
           :title="question.label"
           :mode="mode"
           :protip="false"
           :disabled="disabled"
+          :title-protip="displayTooltip"
           @input="update"
         />
       </div>

package/components/Questions/Radio.vue

@@ -0,0 +1,33 @@
+<script>
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import Question from './Question';
+
+export default {
+  components: { RadioGroup },
+  mixins:     [Question]
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col span-6">
+      <RadioGroup
+        name="question.variable"
+        :mode="mode"
+        :labels="Array.isArray(question.options) ? question.options : Object.values(question.options)"
+        :options="Array.isArray(question.options) ? question.options : Object.keys(question.options)"
+        :value="value"
+        :disabled="disabled"
+        :label="displayLabel"
+        :tooltip="displayTooltip"
+        @input="$emit('input', $event)"
+      />
+    </div>
+    <div
+      v-if="showDescription"
+      class="col span-6 mt-10"
+    >
+      {{ displayDescription }}
+    </div>
+  </div>
+</template>

package/components/Questions/Reference.vue

@@ -96,6 +96,7 @@ export default {
         :placeholder="question.description"
         :required="question.required"
         :value="value"
+        :tooltip="displayTooltip"
         @input="!$fetchState.pending && $emit('input', $event)"
       />
     </div>
@@ -118,6 +119,7 @@ export default {
         :placeholder="question.description"
         :required="question.required"
         :value="value"
+        :tooltip="displayTooltip"
         @input="!$fetchState.pending && $emit('input', $event)"
       />
     </div>

package/components/Questions/String.vue

@@ -2,8 +2,6 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import Question from './Question';
 
-//  @TODO valid_chars, invalid_chars
-
 export default {
   components: { LabeledInput },
   mixins:     [Question],
@@ -21,7 +19,10 @@ export default {
 </script>
 
 <template>
-  <div class="row">
+  <div
+    :data-testid="`string-row-${question.variable}`"
+    class="row"
+  >
     <div class="col span-6">
       <LabeledInput
         :mode="mode"
@@ -31,11 +32,15 @@ export default {
         :required="question.required"
         :value="value"
         :disabled="disabled"
+        :tooltip="displayTooltip"
+        :rules="rules"
+        :data-testid="`string-input-${question.variable}`"
         @input="$emit('input', $event)"
       />
     </div>
     <div
       v-if="showDescription"
+      :data-testid="`string-description-${question.variable}`"
       class="col span-6 mt-10"
     >
       {{ displayDescription }}

package/components/Questions/Yaml.vue

@@ -0,0 +1,46 @@
+<script>
+import YamlEditor from '@shell/components/YamlEditor';
+import Question from './Question';
+import { _VIEW } from '@shell/config/query-params';
+
+export default {
+  components: { YamlEditor },
+  mixins:     [Question],
+  data() {
+    return { VIEW: _VIEW };
+  }
+};
+</script>
+
+<template>
+  <div
+    :data-testid="`yaml-row-${question.variable}`"
+    class="row"
+  >
+    <div class="col span-6">
+      <h3>
+        {{ displayLabel }}
+        <i
+          v-if="displayTooltip"
+          v-clean-tooltip="displayTooltip"
+          class="icon icon-info icon-lg"
+        />
+      </h3>
+      <YamlEditor
+        class="yaml-editor mb-6"
+        :editor-mode="mode === VIEW ? 'VIEW_CODE' : 'EDIT_CODE'"
+        :disabled="disabled"
+        :value="value"
+        :data-testid="`yaml-input-${question.variable}`"
+        @input="$emit('input', $event)"
+      />
+    </div>
+    <div
+      v-if="showDescription"
+      :data-testid="`yaml-description-${question.variable}`"
+      class="col span-6 mt-10"
+    >
+      {{ displayDescription }}
+    </div>
+  </div>
+</template>