@rancher/shell 0.1.0 → 0.1.1

package/edit/persistentvolume/plugins/photonPersistentDisk.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/persistentvolume/plugins/portworxVolume.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: { LabeledInput, RadioGroup },

package/edit/persistentvolume/plugins/quobyte.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: { LabeledInput, RadioGroup },

package/edit/persistentvolume/plugins/rbd.vue

@@ -1,11 +1,11 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 import ArrayList from '@shell/components/form/ArrayList';
 
 export default {
-  components: {
-    ArrayList, LabeledInput, RadioGroup
+  components: {
+    ArrayList, LabeledInput, RadioGroup
   },
   props:      {
     value:      {

package/edit/persistentvolume/plugins/scaleIO.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: { LabeledInput, RadioGroup },

package/edit/persistentvolume/plugins/storageos.vue

@@ -1,6 +1,6 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: { LabeledInput, RadioGroup },

package/edit/persistentvolume/plugins/vsphereVolume.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/persistentvolumeclaim.vue

@@ -1,18 +1,19 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tab from '@shell/components/Tabbed/Tab';
-import RadioGroup from '@shell/components/form/RadioGroup';
+import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import uniq from 'lodash/uniq';
-import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import { _CREATE, _EDIT, FOCUS, _VIEW } from '@shell/config/query-params';
 import { STORAGE_CLASS, PV } from '@shell/config/types';
 import StatusTable from '@shell/components/StatusTable';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Labels from '@shell/components/form/Labels';
+import { Banner } from '@components/Banner';
 
 const DEFAULT_STORAGE = '10Gi';
 
@@ -20,6 +21,7 @@ export default {
   name: 'PersistentVolumeClaim',
 
   components: {
+    Banner,
     Checkbox,
     CruResource,
     LabeledSelect,
@@ -73,6 +75,8 @@ export default {
       this.$set(this.value.spec, 'accessModes', defaultAccessModes);
     }
 
+    const defaultTab = this.$route.query[FOCUS] || null;
+
     return {
       sourceOptions,
       source:                  this.value.spec.volumeName ? sourceOptions[1].value : sourceOptions[0].value,
@@ -80,6 +84,7 @@ export default {
       persistentVolumeOptions: [],
       persistentVolumes:       [],
       storageClassOptions:     [],
+      defaultTab,
     };
   },
   computed: {
@@ -122,13 +127,10 @@ export default {
         this.$set(this.value.spec, 'storageClassName', '');
       }
     },
-    allowVolumeExpansion() {
-      return this.$store.getters[`cluster/byId`](STORAGE_CLASS, this.value?.spec?.storageClassName)?.allowVolumeExpansion;
-    },
     storageAmountMode() {
       if (this.isCreate) {
         return _CREATE;
-      } else if (this.isEdit && this.allowVolumeExpansion) {
+      } else if (this.isEdit && this.value.expandable && this.value.bound) {
         return _EDIT;
       }
 
@@ -138,6 +140,13 @@ export default {
   created() {
     this.registerBeforeHook(this.willSave, 'willSave');
   },
+  mounted() {
+    const focus = this.$refs.volumeSize?.focus;
+
+    if (this.defaultTab === 'volumeclaim' && focus) {
+      setTimeout(() => focus());
+    }
+  },
   methods: {
     checkboxSetter(key, value) {
       if (value) {
@@ -191,7 +200,7 @@ export default {
       :namespaced="true"
     />
 
-    <ResourceTabs v-model="value" :mode="mode" :side-tabs="true">
+    <ResourceTabs v-model="value" :mode="mode" :side-tabs="true" :default-tab="defaultTab">
       <Tab name="volumeclaim" :label="t('persistentVolumeClaim.volumeClaim.label')" :weight="4">
         <div class="row">
           <div class="col span-6">
@@ -222,6 +231,7 @@ export default {
             <div class="row">
               <div class="col span-12 mt-10">
                 <UnitInput
+                  ref="volumeSize"
                   v-model="value.spec.resources.requests.storage"
                   :label="t('persistentVolumeClaim.volumeClaim.requestStorage')"
                   :mode="storageAmountMode"
@@ -230,6 +240,12 @@ export default {
                   :increment="1024"
                   :min="1"
                 />
+                <Banner v-if="isEdit && !value.expandable" color="info" class="mt-10">
+                  {{ t('persistentVolumeClaim.expand.notSupported') }}
+                </Banner>
+                <Banner v-else-if="isEdit && !value.bound" color="info" class="mt-10">
+                  {{ t('persistentVolumeClaim.expand.notBound') }}
+                </Banner>
               </div>
             </div>
           </div>

package/edit/provisioning.cattle.io.cluster/ACE.vue

@@ -1,6 +1,6 @@
 <script>
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
 import { set } from '@shell/utils/object';
 import isEmpty from 'lodash/isEmpty';

package/edit/provisioning.cattle.io.cluster/CustomCommand.vue

@@ -1,9 +1,9 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import InfoBox from '@shell/components/InfoBox';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import CopyCode from '@shell/components/CopyCode';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import KeyValue from '@shell/components/form/KeyValue';
 import Taints from '@shell/components/form/Taints';
 import { MANAGEMENT } from '@shell/config/types';
@@ -213,6 +213,11 @@ function sanitizeValue(v) {
       <template v-if="cluster.supportsWindows">
         <hr class="mt-20 mb-20" />
         <h4 v-t="'cluster.custom.registrationCommand.windowsDetail'" />
+        <Banner
+          v-if="cluster.isRke1"
+          color="warning"
+          :label="t('cluster.custom.registrationCommand.windowsDeprecatedForRKE1')"
+        />
         <template v-if="readyForWindows">
           <CopyCode
             id="copiedWindows"

package/edit/provisioning.cattle.io.cluster/DrainOptions.vue

@@ -1,6 +1,6 @@
 <script>
-import RadioGroup from '@shell/components/form/RadioGroup.vue';
-import Checkbox from '@shell/components/form/Checkbox.vue';
+import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import UnitInput from '@shell/components/form/UnitInput.vue';
 
 const DEFAULTS = {

package/edit/provisioning.cattle.io.cluster/MachinePool.vue

@@ -1,13 +1,13 @@
 <script>
 
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
 import { _EDIT } from '@shell/config/query-params';
 import { importMachineConfig } from '@shell/utils/dynamic-importer';
 import Taints from '@shell/components/form/Taints.vue';
 import KeyValue from '@shell/components/form/KeyValue.vue';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import UnitInput from '@shell/components/form/UnitInput.vue';
 import { randomStr } from '@shell/utils/string';
 
@@ -50,6 +50,16 @@ export default {
       type:     String,
       required: true,
     },
+
+    idx: {
+      type:     Number,
+      required: true,
+    },
+
+    machinePools: {
+      type:    Array,
+      default: () => []
+    },
   },
 
   data() {
@@ -177,6 +187,8 @@ export default {
       :value="value.config"
       :provider="provider"
       :credential-id="credentialId"
+      :pool-index="idx"
+      :machine-pools="machinePools"
       @error="e=>errors = e"
     />
     <Banner v-else color="info" label="You do not have access to see this machine pool's configuration." />

package/edit/provisioning.cattle.io.cluster/RegistryConfigs.vue

@@ -1,8 +1,8 @@
 <script>
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { set } from '@shell/utils/object';
-import LabeledInput from '@shell/components/form/LabeledInput';
-import Checkbox from '@shell/components/form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SecretSelector from '@shell/components/form/SecretSelector';
@@ -92,6 +92,19 @@ export default {
 
       set(this.value, 'spec.rkeConfig.registries.configs', configs);
     },
+
+    wrapRegisterBeforeHook(fn, ...args) {
+      async function wrapFn(...params) {
+        const result = await fn(...params);
+
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(result);
+          }, 50);
+        });
+      }
+      this.clusterRegisterBeforeHook(wrapFn, ...args);
+    }
   }
 };
 </script>
@@ -116,7 +129,7 @@ export default {
 
             <SelectOrCreateAuthSecret
               v-model="row.value.authConfigSecretName"
-              :register-before-hook="clusterRegisterBeforeHook"
+              :register-before-hook="wrapRegisterBeforeHook"
               :append-unique-id-to-hook="true"
               in-store="management"
               :allow-ssh="false"

package/edit/provisioning.cattle.io.cluster/S3Config.vue

@@ -1,6 +1,6 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
 import { NORMAN } from '@shell/config/types';
 

package/edit/provisioning.cattle.io.cluster/SelectCredential.vue

@@ -5,7 +5,7 @@ import { NORMAN, DEFAULT_WORKSPACE } from '@shell/config/types';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { importCloudCredential } from '@shell/utils/dynamic-importer';
 import { CAPI } from '@shell/config/labels-annotations';
 import { clear } from '@shell/utils/array';

package/edit/provisioning.cattle.io.cluster/__tests__/CustomCommand.tests.ts

@@ -1,10 +1,5 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import CustomCommand from '@shell/edit/provisioning.cattle.io.cluster/CustomCommand.vue';
-import VTooltip from 'v-tooltip';
-
-const localVue = createLocalVue();
-
-localVue.use(VTooltip);
 
 describe('component: CustomCommand', () => {
   it('should return linux commands with the right flags based on cluster information', () => {
@@ -19,7 +14,6 @@ describe('component: CustomCommand', () => {
           nodeCommand:         ` curl -fL ${ ip }/system-agent-install.sh | sudo  sh -s - --server ${ ip } --label 'cattle.io/os=linux' --token ${ token } --ca-checksum ${ checkSum }`
         }
       },
-      localVue,
       // stubs: { CopyCode: { template: '<div></div> ' } },
       data:     () => ({
         address:         '',

package/edit/provisioning.cattle.io.cluster/import.vue

@@ -8,7 +8,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { CAPI, HCI } from '@shell/config/types';
 import ClusterMembershipEditor from '@shell/components/form/Members/ClusterMembershipEditor';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { canViewClusterMembershipEditor } from '@shell/components/form/Members/ClusterMembershipEditor.vue';
 import { NAME as HARVESTER_MANAGER } from '@shell/config/product/harvester-manager';
 import { HARVESTER as HARVESTER_FEATURE, mapFeature } from '@shell/store/features';
@@ -131,6 +131,7 @@ export default {
     :mode="mode"
     :resource="value"
     :errors="errors"
+    component-testid="cluster-manager-import"
     @finish="saveOverride"
     @error="e=>errors = e"
   >

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -6,7 +6,7 @@ import SelectIconGrid from '@shell/components/SelectIconGrid';
 import EmberPage from '@shell/components/EmberPage';
 import ToggleSwitch from '@shell/components/form/ToggleSwitch';
 import {
-  CHART, FROM_CLUSTER, SUB_TYPE, _EDIT, _IMPORT
+  CHART, FROM_CLUSTER, SUB_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW
 } from '@shell/config/query-params';
 import { mapGetters } from 'vuex';
 import { sortBy } from '@shell/utils/sort';
@@ -156,7 +156,7 @@ export default {
       if (this.value) {
         // For custom RKE2 clusters, don't load an Ember page.
         // It should be the dashboard.
-        if ( this.value.isRke2 && ((this.value.isCustom && this.mode === _EDIT) || (this.subType || '').toLowerCase() === 'custom')) {
+        if ( this.value.isRke2 && ((this.value.isCustom && this.mode === _EDIT) || (this.value.isCustom && this.as === _CONFIG && this.mode === _VIEW) || (this.subType || '').toLowerCase() === 'custom')) {
           // For admins, this.value.isCustom is used to check if it is a custom cluster.
           // For cluster owners, this.subtype is used.
           this.selectType('custom', false);
@@ -427,8 +427,14 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else-if="emberLink" class="embed">
-    <EmberPage :force-new="true" :src="emberLink" />
+  <div
+    v-else-if="emberLink"
+    class="embed"
+  >
+    <EmberPage
+      :force-new="true"
+      :src="emberLink"
+    />
   </div>
   <CruResource
     v-else
@@ -446,11 +452,20 @@ export default {
     @error="e=>errors = e"
   >
     <template #subtypes>
-      <div v-for="obj in groupedSubTypes" :key="obj.id" class="mb-20" style="width: 100%;">
+      <div
+        v-for="(obj, i) in groupedSubTypes"
+        :key="obj.id"
+        class="mb-20"
+        style="width: 100%;"
+      >
         <h4>
-          <div v-if="showRkeToggle && [_RKE1,_RKE2].includes(obj.name)" class="grouped-type">
+          <div
+            v-if="showRkeToggle && [_RKE1,_RKE2].includes(obj.name)"
+            class="grouped-type"
+          >
             <ToggleSwitch
               v-model="provisioner"
+              data-testid="cluster-manager-create-rke-switch"
               class="rke-switch"
               off-value="rke1"
               :off-label="t('cluster.toggle.v1')"
@@ -466,6 +481,7 @@ export default {
           name-field="label"
           side-label-field="tag"
           :color-for="colorFor"
+          :component-testid="'cluster-manager-create-grid-' + i"
           @clicked="clickedType"
         />
       </div>
@@ -486,7 +502,10 @@ export default {
       :provider="subType"
     />
 
-    <template v-if="subType" #form-footer>
+    <template
+      v-if="subType"
+      #form-footer
+    >
       <div><!-- Hide the outer footer --></div>
     </template>
   </CruResource>