From 296352b6209af4451ecd1191568a1f9f18f47dfb Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Fri, 4 Oct 2019 13:41:05 -0400
Subject: [PATCH] remove modal for inline edit category name, and autofocus
 (#962)

* remove modal for inline edit category name, and autofocus

* remove comment, rename to categorybeingedited
---
 client/src/components/categorical/category.js | 88 ++++++++++---------
 client/src/components/categorical/value.js    |  1 +
 client/src/reducers/annotations.js            |  8 +-
 3 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/client/src/components/categorical/category.js b/client/src/components/categorical/category.js
index f79dc526..7d53cff7 100644
--- a/client/src/components/categorical/category.js
+++ b/client/src/components/categorical/category.js
@@ -237,45 +237,6 @@ class Category extends React.Component {
               <span className="bp3-control-indicator" />
               {""}
             </label>
-            {/* Dialog uses portal, can be anywhere/factored out */}
-            <Dialog
-              icon="tag"
-              title="Edit category name"
-              isOpen={
-                annotations.isEditingCategoryName &&
-                annotations.categoryEditable === metadataField
-              }
-              onClose={this.disableEditCategoryMode}
-            >
-              <div className={Classes.DIALOG_BODY}>
-                <div style={{ marginBottom: 20 }}>
-                  <p>New, unique category name:</p>
-                  <InputGroup
-                    autoFocus
-                    onChange={e =>
-                      this.setState({ newCategoryText: e.target.value })
-                    }
-                    leftIcon="tag"
-                  />
-                </div>
-              </div>
-              <div className={Classes.DIALOG_FOOTER}>
-                <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                  <Tooltip content="Close this dialog without editing the category.">
-                    <Button onClick={this.disableEditCategoryMode}>
-                      Cancel
-                    </Button>
-                  </Tooltip>
-                  <Button
-                    disabled={newCategoryText.length === 0}
-                    onClick={this.handleEditCategory}
-                    intent="primary"
-                  >
-                    Edit category name
-                  </Button>
-                </div>
-              </div>
-            </Dialog>
             <span
               data-testid={`category-expand-${metadataField}`}
               style={{
@@ -283,13 +244,58 @@ class Category extends React.Component {
                 display: "inline-block"
               }}
               onClick={() => {
-                this.setState({ isExpanded: !isExpanded });
+                const editingCategory =
+                  annotations.isEditingCategoryName &&
+                  annotations.categoryBeingEdited === metadataField;
+                if (!editingCategory) {
+                  this.setState({ isExpanded: !isExpanded });
+                }
               }}
             >
               {isUserAnno ? (
                 <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
               ) : null}
-              {metadataField}
+
+              {annotations.isEditingCategoryName &&
+              annotations.categoryBeingEdited === metadataField ? (
+                <form
+                  style={{ display: "inline-block" }}
+                  onSubmit={e => {
+                    e.preventDefault();
+                    this.handleEditCategory();
+                  }}
+                >
+                  <InputGroup
+                    style={{ position: "relative", top: -1 }}
+                    ref={input => {
+                      this.editableCategoryInput = input;
+                    }}
+                    small
+                    autoFocus
+                    onChange={e => {
+                      this.setState({
+                        newCategoryText: e.target.value
+                      });
+                    }}
+                    defaultValue={metadataField}
+                    rightElement={
+                      <Button
+                        minimal
+                        disabled={newCategoryText.length === 0}
+                        style={{ position: "relative", top: -1 }}
+                        type="button"
+                        icon="small-tick"
+                        data-testclass="submitCategoryNameEdit"
+                        data-testid="submitCategoryNameEdit"
+                        onClick={this.handleEditCategory}
+                      />
+                    }
+                  />
+                </form>
+              ) : (
+                metadataField
+              )}
+
               {isExpanded ? (
                 <FaChevronDown
                   data-testclass="category-expand-is-expanded"
diff --git a/client/src/components/categorical/value.js b/client/src/components/categorical/value.js
index 8eec1462..7973a6de 100644
--- a/client/src/components/categorical/value.js
+++ b/client/src/components/categorical/value.js
@@ -317,6 +317,7 @@ class CategoryValue extends React.Component {
                     this.editableInput = input;
                   }}
                   small
+                  autoFocus
                   onChange={e => {
                     this.setState({ editedLabelText: e.target.value });
                   }}
diff --git a/client/src/reducers/annotations.js b/client/src/reducers/annotations.js
index f1224114..09409b59 100644
--- a/client/src/reducers/annotations.js
+++ b/client/src/reducers/annotations.js
@@ -5,7 +5,7 @@ const Annotations = (
   state = {
     isEditingCategoryName: false,
     isEditingLabelName: false,
-    categoryEditable: false,
+    categoryBeingEdited: false,
     labelEditable: { category: null, label: null }
   },
   action
@@ -34,19 +34,19 @@ const Annotations = (
       return {
         ...state,
         isEditingCategoryName: true,
-        categoryEditable: action.data
+        categoryBeingEdited: action.data
       };
     case "annotation: disable category edit mode":
       return {
         ...state,
         isEditingCategoryName: false,
-        categoryEditable: null
+        categoryBeingEdited: null
       };
     case "annotation: category edited":
       return {
         ...state,
         isEditingCategoryName: true,
-        categoryEditable: null
+        categoryBeingEdited: null
       };
 
     /* LABEL */