fix board selection and workspace input dialogs width and height (#1406)

* fix board selection and workspace input dialogs width and height

* use same dialog for new file and rename

* fix board list getting small when filtering

* board select dialog: show variant text when no board is found

* fix addition boards url outline

Author: Alberto Iannaccone

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

@@ -34,6 +34,7 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
   ) {
     super({ ...props, maxWidth: 500 });
 
+    this.node.id = 'select-board-dialog-container';
     this.contentNode.classList.add('select-board-dialog');
     this.contentNode.appendChild(this.createDescription());
 

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

@@ -299,6 +299,18 @@ export class BoardsConfig extends React.Component<
       }
     }
 
+    const boardsList = Array.from(distinctBoards.values()).map((board) => (
+      <Item<BoardWithPackage>
+        key={toKey(board)}
+        item={board}
+        label={board.name}
+        details={board.details}
+        selected={board.selected}
+        onClick={this.selectBoard}
+        missing={board.missing}
+      />
+    ));
+
     return (
       <React.Fragment>
         <div className="search">
@@ -315,19 +327,17 @@ export class BoardsConfig extends React.Component<
           />
           <i className="fa fa-search"></i>
         </div>
-        <div className="boards list">
-          {Array.from(distinctBoards.values()).map((board) => (
-            <Item<BoardWithPackage>
-              key={toKey(board)}
-              item={board}
-              label={board.name}
-              details={board.details}
-              selected={board.selected}
-              onClick={this.selectBoard}
-              missing={board.missing}
-            />
-          ))}
-        </div>
+        {boardsList.length > 0 ? (
+          <div className="boards list">{boardsList}</div>
+        ) : (
+          <div className="no-result">
+            {nls.localize(
+              'arduino/board/noBoardsFound',
+              'No boards found for "{0}"',
+              query
+            )}
+          </div>
+        )}
       </React.Fragment>
     );
   }
@@ -342,7 +352,7 @@ export class BoardsConfig extends React.Component<
       );
     }
     return !ports.length ? (
-      <div className="loading noselect">
+      <div className="no-result">
         {nls.localize('arduino/board/noPortsDiscovered', 'No ports discovered')}
       </div>
     ) : (

arduino-ide-extension/src/browser/dialogs/settings/settings-dialog.tsx

@@ -155,7 +155,6 @@ export class AdditionalUrlsDialog extends AbstractDialog<string[]> {
 
     this.textArea = document.createElement('textarea');
     this.textArea.className = 'theia-input';
-    this.textArea.setAttribute('style', 'flex: 0;');
     this.textArea.value = urls
       .filter((url) => url.trim())
       .filter((url) => !!url)

arduino-ide-extension/src/browser/style/boards-config-dialog.css

@@ -1,18 +1,29 @@
+#select-board-dialog-container > .dialogBlock {
+  width: 640px;
+  height: 500px;
+}
+
 div#select-board-dialog {
   margin: 5px;
+  height: 100%;
 }
 
 div#select-board-dialog .selectBoardContainer {
   display: flex;
   gap: 10px;
   overflow: hidden;
   max-height: 100%;
+  height: 100%;
 }
 
 .select-board-dialog .head {
   margin: 5px;
 }
 
+.dialogContent.select-board-dialog {
+  height: 100%;
+}
+
 div.dialogContent.select-board-dialog > div.head .title {
   font-weight: 400;
   letter-spacing: 0.02em;
@@ -63,6 +74,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   display: flex;
   flex-direction: column;
   max-height: 100%;
+  height: 100%;
 }
 
 #select-board-dialog .selectBoardContainer .left.container .content {
@@ -131,6 +143,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
 #select-board-dialog .selectBoardContainer .list {
   max-height: 200px;
   overflow-y: auto;
+  flex: 1;
 }
 
 #select-board-dialog .selectBoardContainer .ports.list {
@@ -282,3 +295,11 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
     display: none;
   }
 }
+
+#select-board-dialog .no-result {
+  text-transform: uppercase;
+  height: 100%;
+  user-select: none;
+  padding: 10px 5px;
+  overflow-wrap: break-word;
+}

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

@@ -9,7 +9,8 @@
        total = padding + margin = 96px
     */
     max-width: calc(100% - 96px) !important;
-    min-width: unset;
+    
+    min-width: 424px;
     max-height: 560px;
     padding: 0 28px;
 }
@@ -85,3 +86,4 @@
         max-height: 400px;
     }
 }
+    

arduino-ide-extension/src/browser/style/settings-dialog.css

@@ -88,10 +88,12 @@
 }
 
 .additional-urls-dialog textarea {
-    width: 100%;
+    resize: none;
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent.additional-urls-dialog {
-    display: block;
+    display: flex;
     overflow: hidden;
+    padding: 0 1px;
+    margin: 0 -1px;
 }

arduino-ide-extension/src/browser/theia/workspace/workspace-commands.ts

@@ -17,7 +17,6 @@ import {
   SketchesServiceClientImpl,
 } from '../../../common/protocol/sketches-service-client-impl';
 import { SaveAsSketch } from '../../contributions/save-as-sketch';
-import { SingleTextInputDialog } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common';
 
 @injectable()
@@ -161,20 +160,26 @@ export class WorkspaceCommandContribution extends TheiaWorkspaceCommandContribut
       return;
     }
     const initialValue = uri.path.base;
-    const dialog = new SingleTextInputDialog({
-      title: nls.localize('theia/workspace/newFileName', 'New name for file'),
-      initialValue,
-      initialSelectionRange: {
-        start: 0,
-        end: uri.path.name.length,
-      },
-      validate: (name, mode) => {
-        if (initialValue === name && mode === 'preview') {
-          return false;
-        }
-        return this.validateFileName(name, parent, false);
+    const parentUri = parent.resource;
+
+    const dialog = new WorkspaceInputDialog(
+      {
+        title: nls.localize('theia/workspace/newFileName', 'New name for file'),
+        initialValue,
+        parentUri,
+        initialSelectionRange: {
+          start: 0,
+          end: uri.path.name.length,
+        },
+        validate: (name, mode) => {
+          if (initialValue === name && mode === 'preview') {
+            return false;
+          }
+          return this.validateFileName(name, parent, false);
+        },
       },
-    });
+      this.labelProvider
+    );
     const newName = await dialog.open();
     const newNameWithExt = this.maybeAppendInoExt(newName);
     if (newNameWithExt) {

arduino-ide-extension/src/browser/theia/workspace/workspace-input-dialog.ts

@@ -18,6 +18,7 @@ export class WorkspaceInputDialog extends TheiaWorkspaceInputDialog {
     protected override readonly labelProvider: LabelProvider
   ) {
     super(props, labelProvider);
+    this.node.classList.add('workspace-input-dialog');
     this.appendCloseButton(
       nls.localize('vscode/issueMainService/cancel', 'Cancel')
     );

i18n/en.json

@@ -15,6 +15,7 @@
       "getBoardInfo": "Get Board Info",
       "inSketchbook": " (in Sketchbook)",
       "installNow": "The \"{0} {1}\" core has to be installed for the currently selected \"{2}\" board. Do you want to install it now?",
+      "noBoardsFound": "No boards found for \"{0}\"",
       "noFQBN": "The FQBN is not available for the selected board \"{0}\". Do you have the corresponding core installed?",
       "noPortsDiscovered": "No ports discovered",
       "noPortsSelected": "No ports selected for board: '{0}'.",