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

package/components/fleet/HelmOpValuesTab.vue

@@ -1,4 +1,5 @@
-<script setup>
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import Banner from '@components/Banner/Banner.vue';
@@ -6,62 +7,54 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import YamlEditor from '@shell/components/YamlEditor';
 import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
 
-defineProps({
-  value: {
-    type:     Object,
-    required: true
-  },
-  mode: {
-    type:     String,
-    required: true
-  },
-  realMode: {
-    type:     String,
-    required: true
-  },
-  isView: {
-    type:    Boolean,
-    default: false
-  },
-  chartValues: {
-    type:     String,
-    required: true
-  },
-  chartValuesInit: {
-    type:     String,
-    required: true
-  },
-  yamlForm: {
-    type:     String,
-    required: true
-  },
-  yamlFormOptions: {
-    type:     Array,
-    required: true
-  },
-  yamlDiffModeOptions: {
-    type:     Array,
-    required: true
-  },
-  isYamlDiff: {
-    type:     Boolean,
-    required: true
-  },
-  editorMode: {
-    type:     String,
-    required: true
-  },
-  diffMode: {
-    type:     String,
-    required: true
-  },
-  isRealModeEdit: {
-    type:     Boolean,
-    required: true
-  }
+import type { ButtonGroupOption } from '@shell/types/components/buttonGroup';
+
+interface HelmOpResource {
+  spec: { helm: { valuesFrom?: unknown } };
+  metadata: { namespace: string };
+}
+
+const yaml = ref<{ refresh?:() => void } | null>(null);
+
+const refreshYaml = () => {
+  nextTick(() => {
+    yaml.value?.refresh?.();
+  });
+};
+
+defineExpose({ refreshYaml });
+
+const props = withDefaults(defineProps<{
+  value: HelmOpResource;
+  mode: string;
+  realMode: string;
+  chartValues: string;
+  chartValuesInit: string;
+  yamlForm: string;
+  yamlFormOptions: ButtonGroupOption[];
+  yamlDiffModeOptions: ButtonGroupOption[];
+  isYamlDiff: boolean;
+  editorMode: string;
+  diffMode: string;
+  isRealModeEdit: boolean;
+  hideTitle?: boolean;
+  isSuseAppCollection?: boolean;
+  bgBorder?: boolean;
+  hideBanner?: boolean;
+  compact?: boolean;
+}>(), {
+  hideTitle:           false,
+  isSuseAppCollection: false,
+  bgBorder:            false,
+  hideBanner:          false,
 });
 
-const emit = defineEmits(['update:yaml-form', 'update:chart-values', 'update:diff-mode']);
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:yaml-form'): void;
+  (e: 'update:chart-values', value: string): void;
+  (e: 'update:diff-mode', value: string): void;
+}>();
 
 const store = useStore();
 const { t } = useI18n(store);
@@ -70,71 +63,88 @@ const updateYamlForm = () => {
   emit('update:yaml-form');
 };
 
-const updateChartValues = (value) => {
+const updateChartValues = (value: string) => {
   emit('update:chart-values', value);
 };
 
-const updateDiffMode = (value) => {
+const updateDiffMode = (value: string) => {
   emit('update:diff-mode', value);
 };
+
+const updateValuesFrom = (valuesFrom: unknown) => {
+  props.value.spec.helm.valuesFrom = valuesFrom;
+};
 </script>
 
 <template>
-  <div>
-    <Banner
-      color="info"
-      class="description"
-      label-key="fleet.helmOp.values.description"
-    />
-
-    <h2>{{ t('fleet.helmOp.values.title') }}</h2>
-
-    <div class="mb-15">
-      <div
-        v-if="isRealModeEdit"
-        class="yaml-form-controls"
-      >
-        <ButtonGroup
-          :value="yamlForm"
-          inactive-class="bg-disabled btn-sm"
-          active-class="bg-primary btn-sm"
-          :options="yamlFormOptions"
-          @update:value="updateYamlForm"
-        />
+  <div class="helmop-values-tab-container">
+    <div v-if="compact">
+      {{ t('fleet.helmOp.values.descriptionCompact') }}
+    </div>
+    <div data-testid="helmop-values-tab">
+      <Banner
+        v-if="!hideBanner"
+        color="info"
+        class="description mt-0"
+        :label-key="isSuseAppCollection ? 'fleet.helmOp.values.appCoDescription' : 'fleet.helmOp.values.description'"
+        data-testid="helmop-values-info-banner"
+      />
+
+      <h2 v-if="!hideTitle">
+        {{ t('fleet.helmOp.values.title') }}
+      </h2>
+
+      <div class="mb-15">
         <div
-          class="yaml-form-controls-spacer"
-          style="flex:1"
+          v-if="isRealModeEdit"
+          class="yaml-form-controls"
         >
+          <ButtonGroup
+            :value="yamlForm"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+            :options="yamlFormOptions"
+            @update:value="updateYamlForm"
+          />
+          <div
+            class="yaml-form-controls-spacer"
+          >
           &nbsp;
+          </div>
+          <ButtonGroup
+            v-if="isYamlDiff"
+            :value="diffMode"
+            :options="yamlDiffModeOptions"
+            inactive-class="bg-disabled btn-sm"
+            active-class="bg-primary btn-sm"
+            @update:value="updateDiffMode"
+          />
         </div>
-        <ButtonGroup
-          v-if="isYamlDiff"
-          :value="diffMode"
-          :options="yamlDiffModeOptions"
-          inactive-class="bg-disabled btn-sm"
-          active-class="bg-primary btn-sm"
-          @update:value="updateDiffMode"
+
+        <YamlEditor
+          ref="yaml"
+          :class="{ 'bg-border': bgBorder }"
+          :value="chartValues"
+          :mode="mode"
+          :initial-yaml-values="chartValuesInit"
+          :scrolling="true"
+          :editor-mode="editorMode"
+          :hide-preview-buttons="true"
+          data-testid="helmop-values-yaml-editor"
+          @update:value="updateChartValues"
         />
       </div>
 
-      <YamlEditor
-        ref="yaml"
-        :value="chartValues"
-        :mode="mode"
-        :initial-yaml-values="chartValuesInit"
-        :scrolling="true"
-        :editor-mode="editorMode"
-        :hide-preview-buttons="true"
-        @update:value="updateChartValues"
-      />
-    </div>
-
-    <div class="mb-20">
-      <FleetValuesFrom
-        :value="value.spec.helm.valuesFrom"
-        :namespace="value.metadata.namespace"
-        :mode="realMode"
-      />
+      <div class="mb-20">
+        <FleetValuesFrom
+          :value="value.spec.helm.valuesFrom"
+          :namespace="value.metadata.namespace"
+          :mode="realMode"
+          :compact="compact"
+          data-testid="helmop-values-from"
+          @update:value="updateValuesFrom"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -144,4 +154,18 @@ const updateDiffMode = (value) => {
   display: flex;
   margin-bottom: 15px;
 }
+
+.yaml-form-controls-spacer {
+  flex: 1;
+}
+
+.bg-border {
+  border: 2px solid var(--body-bg);
+}
+
+.helmop-values-tab-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+}
 </style>

package/components/fleet/__tests__/AppCoEmptyState.test.ts

@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils';
+import AppCoEmptyState from '@shell/components/fleet/AppCoEmptyState.vue';
+
+describe('component: AppCoEmptyState', () => {
+  it('should match snapshot with no badge state', () => {
+    const wrapper = shallowMount(AppCoEmptyState, {
+      props: { title: 'No charts found' },
+      slots: { default: 'Try a different search' },
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should match snapshot with transitioning badge state', () => {
+    const wrapper = shallowMount(AppCoEmptyState, {
+      props: {
+        title:      'Loading charts',
+        badgeState: {
+          transitioning:   true,
+          error:           false,
+          stateBackground: 'bg-info',
+          stateDisplay:    'In Progress',
+        },
+      },
+      slots: { default: 'Please wait...' },
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should match snapshot with error badge state', () => {
+    const wrapper = shallowMount(AppCoEmptyState, {
+      props: {
+        title:      'Error',
+        badgeState: {
+          transitioning:   false,
+          error:           true,
+          stateBackground: 'bg-error',
+          stateDisplay:    'Failed',
+        },
+      },
+      slots: { default: 'Something went wrong' },
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should render h1 when no badge state', () => {
+    const wrapper = shallowMount(AppCoEmptyState, { props: { title: 'Empty' } });
+
+    expect(wrapper.find('h1').exists()).toBe(true);
+    expect(wrapper.find('h2').exists()).toBe(false);
+  });
+
+  it('should render h2 when badge state is transitioning', () => {
+    const wrapper = shallowMount(AppCoEmptyState, {
+      props: {
+        title:      'Loading',
+        badgeState: {
+          transitioning:   true,
+          error:           false,
+          stateBackground: 'bg-info',
+          stateDisplay:    'Loading',
+        },
+      },
+    });
+
+    expect(wrapper.find('h2').exists()).toBe(true);
+    expect(wrapper.find('h1').exists()).toBe(false);
+  });
+});

package/components/fleet/__tests__/AppCoVersionSelect.test.ts

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import AppCoVersionSelect from '@shell/components/fleet/AppCoVersionSelect.vue';
+import { _EDIT } from '@shell/config/query-params';
+
+describe('component: AppCoVersionSelect', () => {
+  const options = [
+    {
+      label: '1.2.0', value: '1.2.0', date: 'Jan 1, 2025'
+    },
+    {
+      label: '1.1.0', value: '1.1.0', date: 'Dec 1, 2024'
+    },
+  ];
+
+  it('should match snapshot', () => {
+    const wrapper = shallowMount(AppCoVersionSelect, {
+      props: {
+        value: '1.2.0', options, mode: _EDIT
+      }
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should emit update:value when selection changes', () => {
+    const wrapper = shallowMount(AppCoVersionSelect, {
+      props: {
+        value: '1.2.0', options, mode: _EDIT
+      }
+    });
+
+    wrapper.findComponent({ name: 'LabeledSelect' }).vm.$emit('update:value', '1.1.0');
+
+    expect(wrapper.emitted('update:value')?.[0]).toStrictEqual(['1.1.0']);
+  });
+});

package/components/fleet/__tests__/ClusterSelectionFields.test.ts

@@ -0,0 +1,62 @@
+import { shallowMount } from '@vue/test-utils';
+import ClusterSelectionFields from '@shell/components/fleet/FleetClusterTargets/ClusterSelectionFields.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+describe('component: ClusterSelectionFields', () => {
+  const defaultProps = {
+    selectedClusters:      ['cluster-1'],
+    selectedClusterGroups: [],
+    clusterSelectors:      [],
+    clustersOptions:       [{ label: 'cluster-1', value: 'cluster-1' }],
+    clusterGroupsOptions:  [],
+    mode:                  _EDIT,
+  };
+
+  it('should match snapshot with default variant', () => {
+    const wrapper = shallowMount(ClusterSelectionFields, { props: defaultProps });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should match snapshot with appco variant', () => {
+    const wrapper = shallowMount(ClusterSelectionFields, { props: { ...defaultProps, variant: 'appco' } });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should emit select-clusters on cluster selection', () => {
+    const wrapper = shallowMount(ClusterSelectionFields, { props: defaultProps });
+
+    wrapper.findComponent('[data-testid="fleet-target-cluster-name-selector"]').vm.$emit('update:value', ['cluster-2']);
+
+    expect(wrapper.emitted('select-clusters')?.[0]).toStrictEqual([['cluster-2']]);
+  });
+
+  it('should emit select-cluster-groups on group selection', () => {
+    const wrapper = shallowMount(ClusterSelectionFields, { props: defaultProps });
+
+    wrapper.findComponent('[data-testid="fleet-target-cluster-group-selector"]').vm.$emit('update:value', ['group-1']);
+
+    expect(wrapper.emitted('select-cluster-groups')?.[0]).toStrictEqual([['group-1']]);
+  });
+
+  it('should emit add-match-expressions when add button is clicked', async() => {
+    const wrapper = shallowMount(ClusterSelectionFields, { props: defaultProps });
+
+    await wrapper.findComponent({ name: 'RcButton' }).vm.$emit('click');
+
+    expect(wrapper.emitted('add-match-expressions')).toBeTruthy();
+  });
+
+  it('should hide add button in view mode', () => {
+    const wrapper = shallowMount(ClusterSelectionFields, {
+      props: {
+        ...defaultProps, mode: _VIEW, isView: true
+      }
+    });
+
+    const addButtons = wrapper.findAllComponents({ name: 'RcButton' });
+
+    expect(addButtons).toHaveLength(0);
+  });
+});