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

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -6,6 +6,7 @@ import { get, set } from '@shell/utils/object';
 import debounce from 'lodash/debounce';
 
 export default {
+  emits:      ['update:value', 'remove'],
   components: {
     InputWithSelect, LabeledInput, Select
   },
@@ -180,36 +181,27 @@ export default {
   </div>
 </template>
 <style lang="scss" scoped>
+// TODO #11952: Correct deep statement
 $row-height: 40px;
-
-.labeled-input :deep(), :deep() .labeled-input {
-  padding: 0 !important;
-  height: 100%;
-  input.no-label {
-    height: calc($row-height - 2px);
-    padding: 10px;
-  }
-}
-.rule-path :deep() {
-  .col, INPUT {
-    height: $row-height;
-  }
-
-  .unlabeled-select {
+.rule-path {
+  :deep(.labeled-input) {
+    padding: 0 !important;
     height: 100%;
-  }
 
-  .path-type {
-    .unlabeled-select {
-      min-width: 200px;
+    input.no-label {
+      height: calc($row-height - 2px);
+      padding: 10px;
     }
   }
 
-  &, .input-container {
+  :deep(.col), INPUT {
+    height: $row-height;
+  }
+  &, :deep(.input-container) {
     height: $row-height;
   }
 
-  .input-container .in-input.unlabeled-select {
+  :deep(.input-container) :deep(.in-input.unlabeled-select) {
     width: initial;
   }
 
@@ -217,11 +209,16 @@ $row-height: 40px;
     line-height: $row-height;
   }
 
-  .v-select INPUT {
+  :deep(.v-select) INPUT {
     height: 50px;
   }
-  .labeled-input {
+  :deep(.labeled-input) {
     padding-top: 6px;
   }
+
+  :deep(.unlabeled-select) {
+    height: 100%;
+    min-width: 200px;
+  }
 }
 </style>

package/edit/networking.k8s.io.ingress/index.vue

@@ -20,6 +20,7 @@ import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination
 
 export default {
   name:         'CRUIngress',
+  emits:        ['input'],
   inheritAttrs: false,
   components:   {
     IngressClass,

package/edit/networking.k8s.io.networkpolicy/PolicyRulePort.vue

@@ -28,7 +28,7 @@ export default {
   <div class="row">
     <div class="col span-4">
       <LabeledInput
-        v-model.number="value.port"
+        v-model:value.number="value.port"
         :mode="mode"
         type="number"
         min="1"

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -22,6 +22,7 @@ const POLICY_TYPES = {
 };
 
 export default {
+  emits:        ['input'],
   // Props are found in CreateEditView
   // props: {},
   inheritAttrs: false,

package/edit/node.vue

@@ -8,6 +8,8 @@ import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 
 export default {
+  emits: ['input'],
+
   components: {
     CruResource,
     Labels,

package/edit/persistentvolumeclaim.vue

@@ -21,6 +21,7 @@ const DEFAULT_STORAGE = '10Gi';
 
 export default {
   name:         'PersistentVolumeClaim',
+  emits:        ['input'],
   inheritAttrs: false,
   components:   {
     Banner,

package/edit/policy.poddisruptionbudget.vue

@@ -11,7 +11,9 @@ import { POD } from '@shell/config/types';
 import FormValidation from '@shell/mixins/form-validation';
 
 export default {
-  name:         'PodDisruptionBudget',
+  name:  'PodDisruptionBudget',
+  emits: ['input'],
+
   inheritAttrs: false,
   components:   {
     ResourceSelector,

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

@@ -11,6 +11,8 @@ import { MANAGEMENT } from '@shell/config/types';
 import { sanitizeKey, sanitizeIP, sanitizeValue } from '@shell/utils/string';
 
 export default {
+  emits: ['copied-windows'],
+
   components: {
     Banner, Checkbox, CopyCode, InfoBox, KeyValue, LabeledInput, Taints
   },

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

@@ -3,6 +3,8 @@ import Labels from '@shell/components/form/Labels';
 import Tab from '@shell/components/Tabbed/Tab';
 
 export default {
+  emits: ['update:value', 'input'],
+
   components: { Labels, Tab },
 
   props: {

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

@@ -14,6 +14,8 @@ const _NEW = '_NEW';
 const _NONE = '_NONE';
 
 export default {
+  emits: ['update:value', 'credential-created'],
+
   components: {
     Loading, LabeledSelect, CruResource, NameNsDescription, Banner
   },

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

@@ -20,6 +20,8 @@ import AgentEnv from '@shell/edit/provisioning.cattle.io.cluster/AgentEnv';
 const HARVESTER_HIDE_KEY = 'cm-harvester-import';
 
 export default {
+  emits: ['input'],
+
   components: {
     Banner,
     ClusterMembershipEditor,

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

@@ -39,6 +39,8 @@ const PROXY_ENDPOINT = '/meta/proxy';
 export default {
   name: 'CruCluster',
 
+  emits: ['update:value', 'set-subtype', 'input'],
+
   components: {
     CruResource,
     EmberPage,
@@ -51,8 +53,6 @@ export default {
 
   mixins: [CreateEditView],
 
-  emits: ['set-subtype'],
-
   inheritAttrs: false,
 
   props: {

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

@@ -29,7 +29,7 @@ import { sortBy } from '@shell/utils/sort';
 import { vspherePoolConfigMerge } from '@shell/machine-config/vmwarevsphere-pool-config-merge';
 
 import { compare, sortable } from '@shell/utils/version';
-import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
+import { isHarvesterSatisfiesVersion, labelForAddon } from '@shell/utils/cluster';
 
 import { BadgeState } from '@components/BadgeState';
 import { Banner } from '@components/Banner';
@@ -62,6 +62,7 @@ import Registries from '@shell/edit/provisioning.cattle.io.cluster/tabs/registri
 import AddOnConfig from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig';
 import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced';
 import ClusterAppearance from '@shell/components/form/ClusterAppearance';
+import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
@@ -92,6 +93,8 @@ const FLEET_AGENT_CUSTOMIZATION = 'fleetAgentDeploymentCustomization';
 const isAzureK8sUnsupported = (version) => semver.gte(version, '1.30.0');
 
 export default {
+  emits: ['update:value', 'input'],
+
   components: {
     AgentEnv,
     BadgeState,
@@ -113,7 +116,8 @@ export default {
     Registries,
     AddOnConfig,
     Advanced,
-    ClusterAppearance
+    ClusterAppearance,
+    AddOnAdditionalManifest
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -246,6 +250,7 @@ export default {
       machinePoolErrors:     {},
       allNamespaces:         [],
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
+      labelForAddon
     };
   },
 
@@ -1544,7 +1549,7 @@ export default {
             versionName: entry.version,
           });
 
-          this.versionInfo.chartName = res;
+          this.versionInfo[chartName] = res;
           const key = this.chartVersionKey(chartName);
 
           if (!this.userChartValues[key]) {
@@ -1561,14 +1566,16 @@ export default {
       this.addonNames.forEach((name) => {
         const chartValues = this.versionInfo[name]?.questions ? this.initYamlEditor(name) : {};
 
-        this.userChartValuesTemp.name = chartValues;
+        this.userChartValuesTemp[name] = chartValues;
       });
       this.refreshComponentWithYamls(key);
     },
     refreshComponentWithYamls(key) {
       const component = this.$refs[key];
 
-      if (component) {
+      if (Array.isArray(component) && component.length > 0) {
+        this.refreshYamls(component[0].$refs);
+      } else if (component) {
         this.refreshYamls(component.$refs);
       }
     },
@@ -1587,7 +1594,7 @@ export default {
     },
 
     updateValues(name, values) {
-      this.userChartValuesTemp.name = values;
+      this.userChartValuesTemp[name] = values;
       this.syncChartValues(name);
     },
 
@@ -1871,7 +1878,7 @@ export default {
         const userValues = this.userChartValues[key];
 
         if (userValues) {
-          rkeConfig.chartValues.name = userValues;
+          rkeConfig.chartValues[name] = userValues;
         }
       });
     },
@@ -2382,24 +2389,42 @@ export default {
           />
         </Tab>
 
-        <!-- Add-on Config -->
+        <!-- Add-on Configs -->
         <Tab
-          name="addons"
-          label-key="cluster.tabs.addons"
-          @active="showAddons('tab-addOnConfig')"
+          v-for="v in addonVersions"
+          :key="v.name"
+          :name="v.name"
+          :label="labelForAddon($store, v.name, false)"
+          :weight="9"
+          :showHeader="false"
+          @active="showAddons(v.name)"
         >
           <AddOnConfig
-            ref="tab-addOnConfig"
+            :ref="v.name"
             v-model:value="localValue"
             :mode="mode"
             :version-info="versionInfo"
-            :addon-versions="addonVersions"
+            :addon-version="v"
             :addons-rev="addonsRev"
             :user-chart-values-temp="userChartValuesTemp"
             :init-yaml-editor="initYamlEditor"
             @update:value="$emit('input', $event)"
             @update-questions="syncChartValues"
             @update-values="updateValues"
+          />
+        </Tab>
+
+        <!-- Add-on Additional Manifest -->
+        <Tab
+          name="additionalmanifest"
+          label-key="cluster.tabs.addOnAdditionalManifest"
+          :showHeader="false"
+          @active="refreshComponentWithYamls('additionalmanifest')"
+        >
+          <AddOnAdditionalManifest
+            ref="additionalmanifest"
+            :value="value"
+            :mode="mode"
             @additional-manifest-changed="updateAdditionalManifest"
           />
         </Tab>

package/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest.vue

@@ -0,0 +1,49 @@
+<script>
+import YamlEditor from '@shell/components/YamlEditor';
+export default {
+  components: { YamlEditor },
+
+  emits: ['additional-manifest-changed'],
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    additionalManifest: {
+      get() {
+        return this.value.spec.rkeConfig.additionalManifest;
+      },
+      set(neu) {
+        this.$emit('additional-manifest-changed', neu);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h3>
+      {{ t('cluster.addOns.additionalManifest.title') }}
+      <i
+        v-clean-tooltip="t('cluster.addOns.additionalManifest.tooltip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <YamlEditor
+      ref="yaml-additional"
+      v-model:value="additionalManifest"
+      :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+      initial-yaml-values="# Additional Manifest YAML"
+      class="yaml-editor"
+    />
+  </div>
+</template>

package/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig.vue

@@ -3,10 +3,12 @@ import { Banner } from '@components/Banner';
 
 import Questions from '@shell/components/Questions';
 import YamlEditor from '@shell/components/YamlEditor';
-import { camelToTitle } from '@shell/utils/string';
+import { labelForAddon } from '@shell/utils/cluster';
 import { _EDIT } from '@shell/config/query-params';
 
 export default {
+  emits: ['additional-manifest-changed', 'update-questions', 'update-values'],
+
   components: {
     Banner,
     Questions,
@@ -29,8 +31,8 @@ export default {
       required: true,
     },
 
-    addonVersions: {
-      type:     Array,
+    addonVersion: {
+      type:     Object,
       required: false,
       default:  null
     },
@@ -50,28 +52,15 @@ export default {
 
   },
 
+  data() {
+    return { labelForAddon };
+  },
+
   computed: {
-    additionalManifest: {
-      get() {
-        return this.value.spec.rkeConfig.additionalManifest;
-      },
-      set(neu) {
-        this.$emit('additional-manifest-changed', neu);
-      }
-    },
     isEdit() {
       return this.mode === _EDIT;
-    },
-  },
-
-  methods: {
-
-    labelForAddon(name) {
-      const fallback = `${ camelToTitle(name.replace(/^(rke|rke2|rancher)-/, '')) } Configuration`;
-
-      return this.$store.getters['i18n/withFallback'](`cluster.addonChart."${ name }"`, null, fallback);
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -84,54 +73,32 @@ export default {
       {{ t('cluster.addOns.dependencyBanner') }}
     </Banner>
     <div
-      v-if="versionInfo && addonVersions.length"
+      v-if="versionInfo && addonVersion"
       :key="addonsRev"
     >
-      <div
-        v-for="(v, i) in addonVersions"
-        :key="i"
-      >
-        <h3>{{ labelForAddon(v.name) }}</h3>
-        <Questions
-          v-if="versionInfo[v.name] && versionInfo[v.name].questions && v.name && userChartValuesTemp[v.name]"
-          v-model:value="userChartValuesTemp[v.name]"
-          :emit="true"
-          in-store="management"
-          :mode="mode"
-          :tabbed="false"
-          :source="versionInfo[v.name]"
-          :target-namespace="value.metadata.namespace"
-          @updated="$emit('update-questions', v.name)"
-        />
-        <YamlEditor
-          v-else
-          ref="yaml-values"
-          :value="initYamlEditor(v.name)"
-          :scrolling="true"
-          :as-object="true"
-          :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-          :hide-preview-buttons="true"
-          @update:value="data => $emit('update-values', v.name, data)"
-        />
-        <div class="spacer" />
-      </div>
-    </div>
-
-    <div>
-      <h3>
-        {{ t('cluster.addOns.additionalManifest.title') }}
-        <i
-          v-clean-tooltip="t('cluster.addOns.additionalManifest.tooltip')"
-          class="icon icon-info"
-        />
-      </h3>
+      <h3>{{ labelForAddon($store, addonVersion.name) }}</h3>
+      <Questions
+        v-if="versionInfo[addonVersion.name] && versionInfo[addonVersion.name].questions && addonVersion.name && userChartValuesTemp[addonVersion.name]"
+        v-model:value="userChartValuesTemp[addonVersion.name]"
+        :emit="true"
+        in-store="management"
+        :mode="mode"
+        :tabbed="false"
+        :source="versionInfo[addonVersion.name]"
+        :target-namespace="value.metadata.namespace"
+        @updated="$emit('update-questions', addonVersion.name)"
+      />
       <YamlEditor
-        ref="yaml-additional"
-        v-model:value="additionalManifest"
+        v-else
+        ref="yaml-values"
+        :value="initYamlEditor(addonVersion.name)"
+        :scrolling="true"
+        :as-object="true"
         :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-        initial-yaml-values="# Additional Manifest YAML"
-        class="yaml-editor"
+        :hide-preview-buttons="true"
+        @input="data => $emit('update-values', addonVersion.name, data)"
       />
+      <div class="spacer" />
     </div>
   </div>
 </template>

package/edit/provisioning.cattle.io.cluster/tabs/AgentConfiguration.vue

@@ -16,6 +16,8 @@ const CUSTOM = 'custom';
 // This is the form for Agent Configuration
 // Used for both Cluster Agent and Fleet Agent configuration
 export default {
+  emits: ['input'],
+
   components: {
     Banner,
     ContainerResourceLimit,

package/edit/provisioning.cattle.io.cluster/tabs/Basics.vue

@@ -16,6 +16,8 @@ import { _CREATE, _EDIT } from '@shell/config/query-params';
 const HARVESTER = 'harvester';
 
 export default {
+  emits: ['enabled-system-services-changed', 'cilium-values-changed', 'kubernetes-changed', 'show-deprecated-patch-versions-changed', 'cis-changed', 'psa-default-changed'],
+
   components: {
     Banner,
     Checkbox,

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

@@ -13,6 +13,8 @@ export default {
 
   name: 'MachinePool',
 
+  emits: ['validationChanged', 'error'],
+
   components: {
     LabeledInput,
     Checkbox,

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

@@ -5,6 +5,8 @@ import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthS
 import { NORMAN } from '@shell/config/types';
 
 export default {
+  emits: ['update:value'],
+
   components: {
     LabeledInput,
     Checkbox,

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

@@ -7,6 +7,8 @@ import S3Config from '@shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Con
 import UnitInput from '@shell/components/form/UnitInput';
 
 export default {
+  emits: ['s3-backup-changed', 'config-etcd-expose-metrics-changed'],
+
   components: {
     LabeledInput,
     RadioGroup,

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

@@ -9,6 +9,8 @@ import ACE from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/ACE'
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
 export default {
+  emits: ['update:value', 'truncate-hostname', 'input'],
+
   components: {
     LabeledInput,
     Banner,

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

@@ -9,6 +9,8 @@ import { SECRET_TYPES as TYPES } from '@shell/config/secret';
 import { base64Decode, base64Encode } from '@shell/utils/crypto';
 
 export default {
+  emits: ['updateConfigs'],
+
   components: {
     ArrayListGrouped,
     LabeledInput,

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

@@ -8,6 +8,7 @@ import RegistryConfigs from '@shell/edit/provisioning.cattle.io.cluster/tabs/reg
 import RegistryMirrors from '@shell/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors';
 
 export default {
+  emits:      ['custom-registry-changed', 'registry-host-changed', 'registry-secret-changed', 'input', 'update-configs-changed'],
   components: {
     LabeledInput,
     Banner,

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

@@ -16,6 +16,8 @@ const DEFAULTS = {
 };
 
 export default {
+  emits: ['update:value'],
+
   components: {
     RadioGroup, Checkbox, UnitInput
   },

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

@@ -13,7 +13,7 @@ import S3 from '@shell/chart/rancher-backup/S3';
 import { mapGetters } from 'vuex';
 import { SECRET, BACKUP_RESTORE, CATALOG } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
-import { NAMESPACE, _VIEW } from '@shell/config/query-params';
+import { NAMESPACE, _VIEW, _CREATE } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
@@ -88,7 +88,7 @@ export default {
       this.value['spec'] = { retentionCount: 10 };
     }
     let s3 = {};
-    let useEncryption = false;
+    let useEncryption = this.mode === _CREATE;
     let setSchedule = false;
     let storageSource = 'useDefault';
 

package/edit/secret/index.vue

@@ -32,6 +32,8 @@ const creatableTypes = [
 export default {
   name: 'CruSecret',
 
+  emits: ['set-subtype', 'input'],
+
   components: {
     LabeledInput,
     LabeledSelect,

package/edit/service.vue

@@ -41,6 +41,7 @@ const SESSION_AFFINITY_ACTION_LABELS = {
 const SESSION_STICKY_TIME_DEFAULT = 10800;
 
 export default {
+  emits:        ['set-subtype'],
   // Props are found in CreateEditView
   // props: {},
   inheritAttrs: false,
@@ -377,7 +378,7 @@ export default {
             <LabeledInput
               v-else
               ref="external-name"
-              v-model.number="value.spec.externalName"
+              v-model:value.number="value.spec.externalName"
               :mode="mode"
               :label="t('servicesPage.externalName.input.label')"
               :placeholder="t('servicesPage.externalName.placeholder')"

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

@@ -20,6 +20,7 @@ const LINK_TARGET_BLANK = '_blank';
 const LINK_TARGET_SELF = '_self';
 
 export default {
+  emits:      ['update:value.spec.iconSrc ', 'input'],
   mixins:     [CreateEditView, FormValidation],
   components: {
     CruResource,