@rancher/shell 1.2.3 → 2.0.1

package/components/form/GitPicker.vue

@@ -1,12 +1,13 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, inject } from 'vue';
 import SortableTable from '@shell/components/SortableTable/index.vue';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 import debounce from 'lodash/debounce';
 import { isArray } from '@shell/utils/array';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { GitUtils } from '../../utils/git';
+import { GitUtils, Commit } from '@shell/utils/git';
+import type { DebouncedFunc } from 'lodash';
 
 interface commit {
   [key: string]: any,
@@ -17,21 +18,45 @@ interface Data {
     repo: boolean,
     branch: boolean,
     commits: boolean,
+    branches?: unknown,
   },
 
   repos: object[],
   branches: object[],
   commits: commit[],
 
-  selectedAccOrOrg: string| null,
-  selectedRepo: object| null,
-  selectedBranch: object| null,
-  selectedCommit: object | null,
+  selectedAccOrOrg: string | undefined,
+  selectedRepo: object | undefined,
+  selectedBranch: object | undefined,
+  selectedCommit: Commit | null,
 }
 
-const debounceTime = 1000;
+interface CommitHeader {
+  name: string;
+  label: string;
+  width?: number;
+  formatter?: string;
+  formatterOpts?: { [key: string]: any };
+  value?: string | string[];
+  sort?: string | string[];
+  defaultSort?: boolean;
+}
+
+interface NonReactiveProps {
+  onSearchRepo: DebouncedFunc<(param: any) => Promise<any>> | undefined;
+  onSearchBranch: DebouncedFunc<(param: any) => Promise<any>> | undefined;
+  debounceTime: number;
+}
+
+const debounceTime = 1_000;
 
-export default Vue.extend<Data, any, any, any>({
+const provideProps: NonReactiveProps = {
+  onSearchRepo:   undefined,
+  onSearchBranch: undefined,
+  debounceTime,
+};
+
+export default defineComponent({
 
   components: {
     LabeledSelect,
@@ -52,10 +77,20 @@ export default Vue.extend<Data, any, any, any>({
     }
   },
 
-  data() {
+  setup() {
+    const onSearchRepo = inject('onSearchRepo', provideProps.onSearchRepo);
+    const onSearchBranch = inject('onSearchBranch', provideProps.onSearchBranch);
+    const debounceTime = inject('debounceTime', provideProps.debounceTime);
+
     return {
+      onSearchRepo,
+      onSearchBranch,
       debounceTime,
+    };
+  },
 
+  data(): Data {
+    return {
       hasError: {
         repo:    false,
         branch:  false,
@@ -66,10 +101,10 @@ export default Vue.extend<Data, any, any, any>({
       branches: [],
       commits:  [] as commit[],
 
-      selectedAccOrOrg: null,
-      selectedRepo:     null,
-      selectedBranch:   null,
-      selectedCommit:   {},
+      selectedAccOrOrg: undefined,
+      selectedRepo:     undefined,
+      selectedBranch:   undefined,
+      selectedCommit:   null,
     };
   },
 
@@ -95,13 +130,14 @@ export default Vue.extend<Data, any, any, any>({
   },
 
   computed: {
-    commitHeaders() {
+    commitHeaders(): CommitHeader[] {
       return [
         {
           name:  'index',
           label: this.t(`gitPicker.${ this.type }.tableHeaders.choose.label`),
           width: 60,
-        }, {
+        },
+        {
           name:          'sha',
           label:         this.t(`gitPicker.${ this.type }.tableHeaders.sha.label`),
           width:         90,
@@ -134,17 +170,20 @@ export default Vue.extend<Data, any, any, any>({
       ];
     },
 
-    preparedRepos() {
+    preparedRepos(): unknown {
       return this.normalizeArray(this.repos, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedBranches() {
+    preparedBranches(): unknown {
       return this.normalizeArray(this.branches, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedCommits() {
-      return this.normalizeArray(this.commits, (c: any) => GitUtils[this.type].normalize.commit(c));
+    preparedCommits(): Commit[] {
+      return this.normalizeArray(this.commits, (c) => GitUtils[this.type].normalize.commit(c));
     },
+    selectedCommitId(): string | undefined {
+      return this.selectedCommit?.commitId;
+    }
   },
 
   methods: {
@@ -164,10 +203,10 @@ export default Vue.extend<Data, any, any, any>({
 
     reset() {
       this.repos = [];
-      this.selectedAccOrOrg = null;
-      this.selectedRepo = null;
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedAccOrOrg = undefined;
+      this.selectedRepo = undefined;
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
     },
@@ -217,13 +256,13 @@ export default Vue.extend<Data, any, any, any>({
 
     async fetchRepos() {
       this.repos = [];
-      this.selectedRepo = null;
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedRepo = undefined;
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
 
-      if (this.selectedAccOrOrg.length) {
+      if (this.selectedAccOrOrg?.length) {
         try {
           const res = await this.$store.dispatch(`${ this.type }/fetchRecentRepos`, { username: this.selectedAccOrOrg });
 
@@ -237,8 +276,8 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     async fetchBranches() {
-      this.selectedBranch = null;
-      this.selectedCommit = {};
+      this.selectedBranch = undefined;
+      this.selectedCommit = null;
 
       this.communicateReset();
 
@@ -253,7 +292,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     async fetchCommits() {
-      this.selectedCommit = {};
+      this.selectedCommit = null;
 
       this.communicateReset();
 
@@ -279,7 +318,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     final(commitId: string) {
-      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId);
+      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId) || null;
 
       if (this.selectedAccOrOrg && this.selectedRepo && this.selectedCommit?.commitId) {
         this.$emit('change', {
@@ -337,7 +376,7 @@ export default Vue.extend<Data, any, any, any>({
     },
 
     status(value: boolean) {
-      return value ? 'error' : null;
+      return value ? 'error' : undefined;
     },
 
     reposRules() {
@@ -355,11 +394,17 @@ export default Vue.extend<Data, any, any, any>({
       const commitId = this.$route.query?.commit;
 
       if (commitId) {
-        const table = this.$refs.commitsTable;
-        const page = table.getPageByRow(commitId, ({ commitId }: commit) => commitId);
+        const table = this.$refs.commitsTable as unknown as {
+          getPageByRow: (id: string | (string | null)[], callback: (commit: any) => any) => any;
+          setPage: (page: any) => void;
+        };
+        const page = table?.getPageByRow(commitId, ({ commitId }: commit) => commitId);
 
-        table.setPage(page);
+        table?.setPage(page);
       }
+    },
+    selectReduction(e: unknown) {
+      return e;
     }
   },
 });
@@ -393,7 +438,7 @@ export default Vue.extend<Data, any, any, any>({
           :options="preparedRepos"
           :clearable="true"
           :searchable="true"
-          :reduce="(e) => e"
+          :reduce="selectReduction"
           :rules="[reposRules]"
           :status="status(hasError.repo)"
           :option-label="'name'"
@@ -412,7 +457,7 @@ export default Vue.extend<Data, any, any, any>({
           :label="t(`gitPicker.${ type }.branch.inputLabel`)"
           :options="preparedBranches"
           :clearable="false"
-          :reduce="(e) => e"
+          :reduce="selectReduction"
           :searchable="true"
           :rules="[branchesRules]"
           :status="status(hasError.branch)"
@@ -441,7 +486,7 @@ export default Vue.extend<Data, any, any, any>({
         >
           <template #cell:index="{row}">
             <RadioButton
-              :value="selectedCommit.commitId"
+              :value="selectedCommitId"
               :val="row.commitId"
               @input="final($event)"
             />

package/components/form/KeyValue.vue

@@ -11,6 +11,7 @@ import FileSelector from '@shell/components/form/FileSelector';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
 import CodeMirror from '@shell/components/CodeMirror';
+import isEqual from 'lodash/isEqual';
 
 export default {
   name: 'KeyValue',
@@ -58,10 +59,8 @@ export default {
     },
 
     protip: {
-      type: [String, Boolean],
-      default() {
-        return this.$store.getters['i18n/t']('keyValue.protip', null, true);
-      },
+      type:    [String, Boolean],
+      default: '',
     },
     // For asMap=false, the name of the field that goes into the row objects
     keyName: {
@@ -69,10 +68,8 @@ export default {
       default: 'key',
     },
     keyLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.key');
-      },
+      type:    String,
+      default: '',
     },
     keyEditable: {
       type:    Boolean,
@@ -93,10 +90,8 @@ export default {
       default: false,
     },
     keyPlaceholder: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('keyValue.keyPlaceholder');
-      },
+      type:    String,
+      default: '',
     },
     /**
      * List of keys which needs to be disabled and hidden based on toggler
@@ -122,16 +117,12 @@ export default {
       default: 'value',
     },
     valueLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.value');
-      },
+      type:    String,
+      default: '',
     },
     valuePlaceholder: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('keyValue.valuePlaceholder');
-      },
+      type:    String,
+      default: '',
     },
     valueCanBeEmpty: {
       type:    Boolean,
@@ -184,10 +175,8 @@ export default {
       default: () => {},
     },
     addLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.add');
-      },
+      type:    String,
+      default: '',
     },
     addIcon: {
       type:    String,
@@ -197,12 +186,6 @@ export default {
       type:    Boolean,
       default: true,
     },
-    readLabel: {
-      type: String,
-      default() {
-        return this.$store.getters['i18n/t']('generic.readFromFile');
-      },
-    },
     readIcon: {
       type:    String,
       default: 'icon-upload',
@@ -237,7 +220,7 @@ export default {
     },
     parserSeparators: {
       type:    Array,
-      default: () => [': ', '='],
+      default: () => [':', '='],
     },
     loading: {
       default: false,
@@ -262,10 +245,29 @@ export default {
     return {
       rows,
       codeMirrorFocus: {},
+      lastUpdated:     null
     };
   },
-
   computed: {
+    _protip() {
+      return this.protip || this.t('keyValue.protip', null, true);
+    },
+    _keyLabel() {
+      return this.keyLabel || this.t('generic.key');
+    },
+    _keyPlaceholder() {
+      return this.keyPlaceholder || this.t('keyValue.keyPlaceholder');
+    },
+    _valueLabel() {
+      return this.valueLabel || this.t('generic.value');
+    },
+    _valuePlaceholder() {
+      return this.valuePlaceholder || this.t('keyValue.valuePlaceholder');
+    },
+    _addLabel() {
+      return this.addLabel || this.t('generic.add');
+    },
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -303,14 +305,28 @@ export default {
     this.queueUpdate = debounce(this.update, 500);
   },
   watch: {
-    defaultValue(neu) {
-      if (Array.isArray(neu)) {
-        this.rows = this.getRows(neu);
-        this.$emit('input', neu);
+    /**
+     * KV works with v-model=value
+     * value is transformed into this.rows (base64 decode, mark supported etc)
+     * on input, this.update constructs a new value from this.rows and emits
+     * if the parent component changes value, KV needs to re-compute this.rows
+     * If the value changes because the user has edited it using KV, then KV should NOT re-compute rows
+     * the value watcher will compare the last value KV emitted with the new value KV detects and re-compute rows if they don't match
+     */
+    value: {
+      deep: true,
+      handler(neu, old) {
+        this.valuePropChanged(neu, old);
       }
     }
   },
   methods: {
+    valuePropChanged(neu) {
+      if (!isEqual(neu, this.lastUpdated)) {
+        this.rows = this.getRows(neu);
+      }
+    },
+
     isProtected(key) {
       return this.protectedKeys && this.protectedKeys.includes(key);
     },
@@ -343,6 +359,7 @@ export default {
 
         for ( const row of input ) {
           let value = row[this.valueName] || '';
+
           const decodedValue = base64Decode(row[this.valueName]);
           const asciiValue = asciiLike(decodedValue);
 
@@ -494,16 +511,18 @@ export default {
           return entry;
         });
       }
+      this.lastUpdated = out;
+
       this.$emit('input', out);
     },
-    onPaste(index, event, pastedValue) {
+    onPaste(index, event) {
       const text = event.clipboardData.getData('text/plain');
       const lines = text.split('\n');
       const splits = lines.map((line) => {
-        const splitter = !line.includes(':') || ((line.indexOf('=') < line.indexOf(':')) && line.includes(':')) ? '=' : ':';
+        const splitter = this.parserSeparators.find((sep) => line.includes(sep));
 
-        return line.split(splitter);
-      });
+        return splitter ? line.split(splitter) : '';
+      }).filter((split) => split && split.length > 0);
 
       if (splits.length === 0 || (splits.length === 1 && splits[0].length < 2)) {
         return;
@@ -586,15 +605,15 @@ export default {
     >
       <template v-if="rows.length || isView">
         <label class="text-label">
-          {{ keyLabel }}
+          {{ _keyLabel }}
           <i
-            v-if="protip && !isView && addAllowed"
-            v-clean-tooltip="protip"
+            v-if="_protip && !isView && addAllowed"
+            v-clean-tooltip="_protip"
             class="icon icon-info"
           />
         </label>
         <label class="text-label">
-          {{ valueLabel }}
+          {{ _valueLabel }}
         </label>
         <label
           v-for="c in extraColumns"
@@ -652,7 +671,7 @@ export default {
               ref="key"
               v-model="row[keyName]"
               :disabled="isView || disabled || !keyEditable || isProtected(row.key)"
-              :placeholder="keyPlaceholder"
+              :placeholder="_keyPlaceholder"
               :data-testid="`input-kv-item-key-${i}`"
               @input="queueUpdate"
               @paste="onPaste(i, $event)"
@@ -703,7 +722,7 @@ export default {
                 :class="{'conceal': valueConcealed}"
                 :disabled="disabled || isProtected(row.key)"
                 :mode="mode"
-                :placeholder="valuePlaceholder"
+                :placeholder="_valuePlaceholder"
                 :min-height="40"
                 :spellcheck="false"
                 @input="queueUpdate"
@@ -713,10 +732,11 @@ export default {
                 v-model="row[valueName]"
                 :disabled="isView || disabled || isProtected(row.key)"
                 :type="valueConcealed ? 'password' : 'text'"
-                :placeholder="valuePlaceholder"
+                :placeholder="_valuePlaceholder"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
+                :data-testid="`input-kv-item-value-${i}`"
                 @input="queueUpdate"
               >
               <FileSelector
@@ -738,6 +758,7 @@ export default {
             :name="'col:' + c"
             :row="row"
             :queue-update="queueUpdate"
+            :i="i"
           />
         </div>
         <div
@@ -776,13 +797,14 @@ export default {
           v-if="addAllowed"
           type="button"
           class="btn role-tertiary add"
+          data-testid="add_link_button"
           :disabled="loading || disabled || (keyOptions && filteredKeyOptions.length === 0)"
           @click="add()"
         >
           <i
             v-if="loading"
             class="mr-5 icon icon-spinner icon-spin icon-lg"
-          /> {{ addLabel }}
+          /> {{ _addLabel }}
         </button>
         <FileSelector
           v-if="readAllowed"