Merge pull request #8334 from mook-as/rdx/ui/upgrade-notification

UI: Add badge for upgradable extensions

Author: mook-as

pkg/rancher-desktop/components/MarketplaceCard.vue

@@ -35,7 +35,7 @@
       </Banner>
       <!-- install button -->
       <button
-        v-if="!error && !currentAction && !installedVersion"
+        v-if="!error && !currentAction && !installed"
         data-test="button-install"
         class="role-primary btn btn-xs"
         @click="appInstallation('install')"
@@ -44,15 +44,15 @@
       </button>
       <!-- upgrade button -->
       <button
-        v-if="!error && !currentAction && canUpgrade"
+        v-if="!error && !currentAction && installed?.canUpgrade"
         class="role-primary btn btn-xs"
         @click="appInstallation('upgrade')"
       >
         {{ t('marketplace.labels.upgrade') }}
       </button>
       <!-- uninstall button -->
       <button
-        v-if="!error && !currentAction && installedVersion"
+        v-if="!error && !currentAction && installed"
         data-test="button-uninstall"
         class="role-danger btn btn-xs"
         @click="appInstallation('uninstall')"
@@ -76,10 +76,9 @@
 
 <script lang="ts">
 import { Banner } from '@rancher/components';
-import semver from 'semver';
 
 import LoadingIndicator from '@pkg/components/LoadingIndicator.vue';
-import { MarketplaceData } from '@pkg/store/extensions.js';
+import type { ExtensionState, MarketplaceData } from '@pkg/store/extensions';
 
 import type { PropType } from 'vue';
 
@@ -92,16 +91,8 @@ export default {
       type:     Object as PropType<MarketplaceData>,
       required: true,
     },
-    credentials: {
-      type:     Object,
-      required: true,
-    },
-    isInstalled: {
-      type:     Boolean,
-      required: true,
-    },
-    installedVersion: {
-      type:     String,
+    installed: {
+      type:     Object as undefined | PropType<ExtensionState>,
       required: false,
       default:  undefined,
     },
@@ -119,21 +110,11 @@ export default {
       return `${ this.extensionWithoutVersion }:${ this.extension.version }`;
     },
     extensionWithoutVersion() {
-      const index = this.extension.slug.lastIndexOf(':');
-
-      return this.extension.slug.substring(0, index) || this.extension.slug;
+      return this.extension.slug;
     },
     extensionLink() {
       return this.extension.slug.startsWith('ghcr.io/') ? `https://${ this.extension.slug }` : `https://hub.docker.com/extensions/${ this.extension.slug }`;
     },
-    canUpgrade() {
-      try {
-        return this.installedVersion && semver.gt(this.extension.version, this.installedVersion);
-      } catch {
-        // If installed or available version is not semver.
-        return false;
-      }
-    },
     loadingLabel() {
       return this.t(`marketplace.loading.${ this.currentAction }`);
     },
@@ -159,8 +140,6 @@ export default {
           this.currentAction = null;
         }
       } finally {
-        this.$emit('update:extension');
-
         setTimeout(() => {
           this.resetBanners();
         }, 3_000);

pkg/rancher-desktop/components/MarketplaceCatalog.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
-import semver from 'semver';
 import Vue, { VueConstructor } from 'vue';
 import { mapGetters } from 'vuex';
 
 import MarketplaceCard from '@pkg/components/MarketplaceCard.vue';
 import { Settings, ContainerEngine } from '@pkg/config/settings';
-import { ExtensionState, MarketplaceData } from '@pkg/store/extensions.js';
+import type { ExtensionState, MarketplaceData } from '@pkg/store/extensions';
 
-type ExtensionData = MarketplaceData & { installed: boolean };
+type ExtensionData = MarketplaceData;
 
 interface VuexBindings {
   getPreferences: Settings;
@@ -17,33 +16,14 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
   name:       'marketplace-catalog',
   components: { MarketplaceCard },
   data() {
-    return {
-      searchValue: '',
-      loading:     true,
-      credentials: {
-        user:     '',
-        password: '',
-        port:     0,
-      },
-    };
-  },
-  async fetch() {
-    this.credentials = await this.$store.dispatch(
-      'credentials/fetchCredentials',
-    );
-
-    if (!this.credentials) {
-      return;
-    }
-
-    this.loading = false;
+    return { searchValue: '' };
   },
   computed: {
     ...mapGetters('preferences', ['getPreferences']),
-    ...mapGetters('extensions', { installedExtensions: 'list', extensions: 'marketData' }) as {
-        installedExtensions: () => ({ id: string } & ExtensionState )[],
-        extensions: () => MarketplaceData[],
-      },
+    ...mapGetters('extensions', ['installedExtensions', 'marketData']) as {
+      installedExtensions: () => ExtensionState[],
+      marketData: () => MarketplaceData[],
+    },
     containerEngine(): string {
       return this.getPreferences.containerEngine.name;
     },
@@ -57,15 +37,9 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
       return this.getPreferences.application.extensions.allowed.list;
     },
     filteredExtensions(): ExtensionData[] {
-      let tempExtensions = this.extensions
+      let tempExtensions = this.marketData
         .filter((item) => {
           return this.isAllowed(item.slug);
-        })
-        .map((item) => {
-          return {
-            ...item,
-            installed: this.isInstalled(item.slug),
-          };
         });
 
       if (this.searchValue) {
@@ -84,21 +58,15 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
     },
   },
   methods: {
-    isInstalled(slug: string) {
-      return !!this.installedExtensions.find(item => item?.id === slug);
-    },
-    isOutdated(slug: string) {
-      const available = this.extensions.find(item => item.slug === slug);
-      const installed = this.installedExtensions.find(item => item?.id === slug);
-
-      return available && installed && semver.gt(available.version, installed.version);
-    },
     installedVersion(slug: string) {
       return this.installedExtensions.find(item => item.id === slug)?.version;
     },
     isAllowed(slug: string) {
       return !this.allowedListEnabled || this.allowedExtensions.includes(slug);
     },
+    installedExtension(slug: string) {
+      return this.installedExtensions.find(item => item.id === slug);
+    },
   },
 });
 </script>
@@ -117,7 +85,6 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
       {{ t('marketplace.noResults') }}
     </div>
     <div
-      v-if="!loading"
       class="extensions-content"
     >
       <div
@@ -127,11 +94,8 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
       >
         <MarketplaceCard
           :extension="item"
+          :installed="installedExtension(item.slug)"
           :data-test="`extension-card-${item.title.toLowerCase()}`"
-          :is-installed="item.installed"
-          :installed-version="installedVersion(item.slug)"
-          :credentials="credentials"
-          @update:extension="isInstalled"
         />
       </div>
     </div>

pkg/rancher-desktop/components/Nav.vue

@@ -73,11 +73,11 @@ import NavItem from './NavItem.vue';
 
 import DashboardButton from '@pkg/components/DashboardOpen.vue';
 import PreferencesButton from '@pkg/components/Preferences/ButtonOpen.vue';
-import type { ExtensionMetadata } from '@pkg/main/extensions/types';
+import type { ExtensionState } from '@pkg/store/extensions';
 import { hexEncode } from '@pkg/utils/string-encode';
 
-type ExtensionWithUI = ExtensionMetadata & {
-  ui: { 'dashboard-tab': { title: string } };
+type ExtensionWithUI = ExtensionState & {
+  metadata: { ui: { 'dashboard-tab': { title: string } } };
 };
 
 export default Vue.extend({
@@ -90,7 +90,7 @@ export default Vue.extend({
   },
   props: {
     items: {
-      type:      Array,
+      type:      Array as PropType<{route: string; error?: number; experimental?: boolean}[]>,
       required:  true,
       validator: (value: {route: string, error?: number}[]) => {
         const nuxt: NuxtApp = (global as any).$nuxt;
@@ -112,7 +112,7 @@ export default Vue.extend({
       },
     },
     extensions: {
-      type:     Array as PropType<{ id: string, metadata: ExtensionMetadata }[]>,
+      type:     Array as PropType<ExtensionState[]>,
       required: true,
     },
   },
@@ -133,10 +133,12 @@ export default Vue.extend({
     };
   },
   computed: {
-    extensionsWithUI(): { id: string, metadata: ExtensionWithUI }[] {
-      const allExtensions: { id: string, metadata: ExtensionMetadata }[] = (this as any).extensions;
+    extensionsWithUI(): ExtensionWithUI[] {
+      function hasUI(ext: ExtensionState): ext is ExtensionWithUI {
+        return !!ext.metadata.ui?.['dashboard-tab']?.title;
+      }
 
-      return allExtensions.filter(ext => ext.metadata?.ui?.['dashboard-tab']) as any;
+      return this.extensions.filter<ExtensionWithUI>(hasUI);
     },
   },
   methods: {

pkg/rancher-desktop/layouts/default.vue

@@ -8,7 +8,7 @@
     <rd-nav
       class="nav"
       :items="routes"
-      :extensions="extensions"
+      :extensions="installedExtensions"
       @open-dashboard="openDashboard"
       @open-preferences="openPreferences"
     />
@@ -71,17 +71,33 @@ export default {
 
   computed: {
     routes() {
-      return mainRoutes.map(route => route.route === '/Diagnostics' ? { ...route, error: this.errorCount } : route);
+      const badges = {
+        '/Diagnostics': this.diagnosticsCount,
+        '/Extensions':  this.extensionUpgradeCount,
+      };
+
+      return mainRoutes.map((route) => {
+        if (route.route in badges) {
+          return { ...route, error: badges[route.route] };
+        }
+
+        return route;
+      });
     },
     paths() {
       return mainRoutes.map(r => r.route);
     },
-    errorCount() {
+    /** @returns {number} The number of diagnostics errors. */
+    diagnosticsCount() {
       return this.diagnostics.filter(diagnostic => !diagnostic.mute).length;
     },
+    /** @returns {number} The number of extensions with upgrade available. */
+    extensionUpgradeCount() {
+      return this.installedExtensions.filter(ext => ext.canUpgrade).length;
+    },
     ...mapState('credentials', ['credentials']),
     ...mapGetters('diagnostics', ['diagnostics']),
-    ...mapGetters('extensions', { extensions: 'list' }),
+    ...mapGetters('extensions', ['installedExtensions']),
   },
 
   beforeMount() {

pkg/rancher-desktop/pages/Images.vue

@@ -57,7 +57,7 @@ export default {
         .map(image => image.imageName);
     },
     installedExtensionImages() {
-      return this.extensions.map(image => image.id);
+      return this.installedExtensions.map(image => image.id);
     },
     protectedImages() {
       return [
@@ -69,7 +69,7 @@ export default {
     },
     ...mapGetters('k8sManager', { k8sState: 'getK8sState' }),
     ...mapGetters('imageManager', { imageManagerState: 'getImageManagerState' }),
-    ...mapGetters('extensions', { extensions: 'list' }),
+    ...mapGetters('extensions', ['installedExtensions']),
   },
 
   watch: {