@rancher/shell 3.0.0-rc.4 → 3.0.0-rc.6

package/assets/styles/global/_tooltip.scss

@@ -141,7 +141,7 @@
 .v-popper__popper.v-popper--theme-dropdown {
   z-index: z-index('tooltip');
 
-  &.containerLogsDropdown {
+  &.containerLogsDropdown, &.fleet-summary-tooltip{
     .v-popper__arrow-container {
       display: none;
     }

package/assets/translations/en-us.yaml

@@ -360,8 +360,8 @@ addClusterMemberDialog:
   title: Add Cluster Member
 
 addonConfigConfirmation:
-  title: Add-On Config Reset
-  body: Changing the Kubernetes Version can reset the Add-On Config values. You should check that the values are as expected before continuing.
+  title: Add-On Reset
+  body: Changing the Kubernetes Version can reset Add-On values. You should check that the values are as expected before continuing.
 
 addProjectMemberDialog:
   title: Add Project Member
@@ -1071,8 +1071,8 @@ catalog:
       placeholder: 'e.g. https://charts.rancher.io'
     oci:
       urlLabel: OCI Repository Host URL
-      placeholder: 'e.g. oci://test.azure.io/test-namespace:test-tag'
-      info: For better performance, add OCI URLs that contain ONLY helm charts. For example oci://test.rancher.io/charts or oci://test.rancher.io/charts/mychart. The list of charts available from the repository is updated every 6 hours. Scanning directories with a large number of artifacts may degrade performance considerably.
+      placeholder: 'e.g. oci://<registry-host>/<namespace>/<chart-name>:<tag>'
+      info: Add OCI URLs that contain ONLY helm charts. For large repositories containing many charts consider targeting a specific namespace or chart to improve performance, for example with oci://<registry-host>/<namespace> or oci://<registry-host>/<namespace>/<chart-name>. The list of charts available from the repository is updated every 6 hours.
       skipTlsVerifications: Skip TLS Verifications
       insecurePlainHttp: Insecure Plain Http
       exponentialBackOff:
@@ -1194,38 +1194,38 @@ cluster:
       <code>Cluster Management > Advanced > JWT Authentication</code>"
   addonChart:
     rancher-vsphere-cpi:
-      label: vSphere CPI
-      configuration: vSphere CPI Configuration
+      label: "Add-on: vSphere CPI"
+      configuration: vSphere CPI
     rancher-vsphere-csi:
-      label: vSphere CSI
-      configuration: vSphere CSI Configuration
+      label: "Add-on: vSphere CSI"
+      configuration: vSphere CSI
     rke2-calico:
-      label: Calico
-      configuration: Calico Configuration
+      label: "Add-on: Calico"
+      configuration: Calico
     rke2-calico-crd:
-      label:  Calico
-      configuration: Calico Configuration
+      label:  "Add-on: Calico"
+      configuration: Calico
     rke2-canal:
-      label: Canal
-      configuration: Canal Configuration
+      label: "Add-on: Canal"
+      configuration: Canal
     rke2-cilium:
-      label: Cilium
-      configuration: Cilium Configuration
+      label: "Add-on: Cilium"
+      configuration: Cilium
     rke2-coredns:
-      label: CoreDNS
-      configuration: CoreDNS Configuration
+      label: "Add-on: CoreDNS"
+      configuration: CoreDNS
     rke2-ingress-nginx:
-      label: NGINX
-      configuration: NGINX Ingress Configuration
+      label: "Add-on: NGINX"
+      configuration: NGINX Ingress
     rke2-kube-proxy:
-      label: Kube Proxy
-      configuration: Kube Proxy Configuration
+      label: "Add-on: Kube Proxy"
+      configuration: Kube Proxy
     rke2-metrics-server:
-      label: Metrics Server
-      configuration: Metrics Server Configuration
+      label: "Add-on: Metrics Server"
+      configuration: Metrics Server
     rke2-multus:
-      label: Multus
-      configuration: Multus Configuration
+      label: "Add-on: Multus"
+      configuration: Multus
   agentEnvVars:
     label: Agent Environment
     detail: Add additional environment variables to the agent container.  This is most commonly useful for configuring a HTTP proxy.
@@ -1241,7 +1241,7 @@ cluster:
       label: Google
     rancher-vsphere:
       label: vSphere
-      note: '<b>Important:</b> Configure the vSphere Cloud Provider and Storage Provider options in the tabs on the left.'
+      note: '<b>Important:</b> Configure the vSphere Cloud Provider and Storage Provider options in the Add-on tabs.'
     harvester:
       label: Harvester
   copyConfig: Copy KubeConfig to Clipboard
@@ -1758,7 +1758,7 @@ cluster:
       serverOs:
         label: OS
   addOns:
-    dependencyBanner: Add-On Configurations can vary between Kubernetes versions. Changing the Kubernetes version may reset the values below.
+    dependencyBanner: Add-On Configuration can vary between Kubernetes versions. Changing the Kubernetes version may reset the values below.
     additionalManifest:
       title: Additional Manifest
       tooltip: 'Additional Kubernetes Manifest YAML to be applied to the cluster on startup.'

package/cloud-credential/aws.vue

@@ -3,14 +3,15 @@ import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: {
     Loading, LabeledInput, LabeledSelect
   },
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   async fetch() {
     let cur = (this.value.decodedData.defaultRegion || '').toLowerCase();
@@ -28,21 +29,19 @@ export default {
   },
 
   data() {
-    return { knownRegions: null };
+    return {
+      knownRegions:   null,
+      fvFormRuleSets: [
+        { path: 'decodedData.accessKey', rules: ['required'] },
+        { path: 'decodedData.secretKey', rules: ['required'] },
+      ]
+    };
   },
 
   watch: {
-    'value.decodedData.accessKey'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-
-    'value.decodedData.secretKey'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-
-    'value.decodedData.defaultRegion'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
+    }
   },
 
   methods: {
@@ -76,8 +75,10 @@ export default {
       label-key="cluster.credential.aws.accessKey.label"
       placeholder-key="cluster.credential.aws.accessKey.placeholder"
       type="text"
+      :rules="fvGetAndReportPathRules('decodedData.accessKey')"
       :mode="mode"
-      @update:value="value.setData('accessKey', $event);"
+      :required="true"
+      @update:value="$emit('valueChanged', 'accessKey', $event)"
     />
     <LabeledInput
       :value="value.decodedData.secretKey"
@@ -85,8 +86,10 @@ export default {
       label-key="cluster.credential.aws.secretKey.label"
       placeholder-key="cluster.credential.aws.secretKey.placeholder"
       type="password"
+      :rules="fvGetAndReportPathRules('decodedData.secretKey')"
       :mode="mode"
-      @update:value="value.setData('secretKey', $event);"
+      :required="true"
+      @update:value="$emit('valueChanged', 'secretKey', $event)"
     />
     <LabeledSelect
       :value="value.decodedData.defaultRegion"
@@ -96,7 +99,7 @@ export default {
       :mode="mode"
       :taggable="true"
       :options="knownRegions"
-      @update:value="value.setData('defaultRegion', $event);"
+      @update:value="$emit('valueChanged', 'defaultRegion', $event)"
     />
     <p
       v-clean-html="t('cluster.credential.aws.defaultRegion.help', {}, true)"

package/cloud-credential/azure.vue

@@ -4,34 +4,33 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { azureEnvironments } from '@shell/machine-config/azure';
 import { parseAzureError } from '@shell/utils/azure';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: { LabeledInput, LabeledSelect },
-  mixins:     [CreateEditView],
+  mixins:     [CreateEditView, FormValidation],
 
   data() {
     if ( !this.value.decodedData.environment ) {
       this.value.setData('environment', 'AzurePublicCloud');
     }
 
-    return { azureEnvironments };
+    return {
+      azureEnvironments,
+      fvFormRuleSets: [
+        { path: 'decodedData.clientId', rules: ['required'] },
+        { path: 'decodedData.clientSecret', rules: ['required'] },
+        { path: 'decodedData.subscriptionId', rules: ['required'] },
+      ]
+    };
   },
 
   watch: {
-    'value.decodedData.clientId'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.clientSecret'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.subscriptionId'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.environment'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
+    }
   },
 
   methods: {
@@ -85,10 +84,9 @@ export default {
           option-key="value"
           option-label="value"
           :searchable="false"
-          :required="true"
           :label="t('cluster.credential.azure.environment.label')"
           data-testid="azure-cloud-credentials-environment"
-          @update:value="value.setData('environment', $event)"
+          @update:value="$emit('valueChanged', 'environment', $event)"
         />
       </div>
       <div class="col span-6">
@@ -98,8 +96,9 @@ export default {
           type="text"
           :mode="mode"
           :required="true"
+          :rules="fvGetAndReportPathRules('decodedData.subscriptionId')"
           data-testid="azure-cloud-credentials-subscription-id"
-          @update:value="value.setData('subscriptionId', $event)"
+          @update:value="$emit('valueChanged', 'subscriptionId', $event)"
         />
       </div>
     </div>
@@ -111,8 +110,9 @@ export default {
           type="text"
           :mode="mode"
           :required="true"
+          :rules="fvGetAndReportPathRules('decodedData.clientId')"
           data-testid="azure-cloud-credentials-client-id"
-          @update:value="value.setData('clientId', $event)"
+          @update:value="$emit('valueChanged', 'clientId', $event)"
         />
       </div>
       <div class="col span-6">
@@ -122,8 +122,9 @@ export default {
           type="password"
           :mode="mode"
           :required="true"
+          :rules="fvGetAndReportPathRules('decodedData.clientSecret')"
           data-testid="azure-cloud-credentials-client-secret"
-          @update:value="value.setData('clientSecret', $event)"
+          @update:value="$emit('valueChanged', 'clientSecret', $event)"
         />
       </div>
     </div>

package/cloud-credential/digitalocean.vue

@@ -1,16 +1,20 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: { LabeledInput },
-  mixins:     [CreateEditView],
+  mixins:     [CreateEditView, FormValidation],
 
+  data() {
+    return { fvFormRuleSets: [{ path: 'decodedData.accessToken', rules: ['required'] }] };
+  },
   watch: {
-    'value.decodedData.accessToken'(neu) {
-      this.$emit('validationChanged', !!neu);
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
     }
   },
 
@@ -39,7 +43,9 @@ export default {
       placeholder-key="cluster.credential.digitalocean.accessToken.placeholder"
       type="password"
       :mode="mode"
-      @update:value="value.setData('accessToken', $event);"
+      :required="true"
+      :rules="fvGetAndReportPathRules('decodedData.accessToken')"
+      @update:value="$emit('valueChanged', 'accessToken', $event)"
     />
     <p
       v-clean-html="t('cluster.credential.digitalocean.accessToken.help', {}, true)"

package/cloud-credential/gcp.vue

@@ -2,22 +2,29 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector from '@shell/components/form/FileSelector';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: { LabeledInput, FileSelector },
-  mixins:     [CreateEditView],
+  mixins:     [CreateEditView, FormValidation],
 
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'decodedData.authEncodedJson', rules: ['required'] }]
+    };
+  },
   watch: {
-    'value.decodedData.authEncodedJson'(neu) {
-      this.$emit('validationChanged', !!neu);
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
     }
   },
 
   methods: {
     onFileSelected(data) {
-      this.value.setData('authEncodedJson', data);
+      this.$emit('valueChanged', 'authEncodedJson', data);
     },
 
     async test() {
@@ -58,7 +65,9 @@ export default {
       placeholder-key="cluster.credential.gcp.authEncodedJson.placeholder"
       type="multiline"
       :mode="mode"
-      @update:value="value.setData('authEncodedJson', $event);"
+      :required="true"
+      :rules="fvGetAndReportPathRules('decodedData.authEncodedJson')"
+      @update:value="$emit('valueChanged', 'authEncodedJson', $event)"
     />
     <FileSelector
       class="role-primary btn-sm mt-20 mb-20"

package/cloud-credential/linode.vue

@@ -1,16 +1,23 @@
 <script>
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: { LabeledInput },
-  mixins:     [CreateEditView],
+  mixins:     [CreateEditView, FormValidation],
 
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'decodedData.token', rules: ['required'] }]
+    };
+  },
   watch: {
-    'value.decodedData.token'(neu) {
-      this.$emit('validationChanged', !!neu);
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
     }
   },
 
@@ -39,7 +46,9 @@ export default {
       placeholder-key="cluster.credential.linode.accessToken.placeholder"
       type="password"
       :mode="mode"
-      @update:value="value.setData('token', $event);"
+      :required="true"
+      :rules="fvGetAndReportPathRules('decodedData.token')"
+      @update:value="$emit('valueChanged', 'token', $event)"
     />
     <p
       v-clean-html="t('cluster.credential.linode.accessToken.help', {}, true)"

package/cloud-credential/pnap.vue

@@ -2,19 +2,25 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { base64Encode } from '@shell/utils/crypto';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: { LabeledInput },
-  mixins:     [CreateEditView],
+  mixins:     [CreateEditView, FormValidation],
 
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'decodedData.clientIdentifier', rules: ['required'] },
+        { path: 'decodedData.clientSecret', rules: ['required'] }
+      ]
+    };
+  },
   watch: {
-    'value.decodedData.clientIdentifier'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.clientSecret'(neu) {
-      this.$emit('validationChanged', !!neu);
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
     }
   },
 
@@ -58,7 +64,9 @@ export default {
           placeholder-key="cluster.credential.pnap.clientIdentifier.placeholder"
           type="text"
           :mode="mode"
-          @update:value="value.setData('clientIdentifier', $event);"
+          :required="true"
+          :rules="fvGetAndReportPathRules('decodedData.clientIdentifier')"
+          @update:value="$emit('valueChanged', 'clientIdentifier', $event)"
         />
       </div>
       <div class="col span-6">
@@ -68,7 +76,9 @@ export default {
           placeholder-key="cluster.credential.pnap.clientSecret.placeholder"
           type="text"
           :mode="mode"
-          @update:value="value.setData('clientSecret', $event);"
+          :required="true"
+          :rules="fvGetAndReportPathRules('decodedData.clientSecret')"
+          @update:value="$emit('valueChanged', 'clientSecret', $event)"
         />
       </div>
     </div>

package/cloud-credential/s3.vue

@@ -4,14 +4,15 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import { Checkbox } from '@components/Form/Checkbox';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: {
     Loading, Checkbox, LabeledInput, LabeledSelect
   },
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   async fetch() {
     let cur = (this.value.decodedData.defaultRegion || '').toLowerCase();
@@ -29,35 +30,18 @@ export default {
   },
 
   data() {
-    return { knownRegions: null };
+    return {
+      knownRegions:   null,
+      fvFormRuleSets: [
+        { path: 'decodedData.accessKey', rules: ['required'] },
+        { path: 'decodedData.secretKey', rules: ['required'] }]
+    };
   },
-
   watch: {
-    'value.decodedData.accessKey'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.secretKey'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.defaultBucket'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.defaultFolder'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.defaultRegion'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.defaultEndpointCA'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.defaultEndpoint'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-    'value.decodedData.defaulSkipSSLVerify'(neu) {
-      this.$emit('validationChanged', !!neu);
-    },
-  },
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
+    }
+  }
 };
 </script>
 
@@ -76,7 +60,8 @@ export default {
           placeholder-key="cluster.credential.s3.accessKey.placeholder"
           type="text"
           :mode="mode"
-          @update:value="value.setData('accessKey', $event);"
+          :rules="fvGetAndReportPathRules('decodedData.accessKey')"
+          @update:value="$emit('valueChanged', 'accessKey', $event)"
         />
       </div>
       <div class="col span-6">
@@ -87,7 +72,8 @@ export default {
           placeholder-key="cluster.credential.s3.secretKey.placeholder"
           type="password"
           :mode="mode"
-          @update:value="value.setData('secretKey', $event);"
+          :rules="fvGetAndReportPathRules('decodedData.secretKey')"
+          @update:value="$emit('valueChanged', 'secretKey', $event)"
         />
       </div>
     </div>

package/cloud-credential/vmwarevsphere.vue

@@ -2,19 +2,26 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { NORMAN } from '@shell/config/types';
+import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  emits: ['validationChanged'],
+  emits: ['validationChanged', 'valueChanged'],
 
   components: { LabeledInput },
-  mixins:     [CreateEditView],
-
+  mixins:     [CreateEditView, FormValidation],
+  data() {
+    return {
+      fvFormRuleSets: [
+        { path: 'decodedData.vcenter', rules: ['required', 'wildcardHostname'] },
+        { path: 'decodedData.vcenterPort', rules: ['required', 'portNumber', 'requiredInt'] },
+        { path: 'decodedData.username', rules: ['required'] },
+        { path: 'decodedData.password', rules: ['required'] },
+      ]
+    };
+  },
   watch: {
-    value: {
-      deep: true,
-      handler(neu) {
-        this.$emit('validationChanged', !!neu);
-      }
+    fvFormIsValid(newValue) {
+      this.$emit('validationChanged', !!newValue);
     }
   },
 
@@ -57,7 +64,8 @@ export default {
           placeholder-key="cluster.credential.vmwarevsphere.server.placeholder"
           :required="true"
           :mode="mode"
-          @update:value="value.setData('vcenter', $event);"
+          :rules="fvGetAndReportPathRules('decodedData.vcenter')"
+          @update:value="$emit('valueChanged', 'vcenter', $event)"
         />
       </div>
       <div class="col span-6">
@@ -65,11 +73,9 @@ export default {
           :value="value.decodedData.vcenterPort"
           label-key="cluster.credential.vmwarevsphere.port.label"
           :required="true"
-          type="number"
-          min="1"
-          max="65535"
           :mode="mode"
-          @update:value="value.setData('vcenterPort', $event);"
+          :rules="fvGetAndReportPathRules('decodedData.vcenterPort')"
+          @update:value="$emit('valueChanged', 'vcenterPort', $event)"
         />
       </div>
     </div>
@@ -80,7 +86,8 @@ export default {
           label-key="cluster.credential.vmwarevsphere.username.label"
           :required="true"
           :mode="mode"
-          @update:value="value.setData('username', $event);"
+          :rules="fvGetAndReportPathRules('decodedData.username')"
+          @update:value="$emit('valueChanged', 'username', $event)"
         />
       </div>
       <div class="col span-6">
@@ -90,7 +97,8 @@ export default {
           :required="true"
           type="password"
           :mode="mode"
-          @update:value="value.setData('password', $event);"
+          :rules="fvGetAndReportPathRules('decodedData.password')"
+          @update:value="$emit('valueChanged', 'password', $event)"
         />
       </div>
     </div>

package/components/ExplorerProjectsNamespaces.vue

@@ -477,24 +477,24 @@ export default {
       <template
         v-for="(project, i) in projectsWithoutNamespaces"
         :key="i"
-        v-slot:[slotName(project)]
+        #[slotName(project)]="{ fullColspan }"
       >
         <tr
           class="main-row"
         >
           <td
             class="empty text-center"
-            colspan="5"
+            :colspan="fullColspan"
           >
             {{ t('projectNamespaces.noNamespaces') }}
           </td>
         </tr>
       </template>
-      <template #main-row:fake-empty>
+      <template #main-row:fake-empty="{ fullColspan }">
         <tr class="main-row">
           <td
             class="empty text-center"
-            colspan="5"
+            :colspan="fullColspan"
           >
             {{ t('projectNamespaces.noProjectNoNamespaces') }}
           </td>