add name editing

Author: timsuchanek

packages/graphql-playground-react/package.json

@@ -147,6 +147,7 @@
     "react-display-name": "^0.2.3",
     "react-dom": "^16.2.0",
     "react-helmet": "^5.2.0",
+    "react-input-autosize": "^2.2.1",
     "react-modal": "^3.1.11",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",

packages/graphql-playground-react/src/components/Playground/Tab.tsx

@@ -5,6 +5,8 @@ import { connect } from 'react-redux'
 import { closeTab, selectTab } from '../../state/sessions/actions'
 import * as cn from 'classnames'
 import { Session } from '../../state/sessions/reducers'
+import { editName } from '../../lib'
+import AutosizeInput from 'react-input-autosize'
 
 export interface Props {
   session: Session
@@ -15,10 +17,12 @@ export interface Props {
 export interface ReduxProps {
   selectTab: (sessionId: string) => void
   closeTab: (sessionId: string) => void
+  editName: (name: string) => void
 }
 
 export interface State {
   overCross: boolean
+  editingName: boolean
 }
 
 class Tab extends React.PureComponent<Props & ReduxProps, State> {
@@ -27,6 +31,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
 
     this.state = {
       overCross: false,
+      editingName: false,
     }
   }
 
@@ -36,6 +41,12 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
 
     const active = session.id === selectedSessionId
 
+    const name =
+      session.name ||
+      session.operationName ||
+      queryTypes.firstOperationName ||
+      'New Tab'
+
     return (
       <div
         className={cn('tab', localTheme, { active })}
@@ -59,6 +70,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
               @p: .bgDarkBlue;
             }
             border-bottom: 2px solid #172a3a;
+            font-size: 14px;
           }
           .tab:first-of-type {
             margin-left: 0;
@@ -120,12 +132,22 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
             @p: .mr10;
           }
 
-          .operation-name {
+          .tab .operation-name,
+          .tab :global(input) {
             @p: .o50;
+            background: transparent !important;
+            color: white;
+            font-size: 14px;
+            margin-left: 2px;
+            display: inline;
+            letter-spacing: 0.53px;
             &.active {
               @p: .o100;
             }
           }
+          .tab :global(input) {
+            opacity: 1 !important;
+          }
 
           .close {
             @p: .ml10, .relative;
@@ -201,12 +223,24 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
             )}
           </div>
         </div>
-        <div className={cn('operation-name', { active })}>
-          {session.name ||
-            session.operationName ||
-            queryTypes.firstOperationName ||
-            'New Tab'}
-        </div>
+        {this.state.editingName ? (
+          <AutosizeInput
+            value={session.name}
+            onChange={this.handleEditName}
+            onBlur={this.stopEditName}
+            onKeyDown={this.handleKeyDown}
+            autoFocus={true}
+            className="operation-name"
+            style={{ background: 'transparent' }}
+          />
+        ) : (
+          <div
+            className={cn('operation-name', { active })}
+            onDoubleClick={this.startEditName}
+          >
+            {name}
+          </div>
+        )}
         <div
           className={cn('close', {
             active,
@@ -234,6 +268,20 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
     )
   }
 
+  private startEditName = () => {
+    this.setState({ editingName: true })
+  }
+
+  private stopEditName = () => {
+    this.setState({ editingName: false })
+  }
+
+  private handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      this.setState({ editingName: false })
+    }
+  }
+
   private handleMouseOverCross = () => {
     this.setState({ overCross: true })
   }
@@ -250,6 +298,10 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
     e.stopPropagation()
     this.props.closeTab(this.props.session.id)
   }
+
+  private handleEditName = e => {
+    this.props.editName(e.target.value)
+  }
 }
 
-export default connect(null, { closeTab, selectTab })(Tab)
+export default connect(null, { closeTab, selectTab, editName })(Tab)

packages/graphql-playground-react/src/state/sessions/actions.ts

@@ -56,6 +56,7 @@ export const {
   setQueryTypes,
   injectHeaders,
   openConfigTab,
+  editName,
 } = createActions({
   // simple property setting
   EDIT_QUERY: simpleAction('query'),
@@ -66,6 +67,7 @@ export const {
   SET_VARIABLE_TO_TYPE: simpleAction('variableToType'),
   SET_OPERATIONS: simpleAction('operations'),
   SET_EDITOR_FLEX: simpleAction('editorFlex'),
+  EDIT_NAME: simpleAction('name'),
 
   OPEN_QUERY_VARIABLES: () => ({ queryVariablesActive: true }),
   CLOSE_QUERY_VARIABLES: () => ({ queryVariablesActive: false }),

packages/graphql-playground-react/src/state/sessions/reducers.ts

@@ -17,6 +17,7 @@ import {
   setSubscriptionActive,
   startQuery,
   setQueryTypes,
+  editName,
 } from './actions'
 import { getSelectedSessionId } from './selectors'
 import { getDefaultSession, defaultQuery } from '../../constants'
@@ -175,6 +176,7 @@ export default handleActions(
       setSubscriptionActive,
       startQuery,
       setQueryTypes,
+      editName,
     )]: (state, { payload }) => {
       const keys = Object.keys(payload)
       const keyName = keys.length === 1 ? keys[0] : keys[1]

packages/graphql-playground-react/yarn.lock

@@ -6756,6 +6756,12 @@ react-helmet@^5.2.0:
     prop-types "^15.5.4"
     react-side-effect "^1.1.0"
 
+react-input-autosize@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-modal@^1.6.5:
   version "1.9.7"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-1.9.7.tgz#07ef56790b953e3b98ef1e2989e347983c72871d"