Retain installation interface using version menu (#1471)

Author: francescospissu

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

@@ -133,7 +133,7 @@
     flex-direction: column-reverse;
 }
 
-.component-list-item:hover .footer > * {
+.component-list-item .footer > * {
     display: inline-block;
     margin: 5px 0px 0px 10px;
 }
@@ -162,4 +162,4 @@
 
 .hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {
     border: 1px solid var(--theia-button-border);
-}
+}

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

@@ -15,6 +15,7 @@ export class ComponentListItem<
       this.state = {
         selectedVersion: version,
         focus: false,
+        versionUpdate: false,
       };
     }
   }
@@ -33,7 +34,9 @@ export class ComponentListItem<
     return (
       <div
         onMouseEnter={() => this.setState({ focus: true })}
-        onMouseLeave={() => this.setState({ focus: false })}
+        onMouseLeave={() => {
+          if (!this.state.versionUpdate) this.setState({ focus: false });
+        }}
       >
         {itemRenderer.renderItem(
           Object.assign(this.state, { item }),
@@ -52,6 +55,7 @@ export class ComponentListItem<
     )[0];
     this.setState({
       selectedVersion: version,
+      versionUpdate: false,
     });
     try {
       await this.props.install(item, toInstall);
@@ -67,7 +71,7 @@ export class ComponentListItem<
   }
 
   private onVersionChange(version: Installable.Version): void {
-    this.setState({ selectedVersion: version });
+    this.setState({ selectedVersion: version, versionUpdate: true });
   }
 }
 
@@ -83,5 +87,6 @@ export namespace ComponentListItem {
   export interface State {
     selectedVersion?: Installable.Version;
     focus: boolean;
+    versionUpdate: boolean;
   }
 }