@rancher/shell 2.0.0 → 3.0.0-rc.1

package/chart/rancher-backup/index.vue

@@ -1,5 +1,6 @@
 <script>
 import Tab from '@shell/components/Tabbed/Tab';
+import Tabbed from '@shell/components/Tabbed';
 import S3 from '@shell/chart/rancher-backup/S3';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
@@ -14,6 +15,7 @@ import { STORAGE } from '@shell/config/labels-annotations';
 export default {
   components: {
     Tab,
+    Tabbed,
     RadioGroup,
     S3,
     LabeledInput,
@@ -21,8 +23,6 @@ export default {
     Banner
   },
 
-  hasTabs: true,
-
   props: {
     value: {
       type:    Object,
@@ -167,6 +167,9 @@ export default {
     updatePageValid(update) {
       this.$emit('valid', update);
     },
+    onTabChanged() {
+      window.scrollTop = 0;
+    }
   },
   get
 };
@@ -174,77 +177,82 @@ export default {
 
 <template>
   <div>
-    <Tab
-      label="Chart Options"
-      name="chartOptions"
+    <Tabbed
+      :side-tabs="true"
+      :hide-single-tab="true"
+      class="step__values__content with-name"
+      @changed="onTabChanged"
     >
-      <Banner
-        color="info"
-        :label="t('backupRestoreOperator.deployment.storage.tip')"
-      />
-      <RadioGroup
-        v-model="storageSource"
-        name="storageSource"
-        :label="t('backupRestoreOperator.deployment.storage.label')"
-        class="mb-10"
-        :options="radioOptions.options"
-        :labels="radioOptions.labels"
-      />
-      <S3
-        v-if="storageSource==='s3'"
-        :value="value.s3"
-        :mode="mode"
-        @valid="updatePageValid($event)"
-      />
-      <template v-else>
-        <div class="row">
-          <template v-if="storageSource === 'pickSC'">
-            <div class="col span-6">
+      <Tab
+        label="Chart Options"
+        name="chartOptions"
+      >
+        <Banner
+          color="info"
+          :label="t('backupRestoreOperator.deployment.storage.tip')"
+        />
+        <RadioGroup
+          v-model:value="storageSource"
+          name="storageSource"
+          :label="t('backupRestoreOperator.deployment.storage.label')"
+          class="mb-10"
+          :options="radioOptions.options"
+          :labels="radioOptions.labels"
+        />
+        <S3
+          v-if="storageSource==='s3'"
+          :value="value.s3"
+          :mode="mode"
+          @valid="updatePageValid($event)"
+        />
+        <template v-else>
+          <div class="row">
+            <template v-if="storageSource === 'pickSC'">
+              <div class="col span-6">
+                <LabeledSelect
+                  v-model:value="storageClass"
+                  :get-option-label="opt => opt.id || opt"
+                  :label="t('backupRestoreOperator.deployment.storage.storageClass.label')"
+                  :tooltip="reclaimWarning ? t('backupRestoreOperator.deployment.storage.warning', {type: 'Storage Class'}) : null"
+                  :mode="mode"
+                  :status="reclaimWarning ? 'warning' : null"
+                  :options="storageClasses"
+                  :hover-tooltip="true"
+                  data-testid="backup-chart-select-existing-storage-class"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledInput
+                  v-model:value="value.persistence.size"
+                  :mode="mode"
+                  :label="t('backupRestoreOperator.deployment.size')"
+                />
+              </div>
+            </template>
+            <div
+              v-else-if="storageSource === 'pickPV'"
+              class="col span-6"
+            >
               <LabeledSelect
-                :key="storageSource"
-                v-model="storageClass"
+                v-model:value="persistentVolume"
                 :get-option-label="opt => opt.id || opt"
-                :label="t('backupRestoreOperator.deployment.storage.storageClass.label')"
-                :tooltip="reclaimWarning ? t('backupRestoreOperator.deployment.storage.warning', {type: 'Storage Class'}) : null"
+                :label="t('backupRestoreOperator.deployment.storage.persistentVolume.label')"
+                :tooltip="reclaimWarning ? t('backupRestoreOperator.deployment.storage.warning', {type: 'Persistent Volume'}) : null"
                 :mode="mode"
                 :status="reclaimWarning ? 'warning' : null"
-                :options="storageClasses"
+                :options="availablePVs"
                 :hover-tooltip="true"
-                data-testid="backup-chart-select-existing-storage-class"
-              />
-            </div>
-            <div class="col span-6">
-              <LabeledInput
-                v-model="value.persistence.size"
-                :mode="mode"
-                :label="t('backupRestoreOperator.deployment.size')"
               />
             </div>
-          </template>
-          <div
-            v-else-if="storageSource === 'pickPV'"
-            class="col span-6"
-          >
-            <LabeledSelect
-              :key="storageSource"
-              v-model="persistentVolume"
-              :get-option-label="opt => opt.id || opt"
-              :label="t('backupRestoreOperator.deployment.storage.persistentVolume.label')"
-              :tooltip="reclaimWarning ? t('backupRestoreOperator.deployment.storage.warning', {type: 'Persistent Volume'}) : null"
-              :mode="mode"
-              :status="reclaimWarning ? 'warning' : null"
-              :options="availablePVs"
-              :hover-tooltip="true"
-            />
           </div>
-        </div>
-      </template>
-    </Tab>
+        </template>
+      </Tab>
+    </Tabbed>
   </div>
 </template>
 
 <style lang='scss' scoped>
-::v-deep .radio-group.label>SPAN {
+:deep() .radio-group.label>SPAN {
   font-size: 1em;
 }
 </style>

package/cloud-credential/__tests__/azure.test.ts

@@ -8,36 +8,26 @@ const mockStore = {
 
 describe('cloud credentials: Azure', () => {
   const wrapper = mount(AzureCloudCreds, {
-    propsData: {
+    props: {
       value: {
         decodedData: {
-          environment:    '',
-          subscriptionId: '',
-          clientId:       '',
-          clientSecret:   '',
+          environment:    'my-env',
+          subscriptionId: 'my-sub-id',
+          clientId:       'my-c-id',
+          clientSecret:   'my-c-secret',
         },
         setData: jest.fn()
       }
     },
-    mocks: { $store: mockStore }
+    global: { mocks: { $store: mockStore } }
   });
 
   it('should pass all the correct fields when checking if credentials are valid', async() => {
     const spyDispatch = jest.spyOn(mockStore, 'dispatch');
 
-    wrapper.setData({
-      value: {
-        decodedData: {
-          environment:    'my-env',
-          subscriptionId: 'my-sub-id',
-          clientId:       'my-c-id',
-          clientSecret:   'my-c-secret',
-        }
-      }
-    });
-
     await wrapper.vm.test();
 
+    expect(spyDispatch).toHaveBeenCalledTimes(1);
     expect(spyDispatch).toHaveBeenCalledWith('management/request', {
       data: {
         environment:    'my-env',

package/cloud-credential/__tests__/harvester.test.ts

@@ -5,8 +5,8 @@ const mockStore = { getters: { 'i18n/t': jest.fn() } };
 
 describe('cloud credentials: Harvester', () => {
   const wrapper = mount(HarvesterCloudCreds, {
-    propsData: { value: {} },
-    mocks:     { $store: mockStore }
+    props:  { value: {} },
+    global: { mocks: { $store: mockStore } }
   });
 
   it('should display the warning banner for token expiration', async() => {

package/cloud-credential/aws.vue

@@ -75,7 +75,7 @@ export default {
       placeholder-key="cluster.credential.aws.accessKey.placeholder"
       type="text"
       :mode="mode"
-      @input="value.setData('accessKey', $event);"
+      @update:value="value.setData('accessKey', $event);"
     />
     <LabeledInput
       :value="value.decodedData.secretKey"
@@ -84,7 +84,7 @@ export default {
       placeholder-key="cluster.credential.aws.secretKey.placeholder"
       type="password"
       :mode="mode"
-      @input="value.setData('secretKey', $event);"
+      @update:value="value.setData('secretKey', $event);"
     />
     <LabeledSelect
       :value="value.decodedData.defaultRegion"
@@ -94,7 +94,7 @@ export default {
       :mode="mode"
       :taggable="true"
       :options="knownRegions"
-      @input="value.setData('defaultRegion', $event);"
+      @update:value="value.setData('defaultRegion', $event);"
     />
     <p
       v-clean-html="t('cluster.credential.aws.defaultRegion.help', {}, true)"

package/cloud-credential/azure.vue

@@ -86,7 +86,7 @@ export default {
           :required="true"
           :label="t('cluster.credential.azure.environment.label')"
           data-testid="azure-cloud-credentials-environment"
-          @input="value.setData('environment', $event)"
+          @update:value="value.setData('environment', $event)"
         />
       </div>
       <div class="col span-6">
@@ -97,7 +97,7 @@ export default {
           :mode="mode"
           :required="true"
           data-testid="azure-cloud-credentials-subscription-id"
-          @input="value.setData('subscriptionId', $event)"
+          @update:value="value.setData('subscriptionId', $event)"
         />
       </div>
     </div>
@@ -110,7 +110,7 @@ export default {
           :mode="mode"
           :required="true"
           data-testid="azure-cloud-credentials-client-id"
-          @input="value.setData('clientId', $event)"
+          @update:value="value.setData('clientId', $event)"
         />
       </div>
       <div class="col span-6">
@@ -121,7 +121,7 @@ export default {
           :mode="mode"
           :required="true"
           data-testid="azure-cloud-credentials-client-secret"
-          @input="value.setData('clientSecret', $event)"
+          @update:value="value.setData('clientSecret', $event)"
         />
       </div>
     </div>

package/cloud-credential/digitalocean.vue

@@ -37,7 +37,7 @@ export default {
       placeholder-key="cluster.credential.digitalocean.accessToken.placeholder"
       type="password"
       :mode="mode"
-      @input="value.setData('accessToken', $event);"
+      @update:value="value.setData('accessToken', $event);"
     />
     <p
       v-clean-html="t('cluster.credential.digitalocean.accessToken.help', {}, true)"

package/cloud-credential/gcp.vue

@@ -56,7 +56,7 @@ export default {
       placeholder-key="cluster.credential.gcp.authEncodedJson.placeholder"
       type="multiline"
       :mode="mode"
-      @input="value.setData('authEncodedJson', $event);"
+      @update:value="value.setData('authEncodedJson', $event);"
     />
     <FileSelector
       class="role-primary btn-sm mt-20 mb-20"

package/cloud-credential/generic.vue

@@ -92,7 +92,7 @@ export default {
       :add-allowed="!hasSupport"
       :remove-allowed="!hasSupport"
       :initial-empty-row="true"
-      @input="update"
+      @update:value="update"
     />
   </div>
 </template>

package/cloud-credential/harvester.vue

@@ -110,7 +110,7 @@ export default {
         class="col span-6"
       >
         <LabeledSelect
-          v-model="cluster"
+          v-model:value="cluster"
           :mode="mode"
           :disabled="isEdit"
           :options="clusterOptions"

package/cloud-credential/linode.vue

@@ -37,7 +37,7 @@ export default {
       placeholder-key="cluster.credential.linode.accessToken.placeholder"
       type="password"
       :mode="mode"
-      @input="value.setData('token', $event);"
+      @update:value="value.setData('token', $event);"
     />
     <p
       v-clean-html="t('cluster.credential.linode.accessToken.help', {}, true)"

package/cloud-credential/pnap.vue

@@ -56,7 +56,7 @@ export default {
           placeholder-key="cluster.credential.pnap.clientIdentifier.placeholder"
           type="text"
           :mode="mode"
-          @input="value.setData('clientIdentifier', $event);"
+          @update:value="value.setData('clientIdentifier', $event);"
         />
       </div>
       <div class="col span-6">
@@ -66,7 +66,7 @@ export default {
           placeholder-key="cluster.credential.pnap.clientSecret.placeholder"
           type="text"
           :mode="mode"
-          @input="value.setData('clientSecret', $event);"
+          @update:value="value.setData('clientSecret', $event);"
         />
       </div>
     </div>

package/cloud-credential/s3.vue

@@ -74,7 +74,7 @@ export default {
           placeholder-key="cluster.credential.s3.accessKey.placeholder"
           type="text"
           :mode="mode"
-          @input="value.setData('accessKey', $event);"
+          @update:value="value.setData('accessKey', $event);"
         />
       </div>
       <div class="col span-6">
@@ -85,7 +85,7 @@ export default {
           placeholder-key="cluster.credential.s3.secretKey.placeholder"
           type="password"
           :mode="mode"
-          @input="value.setData('secretKey', $event);"
+          @update:value="value.setData('secretKey', $event);"
         />
       </div>
     </div>
@@ -97,7 +97,7 @@ export default {
           :mode="mode"
           label-key="cluster.credential.s3.defaultBucket.label"
           placeholder-key="cluster.credential.s3.defaultBucket.placeholder"
-          @input="value.setData('defaultBucket', $event)"
+          @update:value="value.setData('defaultBucket', $event)"
         />
       </div>
       <div class="col span-6">
@@ -106,7 +106,7 @@ export default {
           :mode="mode"
           label-key="cluster.credential.s3.defaultFolder.label"
           placeholder-key="cluster.credential.s3.defaultFolder.placeholder"
-          @input="value.setData('defaultFolder', $event)"
+          @update:value="value.setData('defaultFolder', $event)"
         />
       </div>
     </div>
@@ -120,7 +120,7 @@ export default {
           :mode="mode"
           :taggable="true"
           :options="knownRegions"
-          @input="value.setData('defaultRegion', $event);"
+          @update:value="value.setData('defaultRegion', $event);"
         />
       </div>
       <div class="col span-6">
@@ -129,7 +129,7 @@ export default {
           :mode="mode"
           label-key="cluster.credential.s3.defaultEndpoint.label"
           placeholder-key="cluster.credential.s3.defaultEndpoint.placeholder"
-          @input="value.setData('defaultEndpoint', $event)"
+          @update:value="value.setData('defaultEndpoint', $event)"
         />
       </div>
     </div>
@@ -139,7 +139,7 @@ export default {
         :value="value.decodedData.defaultSkipSSLVerify"
         :mode="mode"
         label-key="cluster.credential.s3.defaultSkipSSLVerify.label"
-        @input="value.setData('defaultSkipSSLVerify', $event)"
+        @update:value="value.setData('defaultSkipSSLVerify', $event)"
       />
 
       <LabeledInput
@@ -148,7 +148,7 @@ export default {
         type="multiline"
         label-key="cluster.credential.s3.defaultEndpointCA.label"
         placeholder-key="cluster.credential.s3.defaultEndpointCA.placeholder"
-        @input="value.setData('defaultEndpointCA', $event)"
+        @update:value="value.setData('defaultEndpointCA', $event)"
       />
     </div>
   </div>

package/cloud-credential/vmwarevsphere.vue

@@ -55,7 +55,7 @@ export default {
           placeholder-key="cluster.credential.vmwarevsphere.server.placeholder"
           :required="true"
           :mode="mode"
-          @input="value.setData('vcenter', $event);"
+          @update:value="value.setData('vcenter', $event);"
         />
       </div>
       <div class="col span-6">
@@ -67,7 +67,7 @@ export default {
           min="1"
           max="65535"
           :mode="mode"
-          @input="value.setData('vcenterPort', $event);"
+          @update:value="value.setData('vcenterPort', $event);"
         />
       </div>
     </div>
@@ -78,7 +78,7 @@ export default {
           label-key="cluster.credential.vmwarevsphere.username.label"
           :required="true"
           :mode="mode"
-          @input="value.setData('username', $event);"
+          @update:value="value.setData('username', $event);"
         />
       </div>
       <div class="col span-6">
@@ -88,7 +88,7 @@ export default {
           :required="true"
           type="password"
           :mode="mode"
-          @input="value.setData('password', $event);"
+          @update:value="value.setData('password', $event);"
         />
       </div>
     </div>

package/components/ActionDropdown.vue

@@ -46,7 +46,7 @@ export default {
 
   methods: {
     hasSlot(name = 'default') {
-      return !!this.$slots[name] || !!this.$scopedSlots[name];
+      return !!this.$slots[name] || !!this.$slots.name();
     },
 
     // allows parent components to programmatically open the dropdown
@@ -62,7 +62,7 @@ export default {
       class="dropdown-button bg-primary"
       :class="{'one-action':!dualAction, [buttonSize]:true, 'disabled': disableButton}"
     >
-      <v-popover
+      <v-dropdown
         placement="bottom"
         :container="false"
         :disabled="disableButton"
@@ -85,7 +85,7 @@ export default {
         <template #popover>
           <slot name="popover-content" />
         </template>
-      </v-popover>
+      </v-dropdown>
     </div>
   </div>
 </template>

package/components/ActionMenu.vue

@@ -257,7 +257,7 @@ export default {
     >
       <li
         v-for="(opt, i) in menuOptions"
-        :key="opt.action"
+        :key="i"
         :disabled="opt.disabled"
         :class="{divider: opt.divider}"
         :data-testid="componentTestid + '-' + i + '-item'"

package/components/AlertTable.vue

@@ -49,6 +49,7 @@ export default {
     ];
 
     return {
+      inStore:            this.$store.getters['currentProduct'].inStore,
       alertManagerPoller: new Poller(
         this.loadAlertManagerEvents,
         ALERTMANAGER_POLL_RATE_MS,
@@ -64,20 +65,29 @@ export default {
     this.fetchDeps();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.alertManagerPoller.stop();
   },
 
   methods: {
-    async loadAlertManagerEvents() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const alertsEvents = await this.$store.dispatch(
-        `${ inStore }/request`,
-        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/v1/alerts` }
+    async fetchAlertManagerEvents(version) {
+      return await this.$store.dispatch(
+        `${ this.inStore }/request`,
+        { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ this.monitoringNamespace }/services/http:${ this.alertServiceEndpoint }:9093/proxy/api/${ version }/alerts` }
       );
+    },
+
+    async loadAlertManagerEvents() {
+      let alertEvents;
+
+      try {
+        alertEvents = await this.fetchAlertManagerEvents('v2');
+      } catch (err) {
+        alertEvents = await this.fetchAlertManagerEvents('v1').then((res) => res?.data);
+      }
 
-      if (alertsEvents.data) {
-        this.allAlerts = alertsEvents.data;
+      if (alertEvents) {
+        this.allAlerts = alertEvents;
       }
     },
 

package/components/AppModal.vue

@@ -57,9 +57,13 @@ export default defineComponent({
   },
   computed: {
     modalWidth(): string {
-      const uom = typeof (this.width) === 'number' ? 'px' : '';
+      if (this.isValidWidth(this.width)) {
+        const uom = typeof (this.width) === 'number' ? 'px' : '';
 
-      return `${ this.width }${ uom }`;
+        return `${ this.width }${ uom }`;
+      }
+
+      return '600px';
     },
     stylesPropToObj(): object {
       return this.styles.split(';')
@@ -81,7 +85,7 @@ export default defineComponent({
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('keydown', this.handleEscapeKey);
   },
   methods: {
@@ -98,17 +102,24 @@ export default defineComponent({
       if (this.clickToClose && event.key === 'Escape') {
         this.$emit('close');
       }
+    },
+    isValidWidth(value: number | string) {
+      if (typeof value === 'number') {
+        return value > 0;
+      }
+
+      if (typeof value === 'string') {
+        return /^(0*(?:[1-9][0-9]*|0)\.?\d*)+(px|%)$/.test(value);
+      }
+
+      return false;
     }
   }
 });
 </script>
 
 <template>
-  <mounting-portal
-    mountTo="#modals"
-    name="source"
-    append
-  >
+  <teleport to="#modals">
     <transition
       name="modal-fade"
       appear
@@ -130,7 +141,7 @@ export default defineComponent({
         </div>
       </div>
     </transition>
-  </mounting-portal>
+  </teleport>
 </template>
 
 <style lang="scss">