@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.2

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -1,4 +1,6 @@
-import { mount } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
+import { mount, flushPromises } from '@vue/test-utils';
+import { useForm } from 'vee-validate';
 import { LabeledInput } from './index';
 
 describe('component: LabeledInput', () => {
@@ -105,4 +107,206 @@ describe('component: LabeledInput', () => {
     expect(mainInput.attributes('aria-label')).toBeUndefined();
     expect(wrapper.find('label').text()).toBe(label);
   });
+
+  describe('vee-validate integration', () => {
+    const i18nMock = { $store: { getters: { 'i18n/t': jest.fn() } } };
+
+    it('without name prop: existing rules-based validation message is shown after blur', async() => {
+      const errorMessage = 'This field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await nextTick();
+
+      expect(wrapper.vm.validationMessage).toBe(errorMessage);
+    });
+
+    it('without name prop: error CSS class is not applied automatically', async() => {
+      const notEmptyRule = (v: string) => (!v ? 'Error' : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await nextTick();
+
+      expect(wrapper.find('.labeled-input').classes()).not.toContain('error');
+    });
+
+    it('with name prop: name attribute is set on the input element', () => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { name: 'myField' },
+        mocks:     i18nMock
+      });
+
+      expect(wrapper.find('input').attributes('name')).toStrictEqual('myField');
+    });
+
+    it('with name prop: existing rules run through vee-validate and show error message after blur', async() => {
+      const errorMessage = 'Field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          name:  'testField',
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await flushPromises();
+
+      expect(wrapper.vm.validationMessage).toStrictEqual(errorMessage);
+    });
+
+    it('with name prop: no error class when validation passes', async() => {
+      const notEmptyRule = (v: string) => (!v ? 'Error' : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          name:  'testField',
+          rules: [notEmptyRule],
+          value: 'valid value',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await flushPromises();
+
+      expect(wrapper.find('.labeled-input').classes()).not.toContain('error');
+      expect(wrapper.vm.validationMessage).toBeUndefined();
+    });
+
+    it('with name prop: form-level validation schema error is shown when the form validates', async() => {
+      const errorMessage = 'Username is required';
+      let triggerFormValidation!: () => Promise<unknown>;
+
+      const TestWrapper = defineComponent({
+        components: { LabeledInput },
+        setup() {
+          const { validate } = useForm({
+            validationSchema: { username: (v: string) => (!v ? errorMessage : true) },
+            initialValues:    { username: '' }
+          });
+
+          triggerFormValidation = validate;
+
+          return {};
+        },
+        template: '<LabeledInput name="username" value="" />'
+      });
+
+      const wrapper = mount(TestWrapper, { global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } } });
+
+      await triggerFormValidation();
+      await flushPromises();
+
+      const labeledInput = wrapper.findComponent(LabeledInput);
+
+      expect(labeledInput.vm.validationMessage).toStrictEqual(errorMessage);
+    });
+
+    it('without name prop: error clears when a previously invalid value becomes valid', async() => {
+      const errorMessage = 'This field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await nextTick();
+
+      expect(wrapper.vm.validationMessage).toBe(errorMessage);
+
+      await wrapper.setProps({ value: 'valid value' });
+      await nextTick();
+
+      expect(wrapper.vm.validationMessage).toBeUndefined();
+    });
+
+    it('with name prop: error clears when a previously invalid value becomes valid', async() => {
+      const errorMessage = 'Field cannot be empty';
+      const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          name:  'testField',
+          rules: [notEmptyRule],
+          value: '',
+        },
+        mocks: i18nMock
+      });
+
+      await wrapper.find('input').trigger('blur');
+      await flushPromises();
+
+      expect(wrapper.vm.validationMessage).toStrictEqual(errorMessage);
+
+      await wrapper.setProps({ value: 'valid value' });
+      await flushPromises();
+
+      expect(wrapper.vm.validationMessage).toBeUndefined();
+    });
+
+    describe('with both name and rules provided', () => {
+      it('shows the error message exactly once when invalid (not duplicated across both validation paths)', async() => {
+        const errorMessage = 'Field cannot be empty';
+        const notEmptyRule = (v: string) => (!v ? errorMessage : undefined);
+
+        const wrapper = mount(LabeledInput, {
+          propsData: {
+            name:  'testField',
+            rules: [notEmptyRule],
+            value: '',
+          },
+          mocks: i18nMock
+        });
+
+        await wrapper.find('input').trigger('blur');
+        await flushPromises();
+
+        expect(wrapper.vm.validationMessage).toStrictEqual(errorMessage);
+        expect(wrapper.vm.validationMessage).not.toContain(`${ errorMessage }, ${ errorMessage }`);
+      });
+
+      it('shows no error when the value satisfies the rules', async() => {
+        const notEmptyRule = (v: string) => (!v ? 'Field cannot be empty' : undefined);
+
+        const wrapper = mount(LabeledInput, {
+          propsData: {
+            name:  'testField',
+            rules: [notEmptyRule],
+            value: 'valid value',
+          },
+          mocks: i18nMock
+        });
+
+        await wrapper.find('input').trigger('blur');
+        await flushPromises();
+
+        expect(wrapper.vm.validationMessage).toBeUndefined();
+      });
+    });
+  });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, computed, watch } from 'vue';
+import { useField } from 'vee-validate';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
 import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
@@ -114,6 +115,15 @@ export default defineComponent({
     ariaLabel: {
       type:    String,
       default: ''
+    },
+
+    /**
+     * The field name used for vee-validate integration. When provided, the
+     * component registers with a parent vee-validate form context
+     */
+    name: {
+      type:    String,
+      default: null
     }
   },
 
@@ -132,15 +142,72 @@ export default defineComponent({
 
     const onInput = inject('onInput', provideProps.onInput);
 
+    // Stable fallback name so useField is always called unconditionally.
+    // When no name prop is given the field won't match any form-schema path.
+    const standaloneFieldId = `__field__${ generateRandomAlphaString(12) }`;
+    const veeFieldName = computed(() => props.name || standaloneFieldId);
+
+    // Pass existing rules to vee-validate so field-level validation still runs
+    const veeValidator = (value: unknown): boolean | string => {
+      // Return true when name is absent to avoid duplicating
+      // useLabeledFormElement validation
+      if (!props.name) {
+        return true;
+      }
+      for (const rule of props.rules as Array<(v: unknown) => string | undefined>) {
+        const msg = rule(value);
+
+        if (msg) {
+          return msg;
+        }
+      }
+
+      return true;
+    };
+
+    const {
+      errorMessage: veeError,
+      handleBlur:   veeHandleBlur,
+      validate:     veeValidate,
+      value:        veeValue,
+    } = useField<string | number | Record<string, unknown>>(
+      veeFieldName,
+      veeValidator,
+      {
+        initialValue:          props.value as string | number,
+        validateOnValueUpdate: true,
+      }
+    );
+
+    // Keep vee-validate's internal value in sync with the controlled prop value.
+    watch(() => props.value, (v) => {
+      if (veeValue.value !== v) {
+        veeValue.value = v as string | number;
+      }
+    });
+
+    const effectiveValidationMessage = computed(() => {
+      if (props.name && veeError.value) {
+        return veeError.value;
+      }
+
+      return validationMessage.value;
+    });
+
+    const effectiveStatus = computed(() => props.status);
+
     return {
       focused,
       onFocusLabeled,
       onBlurLabeled,
       onInput,
       isDisabled,
-      validationMessage,
+      validationMessage: effectiveValidationMessage,
       requiredField,
       isCompact,
+      veeHandleBlur,
+      veeValidate,
+      effectiveStatus,
     };
   },
 
@@ -339,6 +406,11 @@ export default defineComponent({
     onBlur(event: string | FocusEvent): void {
       this.$emit('blur', event);
       this.onBlurLabeled();
+      // Mark the field as touched in vee-validate without relying on its
+      // 'validated-only' guard, then run validation unconditionally so
+      // errors surface on the first blur (matching useLabeledFormElement behavior).
+      this.veeHandleBlur(event instanceof FocusEvent ? event : undefined, false);
+      this.veeValidate();
     },
 
     escapeHtml
@@ -353,7 +425,7 @@ export default defineComponent({
       focused,
       [mode]: true,
       disabled: isDisabled,
-      [status]: status,
+      [effectiveStatus]: effectiveStatus,
       suffix: hasSuffix,
       'has-clean-tooltip': hasTooltip,
       'compact-input': isCompact,
@@ -389,13 +461,14 @@ export default defineComponent({
         ref="value"
         v-bind="$attrs"
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
+        :name="name || undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :aria-disabled="isDisabled"
         :value="value || ''"
         :placeholder="_placeholder"
         autocapitalize="off"
-        :class="{ conceal: type === 'multiline-password' }"
+        :class="{ 'multiline-password': type === 'multiline-password' }"
         :aria-describedby="ariaDescribedBy"
         :aria-required="requiredField"
         @update:value="onInput"
@@ -410,6 +483,7 @@ export default defineComponent({
         :role="type === 'number' ? undefined : 'textbox'"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
+        :name="name || undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :aria-disabled="isDisabled"
@@ -464,6 +538,10 @@ export default defineComponent({
   </div>
 </template>
 <style scoped lang="scss">
+.multiline-password:not(:focus) {
+  -webkit-text-security: disc;
+}
+
 .labeled-input.view {
   input {
     text-overflow: ellipsis;

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -6,7 +6,7 @@ type StateType = boolean | 'true' | 'false' | undefined;
 export default defineComponent({
   props: {
     value: {
-      type:    [Boolean, String, Number],
+      type:    [Boolean, String, Number, null],
       default: false
     },
 

package/scripts/test-plugins-build.sh

@@ -236,10 +236,13 @@ function clone_repo_test_extension_build() {
 # Here we just add the extension that we want to include as a check (all our official extensions should be included here)
 # Don't forget to add the unit tests exception to clone_repo_test_extension_build function if a new extension has those
 # TODO: ISSUE #16858 - Reenable the tests as packages migrate to node version 24
-# clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
+clone_repo_test_extension_build "rancher" "kubewarden-ui" "kubewarden"
 # clone_repo_test_extension_build "rancher" "elemental-ui" "elemental"
 clone_repo_test_extension_build "neuvector" "manager-ext" "neuvector-ui-ext"
 # clone_repo_test_extension_build "StackVista" "rancher-extension-stackstate" "observability"
-# clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+clone_repo_test_extension_build "harvester" "harvester-ui-extension" "harvester"
+clone_repo_test_extension_build "rancher" "ali-ui" "ali"
+clone_repo_test_extension_build "rancher" "virtual-clusters-ui" "virtual-clusters"
+# clone_repo_test_extension_build "rancher" "rancher-ai-ui" "rancher-ai-ui"
 
 echo "All done"

package/server/server-middleware.js

@@ -1,6 +1,6 @@
 module.exports = function(req, res, next) {
-  // We do this redirect so that /verify-auth can work with both standalone and
-  // while dashboard is nested under ember.
+  // We do this redirect so that /verify-auth can work with both standalone
+  // and hosted configurations.
   if (req.url.includes('/verify-auth') || req.url.includes('/verify-auth-azure')) {
     res.writeHead(301, { Location: req.url.replace(/verify-auth(-azure)?/, 'auth/verify') });
     res.end();

package/static/humans.txt

@@ -0,0 +1 @@
+This product was created by the inspirational people at Rancher by SUSE.

package/static/robots.txt

@@ -0,0 +1,34 @@
+# ::::::::::::::::::::::::::::::;;;;;;;:::::::::::::::::::;:::::::::::::::::::
+# ::::::::::::::::::::::;+xxxxxxxxxxxxxxxxxxxx+;:::::::::+xxx+::::::::::::::::
+# :::::::::::::::::;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;::::+xxxxxxx+::::::::::::
+# ::::::::::::::+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;+xxxxxxxxxxx+::::::::
+# :::::::::::+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;::;++;:::::
+# :::::::::+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+::::::;+;::::
+# :::::::;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx::::;++:++::::
+# ::::::+xxxxxxxxxx++xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+::::;:;xx::::
+# :::::+xxxxxx+;:::::::::;;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+;;;+xxx;:::
+# ::::;xxxxx+:::::::::::::::;+xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+;;+xxxxxxxx;:::
+# ::::xxxxx;::::;+xxxxxx++::::;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx++++++++;::::
+# ::::xxxx+::::;xxx+;;;+xxx;::::xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx+;;::::::
+# ::::xxxx+::::+xx;:::::;+xx;::::xxxxxxxxxxxxxxxxxxxxxxx;:::;;;;;;;:::::::::::
+# ::::xxxxx;:::+xx+::::::;xxx;::::xxxxxx;:::::::;;+xxxxx;:::::::::::::::::::::
+# ::::;xxxx+;:::;++::::::;xxx;::::;xxxxx+;:::::::::;+xxxx;::::::::::::::::::::
+# :::::+xxxx+;::::::::::;xxxx;:::::;+xxxxxx+;:::::::;+xxxxx+;:::::::::::::::::
+# ::::::;xxxxx++;;:::;;+xxxx;:::::::::::::::::::::::::::::::::::::::::::::::::
+# :::::::;+xxxxxxxxxxxxxxxx;::::::::::::::::::::::::::::::::::::::::::::::::::
+# :::::::::;++xxxxxxxxxx++::::::::::::::::::::::::::::::::::::::::::::::::::::
+# ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+# ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+# ::::::::;;;;;::::::::::;;:::::::::;;:::::::::;;;;;::::::::::::;;;;;;;;;:::::
+# :::::+X&&$$$$&$+::::::x&$+:::::::X&X;:::::;X$&$$$$&$x;::::::x&&$$$$$$$$x::::
+# ::::x&$X;::::x$&X:::::x&$+:::::::X&X;::::+$&$;::::+$$X;::::;&$;:::::::::::::
+# :::;$&X;::::::::::::::x&$+:::::::X&X;::::X&$;::::::::::::::+&$::::::::::::::
+# ::::x&&$X;;:::::::::::x&$+:::::::X&X;::::+$&&X+;:::::::::::+&$;:::::::::::::
+# :::::;X$&&&&&&$;::::::x&$+:::::::X&X;::::::x$&&&&&&$+::::::+&&&&&&&&&&+:::::
+# :::::::::::;x$&&$:::::x&$+:::::::X&X;::::::::::::+$&&$+::::+&$::::::::::::::
+# :::::;::::::::X$&;::::+$$x:::::::$&X;:::::;::::::::x$$+::::+&$::::::::::::::
+# :::;$&$X;:::;X$&$:::::;X&$X;:::x$&$+::::;X&$X;:::;x$&$+::::;&$x;;;;;;;;:::::
+# :::::+X&&&&&&&X;::::::::+X$&&&&&$x;:::::::;X$&&&&&&$+:::::::;$&&&&&&&&&x::::
+# :::::::::;;;::::::::::::::::;;:::::::::::::::::;;::::::::::::::::::::::::::;
+User-Agent: *
+Disallow: /

package/static/welcome-cow.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 305.3 143.2" style="enable-background:new 0 0 305.3 143.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0876A9;}
+</style>
+<g>
+	<path class="st0" d="M305.2,31.5l-3.3-19.9C300.8,5.2,298.3,0,296.4,0c-2,0-3.6,5.3-3.6,11.8v5.2c0,6.5-5.3,11.8-11.8,11.8h-5.2
+		c-0.4,0-0.7,0-1.1,0V43c0.4,0,0.7,0,1.1,0h19.5C301.8,43.1,306.2,37.8,305.2,31.5"/>
+	<path class="st0" d="M258.3,14.6h-31.7c-0.3,0-0.5,0-0.8,0h-32.5c-0.4,0-0.8,0-1.1,0.1v-3c0-6.5-1.6-11.8-3.6-11.8
+		s-4.5,5.2-5.5,11.6l-3.3,19.9c-1.1,6.4,3.4,11.6,9.8,11.6h19.5c2,0,3.9-0.3,5.6-0.9c-0.6,3.3-3.5,5.9-7,5.9h-27.4
+		c-4.4,0-7.8-4-7.1-8.4L176,23c0.7-4.4-2.6-8.4-7.1-8.4H32.5c-2.9,0-5.4,1.7-6.5,4.2L0.3,58c-0.4,0.7-0.4,1.5,0.1,2.1l5,5.9
+		c0.6,0.7,1.7,0.8,2.5,0.2l17.5-13.8v83.6c0,4,3.2,7.2,7.2,7.2h38.7c4,0,7.2-3.2,7.2-7.2V107c0-4,3.2-7.2,7.2-7.2h96.7
+		c4,0,7.2,3.2,7.2,7.2v29.1c0,4,3.2,7.2,7.2,7.2h38.7c4,0,7.2-3.2,7.2-7.2v-31.3h-20.6c-6.5,0-11.8-5.3-11.8-11.8V72.9
+		c0-3.8,1.9-7.2,4.7-9.4v24c0,6.5,5.3,11.8,11.8,11.8h31.7c6.5,0,11.8-5.3,11.8-11.8V26.4C270.1,19.9,264.8,14.6,258.3,14.6"/>
+</g>
+</svg>

package/store/__tests__/catalog.test.ts

@@ -1,30 +1,54 @@
 import { CATALOG } from '@shell/config/types';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import {
   state, getters, actions, mutations, filterAndArrangeCharts
 } from '../catalog';
 import { createStore } from 'vuex';
 
 const clusterRepo = { _key: 'testClusterRepo' };
-const repoChartName = 'abc';
+const repoChartName = 'regular-chart';
 const repoChart = {
   name:     repoChartName,
   type:     'namespaced',
   version:  1,
   metadata: { name: repoChartName }
 };
-const repoCharts = [repoChart];
+const deprecatedByFieldChartName = 'deprecated-by-field-chart';
+const deprecatedByFieldChart = {
+  name:       deprecatedByFieldChartName,
+  type:       'namespaced',
+  version:    1,
+  deprecated: true,
+  metadata:   { name: deprecatedByFieldChartName }
+};
+const deprecatedByAnnotationChartName = 'deprecated-by-annotation-chart';
+const deprecatedByAnnotationChart = {
+  name:        deprecatedByAnnotationChartName,
+  type:        'namespaced',
+  version:     1,
+  annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' },
+  metadata:    { name: deprecatedByAnnotationChartName }
+};
 const repo = {
   metadata:   { name: 'testRepo' },
   _key:       'testRepo',
   links:      { index: 'fetchindex' },
   canLoad:    true,
-  followLink: () => ({ entries: { [repoChartName]: repoCharts } })
+  followLink: () => ({
+    entries: {
+      [repoChartName]:                   [repoChart],
+      [deprecatedByFieldChartName]:      [deprecatedByFieldChart],
+      [deprecatedByAnnotationChartName]: [deprecatedByAnnotationChart]
+    }
+  })
 };
 
 const catalogStoreName = 'catalog';
 const clusterStore = 'cluster';
 
 const expectedChartKey = `namespace/${ repo._key }/${ repoChartName }`;
+const expectedDeprecatedByFieldChartKey = `namespace/${ repo._key }/${ deprecatedByFieldChartName }`;
+const expectedDeprecatedByAnnotationChartKey = `namespace/${ repo._key }/${ deprecatedByAnnotationChartName }`;
 const initialVersionInfo = { junk: true };
 const initialRawChartName = 'cde';
 const initialRawChart = {
@@ -160,10 +184,20 @@ describe('catalog', () => {
       expect(rawCharts[expectedChartKey]).toBeDefined();
       expect(rawCharts[expectedChartKey].id).toBe(expectedChartKey);
       expect(rawCharts[expectedChartKey].versions[0].version).toBe(repoChart.version);
-      expect(charts[0]).toBeDefined();
-      expect(charts[0].id).toBe(initialRawChart.id);
-      expect(charts[1]).toBeDefined();
-      expect(charts[1].id).toBe(expectedChartKey);
+
+      expect(rawCharts[expectedDeprecatedByFieldChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByFieldChartKey].id).toBe(expectedDeprecatedByFieldChartKey);
+      expect(rawCharts[expectedDeprecatedByFieldChartKey].deprecated).toBe(true);
+
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey].id).toBe(expectedDeprecatedByAnnotationChartKey);
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey].deprecated).toBe(true);
+
+      expect(charts).toHaveLength(4);
+      expect(charts.find((c: any) => c.id === initialRawChart.id)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedChartKey)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedDeprecatedByFieldChartKey)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedDeprecatedByAnnotationChartKey)).toBeDefined();
 
       // Version info should be unchanged
       expect(store.state[catalogStoreName].versionInfos).toStrictEqual(initialVersionInfo);
@@ -197,14 +231,130 @@ describe('catalog', () => {
       expect(rawCharts[expectedChartKey].id).toBe(expectedChartKey);
       expect(rawCharts[expectedChartKey].versions[0].version).toBe(repoChart.version);
 
-      expect(charts).toHaveLength(1);
-      expect(charts[0]).toBeDefined();
-      expect(charts[0].id).toBe(expectedChartKey);
-      expect(charts[0].versions[0].version).toBe(repoChart.version);
+      expect(rawCharts[expectedDeprecatedByFieldChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByFieldChartKey].id).toBe(expectedDeprecatedByFieldChartKey);
+      expect(rawCharts[expectedDeprecatedByFieldChartKey].deprecated).toBe(true);
+
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey].id).toBe(expectedDeprecatedByAnnotationChartKey);
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey].deprecated).toBe(true);
+
+      expect(charts).toHaveLength(3);
+      expect(charts.find((c: any) => c.id === expectedChartKey)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedDeprecatedByFieldChartKey)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedDeprecatedByAnnotationChartKey)).toBeDefined();
 
       // Version info should be changed (it's now empty given reset)
       expect(store.state[catalogStoreName].versionInfos).toStrictEqual({ });
     });
+
+    it('repoKeys provided', async() => {
+      const store = createStore(constructStore());
+
+      // Validate initial state of store
+      expect(store.getters[`${ catalogStoreName }/rawCharts`]).toStrictEqual(initialRawCharts);
+      expect(store.getters[`${ catalogStoreName }/charts`]).toStrictEqual([]);
+
+      // Make the request targeting specific repo (we provide repo._key)
+      await store.dispatch(`${ catalogStoreName }/load`, {
+        force:    true,
+        repoKeys: [repo._key]
+      });
+
+      const rawCharts = store.getters[`${ catalogStoreName }/rawCharts`];
+      const charts = store.getters[`${ catalogStoreName }/charts`];
+
+      // We expect the old chart belonging to this repo to be wiped out
+      // and replaced entirely by the newly fetched chart.
+      expect(rawCharts[initialRawChart.id]).not.toBeDefined();
+      expect(rawCharts[expectedChartKey]).toBeDefined();
+      expect(rawCharts[expectedChartKey].id).toBe(expectedChartKey);
+      expect(rawCharts[expectedChartKey].versions[0].version).toBe(repoChart.version);
+
+      expect(rawCharts[expectedDeprecatedByFieldChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByFieldChartKey].id).toBe(expectedDeprecatedByFieldChartKey);
+      expect(rawCharts[expectedDeprecatedByFieldChartKey].deprecated).toBe(true);
+
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey].id).toBe(expectedDeprecatedByAnnotationChartKey);
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey].deprecated).toBe(true);
+
+      expect(charts).toHaveLength(3);
+      expect(charts.find((c: any) => c.id === expectedChartKey)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedDeprecatedByFieldChartKey)).toBeDefined();
+      expect(charts.find((c: any) => c.id === expectedDeprecatedByAnnotationChartKey)).toBeDefined();
+    });
+
+    it('repoKeys provided, ignoring unrelated charts and versions', async() => {
+      // We will manually inject an unrelated chart to prove it isn't wiped out
+      const store = createStore(constructStore());
+      const unrelatedChart = {
+        id:       `namespace/unrelatedRepo/unrelatedChart`,
+        repoKey:  'unrelatedRepo',
+        type:     'namespaced',
+        name:     'unrelatedChart',
+        version:  1,
+        metadata: { name: 'unrelatedChart' }
+      };
+
+      const targetedVersionKey = `namespace/testRepo/myChart/1.0.0`;
+      const unrelatedVersionKey = `namespace/unrelatedRepo/unrelatedChart/1.0.0`;
+
+      store.state[catalogStoreName].charts = {
+        ...initialRawCharts,
+        [unrelatedChart.id]: unrelatedChart
+      };
+
+      store.state[catalogStoreName].versionInfos = {
+        [targetedVersionKey]:  { data: 'old-data' },
+        [unrelatedVersionKey]: { data: 'keep-me' }
+      };
+
+      // Make the request targeting specific repo
+      await store.dispatch(`${ catalogStoreName }/load`, {
+        force:    true,
+        repoKeys: [repo._key]
+      });
+
+      const rawCharts = store.getters[`${ catalogStoreName }/rawCharts`];
+      const versionInfos = store.state[catalogStoreName].versionInfos;
+
+      // The unrelated chart should NOT be wiped
+      expect(rawCharts[unrelatedChart.id]).toBeDefined();
+      expect(rawCharts[unrelatedChart.id].repoKey).toBe('unrelatedRepo');
+
+      // The old initialRawChart (with repoKey: repo._key) SHOULD be wiped and replaced
+      expect(rawCharts[initialRawChart.id]).not.toBeDefined();
+      expect(rawCharts[expectedChartKey]).toBeDefined();
+
+      expect(rawCharts[expectedDeprecatedByFieldChartKey]).toBeDefined();
+      expect(rawCharts[expectedDeprecatedByAnnotationChartKey]).toBeDefined();
+
+      // The targeted version info SHOULD be wiped
+      expect(versionInfos[targetedVersionKey]).not.toBeDefined();
+      // The unrelated version info should NOT be wiped
+      expect(versionInfos[unrelatedVersionKey]).toBeDefined();
+      expect(versionInfos[unrelatedVersionKey].data).toBe('keep-me');
+    });
+  });
+
+  describe('refresh', () => {
+    it('calls refresh(false) on all repos and then dispatches a reset load', async() => {
+      const mockRepo1 = { refresh: jest.fn().mockResolvedValue(true) };
+      const mockRepo2 = { refresh: jest.fn().mockResolvedValue(true) };
+
+      const getters = { repos: [mockRepo1, mockRepo2] };
+      const dispatch = jest.fn().mockResolvedValue(true);
+      const commit = jest.fn();
+
+      await actions.refresh({
+        getters, commit, dispatch
+      });
+
+      expect(mockRepo1.refresh).toHaveBeenCalledWith(false);
+      expect(mockRepo2.refresh).toHaveBeenCalledWith(false);
+      expect(dispatch).toHaveBeenCalledWith('load', { force: true, reset: true });
+    });
   });
 
   describe('filterAndArrangeCharts', () => {