@rancher/shell 3.0.9-rc.6 → 3.0.9

package/edit/provisioning.cattle.io.cluster/tabs/Ingress.vue

@@ -19,6 +19,7 @@ interface Props {
   mode?: string;
   value: string | string[];
   nginxSupported: boolean;
+  traefikSupported: boolean;
   nginxChart: string;
   traefikChart: string;
   userChartValues: any;
@@ -30,6 +31,7 @@ const {
   nginxChart,
   traefikChart,
   nginxSupported,
+  traefikSupported,
   userChartValues,
   versionInfo
 } = defineProps<Props>();
@@ -44,6 +46,9 @@ const showAdvanced = ref<Boolean>(false);
 const isView = computed(() => mode === _VIEW);
 const isEdit = computed(() => mode === _EDIT);
 const showTraefikBanner = ref<Boolean>(false);
+const traefikMerged = ref(initYamlEditor(traefikChart));
+const nginxMerged = ref(initYamlEditor(nginxChart));
+const showConfig = computed(() => !!versionInfo[traefikChart] || !!versionInfo[nginxChart]);
 
 const ingressSelection = computed(() => {
   if (Array.isArray(value) ) {
@@ -55,9 +60,21 @@ const ingressSelection = computed(() => {
   }
 });
 const ingressOptions = computed(() => {
-  return INGRESS_OPTIONS.filter((option) => !(option.id === INGRESS_DUAL && mode === _CREATE) &&
-  !((option.id === INGRESS_NGINX || option.id === INGRESS_DUAL) && !nginxSupported)
-  ).map((option) => {
+  return INGRESS_OPTIONS.filter((option) => {
+    if (option.id === INGRESS_NGINX) {
+      return nginxSupported;
+    } else if (option.id === TRAEFIK) {
+      return traefikSupported;
+    } else if (option.id === INGRESS_DUAL) {
+      if (mode === _CREATE) {
+        return false;
+      } else {
+        return traefikSupported && nginxSupported;
+      }
+    }
+
+    return true;
+  }).map((option) => {
     return {
       ...option,
       selected: option.id === ingressSelection.value
@@ -73,7 +90,13 @@ const ingressEnabled = computed({
     if (!val) {
       emit('update:value', INGRESS_NONE);
     } else {
-      emit('update:value', TRAEFIK);
+      if (traefikSupported) {
+        emit('update:value', TRAEFIK);
+      } else if (nginxSupported) {
+        emit('update:value', INGRESS_NGINX);
+      } else {
+        emit('update:value', INGRESS_NONE);
+      }
     }
   }
 });
@@ -102,9 +125,6 @@ function preconfigureTraefik() {
   emit('update-values', traefikChart, traefikMerged.value);
 }
 
-const traefikMerged = ref(initYamlEditor(traefikChart));
-const nginxMerged = ref(initYamlEditor(nginxChart));
-
 const nginxHttp = computed({
   get() {
     return get(nginxMerged.value, 'controller.hostPort.ports.http');
@@ -193,12 +213,14 @@ function updateYaml(component: any, value: any) {
   </div>
   <div v-else>
     <Banner
+      v-if="traefikSupported"
       color="info"
       label-key="cluster.ingress.banners.transitioning.label"
     />
     <IngressCards
       :options="ingressOptions"
       :mode="mode"
+      :class="!traefikSupported ? 'mt-10' : ''"
       @select="selectIngress"
     />
     <Banner
@@ -219,79 +241,81 @@ function updateYaml(component: any, value: any) {
         </template>
       </RichTranslation>
     </Banner>
-    <div class="mt-20">
-      <IngressConfiguration
-        v-model:compatibility-mode="compatibilityMode"
-        v-model:nginxHttp="nginxHttp"
-        v-model:nginxHttps="nginxHttps"
-        v-model:traefikHttp="traefikHttp"
-        v-model:traefikHttps="traefikHttps"
-        :mode="mode"
-        :ingress-selection="ingressSelection"
-        @validation-changed="emit('config-validation-changed', $event)"
-      />
-    </div>
-    <div>
-      <button
-        type="button"
-        class="btn role-link advanced-toggle mb-0"
-        @click="showAdvanced = !showAdvanced"
-      >
-        {{ showAdvanced ? t('cluster.ingress.hideAdvanced') : t('cluster.ingress.showAdvanced') }}
-      </button>
-    </div>
-    <template v-if="showAdvanced">
-      <div class="row">
-        <div
-          v-if="ingressSelection === TRAEFIK || ingressSelection === INGRESS_DUAL"
-          :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
+    <div v-if="showConfig">
+      <div class="mt-20">
+        <IngressConfiguration
+          v-model:compatibility-mode="compatibilityMode"
+          v-model:nginxHttp="nginxHttp"
+          v-model:nginxHttps="nginxHttps"
+          v-model:traefikHttp="traefikHttp"
+          v-model:traefikHttps="traefikHttps"
+          :mode="mode"
+          :ingress-selection="ingressSelection"
+          @validation-changed="emit('config-validation-changed', $event)"
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          class="btn role-link advanced-toggle mb-0"
+          @click="showAdvanced = !showAdvanced"
         >
-          <p
-            v-if="ingressSelection === INGRESS_DUAL"
-            class="mb-10"
+          {{ showAdvanced ? t('cluster.ingress.hideAdvanced') : t('cluster.ingress.showAdvanced') }}
+        </button>
+      </div>
+      <template v-if="showAdvanced">
+        <div class="row">
+          <div
+            v-if="ingressSelection === TRAEFIK || ingressSelection === INGRESS_DUAL"
+            :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
           >
-            {{ t('cluster.ingress.traefik.header') }}
-          </p>
-          <YamlEditor
-            ref="traefik-yaml"
-            class="ingress-yaml-editor"
-            data-testid="traefik-yaml-editor"
-            :value="traefikMerged"
-            :mode="mode"
-            :scrolling="true"
-            :as-object="true"
-            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
-            :hide-preview-buttons="true"
-            @update:value="emit('update-values', traefikChart, $event)"
-            @validationChanged="emit('yaml-validation-changed', {name: traefikChart, val: $event})"
-          />
-        </div>
-        <div
-          v-if="ingressSelection === INGRESS_NGINX || ingressSelection === INGRESS_DUAL"
-          :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
-        >
-          <p
-            v-if="ingressSelection === INGRESS_DUAL"
-            class="mb-10"
+            <p
+              v-if="ingressSelection === INGRESS_DUAL"
+              class="mb-10"
+            >
+              {{ t('cluster.ingress.traefik.header') }}
+            </p>
+            <YamlEditor
+              ref="traefik-yaml"
+              class="ingress-yaml-editor"
+              data-testid="traefik-yaml-editor"
+              :value="traefikMerged"
+              :mode="mode"
+              :scrolling="true"
+              :as-object="true"
+              :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+              :hide-preview-buttons="true"
+              @update:value="emit('update-values', traefikChart, $event)"
+              @validationChanged="emit('yaml-validation-changed', {name: traefikChart, val: $event})"
+            />
+          </div>
+          <div
+            v-if="ingressSelection === INGRESS_NGINX || ingressSelection === INGRESS_DUAL"
+            :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
           >
-            {{ t('cluster.ingress.nginx.header') }}
-          </p>
-          <YamlEditor
-            ref="nginx-yaml"
-            class="ingress-yaml-editor"
-            data-testid="ingress-nginx-yaml-editor"
-            :value="nginxMerged"
-            :mode="mode"
-            :scrolling="true"
-            :as-object="true"
-            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
-            :hide-preview-buttons="true"
-            @update:value="emit('update-values', nginxChart, $event)"
-            @validationChanged="emit('yaml-validation-changed', {name: nginxChart, val: $event})"
-          />
+            <p
+              v-if="ingressSelection === INGRESS_DUAL"
+              class="mb-10"
+            >
+              {{ t('cluster.ingress.nginx.header') }}
+            </p>
+            <YamlEditor
+              ref="nginx-yaml"
+              class="ingress-yaml-editor"
+              data-testid="ingress-nginx-yaml-editor"
+              :value="nginxMerged"
+              :mode="mode"
+              :scrolling="true"
+              :as-object="true"
+              :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+              :hide-preview-buttons="true"
+              @update:value="emit('update-values', nginxChart, $event)"
+              @validationChanged="emit('yaml-validation-changed', {name: nginxChart, val: $event})"
+            />
+          </div>
         </div>
-      </div>
-    </template>
+      </template>
+    </div>
   </div>
 </template>
 

package/list/provisioning.cattle.io.cluster.vue

@@ -300,7 +300,7 @@ export default {
   </div>
 </template>
 
-<stye scoped lang="scss">
+<style scoped lang="scss">
   .capi-unsupported {
     &.has-description {
       border-bottom: none;
@@ -317,4 +317,4 @@ export default {
       display: flex;
     }
   }
-</stye>
+</style>

package/models/__tests__/chart.test.ts

@@ -236,12 +236,12 @@ describe('class Chart', () => {
 
       expect(result.footerItems).toHaveLength(3);
 
-      const categoryItem = result.footerItems.find((i) => i.icon === 'icon-category-alt');
+      const categoryItem = result.footerItems.find((i) => i.icon === 'category-alt');
 
       expect(categoryItem).toBeDefined();
       expect(categoryItem?.labels).toContain('database');
 
-      const tagItem = result.footerItems.find((i) => i.icon === 'icon-tag-alt');
+      const tagItem = result.footerItems.find((i) => i.icon === 'tag-alt');
 
       expect(tagItem).toBeDefined();
       expect(tagItem?.labels).toStrictEqual(expect.arrayContaining(['linux', 'experimentl']));

package/models/chart.js

@@ -164,7 +164,7 @@ export default class Chart extends SteveModel {
     const footerItems = [
       {
         type:         REPO,
-        icon:         'icon-repository-alt',
+        icon:         'repository-alt',
         iconTooltip:  { key: 'tableHeaders.repoName' },
         labels:       [this.repoNameDisplay],
         labelTooltip: this.t('catalog.charts.findSimilar.message', { type: this.t('catalog.charts.findSimilar.types.repo') }, true)
@@ -174,7 +174,7 @@ export default class Chart extends SteveModel {
     if (this.categories.length) {
       footerItems.push( {
         type:         CATEGORY,
-        icon:         'icon-category-alt',
+        icon:         'category-alt',
         iconTooltip:  { key: 'generic.category' },
         labels:       this.categories,
         labelTooltip: this.t('catalog.charts.findSimilar.message', { type: this.t('catalog.charts.findSimilar.types.category') }, true)
@@ -184,7 +184,7 @@ export default class Chart extends SteveModel {
     if (this.tags.length) {
       footerItems.push({
         type:         TAG,
-        icon:         'icon-tag-alt',
+        icon:         'tag-alt',
         iconTooltip:  { key: 'generic.tags' },
         labels:       this.tags,
         labelTooltip: this.t('catalog.charts.findSimilar.message', { type: this.t('catalog.charts.findSimilar.types.tag') }, true)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.9-rc.6",
+  "version": "3.0.9",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",

package/pages/c/_cluster/apps/charts/AppChartCardFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { RcItemCardAction } from '@components/RcItemCard';
 import { RcButton } from '@components/RcButton';
+import { RcIcon } from '@components/RcIcon';
 
 interface FooterItem {
   icon?: string;
@@ -31,13 +32,19 @@ function onClickItem(type: string, label: string) {
       class="app-chart-card-footer-item"
       data-testid="app-chart-card-footer-item"
     >
+      <RcIcon
+        v-if="footerItem.icon"
+        v-clean-tooltip="footerItem.iconTooltip?.key ? t(footerItem.iconTooltip?.key) : undefined"
+        class="app-chart-card-footer-item-icon"
+        :type="footerItem.icon"
+      />
       <template
         v-for="(label, j) in footerItem.labels"
         :key="j"
       >
         <rc-item-card-action
           v-if="clickable && footerItem.type"
-          class="app-chart-card-footer-item-text"
+          class="app-chart-card-footer-item-action"
         >
           <rc-button
             v-clean-tooltip="footerItem.labelTooltip"
@@ -47,18 +54,12 @@ function onClickItem(type: string, label: string) {
             :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel', { filter: label })"
             @click="onClickItem(footerItem.type, label)"
           >
-            <template
-              v-if="footerItem.icon"
-              #before
-            >
-              <i
-                v-clean-tooltip="t(footerItem.iconTooltip?.key)"
-                :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
-              />
-            </template>
-            {{ label }}
-            <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+            <span class="app-chart-card-footer-button-label">{{ label }}</span>
           </rc-button>
+          <span
+            v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1"
+            class="app-chart-card-footer-item-separator"
+          >,</span>
         </rc-item-card-action>
         <span
           v-else
@@ -67,7 +68,10 @@ function onClickItem(type: string, label: string) {
           data-testid="app-chart-card-footer-item-text"
         >
           {{ label }}
-          <span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+          <span
+            v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1"
+            class="app-chart-card-footer-item-separator"
+          >,</span>
         </span>
       </template>
     </div>
@@ -78,6 +82,7 @@ function onClickItem(type: string, label: string) {
 .app-chart-card-footer {
   display: flex;
   flex-wrap: wrap;
+  max-width: 100%;
 
   &-item {
     display: flex;
@@ -85,18 +90,31 @@ function onClickItem(type: string, label: string) {
     color: var(--link-text-secondary);
     margin-top: 8px;
     margin-right: 8px;
+    min-width: 0;
+    max-width: 100%;
+
+    &-action {
+      display: flex;
+      align-items: center;
+      min-width: 0; // Critical for truncation in flex containers
+      max-width: 100%;
+    }
 
     &-text {
-      margin-right: 8px;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
+      display: block;
       overflow: hidden;
       text-overflow: ellipsis;
-      word-break: break-all;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    &-separator {
+      flex-shrink: 0;
+      margin-right: 4px;
     }
 
     &-icon {
+      flex-shrink: 0;
       width: 20px;
       height: 20px;
       display: flex;
@@ -109,6 +127,15 @@ function onClickItem(type: string, label: string) {
 
   &-button {
     text-transform: capitalize;
+    min-width: 0;
+    max-width: 100%;
+
+    &-label {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 

package/pages/c/_cluster/apps/charts/index.vue

@@ -321,7 +321,7 @@ export default {
         pill:   chart.featured ? { label: { key: 'generic.shortFeatured' }, tooltip: { key: 'generic.featured' } } : undefined,
         header: {
           title:    { text: chart.chartNameDisplay },
-          statuses: this.addStatusesToCharts(chart),
+          statuses: chart.cardContent.statuses
         },
         subHeaderItems: chart.cardContent.subHeaderItems,
         image:          { src: chart.latestCompatibleVersion.icon, alt: { text: this.t('catalog.charts.iconAlt', { app: get(chart, 'chartNameDisplay') }) } },
@@ -553,16 +553,6 @@ export default {
       }
     },
 
-    addStatusesToCharts(chart) {
-      if (this.suseAppCollectionRepo.includes(chart.repoName)) {
-        return [{
-          icon: 'icon-notify-info', color: 'info', tooltip: { key: 'catalog.charts.isFromSuseAppCoRepository' }
-        }, ...chart.cardContent.statuses];
-      }
-
-      return chart.cardContent.statuses;
-    },
-
     async closeSuseAppCollectionBanner() {
       this.showAppCollectionBanner = false;
       await this.$store.dispatch('prefs/set', { key: HIDE_SUSE_APP_COLLECTION_REPO_BANNER, value: true });

package/pages/c/_cluster/explorer/tools/index.vue

@@ -98,7 +98,7 @@ export default {
           },
           subHeaderItems: chart.cardContent.subHeaderItems,
           footerItems:    chart.deploysOnWindows ? [{
-            icon:        'icon-tag-alt',
+            icon:        'tag-alt',
             iconTooltip: { key: 'generic.tags' },
             labels:      [this.t('catalog.charts.deploysOnWindows')],
           }] : [],

package/pages/c/_cluster/manager/cloudCredential/index.vue

@@ -9,7 +9,7 @@ import {
   ID_UNLINKED,
   NAME_UNLINKED,
 } from '@shell/config/table-headers';
-import { allHash } from 'utils/promise';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   components: {

package/pages/c/_cluster/uiplugins/index.vue

@@ -873,7 +873,7 @@ export default {
       }
 
       return labels.length ? [{
-        icon:        'icon-tag-alt',
+        icon:        'tag-alt',
         iconTooltip: { key: 'generic.tags' },
         labels,
       }] : [];

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -314,7 +314,10 @@ const cursorValue = computed(() => props.clickable ? 'pointer' : 'auto');
           </div>
         </div>
 
-        <slot name="item-card-sub-header" />
+        <slot name="item-card-sub-header">
+          <!-- DIV added to add the gap if the sub-header is not provided -->
+          <div />
+        </slot>
 
         <template v-if="$slots['item-card-content']">
           <slot name="item-card-content">
@@ -407,6 +410,10 @@ $image-medium-box-width: 48px;
     height: 24px;
     color: var(--body-text);
 
+    &.small {
+      height: 32px;
+    }
+
     &-left,
     &-right {
       display: flex;

package/types/shell/index.d.ts

@@ -5240,6 +5240,7 @@ export class Solver {
         values: any;
         loss: number;
         filter: string;
+        filterVal: string;
     };
     solveWide(): {
         loss: number;

package/utils/svg-filter.js

@@ -169,9 +169,10 @@ export class Solver {
     const result = this.solveNarrow(this.solveWide());
 
     return {
-      values: result.values,
-      loss:   result.loss,
-      filter: this.css(result.values),
+      values:    result.values,
+      loss:      result.loss,
+      filter:    this.css(result.values),
+      filterVal: this.css(result.values).replace('filter: ', '').replace(';', '')
     };
   }