@rancher/shell 2.0.1 → 3.0.0-rc.2

package/components/InputOrDisplay.vue

@@ -1,27 +1,9 @@
 <script>
-import Vue from 'vue';
+import { h, computed } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 
-const component = Vue.component('InputOrDisplay', {
-  render(h) {
-    if (this.isView) {
-      return h('div',
-        { attrs: { class: 'label' } },
-        [
-          h('div',
-            { attrs: { class: 'text-label' } },
-            this.$slots.name ? this.$slots.name : this.name
-          ),
-          h('div',
-            { attrs: { class: 'value' } },
-            this.$slots.value ? this.$slots.value : this.displayValue
-          )
-        ]
-      );
-    } else {
-      return this.$slots.default;
-    }
-  },
+export default {
+  name:  'InputOrDisplay',
   props: {
     name: {
       type:     String,
@@ -36,22 +18,29 @@ const component = Vue.component('InputOrDisplay', {
       default: 'edit'
     }
   },
-  computed: {
-    isView() {
-      return this.mode === _VIEW;
-    },
+  setup(props, { slots }) {
+    const isView = computed(() => props.mode === _VIEW);
 
-    displayValue() {
-      if (Array.isArray(this.value) && this.value.length === 0) {
+    const displayValue = computed(() => {
+      if (Array.isArray(props.value) && props.value.length === 0) {
         return '';
       } else {
-        return this.value;
+        return props.value;
       }
-    }
-  }
-});
+    });
 
-export default component;
+    return () => {
+      if (isView.value) {
+        return h('div', { class: 'label' }, [
+          h('div', { class: 'text-label' }, slots.name ? slots.name : props.name),
+          h('div', { class: 'value' }, slots.value ? slots.value : displayValue.value)
+        ]);
+      } else {
+        return slots.default;
+      }
+    };
+  }
+};
 </script>
 
 <style lang="scss" scoped>

package/components/KeyValueView.vue

@@ -187,9 +187,11 @@ export default {
         </div>
       </div>
 
-      <template v-for="(row,i) in rows">
+      <template
+        v-for="(row,i) in rows"
+        :key="i"
+      >
         <div
-          :key="i+'key'"
           class="kv-item key"
         >
           <slot
@@ -202,7 +204,6 @@ export default {
         </div>
 
         <div
-          :key="i+'value'"
           class="kv-item value"
         >
           <slot

package/components/LandingPagePreference.vue

@@ -111,7 +111,7 @@ export default {
       :value="afterLoginRoute"
       name="login-route"
       :options="routeRadioOptions"
-      @input="updateLoginRoute"
+      @update:value="updateLoginRoute"
     >
       <template #2="{option, listeners}">
         <div class="custom-page">
@@ -119,10 +119,11 @@ export default {
             :label="option.label"
             :val="false"
             :value="afterLoginRoute=== 'home' || afterLoginRoute === 'last-visited'"
+            @update:value="afterLoginRoute = false"
             v-on="listeners"
           />
           <Select
-            v-model="routeFromDropdown"
+            v-model:value="routeFromDropdown"
             :searchable="true"
             :disabled="afterLoginRoute === 'home' || afterLoginRoute === 'last-visited'"
             :clearable="false"

package/components/LazyImage.vue

@@ -29,7 +29,7 @@ export default {
     this.loadImage();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     const img = this.$refs.img;
 
     if (img) {

package/components/Loading.vue

@@ -29,7 +29,7 @@ export default {
     }, 250);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   }
 };

package/components/LocaleSelector.vue

@@ -51,7 +51,7 @@ export default {
   <div>
     <div v-if="mode === 'login'">
       <div v-if="showLocale">
-        <v-popover
+        <v-dropdown
           popover-class="localeSelector"
           placement="top"
           trigger="click"
@@ -63,7 +63,7 @@ export default {
             {{ selectedLocaleLabel }}
             <i class="icon icon-fw icon-sort-down" />
           </a>
-          <template slot="popover">
+          <template #popper>
             <ul
               class="list-unstyled dropdown"
               style="margin: -1px;"
@@ -84,14 +84,14 @@ export default {
               </li>
             </ul>
           </template>
-        </v-popover>
+        </v-dropdown>
       </div>
     </div>
     <div v-else>
       <Select
         :value="selectedOption"
         :options="localesOptions"
-        @input="switchLocale($event)"
+        @update:value="switchLocale($event)"
       />
     </div>
   </div>

package/components/Markdown.vue

@@ -76,7 +76,7 @@ export default {
 
 <style lang="scss">
 
-::v-deep {
+:deep() {
   P {
     font-size: initial;
     line-height: initial;

package/components/ModalWithCard.vue

@@ -70,10 +70,7 @@ export default {
       :show-highlight-border="false"
     >
       <template #title>
-        <h4
-          slot="title"
-          class="text-default-text"
-        >
+        <h4 class="text-default-text">
           <slot name="title" />
         </h4>
       </template>

package/components/MoveModal.vue

@@ -99,30 +99,29 @@ export default {
       class="move-modal-card"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        class="text-default-text"
-      >
-        {{ t('moveModal.title') }}
-      </h4>
-      <div slot="body">
+      <template #title>
+        <h4 class="text-default-text">
+          {{ t('moveModal.title') }}
+        </h4>
+      </template>
+      <template #body>
         <div>
           {{ t('moveModal.description') }}
           <ul class="namespaces">
             <li
-              v-for="namespace in toMove"
-              :key="namespace.id"
+              v-for="(namespace, i) in toMove"
+              :key="i"
             >
               {{ namespace.nameDisplay }}
             </li>
           </ul>
         </div>
         <LabeledSelect
-          v-model="targetProject"
+          v-model:value="targetProject"
           :options="projectOptions"
           :label="t('moveModal.targetProject')"
         />
-      </div>
+      </template>
       <template #actions>
         <button
           class="btn role-secondary"

package/components/PercentageBar.vue

@@ -16,7 +16,7 @@ export default {
     /**
      * A value representing the percentage to be displayed. *Must be a value between 0 and 100*.
      */
-    value: {
+    modelValue: {
       type:     Number,
       required: true,
       validator(value) {
@@ -68,7 +68,7 @@ export default {
         if (isLess) {
           let i = thresholds.length - 1;
 
-          while (this.value < thresholds[i]) {
+          while (this.modelValue < thresholds[i]) {
             i--;
           }
 
@@ -76,7 +76,7 @@ export default {
         } else {
           let i = 0;
 
-          while (this.value > thresholds[i]) {
+          while (this.modelValue > thresholds[i]) {
             i++;
           }
 
@@ -85,8 +85,8 @@ export default {
       }
       const threshold = isLess ? 80 : 20;
 
-      const left = isLess ? this.value : threshold;
-      const right = isLess ? threshold : this.value;
+      const left = isLess ? this.modelValue : threshold;
+      const right = isLess ? threshold : this.modelValue;
 
       if (left <= right) {
         return '--primary';
@@ -95,7 +95,7 @@ export default {
       return '--error';
     },
     formattedPercentage() {
-      return formatPercent(this.value);
+      return formatPercent(this.modelValue);
     }
   },
 };
@@ -104,7 +104,7 @@ export default {
 <template>
   <span class="percentage-bar">
     <Bar
-      :percentage="value"
+      :percentage="modelValue"
       :primary-color="primaryColor"
       :slices="slices"
     />

package/components/PodSecurityAdmission.vue

@@ -128,7 +128,7 @@ export default defineComponent({
     updateLabels(): void {
       const nonPSALabels = pickBy(this.labels, (_, key) => !key.includes(this.labelsPrefix));
       const labels = PSAModes.reduce((acc, mode) => {
-        return this.psaControls[mode].active || this.labelsAlwaysActive ? {
+        return this.psaControls[mode]?.active || this.labelsAlwaysActive ? {
           ...acc,
           // Set default level if none
           [`${ this.labelsPrefix }${ mode }`]:         this.psaControls[mode].level || PSADefaultLevel,
@@ -213,18 +213,18 @@ export default defineComponent({
 
     <div
       v-for="(psaControl, level, i) in psaControls"
-      :key="'psaControl-' + i"
+      :key="i"
       class="row row--y-center mb-20"
     >
       <span class="col span-2">
         <Checkbox
           v-if="!labelsAlwaysActive"
-          v-model="psaControl.active"
+          v-model:value="psaControl.active"
           :data-testid="componentTestid + '--psaControl-' + i + '-active'"
           :label="level"
           :label-key="`podSecurityAdmission.labels.${ level }`"
           :disabled="isView"
-          @input="updateLabels()"
+          @update:value="updateLabels()"
         />
         <p v-else>
           <t :k="`podSecurityAdmission.labels.${level}`" />
@@ -237,24 +237,24 @@ export default defineComponent({
           span-4"
       >
         <LabeledSelect
-          v-model="psaControl.level"
+          v-model:value="psaControl.level"
           :data-testid="componentTestid + '--psaControl-' + i + '-level'"
           :disabled="isPsaControlDisabled(psaControl.active)"
           :options="options"
           :mode="mode"
-          @input="updateLabels()"
+          @update:value="updateLabels()"
         />
       </span>
 
       <span class="col span-4">
         <LabeledInput
-          v-model="psaControl.version"
+          v-model:value="psaControl.version"
           :data-testid="componentTestid + '--psaControl-' + i + '-version'"
           :disabled="isPsaControlDisabled(psaControl.active)"
           :options="options"
           :placeholder="t('podSecurityAdmission.version.placeholder', { psaControl: mode })"
           :mode="mode"
-          @input="updateLabels()"
+          @update:value="updateLabels()"
         />
       </span>
     </div>
@@ -272,28 +272,28 @@ export default defineComponent({
 
       <div
         v-for="(psaExemptionsControl, dimension, i) in psaExemptionsControls"
-        :key="'psaExemptionsControl-' + i"
+        :key="i"
         class="row row--y-center mb-20"
       >
         <span class="col span-2">
           <Checkbox
-            v-model="psaExemptionsControl.active"
+            v-model:value="psaExemptionsControl.active"
             :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-active'"
             :label="dimension"
             :label-key="`podSecurityAdmission.labels.${ dimension }`"
             :disabled="isView"
-            @input="updateExemptions()"
+            @update:value="updateExemptions()"
           />
         </span>
         <span class="col span-8">
           <LabeledInput
-            v-model="psaExemptionsControl.value"
+            v-model:value="psaExemptionsControl.value"
             :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-value'"
             :disabled="(isView || !psaExemptionsControl.active)"
             :options="options"
             :placeholder="t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })"
             :mode="mode"
-            @input="updateExemptions()"
+            @update:value="updateExemptions()"
           />
         </span>
       </div>

package/components/PromptChangePassword.vue

@@ -49,20 +49,20 @@ export default {
       class="prompt-password"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        class="text-default-text"
-      >
-        {{ t("changePassword.title") }}
-      </h4>
-      <div slot="body">
+      <template #title>
+        <h4 class="text-default-text">
+          {{ t("changePassword.title") }}
+        </h4>
+      </template>
+
+      <template #body>
         <form @submit.prevent>
           <ChangePassword
             ref="changePassword"
             @valid="valid = $event"
           />
         </form>
-      </div>
+      </template>
 
       <template #actions>
         <!-- type reset is required by lastpass -->
@@ -88,7 +88,7 @@ export default {
 
 <style lang="scss" scoped>
   .prompt-password {
-    ::v-deep .card-wrap {
+    :deep() .card-wrap {
       display: flex;
       flex-direction: column;
 

package/components/PromptModal.vue

@@ -74,7 +74,7 @@ export default {
 
     // We're using register instead of just making use of $refs because the $refs is always undefined when referencing the component
     registerBackgroundClosing(fn) {
-      this.$set(this, 'backgroundClosing', fn);
+      this['backgroundClosing'] = fn;
     }
   },
 };

package/components/PromptRemove.vue

@@ -350,13 +350,12 @@ export default {
       class="prompt-remove"
       :show-highlight-border="false"
     >
-      <h4
-        slot="title"
-        class="text-default-text"
-      >
-        {{ t('promptRemove.title') }}
-      </h4>
-      <div slot="body">
+      <template #title>
+        <h4 class="text-default-text">
+          {{ t('promptRemove.title') }}
+        </h4>
+      </template>
+      <template #body>
         <div class="mb-10">
           <template v-if="!hasCustomRemove">
             {{ t('promptRemove.attemptingToRemove', { type }) }} <span
@@ -364,36 +363,34 @@ export default {
             />
           </template>
 
-          <template>
-            <component
-              :is="removeComponent"
-              v-if="hasCustomRemove"
-              ref="customPrompt"
-              v-model="toRemove"
-              v-bind="_data"
-              :close="close"
-              :needs-confirm="needsConfirm"
-              :value="toRemove"
-              :names="names"
-              :type="type"
-              :done-location="doneLocation"
-              @errors="e => error = e"
-              @done="done"
+          <component
+            :is="removeComponent"
+            v-if="hasCustomRemove"
+            ref="customPrompt"
+            v-model:value="toRemove"
+            v-bind="_data"
+            :close="close"
+            :needs-confirm="needsConfirm"
+            :value="toRemove"
+            :names="names"
+            :type="type"
+            :done-location="doneLocation"
+            @errors="e => error = e"
+            @done="done"
+          />
+          <div
+            v-if="needsConfirm"
+            class="mt-10"
+          >
+            <span
+              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
             />
-            <div
-              v-if="needsConfirm"
-              class="mt-10"
-            >
-              <span
-                v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
-              />
-            </div>
-          </template>
+          </div>
         </div>
         <LabeledInput
           v-if="needsConfirm"
           id="confirm"
-          v-model="confirmName"
+          v-model:value="confirmName"
           v-focus
           :data-testid="componentTestid + '-input'"
           type="text"
@@ -412,21 +409,21 @@ export default {
           </div>
           <Checkbox
             v-if="chartsToRemoveIsApp"
-            v-model="chartsDeleteCrd"
+            v-model:value="chartsDeleteCrd"
             label-key="promptRemoveApp.removeCrd"
             class="mt-10 type"
-            @input="chartAddCrdToRemove"
+            @update:value="chartAddCrdToRemove"
           />
-        </labeledinput>
-        <template v-else>
+        </LabeledInput>
+        <div v-else-if="!hasCustomRemove">
           <div class="text-warning mb-10 mt-10">
             {{ warning }}
           </div>
           <div class="text-error mb-10 mt-10">
             {{ error }}
           </div>
-        </template>
-      </div>
+        </div>
+      </template>
       <template #actions>
         <button
           class="btn role-secondary"