@rancher/shell 0.2.5 → 0.3.0

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

@@ -963,10 +963,10 @@ export default {
           out.push({
             id,
             remove: false,
-            create:  false,
+            create: false,
             update: true,
-            pool:    clone(pool),
-            config:  config ? await this.$store.dispatch('management/clone', { resource: config }) : null,
+            pool:   clone(pool),
+            config: config ? await this.$store.dispatch('management/clone', { resource: config }) : null,
           });
         }
       }
@@ -990,12 +990,12 @@ export default {
 
       const name = `pool${ ++this.lastIdx }`;
       const pool = {
-        id:      name,
+        id:     name,
         config,
         remove: false,
-        create:  true,
+        create: true,
         update: false,
-        pool:    {
+        pool:   {
           name,
           etcdRole:             numCurrentPools === 0,
           controlPlaneRole:     numCurrentPools === 0,
@@ -1005,8 +1005,8 @@ export default {
           quantity:             1,
           unhealthyNodeTimeout: '0m',
           machineConfigRef:     {
-            kind:       this.machineConfigSchema.attributes.kind,
-            name:       null,
+            kind: this.machineConfigSchema.attributes.kind,
+            name: null,
           },
         },
       };
@@ -1202,9 +1202,9 @@ export default {
           const namespace = this.machinePools?.[0]?.config?.vmNamespace;
 
           const res = await this.$store.dispatch('management/request', {
-            url:                  `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
-            method:               'POST',
-            data:                 {
+            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
+            method: 'POST',
+            data:   {
               clusterRoleName:    'harvesterhci.io:cloudprovider',
               namespace,
               serviceAccountName: this.value.metadata.name,
@@ -1759,7 +1759,10 @@ export default {
       </template>
 
       <h2 v-t="'cluster.tabs.cluster'" />
-      <Tabbed :side-tabs="true">
+      <Tabbed
+        :side-tabs="true"
+        class="min-height"
+      >
         <Tab
           name="basic"
           label-key="cluster.tabs.basic"
@@ -2411,6 +2414,9 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+  .min-height {
+    min-height: 40em;
+  }
   .patch-version {
     margin-top: 5px;
   }

package/edit/resources.cattle.io.backup.vue

@@ -48,9 +48,9 @@ export default {
     await this.$store.dispatch('catalog/load');
 
     const hash = await allHash({
-      secrets:      this.$store.dispatch('cluster/findAll', { type: SECRET }),
+      secrets:     this.$store.dispatch('cluster/findAll', { type: SECRET }),
       resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
-      apps:         this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
+      apps:        this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
 
     });
 

package/edit/secret/generic.vue

@@ -57,6 +57,7 @@ export default {
     :read-allowed="true"
     :value-concealed="isView && hideSensitiveData"
     :file-modifier="fileModifier"
+    :parse-lines-from-file="true"
     read-icon=""
     add-icon=""
   />

package/edit/storage.k8s.io.storageclass/index.vue

@@ -69,8 +69,8 @@ export default {
       reclaimPolicyOptions,
       allowVolumeExpansionOptions,
       volumeBindingModeOptions,
-      mountOptions:           [],
-      provisioner:            PROVISIONER_OPTIONS[0].value,
+      mountOptions: [],
+      provisioner:  PROVISIONER_OPTIONS[0].value,
     };
   },
 

package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/no-provisioner.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  props:      {
+  props: {
     value: {
       type:     Object,
       required: true

package/edit/token.vue

@@ -42,7 +42,7 @@ export default {
       errors: null,
       form:   {
         expiryType:        'never',
-        customExpiry:       0,
+        customExpiry:      0,
         customExpiryUnits: 'minute',
       },
       created:    null,

package/edit/ui.cattle.io.navlink.vue

@@ -32,7 +32,7 @@ export default {
   },
   data() {
     return {
-      targetOptions:  [
+      targetOptions: [
         {
           value: LINK_TARGET_BLANK,
           label: this.t('navLink.tabs.target.option.blank'),
@@ -56,15 +56,15 @@ export default {
           label: this.t('navLink.tabs.link.type.service')
         }
       ],
-      currentLinkType:   null,
-      targetName:        null,
-      currentTarget:     LINK_TARGET_BLANK,
-      protocolsOptions:  PROTOCOLS,
+      currentLinkType:  null,
+      targetName:       null,
+      currentTarget:    LINK_TARGET_BLANK,
+      protocolsOptions: PROTOCOLS,
       services:         [],
       currentService:   null,
     };
   },
-  props:      {
+  props: {
     value: {
       type:     Object,
       required: true,
@@ -75,7 +75,7 @@ export default {
       required: true,
     },
   },
-  computed:   {
+  computed: {
     /**
      * Identify type of navLink and clear model on value change
      */
@@ -117,7 +117,7 @@ export default {
     this.services = await this.$store
       .dispatch('cluster/findAll', { type: SERVICE });
   },
-  methods:    {
+  methods: {
     /**
      * Set the target of the navLink
      * It will assign namedWindow value for named target cases

package/edit/workload/Job.vue

@@ -9,7 +9,7 @@ export default {
   components: {
     UnitInput, LabeledInput, RadioGroup
   },
-  props:      {
+  props: {
     // workload spec
     value: {
       type:    Object,
@@ -107,8 +107,8 @@ export default {
       if (this.type === WORKLOAD_TYPES.JOB) {
         const spec = {
           ...this.value,
-          suspend:                    this.suspend,
-          schedule:                   this.schedule,
+          suspend:               this.suspend,
+          schedule:              this.schedule,
           completions:           this.completions,
           parallelism:           this.parallelism,
           backoffLimit:          this.backoffLimit,

package/edit/workload/Upgrading.vue

@@ -11,7 +11,7 @@ export default {
   components: {
     RadioGroup, UnitInput, InputWithSelect
   },
-  props:      {
+  props: {
     // spec
     value: {
       type:    Object,

package/edit/workload/VolumeClaimTemplate.vue

@@ -13,7 +13,7 @@ export default {
     PersistentVolumeClaim
   },
 
-  props:      {
+  props: {
     mode: {
       type:    String,
       default: 'create'

package/edit/workload/index.vue

@@ -4,9 +4,9 @@ import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 
 export default {
-  name:       'Workload',
-  mixins:     [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
-  props:      {
+  name:   'Workload',
+  mixins: [CreateEditView, FormValidation, WorkLoadMixin], // The order here is important since WorkLoadMixin contains some FormValidation configuration
+  props:  {
     value: {
       type:     Object,
       required: true,

package/edit/workload/mixins/workload.js

@@ -209,7 +209,7 @@ export default {
     this.selectContainer(container);
 
     return {
-      secondaryResourceData:       {
+      secondaryResourceData: {
         namespace: this.value?.metadata?.namespace || null,
         data:      {
           [CONFIG_MAP]:      { applyTo: [{ var: 'namespacedConfigMaps' }] },
@@ -226,7 +226,7 @@ export default {
               }
             ]
           },
-          [NODE]:            {
+          [NODE]: {
             applyTo: [
               { var: 'allNodeObjects' },
               {
@@ -250,31 +250,31 @@ export default {
           },
         }
       },
-      namespacedConfigMaps:        [],
-      allNodes:                    null,
-      allNodeObjects:              [],
-      namespacedSecrets:           [],
-      imagePullNamespacedSecrets:  [],
-      allServices:                 [],
-      headlessServices:            [],
-      name:                        this.value?.metadata?.name || null,
-      pvcs:                        [],
-      namespacedServiceNames:      [],
-      showTabs:                    false,
-      pullPolicyOptions:           ['Always', 'IfNotPresent', 'Never'],
+      namespacedConfigMaps:       [],
+      allNodes:                   null,
+      allNodeObjects:             [],
+      namespacedSecrets:          [],
+      imagePullNamespacedSecrets: [],
+      allServices:                [],
+      headlessServices:           [],
+      name:                       this.value?.metadata?.name || null,
+      pvcs:                       [],
+      namespacedServiceNames:     [],
+      showTabs:                   false,
+      pullPolicyOptions:          ['Always', 'IfNotPresent', 'Never'],
       spec,
       type,
-      servicesOwned:               [],
-      servicesToRemove:            [],
-      portsForServices:            [],
+      servicesOwned:              [],
+      servicesToRemove:           [],
+      portsForServices:           [],
       isInitContainer,
       container,
-      containerChange:             0,
-      tabChange:                   0,
-      podFsGroup:                  podTemplateSpec.securityContext?.fsGroup,
-      savePvcHookName:             'savePvcHook',
-      tabWeightMap:                TAB_WEIGHT_MAP,
-      fvFormRuleSets:              [{
+      containerChange:            0,
+      tabChange:                  0,
+      podFsGroup:                 podTemplateSpec.securityContext?.fsGroup,
+      savePvcHookName:            'savePvcHook',
+      tabWeightMap:               TAB_WEIGHT_MAP,
+      fvFormRuleSets:             [{
         path: 'image', rootObject: this.container, rules: ['required'], translationKey: 'workload.container.image'
       }],
       fvReportedValidationPaths: ['spec'],

package/edit/workload/storage/ContainerMountPaths.vue

@@ -27,7 +27,7 @@ export default {
     },
 
     container: {
-      type:     Object,
+      type:    Object,
       default: () => {
         return {};
       },

package/edit/workload/storage/Mount.vue

@@ -14,7 +14,7 @@ export default {
 
     // volume name
     name: {
-      type:     String,
+      type:    String,
       default: ''
     },
 

package/edit/workload/storage/azureDisk.vue

@@ -8,7 +8,7 @@ export default {
   components: {
     LabeledInput, RadioGroup, Checkbox
   },
-  props:      {
+  props: {
     // volumeAttributes object
     value: {
       type:    Object,

package/edit/workload/storage/azureFile.vue

@@ -6,7 +6,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 export default {
   components: { LabeledInput, Checkbox },
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {

package/edit/workload/storage/csi/index.vue

@@ -10,7 +10,7 @@ export default {
     LabeledSelect, Checkbox, LabeledInput
   },
 
-  props:      {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

package/edit/workload/storage/ephemeralVolume/index.vue

@@ -10,7 +10,7 @@ export default {
     LabeledSelect, LabeledInput, Checkbox, Mount
   },
 
-  props:      {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

package/edit/workload/storage/gcePersistentDisk.vue

@@ -6,7 +6,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 export default {
   components: { LabeledInput, Checkbox },
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {

package/edit/workload/storage/hostPath.vue

@@ -9,7 +9,7 @@ export default {
     LabeledSelect,
   },
 
-  props:  {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

package/edit/workload/storage/nfs.vue

@@ -9,7 +9,7 @@ export default {
     Checkbox,
   },
 
-  props:  {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

package/edit/workload/storage/persistentVolumeClaim/index.vue

@@ -14,7 +14,7 @@ export default {
     Checkbox
   },
 
-  props:      {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

package/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue

@@ -16,7 +16,7 @@ export default {
     LabeledSelect, UnitInput, RadioGroup, Checkbox, LabeledInput
   },
 
-  props:      {
+  props: {
     mode: {
       type:    String,
       default: 'create'

package/edit/workload/storage/secret.vue

@@ -11,7 +11,7 @@ export default {
     RadioGroup,
   },
 
-  props:      {
+  props: {
     podSpec: {
       type:    Object,
       default: () => {

package/edit/workload/storage/vsphereVolume.vue

@@ -5,7 +5,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 export default {
   components: { LabeledInput },
 
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {

package/layouts/default.vue

@@ -35,6 +35,8 @@ import { sortBy } from '@shell/utils/sort';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import { getProductFromRoute } from '@shell/middleware/authenticated';
+import { BOTTOM } from '@shell/utils/position';
+import { DraggableZone } from '@components/Utils/DraggableZone';
 
 const SET_LOGIN_ACTION = 'set-as-login';
 
@@ -52,7 +54,8 @@ export default {
     WindowManager,
     FixedBanner,
     AwsComplianceBanner,
-    AzureWarning
+    AzureWarning,
+    DraggableZone,
   },
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
@@ -64,6 +67,8 @@ export default {
       groups:           [],
       gettingGroups:    false,
       wantNavSync:      false,
+      unwatchPin:       undefined,
+      wmPin:            null,
     };
   },
 
@@ -84,8 +89,8 @@ export default {
       return this.$store.getters['activeNamespaceCache'];
     },
 
-    themeShortcut:    mapPref(THEME_SHORTCUT),
-    favoriteTypes:    mapPref(FAVORITE_TYPES),
+    themeShortcut: mapPref(THEME_SHORTCUT),
+    favoriteTypes: mapPref(FAVORITE_TYPES),
 
     pageActions() {
       const pageActions = [];
@@ -199,6 +204,10 @@ export default {
         this.currentProduct?.name === getProductFromRoute(this.$route);
     },
 
+    pinClass() {
+      return `pin-${ this.wmPin }`;
+    },
+
   },
 
   watch: {
@@ -307,6 +316,18 @@ export default {
   mounted() {
     // Sync the navigation tree on fresh load
     this.$nextTick(() => this.syncNav());
+
+    this.wmPin = window.localStorage.getItem('wm-pin') || BOTTOM;
+
+    // two-way binding this.wmPin <-> draggableZone.pin
+    this.$refs.draggableZone.pin = this.wmPin;
+    this.unwatchPin = this.$watch('$refs.draggableZone.pin', (pin) => {
+      this.wmPin = pin;
+    });
+  },
+
+  unmounted() {
+    this.unwatchPin();
   },
 
   methods: {
@@ -321,6 +342,7 @@ export default {
 
       await this.$store.dispatch('prefs/setLastVisited', route);
     },
+
     handlePageAction(action) {
       if (action.action === SET_LOGIN_ACTION) {
         this.afterLoginRoute = this.getLoginRoute();
@@ -474,12 +496,12 @@ export default {
             });
           } else {
             toAdd.push({
-              name:       `navlink-${ entry.name }`,
-              label:      entry.label,
-              isRoot:     true,
+              name:     `navlink-${ entry.name }`,
+              label:    entry.label,
+              isRoot:   true,
               // This is the item that actually shows up in the nav, since this outer group will be invisible
-              children:   [entry],
-              weight:     -100,
+              children: [entry],
+              weight:   -100,
             });
           }
         }
@@ -578,6 +600,7 @@ export default {
     <div
       v-if="managementReady"
       class="dashboard-content"
+      :class="{[pinClass]: true}"
     >
       <Header />
       <nav
@@ -709,12 +732,23 @@ export default {
       >
         <nuxt class="outlet" />
       </main>
-      <div class="wm">
+      <div
+        v-if="$refs.draggableZone"
+        class="wm"
+        :class="{
+          'drag-end': !$refs.draggableZone.drag.active,
+          'drag-start': $refs.draggableZone.drag.active,
+        }"
+        draggable="true"
+        @dragstart="$refs.draggableZone.onDragStart($event)"
+        @dragend="$refs.draggableZone.onDragEnd($event)"
+      >
         <WindowManager />
       </div>
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <DraggableZone ref="draggableZone" />
   </div>
 </template>
 <style lang="scss" scoped>
@@ -729,7 +763,7 @@ export default {
 
 </style>
 <style lang="scss">
-  .dashboard-root{
+  .dashboard-root {
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -742,13 +776,30 @@ export default {
     overflow-y: auto;
     min-height: 0px;
 
-    grid-template-areas:
-      "header  header"
-      "nav      main"
-      "wm       wm";
+    &.pin-right {
+      grid-template-areas:
+        "header  header  header"
+        "nav      main     wm";
+      grid-template-rows:    var(--header-height) auto;
+      grid-template-columns: var(--nav-width)     auto var(--wm-width, 0px);
+    }
+
+    &.pin-bottom {
+      grid-template-areas:
+        "header  header"
+        "nav       main"
+        "wm         wm";
+      grid-template-rows:    var(--header-height) auto  var(--wm-height, 0px);
+      grid-template-columns: var(--nav-width)     auto;
+    }
 
-    grid-template-columns: var(--nav-width)     auto;
-    grid-template-rows:    var(--header-height) auto  var(--wm-height, 0px);
+    &.pin-left {
+      grid-template-areas:
+        "header  header  header"
+        "wm       nav     main";
+      grid-template-rows:    var(--header-height) auto;
+      grid-template-columns: var(--wm-width, 0px) var(--nav-width) auto;
+    }
 
     > HEADER {
       grid-area: header;
@@ -869,4 +920,14 @@ export default {
       }
     }
   }
+
+  .drag-start {
+    z-index: 1000;
+    opacity: 0.5;
+    transition: opacity .3s ease;
+  }
+
+  .drag-end {
+    opacity: 1;
+  }
 </style>

package/list/__tests__/workload.test.ts

@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils';
+import Workload from '@shell/list/workload.vue';
+import ResourceFetch from '@shell/mixins/resource-fetch';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+describe('component: workload', () => {
+  it('should load the schema for the workload', () => {
+    const resource = 'workload';
+    const schema = {
+      id:         resource,
+      type:       'schema',
+      attributes: {
+        kind:       'Workload',
+        namespaced: true,
+      },
+      metadata: { name: resource },
+    };
+
+    const wrapper = shallowMount(Workload as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      components: { ResourceTable },
+      mixins:     [ResourceFetch],
+      mocks:      {
+        $store: {
+          getters: {
+            currentStore:                  () => jest.fn(),
+            namespaces:                    () => jest.fn(),
+            'management/byId':             () => jest.fn(),
+            'resource-fetch/refreshFlag':  () => jest.fn(),
+            'type-map/hideBulkActionsFor': () => jest.fn(),
+            'type-map/labelFor':           () => jest.fn(),
+            'type-map/optionsFor':         () => jest.fn(),
+            'type-map/headersFor':         () => jest.fn(),
+            'prefs/get':                   () => resource,
+          }
+        },
+        $fetchState: {
+          pending: false, error: true, timestamp: Date.now()
+        },
+        $route: { params: { resource } },
+      }
+    });
+
+    expect(wrapper.vm.schema).toStrictEqual(schema);
+  });
+
+  // TODO - #7473: Further tests may be defined within one of the table components
+  it.todo('should display the list of workloads');
+});