@rancher/shell 3.0.7 → 3.0.8-rc.10

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

@@ -0,0 +1,147 @@
+
+<script>
+import CatalogList from './CatalogList/index.vue';
+
+export default {
+  name:       'ExtensionsAirgappedView',
+  components: { CatalogList },
+  data() {
+    return {
+      extensionsPageLink: {
+        name:   'c-cluster-uiplugins',
+        params: { cluster: this.$route.params.cluster }
+      },
+      reloadRequired: false
+    };
+  },
+  methods: {
+    returnToExtensionsPage() {
+      this.$router.push(this.extensionsPageLink);
+    },
+    reload() {
+      this.$router.go();
+    },
+    showCatalogLoadDialog() {
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogInstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          refresh: () => {
+            this.reloadRequired = true;
+          }
+        }
+      });
+    },
+    showCatalogUninstallDialog(ev) {
+      this.$store.dispatch('management/promptModal', {
+        component:           'ExtensionCatalogUninstallDialog',
+        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
+        componentProps:      {
+          catalog: ev,
+          refresh: () => {
+            this.reloadRequired = true;
+          }
+        }
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <div id="extensions-airgapped-main-page">
+    <div class="plugin-header">
+      <!-- catalog/airgapped header -->
+      <div class="catalog-title">
+        <h2
+          class="mb-0 mr-10"
+          data-testid="extensions-catalog-title"
+        >
+          <a
+            class="link"
+            role="link"
+            tabindex="0"
+            :aria-label="t('plugins.manageCatalog.title')"
+            @click="returnToExtensionsPage()"
+          >
+            {{ t('plugins.manageCatalog.title') }}:
+          </a>
+          <t k="plugins.manageCatalog.subtitle" />
+        </h2>
+      </div>
+      <div class="actions-container">
+        <!-- extensions reload toast/notification -->
+        <div
+          v-if="reloadRequired"
+          class="plugin-reload-banner mmr-6"
+          data-testid="extension-reload-banner"
+        >
+          <i class="icon icon-checkmark mr-10" />
+          <span>
+            {{ t('plugins.reload') }}
+          </span>
+          <button
+            class="ml-10 btn btn-sm role-primary"
+            data-testid="extension-reload-banner-reload-btn"
+            role="button"
+            :aria-label="t('plugins.labels.reloadRancher')"
+            @click="reload()"
+          >
+            {{ t('generic.reload') }}
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <!-- Catalog list view -->
+      <CatalogList
+        @showCatalogLoadDialog="showCatalogLoadDialog"
+        @showCatalogUninstallDialog="showCatalogUninstallDialog($event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .plugin-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .catalog-title {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    > h2 {
+      flex: 1;
+      margin-bottom: 0;
+    }
+
+    .link {
+      cursor: pointer;
+    }
+  }
+
+  .plugin-reload-banner {
+    align-items: center;
+    background-color: var(--success-banner-bg);
+    display: flex;
+    padding: 4px 4px 4px 12px;
+    border-radius: 5px;
+    min-height: 36px;
+
+    > i {
+      color: var(--success);
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    > button {
+      line-height: 30px;
+      min-height: 30px;
+    }
+  }
+</style>

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

@@ -14,10 +14,8 @@ import ActionMenu from '@shell/components/ActionMenuShell';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import IconMessage from '@shell/components/IconMessage.vue';
-import { BadgeState } from '@components/BadgeState';
 import PluginInfoPanel from './PluginInfoPanel.vue';
 import SetupUIPlugins from './SetupUIPlugins.vue';
-import CatalogList from './CatalogList/index.vue';
 import Banner from '@components/Banner/Banner.vue';
 import {
   isUIPlugin,
@@ -48,9 +46,7 @@ const TABS_VALUES = {
 export default {
   components: {
     ActionMenu,
-    BadgeState,
     IconMessage,
-    CatalogList,
     Banner,
     PluginInfoPanel,
     Tab,
@@ -79,8 +75,7 @@ export default {
       hasFeatureFlag:                 true,
       defaultIcon:                    require('~shell/assets/images/generic-plugin.svg'),
       reloadRequired:                 false,
-      rancherVersion:                 null,
-      showCatalogList:                false
+      rancherVersion:                 null
     };
   },
 
@@ -175,14 +170,11 @@ export default {
         enabled: true
       });
 
-      // Only show Manage Extension Catalogs when on main charts view
-      if (!this.showCatalogList) {
-        menuActions.push({
-          action:  'manageExtensionView',
-          label:   this.t('plugins.manageCatalog.label'),
-          enabled: true
-        });
-      }
+      menuActions.push({
+        action:  'manageExtensionView',
+        label:   this.t('plugins.manageCatalog.label'),
+        enabled: true
+      });
 
       // Only show Developer Load action if the user has this enabled in preferences
       if (this.pluginDeveloper) {
@@ -204,7 +196,7 @@ export default {
       switch (this.activeTab) {
       case TABS_VALUES.INSTALLED:
         // We never show built-in extensions as installed - installed are just the ones the user has installed
-        return all.filter((p) => !p.builtin && (!!p.installed || !!p.installing) && p.installableVersions?.length > 0);
+        return all.filter((p) => !p.builtin && (!!p.installed || !!p.installing));
       case TABS_VALUES.AVAILABLE:
         return all.filter((p) => !p.installed);
       case TABS_VALUES.BUILTIN:
@@ -284,6 +276,7 @@ export default {
         const latestNotCompatible = item.versions.find((version) => !version.isVersionCompatible);
 
         if (latestCompatible) {
+          item.primeOnly = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
           item.experimental = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
           item.certified = latestCompatible?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
 
@@ -292,6 +285,7 @@ export default {
           item.icon = latestCompatible.icon;
           item.created = latestCompatible.created;
         } else {
+          item.primeOnly = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.PRIME_ONLY, 'true');
           item.experimental = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.EXPERIMENTAL, 'true');
           item.certified = uiPluginHasAnnotation(chart, CATALOG_ANNOTATIONS.CERTIFIED, CATALOG_ANNOTATIONS._RANCHER);
 
@@ -349,6 +343,7 @@ export default {
             installed:           true,
             installedVersion:    p.metadata?.version,
             builtin:             !!p.builtin,
+            primeOnly:           rancher?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true',
             experimental:        rancher?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true',
             certified:           rancher?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER
           };
@@ -381,6 +376,7 @@ export default {
             const installedVersion = (chart.installableVersions || []).find((v) => (v.appVersion ?? v.version) === p.version);
 
             if (installedVersion) {
+              chart.primeOnly = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.PRIME_ONLY] === 'true';
               chart.experimental = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.EXPERIMENTAL] === 'true';
               chart.certified = installedVersion?.annotations?.[CATALOG_ANNOTATIONS.CERTIFIED] === CATALOG_ANNOTATIONS._RANCHER;
             }
@@ -397,6 +393,7 @@ export default {
             versions:            [],
             displayVersion:      p.version,
             displayVersionLabel: p.version || '-',
+            isDeveloper:         p.isDeveloper,
             installed:           true,
             installing:          false,
             builtin:             false,
@@ -593,37 +590,6 @@ export default {
       });
     },
 
-    showCatalogLoadDialog() {
-      this.$store.dispatch('management/promptModal', {
-        component:           'ExtensionCatalogInstallDialog',
-        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
-        componentProps:      {
-          refresh: () => {
-            this.reloadRequired = true;
-          },
-          closed: (res) => {
-            this.didInstall(res);
-          }
-        }
-      });
-    },
-
-    showCatalogUninstallDialog(ev) {
-      this.$store.dispatch('management/promptModal', {
-        component:           'ExtensionCatalogUninstallDialog',
-        returnFocusSelector: '[data-testid="extensions-catalog-load-dialog"]',
-        componentProps:      {
-          catalog: ev,
-          refresh: () => {
-            this.reloadRequired = true;
-          },
-          closed: (res) => {
-            this.didUninstall(res);
-          }
-        }
-      });
-    },
-
     showInstallDialog(plugin, action, ev, initialVersion = null) {
       ev?.target?.blur();
       ev?.preventDefault?.();
@@ -731,7 +697,10 @@ export default {
     },
 
     manageExtensionView() {
-      this.showCatalogList = !this.showCatalogList;
+      this.$router.push({
+        name:   'c-cluster-uiplugins-catalogs',
+        params: { cluster: this.$route.params.cluster }
+      });
     },
 
     updateAddReposSetting() {
@@ -844,11 +813,20 @@ export default {
     getFooterItems(plugin) {
       const labels = [];
 
+      // "developer load" tag
+      if (plugin.isDeveloper) {
+        labels.push(this.t('plugins.labels.isDeveloper'));
+      }
+
+      if (plugin.primeOnly) {
+        labels.push(this.t('plugins.labels.primeOnly'));
+      }
+
       if (plugin.builtin) {
         labels.push(this.t('plugins.labels.builtin'));
       }
 
-      if (!plugin.builtin && !plugin.certified) {
+      if (!plugin.builtin && !plugin.certified && !plugin.isDeveloper) {
         labels.push(this.t('plugins.labels.third-party'));
       }
 
@@ -908,39 +886,12 @@ export default {
 <template>
   <div id="extensions-main-page">
     <div class="plugin-header">
-      <!-- catalog view header -->
-      <template v-if="showCatalogList">
-        <div class="catalog-title">
-          <h2
-            class="mb-0 mr-10"
-            data-testid="extensions-catalog-title"
-          >
-            <a
-              class="link"
-              role="link"
-              tabindex="0"
-              :aria-label="t('plugins.manageCatalog.title')"
-              @click="manageExtensionView()"
-            >
-              {{ t('plugins.manageCatalog.title') }}:
-            </a>
-            <t k="plugins.manageCatalog.subtitle" />
-          </h2>
-          <BadgeState
-            color="bg-warning"
-            :label="t('generic.experimental')"
-            class="badge"
-          />
-        </div>
-      </template>
       <!-- normal extensions view header -->
-      <template v-else>
-        <h2 data-testid="extensions-page-title">
-          <TabTitle breadcrumb="vendor-only">
-            {{ t('plugins.title') }}
-          </TabTitle>
-        </h2>
-      </template>
+      <h2 data-testid="extensions-page-title">
+        <TabTitle breadcrumb="vendor-only">
+          {{ t('plugins.title') }}
+        </TabTitle>
+      </h2>
       <div class="actions-container">
         <!-- extensions reload toast/notification -->
         <div
@@ -1005,112 +956,103 @@ export default {
       />
     </div>
     <div v-else>
-      <!-- Extension Catalog list view -->
-      <template v-if="showCatalogList">
-        <CatalogList
-          @showCatalogLoadDialog="showCatalogLoadDialog"
-          @showCatalogUninstallDialog="showCatalogUninstallDialog($event)"
-        />
-      </template>
-      <template v-else>
-        <Banner
-          v-if="!loading && showAddReposBanner"
-          color="warning"
-          class="add-repos-banner mb-20"
-          data-testid="extensions-new-repos-banner"
+      <Banner
+        v-if="!loading && showAddReposBanner"
+        color="warning"
+        class="add-repos-banner mb-20"
+        data-testid="extensions-new-repos-banner"
+      >
+        <span>{{ t('plugins.addRepos.banner', {}, true) }}</span>
+        <button
+          class="ml-10 btn btn-sm role-primary"
+          data-testid="extensions-new-repos-banner-action-btn"
+          role="button"
+          :aria-label="t('plugins.addRepos.bannerBtn')"
+          @click="showAddExtensionReposDialog()"
         >
-          <span>{{ t('plugins.addRepos.banner', {}, true) }}</span>
-          <button
-            class="ml-10 btn btn-sm role-primary"
-            data-testid="extensions-new-repos-banner-action-btn"
-            role="button"
-            :aria-label="t('plugins.addRepos.bannerBtn')"
-            @click="showAddExtensionReposDialog()"
+          {{ t('plugins.addRepos.bannerBtn') }}
+        </button>
+      </Banner>
+
+      <Tabbed
+        v-if="!loading"
+        ref="tabs"
+        :tabs-only="true"
+        data-testid="extension-tabs"
+        @changed="tabChanged"
+      >
+        <Tab
+          v-if="installed.length"
+          :name="TABS_VALUES.INSTALLED"
+          data-testid="extension-tab-installed"
+          label-key="plugins.tabs.installed"
+          :badge="installed.length"
+          :weight="20"
+        />
+        <Tab
+          :name="TABS_VALUES.AVAILABLE"
+          data-testid="extension-tab-available"
+          label-key="plugins.tabs.available"
+          :weight="19"
+        />
+        <Tab
+          v-if="pluginDeveloper"
+          :name="TABS_VALUES.BUILTIN"
+          label-key="plugins.tabs.builtin"
+          :weight="17"
+        />
+      </Tabbed>
+      <div
+        v-if="loading"
+        class="data-loading"
+      >
+        <i class="icon-spin icon icon-spinner" />
+        <t
+          k="generic.loading"
+          :raw="true"
+        />
+      </div>
+      <div
+        v-else
+        class="plugin-cards"
+        :class="{'v-margin': !list.length}"
+      >
+        <IconMessage
+          v-if="list.length === 0"
+          :vertical="true"
+          :subtle="true"
+          icon="icon-extension"
+          class="mmt-9"
+          :message="emptyMessage"
+        />
+        <template v-else>
+          <rc-item-card
+            v-for="card in pluginCards"
+            :id="card.id"
+            :key="card.id"
+            :class="{ 'single-card': pluginCards.length === 1 }"
+            :header="card.header"
+            :image="card.image"
+            :content="card.content"
+            :actions="card.actions"
+            :clickable="true"
+            @card-click="showPluginDetail(card.plugin)"
+            @uninstall="({event}) => showUninstallDialog(card.plugin, event)"
+            @upgrade="({event}) => showInstallDialog(card.plugin, 'upgrade', event)"
+            @downgrade="({event}) => showInstallDialog(card.plugin, 'downgrade', event)"
+            @install="({event}) => showInstallDialog(card.plugin, 'install', event)"
           >
-            {{ t('plugins.addRepos.bannerBtn') }}
-          </button>
-        </Banner>
-
-        <Tabbed
-          v-if="!loading"
-          ref="tabs"
-          :tabs-only="true"
-          data-testid="extension-tabs"
-          @changed="tabChanged"
-        >
-          <Tab
-            v-if="installed.length"
-            :name="TABS_VALUES.INSTALLED"
-            data-testid="extension-tab-installed"
-            label-key="plugins.tabs.installed"
-            :badge="installed.length"
-            :weight="20"
-          />
-          <Tab
-            :name="TABS_VALUES.AVAILABLE"
-            data-testid="extension-tab-available"
-            label-key="plugins.tabs.available"
-            :weight="19"
-          />
-          <Tab
-            v-if="pluginDeveloper"
-            :name="TABS_VALUES.BUILTIN"
-            label-key="plugins.tabs.builtin"
-            :weight="17"
-          />
-        </Tabbed>
-        <div
-          v-if="loading"
-          class="data-loading"
-        >
-          <i class="icon-spin icon icon-spinner" />
-          <t
-            k="generic.loading"
-            :raw="true"
-          />
-        </div>
-        <div
-          v-else
-          class="plugin-cards"
-          :class="{'v-margin': !list.length}"
-        >
-          <IconMessage
-            v-if="list.length === 0"
-            :vertical="true"
-            :subtle="true"
-            icon="icon-extension"
-            class="mmt-9"
-            :message="emptyMessage"
-          />
-          <template v-else>
-            <rc-item-card
-              v-for="card in pluginCards"
-              :id="card.id"
-              :key="card.id"
-              :class="{ 'single-card': pluginCards.length === 1 }"
-              :header="card.header"
-              :image="card.image"
-              :content="card.content"
-              :actions="card.actions"
-              :clickable="true"
-              @card-click="showPluginDetail(card.plugin)"
-              @uninstall="({event}) => showUninstallDialog(card.plugin, event)"
-              @upgrade="({event}) => showInstallDialog(card.plugin, 'upgrade', event)"
-              @downgrade="({event}) => showInstallDialog(card.plugin, 'downgrade', event)"
-              @install="({event}) => showInstallDialog(card.plugin, 'install', event)"
-            >
-              <template #item-card-sub-header>
-                <AppChartCardSubHeader
-                  :items="card.subHeaderItems"
-                />
-              </template>
-              <template #item-card-footer>
-                <AppChartCardFooter :items="card.footerItems" />
-              </template>
-            </rc-item-card>
-          </template>
-        </div>
-      </template>
+            <template #item-card-sub-header>
+              <AppChartCardSubHeader
+                :items="card.subHeaderItems"
+              />
+            </template>
+            <template #item-card-footer>
+              <AppChartCardFooter :items="card.footerItems" />
+            </template>
+          </rc-item-card>
+        </template>
+      </div>
     </div>
   </div>
 </template>