Merge pull request #8309 from mook-as/rdx/upgrade

RDX: Marketplace: support upgrade

Author: Nino-K

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
@@ -4864,6 +4865,7 @@ extensions:
   icon: icon-extension
   installed:
     list:
+      upgrade: Upgrade
       uninstall: Remove
     emptyState:
       icon: icon-extension

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,52 +126,45 @@ 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() {
+      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 }`);
+    },
   },
 
   methods: {
     resetBanners() {
       this.error = null;
     },
-    appInstallation(action: 'uninstall' | 'install') {
-      this.loading = true;
+    async appInstallation(action: action) {
+      this.currentAction = action;
       this.resetBanners();
-      const extensionId = action === 'uninstall' ? this.extensionWithoutVersion : this.versionedExtension;
-
-      fetch(
-        `http://localhost:${ this.credentials?.port }/v1/extensions/${ action }?id=${ extensionId }`,
-        {
-          method:  'POST',
-          headers: new Headers({
-            Authorization: `Basic ${ window.btoa(
-              `${ this.credentials?.user }:${ this.credentials?.password }`,
-            ) }`,
-            'Content-Type': 'application/x-www-form-urlencoded',
-          }),
-        },
-      ).then((r) => {
-        if (!r.ok) {
-          this.error = r.statusText;
-          this.loading = false;
-        }
+      const id = action === 'uninstall' ? this.extensionWithoutVersion : this.versionedExtension;
+      const verb = action === 'uninstall' ? 'uninstall' : 'install'; // upgrades are installs
+
+      try {
+        const result = await this.$store.dispatch(`extensions/${ verb }`, { id });
 
-        if (r.status === 201) {
-          this.loading = false;
+        if (typeof result === 'string') {
+          this.error = result;
+          this.currentAction = null;
+        } else if (result) {
+          this.currentAction = null;
         }
-      })
-        .finally(() => {
-          this.$emit('update:extension');
-
-          setTimeout(() => {
-            this.resetBanners();
-          }, 3000);
-        });
+      } finally {
+        this.$emit('update:extension');
+
+        setTimeout(() => {
+          this.resetBanners();
+        }, 3_000);
+      }
     },
   },
 };
@@ -206,6 +224,10 @@ export default {
     .banner {
       margin: 0;
     }
+
+    button:not(:first-of-type) {
+      margin-left: 10px;
+    }
   }
 
   &-more-info {

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"
         />