@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/form/Command.vue

@@ -1,6 +1,4 @@
 <script>
-import Vue from 'vue';
-
 import { LabeledInput } from '@components/Form/LabeledInput';
 import ShellInput from '@shell/components/form/ShellInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
@@ -111,13 +109,13 @@ export default {
         const val = out[prop];
 
         if (val === '' || typeof val === 'undefined' || val === null) {
-          Vue.delete(this.value, prop);
+          delete this.value[prop];
         } else {
-          Vue.set(this.value, prop, val);
+          this.value[prop] = val;
         }
       }
 
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
   },
 };
@@ -131,11 +129,11 @@ export default {
       >
         <slot name="entrypoint">
           <ShellInput
-            v-model="command"
+            v-model:value="command"
             :mode="mode"
             :label="t('workload.container.command.command')"
             :placeholder="t('generic.placeholder', {text: '/bin/sh'}, true)"
-            @input="update"
+            @update:value="update"
           />
         </slot>
       </div>
@@ -145,11 +143,11 @@ export default {
       >
         <slot name="command">
           <ShellInput
-            v-model="args"
+            v-model:value="args"
             :mode="mode"
             :label="t('workload.container.command.args')"
             :placeholder="t('generic.placeholder', {text: '/usr/sbin/httpd -f httpd.conf'}, true)"
-            @input="update"
+            @update:value="update"
           />
         </slot>
       </div>
@@ -161,11 +159,11 @@ export default {
         data-testid="input-command-workingDir"
       >
         <LabeledInput
-          v-model="workingDir"
+          v-model:value="workingDir"
           :mode="mode"
           :label="t('workload.container.command.workingDir')"
           :placeholder="t('generic.placeholder', {text: '/myapp'}, true)"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div class="col span-6">
@@ -178,11 +176,11 @@ export default {
             data-testid="input-command-stdin"
           >
             <LabeledSelect
-              v-model="stdinSelect"
+              v-model:value="stdinSelect"
               :label="t('workload.container.command.stdin')"
               :options="commandOptions"
               :mode="mode"
-              @input="update"
+              @update:value="update"
             />
           </div>
           <div
@@ -191,10 +189,10 @@ export default {
             data-testid="input-command-tty"
           >
             <Checkbox
-              v-model="tty"
+              v-model:value="tty"
               :mode="mode"
               :label="t('workload.container.command.tty')"
-              @input="update"
+              @update:value="update"
             />
           </div>
         </div>

package/components/form/EnvVars.vue

@@ -59,7 +59,7 @@ export default {
   watch: {
     'value.tty'(neu) {
       if (neu) {
-        this.$set(this.value, 'stdin', true);
+        this.value['stdin'] = true;
       }
     }
   },
@@ -84,8 +84,8 @@ export default {
           envVar.push(row.value);
         }
       });
-      this.$set(this.value, 'env', envVar);
-      this.$set(this.value, 'envFrom', envVarSource);
+      this.value['env'] = envVar;
+      this.value['envFrom'] = envVarSource;
     },
 
     updateRow() {
@@ -107,16 +107,16 @@ export default {
   <div :style="{'width':'100%'}">
     <div
       v-for="(row, i) in allEnv"
-      :key="row.id"
+      :key="i"
     >
       <ValueFromResource
-        v-model="row.value"
+        v-model:value="row.value"
         :all-secrets="secrets"
         :all-config-maps="configMaps"
         :mode="mode"
         :loading="loading"
         @remove="removeRow(i)"
-        @input="updateRow"
+        @update:value="updateRow"
       />
     </div>
     <button
@@ -131,7 +131,7 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-.value-from ::v-deep {
+.value-from :deep() {
   .v-select {
     height: 50px;
   }

package/components/form/FileImageSelector.vue

@@ -47,7 +47,7 @@ export default {
      * @param {string} event
      */
     setIcon(event) {
-      this.$emit('input', event);
+      this.$emit('update:value', event);
     },
     setError(error) {
       this.$emit('error', error);

package/components/form/GitPicker.vue

@@ -415,7 +415,7 @@ export default defineComponent({
     <div class="row">
       <div class="spacer">
         <LabeledInput
-          v-model="selectedAccOrOrg"
+          v-model:value="selectedAccOrOrg"
           data-testid="git_picker-username-or-org"
           :tooltip="t(`gitPicker.${ type }.username.tooltip`)"
           :label="t(`gitPicker.${ type }.username.inputLabel`)"
@@ -423,7 +423,7 @@ export default defineComponent({
           :rules="[reposRules]"
           :delay="debounceTime"
           :status="status(hasError.repo)"
-          @input="fetchRepos"
+          @update:value="fetchRepos"
         />
       </div>
 
@@ -432,7 +432,7 @@ export default defineComponent({
         class="spacer"
       >
         <LabeledSelect
-          v-model="selectedRepo"
+          v-model:value="selectedRepo"
           :required="true"
           :label="t(`gitPicker.${ type }.repo.inputLabel`)"
           :options="preparedRepos"
@@ -443,7 +443,7 @@ export default defineComponent({
           :status="status(hasError.repo)"
           :option-label="'name'"
           @search="onSearchRepo"
-          @input="fetchBranches"
+          @update:value="fetchBranches"
         />
       </div>
       <!-- Deals with Branches  -->
@@ -452,7 +452,7 @@ export default defineComponent({
         class="spacer"
       >
         <LabeledSelect
-          v-model="selectedBranch"
+          v-model:value="selectedBranch"
           :required="true"
           :label="t(`gitPicker.${ type }.branch.inputLabel`)"
           :options="preparedBranches"
@@ -463,7 +463,7 @@ export default defineComponent({
           :status="status(hasError.branch)"
           :option-label="'name'"
           @search="onSearchBranch"
-          @input="fetchCommits"
+          @update:value="fetchCommits"
         />
       </div>
       <!-- Deals with Commits, display & allow to pick from it  -->
@@ -488,7 +488,7 @@ export default defineComponent({
             <RadioButton
               :value="selectedCommitId"
               :val="row.commitId"
-              @input="final($event)"
+              @update:value="final($event)"
             />
           </template>
 

package/components/form/HealthCheck.vue

@@ -32,7 +32,7 @@ export default {
     update() {
       const { readinessProbe, livenessProbe, startupProbe } = this;
 
-      this.$emit('input', {
+      this.$emit('update:value', {
         readinessProbe, livenessProbe, startupProbe
       } );
     }
@@ -45,7 +45,7 @@ export default {
     <div>
       <div class="row">
         <Probe
-          v-model="readinessProbe"
+          v-model:value="readinessProbe"
           class="col span-12"
           :mode="mode"
           :label="t('workload.container.healthCheck.readinessProbe')"
@@ -59,7 +59,7 @@ export default {
     <div>
       <div class="row">
         <Probe
-          v-model="livenessProbe"
+          v-model:value="livenessProbe"
           class="col span-12"
           :mode="mode"
           :label="t('workload.container.healthCheck.livenessProbe')"
@@ -72,7 +72,7 @@ export default {
 
     <div class="row">
       <Probe
-        v-model="startupProbe"
+        v-model:value="startupProbe"
         class="col span-12"
         :mode="mode"
         :label="t('workload.container.healthCheck.startupProbe')"

package/components/form/HookOption.vue

@@ -70,7 +70,7 @@ export default {
       const header = { name: '', value: '' };
 
       if (!this.value.httpGet.httpHeaders) {
-        this.$set(this.value.httpGet, 'httpHeaders', []);
+        this.value.httpGet['httpHeaders'] = [];
       }
 
       this.value.httpGet.httpHeaders.push(header);
@@ -99,7 +99,7 @@ export default {
         break;
       }
 
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
 
     deleteLeftovers(leftovers) {
@@ -117,7 +117,7 @@ export default {
   <div>
     <div class="row mb-10">
       <RadioGroup
-        v-model="selectHook"
+        v-model:value="selectHook"
         name="selectHook"
         :options="['none', 'exec', 'httpGet']"
         :labels="[
@@ -126,7 +126,7 @@ export default {
           t('workload.container.lifecycleHook.httpGet.add'),
         ]"
         :mode="mode"
-        @input="update"
+        @update:value="update"
       />
     </div>
 
@@ -135,7 +135,7 @@ export default {
         <h4>{{ t('workload.container.lifecycleHook.exec.title') }}</h4>
         <div>
           <ShellInput
-            v-model="value.exec.command"
+            v-model:value="value.exec.command"
             :mode="mode"
             :label="t('workload.container.lifecycleHook.exec.command.label')"
             :placeholder="t('workload.container.lifecycleHook.exec.command.placeholder', null, true)"
@@ -148,15 +148,15 @@ export default {
     <template v-if="selectHook === 'httpGet'">
       <h4>{{ t('workload.container.lifecycleHook.httpGet.title') }}</h4>
       <div class="var-row">
-        <template @input="update">
+        <template @update:value="update">
           <LabeledInput
-            v-model="value.httpGet.host"
+            v-model:value="value.httpGet.host"
             :label="t('workload.container.lifecycleHook.httpGet.host.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.host.placeholder')"
             :mode="mode"
           />
           <LabeledInput
-            v-model="value.httpGet.path"
+            v-model:value="value.httpGet.path"
             :label="t('workload.container.lifecycleHook.httpGet.path.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.path.placeholder')"
             :mode="mode"
@@ -170,7 +170,7 @@ export default {
             required
           />
           <LabeledSelect
-            v-model="value.httpGet.scheme"
+            v-model:value="value.httpGet.scheme"
             :label="t('workload.container.lifecycleHook.httpGet.scheme.label')"
             :placeholder="t('workload.container.lifecycleHook.httpGet.scheme.placeholder')"
             :options="schemeOptions"
@@ -182,12 +182,12 @@ export default {
       <h4>{{ t('workload.container.lifecycleHook.httpHeaders.title') }}</h4>
       <div
         v-for="(header, index) in value.httpGet.httpHeaders"
-        :key="header.id"
+        :key="index"
         class="var-row"
       >
-        <template @input="update">
+        <template @update:value="update">
           <LabeledInput
-            v-model="value.httpGet.httpHeaders[index].name"
+            v-model:value="value.httpGet.httpHeaders[index].name"
             :label="t('workload.container.lifecycleHook.httpHeaders.name.label')"
             :placeholder="t('workload.container.lifecycleHook.httpHeaders.name.placeholder')"
             class="single-value"
@@ -195,7 +195,7 @@ export default {
             required
           />
           <LabeledInput
-            v-model="value.httpGet.httpHeaders[index].value"
+            v-model:value="value.httpGet.httpHeaders[index].value"
             :label="t('workload.container.lifecycleHook.httpHeaders.value.label')"
             :placeholder="t('workload.container.lifecycleHook.httpHeaders.value.placeholder')"
             class="single-value"

package/components/form/InputWithSelect.vue

@@ -94,6 +94,12 @@ export default {
     };
   },
 
+  computed: {
+    canPaginate() {
+      return false;
+    }
+  },
+
   methods: {
     focus() {
       const comp = this.$refs.text;
@@ -104,7 +110,7 @@ export default {
     },
 
     change() {
-      this.$emit('input', { selected: this.selected, text: this.string });
+      this.$emit('update:value', { selected: this.selected, text: this.string });
     },
   },
 
@@ -120,11 +126,11 @@ export default {
   <div
     :class="{ 'select-after': !selectBeforeText }"
     class="input-container row"
-    @input="change"
+    @update:value="change"
   >
     <LabeledSelect
       v-if="selectLabel"
-      v-model="selected"
+      v-model:value="selected"
       :label="selectLabel"
       :class="{ 'in-input': !isView}"
       :options="options"
@@ -139,11 +145,11 @@ export default {
       :placement="$attrs.placement ? $attrs.placement : null"
       :v-bind="$attrs"
       :rules="selectRules"
-      @input="change"
+      @update:value="change"
     />
     <Select
       v-else
-      v-model="selected"
+      v-model:value="selected"
       :options="options"
       :searchable="searchable"
       :disabled="disabled || isView"
@@ -156,12 +162,12 @@ export default {
       :option-label="optionLabel"
       :placement="$attrs.placement ? $attrs.placement : null"
       :v-bind="$attrs"
-      @input="change"
+      @update:value="change"
     />
     <LabeledInput
       v-if="textLabel || textRules.length > 0"
       ref="text"
-      v-model="string"
+      v-model:value="string"
       class="input-string col span-8"
       :label="textLabel"
       :placeholder="placeholder"
@@ -276,18 +282,18 @@ export default {
       border: 1px solid var(--outline) !important;
     }
 
-    &.labeled-select.focused ::v-deep,
-    &.unlabeled-select.focused ::v-deep {
+    &.labeled-select.focused :deep(),
+    &.unlabeled-select.focused :deep() {
       outline: none;
     }
 
-    &.labeled-select:not(.disabled):not(.view) ::v-deep,
-    &.unlabeled-select:not(.disabled):not(.view) ::v-deep {
+    &.labeled-select:not(.disabled):not(.view) :deep(),
+    &.unlabeled-select:not(.disabled):not(.view) :deep() {
       border: solid 1px var(--input-border);
     }
 
-    &.labeled-select ::v-deep,
-    &.unlabeled-select ::v-deep {
+    &.labeled-select :deep(),
+    &.unlabeled-select :deep() {
       box-shadow: none;
       width: 20%;
       margin-right: 1px; // push the input box right so the full focus outline of the select can be seen, z-index borks

package/components/form/KeyValue.vue

@@ -306,7 +306,7 @@ export default {
   },
   watch: {
     /**
-     * KV works with v-model=value
+     * KV works with v-model:value=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
@@ -428,7 +428,7 @@ export default {
         return (row.value.length || row.key.length);
       });
 
-      this.$set(this, 'rows', cleaned);
+      this['rows'] = cleaned;
     },
     onFileSelected(file) {
       const { name, value } = this.fileModifier(file.name, file.value);
@@ -513,7 +513,7 @@ export default {
       }
       this.lastUpdated = out;
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
     onPaste(index, event) {
       const text = event.clipboardData.getData('text/plain');
@@ -566,7 +566,7 @@ export default {
      * Set focus on CodeMirror fields
      */
     onFocusMarkdownMultiline(idx, value) {
-      this.$set(this.codeMirrorFocus, idx, value);
+      this.codeMirrorFocus[idx] = value;
     },
     onValueFileSelected(idx, file) {
       const { name, value } = file;
@@ -616,8 +616,8 @@ export default {
           {{ _valueLabel }}
         </label>
         <label
-          v-for="c in extraColumns"
-          :key="c"
+          v-for="(c, i) in extraColumns"
+          :key="i"
         >
           <slot :name="'label:'+c">{{ c }}</slot>
         </label>
@@ -639,10 +639,10 @@ export default {
       <template
         v-for="(row,i) in filteredRows"
         v-else
+        :key="i"
       >
         <!-- Key -->
         <div
-          :key="i+'key'"
           class="kv-item key"
         >
           <slot
@@ -657,14 +657,14 @@ export default {
             <Select
               v-if="keyOptions"
               ref="key"
-              v-model="row[keyName]"
+              v-model:value="row[keyName]"
               :searchable="true"
               :disabled="disabled || isProtected(row.key)"
               :clearable="false"
               :taggable="keyTaggable"
               :options="calculateOptions(row[keyName])"
               :data-testid="`select-kv-item-key-${i}`"
-              @input="queueUpdate"
+              @update:value="queueUpdate"
             />
             <input
               v-else
@@ -681,7 +681,6 @@ export default {
 
         <!-- Value -->
         <div
-          :key="i+'value'"
           :data-testid="`kv-item-value-${i}`"
           class="kv-item value"
         >
@@ -717,7 +716,7 @@ export default {
               />
               <TextAreaAutoGrow
                 v-else-if="valueMultiline"
-                v-model="row[valueName]"
+                v-model:value="row[valueName]"
                 data-testid="value-multiline"
                 :class="{'conceal': valueConcealed}"
                 :disabled="disabled || isProtected(row.key)"
@@ -725,7 +724,7 @@ export default {
                 :placeholder="_valuePlaceholder"
                 :min-height="40"
                 :spellcheck="false"
-                @input="queueUpdate"
+                @update:value="queueUpdate"
               />
               <input
                 v-else
@@ -750,14 +749,15 @@ export default {
           </slot>
         </div>
         <div
-          v-for="c in extraColumns"
-          :key="i + c"
+          v-for="(c, j) in extraColumns"
+          :key="`${i}-${j}`"
           class="kv-item extra"
         >
           <slot
             :name="'col:' + c"
             :row="row"
             :queue-update="queueUpdate"
+            :i="i"
           />
         </div>
         <div