refactor: Don't virtualize extension manager list since it breaks dropdowns being in a stacking context

feat: Expose DropdownCheckboxRow (like logs page) and DropdownStringRow components to ext

feat: Add closeDropdown() to Dropdown row props

fix: Properly center the arrow in Dropdown buttons

Author: colin969

extensions/core-manager/src/components/ExtensionSubsection.tsx

@@ -1,14 +1,15 @@
-import { CheckBox, SimpleButton } from 'flashpoint-launcher-renderer-ext/components';
+import { DropdownStringRowProps } from 'flashpoint-launcher-renderer';
+import { CheckBox, Dropdown, DropdownStringRow, SimpleButton } from 'flashpoint-launcher-renderer-ext/components';
 import { useAppSelector } from 'flashpoint-launcher-renderer-ext/hooks';
 import { getExtensionFileURL, runCommand, setExtensionEnabled } from 'flashpoint-launcher-renderer-ext/utils';
 import { useEffect, useState } from 'react';
-import { List, RowComponentProps, useDynamicRowHeight } from 'react-window';
 import { DownloadExtCommand, UninstallExtCommand } from '../commands';
 import { loadExtIndexUrl, ManagerExtensionInfo } from '../extensionLoader';
 
 export type ExtensionRowProps = {
-  items: ManagerExtensionInfo[];
-  disabledExtensions: string[];
+  item: ManagerExtensionInfo;
+  index: number;
+  disabled: boolean;
 }
 
 export function ExtensionSubsection() {
@@ -32,49 +33,59 @@ export function ExtensionSubsection() {
       description: ext.description || 'No Description',
       newestVersion: ext.version,
       iconUrl: ext.icon ? getExtensionFileURL(ext.id, ext.icon) : undefined,
-      installed: true
+      installed: true,
+      availableVersions: [],
     } satisfies ManagerExtensionInfo;
   });
+
   for (const ext of availableExtensions) {
     const existingIdx = installedExtensions.findIndex(e => e.id === ext.id);
     if (existingIdx === -1) {
       extensionList.push(ext);
+    } else {
+      extensionList[existingIdx].availableVersions = ext.availableVersions;
     }
   }
 
   extensionList.sort((a, b) => a.title.localeCompare(b.title));
 
-  const rowHeight = useDynamicRowHeight({
-    defaultRowHeight: 24
-  });
-
   return <div className='manager-page-subsection'>
     <div className='manager-page-subsection-header'>Extensions</div>
-    { extensionList !== undefined ? (
-      <List<ExtensionRowProps>
-        className='simple-scroll'
-        rowComponent={ExtensionRow}
-        rowCount={extensionList.length}
-        rowProps={{
-          items: extensionList,
-          disabledExtensions,
-        }}
-        rowHeight={rowHeight}/>
-    ) : (
-      <div>Loading...</div>
-    )}
+    <div className='manager-page-subsection-list simple-scroll'>
+      { extensionList.length > 0 ? extensionList.map((ext, index) => {
+        return (
+          <ExtensionRow
+            item={ext}
+            index={index}
+            disabled={!disabledExtensions.includes(ext.id)}/>
+        );
+      }) : <div>Loading...</div>}
+    </div>
   </div>;
 }
 
-export function ExtensionRow({ items, disabledExtensions, index, style }: RowComponentProps<ExtensionRowProps>) {
-  const { id, title, description, installed, newestVersion, iconUrl, getDownloadUrl } = items[index];
+export function ExtensionRow({ item, disabled, index }: ExtensionRowProps) {
+  const { id, title, description, installed, newestVersion, availableVersions, iconUrl, getDownloadUrl } = item;
+  const [selectedVersion, setSelectedVersion] = useState(newestVersion);
   const [busy, setBusy] = useState(false);
   const canInstall = getDownloadUrl !== undefined;
-  const enabled = !disabledExtensions.includes(id);
+  const enabled = !disabled;
   let rowClassName = 'manager-extension-row';
   if (index % 2 === 0) { rowClassName += ' manager-extension-row--even'; }
 
-  return <div className={rowClassName} style={style}>
+  const versionSelector = (
+    <Dropdown<DropdownStringRowProps>
+      text={`Ver: ${selectedVersion}`}
+      rowCount={availableVersions.length}
+      rowProps={{
+        items: availableVersions,
+        onSelect: (index) => setSelectedVersion(availableVersions[index])
+      }}
+      rowRenderer={DropdownStringRow}
+    />
+  );
+
+  return <div className={rowClassName}>
     <div className='manager-extension-row-icon'>
       { iconUrl && (
         <img src={iconUrl}/>
@@ -110,16 +121,19 @@ export function ExtensionRow({ items, disabledExtensions, index, style }: RowCom
               }}/>
             )}
             { 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));
-              }}/>
+              <>
+                <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}
+              </>
             )}
           </>
         ) : <div>Busy...</div> }

extensions/core-manager/src/extensionLoader.ts

@@ -6,6 +6,7 @@ export type ManagerExtensionInfo = {
   description: string;
   iconUrl?: string;
   newestVersion: string;
+  availableVersions: string[];
   getDownloadUrl?: (version: string) => string,
   installed: boolean;
 }
@@ -25,6 +26,7 @@ export async function loadExtIndexUrl(url: string): Promise<ManagerExtensionInfo
     getDownloadUrl: (ext.repository && ext.artifactName) ? (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
   }));
 }
@@ -36,34 +38,39 @@ export async function loadExtRepoRaw(url: string): Promise<ManagerExtensionInfo[
       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,
     },
   ];

src/renderer/components/Dropdown.tsx

@@ -1,5 +1,5 @@
-import { DropdownFrameProps, DropdownProps, DropdownRowProps } from 'flashpoint-launcher-renderer';
-import React, { Activity, useEffect, useMemo, useRef, useState } from 'react';
+import { DropdownCheckboxRowProps, DropdownFrameProps, DropdownProps, DropdownRowProps, DropdownStringRowProps } from 'flashpoint-launcher-renderer';
+import { Activity, useEffect, useMemo, useRef, useState } from 'react';
 
 // A text element, with a drop-down element that can be shown/hidden.
 export function DropdownFrame({ children, form, text, className, headerClassName }: DropdownFrameProps) {
@@ -88,7 +88,7 @@ export function Dropdown<T>({ rowCount, rowRenderer: RowRenderer, rowProps, form
     const rows = [];
     for (let i = 0; i < rowCount; i++) {
       rows.push(
-        <RowRenderer key={i} index={i} {...rowProps} />
+        <RowRenderer key={i} index={i} closeDropdown={() => setExpanded(false)} {...rowProps} />
       );
     }
     return rows;
@@ -119,13 +119,6 @@ export function Dropdown<T>({ rowCount, rowRenderer: RowRenderer, rowProps, form
   );
 }
 
-export type DropdownCheckboxRowProps<T> = {
-  labels: T[],
-  labelRenderer?: (props: { label: T, index: number }) => React.JSX.Element;
-  onToggle: (index: number) => void;
-  isChecked: (index: number) => boolean;
-}
-
 export function DropdownCheckboxRow<T>({
   labels, labelRenderer: LabelRenderer, onToggle, isChecked, index
 }: DropdownRowProps<DropdownCheckboxRowProps<T>>) {
@@ -152,3 +145,26 @@ export function DropdownCheckboxRow<T>({
     </label>
   );
 }
+
+export function DropdownStringRow({
+  items, onSelect, index, closeDropdown
+}: DropdownRowProps<DropdownStringRowProps>) {
+  const label = items[index];
+
+  return (
+    <label
+      key={index}
+      className='log-page__dropdown-item'
+      onClick={() => {
+        onSelect(index);
+        closeDropdown();
+      }}>
+      <div className='simple-center'>
+        <div
+          className='simple-center__vertical-inner log-page__dropdown-item-text'>
+          {label}
+        </div>
+      </div>
+    </label>
+  );
+}

src/renderer/components/app.tsx

@@ -37,7 +37,7 @@ import { BrowsePageDisplayGrid, BrowsePageDisplayList } from './BrowsePageDispla
 import { CheckBox } from './CheckBox';
 import { Dialog } from './Dialog';
 import { GameComponentDropdownSelectField, GameComponentInputField } from './DisplayComponent';
-import { Dropdown, DropdownFrame } from './Dropdown';
+import { Dropdown, DropdownCheckboxRow, DropdownFrame, DropdownStringRow } from './Dropdown';
 import { DynamicComponent } from './DynamicComponent';
 import { DynamicComponentProvider, RemoteModule } from './DynamicComponentProvider';
 import { DynamicThemeProvider } from './DynamicThemeProvider';
@@ -450,6 +450,8 @@ function addExtIntercepts() {
     CheckBox,
     Dropdown,
     DropdownFrame,
+    DropdownCheckboxRow,
+    DropdownStringRow,
   } satisfies typeof import('flashpoint-launcher-renderer-ext/components');
 
   (window as any)['flashpoint-launcher-renderer-ext/hooks'] = {

src/renderer/components/pages/LogsPage.tsx

@@ -5,8 +5,9 @@ import { clearLogs } from '@renderer/store/logs/slice';
 import { updatePreferences } from '@renderer/store/preferences/slice';
 import { BackIn } from '@shared/back/types';
 import { LogLevel } from '@shared/Log/interface';
+import { DropdownCheckboxRowProps } from 'flashpoint-launcher-renderer';
 import { useState } from 'react';
-import { Dropdown, DropdownCheckboxRow, DropdownCheckboxRowProps } from '../Dropdown';
+import { Dropdown, DropdownCheckboxRow } from '../Dropdown';
 import { LogBox } from '../LogBox';
 
 export type LogsPageProps = any;

static/window/styles/core.css

@@ -196,8 +196,8 @@ body {
 .simple-dropdown__select-icon {
   width: 1.25em;
   align-self: center;
-  flex: 0 0 auto;
-  margin-top: -0.125em;
+  flex-grow: 0;
+  text-align-last: center;
 }
 .simple-dropdown__select-icon:before {
   content: "▾";

typings/flashpoint-launcher.d.ts

@@ -3396,6 +3396,7 @@ declare module 'flashpoint-launcher-renderer' {
 
   type DropdownRowProps<T> = T & {
     index: number;
+    closeDropdown: () => void;
   }
 
   type DropdownCommonProps = {
@@ -3409,7 +3410,7 @@ declare module 'flashpoint-launcher-renderer' {
     form?: boolean;
   }
 
-  type DropdownFrameProps = DropdownCommonProps &{
+  type DropdownFrameProps = DropdownCommonProps & {
     children: React.JSX.Element;
   }
 
@@ -3422,6 +3423,18 @@ declare module 'flashpoint-launcher-renderer' {
     rowRenderer: (props: DropdownRowProps<T>) => React.JSX.Element;
   };
 
+  type DropdownCheckboxRowProps<T> = {
+    labels: T[],
+    labelRenderer?: (props: { label: T, index: number }) => React.JSX.Element;
+    onToggle: (index: number) => void;
+    isChecked: (index: number) => boolean;
+  }
+
+  type DropdownStringRowProps = {
+    items: string[],
+    onSelect: (index: number) => void;
+  }
+
   declare global {
     interface Window {
       log: LogFuncs;
@@ -3459,8 +3472,10 @@ declare module 'flashpoint-launcher-renderer-ext/components' {
     BrowsePageDisplayGridProps,
     BrowsePageDisplayListProps,
     CheckBoxProps,
+    DropdownCheckboxRowProps,
     DropdownFrameProps,
     DropdownProps,
+    DropdownStringRowProps,
     GameComponentDropdownSelectFieldProps,
     GameComponentInputFieldProps,
     HomePageBoxProps,
@@ -3470,7 +3485,7 @@ declare module 'flashpoint-launcher-renderer-ext/components' {
     SimpleButtonProps,
     SizeProviderProps,
     SortableColumnProps,
-    StateWrapperProps,
+    StateWrapperProps
   } from 'flashpoint-launcher-renderer';
   import { ComponentType } from 'react';
 
@@ -3490,8 +3505,10 @@ declare module 'flashpoint-launcher-renderer-ext/components' {
   const StateWrapper: ComponentType<StateWrapperProps>;
   const SimpleButton: ComponentType<SimpleButtonProps>;
   const CheckBox: ComponentType<CheckBoxProps>;
-  const Dropdown: ComponentType<DropdownProps>;
-  const DropdownFrame: ComponentType<DropdownFrameProps>;
+  const Dropdown: <T>(props: DropdownProps<T>) => React.ReactElement;
+  const DropdownFrame: <T>(props: DropdownFrameProps<T>) => React.ReactElement;
+  const DropdownCheckboxRow: <T>(props: DropdownRowProps<DropdownCheckboxRowProps<T>>) => React.ReactElement;
+  const DropdownStringRow: (props: DropdownRowProps<DropdownStringRowProps>) => React.ReactElement;
 }
 
 declare module 'flashpoint-launcher-renderer-ext/hooks' {