init

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

Author: Akos Kitta

arduino-ide-extension/package.json

@@ -58,7 +58,6 @@
     "@types/p-queue": "^2.3.1",
     "@types/ps-tree": "^1.1.0",
     "@types/react-tabs": "^2.3.2",
-    "@types/react-virtualized": "^9.21.21",
     "@types/temp": "^0.8.34",
     "@types/which": "^1.3.1",
     "@vscode/debugprotocol": "^1.51.0",
@@ -95,7 +94,6 @@
     "react-perfect-scrollbar": "^1.5.8",
     "react-select": "^5.6.0",
     "react-tabs": "^3.1.2",
-    "react-virtualized": "^9.22.3",
     "react-window": "^1.8.6",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",

arduino-ide-extension/src/browser/boards/boards-auto-installer.ts

@@ -174,7 +174,7 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
     // CLI returns the packages already sorted with the deprecated ones at the end of the list
     // in order to ensure the new ones are preferred
     const candidates = packagesForBoard.filter(
-      ({ installable, installedVersion }) => installable && !installedVersion
+      ({ installedVersion }) => !installedVersion
     );
 
     return candidates[0];

arduino-ide-extension/src/browser/style/index.css

@@ -154,10 +154,6 @@ button.theia-button.message-box-dialog-button {
   font-size: 14px;
 }
 
-.uppercase {
-  text-transform: uppercase;
-}
-
 /* High Contrast Theme rules */
 /* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
 .hc-black.hc-theia.theia-hc button.theia-button:hover, 

arduino-ide-extension/src/browser/style/list-widget.css

@@ -118,13 +118,7 @@
     background-color: var(--theia-button-foreground);
     color: var(--theia-button-background);
     content: attr(uninstall);
-}
-
-.component-list-item[min-width~="170px"] .footer {
-    padding: 5px 5px 0px 0px;
-    min-height: 35px;
-    display: flex;
-    flex-direction: row-reverse;
+    text-transform: uppercase;
 }
 
 .component-list-item .footer {
@@ -155,7 +149,7 @@
 /* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
 .hc-black.hc-theia.theia-hc .component-list-item .header .installed:hover:before {
     background-color: transparent;
-    outline: 1px dashed var(--theia-focusBorder);    
+    outline: 1px dashed var(--theia-focusBorder);
 }
 
 .hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {

arduino-ide-extension/src/browser/widgets/component-list/component-list-item.tsx

@@ -8,14 +8,9 @@ export class ComponentListItem<
 > extends React.Component<ComponentListItem.Props<T>, ComponentListItem.State> {
   constructor(props: ComponentListItem.Props<T>) {
     super(props);
-    if (props.item.installable) {
-      const version = props.item.availableVersions.filter(
-        (version) => version !== props.item.installedVersion
-      )[0];
-      this.state = {
-        selectedVersion: version,
-      };
-    }
+    this.state = {
+      selectedVersion: Installable.latest(props.item.availableVersions),
+    };
   }
 
   override render(): React.ReactNode {
@@ -33,24 +28,21 @@ export class ComponentListItem<
   }
 
   private async install(item: T): Promise<void> {
-    const toInstall = this.state.selectedVersion;
-    const version = this.props.item.availableVersions.filter(
-      (version) => version !== this.state.selectedVersion
-    )[0];
-    this.setState({
-      selectedVersion: version,
-    });
+    this.setState({ state: 'uninstalling' });
     try {
-      await this.props.install(item, toInstall);
-    } catch {
-      this.setState({
-        selectedVersion: toInstall,
-      });
+      await this.props.install(item, this.state.selectedVersion);
+    } finally {
+      this.setState({ state: undefined });
     }
   }
 
   private async uninstall(item: T): Promise<void> {
-    await this.props.uninstall(item);
+    this.setState({ state: 'uninstalling' });
+    try {
+      await this.props.uninstall(item);
+    } finally {
+      this.setState({ state: undefined });
+    }
   }
 
   private onVersionChange(version: Installable.Version): void {
@@ -68,5 +60,6 @@ export namespace ComponentListItem {
 
   export interface State {
     selectedVersion?: Installable.Version;
+    state?: 'installing' | 'uninstalling' | undefined;
   }
 }

arduino-ide-extension/src/browser/widgets/component-list/component-list.tsx

@@ -1,144 +1,29 @@
-import 'react-virtualized/styles.css';
 import * as React from '@theia/core/shared/react';
-import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
-import {
-  CellMeasurer,
-  CellMeasurerCache,
-} from 'react-virtualized/dist/commonjs/CellMeasurer';
-import type {
-  ListRowProps,
-  ListRowRenderer,
-} from 'react-virtualized/dist/commonjs/List';
-import List from 'react-virtualized/dist/commonjs/List';
+import { ItemContent, Virtuoso } from '@theia/core/shared/react-virtuoso';
 import { ArduinoComponent } from '../../../common/protocol/arduino-component';
 import { Installable } from '../../../common/protocol/installable';
 import { ComponentListItem } from './component-list-item';
 import { ListItemRenderer } from './list-item-renderer';
 
-function sameAs<T>(
-  left: T[],
-  right: T[],
-  ...compareProps: (keyof T)[]
-): boolean {
-  if (left === right) {
-    return true;
-  }
-  const leftLength = left.length;
-  if (leftLength !== right.length) {
-    return false;
-  }
-  for (let i = 0; i < leftLength; i++) {
-    for (const prop of compareProps) {
-      const leftValue = left[i][prop];
-      const rightValue = right[i][prop];
-      if (leftValue !== rightValue) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
-
 export class ComponentList<T extends ArduinoComponent> extends React.Component<
   ComponentList.Props<T>
 > {
-  private readonly cache: CellMeasurerCache;
-  private resizeAllFlag: boolean;
-  private list: List | undefined;
-  private mostRecentWidth: number | undefined;
-
-  constructor(props: ComponentList.Props<T>) {
-    super(props);
-    this.cache = new CellMeasurerCache({
-      defaultHeight: 140,
-      fixedWidth: true,
-    });
-  }
-
   override render(): React.ReactNode {
-    return (
-      <AutoSizer>
-        {({ width, height }) => {
-          if (this.mostRecentWidth && this.mostRecentWidth !== width) {
-            this.resizeAllFlag = true;
-            setTimeout(() => this.clearAll(), 0);
-          }
-          this.mostRecentWidth = width;
-          return (
-            <List
-              className={'items-container'}
-              rowRenderer={this.createItem}
-              height={height}
-              width={width}
-              rowCount={this.props.items.length}
-              rowHeight={this.cache.rowHeight}
-              deferredMeasurementCache={this.cache}
-              ref={this.setListRef}
-              estimatedRowSize={140}
-              // If default value, then `react-virtualized` will optimize and list item will not receive a `:hover` event.
-              // Hence, install and version `<select>` won't be visible even if the mouse cursor is over the `<div>`.
-              // See https://github.com/bvaughn/react-virtualized/blob/005be24a608add0344284053dae7633be86053b2/source/Grid/Grid.js#L38-L42
-              scrollingResetTimeInterval={0}
-            />
-          );
-        }}
-      </AutoSizer>
-    );
-  }
-
-  override componentDidUpdate(prevProps: ComponentList.Props<T>): void {
-    if (
-      this.resizeAllFlag ||
-      !sameAs(this.props.items, prevProps.items, 'name', 'installedVersion')
-    ) {
-      this.clearAll(true);
-    }
-  }
-
-  private readonly setListRef = (ref: List | null): void => {
-    this.list = ref || undefined;
-  };
-
-  private clearAll(scrollToTop = false): void {
-    this.resizeAllFlag = false;
-    this.cache.clearAll();
-    if (this.list) {
-      this.list.recomputeRowHeights();
-      if (scrollToTop) {
-        this.list.scrollToPosition(0);
-      }
-    }
+    return <Virtuoso data={this.props.items} itemContent={this.itemContent} />;
   }
 
-  private readonly createItem: ListRowRenderer = ({
-    index,
-    parent,
-    key,
-    style,
-  }: ListRowProps): React.ReactNode => {
-    const item = this.props.items[index];
+  private readonly itemContent: ItemContent<T, unknown> = (
+    index: number,
+    item: T
+  ) => {
     return (
-      <CellMeasurer
-        cache={this.cache}
-        columnIndex={0}
-        key={key}
-        rowIndex={index}
-        parent={parent}
-      >
-        {({ registerChild }) => (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          <div ref={registerChild} style={style}>
-            <ComponentListItem<T>
-              key={this.props.itemLabel(item)}
-              item={item}
-              itemRenderer={this.props.itemRenderer}
-              install={this.props.install}
-              uninstall={this.props.uninstall}
-            />
-          </div>
-        )}
-      </CellMeasurer>
+      <ComponentListItem<T>
+        key={this.props.itemLabel(item)}
+        item={item}
+        itemRenderer={this.props.itemRenderer}
+        install={this.props.install}
+        uninstall={this.props.uninstall}
+      />
     );
   };
 }

arduino-ide-extension/src/browser/widgets/component-list/item-action.ts

@@ -0,0 +1,33 @@
+import { Installable } from '../../../common/protocol';
+
+export const ItemActionLiterals = [
+  'installLatest',
+  'installSelected',
+  'update',
+  'remove',
+  'unknown',
+] as const;
+export type ItemActionType = typeof ItemActionLiterals[number];
+
+export function itemAction(params: {
+  installed?: Installable.Version | undefined;
+  available: Installable.Version[];
+  selected?: Installable.Version;
+}): ItemActionType {
+  const { installed, available } = params;
+  const latest = Installable.latest(available);
+  if (!latest || (installed && !available.includes(installed))) {
+    return 'unknown';
+  }
+  const selected = params.selected ?? latest;
+  if (installed === selected) {
+    return 'remove';
+  }
+  if (installed) {
+    return selected === latest && installed !== latest
+      ? 'update'
+      : 'installSelected';
+  } else {
+    return selected === latest ? 'installLatest' : 'installSelected';
+  }
+}