RDX: Simplify marketplace

- Instead of using the data files generated from out-of-tree holding way
  too much data, commit a script that generates a much smaller file
  containing only the fields we need.
- The script has a hard-coded list of extension versions that we will ship.
- The marketplace data now lives in a Vuex store instead of as a file we
  randomly import.

Signed-off-by: Mark Yen <mark.yen@suse.com>

Author: mook-as

package.json

@@ -26,6 +26,7 @@
     "lint:go:nofix": "node scripts/ts-wrapper.js scripts/lint-go.ts",
     "lint:spelling": "bash scripts/spelling.sh",
     "generate:nerdctl-stub": "powershell scripts/windows/generate-nerdctl-stub.ps1",
+    "generate:extension-data": "node scripts/ts-wrapper.js scripts/extension-data.ts",
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=4096 node --stack-size=16384 scripts/ts-wrapper.js scripts/build.ts",
     "package": "node scripts/ts-wrapper.js scripts/package.ts",
     "sign": "node scripts/ts-wrapper.js scripts/sign.ts",

pkg/rancher-desktop/assets/extension-data.yaml

@@ -3,13 +3,13 @@
     <div class="extensions-card">
       <div class="extensions-card-header">
         <img
-          :src="extension.logo_url.small"
+          :src="extension.logo"
           alt=""
         />
         <div class="extensions-card-header-top">
-          <span class="extensions-card-header-title">{{ extension.name }}</span>
+          <span class="extensions-card-header-title">{{ extension.title }}</span>
           <span class="extensions-card-header-subtitle">{{
-            extension.publisher.name
+            extension.publisher
           }}</span>
         </div>
       </div>
@@ -54,18 +54,19 @@
   </div>
 </template>
 
-<script>
-
+<script lang="ts">
 import { Banner } from '@rancher/components';
 
 import LoadingIndicator from '@pkg/components/LoadingIndicator.vue';
-import demoMetadata from '@pkg/utils/_demo_metadata.js';
+import { MarketplaceData } from '@pkg/store/extensions.js';
+
+import type { PropType } from 'vue';
 
 export default {
   components: { LoadingIndicator, Banner },
   props:      {
     extension: {
-      type:     Object,
+      type:     Object as PropType<MarketplaceData>,
       required: true,
     },
     credentials: {
@@ -79,27 +80,26 @@ export default {
   },
   data() {
     return {
-      loading:          false,
-      extensionDetails: null,
-      error:            null,
-      response:         null,
-      bannerActive:     false,
+      loading:      false,
+      error:        null as string | null,
+      response:     null,
+      bannerActive: false,
     };
   },
   computed: {
     installationAction() {
       return this.isInstalled ? 'uninstall' : 'install';
     },
     versionedExtension() {
-      return `${ this.extensionWithoutVersion }:${ this.extensionDetails?.version }`;
+      return `${ this.extensionWithoutVersion }:${ this.extension.version }`;
     },
     extensionWithoutVersion() {
       const index = this.extension.slug.lastIndexOf(':');
 
       return this.extension.slug.substring(0, index) || this.extension.slug;
     },
     extensionLink() {
-      return this.extension.slug.includes('ghcr.io') ? `https://${ this.extension.slug }` : `https://hub.docker.com/extensions/${ this.extension.slug }`;
+      return this.extension.slug.startsWith('ghcr.io/') ? `https://${ this.extension.slug }` : `https://hub.docker.com/extensions/${ this.extension.slug }`;
     },
     buttonLabel() {
       if (this.loading) {
@@ -110,25 +110,11 @@ export default {
     },
   },
 
-  mounted() {
-    this.metadata = demoMetadata[this.extensionWithoutVersion];
-
-    if (!this.metadata) {
-      return;
-    }
-
-    this.extensionDetails = {
-      name:
-        this.metadata?.LatestVersion.Labels['org.opencontainers.image.title'] ||
-        this.extensionWithoutVersion,
-      version: this.metadata?.LatestVersion.Tag || [],
-    };
-  },
   methods: {
     resetBanners() {
       this.error = null;
     },
-    appInstallation(action) {
+    appInstallation(action: 'uninstall' | 'install') {
       this.loading = true;
       this.resetBanners();
       const extensionId = action === 'uninstall' ? this.extensionWithoutVersion : this.versionedExtension;

pkg/rancher-desktop/components/MarketplaceCard.vue

@@ -1,18 +1,13 @@
 <script lang="ts">
+import semver from 'semver';
 import Vue, { VueConstructor } from 'vue';
 import { mapGetters } from 'vuex';
 
-import { demoMarketplace } from '../utils/_demo_marketplace_items.js';
-
 import MarketplaceCard from '@pkg/components/MarketplaceCard.vue';
 import { Settings, ContainerEngine } from '@pkg/config/settings';
-import { ExtensionState } from '@pkg/store/extensions.js';
-
-type FilteredExtensions = typeof demoMarketplace.summaries;
+import { ExtensionState, MarketplaceData } from '@pkg/store/extensions.js';
 
-interface installedExtensions extends ExtensionState {
-  id: string
-}
+type ExtensionData = MarketplaceData & { installed: boolean };
 
 interface VuexBindings {
   getPreferences: Settings;
@@ -30,8 +25,6 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
         password: '',
         port:     0,
       },
-      extensions:          demoMarketplace.summaries,
-      installedExtensions: [] as installedExtensions[],
     };
   },
   async fetch() {
@@ -47,6 +40,10 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
   },
   computed: {
     ...mapGetters('preferences', ['getPreferences']),
+    ...mapGetters('extensions', { installedExtensions: 'list', extensions: 'marketData' }) as {
+        installedExtensions: () => ({ id: string } & ExtensionState )[],
+        extensions: () => MarketplaceData[],
+      },
     containerEngine(): string {
       return this.getPreferences.containerEngine.name;
     },
@@ -59,28 +56,21 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
     allowedExtensions(): string[] {
       return this.getPreferences.application.extensions.allowed.list;
     },
-    filteredExtensions(): FilteredExtensions {
+    filteredExtensions(): ExtensionData[] {
       let tempExtensions = this.extensions
         .filter((item) => {
           return this.isAllowed(item.slug);
         })
         .map((item) => {
-          if (this.isInstalled(item.slug)) {
-            return {
-              ...item,
-              installed: true,
-            };
-          }
-
           return {
             ...item,
-            installed: false,
+            installed: this.isInstalled(item.slug),
           };
         });
 
       if (this.searchValue) {
         tempExtensions = tempExtensions.filter((item) => {
-          return item.name
+          return item.title
             .toLowerCase()
             .includes(this.searchValue.toLowerCase());
         });
@@ -89,15 +79,19 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
       const collator = new Intl.Collator('en', { sensitivity: 'base' });
 
       return filteredExtensions.sort((s1, s2) => {
-        return collator.compare(s1.name, s2.name);
+        return collator.compare(s1.title, s2.title);
       });
     },
   },
   methods: {
     isInstalled(slug: string) {
-      this.installedExtensions = this.$store.getters['extensions/list'];
+      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 this.installedExtensions.find(item => item?.id === slug);
+      return available && installed && semver.gt(available.version, installed.version);
     },
     isAllowed(slug: string) {
       return !this.allowedListEnabled || this.allowedExtensions.includes(slug);
@@ -130,7 +124,7 @@ export default (Vue as VueConstructor<Vue & VuexBindings>).extend({
       >
         <MarketplaceCard
           :extension="item"
-          :data-test="`extension-card-${item.name.toLowerCase()}`"
+          :data-test="`extension-card-${item.title.toLowerCase()}`"
           :is-installed="item.installed"
           :credentials="credentials"
           @update:extension="isInstalled"

pkg/rancher-desktop/components/MarketplaceCatalog.vue

@@ -11,12 +11,12 @@ import {
   Extension, ExtensionErrorCode, ExtensionManager, SpawnOptions, SpawnResult,
 } from './types';
 
+import MARKETPLACE_DATA from '@pkg/assets/extension-data.yaml';
 import type { ContainerEngineClient } from '@pkg/backend/containerClient';
 import { ContainerEngine, Settings } from '@pkg/config/settings';
 import { getIpcMainProxy } from '@pkg/main/ipcMain';
 import mainEvents from '@pkg/main/mainEvents';
 import type { IpcMainEvents, IpcMainInvokeEvents, IpcRendererEvents } from '@pkg/typings/electron-ipc';
-import { demoMarketplace } from '@pkg/utils/_demo_marketplace_items';
 import { parseImageReference } from '@pkg/utils/dockerUtils';
 import fetch, { RequestInit } from '@pkg/utils/fetch';
 import Logging from '@pkg/utils/logging';
@@ -318,7 +318,7 @@ export class ExtensionManagerImpl implements ExtensionManager {
     if (!this.#supportedExtensions) {
       const supported: Record<string, boolean> = {};
 
-      for (const item of demoMarketplace.summaries) {
+      for (const item of MARKETPLACE_DATA) {
         const slug = parseImageReference(item.slug);
 
         if (!slug) {

pkg/rancher-desktop/main/extensions/manager.ts

@@ -3,6 +3,7 @@ import { GetterTree } from 'vuex';
 import { fetchAPI } from './credentials';
 import { ActionContext, MutationsType } from './ts-helpers';
 
+import MARKETPLACE_DATA from '@pkg/assets/extension-data.yaml';
 import type { ExtensionMetadata } from '@pkg/main/extensions/types';
 
 export interface ExtensionState {
@@ -15,6 +16,17 @@ interface ExtensionsState {
   extensions: Record<string, ExtensionState>;
 }
 
+export interface MarketplaceData {
+  slug: string;
+  version: string;
+  containerd_compatible: boolean;
+  labels: Record<string, string>;
+  title: string;
+  logo: string;
+  publisher: string;
+  short_description: string;
+}
+
 export const state: () => ExtensionsState = () => ({ extensions: {} });
 
 export const mutations: MutationsType<ExtensionsState> = {
@@ -44,4 +56,7 @@ export const getters: GetterTree<ExtensionsState, ExtensionsState> = {
   list(state: ExtensionsState): ({ id: string } & ExtensionState )[] {
     return Object.entries(state.extensions).map(([id, info]) => ({ id, ...info }));
   },
+  marketData(state: ExtensionsState): MarketplaceData[] {
+    return MARKETPLACE_DATA;
+  },
 };