@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/PromptRestore.vue

@@ -149,7 +149,7 @@ export default {
 
       const defaultSnapshot = this.toRestore[0]?.type === SNAPSHOT ? this.toRestore[0].name : this.clusterSnapshots[0]?.value;
 
-      this.$set(this, 'selectedSnapshot', defaultSnapshot);
+      this['selectedSnapshot'] = defaultSnapshot;
     },
 
     async apply(buttonDone) {
@@ -220,76 +220,75 @@ export default {
       class="prompt-restore"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        v-clean-html="t('promptRestore.title', null, true)"
-        class="text-default-text"
-      />
-
-      <div
-        slot="body"
-        class="pl-10 pr-10"
-      >
-        <form>
-          <h3 v-t="'promptRestore.name'" />
-          <div v-if="!isCluster">
-            {{ snapshot.nameDisplay }}
-          </div>
-
-          <LabeledSelect
-            v-if="isCluster"
-            v-model="selectedSnapshot"
-            :label="t('promptRestore.label')"
-            :placeholder="t('promptRestore.placeholder')"
-            :options="clusterSnapshots"
+      <template #title>
+        <h4
+          v-clean-html="t('promptRestore.title', null, true)"
+          class="text-default-text"
+        />
+      </template>
+
+      <template #body>
+        <div class="pl-10 pr-10">
+          <form>
+            <h3 v-t="'promptRestore.name'" />
+            <div v-if="!isCluster">
+              {{ snapshot.nameDisplay }}
+            </div>
+
+            <LabeledSelect
+              v-if="isCluster"
+              v-model:value="selectedSnapshot"
+              :label="t('promptRestore.label')"
+              :placeholder="t('promptRestore.placeholder')"
+              :options="clusterSnapshots"
+            />
+
+            <div class="spacer" />
+
+            <h3 v-t="'promptRestore.date'" />
+            <div>
+              <p>
+                <Date
+                  v-if="snapshot"
+                  :value="snapshot.createdAt || snapshot.created || snapshot.metadata.creationTimestamp"
+                />
+              </p>
+            </div>
+            <div class="spacer" />
+            <RadioGroup
+              v-model:value="restoreMode"
+              name="restoreMode"
+              label="Restore Type"
+              :labels="['Only etcd', 'Kubernetes version and etcd', 'Cluster config, Kubernetes version and etcd']"
+              :options="restoreModeOptions"
+            />
+          </form>
+        </div>
+      </template>
+
+      <template #actions>
+        <div class="dialog-actions">
+          <button
+            class="btn role-secondary"
+            @click="close"
+          >
+            {{ t('generic.cancel') }}
+          </button>
+
+          <AsyncButton
+            mode="restore"
+            :disabled="!hasSnapshot"
+            @click="apply"
           />
 
-          <div class="spacer" />
-
-          <h3 v-t="'promptRestore.date'" />
-          <div>
-            <p>
-              <Date
-                v-if="snapshot"
-                :value="snapshot.createdAt || snapshot.created || snapshot.metadata.creationTimestamp"
-              />
-            </p>
-          </div>
-          <div class="spacer" />
-          <RadioGroup
-            v-model="restoreMode"
-            name="restoreMode"
-            label="Restore Type"
-            :labels="['Only etcd', 'Kubernetes version and etcd', 'Cluster config, Kubernetes version and etcd']"
-            :options="restoreModeOptions"
+          <Banner
+            v-for="(err, i) in errors"
+            :key="i"
+            color="error"
+            :label="err"
           />
-        </form>
-      </div>
-
-      <div
-        slot="actions"
-        class="dialog-actions"
-      >
-        <button
-          class="btn role-secondary"
-          @click="close"
-        >
-          {{ t('generic.cancel') }}
-        </button>
-
-        <AsyncButton
-          mode="restore"
-          :disabled="!hasSnapshot"
-          @click="apply"
-        />
-
-        <Banner
-          v-for="(err, i) in errors"
-          :key="i"
-          color="error"
-          :label="err"
-        />
-      </div>
+        </div>
+      </template>
     </Card>
   </app-modal>
 </template>
@@ -314,7 +313,7 @@ export default {
     }
   }
 
-  .prompt-restore ::v-deep .card-wrap .card-actions {
+  .prompt-restore :deep() .card-wrap .card-actions {
     display: block;
 
     button:not(:last-child) {

package/components/Questions/Array.vue

@@ -8,7 +8,7 @@ export default {
 
   methods: {
     update(val) {
-      this.$emit('input', val);
+      this.$emit('update:value', val);
     }
   }
 };
@@ -18,13 +18,12 @@ export default {
   <div class="row">
     <div class="col span-6">
       <ArrayList
-        :key="question.variable"
-        v-model="value"
+        :value="value"
         :title="question.label"
         :mode="mode"
         :disabled="disabled"
         :protip="displayTooltip"
-        @input="update"
+        @update:value="update"
       />
     </div>
     <div

package/components/Questions/Boolean.vue

@@ -21,7 +21,7 @@ export default {
         :disabled="disabled"
         :tooltip="displayTooltip"
         :data-testid="`boolean-input-${question.variable}`"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/CloudCredential.vue

@@ -40,7 +40,7 @@ export default {
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
-        @input="!$fetchState.pending && $emit('input', $event)"
+        @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>
     <div class="col span-6 mt-10">

package/components/Questions/Enum.vue

@@ -38,7 +38,7 @@ export default {
         :disabled="disabled"
         :tooltip="displayTooltip"
         :searchable="question.searchable"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/Float.vue

@@ -25,7 +25,7 @@ export default {
         :tooltip="displayTooltip"
         :rules="rules"
         :data-testid="`float-input-${question.variable}`"
-        @input="val = parseFloat($event); if ( !isNaN(val) ) { $emit('input', val) }"
+        @update:value="val = parseFloat($event); if ( !isNaN(val) ) { $emit('update:value', val) }"
       />
     </div>
     <div

package/components/Questions/Int.vue

@@ -25,7 +25,7 @@ export default {
         :tooltip="displayTooltip"
         :rules="rules"
         :data-testid="`int-input-${question.variable}`"
-        @input="val = parseInt($event, 10); if ( !isNaN(val) ) { $emit('input', val) }"
+        @update:value="val = parseInt($event, 10); if ( !isNaN(val) ) { $emit('update:value', val) }"
       />
     </div>
     <div

package/components/Questions/Question.js

@@ -139,7 +139,7 @@ export default {
     }
 
     if ( this.value === undefined && def !== undefined ) {
-      this.$emit('input', def);
+      this.$emit('update:value', def);
     }
   },
 };

package/components/Questions/QuestionMap.vue

@@ -9,7 +9,7 @@ export default {
 
   methods: {
     update(val) {
-      this.$emit('input', val);
+      this.$emit('update:value', val);
     }
   }
 };
@@ -28,14 +28,13 @@ export default {
     <div class="row">
       <div class="col span-12 mt-10">
         <KeyValue
-          :key="question.variable"
-          v-model="value"
+          :value="value"
           :title="question.label"
           :mode="mode"
           :protip="false"
           :disabled="disabled"
           :title-protip="displayTooltip"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>

package/components/Questions/Radio.vue

@@ -20,7 +20,7 @@ export default {
         :disabled="disabled"
         :label="displayLabel"
         :tooltip="displayTooltip"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/Reference.vue

@@ -97,7 +97,7 @@ export default {
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
-        @input="!$fetchState.pending && $emit('input', $event)"
+        @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>
     <div class="col span-6 mt-10">
@@ -120,7 +120,7 @@ export default {
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
-        @input="!$fetchState.pending && $emit('input', $event)"
+        @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>
     <div class="col span-6 mt-10">

package/components/Questions/String.vue

@@ -35,7 +35,7 @@ export default {
         :tooltip="displayTooltip"
         :rules="rules"
         :data-testid="`string-input-${question.variable}`"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/Yaml.vue

@@ -32,7 +32,7 @@ export default {
         :disabled="disabled"
         :value="value"
         :data-testid="`yaml-input-${question.variable}`"
-        @input="$emit('input', $event)"
+        @update:value="$emit('update:value', $event)"
       />
     </div>
     <div

package/components/Questions/__tests__/Boolean.test.ts

@@ -6,7 +6,7 @@ import defaults from './utils/questions-defaults';
 describe('the Boolean Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -16,8 +16,11 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"] input[type=checkbox]');
@@ -36,7 +39,7 @@ describe('the Boolean Component', () => {
 
   it('description is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -46,8 +49,11 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
@@ -62,7 +68,7 @@ describe('the Boolean Component', () => {
 
   it('label is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -72,8 +78,11 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');
@@ -88,7 +97,7 @@ describe('the Boolean Component', () => {
 
   it('tooltip is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -98,8 +107,11 @@ describe('the Boolean Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="boolean-input-var_name"]');

package/components/Questions/__tests__/Float.test.ts

@@ -6,7 +6,7 @@ import defaults from './utils/questions-defaults';
 describe('the float Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -16,8 +16,11 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
@@ -36,7 +39,7 @@ describe('the float Component', () => {
 
   it('description is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -46,8 +49,11 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
@@ -62,7 +68,7 @@ describe('the float Component', () => {
 
   it('label is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -72,8 +78,11 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');
@@ -88,7 +97,7 @@ describe('the float Component', () => {
 
   it('tooltip is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -98,8 +107,11 @@ describe('the float Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="float-input-var_name"]');

package/components/Questions/__tests__/Int.test.ts

@@ -6,7 +6,7 @@ import defaults from './utils/questions-defaults';
 describe('the Int Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -16,8 +16,11 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -36,7 +39,7 @@ describe('the Int Component', () => {
 
   it('description is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -46,8 +49,11 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -62,7 +68,7 @@ describe('the Int Component', () => {
 
   it('label is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -72,8 +78,11 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');
@@ -88,7 +97,7 @@ describe('the Int Component', () => {
 
   it('tooltip is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -98,8 +107,11 @@ describe('the Int Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="int-input-var_name"]');

package/components/Questions/__tests__/String.test.ts

@@ -6,7 +6,7 @@ import defaults from './utils/questions-defaults';
 describe('the String Component', () => {
   it('input field is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -16,8 +16,11 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -36,7 +39,7 @@ describe('the String Component', () => {
 
   it('description is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -46,8 +49,11 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -62,7 +68,7 @@ describe('the String Component', () => {
 
   it('label is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -72,8 +78,11 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');
@@ -88,7 +97,7 @@ describe('the String Component', () => {
 
   it('tooltip is present', () => {
     const wrapper = mount(Questions, {
-      propsData: {
+      props: {
         value:           {},
         targetNamespace: 'test',
         source:          [{
@@ -98,8 +107,11 @@ describe('the String Component', () => {
         }],
         mode: _EDIT
       },
-      mocks: defaults.mocks,
-      stubs: defaults.stubs,
+
+      global: {
+        mocks: defaults.mocks,
+        stubs: defaults.stubs,
+      },
     });
 
     const inputFields = wrapper.findAll('[data-testid="string-input-var_name"]');