Make tabs sortable (#848)

* Make tabs sortable

* Change tab selection from onClick to onMouseDown

* Allow scrolling of tabbar while sorting tabs

Author: rynobax

packages/graphql-playground-react/package.json

@@ -156,6 +156,7 @@
     "react-modal": "^3.1.11",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
+    "react-sortable-hoc": "^0.8.3",
     "react-transition-group": "^2.2.1",
     "react-virtualized": "^9.12.0",
     "redux": "^3.7.2",

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

@@ -45,7 +45,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
       'New Tab'
 
     return (
-      <TabItem active={active} onClick={this.handleSelectSession}>
+      <TabItem active={active} onMouseDown={this.handleSelectSession}>
         <Icons active={active}>
           {session.subscriptionActive && <RedDot />}
           <QueryTypes>
@@ -154,17 +154,15 @@ const TabItem = withProps<TabItemProps>()(styled.div)`
   height: 43px;
   padding: 10px;
   padding-top: 9px;
-  margin-left: 10px;
+  margin-right: 10px;
   font-size: 14px;
   border-radius: 2px;
   border-bottom: 2px solid ${p => p.theme.editorColours.navigationBar};
   box-sizing: border-box;
   cursor: pointer;
+  user-select: none;
   background: ${p =>
     p.active ? p.theme.editorColours.tab : p.theme.editorColours.tabInactive};
-  &:first-child {
-    margin-left: 0;
-  }
   &:hover {
     background: ${p => p.theme.editorColours.tab};
     .close {
@@ -202,6 +200,7 @@ const Icons = withProps<TabItemProps>()(styled.div)`
 
 const QueryTypes = styled.div`
   display: flex;
+  color: white;
 `
 
 const QueryType = styled.div`

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

@@ -1,14 +1,21 @@
 import * as React from 'react'
 import { styled, withProps } from '../../styled'
 import { Icon } from 'graphcool-styles'
-import Tab from './Tab'
+import Tab, { Props as TabProps } from './Tab'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import {
   getSessionsArray,
   getSelectedSessionIdFromRoot,
 } from '../../state/sessions/selectors'
 import { Session } from '../../state/sessions/reducers'
+import { reorderTabs } from '../../state/sessions/actions'
+import {
+  SortableContainer,
+  SortableElement,
+  SortStart,
+  SortEnd,
+} from 'react-sortable-hoc'
 
 export interface Props {
   onNewSession: any
@@ -18,42 +25,79 @@ export interface Props {
 export interface ReduxProps {
   sessions: Session[]
   selectedSessionId: string
+  reorderTabs: (src: number, dest: number) => void
+}
+
+interface State {
+  sorting: boolean
 }
 
-const TabBar = ({
-  sessions,
-  isApp,
-  selectedSessionId,
-  onNewSession,
-}: Props & ReduxProps) => (
-  <StyledTabBar>
-    <Tabs isApp={isApp}>
-      {sessions.map(session => (
-        <Tab
-          key={session.id}
-          session={session}
-          selectedSessionId={selectedSessionId}
-        />
-      ))}
-      <Plus onClick={onNewSession}>
-        <Icon
-          src={require('graphcool-styles/icons/stroke/add.svg')}
-          width={34}
-          height={34}
-          stroke={true}
-          strokeWidth={4}
-        />
-      </Plus>
-    </Tabs>
-  </StyledTabBar>
-)
+const SortableTab = SortableElement<TabProps>(Tab)
+
+class TabBar extends React.PureComponent<Props & ReduxProps, State> {
+  state = { sorting: false }
+
+  render() {
+    const { sessions, isApp, selectedSessionId, onNewSession } = this.props
+    const { sorting } = this.state
+    return (
+      <SortableTabBar
+        onSortStart={this.onSortStart}
+        onSortEnd={this.onSortEnd}
+        getHelperDimensions={this.getHelperDimensions}
+        axis="x"
+        lockAxis="x"
+        lockToContainerEdges={true}
+        distance={10}
+        transitionDuration={200}
+      >
+        <Tabs isApp={isApp}>
+          {sessions.map((session, ndx) => (
+            <SortableTab
+              key={session.id}
+              session={session}
+              selectedSessionId={selectedSessionId}
+              index={ndx}
+            />
+          ))}
+          <Plus onClick={onNewSession} sorting={sorting}>
+            <Icon
+              src={require('graphcool-styles/icons/stroke/add.svg')}
+              width={34}
+              height={34}
+              stroke={true}
+              strokeWidth={4}
+            />
+          </Plus>
+        </Tabs>
+      </SortableTabBar>
+    )
+  }
+
+  private onSortStart = ({ index }: SortStart) => {
+    this.setState({ sorting: true })
+  }
+
+  private onSortEnd = ({ oldIndex, newIndex }: SortEnd) => {
+    this.props.reorderTabs(oldIndex, newIndex)
+    this.setState({ sorting: false })
+  }
+
+  private getHelperDimensions = ({ node }: SortStart) => {
+    const { width, height } = node.getBoundingClientRect()
+    return { width, height }
+  }
+}
 
 const mapStateToProps = createStructuredSelector({
   sessions: getSessionsArray,
   selectedSessionId: getSelectedSessionIdFromRoot,
 })
 
-export default connect(mapStateToProps)(TabBar)
+export default connect(
+  mapStateToProps,
+  { reorderTabs },
+)(TabBar)
 
 const StyledTabBar = styled.div`
   color: white;
@@ -66,6 +110,8 @@ const StyledTabBar = styled.div`
   }
 `
 
+const SortableTabBar = SortableContainer(StyledTabBar)
+
 interface TabsProps {
   isApp?: boolean
 }
@@ -77,12 +123,16 @@ const Tabs = withProps<TabsProps>()(styled.div)`
   padding-left: ${p => (p.isApp ? '43px' : '0')};
 `
 
-const Plus = styled.div`
+interface PlusProps {
+  sorting: boolean
+}
+
+const Plus = withProps<PlusProps>()(styled.div)`
   box-sizing: border-box;
   display: flex;
+  visibility: ${p => (p.sorting ? 'hidden' : 'visible')}
   height: 43px;
   width: 43px;
-  margin-left: 10px;
   border-radius: 2px;
   border-bottom: 2px solid ${p => p.theme.editorColours.navigationBar};
   background: ${p => p.theme.editorColours.tabInactive};

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

@@ -63,6 +63,7 @@ export const {
   setCurrentQueryEndTime,
   refetchSchema,
   setScrollTop,
+  reorderTabs,
 } = createActions({
   // simple property setting
   EDIT_QUERY: query => ({ query }),
@@ -179,6 +180,7 @@ export const {
   SELECT_TAB: simpleAction('sessionId'),
   SELECT_TAB_INDEX: simpleAction('index'),
   CLOSE_TAB: simpleAction('sessionId'),
+  REORDER_TABS: (src, dest) => ({ src, dest }),
 
   // files, settings, config
   EDIT_SETTINGS: simpleAction(),

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

@@ -26,6 +26,7 @@ import { getSelectedSessionId } from './selectors'
 import { getDefaultSession, defaultQuery } from '../../constants'
 import * as cuid from 'cuid'
 import { formatError } from './fetchingSagas'
+import { arrayMove } from 'react-sortable-hoc'
 
 export interface SessionStateProps {
   sessions: OrderedMap<string, Session>
@@ -526,6 +527,21 @@ const reducer = handleActions(
         state.sessions.size - 1,
       )
     },
+    REORDER_TABS: (state, { payload: { src, dest } }) => {
+      const seq = state.sessions.toIndexedSeq()
+
+      const indexes: number[] = []
+      for (let i = 0; i < seq.size; i++) indexes.push(i)
+      const newIndexes = arrayMove(indexes, src, dest)
+
+      let newSessions = OrderedMap()
+      for (let i = 0; i < seq.size; i++) {
+        const ndx = newIndexes[i]
+        const val = seq.get(ndx)
+        newSessions = newSessions.set(val.id, val)
+      }
+      return state.set('sessions', newSessions)
+    },
     EDIT_SETTINGS: state => {
       return state.setIn(
         ['sessions', getSelectedSessionId(state), 'changed'],

packages/graphql-playground-react/yarn.lock

@@ -1089,7 +1089,7 @@ babel-register@^6.11.6, babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -7270,6 +7270,14 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^1.0.1"
 
+react-sortable-hoc@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.8.3.tgz#8537e8ab8d6bad6829885755a0f847817ed78648"
+  dependencies:
+    babel-runtime "^6.11.6"
+    invariant "^2.2.1"
+    prop-types "^15.5.7"
+
 react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"