@rancher/shell 3.0.1 → 3.0.2-rc.1

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

@@ -86,9 +86,7 @@ export default {
 
     this.tlsMode = tls;
 
-    if (this.value.spec.correctDrift === undefined) {
-      this.value.spec['correctDrift'] = { enabled: false };
-    }
+    this.correctDriftEnabled = this.value.spec?.correctDrift?.enabled || false;
 
     this.updateTargets();
   },
@@ -119,7 +117,7 @@ export default {
       subtext:        this.t('fleet.gitRepo.add.steps.repoInfo.subtext'),
       descriptionKey: 'fleet.gitRepo.add.steps.repoInfo.description',
       ready:          false,
-      weight:         30
+      weight:         1
     };
 
     const stepTargetInfo = {
@@ -129,11 +127,9 @@ export default {
       subtext:        this.t('fleet.gitRepo.add.steps.targetInfo.subtext'),
       descriptionKey: 'fleet.gitRepo.steps.add.targetInfo.description',
       ready:          true,
-      weight:         30
+      weight:         1
     };
 
-    const addRepositorySteps = [stepRepoInfo, stepTargetInfo].sort((a, b) => (b.weight || 0) - (a.weight || 0));
-
     return {
       allClusters:             [],
       allClusterGroups:        [],
@@ -145,6 +141,7 @@ export default {
       privateKey:              null,
       tlsMode:                 null,
       caBundle:                null,
+      correctDriftEnabled:     false,
       targetAdvancedErrors:    null,
       matchingClusters:        null,
       ref,
@@ -155,7 +152,6 @@ export default {
       targetAdvanced,
       stepRepoInfo,
       stepTargetInfo,
-      addRepositorySteps,
       displayHelmRepoURLRegex: false,
       fvFormRuleSets:          [{ path: 'spec.repo', rules: ['required'] }]
     };
@@ -168,6 +164,13 @@ export default {
       return _SPECIFY;
     },
 
+    steps() {
+      return [
+        this.stepRepoInfo,
+        this.stepTargetInfo
+      ];
+    },
+
     isLocal() {
       return this.value.metadata.namespace === 'fleet-local';
     },
@@ -463,7 +466,7 @@ export default {
     },
 
     stepOneReady() {
-      this.addRepositorySteps[0]['ready'] = this.stepOneRequires;
+      this.stepRepoInfo['ready'] = this.stepOneRequires;
     },
 
     updateTls() {
@@ -492,6 +495,12 @@ export default {
         }
       }
     },
+
+    onSave() {
+      this.value.spec['correctDrift'] = { enabled: this.correctDriftEnabled };
+
+      this.save();
+    }
   }
 };
 </script>
@@ -507,13 +516,12 @@ export default {
     :subtypes="[]"
     :validation-passed="true"
     :errors="errors"
-    :steps="addRepositorySteps"
-    :edit-first-step="true"
+    :steps="steps"
     :finish-mode="'finish'"
     class="wizard"
     @cancel="done"
     @error="e=>errors = e"
-    @finish="save"
+    @finish="onSave"
   >
     <template #noticeBanner>
       <Banner
@@ -646,35 +654,26 @@ export default {
       </template>
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.resources.label'" />
-      <div>
+      <div class="resource-handling">
         <Checkbox
-          v-model:value="value.spec.correctDrift.enabled"
+          v-model:value="correctDriftEnabled"
+          :tooltip="t('fleet.gitRepo.resources.correctDriftBanner')"
           data-testid="GitRepo-correctDrift-checkbox"
           class="check"
           type="checkbox"
           label-key="fleet.gitRepo.resources.correctDrift"
           :mode="mode"
         />
-        <Banner
-          data-testid="GitRepo-correctDrift-banner"
-          color="info"
-        >
-          {{ t('fleet.gitRepo.resources.correctDriftBanner') }}
-        </Banner>
+        <Checkbox
+          v-model:value="value.spec.keepResources"
+          :tooltip="t('fleet.gitRepo.resources.keepResourcesBanner')"
+          data-testid="GitRepo-keepResources-checkbox"
+          class="check"
+          type="checkbox"
+          label-key="fleet.gitRepo.resources.keepResources"
+          :mode="mode"
+        />
       </div>
-
-      <Checkbox
-        v-model:value="value.spec.keepResources"
-        class="check"
-        type="checkbox"
-        label-key="fleet.gitRepo.resources.keepResources"
-        :mode="mode"
-      />
-      <Banner
-        color="info"
-      >
-        {{ t('fleet.gitRepo.resources.keepResourcesBanner') }}
-      </Banner>
       <div class="spacer" />
       <h2 v-t="'fleet.gitRepo.paths.label'" />
       <ArrayList
@@ -764,3 +763,11 @@ export default {
     </template>
   </CruResource>
 </template>
+
+<style lang="scss" scoped>
+  .resource-handling {
+    display: flex;
+    flex-direction: column;
+    gap: 5px
+  }
+</style>

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

@@ -248,6 +248,7 @@ export default {
       busy:                  false,
       machinePoolValidation: {}, // map of validation states for each machine pool
       machinePoolErrors:     {},
+      addonConfigValidation: {}, // validation state of each addon config (boolean of whether codemirror's yaml lint passed)
       allNamespaces:         [],
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
       labelForAddon
@@ -797,7 +798,9 @@ export default {
       // and in all of the validation statuses for each machine pool
       Object.values(this.machinePoolValidation).forEach((v) => (base = base && v));
 
-      return validRequiredPools && base;
+      const hasAddonConfigErrors = Object.values(this.addonConfigValidation).filter((v) => v === false).length > 0;
+
+      return validRequiredPools && base && !hasAddonConfigErrors;
     },
     currentCluster() {
       if (this.mode === _EDIT) {
@@ -1565,6 +1568,8 @@ export default {
      * 2) We're ready to cache any values the user provides for each addon
      */
     async initAddons() {
+      this.addonConfigValidation = {};
+
       for (const chartName of this.addonNames) {
         const entry = this.chartVersions[chartName];
 
@@ -2133,7 +2138,11 @@ export default {
           }
         }
       }
-    }
+    },
+
+    addonConfigValidationChanged(configName, isValid) {
+      this.addonConfigValidation[configName] = isValid;
+    },
   }
 };
 </script>
@@ -2430,6 +2439,7 @@ export default {
           :label="labelForAddon($store, v.name, false)"
           :weight="9"
           :showHeader="false"
+          :error="addonConfigValidation[v.name]===false"
           @active="showAddons(v.name)"
         >
           <AddOnConfig
@@ -2444,6 +2454,7 @@ export default {
             @update:value="$emit('input', $event)"
             @update-questions="syncChartValues"
             @update-values="updateValues"
+            @validationChanged="e => addonConfigValidationChanged(v.name, e)"
           />
         </Tab>
 

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

@@ -7,7 +7,7 @@ import { labelForAddon } from '@shell/utils/cluster';
 import { _EDIT } from '@shell/config/query-params';
 
 export default {
-  emits: ['additional-manifest-changed', 'update-questions', 'update-values'],
+  emits: ['additional-manifest-changed', 'update-questions', 'update-values', 'validationChanged'],
 
   components: {
     Banner,
@@ -60,7 +60,13 @@ export default {
     isEdit() {
       return this.mode === _EDIT;
     }
-  }
+  },
+
+  methods: {
+    handleValidationChanged(e) {
+      this.$emit('validationChanged', e);
+    }
+  },
 };
 </script>
 
@@ -91,12 +97,14 @@ export default {
       <YamlEditor
         v-else
         ref="yaml-values"
+        data-testid="addon-yaml-editor"
         :value="initYamlEditor(addonVersion.name)"
         :scrolling="true"
         :as-object="true"
         :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
         :hide-preview-buttons="true"
         @update:value="$emit('update-values', addonVersion.name, $event)"
+        @validationChanged="handleValidationChanged"
       />
       <div class="spacer" />
     </div>

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

@@ -1,4 +1,5 @@
 <script>
+import { clone } from '@shell/utils/object';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Checkbox } from '@components/Form/Checkbox';
@@ -6,6 +7,7 @@ import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthS
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SecretSelector from '@shell/components/form/SecretSelector';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
+import { isBase64 } from '@shell/utils/string';
 import { base64Decode, base64Encode } from '@shell/utils/crypto';
 
 export default {
@@ -42,7 +44,7 @@ export default {
   },
 
   data() {
-    const configMap = this.value.spec.rkeConfig?.registries?.configs || {};
+    const configMap = clone(this.value.spec.rkeConfig?.registries?.configs) || {};
     const entries = [];
 
     const defaultAddValue = {
@@ -57,7 +59,11 @@ export default {
       if (configMap[hostname]) {
         configMap[hostname].insecureSkipVerify = configMap[hostname].insecureSkipVerify ?? defaultAddValue.insecureSkipVerify;
         configMap[hostname].authConfigSecretName = configMap[hostname].authConfigSecretName ?? defaultAddValue.authConfigSecretName;
-        configMap[hostname].caBundle = base64Decode(configMap[hostname].caBundle ?? defaultAddValue.caBundle);
+
+        const caBundle = configMap[hostname].caBundle ?? defaultAddValue.caBundle;
+
+        configMap[hostname].caBundle = isBase64(caBundle) ? base64Decode(caBundle) : caBundle;
+
         configMap[hostname].tlsSecretName = configMap[hostname].tlsSecretName ?? defaultAddValue.tlsSecretName;
       }
       entries.push({

package/edit/provisioning.cattle.io.cluster/tabs/registries/__tests__/RegistryConfigs.test.ts

@@ -23,10 +23,13 @@ describe('component: RegistryConfigs', () => {
   };
 
   describe('key CA Cert Bundle', () => {
-    it('should display default key', () => {
+    it.each([
+      ['source is plain text', 'Zm9vYmFy', 'foobar'],
+      ['source is base64', 'foobar', 'foobar'],
+    ])('should display key, %p', (_, sourceCaBundle, displayedCaBundle) => {
       const value = clone(PROV_CLUSTER);
 
-      value.spec.rkeConfig.registries.configs = { foo: { caBundle: 'Zm9vYmFy' } };
+      value.spec.rkeConfig.registries.configs = { foo: { caBundle: sourceCaBundle } };
 
       mountOptions.propsData.value = value;
 
@@ -37,7 +40,7 @@ describe('component: RegistryConfigs', () => {
 
       const registry = wrapper.findComponent('[data-testid^="registry-caBundle"]');
 
-      expect(registry.props().value).toBe('foobar');
+      expect(registry.props().value).toBe(displayedCaBundle);
     });
 
     it('should update key in base64 format', async() => {

package/edit/workload/mixins/workload.js

@@ -250,7 +250,6 @@ export default {
       }
     }
 
-    this.selectContainer(container);
     if (this.realMode === _CLONE && this.value.type === WORKLOAD_TYPES.JOB) {
       this.cleanUpClonedJobData();
     }
@@ -280,12 +279,10 @@ export default {
       podFsGroup:                 podTemplateSpec.securityContext?.fsGroup,
       savePvcHookName:            'savePvcHook',
       tabWeightMap:               TAB_WEIGHT_MAP,
-      fvFormRuleSets:             [{
-        path: 'image', rootObject: this.container, rules: ['required'], translationKey: 'workload.container.image'
-      }],
-      fvReportedValidationPaths: ['spec'],
-      isNamespaceNew:            false,
-      idKey:                     ID_KEY
+      fvFormRuleSets:             [],
+      fvReportedValidationPaths:  ['spec'],
+      isNamespaceNew:             false,
+      idKey:                      ID_KEY
     };
   },
 
@@ -605,6 +602,15 @@ export default {
       this.value['type'] = neu;
       delete this.value.apiVersion;
     },
+
+    container: {
+      handler(c) {
+        this.fvFormRuleSets = [{
+          path: 'image', rootObject: c, rules: ['required'], translationKey: 'workload.container.image'
+        }];
+      },
+      immediate: true
+    }
   },
 
   created() {
@@ -612,6 +618,8 @@ export default {
     this.registerBeforeHook(this.getPorts, 'getPorts');
 
     this.registerAfterHook(this.saveService, 'saveService');
+
+    this.selectContainer(this.container);
   },
 
   methods: {

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

@@ -1,11 +1,9 @@
 <script>
-import ResourceTable from '@shell/components/ResourceTable';
-import ResourceFetch from '@shell/mixins/resource-fetch';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 
 export default {
   name:       'ListApps',
-  components: { ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { PaginatedResourceTable },
 
   props: {
     resource: {
@@ -25,20 +23,15 @@ export default {
 
   async fetch() {
     await this.$store.dispatch('catalog/load');
-
-    await this.$fetchType(this.resource);
   },
 };
 </script>
 
 <template>
-  <ResourceTable
+  <PaginatedResourceTable
     class="apps"
     :schema="schema"
-    :rows="rows"
-    :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     data-testid="installed-app-catalog-list"
   >
     <template #cell:upgrade="{row}">
@@ -56,7 +49,7 @@ export default {
         class="text-muted"
       />
     </template>
-  </ResourceTable>
+  </PaginatedResourceTable>
 </template>
 
 <style scoped>

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

@@ -1,47 +1,81 @@
-<script>
-import ResourceTable from '@shell/components/ResourceTable';
+<script lang="ts">
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import ClusterRepo from '@shell/models/catalog.cattle.io.clusterrepo';
+import { PaginationArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { defineComponent } from 'vue';
 
-export default {
-  name:       'ListClusterReposApps',
-  components: { ResourceTable },
-  props:      {
-    resource: {
-      type:     String,
-      required: true,
-    },
+export default defineComponent({
+  name: 'ListClusterReposApps',
+
+  components: { PaginatedResourceTable },
+
+  props: {
     schema: {
       type:     Object,
       required: true,
     },
-    rows: {
-      type:     Array,
-      required: true,
-    },
-    loading: {
-      type:     Boolean,
-      required: false,
-    },
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
     }
   },
 
-  computed: {
-    filterHideRows() {
-      return this.rows.filter((repo) => !(repo?.metadata?.annotations?.[CATALOG_ANNOTATIONS.HIDDEN_REPO] === 'true'));
+  methods: {
+    /**
+     * Filter out hidden repos from list of all repos
+     */
+    filterRowsLocal(rows: ClusterRepo[]) {
+      return rows.filter((repo) => !(repo?.metadata?.annotations?.[CATALOG_ANNOTATIONS.HIDDEN_REPO] === 'true'));
+    },
+
+    /**
+     * Filter out hidden repos via api
+     */
+    filterRowsApi(pagination: PaginationArgs): PaginationArgs {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const field = `metadata.annotations[${ CATALOG_ANNOTATIONS.HIDDEN_REPO }]`;
+
+      let existing: PaginationParamFilter | null = null;
+
+      for (let i = 0; i < pagination.filters.length; i++) {
+        const filter = pagination.filters[i];
+
+        if (!!filter.fields.find((f) => f.field === field)) {
+          existing = filter;
+          break;
+        }
+      }
+
+      const required = PaginationParamFilter.createSingleField({
+        field,
+        exact:  true,
+        value:  'true',
+        equals: false
+      });
+
+      if (!!existing) {
+        Object.assign(existing, required);
+      } else {
+        pagination.filters.push(required);
+      }
+
+      return pagination;
     }
   }
-};
+
+});
 </script>
 
 <template>
   <div>
-    <ResourceTable
+    <PaginatedResourceTable
       :schema="schema"
-      :rows="filterHideRows"
-      :loading="loading"
+      :local-filter="filterRowsLocal"
+      :api-filter="filterRowsApi"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       data-testid="app-cluster-repo-list"
     />

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

@@ -115,11 +115,11 @@ export default {
     >
       <template #cell:deploymentsReady="{row}">
         <span
-          v-if="row.status && (row.status.summary.desiredReady !== row.status.summary.ready)"
+          v-if="row.status && row.status.summary && (row.status.summary.desiredReady !== row.status.summary.ready)"
           class="text-warning"
         >
           {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
-        <span v-else-if="row.status">{{ row.status.summary.desiredReady }}</span>
+        <span v-else-if="row.status && row.status.summary">{{ row.status.summary.desiredReady }}</span>
         <span v-else>-</span>
       </template>
     </ResourceTable>

package/list/management.cattle.io.feature.vue

@@ -9,6 +9,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { getVendor } from '@shell/config/private-label';
 
 export default {
   components: {
@@ -63,6 +64,7 @@ export default {
       serverUrl:        '',
       noUrlSet:         false,
       showModal:        false,
+      vendor:           getVendor(),
     };
   },
 
@@ -93,6 +95,9 @@ export default {
   watch: {
     showPromptUpdate(show) {
       if (show) {
+        // Clear last error
+        this.error = null;
+
         this.showModal = true;
       } else {
         this.showModal = false;
@@ -138,7 +143,9 @@ export default {
         btnCB(true);
         this.close();
       } catch (err) {
-        this.error = err;
+        // An error occurred, so toggle back the value - the call failed, so the change was not made
+        this.update.spec.value = !this.update.enabled;
+        this.error = err.message || err;
         btnCB(false);
       }
     },
@@ -214,7 +221,7 @@ export default {
       v-if="showModal"
       class="update-modal"
       name="toggleFlag"
-      :width="350"
+      :width="450"
       height="auto"
       styles="max-height: 100vh;"
       :click-to-close="!restart || !waiting"
@@ -227,7 +234,7 @@ export default {
       >
         <template #title>
           <h4 class="text-default-text">
-            Are you sure?
+            {{ t('featureFlags.title') }}
           </h4>
         </template>
         <template #body>
@@ -263,8 +270,8 @@ export default {
             </span>
             <Banner
               v-if="restart"
-              color="warning"
-              :label="t('featureFlags.restartRequired')"
+              color="error"
+              :label="t('featureFlags.restartRequired', vendor)"
             />
           </div>
           <div class="text-error mb-10">