RcFilterPanel Component

cypress/e2e/po/components/rc-item-card.po.ts

@@ -0,0 +1,23 @@
+import ComponentPo from '@/cypress/e2e/po/components/component.po';
+
+export default class RcItemCardPo extends ComponentPo {
+  constructor(selector = '.dashboard-root') {
+    super(selector);
+  }
+
+  getCardById(id: string) {
+    return this.self().get(`[data-testid="item-card-${ id }"]`);
+  }
+
+  getCardByTitle(title: string) {
+    return this.self().find('[data-testid="item-card-header-title"]').contains(title);
+  }
+
+  getImageByTitle(title: string) {
+    return this.getCardByTitle(title).get('[data-testid="item-card-image"] img');
+  }
+
+  clickByTitle(name: string) {
+    return this.getCardByTitle(name).click();
+  }
+}

cypress/e2e/po/pages/explorer/charts/chart.po.ts

@@ -24,7 +24,7 @@ export class ChartPage extends PagePo {
     const chartsPage = new ChartsPage(clusterId);
 
     ChartsPage.navTo();
-    chartsPage.charts().select(chartName);
+    chartsPage.clickChart(chartName);
   }
 
   chartHeader(options?: any) {

cypress/e2e/po/pages/explorer/charts/charts.po.ts

@@ -3,7 +3,7 @@ import SelectPo from '@/cypress/e2e/po/components/select.po';
 import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
 import ProductNavPo from '@/cypress/e2e/po/side-bars/product-side-nav.po';
 import BannersPo from '@/cypress/e2e/po/components/banners.po';
-import SelectIconGridPo from '@/cypress/e2e/po/components/select-icon-grid.po';
+import RcItemCardPo from '@/cypress/e2e/po/components/rc-item-card.po';
 import CheckboxInputPo from '@/cypress/e2e/po/components/checkbox-input.po';
 
 export class ChartsPage extends PagePo {
@@ -51,18 +51,16 @@ export class ChartsPage extends PagePo {
     return new CheckboxInputPo(this.self().find('[data-testid="charts-show-deprecated-filter"]'));
   }
 
-  charts() {
-    return new SelectIconGridPo('[data-testid="chart-selection-grid"]', 'chart-selection');
+  getAppByName(name: string) {
+    return new RcItemCardPo().getCardByTitle(name);
   }
 
-  getChartByName(name: string) {
-    return this.charts().self().find(`[data-testid="select-icon-grid-${ name }"]`);
+  clickChart(name: string) {
+    return new RcItemCardPo().clickByTitle(name);
   }
 
   checkChartGenericIcon(name: string, isGeneric = true) {
-    const src = this.charts().self().contains(name).parent()
-      .find('.logo img')
-      .invoke('attr', 'src');
+    const src = new RcItemCardPo().getImageByTitle(name).invoke('attr', 'src');
 
     if (isGeneric) {
       return src.should('contain', 'generic-catalog');

cypress/e2e/tests/pages/explorer/apps/charts.spec.ts

@@ -72,21 +72,25 @@ describe('Apps/Charts', { tags: ['@explorer', '@adminUser'] }, () => {
     // by default "Show deprecated apps" filter is not enabled (except if "deprecated" query param exists in the url)
     chartsPage.chartsShowDeprecatedFilterCheckbox().isUnchecked();
     // a deprecated chart should not be listed before enabling the checkbox
-    chartsPage.getChartByName('deprecatedChart').should('not.exist');
+    chartsPage.getAppByName('deprecatedChart').should('not.exist');
     // an experimental chart should still be visible
-    chartsPage.getChartByName('experimentalChart').should('exist').scrollIntoView().and('be.visible');
+    chartsPage.getAppByName('experimentalChart').should('exist').scrollIntoView()
+      .and('be.visible');
     // a chart that's deprecated & experimental should not be listed before enabling the checkbox
-    chartsPage.getChartByName('deprecatedAndExperimentalChart').should('not.exist');
+    chartsPage.getAppByName('deprecatedAndExperimentalChart').should('not.exist');
     // enabling the checkbox
     chartsPage.chartsShowDeprecatedFilterCheckbox().set();
-    chartsPage.getChartByName('deprecatedChart').should('exist').scrollIntoView().and('be.visible');
-    chartsPage.getChartByName('experimentalChart').should('exist').scrollIntoView().and('be.visible');
-    chartsPage.getChartByName('deprecatedAndExperimentalChart').should('exist').scrollIntoView().and('be.visible');
+    chartsPage.getAppByName('deprecatedChart').should('exist').scrollIntoView()
+      .and('be.visible');
+    chartsPage.getAppByName('experimentalChart').should('exist').scrollIntoView()
+      .and('be.visible');
+    chartsPage.getAppByName('deprecatedAndExperimentalChart').should('exist').scrollIntoView()
+      .and('be.visible');
     // going to chart's page
     const chartPage = new ChartPage();
 
     generateDeprecatedAndExperimentalChart();
-    chartsPage.getChartByName('deprecatedAndExperimentalChart').click();
+    chartsPage.getAppByName('deprecatedAndExperimentalChart').click();
     cy.wait('@generateDeprecatedAndExperimentalChart');
     // checking the "deprecated" query to be included in the url
     cy.location('search').should('include', 'deprecated=true');
@@ -100,7 +104,7 @@ describe('Apps/Charts', { tags: ['@explorer', '@adminUser'] }, () => {
     cy.wait('@fetchChartData');
     cy.get('@fetchChartData.all').should('have.length.at.least', 3);
 
-    chartsPage.getChartByName(chartName)
+    chartsPage.getAppByName(chartName)
       .should('exist')
       .scrollIntoView()
       .should('be.visible')
@@ -124,7 +128,7 @@ describe('Apps/Charts', { tags: ['@explorer', '@adminUser'] }, () => {
     cy.wait('@fetchChartData');
     cy.get('@fetchChartData.all').should('have.length.at.least', 3);
 
-    chartsPage.getChartByName(chartName)
+    chartsPage.getAppByName(chartName)
       .should('exist')
       .scrollIntoView()
       .should('be.visible')

cypress/e2e/tests/pages/explorer/apps/repositories.spec.ts

@@ -182,7 +182,7 @@ describe('Apps', () => {
         chartsPage.chartsFilterReposSelect().checkOptionSelected('All');
         chartsPage.chartsFilterInput().clear();
 
-        chartsPage.charts().select('Rancher Backups');
+        chartsPage.clickChart('Rancher Backups');
         chartPage.waitForPage();
 
         // The repo charts should have been fetched

package.json

@@ -63,7 +63,7 @@
     "@aws-sdk/client-kms": "3.8.1",
     "@novnc/novnc": "1.2.0",
     "@popperjs/core": "2.11.8",
-    "@rancher/icons": "2.0.32",
+    "@rancher/icons": "2.0.36",
     "@vee-validate/zod": "4.15.0",
     "ansi_up": "5.0.0",
     "axios": "1.8.3",

shell/assets/styles/themes/_dark.scss

@@ -229,4 +229,10 @@
   $slate: #4B4F6B;
 
   --slate: #{$slate};
+
+  --link-text-secondary: #{$secondary};
+
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+  }
 }

shell/assets/styles/themes/_light.scss

@@ -78,6 +78,7 @@ BODY, .theme-light {
 
   --link                    : #{$link};
   --link-text               : #{contrast-color($link)};
+  --link-text-secondary     : #{$darker};
   --link-hover-bg           : #{darken($link, 10%)};
   --link-hover-text         : #{saturate($lightest, 20%)};
   --link-active-bg          : #{darken($link, 25%)};
@@ -96,6 +97,15 @@ BODY, .theme-light {
     }
   }
 
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
   .bg-link {
     background-color: var(--link);
     color: var(--link-text);
@@ -350,6 +360,7 @@ BODY, .theme-light {
   --border                     : #{$medium};
   --border-width               : 1px;
   --border-radius              : 4px;
+  --border-radius-md           : 6px;
   --border-radius-lg           : 8px;
   --outline                    : var(--primary);
   --outline-width              : 1px;
@@ -552,4 +563,8 @@ BODY, .theme-light {
   --badge-state-disabled-text  : #{$darker};
   --badge-state-disabled-bg    : #{$lighter};
   --badge-state-disabled-border: #{$medium};
+
+  --gap                        : 8px;
+  --gap-md                     : 16px;
+  --gap-lg                     : 24px;
 }

shell/assets/translations/en-us.yaml

@@ -116,6 +116,12 @@ generic:
   experimental: Experimental
 
   deprecated: Deprecated
+  upgradeable: Upgradeable
+  installed: Installed
+  featured: Featured
+  shortFeatured: Feat
+  category: Category
+  tags: Tags
   placeholder: "e.g. {text}"
   moreInfo: More Info
   selectors:
@@ -1028,6 +1034,7 @@ catalog:
     search: Filter charts results
     deprecatedChartsFilter:
       label: Show deprecated apps
+    addNew: Add new
   install:
     action:
       goToUpgrade: Edit/Upgrade
@@ -3136,6 +3143,12 @@ istio:
   tracing: Enable Jaeger Tracing (limited)
   v1Warning: Please uninstall the current Istio version in the <code>istio-system</code> namespace before attempting to install this version.
 
+itemCard:
+  ariaLabel:
+    clickable: Click on Card
+    card: Item Card
+    status: Status
+    content: Card Content
 jwt:
   title: JWT Authentication
   actions:

shell/components/RcFilterPanel.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+type FilterOption = {
+  value?: string;
+  component?: any;
+  componentProps?: Record<string, any>;
+  label?: string | { component: any; componentProps: Record<string, any>; };
+};
+
+type FilterGroup = {
+  key: string;
+  title: string;
+  options: FilterOption[];
+};
+
+const props = defineProps<{
+  modelValue: Record<string, string[]>;
+  filters: FilterGroup[];
+}>();
+
+const emit = defineEmits<{(e: 'update:modelValue', val: Record<string, string[]>): void;}>();
+
+const updateFilter = (key: string, value: string[]) => {
+  const newValue = { ...props.modelValue, [key]: value };
+
+  emit('update:modelValue', newValue);
+};
+
+</script>
+
+<template>
+  <div class="filter-panel">
+    <div
+      v-for="filter in filters"
+      :key="filter.key"
+      class="filter-panel-filter-group"
+    >
+      <h4 class="filter-panel-filter-group-title">
+        {{ filter.title }}
+      </h4>
+      <div
+        v-for="(option, i) in filter.options"
+        :key="`${filter.key}-${i}`"
+        class="filter-panel-filter-option"
+      >
+        <template v-if="option.component">
+          <component
+            :is="option.component"
+            v-bind="option.componentProps"
+          />
+        </template>
+        <template v-else>
+          <Checkbox
+            :key="i"
+            class="filter-panel-filter-checkbox"
+            :label="typeof option.label === 'string' ? option.label : undefined"
+            :value="modelValue[filter.key]"
+            :value-when-true="option.value"
+            @update:value="updateFilter(filter.key, $event)"
+          >
+            <template #label>
+              <span v-if="typeof option.label === 'string'">{{ option.label }}</span>
+              <component
+                :is="option.label.component"
+                v-else
+                v-bind="option.label.componentProps"
+              />
+            </template>
+          </Checkbox>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.filter-panel {
+  display: flex;
+  min-width: 250px;
+  height: max-content;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 6px;
+  background: var(--sortable-table-header-bg);
+
+  &-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+
+    &-title {
+      margin-bottom: 6px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 23px;
+    }
+  }
+
+  &-filter-option {
+    width: 100%;
+
+    .filter-panel-filter-checkbox {
+
+      .checkbox-label span {
+        max-width: 240px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        color: var(--link-text-secondary);
+      }
+    }
+  }
+}
+</style>