@rancher/shell 3.0.0-rc.8 → 3.0.0-rc.9

package/components/form/ColorInput.vue

@@ -40,6 +40,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'color-input'
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -56,6 +61,12 @@ export default {
      */
     inputValue() {
       return this.value ? this.value : this.defaultValue;
+    },
+
+    isDisabled() {
+      const disabled = this.disabled;
+
+      return this.mode !== this.editMode || disabled;
     }
   },
 
@@ -69,7 +80,7 @@ export default {
 <template>
   <div
     class="color-input"
-    :class="{[mode]:mode, disabled: mode !== editMode}"
+    :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
   >
     <label class="text-label"><t
@@ -89,7 +100,7 @@ export default {
         <input
           ref="input"
           type="color"
-          :disabled="mode !== editMode"
+          :disabled="isDisabled"
           :value="inputValue"
           @input="$emit('update:value', $event.target.value)"
         >

package/components/form/__tests__/ColorInput.test.ts

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import ColorInput from '@shell/components/form/ColorInput.vue';
+
+describe('colorInput.vue', () => {
+  it('disables the input when disabled prop is true', () => {
+    const wrapper = shallowMount(
+      ColorInput,
+      { props: { disabled: true } }
+    );
+
+    const colorWrapper = wrapper.find('.color-input');
+    const colorInput = wrapper.find('input');
+
+    expect(colorWrapper.classes()).toContain('disabled');
+    expect(Object.keys(colorInput.attributes())).toContain('disabled');
+  });
+
+  it('defaults to enabled when no disabled prop is passed', () => {
+    const wrapper = shallowMount(ColorInput);
+
+    const colorWrapper = wrapper.find('.color-input');
+    const colorInput = wrapper.find('input');
+
+    expect(colorWrapper.classes()).not.toContain('disabled');
+    expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
+  });
+});

package/edit/cis.cattle.io.clusterscanbenchmark.vue

@@ -18,6 +18,8 @@ export default {
 
   mixins: [createEditView],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:    Object,

package/edit/constraints.gatekeeper.sh.constraint/index.vue

@@ -48,6 +48,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:     Object,

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

@@ -20,6 +20,8 @@ export default {
     NameNsDescription,
   },
 
+  inheritAttrs: false,
+
   mixins: [CreateEditView],
 
   props: {
@@ -53,6 +55,7 @@ export default {
   methods: {
     async save(buttonDone) {
       try {
+        this.errors = [];
         await this.value.save();
 
         await this.normanCluster.save();
@@ -60,6 +63,7 @@ export default {
         this.done();
         buttonDone(true);
       } catch (e) {
+        this.errors.push(e);
         buttonDone(false);
       }
     },

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

@@ -21,6 +21,8 @@ export default {
 
   mixins: [createEditView],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:     Object,

package/edit/k8s.cni.cncf.io.networkattachmentdefinition.vue

@@ -22,6 +22,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:     Object,

package/edit/kontainerDriver.vue

@@ -15,6 +15,8 @@ export default {
 
   mixins: [CreateEditView, FormValidation],
 
+  inheritAttrs: false,
+
   data() {
     return {
       fvFormRuleSets: [

package/edit/logging-flow/index.vue

@@ -50,6 +50,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   async fetch() {
     const hasAccessToClusterOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.CLUSTER_OUTPUT);
     const hasAccessToOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.OUTPUT);

package/edit/management.cattle.io.projectroletemplatebinding.vue

@@ -11,7 +11,8 @@ export default {
     ProjectMemberEditor,
   },
 
-  mixins: [CreateEditView],
+  mixins:       [CreateEditView],
+  inheritAttrs: false,
   async fetch() {
     await this.$store.dispatch('management/findAll', { type: MANAGEMENT.USER });
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT });

package/edit/management.cattle.io.user.vue

@@ -14,10 +14,13 @@ export default {
   components: {
     ChangePassword, GlobalRoleBindings, CruResource, LabeledInput, Loading
   },
+
   mixins: [
     CreateEditView
   ],
 
+  inheritAttrs: false,
+
   data() {
     const showGlobalRoles = !!this.$store.getters[`management/schemaFor`](MANAGEMENT.GLOBAL_ROLE);
 

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -30,6 +30,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
     const alertmanagerConfigId = this.value.id;

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -105,6 +105,8 @@ export default {
 
   mixins: [CreateEditView, FormValidation],
 
+  inheritAttrs: false,
+
   async fetch() {
     /**
      * example receiver value:

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -29,6 +29,8 @@ export default {
 
   mixins: [CreateEditView, FormValidation],
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type:     Object,

package/edit/monitoring.coreos.com.receiver/index.vue

@@ -37,6 +37,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   async fetch() {
     await this.$store.dispatch('cluster/findAll', { type: MONITORING.SPOOFED.ROUTE });
   },

package/edit/monitoring.coreos.com.route.vue

@@ -35,6 +35,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   async fetch() {
     const receivers = this.$store.dispatch('cluster/findAll', { type: MONITORING.SPOOFED.RECEIVER });
     const routes = this.$store.dispatch('cluster/findAll', { type: MONITORING.SPOOFED.ROUTE });

package/edit/networking.istio.io.destinationrule/index.vue

@@ -24,6 +24,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   created() {
     if (!get(this.value, 'spec.trafficPolicy.loadBalancer')) {
       set(this.value, 'spec.trafficPolicy.loadBalancer', { simple: 'ROUND_ROBIN' });

package/edit/nodeDriver.vue

@@ -15,6 +15,8 @@ export default {
 
   mixins: [CreateEditView, FormValidation],
 
+  inheritAttrs: false,
+
   data() {
     return {
       fvFormRuleSets: [

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -2,6 +2,7 @@ import { mount, shallowMount } from '@vue/test-utils';
 import { SECRET } from '@shell/config/types';
 import { _CREATE } from '@shell/config/query-params';
 import rke2 from '@shell/edit/provisioning.cattle.io.cluster/rke2.vue';
+import { get } from '@shell/utils/object';
 
 /**
  * DISCLAIMER ***************************************************************************************
@@ -242,7 +243,9 @@ describe('component: rke2', () => {
 
     await wrapper.vm._doSaveOverride(jest.fn());
 
-    expect(wrapper.vm.chartValues[`${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`]).toStrictEqual('my-k8s-distro-path/etc/config-files/cloud-provider-config');
+    const cloudConfigPath = get(wrapper.vm.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`);
+
+    expect(cloudConfigPath).toStrictEqual('my-k8s-distro-path/etc/config-files/cloud-provider-config');
   });
 
   // TODO: Complete test after implementing fetch https://github.com/rancher/dashboard/issues/9322

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

@@ -36,6 +36,8 @@ export default {
 
   mixins: [CreateEditView],
 
+  inheritAttrs: false,
+
   props: {
     mode: {
       type:     String,

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

@@ -1480,12 +1480,12 @@ export default {
           this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
 
           if (this.isCreate) {
-            this.chartValues[`${ HARVESTER_CLOUD_PROVIDER }.global.cattle.clusterName`] = this.value.metadata.name;
+            set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.global.cattle.clusterName`, this.value.metadata.name);
           }
 
           const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : '/var/lib/rancher/rke2';
 
-          this.chartValues[`${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`] = `${ distroRoot }/etc/config-files/cloud-provider-config`;
+          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
         }
       } catch (err) {
         this.errors.push(err);

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

@@ -20,9 +20,10 @@ const LINK_TARGET_BLANK = '_blank';
 const LINK_TARGET_SELF = '_self';
 
 export default {
-  emits:      ['update:value.spec.iconSrc ', 'input'],
-  mixins:     [CreateEditView, FormValidation],
-  components: {
+  emits:        ['update:value.spec.iconSrc ', 'input'],
+  mixins:       [CreateEditView, FormValidation],
+  inheritAttrs: false,
+  components:   {
     CruResource,
     LabeledInput,
     RadioGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.0-rc.8",
+  "version": "3.0.0-rc.9",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@rancher/icons": "2.0.29",
     "@types/is-url": "1.2.30",
     "@types/node": "16.4.3",
+    "@types/semver": "^7.5.8",
     "@typescript-eslint/eslint-plugin": "~5.4.0",
     "@typescript-eslint/parser": "~5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",
@@ -53,7 +54,9 @@
     "babel-eslint": "10.1.0",
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
+    "cache-loader": "4.1.0",
     "clipboard-polyfill": "4.0.1",
+    "color": "4.2.3",
     "codemirror": ">=5.64.0 <6",
     "codemirror-editor-vue3": "2.7.1",
     "cookie": "0.5.0",
@@ -89,6 +92,7 @@
     "frontmatter-markdown-loader": "3.7.0",
     "identicon.js": "2.3.3",
     "intl-messageformat": "7.8.4",
+    "ip": "2.0.1",
     "is-url": "1.2.4",
     "jest": "27.5.1",
     "jest-serializer-vue": "2.0.2",
@@ -105,6 +109,7 @@
     "marked": "4.0.17",
     "nodemon": "2.0.22",
     "nyc": "15.1.0",
+    "node-polyfill-webpack-plugin": "3.0.0",
     "papaparse": "5.3.0",
     "portal-vue": "~3.0.0",
     "sass": "1.51.0",
@@ -153,7 +158,9 @@
     "qs": "6.11.1",
     "roarr": "7.0.4",
     "semver": "7.5.4",
-    "@vue/cli-service/html-webpack-plugin": "^5.0.0"
+    "@types/lodash": "4.17.5",
+    "@types/node": "~20.10.0",
+    "@vue/cli-service/html-webpack-plugin": "^5.0.0"  
   },
   "nyc": {
     "extension": [

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -25,9 +25,12 @@ describe('page: cluster dashboard', () => {
             'cluster/inError':   () => false,
             'cluster/schemaFor': jest.fn(),
             'cluster/canList':   jest.fn(),
-            'cluster/all':       jest.fn(),
-            'i18n/exists':       jest.fn(),
-            'i18n/t':            (label: string) => label === 'generic.provisioning' ? '—' : jest.fn()(),
+            'cluster/byId':      () => {
+              return {};
+            },
+            'cluster/all': jest.fn(),
+            'i18n/exists': jest.fn(),
+            'i18n/t':      (label: string) => label === 'generic.provisioning' ? '—' : jest.fn()(),
           }
         }
       },

package/pages/c/_cluster/explorer/index.vue

@@ -115,12 +115,6 @@ export default {
       if (this.currentCluster.isLocal && this.$store.getters['management/schemaFor'](MANAGEMENT.NODE)) {
         this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
       }
-
-      this.canViewAgents = this.$store.getters['cluster/canList'](WORKLOAD_TYPES.DEPLOYMENT) && this.$store.getters['cluster/canList'](WORKLOAD_TYPES.STATEFUL_SET);
-
-      if (this.canViewAgents) {
-        this.loadAgents();
-      }
     }
   },
 
@@ -138,7 +132,6 @@ export default {
       cattleDeployment:   'loading',
       fleetDeployment:    'loading',
       fleetStatefulSet:   'loading',
-      canViewAgents:      false,
       disconnected:       false,
       events:             [],
       nodeMetrics:        [],
@@ -172,6 +165,17 @@ export default {
     clearInterval(this.interval);
   },
 
+  watch: {
+    canViewAgents: {
+      handler(neu, old) {
+        if (neu && !old) {
+          this.loadAgents();
+        }
+      },
+      immediate: true
+    }
+  },
+
   computed: {
     ...mapGetters(['currentCluster']),
     ...monitoringStatus(),
@@ -184,6 +188,22 @@ export default {
       return this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
     },
 
+    fleetAgentNamespace() {
+      return this.$store.getters['cluster/byId'](NAMESPACE, 'cattle-fleet-system');
+    },
+
+    cattleAgentNamespace() {
+      if (this.currentCluster.isLocal) {
+        return;
+      }
+
+      return this.$store.getters['cluster/byId'](NAMESPACE, 'cattle-system');
+    },
+
+    canViewAgents() {
+      return !!this.fleetAgentNamespace || (!this.currentCluster.isLocal && this.cattleAgentNamespace);
+    },
+
     showClusterTools() {
       return this.$store.getters['cluster/canList'](CATALOG.CLUSTER_REPO) &&
       this.$store.getters['cluster/canList'](CATALOG.APP);
@@ -268,15 +288,15 @@ export default {
         });
       });
 
-      if (this.canViewAgents) {
-        if (!this.currentCluster.isLocal) {
-          services.push({
-            name:     'cattle',
-            status:   this.cattleStatus,
-            labelKey: 'clusterIndexPage.sections.componentStatus.cattle',
-          });
-        }
+      if (this.cattleAgentNamespace) {
+        services.push({
+          name:     'cattle',
+          status:   this.cattleStatus,
+          labelKey: 'clusterIndexPage.sections.componentStatus.cattle',
+        });
+      }
 
+      if (this.fleetAgentNamespace) {
         services.push({
           name:     'fleet',
           status:   this.fleetStatus,
@@ -485,14 +505,16 @@ export default {
 
   methods: {
     loadAgents() {
-      if (this.currentCluster.isLocal) {
-        this.setAgentResource('fleetDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-fleet-system/fleet-controller');
-        this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-local-system/fleet-agent');
-      } else {
-        this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-system/fleet-agent');
+      if (this.fleetAgentNamespace) {
+        if (this.currentCluster.isLocal) {
+          this.setAgentResource('fleetDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-fleet-system/fleet-controller');
+          this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-local-system/fleet-agent');
+        } else {
+          this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-system/fleet-agent');
+        }
+      }
+      if (this.cattleAgentNamespace) {
         this.setAgentResource('cattleDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-system/cattle-cluster-agent');
-
-        // Scaling Up/Down cattle deployment causes web sockets disconnection;
         this.interval = setInterval(() => {
           this.disconnected = !!this.$store.getters['cluster/inError']({ type: NODE });
         }, 1000);