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

package/components/Window/__tests__/ContainerShell.test.ts

@@ -12,47 +12,72 @@ jest.mock('@shell/utils/crypto', () => {
   return {
     __esModule:   true,
     ...originalModule,
-    base64Decode: jest.fn().mockImplementation((str:String) => str)
+    base64Decode: jest.fn().mockImplementation((str:string) => str)
   };
 });
 
+const mockOnData = jest.fn();
+const mockLoadAddon = jest.fn();
+const mockOpen = jest.fn();
+const mockFocus = jest.fn();
+const mockWrite = jest.fn();
+const mockWriteln = jest.fn();
+const mockReset = jest.fn();
+const mockOnResize = jest.fn();
+const mockPaste = jest.fn();
+const mockDispose = jest.fn();
+const mockClear = jest.fn();
+
+jest.mock(/* webpackChunkName: "xterm" */ '@xterm/xterm', () => {
+  return {
+    Terminal: class {
+      onData = mockOnData;
+      loadAddon = mockLoadAddon;
+      open = mockOpen;
+      focus = mockFocus;
+      write = mockWrite;
+      writeln = mockWriteln;
+      reset = mockReset;
+      onResize = mockOnResize;
+      paste = mockPaste;
+      dispose = mockDispose;
+      clear = mockClear;
+    }
+  };
+});
+
+const mockFit = jest.fn();
+const mockProposeDimensions = jest.fn().mockImplementation(() => ({ rows: 1, cols: 1 }));
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-fit', () => {
+  return {
+    FitAddon: class {
+      fit = mockFit;
+      proposeDimensions = mockProposeDimensions;
+    }
+  };
+});
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-web-links', () => {
+  return { WebLinksAddon: class {} };
+}, { virtual: true });
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-search', () => {
+  return {
+    SearchAddon: class {
+ findNext = jest.fn(); findPrevious = jest.fn();
+    }
+  };
+}, { virtual: true });
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-webgl', () => {
+  return { WebglAddon: class {} };
+}, { virtual: true });
+
 describe('component: ContainerShell', () => {
   const action = jest.fn();
   const translate = jest.fn();
   const schemaFor = jest.fn();
-  const onData = jest.fn();
-  const loadAddon = jest.fn();
-  const open = jest.fn();
-  const focus = jest.fn();
-  const fit = jest.fn();
-  const proposeDimensions = jest.fn().mockImplementation(() => {
-    return { rows: 1 };
-  });
-  const write = jest.fn();
-  const writeln = jest.fn();
-  const reset = jest.fn();
-
-  jest.mock(/* webpackChunkName: "xterm" */ 'xterm', () => {
-    return {
-      Terminal: class {
-        onData = onData;
-        loadAddon = loadAddon;
-        open = open;
-        focus = focus;
-        write = write;
-        writeln = writeln;
-        reset = reset
-      }
-    };
-  });
-  jest.mock(/* webpackChunkName: "xterm" */ 'xterm-addon-fit', () => {
-    return {
-      FitAddon: class {
-        fit = fit
-        proposeDimensions = proposeDimensions
-      }
-    };
-  });
 
   const defaultContainerShellParams = {
     propsData: {
@@ -77,7 +102,8 @@ describe('component: ContainerShell', () => {
           dispatch: action,
           getters:  {
             'i18n/t':            translate,
-            'cluster/schemaFor': schemaFor
+            'cluster/schemaFor': schemaFor,
+            'prefs/theme':       jest.fn().mockReturnValue('dark')
           }
         }
       },
@@ -87,6 +113,7 @@ describe('component: ContainerShell', () => {
   const resetMocks = () => {
     // Clear all instances and calls to constructor and all methods:
     jest.clearAllMocks();
+    jest.restoreAllMocks();
     defaultContainerShellParams.propsData.pod.os = 'linux';
   };
 
@@ -99,7 +126,14 @@ describe('component: ContainerShell', () => {
     return wrapper;
   };
 
-  it.todo('test that we are calling the xterm terminal and fitAddon class method mocks correctly');
+  it('test that we are calling the xterm terminal and fitAddon class method mocks correctly', async() => {
+    resetMocks();
+    await wrapperPostMounted(defaultContainerShellParams);
+
+    expect(mockLoadAddon).toHaveBeenCalledWith(expect.any(Object));
+    expect(mockOpen).toHaveBeenCalledWith(expect.any(HTMLElement));
+    expect(mockFit).toHaveBeenCalledWith();
+  });
 
   it('creates a window on the page', async() => {
     resetMocks();
@@ -110,6 +144,26 @@ describe('component: ContainerShell', () => {
     expect(windowComponent.isVisible()).toBe(true);
   });
 
+  it('does not load webgl addon on Safari browser', async() => {
+    resetMocks();
+
+    const originalUserAgent = window.navigator.userAgent;
+
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15',
+      configurable: true
+    });
+
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    expect(wrapper.vm.webglAddon).toBeNull();
+
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:        originalUserAgent,
+      configurable: true
+    });
+  });
+
   it('the find action for the node is called if schemaFor finds a schema for NODE', async() => {
     resetMocks();
     const testSchemaFindsSchemaParams = {
@@ -242,7 +296,23 @@ describe('component: ContainerShell', () => {
     expect(wrapper.vm.os).toBe('linux');
   });
 
-  it.todo('test that fit and flush are operating properly');
+  it('test that fit and flush are operating properly', async() => {
+    resetMocks();
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    mockFit.mockClear();
+
+    if (typeof wrapper.vm.fit === 'function') {
+      wrapper.vm.fit();
+    }
+
+    expect(mockFit).toHaveBeenCalledWith();
+
+    if (typeof wrapper.vm.flush === 'function') {
+      wrapper.vm.flush();
+    }
+  });
+
   it.todo('test that we are properly feeding the terminal the commandOnFirstConnect prop correctly on connected');
 
   it('the socket message event sets data props correctly', async() => {

package/components/Wizard.vue

@@ -109,6 +109,11 @@ export default {
       default: null
     },
 
+    showStepHeader: {
+      type:    Boolean,
+      default: true
+    },
+
     // The set of labels to display for the finish AsyncButton
     finishMode: {
       type:    String,
@@ -289,7 +294,7 @@ export default {
     >
       <div>
         <div class="header">
-          <div class="title">
+          <div :class="['title', !showStepHeader ? 'mmb-4' : '']">
             <div
               v-if="showBanner"
               class="top choice-banner"
@@ -328,7 +333,7 @@ export default {
               </slot>
               <!-- Step number with subtext -->
               <div
-                v-if="activeStep && showSteps"
+                v-if="activeStep && showSteps && showStepHeader"
                 class="subtitle"
               >
                 <h2>{{ !!headerMode ? t(`wizard.${headerMode}`) : t(`asyncButton.${finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
@@ -596,10 +601,10 @@ $spacer: 10px;
         flex-basis: 100%;
         border-top: 1px solid var(--border);
         position: relative;
-        top: 17px;
+        top: 23px;
 
         .cru__content & {
-          top: 13px;
+          top: 17px;
         }
       }
     }

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>