Merge pull request #130 from electron/modern-add-version-dialog

feat: Modernize 'add local build' dialog

Author: felixrieseberg

src/less/components/dialogs.less

@@ -10,10 +10,6 @@
   * {
     pointer-events: all;
   }
-
-  .generateTokenText svg {
-    margin-right: 4px;
-  }
 }
 
 .darwin {
@@ -171,31 +167,6 @@
     &:focus {
       border-color: @foreground-2;
     }
-
-    &.hasError {
-      border-color: #df3434;
-    }
-  }
-}
-
-.error-text {
-  margin: 0;
-  font-size: 14px;
-  color: #d73a49;
-}
-
-.tokenDialog {
-  .tokenSpinner {
-    position: absolute;
-    z-index: 3;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 }
 
@@ -212,14 +183,13 @@
   opacity: 0.5;
 }
 
-.add-version-dialog {
-  label {
-    white-space: normal;
-    height: unset;
+.dialog-add-version {
+  .bp3-file-input {
+    width: 100%;
   }
 
-  input[type="file"] {
-    display: none;
+  .bp3-callout {
+    margin-top: 1rem;
   }
 }
 

src/renderer/components/add-version-dialog.tsx src/renderer/components/dialog-add-version.tsx

@@ -1,3 +1,5 @@
+
+import { Button, Callout, Dialog, FileInput, InputGroup, Intent } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import * as path from 'path';
 import * as React from 'react';
@@ -6,7 +8,6 @@ import * as semver from 'semver';
 import { NpmVersion } from '../../interfaces';
 import { getElectronNameForPlatform } from '../../utils/electron-name';
 import { AppState } from '../state';
-import { Dialog } from './dialog';
 
 export interface AddVersionDialogProps {
   appState: AppState;
@@ -47,8 +48,8 @@ export class AddVersionDialog extends React.Component<AddVersionDialogProps, Add
    *
    * @param {React.ChangeEvent<HTMLInputElement>} event
    */
-  public async onChangeFile(event: React.ChangeEvent<HTMLInputElement>) {
-    const { files } = event.target;
+  public async onChangeFile(event: React.FormEvent<HTMLInputElement>) {
+    const { files } = event.target as any;
     const { binaryManager } = this.props.appState;
     const file = files && files[0] ? files[0] : undefined;
 
@@ -120,54 +121,55 @@ export class AddVersionDialog extends React.Component<AddVersionDialogProps, Add
 
     return [
       (
-        <button
-          className='button'
+        <Button
+          icon='add'
           key='submit'
           disabled={!canSubmit}
           onClick={this.onSubmit}
-        >
-          Add
-        </button>
+          text='Add'
+        />
       ), (
-        <button
-          className='cancel'
+        <Button
+          icon='cross'
           key='cancel'
           onClick={this.onClose}
-        >
-          Cancel
-        </button>
+          text='Cancel'
+        />
       )
     ];
   }
 
   public render() {
     const { isAddVersionDialogShowing } = this.props.appState;
-    const dirOptions = { webkitdirectory: 'true' };
+    const inputProps = { webkitdirectory: 'true' };
+    const { file } = this.state;
+
+    const text = file && file.path
+      ? file.path
+      : `Select the folder containing ${getElectronNameForPlatform()}...`;
 
     return (
       <Dialog
-        isShowing={isAddVersionDialogShowing}
-        isShowingBackdrop={true}
-        buttons={this.buttons}
+        isOpen={isAddVersionDialogShowing}
         onClose={this.onClose}
-        isCentered={true}
-        className='add-version-dialog'
-        key='add-version-dialog'
+        title='Add local Electron build'
+        className='dialog-add-version'
       >
-        <label
-          htmlFor='custom-electron-version'
-          className='force-button'
-        >
-          Select the folder containing {getElectronNameForPlatform()}
-        </label>
-        <input
-          type='file'
-          onChange={this.onChangeFile}
-          id='custom-electron-version'
-          name='custom-electron-version'
-          {...dirOptions}
-        />
-        {this.renderPath()}
+        <div className='bp3-dialog-body'>
+          <FileInput
+            onInputChange={this.onChangeFile}
+            id='custom-electron-version'
+            inputProps={inputProps as any}
+            text={text}
+          />
+          <br />
+          {this.renderPath()}
+        </div>
+        <div className='bp3-dialog-footer'>
+          <div className='bp3-dialog-footer-actions'>
+            {this.buttons}
+          </div>
+        </div>
       </Dialog>
     );
   }
@@ -182,16 +184,10 @@ export class AddVersionDialog extends React.Component<AddVersionDialogProps, Add
       : `We did not find a ${getElectronNameForPlatform()} in this folder...`;
 
     return (
-      <>
-        <input
-          readOnly={true}
-          value={file.path}
-        />
-        <p>
-          {info}
-        </p>
+      <Callout>
+        {info}
         {this.renderVersionInput()}
-      </>
+      </Callout>
     );
   }
 
@@ -206,8 +202,8 @@ export class AddVersionDialog extends React.Component<AddVersionDialogProps, Add
           Please specify a version, used for typings and the name.
           Must be <code>semver</code> compliant.
         </p>
-        <input
-          className={isValidVersion ? '' : 'hasError'}
+        <InputGroup
+          intent={isValidVersion ? undefined : Intent.DANGER}
           value={version}
           onChange={this.onChangeVersion}
           placeholder='4.0.0'

src/renderer/components/dialogs.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 
 import { AppState } from '../state';
-import { AddVersionDialog } from './add-version-dialog';
+import { AddVersionDialog } from './dialog-add-version';
 import { TokenDialog } from './dialog-token';
 import { WarningDialog } from './dialog-warning';
 import { Settings } from './settings';

tests/renderer/components/__snapshots__/add-version-dialog-spec.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddVersionDialog component renders 1`] = `
+<Blueprint3.Dialog
+  canOutsideClickClose={true}
+  className="dialog-add-version"
+  isOpen={true}
+  onClose={[Function]}
+  title="Add local Electron build"
+>
+  <div
+    className="bp3-dialog-body"
+  >
+    <Blueprint3.FileInput
+      id="custom-electron-version"
+      inputProps={
+        Object {
+          "webkitdirectory": "true",
+        }
+      }
+      onInputChange={[Function]}
+      text="Select the folder containing Electron.app..."
+    />
+    <br />
+  </div>
+  <div
+    className="bp3-dialog-footer"
+  >
+    <div
+      className="bp3-dialog-footer-actions"
+    >
+      <Blueprint3.Button
+        disabled={false}
+        icon="add"
+        key="submit"
+        onClick={[Function]}
+        text="Add"
+      />
+      <Blueprint3.Button
+        icon="cross"
+        key="cancel"
+        onClick={[Function]}
+        text="Cancel"
+      />
+    </div>
+  </div>
+</Blueprint3.Dialog>
+`;

tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap

@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 
-import { AddVersionDialog } from '../../../src/renderer/components/add-version-dialog';
+import { AddVersionDialog } from '../../../src/renderer/components/dialog-add-version';
 import { overridePlatform, resetPlatform } from '../../utils';
 
 describe('AddVersionDialog component', () => {