@rancher/shell 2.0.0 → 3.0.0-rc.1

package/components/DisableAuthProviderModal.vue

@@ -47,17 +47,16 @@ export default {
       class="disable-auth-provider"
       :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">
           <p v-clean-html="t('promptRemove.attemptingToRemoveAuthConfig', null, true)" />
         </div>
-      </div>
+      </template>
       <template #actions>
         <button
           class="btn role-secondary"

package/components/EmberPage.vue

@@ -138,7 +138,7 @@ export default {
     this.initFrame();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('message', this.receiveMessage);
 
     if (this.heightSync) {

package/components/EtcdInfoBanner.vue

@@ -68,7 +68,7 @@ export default {
             margin-right: 5px;
         }
 
-        & ::v-deep label {
+        & :deep() label {
             color: var(--info);
         }
     }

package/components/ExplorerMembers.vue

@@ -48,15 +48,15 @@ export default {
 
     const projectRoleTemplateBindingSchema = this.$store.getters['rancher/schemaFor'](NORMAN.PROJECT_ROLE_TEMPLATE_BINDING);
 
-    this.$set(this, 'normanClusterRTBSchema', clusterRoleTemplateBindingSchema);
-    this.$set(this, 'normanProjectRTBSchema', projectRoleTemplateBindingSchema);
+    this['normanClusterRTBSchema'] = clusterRoleTemplateBindingSchema;
+    this['normanProjectRTBSchema'] = projectRoleTemplateBindingSchema;
 
     if (clusterRoleTemplateBindingSchema) {
       Promise.all([
         this.$store.dispatch(`rancher/findAll`, { type: NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING }, { root: true }),
         this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING })
       ]).then(([normanBindings]) => {
-        this.$set(this, 'normanClusterRoleTemplateBindings', normanBindings);
+        this['normanClusterRoleTemplateBindings'] = normanBindings;
         this.loadingClusterBindings = false;
       });
     }
@@ -64,13 +64,13 @@ export default {
     if (projectRoleTemplateBindingSchema) {
       this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING }, { root: true })
         .then((bindings) => {
-          this.$set(this, 'projectRoleTemplateBindings', bindings);
+          this['projectRoleTemplateBindings'] = bindings;
           this.loadingProjectBindings = false;
         });
     }
 
     this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT })
-      .then((projects) => this.$set(this, 'projects', projects));
+      .then((projects) => (this['projects'] = projects));
 
     const hydration = {
       normanPrincipals:  this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
@@ -365,7 +365,6 @@ export default {
             <span
               v-for="(role, j) in row.allRoles"
               :key="j"
-
               ref="value"
               :data-testid="`role-value-${j}`"
               class="role"
@@ -385,11 +384,11 @@ export default {
             </span>
           </template>
           <template
-            v-for="project in projectsWithoutRoles"
+            v-for="(project, i) in projectsWithoutRoles"
+            :key="i"
             v-slot:[slotName(project)]
           >
             <tr
-              :key="project.id"
               class="main-row"
             >
               <td
@@ -438,7 +437,7 @@ export default {
 }
 
 .project-members {
-  & ::v-deep .group-bar{
+  & :deep() .group-bar{
     display: flex;
     justify-content: space-between;
   }

package/components/ExplorerProjectsNamespaces.vue

@@ -358,7 +358,7 @@ export default {
 </script>
 
 <template>
-  <div class="project-namespaces">
+  <div class="project-namespaces outlet">
     <Masthead
       :schema="projectSchema"
       :type-display="t('projectNamespaces.label')"
@@ -372,7 +372,7 @@ export default {
     >
       <template
         v-if="showCreateNsButton"
-        slot="extraActions"
+        #extraActions
       >
         <router-link
           :to="createNamespaceLocationFlatList()"
@@ -391,8 +391,8 @@ export default {
     />
     <ResourceTable
       ref="table"
+      v-bind="{...$attrs, class: null }"
       class="table project-namespaces-table"
-      v-bind="$attrs"
       :schema="schema"
       :headers="headers"
       :rows="filteredRows"
@@ -401,7 +401,6 @@ export default {
       :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
-      v-on="$listeners"
     >
       <template #group-by="group">
         <div
@@ -473,11 +472,11 @@ export default {
         </div>
       </template>
       <template
-        v-for="project in projectsWithoutNamespaces"
+        v-for="(project, i) in projectsWithoutNamespaces"
+        :key="i"
         v-slot:[slotName(project)]
       >
         <tr
-          :key="project.id"
           class="main-row"
         >
           <td
@@ -504,7 +503,7 @@ export default {
 </template>
 <style lang="scss" scoped>
 .project-namespaces {
-  & ::v-deep {
+  & :deep() {
     .project-namespaces-table table {
       table-layout: fixed;
     }

package/components/FileDiff.vue

@@ -120,7 +120,7 @@ export default {
 <style scoped lang="scss">
 @import 'node_modules/diff2html/bundles/css/diff2html.min.css';
 
-::v-deep .d2h-wrapper {
+:deep() .d2h-wrapper {
   .d2h-file-header {
     display: none;
   }

package/components/FixedBanner.vue

@@ -115,6 +115,7 @@ export default {
 
   watch: {
     bannerSetting: {
+      deep: true,
       handler(neu) {
         if (neu?.value && neu.value !== '') {
           try {

package/components/GlobalRoleBindings.vue

@@ -326,7 +326,7 @@ export default {
     <form v-if="selectedRoles">
       <div
         v-for="(sortedRole, roleType) in sortedRoles"
-        :key="getUnique(roleType)"
+        :key="roleType"
         class="role-group mb-10"
       >
         <Card
@@ -348,20 +348,19 @@ export default {
               :class="'checkbox-section--' + roleType"
             >
               <div
-                v-for="role in sortedRoles[roleType]"
-                :key="getUnique(roleType, role.id)"
+                v-for="(role, i) in sortedRoles[roleType]"
+                :key="i"
                 class="checkbox mb-10 mr-10"
               >
                 <Checkbox
-                  :key="getUnique(roleType, role.id, 'checkbox')"
-                  v-model="selectedRoles"
+                  v-model:value="selectedRoles"
                   :value-when-true="role.id"
                   :disabled="!!assignOnlyRoles[role.id]"
                   :label="role.nameDisplay"
                   :description="role.descriptionDisplay"
                   :mode="mode"
                   :data-testId="'grb-checkbox-' + role.id"
-                  @input="checkboxChanged"
+                  @update:value="checkboxChanged"
                 >
                   <template #label>
                     <div class="checkbox-label-slot">

package/components/GradientBox.vue

@@ -42,10 +42,9 @@ export default {
     style() {
       if (!this.plain) {
         const background = `background: transparent linear-gradient(94deg, ${ this.leftColor } 0%, ${ this.rightColor } 100%) 0% 0% no-repeat padding-box;`;
-        const border = this.showBorder ? `border: 1px solid ${ this.primaryColor };` : '';
         const borderLeft = this.showTab ? `border-left: 9px solid ${ this.primaryColor };` : '';
 
-        return `${ background }${ border }${ borderLeft }`;
+        return `${ background }${ borderLeft }`;
       }
 
       return '';

package/components/GrafanaDashboard.vue

@@ -95,7 +95,7 @@ export default {
     this.$refs.frame.onload = this.inject;
     this.poll();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.interval) {
       clearInterval(this.interval);
     }
@@ -114,10 +114,12 @@ export default {
       this.interval = setInterval(() => {
         try {
           const graphWindow = this.$refs.frame?.contentWindow;
-          const errorElements = graphWindow.document.getElementsByClassName('alert-error');
-          const errorCornerElements = graphWindow.document.getElementsByClassName('panel-info-corner--error');
-          const panelInFullScreenElements = graphWindow.document.getElementsByClassName('panel-in-fullscreen');
-          const panelContainerElements = graphWindow.document.getElementsByClassName('panel-container');
+
+          // Note. getElementsByClassName won't work, following a grafana bump class names are now unique - for example css-2qng6u-panel-container
+          const errorElements = graphWindow.document.querySelectorAll('[class$="alert-error');
+          const errorCornerElements = graphWindow.document.querySelectorAll('[class$="panel-info-corner--error');
+          const panelInFullScreenElements = graphWindow.document.querySelectorAll('[class$="panel-in-fullscreen');
+          const panelContainerElements = graphWindow.document.querySelectorAll('[class$="panel-container');
           const error = errorElements.length > 0 || errorCornerElements.length > 0;
           const loaded = panelInFullScreenElements.length > 0 || panelContainerElements.length > 0;
           const errorMessageElms = graphWindow.document.getElementsByTagName('pre');
@@ -128,11 +130,11 @@ export default {
             throw new Error('An error was detected in the iframe');
           }
 
-          this.$set(this, 'loading', !loaded);
-          this.$set(this, 'error', isFailure);
+          this['loading'] = !loaded;
+          this['error'] = isFailure;
         } catch (ex) {
-          this.$set(this, 'error', true);
-          this.$set(this, 'loading', false);
+          this['error'] = true;
+          this['loading'] = false;
           clearInterval(this.interval);
           this.interval = null;
         }
@@ -285,7 +287,7 @@ export default {
   min-height: 100%;
   min-width: 100%;
 
-  & ::v-deep .content {
+  & :deep() .content {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -296,7 +298,7 @@ export default {
     padding: 0;
   }
 
-  & ::v-deep .overlay {
+  & :deep() .overlay {
     position: static;
     background-color: initial;
   }

package/components/GrowlManager.vue

@@ -87,7 +87,7 @@ export default {
     <div class="growl-list">
       <div
         v-for="(growl, idx) in stack"
-        :key="growl.id"
+        :key="idx"
         :data-testid="`growl-list-item-${idx}`"
         :class="{'growl': true, ['bg-'+growl.color]: true}"
       >

package/components/HarvesterServiceAddOnConfig.vue

@@ -176,7 +176,7 @@ export default {
       <div class="col span-6">
         <LabeledSelect
           v-if="showShareIP"
-          v-model="sharedService"
+          v-model:value="sharedService"
           :mode="mode"
           :options="serviceOptions"
           :label="t('servicesPage.harvester.shareIP.label')"
@@ -184,7 +184,7 @@ export default {
         />
         <LabeledSelect
           v-else
-          v-model="ipam"
+          v-model:value="ipam"
           :mode="mode"
           :options="ipamOptions"
           :label="t('servicesPage.harvester.ipam.label')"

package/components/IconOrSvg.vue

@@ -16,7 +16,6 @@
  * and then injecting custom css into the document so that any icons included via svg will
  * show with the desired colors for the theme.
  */
-import Vue from 'vue';
 import { Solver } from '@shell/utils/svg-filter';
 import { colorToRgb, mapStandardColors, normalizeHex } from '@shell/utils/color';
 
@@ -153,7 +152,7 @@ export default {
         cssCache[className] = true;
       }
 
-      Vue.set(this, 'className', className);
+      this['className'] = className;
     }
   }
 };

package/components/Import.vue

@@ -139,11 +139,12 @@ export default {
             </div>
             <div class="col span-6">
               <LabeledSelect
-                v-model="defaultNamespace"
+                :value="defaultNamespace"
                 class="pull-right"
                 :options="namespaceOptions"
                 label-key="import.defaultNamespace.label"
                 mode="edit"
+                @update:value="newValue => defaultNamespace = newValue"
               />
             </div>
           </div>
@@ -170,7 +171,7 @@ export default {
       <YamlEditor
         v-else
         ref="yamleditor"
-        v-model="currentYaml"
+        v-model:value="currentYaml"
         class="yaml-editor"
       />
       <Banner
@@ -229,7 +230,7 @@ export default {
     min-height: $min;
     max-height: $max;
 
-    ::v-deep .code-mirror {
+    :deep() .code-mirror {
       .CodeMirror {
         position: initial;
       }

package/components/Inactivity.vue

@@ -62,7 +62,7 @@ export default {
       this.addIdleListeners();
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.removeEventListener();
     this.clearAllTimeouts();
   },
@@ -198,7 +198,7 @@ export default {
       <PercentageBar
         v-if="!isInactive"
         class="mt-20"
-        :value="timerPercentageLeft"
+        :modelValue="timerPercentageLeft"
         :color-stops="colorStops"
       />
     </template>

package/components/IndentedPanel.vue

@@ -5,7 +5,6 @@ export default {};
 <template>
   <div
     class="indented-panel"
-    v-on="$listeners"
   >
     <slot />
   </div>

package/components/InputOrDisplay.vue

@@ -1,8 +1,9 @@
 <script>
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
+const vueApp = createApp({});
 
-const component = Vue.component('InputOrDisplay', {
+const component = vueApp.component('InputOrDisplay', {
   render(h) {
     if (this.isView) {
       return h('div',

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 #popover>
             <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"
     />