@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.5

package/components/__tests__/ButtonGroup.test.ts

@@ -118,4 +118,60 @@ describe('component: ButtonGroup', () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')![0][0]).toBe('val1');
   });
+
+  it.each([
+    ['small', 'btn-sm'],
+    ['medium', 'btn-md'],
+  ])('should apply the size class to each button when size is %s', (size, sizeClass) => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      props: {
+        options,
+        value: 'val1',
+        size
+      }
+    });
+
+    const buttons = wrapper.findAll('button');
+
+    expect(buttons).toHaveLength(2);
+    buttons.forEach((button) => {
+      expect(button.classes()).toContain(sizeClass);
+    });
+  });
+
+  it.each([
+    [undefined],
+    ['large'],
+  ])('should not apply a size class when size is %s', (size) => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      props: {
+        options,
+        value: 'val1',
+        ...(size ? { size } : {})
+      }
+    });
+
+    const button = wrapper.find('button');
+
+    expect(button.classes()).not.toContain('btn-sm');
+    expect(button.classes()).not.toContain('btn-md');
+  });
 });

package/components/__tests__/PromptRestore.test.ts

@@ -4,36 +4,46 @@ import PromptRestore from '@shell/components/PromptRestore.vue';
 import { createStore } from 'vuex';
 import { ExtendedVue, Vue } from 'vue/types/vue';
 import { DefaultProps } from 'vue/types/options';
-import { CAPI } from '@shell/config/types';
+import { CAPI, MANAGEMENT, OPERATION, SNAPSHOT } from '@shell/config/types';
 import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { createOperationCR } from '@shell/utils/operation-cr';
+
+jest.mock('@shell/utils/operation-cr', () => ({ createOperationCR: jest.fn() }));
 
 const RKE2_CLUSTER_NAME = 'rke2_cluster_name';
 const RKE2_SUCCESSFUL_SNAPSHOT_1 = {
-  clusterName:  RKE2_CLUSTER_NAME,
-  type:         CAPI.RANCHER_CLUSTER,
-  created:      'Thu Jul 20 2023 11:11:39',
-  snapshotFile: { status: STATES_ENUM.SUCCESSFUL },
-  id:           'rke2_id_1',
-  name:         'rke2_name_1'
+  clusterName:    RKE2_CLUSTER_NAME,
+  type:           CAPI.RANCHER_CLUSTER,
+  created:        'Thu Jul 20 2023 11:11:39',
+  restoreEnabled: true,
+  snapshotFile:   { status: STATES_ENUM.SUCCESSFUL },
+  id:             'rke2_id_1',
+  name:           'rke2_name_1'
 };
 const RKE2_SUCCESSFUL_SNAPSHOT_2 = {
-  clusterName:  RKE2_CLUSTER_NAME,
-  type:         CAPI.RANCHER_CLUSTER,
-  created:      'Thu Jul 20 2022 11:11:39',
-  snapshotFile: { status: STATES_ENUM.SUCCESSFUL },
-  id:           'rke2_id_2',
-  name:         'rke2_name_2'
+  clusterName:    RKE2_CLUSTER_NAME,
+  type:           CAPI.RANCHER_CLUSTER,
+  created:        'Thu Jul 20 2022 11:11:39',
+  restoreEnabled: true,
+  snapshotFile:   { status: STATES_ENUM.SUCCESSFUL },
+  id:             'rke2_id_2',
+  name:           'rke2_name_2'
 };
 const RKE2_FAILED_SNAPSHOT = {
-  clusterName:  RKE2_CLUSTER_NAME,
-  type:         CAPI.RANCHER_CLUSTER,
-  created:      'Thu Jul 20 2021 11:11:39',
-  snapshotFile: { status: STATES_ENUM.FAILED },
-  id:           'rke2_id_3',
-  name:         'rke2_name_3'
+  clusterName:    RKE2_CLUSTER_NAME,
+  type:           CAPI.RANCHER_CLUSTER,
+  created:        'Thu Jul 20 2021 11:11:39',
+  restoreEnabled: false,
+  snapshotFile:   { status: STATES_ENUM.FAILED },
+  id:             'rke2_id_3',
+  name:           'rke2_name_3'
 };
 
 describe('component: PromptRestore', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   const rke2TestCases = [
     [[], 0],
     [[RKE2_FAILED_SNAPSHOT], 0],
@@ -72,4 +82,144 @@ describe('component: PromptRestore', () => {
 
     expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
   });
+
+  it('should restore imported cluster via operation CR', async() => {
+    (createOperationCR as jest.Mock).mockResolvedValue(undefined);
+    const clusterSave = jest.fn();
+    const buttonDone = jest.fn();
+
+    const importedCluster = {
+      isImported:              true,
+      isImportedWithDayTwoOps: true,
+      type:                    CAPI.RANCHER_CLUSTER,
+      metadata:                { name: 'imported-cluster' },
+      mgmt:                    { id: 'c-m-imported' },
+      save:                    clusterSave,
+    };
+
+    const getters: any = {};
+
+    getters['i18n/t'] = () => (key: string) => key;
+
+    const store = createStore({
+      modules: {
+        'action-menu': {
+          namespaced: true,
+          state:      {
+            showPromptRestore: true,
+            toRestore:         [importedCluster]
+          },
+          mutations: { togglePromptRestore: jest.fn() }
+        },
+      },
+      getters,
+      actions: {
+        'management/findAll': jest.fn().mockResolvedValue([]),
+        'growl/success':      jest.fn(),
+      }
+    });
+
+    const wrapper = shallowMount(
+      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+      { global: { mocks: { $store: store } } }
+    );
+
+    wrapper.vm.allSnapshots = {
+      'snapshot-1': {
+        name:         'snapshot-1',
+        snapshotFile: { name: 'snapshot-file-1' }
+      }
+    };
+    wrapper.vm.selectedSnapshot = 'snapshot-1';
+
+    await wrapper.vm.apply(buttonDone);
+
+    expect(createOperationCR).toHaveBeenCalledTimes(1);
+    expect((createOperationCR as jest.Mock).mock.calls[0][1]).toBe(OPERATION.ETCD_SNAPSHOT_RESTORE);
+    expect((createOperationCR as jest.Mock).mock.calls[0][2]).toStrictEqual({
+      clusterRef: {
+        apiVersion: 'management.cattle.io/v3',
+        kind:       'Cluster',
+        name:       'c-m-imported',
+      },
+      args: { name: 'snapshot-file-1' },
+    });
+    expect((createOperationCR as jest.Mock).mock.calls[0][3]).toBe('c-m-imported');
+    expect((createOperationCR as jest.Mock).mock.calls[0][4]).toBe('c-m-imported');
+    expect(clusterSave).not.toHaveBeenCalled();
+    expect(buttonDone).toHaveBeenCalledWith(true);
+  });
+
+  it('should restore imported snapshot by resolving target cluster from store', async() => {
+    (createOperationCR as jest.Mock).mockResolvedValue(undefined);
+    const buttonDone = jest.fn();
+    const byId = jest.fn();
+
+    const importedCluster = {
+      id:                      'fleet-default/imported-cluster',
+      isImportedWithDayTwoOps: true,
+      mgmt:                    { id: 'c-m-imported' },
+      isImported:              true,
+    };
+
+    byId.mockImplementation((type: string, id: string) => {
+      if (type === CAPI.RANCHER_CLUSTER && id === 'fleet-default/imported-cluster') {
+        return importedCluster;
+      }
+
+      if (type === MANAGEMENT.CLUSTER && id === 'c-m-imported') {
+        return importedCluster.mgmt;
+      }
+
+      return null;
+    });
+
+    const getters: any = {};
+
+    getters['i18n/t'] = () => (key: string) => key;
+    getters['management/byId'] = () => byId;
+
+    const store = createStore({
+      modules: {
+        'action-menu': {
+          namespaced: true,
+          state:      {
+            showPromptRestore: true,
+            toRestore:         [{
+              type:         SNAPSHOT,
+              metadata:     { namespace: 'fleet-default' },
+              spec:         { clusterName: 'imported-cluster', clusterRef: { name: 'c-m-imported' } },
+              snapshotFile: { name: 'snapshot-file-2' },
+              nameDisplay:  'snapshot-2',
+            }]
+          },
+          mutations: { togglePromptRestore: jest.fn() }
+        },
+      },
+      getters,
+      actions: { 'growl/success': jest.fn() }
+    });
+
+    const wrapper = shallowMount(
+      PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>,
+      { global: { mocks: { $store: store } } }
+    );
+
+    await wrapper.vm.apply(buttonDone);
+
+    expect(createOperationCR).toHaveBeenCalledTimes(1);
+    expect((createOperationCR as jest.Mock).mock.calls[0][1]).toBe(OPERATION.ETCD_SNAPSHOT_RESTORE);
+    expect((createOperationCR as jest.Mock).mock.calls[0][2]).toStrictEqual({
+      clusterRef: {
+        apiVersion: 'management.cattle.io/v3',
+        kind:       'Cluster',
+        name:       'c-m-imported',
+      },
+      args: { name: 'snapshot-file-2' },
+    });
+    expect((createOperationCR as jest.Mock).mock.calls[0][3]).toBe('c-m-imported');
+    expect((createOperationCR as jest.Mock).mock.calls[0][4]).toBe('c-m-imported');
+    expect(buttonDone).toHaveBeenCalledWith(true);
+    expect(byId).toHaveBeenCalledWith(CAPI.RANCHER_CLUSTER, 'fleet-default/imported-cluster');
+  });
 });

package/components/fleet/AppCoChartGrid.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { ZERO_TIME, CATALOG_SORT_OPTIONS } from '@shell/config/types';
+import { RcItemCard } from '@components/RcItemCard';
+import AppChartCardSubHeader from '@shell/pages/c/_cluster/apps/charts/AppChartCardSubHeader';
+import AppCoEmptyState from '@shell/components/fleet/AppCoEmptyState.vue';
+import Loading from '@shell/components/Loading';
+import Select from '@shell/components/form/Select';
+import { RcIcon } from '@components/RcIcon';
+
+interface ChartVersion {
+  version: string;
+  description?: string;
+  icon?: string;
+  appVersion?: string;
+  created?: string;
+}
+
+interface ChartEntry {
+  name: string;
+  description: string;
+  icon: string;
+  version: string;
+  created: string;
+  versions: ChartVersion[];
+}
+
+interface SubHeaderItem {
+  icon: string;
+  iconTooltip: { key: string };
+  label: string;
+}
+
+const props = withDefaults(defineProps<{
+  charts: Record<string, ChartVersion[]>;
+  loading?: boolean;
+  searchPlaceholder?: string;
+}>(), {
+  charts:            () => ({}),
+  loading:           false,
+  searchPlaceholder: '',
+});
+
+const emit = defineEmits<{
+  'select-chart': [value: unknown];
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const searchQuery = ref('');
+const searchInput = ref<HTMLInputElement | null>(null);
+const selectedSortOption = ref(CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC);
+
+const sortOptions = [
+  { kind: 'group', label: t('catalog.charts.sort.prefix') },
+  { value: CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC, label: t('catalog.charts.sort.lastUpdatedDesc') },
+  { value: CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC, label: t('catalog.charts.sort.alphaAscending') },
+  { value: CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC, label: t('catalog.charts.sort.alphaDescending') },
+];
+
+const placeholderText = computed(() => props.searchPlaceholder || t('catalog.charts.search'));
+
+const allCharts = computed<ChartEntry[]>(() => {
+  const entries = props.charts as Record<string, any[]>;
+
+  if (!entries || !Object.keys(entries).length) {
+    return [];
+  }
+
+  return Object.keys(entries).sort().map((name) => {
+    const versions = entries[name] || [];
+    const latest = versions[0] || {};
+
+    return {
+      name,
+      description: latest.description || '',
+      icon:        latest.icon || '',
+      version:     latest.version || '',
+      created:     latest.created || '',
+      versions,
+    };
+  });
+});
+
+const filteredCharts = computed(() => {
+  if (!searchQuery.value) {
+    return allCharts.value;
+  }
+
+  const raw = searchQuery.value;
+  const exactMatch = /^"(.+)"$/.exec(raw);
+  const q = exactMatch ? exactMatch[1].toLowerCase() : raw.toLowerCase();
+
+  return allCharts.value.filter((chart) => {
+    const name = chart.name.toLowerCase();
+    const desc = chart.description.toLowerCase();
+
+    if (exactMatch) {
+      return name === q || desc === q;
+    }
+
+    return name.includes(q) || desc.includes(q);
+  });
+});
+
+const sortedCharts = computed(() => {
+  const charts = [...filteredCharts.value];
+
+  switch (selectedSortOption.value) {
+  case CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC:
+    return charts.sort((a, b) => a.name.localeCompare(b.name));
+  case CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC:
+    return charts.sort((a, b) => b.name.localeCompare(a.name));
+  case CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC:
+    return charts.sort((a, b) => {
+      const dateA = a.created ? new Date(a.created).getTime() : 0;
+      const dateB = b.created ? new Date(b.created).getTime() : 0;
+
+      return dateB - dateA;
+    });
+  default:
+    return charts;
+  }
+});
+
+const formatDate = (dateString: string): string => {
+  if (!dateString || dateString === ZERO_TIME) {
+    return '';
+  }
+
+  try {
+    const d = new Date(dateString);
+
+    return d.toLocaleDateString(undefined, {
+      year:  'numeric',
+      month: 'short',
+      day:   'numeric'
+    });
+  } catch (e) {
+    return dateString;
+  }
+};
+
+const chartCards = computed(() => {
+  return sortedCharts.value.map((chart) => {
+    const dateStr = chart.created ? formatDate(chart.created) : '';
+    const subHeaderItems: SubHeaderItem[] = [];
+
+    if (chart.version) {
+      subHeaderItems.push({
+        icon:        'icon-version-alt',
+        iconTooltip: { key: 'tableHeaders.version' },
+        label:       chart.version,
+      });
+    }
+
+    if (dateStr) {
+      subHeaderItems.push({
+        icon:        'icon-refresh-alt',
+        iconTooltip: { key: 'tableHeaders.lastUpdated' },
+        label:       dateStr,
+      });
+    }
+
+    return {
+      id:       chart.name,
+      header:   { title: { text: chart.name } },
+      image:    chart.icon ? { src: chart.icon, alt: { text: chart.name } } : undefined,
+      content:  { text: chart.description },
+      subHeaderItems,
+      rawChart: chart,
+    };
+  });
+});
+
+const totalMessage = computed(() => {
+  const count = sortedCharts.value.length;
+
+  if (searchQuery.value) {
+    return t('catalog.charts.totalMatchedChartsMessage', { count });
+  }
+
+  return t('catalog.charts.totalChartsMessage', { count });
+});
+
+const hasCharts = computed(() => allCharts.value.length > 0);
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchInput.value?.focus();
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  const input = searchInput.value;
+
+  if (!input || e.target === input) {
+    return;
+  }
+
+  if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    input.focus();
+    input.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+};
+</script>
+
+<template>
+  <div
+    class="chart-card-grid"
+    tabindex="-1"
+    @keydown="onKeydown"
+  >
+    <Loading
+      v-if="props.loading"
+      mode="relative"
+    />
+
+    <slot
+      v-else-if="!hasCharts"
+      name="empty-state"
+    />
+
+    <template v-else>
+      <div class="search-input">
+        <input
+          ref="searchInput"
+          v-model="searchQuery"
+          type="search"
+          class="input"
+          :placeholder="placeholderText"
+          :aria-label="placeholderText"
+          data-testid="chart-card-grid-search"
+        >
+        <RcIcon
+          v-if="!searchQuery"
+          type="search"
+          size="medium"
+          class="icon-search"
+          aria-hidden="true"
+        />
+      </div>
+
+      <div class="chart-grid-content">
+        <div class="total-and-sort">
+          <p
+            class="total-message"
+            data-testid="chart-card-grid-total"
+          >
+            {{ totalMessage }}
+          </p>
+          <Select
+            v-model:value="selectedSortOption"
+            :clearable="false"
+            :searchable="false"
+            :options="sortOptions"
+            placement="bottom"
+            class="charts-sort-select"
+          >
+            <template #selected-option="{ label }">
+              <span class="mmr-1">{{ t('catalog.charts.sort.prefix') }}:</span>{{ label }}
+            </template>
+
+            <template #option="{ label, kind }">
+              <span
+                v-if="kind === 'group'"
+                class="mml-2 mmr-2"
+              >
+                {{ label }}:
+              </span>
+              <span
+                v-else
+                class="mml-6"
+              >
+                {{ label }}
+              </span>
+            </template>
+          </Select>
+        </div>
+
+        <div
+          v-if="chartCards.length"
+          class="chart-cards"
+          data-testid="chart-card-grid-cards"
+        >
+          <rc-item-card
+            v-for="card in chartCards"
+            :id="card.id"
+            :key="card.id"
+            :header="card.header"
+            :image="card.image"
+            :content="card.content"
+            :value="card.rawChart"
+            variant="medium"
+            :clickable="true"
+            :class="{ 'single-card': chartCards.length === 1 }"
+            data-testid="chart-card-grid-card"
+            @card-click="emit('select-chart', $event)"
+          >
+            <template #item-card-sub-header>
+              <AppChartCardSubHeader :items="card.subHeaderItems" />
+            </template>
+            <template
+              v-if="$slots['card-footer']"
+              #item-card-footer
+            >
+              <slot
+                name="card-footer"
+                :card="card"
+              />
+            </template>
+          </rc-item-card>
+        </div>
+
+        <AppCoEmptyState
+          v-else
+          :title="t('fleet.helmOp.add.steps.selection.emptyState.noMatch.title')"
+          data-testid="chart-card-grid-no-match"
+        >
+          {{ t('fleet.helmOp.add.steps.selection.emptyState.noMatch.descriptionPre') }}
+          <a
+            href="#"
+            @click.prevent="clearSearch"
+          >{{ t('fleet.helmOp.add.steps.selection.emptyState.noMatch.clearSearch') }}</a>
+          {{ t('fleet.helmOp.add.steps.selection.emptyState.noMatch.descriptionPost') }}
+        </AppCoEmptyState>
+
+        <slot name="after-cards" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-card-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+  outline: none;
+}
+
+.search-input {
+  position: relative;
+
+  input {
+    width: 100%;
+    height: 48px;
+    padding-left: 16px;
+    padding-right: 40px;
+  }
+
+  .icon-search {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
+}
+
+.chart-grid-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+.total-and-sort {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .total-message {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--body-text);
+  }
+
+  .charts-sort-select {
+    width: 300px;
+
+    :deep(.v-select.inline.vs--single.vs--open .vs__selected) {
+      opacity: 1;
+      color: var(--dropdown-disabled-text);
+    }
+  }
+}
+
+.chart-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: var(--gap-md);
+  width: 100%;
+  height: max-content;
+  overflow: hidden;
+
+  .single-card {
+    max-width: 500px;
+  }
+}
+
+</style>