From fd46194580cf5a45a8464c16263fe56e5a23256d Mon Sep 17 00:00:00 2001
From: Gabriel Dutra <nesk.frz@gmail.com>
Date: Thu, 26 Dec 2019 12:53:33 -0300
Subject: [PATCH] Update EditInPlace to use Antd components (#4493)

---
 client/app/components/EditInPlace.jsx         | 50 +++++++++++--------
 client/app/components/groups/GroupName.jsx    |  1 -
 client/app/pages/dashboards/DashboardPage.jsx |  1 -
 client/app/pages/queries/query.html           |  4 +-
 4 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx
index 4c0727ab5d..df7ffbd938 100644
--- a/client/app/components/EditInPlace.jsx
+++ b/client/app/components/EditInPlace.jsx
@@ -1,16 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
+import cx from "classnames";
 import { react2angular } from "react2angular";
 import { trim } from "lodash";
+import Input from "antd/lib/input";
 
 export class EditInPlace extends React.Component {
   static propTypes = {
     ignoreBlanks: PropTypes.bool,
     isEditable: PropTypes.bool,
-    editor: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.string,
     onDone: PropTypes.func.isRequired,
+    multiline: PropTypes.bool,
+    editorProps: PropTypes.object,
   };
 
   static defaultProps = {
@@ -18,6 +21,8 @@ export class EditInPlace extends React.Component {
     isEditable: true,
     placeholder: "",
     value: "",
+    multiline: false,
+    editorProps: {},
   };
 
   constructor(props) {
@@ -26,12 +31,12 @@ export class EditInPlace extends React.Component {
       editing: false,
     };
     this.inputRef = React.createRef();
-    const self = this;
-    this.componentDidUpdate = (prevProps, prevState) => {
-      if (self.state.editing && !prevState.editing) {
-        self.inputRef.current.focus();
-      }
-    };
+  }
+
+  componentDidUpdate(_, prevState) {
+    if (this.state.editing && !prevState.editing) {
+      this.inputRef.current.focus();
+    }
   }
 
   startEditing = () => {
@@ -40,8 +45,8 @@ export class EditInPlace extends React.Component {
     }
   };
 
-  stopEditing = () => {
-    const newValue = trim(this.inputRef.current.value);
+  stopEditing = currentValue => {
+    const newValue = trim(currentValue);
     const ignorableBlank = this.props.ignoreBlanks && newValue === "";
     if (!ignorableBlank && newValue !== this.props.value) {
       this.props.onDone(newValue);
@@ -49,10 +54,10 @@ export class EditInPlace extends React.Component {
     this.setState({ editing: false });
   };
 
-  keyDown = event => {
+  handleKeyDown = event => {
     if (event.keyCode === 13 && !event.shiftKey) {
       event.preventDefault();
-      this.stopEditing();
+      this.stopEditing(event.target.value);
     } else if (event.keyCode === 27) {
       this.setState({ editing: false });
     }
@@ -68,18 +73,23 @@ export class EditInPlace extends React.Component {
     </span>
   );
 
-  renderEdit = () =>
-    React.createElement(this.props.editor, {
-      ref: this.inputRef,
-      className: "rd-form-control",
-      defaultValue: this.props.value,
-      onBlur: this.stopEditing,
-      onKeyDown: this.keyDown,
-    });
+  renderEdit = () => {
+    const { multiline, value, editorProps } = this.props;
+    const InputComponent = multiline ? Input.TextArea : Input;
+    return (
+      <InputComponent
+        ref={this.inputRef}
+        defaultValue={value}
+        onBlur={e => this.stopEditing(e.target.value)}
+        onKeyDown={this.handleKeyDown}
+        {...editorProps}
+      />
+    );
+  };
 
   render() {
     return (
-      <span className={"edit-in-place" + (this.state.editing ? " active" : "")}>
+      <span className={cx("edit-in-place", { active: this.state.editing }, this.props.className)}>
         {this.state.editing ? this.renderEdit() : this.renderNormal()}
       </span>
     );
diff --git a/client/app/components/groups/GroupName.jsx b/client/app/components/groups/GroupName.jsx
index 5927d08fbc..e50f129e26 100644
--- a/client/app/components/groups/GroupName.jsx
+++ b/client/app/components/groups/GroupName.jsx
@@ -22,7 +22,6 @@ export default function GroupName({ group, onChange, ...props }) {
         className="edit-in-place"
         isEditable={canEdit}
         ignoreBlanks
-        editor="input"
         onDone={name => updateGroupName(group, name, onChange)}
         value={group.name}
       />
diff --git a/client/app/pages/dashboards/DashboardPage.jsx b/client/app/pages/dashboards/DashboardPage.jsx
index 69357e5d56..9f7ff5d068 100644
--- a/client/app/pages/dashboards/DashboardPage.jsx
+++ b/client/app/pages/dashboards/DashboardPage.jsx
@@ -46,7 +46,6 @@ function DashboardPageTitle({ dashboardOptions }) {
           isEditable={editingLayout}
           onDone={name => updateDashboard({ name })}
           value={dashboard.name}
-          editor="input"
           ignoreBlanks
         />
       </h3>
diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html
index 3014f08e79..299258df8e 100644
--- a/client/app/pages/queries/query.html
+++ b/client/app/pages/queries/query.html
@@ -24,7 +24,7 @@
           <favorites-control ng-if="!query.isNew()" item="query"></favorites-control>
           <h3>
             <edit-in-place class="m-r-5" is-editable="canEdit" on-done="saveName"
-              ignore-blanks="true" value="query.name" editor="'input'"></edit-in-place>
+              ignore-blanks="true" value="query.name"></edit-in-place>
             <query-tags-control
               class="query-tags" ng-class="{'query-tags__empty': query.tags.length == 0}"
               tags="query.tags" is-draft="query.is_draft" is-archived="query.is_archived"
@@ -106,7 +106,7 @@ <h3>
       <div ng-if="!sourceMode" style="flex-grow: 1;">&nbsp;</div>
 
       <div class="query-metadata query-metadata--description" ng-if="!query.isNew()">
-        <edit-in-place is-editable="canEdit" on-done="saveDescription" editor="'textarea'" placeholder="'Add description'" ignore-blanks='false'
+        <edit-in-place is-editable="canEdit" on-done="saveDescription" multiline="true" placeholder="'Add description'" ignore-blanks='false'
           value="query.description" markdown="true">
         </edit-in-place>
       </div>