Setting new workspace name restrictions (#832)

* Preventing to create empty and existent workspaces

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Autofocusing name input

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Save workspace when hitting Enter

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Refactoring of save workspace process

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+workspaces/workspaces.tsx

@@ -12,6 +12,7 @@ import { Icon } from "../icon";
 import { Input } from "../input";
 import { cssNames, prevDefault } from "../../utils";
 import { Button } from "../button";
+import { isRequired, Validator } from "../input/input.validators";
 
 @observer
 export class Workspaces extends React.Component {
@@ -41,9 +42,9 @@ export class Workspaces extends React.Component {
 
   saveWorkspace = (id: WorkspaceId) => {
     const draft = toJS(this.editingWorkspaces.get(id));
-    if (draft) {
+    const workspace = workspaceStore.saveWorkspace(draft);
+    if (workspace) {
       this.clearEditing(id);
-      workspaceStore.saveWorkspace(draft);
     }
   }
 
@@ -90,6 +91,15 @@ export class Workspaces extends React.Component {
     })
   }
 
+  onInputKeypress = (evt: React.KeyboardEvent<any>, workspaceId: WorkspaceId) => {
+    if (evt.key == 'Enter') {
+      // Trigget input validation
+      evt.currentTarget.blur();
+      evt.currentTarget.focus();
+      this.saveWorkspace(workspaceId);
+    }
+  }
+
   render() {
     return (
       <WizardLayout className="Workspaces" infoPanel={this.renderInfo()}>
@@ -102,11 +112,15 @@ export class Workspaces extends React.Component {
             const isDefault = workspaceStore.isDefault(workspaceId);
             const isEditing = this.editingWorkspaces.has(workspaceId);
             const editingWorkspace = this.editingWorkspaces.get(workspaceId);
-            const className = cssNames("workspace flex gaps align-center", {
+            const className = cssNames("workspace flex gaps", {
               active: isActive,
               editing: isEditing,
               default: isDefault,
             });
+            const existenceValidator: Validator = {
+              message: () => `Workspace '${name}' already exists`,
+              validate: value => !workspaceStore.getByName(value.trim())
+            }
             return (
               <div key={workspaceId} className={className}>
                 {!isEditing && (
@@ -139,23 +153,27 @@ export class Workspaces extends React.Component {
                       placeholder={_i18n._(t`Name`)}
                       value={editingWorkspace.name}
                       onChange={v => editingWorkspace.name = v}
+                      onKeyPress={(e) => this.onInputKeypress(e, workspaceId)}
+                      validators={[isRequired, existenceValidator]}
+                      autoFocus
                     />
                     <Input
                       className="description"
                       placeholder={_i18n._(t`Description`)}
                       value={editingWorkspace.description}
                       onChange={v => editingWorkspace.description = v}
-                    />
-                    <Icon
-                      material="cancel"
-                      tooltip={<Trans>Cancel</Trans>}
-                      onClick={() => this.clearEditing(workspaceId)}
+                      onKeyPress={(e) => this.onInputKeypress(e, workspaceId)}
                     />
                     <Icon
                       material="save"
                       tooltip={<Trans>Save</Trans>}
                       onClick={() => this.saveWorkspace(workspaceId)}
                     />
+                    <Icon
+                      material="cancel"
+                      tooltip={<Trans>Cancel</Trans>}
+                      onClick={() => this.clearEditing(workspaceId)}
+                    />
                   </Fragment>
                 )}
               </div>