feat: Select version to install in extension manager

colin969 · colin969 · commit c084b5db5085 · 2025-11-14T12:15:46.000Z
diff --git a/extensions/core-manager/src/components/ExtensionSubsection.tsx b/extensions/core-manager/src/components/ExtensionSubsection.tsx
@@ -4,16 +4,16 @@ import { useAppSelector } from 'flashpoint-launcher-renderer-ext/hooks';
 import { getExtensionFileURL, runCommand, setExtensionEnabled } from 'flashpoint-launcher-renderer-ext/utils';
 import { useEffect, useState } from 'react';
 import { DownloadExtCommand, UninstallExtCommand } from '../commands';
-import { loadExtIndexUrl, ManagerExtensionInfo } from '../extensionLoader';
+import { loadExtIndexUrl, ManagerExtensionInfo, ManagerExtensionRemoteInfo } from '../extensionLoader';
 
 export type ExtensionRowProps = {
-  item: ManagerExtensionInfo;
+  ext: ManagerExtensionInfo;
   index: number;
   disabled: boolean;
 }
 
 export function ExtensionSubsection() {
-  const [availableExtensions, setAvailableExtensions] = useState<ManagerExtensionInfo[]>([]);
+  const [remoteExtensions, setRemoteExtensions] = useState<ManagerExtensionRemoteInfo[]>([]);
   const installedExtensions = useAppSelector(state => state.main.extensions);
   console.log(installedExtensions);
   const disabledExtensions = useAppSelector(state => state.preferences.disabledExtensions);
@@ -22,40 +22,44 @@ export function ExtensionSubsection() {
     console.log('loading ext');
     loadExtIndexUrl('https://raw.githubusercontent.com/FlashpointProject/FlashpointExtensionIndex/refs/heads/main/extindex.json')
     .then((data) => {
-      setAvailableExtensions(data);
+      setRemoteExtensions(data);
     });
   }, []);
 
   const extensionList: ManagerExtensionInfo[] = installedExtensions.map(ext => {
     return {
       id: ext.id,
-      title: ext.displayName || ext.name,
-      description: ext.description || 'No Description',
-      newestVersion: ext.version,
-      iconUrl: ext.icon ? getExtensionFileURL(ext.id, ext.icon) : undefined,
-      installed: true,
-      availableVersions: [],
+      local: {
+        title: ext.displayName || ext.name,
+        author: ext.author,
+        description: ext.description || 'No Description',
+        installedVersion: ext.version,
+        iconUrl: ext.icon ? getExtensionFileURL(ext.id, ext.icon) : undefined,
+      }
     } satisfies ManagerExtensionInfo;
   });
 
-  for (const ext of availableExtensions) {
-    const existingIdx = installedExtensions.findIndex(e => e.id === ext.id);
+  for (const ext of remoteExtensions) {
+    const existingIdx = extensionList.findIndex(e => e.id === ext.id);
     if (existingIdx === -1) {
-      extensionList.push(ext);
+      extensionList.push({
+        id: ext.id,
+        remote: ext
+      });
     } else {
-      extensionList[existingIdx].availableVersions = ext.availableVersions;
+      extensionList[existingIdx].remote = ext;
     }
   }
 
-  extensionList.sort((a, b) => a.title.localeCompare(b.title));
+  extensionList.sort((a, b) => (a.local?.title || a.remote?.title || '???').localeCompare(b.local?.title || b.remote?.title || '???'));
 
   return <div className='manager-page-subsection'>
     <div className='manager-page-subsection-header'>Extensions</div>
     <div className='manager-page-subsection-list simple-scroll'>
       { extensionList.length > 0 ? extensionList.map((ext, index) => {
         return (
           <ExtensionRow
-            item={ext}
+            ext={ext}
             index={index}
             disabled={!disabledExtensions.includes(ext.id)}/>
         );
@@ -64,26 +68,18 @@ export function ExtensionSubsection() {
   </div>;
 }
 
-export function ExtensionRow({ item, disabled, index }: ExtensionRowProps) {
-  const { id, title, description, installed, newestVersion, availableVersions, iconUrl, getDownloadUrl } = item;
-  const [selectedVersion, setSelectedVersion] = useState(newestVersion);
+export function ExtensionRow({ ext, disabled, index }: ExtensionRowProps) {
+  const [userSelectedVersion, setUserSelectedVersion] = useState<string>();
   const [busy, setBusy] = useState(false);
-  const canInstall = getDownloadUrl !== undefined;
   const enabled = !disabled;
   let rowClassName = 'manager-extension-row';
   if (index % 2 === 0) { rowClassName += ' manager-extension-row--even'; }
 
-  const versionSelector = (
-    <Dropdown<DropdownStringRowProps>
-      text={`Ver: ${selectedVersion}`}
-      rowCount={availableVersions.length}
-      rowProps={{
-        items: availableVersions,
-        onSelect: (index) => setSelectedVersion(availableVersions[index])
-      }}
-      rowRenderer={DropdownStringRow}
-    />
-  );
+  const selectedVersion = (userSelectedVersion && ext.remote?.availableVersions.includes(userSelectedVersion)) ?
+    userSelectedVersion :
+    (ext.local?.installedVersion || ext.remote?.newestVersion || '???');
+
+  const { title, description, iconUrl } = getExtDetails(ext);
 
   return <div className={rowClassName}>
     <div className='manager-extension-row-icon'>
@@ -93,12 +89,12 @@ export function ExtensionRow({ item, disabled, index }: ExtensionRowProps) {
     </div>
     <div className='manager-extension-row-content'>
       <div className='manager-extension-row-top'>
-        <div className='manager-extension-row-title'>{title} - {`${id}`}</div>
+        <div className='manager-extension-row-title'>{title} - {`${ext.id}`}</div>
         { !busy && (
           <>
-            { installed && (
+            { ext.local && (
               <CheckBox
-                onToggle={() => setExtensionEnabled(id, !enabled)}
+                onToggle={() => setExtensionEnabled(ext.id, !enabled)}
                 checked={enabled}/>
             )}
           </>
@@ -107,11 +103,22 @@ export function ExtensionRow({ item, disabled, index }: ExtensionRowProps) {
       <div className='manager-extension-row-inner'>
         <div>{description}</div>
         { !busy ? (
-          <>
-            { installed && (
+          <div className='manager-extension-row-buttons'>
+            { ext.remote && (
+              <Dropdown<DropdownStringRowProps>
+                text={`Ver: ${selectedVersion}`}
+                rowCount={ext.remote.availableVersions.length}
+                rowProps={{
+                  items: ext.remote.availableVersions,
+                  onSelect: (index) => setUserSelectedVersion(ext.remote!.availableVersions[index])
+                }}
+                rowRenderer={DropdownStringRow}
+              />
+            )}
+            { ext.local && (
               <SimpleButton value={'Remove'} onClick={() => {
                 setBusy(true);
-                runCommand(UninstallExtCommand, id)
+                runCommand(UninstallExtCommand, ext.id)
                 .catch((error) => {
                   const errorString =  `Failed to uninstall extension: ${error}`;
                   alert(errorString);
@@ -120,24 +127,37 @@ export function ExtensionRow({ item, disabled, index }: ExtensionRowProps) {
                 .finally(() => setBusy(false));
               }}/>
             )}
-            { canInstall && (
-              <>
-                <SimpleButton value={'Install'} onClick={() => {
-                  setBusy(true);
-                  runCommand(DownloadExtCommand, getDownloadUrl(newestVersion))
-                  .catch((error) => {
-                    const errorString =  `Failed to download and install extension: ${error}`;
-                    alert(errorString);
-                    log.error('Manager', errorString);
-                  })
-                  .finally(() => setBusy(false));
-                }}/>
-                {versionSelector}
-              </>
+            { ext.remote !== undefined && (
+              <SimpleButton value={ext.local ? 'Update' : 'Install'} onClick={() => {
+                setBusy(true);
+                runCommand(DownloadExtCommand, ext.id, ext.remote!.getDownloadUrl(selectedVersion))
+                .catch((error) => {
+                  const errorString =  `Failed to download and install extension: ${error}`;
+                  alert(errorString);
+                  log.error('Manager', errorString);
+                })
+                .finally(() => setBusy(false));
+              }}/>
             )}
-          </>
+          </div>
         ) : <div>Busy...</div> }
       </div>
     </div>
   </div>;
 }
+
+type ExtDetails = {
+  author: string,
+  title: string;
+  description: string;
+  iconUrl?: string;
+}
+
+function getExtDetails(ext: ManagerExtensionInfo): ExtDetails {
+  return {
+    author: ext.remote?.author || ext.local?.author || '???',
+    title: ext.remote?.title || ext.local?.title || '???',
+    description: ext.remote?.description || ext.local?.description || '???',
+    iconUrl: ext.local?.iconUrl || ext.remote?.iconUrl,
+  };
+}
diff --git a/extensions/core-manager/src/extension.ts b/extensions/core-manager/src/extension.ts
@@ -11,7 +11,10 @@ export async function activate(context: ExtensionContext): Promise<void> {
   };
 
   register(
-    commands.registerCommand(DownloadExtCommand, async (url: string) => {
+    commands.registerCommand(DownloadExtCommand, async (extId: string, url: string) => {
+      // Uninstall extension if it exists
+      await uninstallExtension(extId);
+
       const tempPath = os.tmpdir();
       const tempFilepath = path.join(tempPath, `extension-${Date.now()}.zip`);
       const writer = fs.createWriteStream(tempFilepath);
diff --git a/extensions/core-manager/src/extensionLoader.ts b/extensions/core-manager/src/extensionLoader.ts
@@ -1,88 +1,49 @@
 import axios from 'axios';
 
-export type ManagerExtensionInfo = {
-  id: string;
+type ManagerExtensionCommonInfo = {
   title: string;
+  author: string;
   description: string;
   iconUrl?: string;
+}
+
+export type ManagerExtensionRemoteInfo = ManagerExtensionCommonInfo & {
+  id: string;
   newestVersion: string;
   availableVersions: string[];
-  getDownloadUrl?: (version: string) => string,
-  installed: boolean;
+  getDownloadUrl: (version: string) => string,
+}
+
+export type ManagerExtensionLocalInfo = ManagerExtensionCommonInfo & {
+  installedVersion: string;
+};
+
+export type ManagerExtensionInfo = {
+  id: string;
+  local?: ManagerExtensionLocalInfo;
+  remote?: ManagerExtensionRemoteInfo;
 }
 
-export async function loadExtIndexUrl(url: string): Promise<ManagerExtensionInfo[]> {
+export async function loadExtIndexUrl(url: string): Promise<ManagerExtensionRemoteInfo[]> {
   const res = await axios.get(url);
   if (res.status >= 400) {
     throw res.statusText;
   }
 
-  return res.data.map((ext: IndexExtensionInfo): ManagerExtensionInfo => ({
+  return res.data.map((ext: IndexExtensionInfo): ManagerExtensionRemoteInfo => ({
     id: ext.id,
     title: ext.title,
+    author: ext.author,
     description: ext.description,
     iconUrl: ext.iconUrl,
     newestVersion: ext.newestVersion,
-    getDownloadUrl: (ext.repository && ext.artifactName) ? (version: string) => {
+    getDownloadUrl: (version: string) => {
       return `${ext.repository}/releases/download/${version}/${ext.artifactName}`;
-    } : undefined,
+    },
     availableVersions: ext.availableVersions,
-    installed: false // Default to false, would need to check against installed extensions
   }));
 }
 
-export async function loadExtRepoRaw(url: string): Promise<ManagerExtensionInfo[]> {
-  const mockData: ManagerExtensionInfo[] = [
-    {
-      id: 'mock-one',
-      title: 'Mock Extension One',
-      description: 'Mocked Extension',
-      newestVersion: '',
-      availableVersions: [],
-      installed: false,
-    },
-    {
-      id: 'mock-two',
-      title: 'Mock Extension Two',
-      description: 'Mocked Extension',
-      newestVersion: '',
-      availableVersions: [],
-      installed: false,
-    },
-    {
-      id: 'mock-three',
-      title: 'Mock Extension Three',
-      description: 'Mocked Extension',
-      newestVersion: '',
-      availableVersions: [],
-      installed: false,
-    },
-    {
-      id: 'mock-four',
-      title: 'Mock Extension Four',
-      description: 'Mocked Extension',
-      newestVersion: '',
-      availableVersions: [],
-      installed: false,
-    },
-    {
-      id: 'mock-five',
-      title: 'Mock Extension Five',
-      description: 'Mocked Extension',
-      newestVersion: '',
-      availableVersions: [],
-      installed: false,
-    },
-  ];
-
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(mockData);
-    }, 500);
-  });
-}
-
-
 type IndexExtPackageInfo = {
   id: string;
   author: string;
diff --git a/extensions/core-manager/static/core-manager.css b/extensions/core-manager/static/core-manager.css
@@ -82,4 +82,13 @@
 
 .manager-extension-row-inner {
   padding: 0.2rem
+}
+
+.manager-extension-row-buttons {
+  display: flex;
+  flex-direction: row;
+}
+
+.manager-extension-row-buttons > :not(:first-child) {
+  margin-left: 0.3rem;
 }
diff --git a/src/back/extensions/util.ts b/src/back/extensions/util.ts
@@ -33,7 +33,6 @@ export async function parseAppVar(extId: string, appPath: string, launchCommand:
 }
 
 export async function uninstallExtension(state: BackState, extId: string) {
-  console.log('finding ' + extId);
   const ext = await state.extensionsService.getExtension(extId);
   if (ext) {
     await state.extensionsService.removeExtension(extId);
diff --git a/src/shared/back/types.ts b/src/shared/back/types.ts
@@ -593,6 +593,7 @@ export type BackOutTemplate = SocketTemplate<BackOut, {
 
   [BackOut.OPEN_DYNAMIC_PAGE]: (componentName: string, props: any) => void;
 
+  [BackOut.REMOVED_EXTENSION]: (extId: string) => void;
   [BackOut.ADDED_EXTENSION]: (ext: IExtensionDescription) => void;
   [BackOut.UPDATE_EXTENSION_STATE]: (extId: string, enabled: boolean) => void;
 

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,6 @@ export async function parseAppVar(extId: string, appPath: string, launchCommand:`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`export async function uninstallExtension(state: BackState, extId: string) {`
`36`		`- console.log('finding ' + extId);`
`37`	`36`	`const ext = await state.extensionsService.getExtension(extId);`
`38`	`37`	`if (ext) {`
`39`	`38`	`await state.extensionsService.removeExtension(extId);`