@rancher/shell 3.0.9-rc.5 → 3.0.9

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/__tests__/install.test.ts

@@ -15,6 +15,7 @@ describe('page: Install', () => {
       }),
       getters: {
         'catalog/inStore':         'cluster',
+        'catalog/repo':            () => ({ metadata: { name: 'test-repo' } }),
         'features/get':            () => false,
         defaultNamespace:          'default',
         'i18n/withFallback':       (key: string) => key,
@@ -69,7 +70,9 @@ describe('page: Install', () => {
             targetName:      'wrong-name',
             versions:        []
           },
-          query: { versionName: '1.0.0' }
+          query:       { versionName: '1.0.0' },
+          chartValues: { global: { imagePullSecrets: [] } },
+          repo:        { spec: { clientSecret: { name: 'test-secret' } } }
         };
       }
     });

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

@@ -12,12 +12,13 @@ import { lcFirst } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
 import debounce from 'lodash/debounce';
 import { mapGetters } from 'vuex';
-import { SHOW_PRE_RELEASE } from '@shell/store/prefs';
+import { SHOW_PRE_RELEASE, HIDE_SUSE_APP_COLLECTION_REPO_BANNER } from '@shell/store/prefs';
 import { CATALOG } from '@shell/config/labels-annotations';
+import { CATALOG as CATALOG_TYPES, CATALOG_SORT_OPTIONS, CLUSTER_REPO_TYPES } from '@shell/config/types';
+
 import { isUIPlugin } from '@shell/config/uiplugins';
 import { RcItemCard } from '@components/RcItemCard';
 import { get } from '@shell/utils/object';
-import { CATALOG as CATALOG_TYPES, CATALOG_SORT_OPTIONS } from '@shell/config/types';
 import FilterPanel from '@shell/components/FilterPanel';
 import AppChartCardSubHeader from '@shell/pages/c/_cluster/apps/charts/AppChartCardSubHeader';
 import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter';
@@ -26,6 +27,7 @@ import StatusLabel from '@shell/pages/c/_cluster/apps/charts/StatusLabel';
 import RichTranslation from '@shell/components/RichTranslation.vue';
 import { getLatestCompatibleVersion } from '@shell/utils/chart';
 import Select from '@shell/components/form/Select';
+import { getVersionData } from '@shell/config/version';
 
 const createInitialFilters = () => ({
   repos:      [],
@@ -63,6 +65,12 @@ export default {
     this.filters.tags = normalizeFilterQuery(query[TAG]) || [];
 
     this.installedApps = await this.$store.dispatch('cluster/findAll', { type: CATALOG_TYPES.APP });
+
+    // Check if user has permission to create repositories
+    // This is used to show the banner to create repo if you don't have SUSE App Collection
+    const clusterCreateClusterRepo = await this.$store.dispatch('cluster/create', { type: CATALOG_TYPES.CLUSTER_REPO });
+
+    this.canCreateRepos = clusterCreateClusterRepo.canCreate;
   },
 
   updated() {
@@ -130,7 +138,13 @@ export default {
       ],
       initialVisibleChartsCount: 30,
       visibleChartsCount:        20,
-      hasOverflow:               false
+      hasOverflow:               false,
+      getVersionData,
+      CLUSTER_REPO_TYPES,
+      CATALOG_TYPES,
+      canCreateRepos:            false,
+      showAppCollectionBanner:   true,
+      isPrime:                   getVersionData().RancherPrime === 'true',
     };
   },
 
@@ -138,6 +152,22 @@ export default {
     ...mapGetters(['currentCluster']),
     ...mapGetters({ allCharts: 'catalog/charts', loadingErrors: 'catalog/errors' }),
 
+    hideBannerPref() {
+      return this.$store.getters['prefs/get'](HIDE_SUSE_APP_COLLECTION_REPO_BANNER);
+    },
+
+    showAppCollectionBannerLogic() {
+      return !this.hasSuseAppCollectionRepo && this.canCreateRepos && this.showAppCollectionBanner && !this.hideBannerPref & this.isPrime;
+    },
+
+    hasSuseAppCollectionRepo() {
+      return this.suseAppCollectionRepo.length > 0;
+    },
+
+    showErrorBanner() {
+      return this.loadingErrors && this.loadingErrors.length > 0;
+    },
+
     repoOptions() {
       let out = this.$store.getters['catalog/repos'].map((r) => {
         return {
@@ -160,6 +190,13 @@ export default {
       return out;
     },
 
+    suseAppCollectionRepo() {
+      const suseRepos = this.$store.getters['catalog/repos'].filter((r) => r.isSuseAppCollection);
+      const out = suseRepos.map((r) => r.metadata.name);
+
+      return out;
+    },
+
     tagOptions() {
       const outSet = new Set();
 
@@ -514,6 +551,11 @@ export default {
         this.observer.observe(sentinel);
         this.observerInitialized = true;
       }
+    },
+
+    async closeSuseAppCollectionBanner() {
+      this.showAppCollectionBanner = false;
+      await this.$store.dispatch('prefs/set', { key: HIDE_SUSE_APP_COLLECTION_REPO_BANNER, value: true });
     }
   },
 };
@@ -569,6 +611,35 @@ export default {
       :key="i"
       color="error"
       :label="err"
+      class="banner-mb-15px"
+    />
+    <Banner
+      v-if="showAppCollectionBannerLogic"
+      :key="i"
+      color="info"
+      closable
+      class="banner-mb-15px"
+      @close="closeSuseAppCollectionBanner"
+    >
+      <RichTranslation
+        k="catalog.charts.appCollectionRepoMissing"
+        tag="div"
+        :raw="true"
+      >
+        <template #repoCreate="{ content }">
+          <router-link
+            :to="{ name: 'c-cluster-product-resource-create', params: { resource: CATALOG_TYPES.CLUSTER_REPO, cluster: $route.params.cluster, product: $store.getters['productId'] }, query: { target: CLUSTER_REPO_TYPES.SUSE_APP_COLLECTION } }"
+            class="secondary-text-link"
+            tabindex="0"
+          >
+            {{ content }}
+          </router-link>
+        </template>
+      </RichTranslation>
+    </Banner>
+    <div
+      v-if="showAppCollectionBannerLogic || showErrorBanner"
+      class="banner-spacer"
     />
 
     <div class="wrapper">
@@ -847,4 +918,12 @@ export default {
   }
 }
 
+.banner-mb-15px {
+  margin: 0 0 15px 0;
+}
+
+.banner-spacer {
+  height: 9px;
+}
+
 </style>