@rancher/shell 0.2.5 → 0.3.1

package/edit/workload/storage/index.vue

@@ -8,6 +8,8 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { randomStr } from '@shell/utils/string';
 
 export default {
+  name: 'Storage',
+
   components: {
     ArrayListGrouped, ButtonDropdown, Mount, CodeMirror
   },
@@ -155,6 +157,12 @@ export default {
           csi:   { volumeAttributes: {} },
           name,
         });
+      } else if (type === 'emptyDir') {
+        this.value.volumes.push({
+          _type:    type,
+          emptyDir: { medium: '' },
+          name,
+        });
       } else {
         this.value.volumes.push({
           _type:  type,

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: () => {
@@ -87,7 +87,7 @@ export default {
 
   watch: {
     namespace(neu) {
-      this.__newPvc.metadata.namespace = neu;
+      this.value.__newPvc.metadata.namespace = neu;
     },
 
     'value.__newPvc.metadata.name'(neu) {

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

@@ -20,6 +20,7 @@ import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
+import DraggableZone from '@shell/components/DraggableZone';
 import {
   COUNT, SCHEMA, MANAGEMENT, UI, CATALOG
 } from '@shell/config/types';
@@ -27,7 +28,7 @@ import { BASIC, FAVORITE, USED } from '@shell/store/type-map';
 import { addObjects, replaceWith, clear, addObject } from '@shell/utils/array';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import isEqual from 'lodash/isEqual';
 import { ucFirst } from '@shell/utils/string';
 import { getVersionInfo, markSeenReleaseNotes } from '@shell/utils/version';
@@ -35,6 +36,7 @@ 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';
 
 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,9 @@ export default {
       groups:           [],
       gettingGroups:    false,
       wantNavSync:      false,
+      unwatchPin:       undefined,
+      wmPin:            null,
+      draggable:        false,
     };
   },
 
@@ -84,8 +90,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 +205,10 @@ export default {
         this.currentProduct?.name === getProductFromRoute(this.$route);
     },
 
+    pinClass() {
+      return `pin-${ this.wmPin }`;
+    },
+
   },
 
   watch: {
@@ -307,6 +317,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 +343,7 @@ export default {
 
       await this.$store.dispatch('prefs/setLastVisited', route);
     },
+
     handlePageAction(action) {
       if (action.action === SET_LOGIN_ACTION) {
         this.afterLoginRoute = this.getLoginRoute();
@@ -342,48 +365,9 @@ export default {
       });
     },
 
-    getGroups() {
-      if ( this.gettingGroups ) {
-        return;
-      }
-      this.gettingGroups = true;
-
-      if ( !this.clusterReady ) {
-        clear(this.groups);
-        this.gettingGroups = false;
-
-        return;
-      }
-
+    getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap) {
       const clusterId = this.$store.getters['clusterId'];
-      const currentProduct = this.$store.getters['productId'];
       const currentType = this.$route.params.resource || '';
-      let namespaces = null;
-
-      if ( !this.$store.getters['isAllNamespaces'] ) {
-        const namespacesObject = this.$store.getters['namespaces']();
-
-        namespaces = Object.keys(namespacesObject);
-      }
-
-      // Always show cluster-level types, regardless of the namespace filter
-      const namespaceMode = 'both';
-      const out = [];
-      const loadProducts = this.isExplorer ? [EXPLORER] : [];
-      const productMap = this.activeProducts.reduce((acc, p) => {
-        return { ...acc, [p.name]: p };
-      }, {});
-
-      if ( this.isExplorer ) {
-        for ( const product of this.activeProducts ) {
-          if ( product.inStore === 'cluster' ) {
-            addObject(loadProducts, product.name);
-          }
-        }
-      }
-
-      // This should already have come into the list from above, but in case it hasn't...
-      addObject(loadProducts, currentProduct);
 
       for ( const productId of loadProducts ) {
         const modes = [BASIC];
@@ -420,7 +404,9 @@ export default {
           }
         }
       }
+    },
 
+    getExplorerGroups(out) {
       if ( this.isExplorer ) {
         const allNavLinks = this.allNavLinks;
         const toAdd = [];
@@ -474,18 +460,67 @@ 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,
             });
           }
         }
 
         addObjects(out, toAdd);
       }
+    },
+
+    /**
+     * Fetch navigation by creating groups from product schemas
+     */
+    getGroups() {
+      if ( this.gettingGroups ) {
+        return;
+      }
+      this.gettingGroups = true;
+
+      if ( !this.clusterReady ) {
+        clear(this.groups);
+        this.gettingGroups = false;
+
+        return;
+      }
+
+      const currentProduct = this.$store.getters['productId'];
+      let namespaces = null;
+
+      if ( !this.$store.getters['isAllNamespaces'] ) {
+        const namespacesObject = this.$store.getters['namespaces']();
+
+        namespaces = Object.keys(namespacesObject);
+      }
+
+      // Always show cluster-level types, regardless of the namespace filter
+      const namespaceMode = 'both';
+      const out = [];
+      const loadProducts = this.isExplorer ? [EXPLORER] : [];
+
+      const productMap = this.activeProducts.reduce((acc, p) => {
+        return { ...acc, [p.name]: p };
+      }, {});
+
+      if ( this.isExplorer ) {
+        for ( const product of this.activeProducts ) {
+          if ( product.inStore === 'cluster' ) {
+            addObject(loadProducts, product.name);
+          }
+        }
+      }
+
+      // This should already have come into the list from above, but in case it hasn't...
+      addObject(loadProducts, currentProduct);
+
+      this.getProductsGroups(out, loadProducts, namespaceMode, namespaces, productMap);
+      this.getExplorerGroups(out);
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
       this.gettingGroups = false;
@@ -578,6 +613,7 @@ export default {
     <div
       v-if="managementReady"
       class="dashboard-content"
+      :class="{[pinClass]: true}"
     >
       <Header />
       <nav
@@ -709,12 +745,23 @@ export default {
       >
         <nuxt class="outlet" />
       </main>
-      <div class="wm">
-        <WindowManager />
+      <div
+        v-if="$refs.draggableZone"
+        class="wm"
+        :class="{
+          'drag-end': !$refs.draggableZone.drag.active,
+          'drag-start': $refs.draggableZone.drag.active,
+        }"
+        :draggable="draggable"
+        @dragstart="$refs.draggableZone.onDragStart($event)"
+        @dragend="$refs.draggableZone.onDragEnd($event)"
+      >
+        <WindowManager @draggable="draggable=$event" />
       </div>
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <DraggableZone ref="draggableZone" />
   </div>
 </template>
 <style lang="scss" scoped>
@@ -729,7 +776,7 @@ export default {
 
 </style>
 <style lang="scss">
-  .dashboard-root{
+  .dashboard-root {
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -742,13 +789,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);
+    }
 
-    grid-template-columns: var(--nav-width)     auto;
-    grid-template-rows:    var(--header-height) auto  var(--wm-height, 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;
+    }
+
+    &.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 +933,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,53 @@
+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: {
+          dispatch: () => jest.fn(),
+          getters:  {
+            currentStore:                  () => 'cluster',
+            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,
+            'cluster/schemaFor':           () => {},
+            'cluster/all':                 () => [{}],
+          }
+        },
+        $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');
+});

package/list/catalog.cattle.io.app.vue

@@ -38,6 +38,7 @@ export default {
     :rows="rows"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   >
     <template #cell:upgrade="{row}">
       <span

package/list/cis.cattle.io.clusterscan.vue

@@ -66,5 +66,6 @@ export default {
     :headers="headers"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   />
 </template>

package/list/fleet.cattle.io.bundle.vue

@@ -30,8 +30,8 @@ export default {
   },
 
   async fetch() {
-    await this.$fetchType(FLEET.BUNDLE);
-    this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    await this.$fetchType(this.resource);
+    this.allFleet = await this.$fetchType(FLEET.CLUSTER);
   },
 
   data() {
@@ -90,10 +90,8 @@ export default {
 
   // override with relevant info for the loading indicator since this doesn't use it's own masthead
   $loadingResources() {
-    return {
-      loadResources:     [FLEET.BUNDLE],
-      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
-    };
+    // results are filtered so we wouldn't get the correct count on indicator...
+    return { loadIndeterminate: true };
   },
 };
 </script>
@@ -111,6 +109,7 @@ export default {
       :rows="bundles"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     >
       <template #cell:deploymentsReady="{row}">
         <span

package/list/fleet.cattle.io.cluster.vue

@@ -25,9 +25,11 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
-    this.allMgmt = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
-    await this.$fetchType(FLEET.CLUSTER);
+    this.$initializeFetchData(this.resource);
+
+    this.$fetchType(FLEET.WORKSPACE);
+    await this.$fetchType(this.resource);
+    this.allMgmt = await this.$fetchType(MANAGEMENT.CLUSTER);
   },
 
   data() {
@@ -87,6 +89,7 @@ export default {
       :schema="schema"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     />
   </div>
 </template>

package/list/fleet.cattle.io.clusterregistrationtoken.vue

@@ -25,8 +25,8 @@ export default {
   },
 
   async fetch() {
-    await this.$fetchType(FLEET.TOKEN);
-    this.allFleet = await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    await this.$fetchType(this.resource);
+    this.allFleet = await this.$fetchType(FLEET.CLUSTER);
   },
 
   data() {
@@ -67,10 +67,8 @@ export default {
   },
   // override with relevant info for the loading indicator since this doesn't use it's own masthead
   $loadingResources() {
-    return {
-      loadResources:     [FLEET.TOKEN],
-      loadIndeterminate: true, // results are filtered so we wouldn't get the correct count on indicator...
-    };
+    // results are filtered so we wouldn't get the correct count on indicator...
+    return { loadIndeterminate: true };
   },
 };
 </script>
@@ -88,6 +86,7 @@ export default {
       :rows="tokens"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     />
   </div>
 </template>

package/list/fleet.cattle.io.gitrepo.vue

@@ -10,7 +10,7 @@ export default {
     FleetRepos,
     Masthead,
   },
-  mixins:     [ResourceFetch],
+  mixins: [ResourceFetch],
   props:  {
     schema: {
       type:     Object,
@@ -22,11 +22,6 @@ export default {
       required: true,
     },
 
-    loadResources: {
-      type:    Array,
-      default: () => []
-    },
-
     loadIndeterminate: {
       type:    Boolean,
       default: false
@@ -44,11 +39,10 @@ export default {
   },
 
   async fetch() {
-    const store = this.$store;
-
-    await store.dispatch('management/findAll', { type: FLEET.CLUSTER });
-    await store.dispatch('management/findAll', { type: FLEET.CLUSTER_GROUP });
+    this.$initializeFetchData(this.resource);
 
+    this.$fetchType(FLEET.CLUSTER);
+    this.$fetchType(FLEET.CLUSTER_GROUP);
     await this.$fetchType(this.resource);
   }
 };
@@ -69,6 +63,7 @@ export default {
       :schema="schema"
       :loading="loading"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     />
   </div>
 </template>

package/list/group.principal.vue

@@ -49,11 +49,11 @@ export default {
   },
   data() {
     return {
-      rows:                        [],
-      canCreateGlobalRoleBinding:  false,
-      canRefreshAccess:            false,
-      assignLocation:              {
-        path:   `/c/${ BLANK_CLUSTER }/${ NAME }/${ NORMAN.SPOOFED.GROUP_PRINCIPAL }/assign-edit`,
+      rows:                       [],
+      canCreateGlobalRoleBinding: false,
+      canRefreshAccess:           false,
+      assignLocation:             {
+        path:  `/c/${ BLANK_CLUSTER }/${ NAME }/${ NORMAN.SPOOFED.GROUP_PRINCIPAL }/assign-edit`,
         query: { [MODE]: _EDIT }
       },
       initialLoad: true,
@@ -87,9 +87,9 @@ export default {
     async refreshGroupMemberships(buttonDone) {
       try {
         await this.$store.dispatch('rancher/request', {
-          url:           '/v3/users?action=refreshauthprovideraccess',
-          method:        'post',
-          data:          { },
+          url:    '/v3/users?action=refreshauthprovideraccess',
+          method: 'post',
+          data:   { },
         });
 
         await this.updateGroupPrincipals(true);

package/list/helm.cattle.io.projecthelmchart.vue

@@ -16,11 +16,6 @@ export default {
       required: true,
     },
 
-    loadResources: {
-      type:    Array,
-      default: () => []
-    },
-
     loadIndeterminate: {
       type:    Boolean,
       default: false
@@ -77,7 +72,7 @@ export default {
       :show-incremental-loading-indicator="incrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
-      is-creatable
+      :is-creatable="canCreateProjectHelmChart"
     />
     <Banner
       color="info"
@@ -116,6 +111,7 @@ export default {
         :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
         key-field="_key"
         :groupable="false"
+        :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
       />
     </div>
   </div>

package/list/logging.banzaicloud.io.clusterflow.vue

@@ -25,7 +25,9 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('cluster/findAll', { type: LOGGING.CLUSTER_OUTPUT });
+    this.$initializeFetchData(this.resource);
+    this.$fetchType(LOGGING.CLUSTER_OUTPUT);
+
     await this.$fetchType(this.resource);
   }
 };
@@ -37,5 +39,6 @@ export default {
     :rows="rows"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
   />
 </template>