RDX: Marketplace: support upgrade

This updates the extension catalog to support upgrading already installed extensions, where the installed version is older than the version available in the catalog. This does _not_ update the installed extensions list. Signed-off-by: Mark Yen <[email protected]>
rancher-sandbox · Feb 28, 2025 · c135c24 · c135c24
1 parent c550bb2
commit c135c24
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 37 deletions.
diff --git a/pkg/rancher-desktop/assets/translations/en-us.yaml b/pkg/rancher-desktop/assets/translations/en-us.yaml
@@ -190,13 +190,14 @@ marketplace:
   banners:
     install: Extension {name} has been installed.
     uninstall: Extension {name} has been removed.
-  sidebar:
-    installButton:
-      label: Install
-      loading: Installing...
-    uninstallButton:
-      label: Remove
-      loading: Removing...
+  labels:
+    install: Install
+    uninstall: Remove
+    upgrade: Upgrade
+  loading:
+    install: Installing...
+    uninstall: Removing...
+    upgrade: Upgrading...
   moreInfo: More information
 containers:
   title: Containers

diff --git a/pkg/rancher-desktop/components/MarketplaceCard.vue b/pkg/rancher-desktop/components/MarketplaceCard.vue
@@ -33,35 +33,58 @@
       >
         {{ error }}
       </Banner>
+      <!-- install button -->
       <button
-        v-if="!error"
+        v-if="!error && !currentAction && !installedVersion"
         data-test="button-install"
-        :class="isInstalled ? 'role-danger': 'role-primary'"
-        class="btn btn-xs"
-        :disabled="loading"
-        @click="appInstallation(installationAction)"
+        class="role-primary btn btn-xs"
+        @click="appInstallation('install')"
       >
-        <span
-          v-if="loading"
-          name="loading"
-          :is-loading="loading"
-        >
-          <loading-indicator>{{ buttonLabel }}</loading-indicator>
+        {{ t('marketplace.labels.install') }}
+      </button>
+      <!-- upgrade button -->
+      <button
+        v-if="!error && !currentAction && canUpgrade"
+        class="role-primary btn btn-xs"
+        @click="appInstallation('upgrade')"
+      >
+        {{ t('marketplace.labels.upgrade') }}
+      </button>
+      <!-- uninstall button -->
+      <button
+        v-if="!error && !currentAction && installedVersion"
+        data-test="button-uninstall"
+        class="role-danger btn btn-xs"
+        @click="appInstallation('uninstall')"
+      >
+        {{ t('marketplace.labels.uninstall') }}
+      </button>
+      <!-- "loading" fake button -->
+      <button
+        v-if="!error && currentAction"
+        data-test="button-loading"
+        class="role-primary btn btn-xs"
+        disabled="true"
+      >
+        <span name="loading" is-loading="true">
+          <loading-indicator>{{ loadingLabel }}</loading-indicator>
         </span>
-        <span v-if="!loading">{{ buttonLabel }}</span>
       </button>
     </div>
   </div>
 </template>
 
 <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 { PropType } from 'vue';
 
+type action = 'install' | 'uninstall' | 'upgrade';
+
 export default {
   components: { LoadingIndicator, Banner },
   props:      {
@@ -77,19 +100,21 @@ export default {
       type:     Boolean,
       required: true,
     },
+    installedVersion: {
+      type:     String,
+      required: false,
+      default:  undefined,
+    },
   },
   data() {
     return {
-      loading:      false,
-      error:        null as string | null,
-      response:     null,
-      bannerActive: false,
+      currentAction: null as null | action,
+      error:         null as string | null,
+      response:      null,
+      bannerActive:  false,
     };
   },
   computed: {
-    installationAction() {
-      return this.isInstalled ? 'uninstall' : 'install';
-    },
     versionedExtension() {
       return `${ this.extensionWithoutVersion }:${ this.extension.version }`;
     },
@@ -101,26 +126,26 @@ export default {
     extensionLink() {
       return this.extension.slug.startsWith('ghcr.io/') ? `https://${ this.extension.slug }` : `https://hub.docker.com/extensions/${ this.extension.slug }`;
     },
-    buttonLabel() {
-      if (this.loading) {
-        return this.isInstalled ? this.t('marketplace.sidebar.uninstallButton.loading') : this.t('marketplace.sidebar.installButton.loading');
-      } else {
-        return this.isInstalled ? this.t('marketplace.sidebar.uninstallButton.label') : this.t('marketplace.sidebar.installButton.label');
-      }
+    canUpgrade() {
+      return this.installedVersion && semver.gt(this.extension.version, this.installedVersion);
+    },
+    loadingLabel() {
+      return this.t(`marketplace.loading.${ this.currentAction }`);
     },
   },
 
   methods: {
     resetBanners() {
       this.error = null;
     },
-    appInstallation(action: 'uninstall' | 'install') {
-      this.loading = true;
+    appInstallation(action: action) {
+      this.currentAction = action;
       this.resetBanners();
       const extensionId = action === 'uninstall' ? this.extensionWithoutVersion : this.versionedExtension;
+      const verb = action === 'uninstall' ? 'uninstall' : 'install'; // upgrades are installs
 
       fetch(
-        `http://localhost:${ this.credentials?.port }/v1/extensions/${ action }?id=${ extensionId }`,
+        `http://localhost:${ this.credentials?.port }/v1/extensions/${ verb }?id=${ extensionId }`,
         {
           method:  'POST',
           headers: new Headers({
@@ -133,11 +158,11 @@ export default {
       ).then((r) => {
         if (!r.ok) {
           this.error = r.statusText;
-          this.loading = false;
+          this.currentAction = null;
         }
 
         if (r.status === 201) {
-          this.loading = false;
+          this.currentAction = null;
         }
       })
         .finally(() => {
@@ -206,6 +231,10 @@ export default {
     .banner {
       margin: 0;
     }
+
+    button:not(:first-of-type) {
+      margin-left: 10px;
+    }
   }
 
   &-more-info {

diff --git a/pkg/rancher-desktop/components/MarketplaceCatalog.vue b/pkg/rancher-desktop/components/MarketplaceCatalog.vue
@@ -93,6 +93,9 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
 
       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);
     },
@@ -126,6 +129,7 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
           :extension="item"
           :data-test="`extension-card-${item.title.toLowerCase()}`"
           :is-installed="item.installed"
+          :installed-version="installedVersion(item.slug)"
           :credentials="credentials"
           @update:extension="isInstalled"
         />