Fix dialogs UI scalability (#1311)

* make dialogs scroll when scaling up the UI

* add unit of measure to settings step input

* wrap settings dialog items when scaling up the UI

* fix dialogs width when scaling up the UI

* rework board config UI to make it scale up better

* refactor ide updater dialog: move buttons outside the dialog content

* refactor ide updater dialog: clean-up code and rename events

* fix board config dialog title case and and remove double ellipsis

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -453,7 +453,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
   bind(BoardsConfigDialog).toSelf().inSingletonScope();
   bind(BoardsConfigDialogProps).toConstantValue({
-    title: nls.localize('arduino/common/selectBoard', 'Select Board'),
+    title: nls.localize(
+      'arduino/board/boardConfigDialogTitle',
+      'Select Other Board and Port'
+    ),
   });
 
   // Core service

arduino-ide-extension/src/browser/boards/boards-config-dialog.ts

@@ -1,4 +1,8 @@
-import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import {
+  injectable,
+  inject,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
 import { AbstractDialog } from '../theia/dialogs/dialogs';
@@ -28,7 +32,7 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     @inject(BoardsConfigDialogProps)
     protected override readonly props: BoardsConfigDialogProps
   ) {
-    super(props);
+    super({ ...props, maxWidth: 500 });
 
     this.contentNode.classList.add('select-board-dialog');
     this.contentNode.appendChild(this.createDescription());
@@ -65,14 +69,6 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     const head = document.createElement('div');
     head.classList.add('head');
 
-    const title = document.createElement('div');
-    title.textContent = nls.localize(
-      'arduino/board/configDialogTitle',
-      'Select Other Board & Port'
-    );
-    title.classList.add('title');
-    head.appendChild(title);
-
     const text = document.createElement('div');
     text.classList.add('text');
     head.appendChild(text);

arduino-ide-extension/src/browser/boards/boards-config.tsx

@@ -258,14 +258,14 @@ export class BoardsConfig extends React.Component<
 
   override render(): React.ReactNode {
     return (
-      <div className="body">
+      <>
         {this.renderContainer('boards', this.renderBoards.bind(this))}
         {this.renderContainer(
           'ports',
           this.renderPorts.bind(this),
           this.renderPortsFooter.bind(this)
         )}
-      </div>
+      </>
     );
   }
 

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx

@@ -1,5 +1,9 @@
 import * as React from '@theia/core/shared/react';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { DialogProps } from '@theia/core/lib/browser/dialogs';
 import { AbstractDialog } from '../../theia/dialogs/dialogs';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
@@ -153,6 +157,7 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
         'Upload SSL Root Certificates'
       ),
     });
+    this.node.id = 'certificate-uploader-dialog-container';
     this.contentNode.classList.add('certificate-uploader-dialog');
     this.acceptButton = undefined;
   }

arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx

@@ -101,6 +101,7 @@ export class UploadFirmwareDialog extends AbstractDialog<void> {
     protected override readonly props: UploadFirmwareDialogProps
   ) {
     super({ title: UploadFirmware.Commands.OPEN.label || '' });
+    this.node.id = 'firmware-uploader-dialog-container';
     this.contentNode.classList.add('firmware-uploader-dialog');
     this.acceptButton = undefined;
   }

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx

@@ -1,4 +1,3 @@
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { nls } from '@theia/core/lib/common';
 import { shell } from 'electron';
 import * as React from '@theia/core/shared/react';
@@ -7,36 +6,32 @@ import ReactMarkdown from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
 
-export type IDEUpdaterComponentProps = {
-  updateInfo: UpdateInfo;
-  windowService: WindowService;
+export interface UpdateProgress {
+  progressInfo?: ProgressInfo | undefined;
   downloadFinished?: boolean;
   downloadStarted?: boolean;
-  progress?: ProgressInfo;
   error?: Error;
-  onDownload: () => void;
-  onClose: () => void;
-  onSkipVersion: () => void;
-  onCloseAndInstall: () => void;
-};
+}
+
+export interface IDEUpdaterComponentProps {
+  updateInfo: UpdateInfo;
+  updateProgress: UpdateProgress;
+}
 
 export const IDEUpdaterComponent = ({
-  updateInfo: { version, releaseNotes },
-  downloadStarted = false,
-  downloadFinished = false,
-  windowService,
-  progress,
-  error,
-  onDownload,
-  onClose,
-  onSkipVersion,
-  onCloseAndInstall,
+  updateInfo,
+  updateProgress: {
+    downloadStarted = false,
+    downloadFinished = false,
+    progressInfo,
+    error,
+  },
 }: IDEUpdaterComponentProps): React.ReactElement => {
-  const changelogDivRef = React.useRef() as React.MutableRefObject<
-    HTMLDivElement
-  >;
+  const { version, releaseNotes } = updateInfo;
+  const changelogDivRef =
+    React.useRef() as React.MutableRefObject<HTMLDivElement>;
   React.useEffect(() => {
-    if (!!releaseNotes) {
+    if (!!releaseNotes && changelogDivRef.current) {
       let changelog: string;
       if (typeof releaseNotes === 'string') changelog = releaseNotes;
       else
@@ -58,12 +53,7 @@ export const IDEUpdaterComponent = ({
         changelogDivRef.current
       );
     }
-  }, [releaseNotes]);
-  const closeButton = (
-    <button onClick={onClose} type="button" className="theia-button secondary">
-      {nls.localize('arduino/ide-updater/notNowButton', 'Not now')}
-    </button>
-  );
+  }, [updateInfo]);
 
   const DownloadCompleted: () => React.ReactElement = () => (
     <div className="ide-updater-dialog--downloaded">
@@ -80,19 +70,6 @@ export const IDEUpdaterComponent = ({
           'Close the software and install the update on your machine.'
         )}
       </div>
-      <div className="buttons-container">
-        {closeButton}
-        <button
-          onClick={onCloseAndInstall}
-          type="button"
-          className="theia-button close-and-install"
-        >
-          {nls.localize(
-            'arduino/ide-updater/closeAndInstallButton',
-            'Close and Install'
-          )}
-        </button>
-      </div>
     </div>
   );
 
@@ -104,7 +81,7 @@ export const IDEUpdaterComponent = ({
           'Downloading the latest version of the Arduino IDE.'
         )}
       </div>
-      <ProgressBar percent={progress?.percent} showPercentage />
+      <ProgressBar percent={progressInfo?.percent} showPercentage />
     </div>
   );
 
@@ -130,46 +107,14 @@ export const IDEUpdaterComponent = ({
           )}
         </div>
         {releaseNotes && (
-          <div className="dialogRow">
-            <div className="changelog-container" ref={changelogDivRef} />
+          <div className="dialogRow changelog-container">
+            <div className="changelog" ref={changelogDivRef} />
           </div>
         )}
-        <div className="buttons-container">
-          <button
-            onClick={onSkipVersion}
-            type="button"
-            className="theia-button secondary skip-version"
-          >
-            {nls.localize(
-              'arduino/ide-updater/skipVersionButton',
-              'Skip Version'
-            )}
-          </button>
-          <div className="push"></div>
-          {closeButton}
-          <button
-            onClick={onDownload}
-            type="button"
-            className="theia-button primary"
-          >
-            {nls.localize('arduino/ide-updater/downloadButton', 'Download')}
-          </button>
-        </div>
       </div>
     </div>
   );
 
-  const onGoToDownloadClick = (
-    event: React.SyntheticEvent<HTMLAnchorElement, Event>
-  ) => {
-    const { target } = event.nativeEvent;
-    if (target instanceof HTMLAnchorElement) {
-      event.nativeEvent.preventDefault();
-      windowService.openNewWindow(target.href, { external: true });
-      onClose();
-    }
-  };
-
   const GoToDownloadPage: () => React.ReactElement = () => (
     <div className="ide-updater-dialog--go-to-download-page">
       <div>
@@ -178,19 +123,6 @@ export const IDEUpdaterComponent = ({
           "An update for the Arduino IDE is available, but we're not able to download and install it automatically. Please go to the download page and download the latest version from there."
         )}
       </div>
-      <div className="buttons-container">
-        {closeButton}
-        <a
-          className="theia-button primary"
-          href="https://www.arduino.cc/en/software#experimental-software"
-          onClick={onGoToDownloadClick}
-        >
-          {nls.localize(
-            'arduino/ide-updater/goToDownloadButton',
-            'Go To Download'
-          )}
-        </a>
-      </div>
     </div>
   );