Merge pull request #1159 from OskarDamkjaer/frame_header

Frame header

Author: OskarDamkjaer

.eslintrc.json

@@ -47,7 +47,9 @@
         "prettier/@typescript-eslint"
       ],
       "plugins": ["@typescript-eslint/eslint-plugin"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": "off"
+      }
     }
   ]
 }

e2e_tests/integration/0.index.spec.js

@@ -25,7 +25,7 @@ import { isAura, isEnterpriseEdition } from '../support/utils'
 const Editor = '.ReactCodeMirror textarea'
 const Carousel = '[data-testid="carousel"]'
 const SubmitQueryButton = '[data-testid="editorPlay"]'
-const ClearEditorButton = '[data-testid="editorClear"]'
+const ClearEditorButton = '[data-testid="editor-discard"]'
 
 describe('Neo4j Browser', () => {
   before(function() {

e2e_tests/integration/editor.spec.js

@@ -19,6 +19,9 @@
  */
 
 /* global Cypress, cy, before */
+const fullscreenButton = '[data-testid="editor-fullscreen"]'
+const cardSizeButton = '[data-testid="editor-cardSize"]'
+const discardButton = '[data-testid="editor-discard"]'
 
 describe('editor', () => {
   before(function() {
@@ -50,4 +53,29 @@ describe('editor', () => {
     cy.get('.CodeMirror-scroll').type(':history{control}{enter}')
     cy.get('.CodeMirror-linenumber').should('contain', '$')
   })
+
+  it('supports changing ui size from controls', () => {
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+
+    // Toggle card view and back
+    cy.get(cardSizeButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get(cardSizeButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+
+    // toggle full screen and nback
+    cy.get(fullscreenButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get(fullscreenButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+
+    // discard resets size and clears editor
+    cy.get(cardSizeButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get('body').type('/test')
+    cy.get('.CodeMirror-line').contains('test')
+    cy.get(discardButton).click()
+    cy.get('.CodeMirror-linenumber').should('contain', '$')
+    cy.get('.CodeMirror-line').should('not.contain.text', 'test')
+  })
 })

e2e_tests/integration/play-command.spec.js

@@ -109,7 +109,7 @@ describe('Play command', () => {
     nextSlideBtn().click()
 
     // Click link to new guide
-    cy.contains('Procedures').click()
+    cy.contains('Procedures').trigger('click')
 
     // Assert
     cy.getFrames()

e2e_tests/support/commands.js

@@ -1,7 +1,7 @@
 import { executeCommand } from '../../src/shared/modules/commands/commandsDuck'
 
 const SubmitQueryButton = '[data-testid="editorPlay"]'
-const ClearEditorButton = '[data-testid="editorClear"]'
+const ClearEditorButton = '[data-testid="editor-discard"]'
 const Editor = '.ReactCodeMirror textarea'
 const VisibleEditor = '[data-testid="editor-wrapper"]'
 

package.json

@@ -90,7 +90,7 @@
     "copy-webpack-plugin": "^5.1.1",
     "cross-env": "^6.0.3",
     "css-loader": "^1.0.0",
-    "cypress": "4.11.0",
+    "cypress": "4.12.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.18.2",

src/browser/components/buttons/index.jsx

@@ -33,11 +33,16 @@ export const CloseButton = props => {
 }
 
 export const EditorButton = props => {
-  const { icon, title, color, ...rest } = props
+  const { icon, title, color, width, ...rest } = props
   const overrideColor = { ...(color ? { color } : {}) }
   return (
-    <BaseButton title={title} style={overrideColor}>
-      <SVGInline svg={icon} accessibilityLabel={title} {...rest} width="24px" />
+    <BaseButton title={title} style={overrideColor} width={width}>
+      <SVGInline
+        svg={icon}
+        accessibilityLabel={title}
+        {...rest}
+        width={`${width}px`}
+      />
     </BaseButton>
   )
 }
@@ -53,8 +58,8 @@ const BaseButton = styled.span`
   color: ${props => props.theme.secondaryButtonText};
   background-color: ${props => props.theme.secondaryButtonBackground};
   border-radius: 50%;
-  width: 28px;
-  height: 28px;
+  width: ${props => props.width + 10}px;
+  height: ${props => props.width + 10}px;
   font-size: 28px;
   line-height: 28px;
   text-decoration: none;

src/browser/custom.d.ts

@@ -2,3 +2,37 @@ declare module '*.svg' {
   const content: string
   export default content
 }
+
+declare module 'react-suber' {
+  interface BusProps {
+    bus: Bus
+  }
+  const withBus: (comp: any) => React.ComponentType
+  const BusProvider: React.ComponentType
+  export { withBus, BusProvider, BusProps }
+}
+
+declare module 'suber' {
+  type UnsubscribeFn = () => void
+  type FilterFn = (data: any) => boolean
+  type MessageHandler = (message: any) => void
+
+  interface Bus {
+    take: (
+      channel: string,
+      fn: MessageHandler,
+      filterFn?: FilterFn
+    ) => UnsubscribeFn
+    one: (
+      channel: string,
+      fn: MessageHandler,
+      filterFn?: FilterFn
+    ) => UnsubscribeFn
+    send: (channel: string, message: any, source?: string) => void
+    self: (channel: string, message: any, fn: MessageHandler) => void
+    reset: () => void
+  }
+
+  const createBus: () => Bus
+  export { Bus, createBus }
+}

src/browser/modules/Editor/ActionButtons.tsx

@@ -23,6 +23,7 @@ import { ActionButtonSection } from './styled'
 import { EditorButton } from 'browser-components/buttons'
 interface ActionButtonProps {
   buttons: ActionButton[]
+  width?: number
 }
 
 interface ActionButton {
@@ -33,8 +34,8 @@ interface ActionButton {
   iconColor?: string
 }
 
-const ActionButtons: React.FC<ActionButtonProps> = ({ buttons }) => (
-  <ActionButtonSection containerWidth={buttons.length * 33}>
+const ActionButtons = ({ buttons, width = 24 }: ActionButtonProps) => (
+  <ActionButtonSection>
     {buttons.map((btn: ActionButton) => (
       <EditorButton
         data-testid={`editor${btn.title}`}
@@ -44,6 +45,7 @@ const ActionButtons: React.FC<ActionButtonProps> = ({ buttons }) => (
         icon={btn.icon}
         key={`editor${btn.title}`}
         color={btn.iconColor}
+        width={width}
       />
     ))}
   </ActionButtonSection>

src/browser/modules/Editor/Editor.jsx

@@ -44,7 +44,6 @@ import {
 } from 'shared/modules/settings/settingsDuck'
 import { add } from 'shared/modules/stream/streamDuck'
 import { Bar, ActionButtonSection, EditorWrapper, Header } from './styled'
-import { EditorButton, EditModeEditorButton } from 'browser-components/buttons'
 import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
 import { deepEquals, shallowEquals } from 'services/utils'
 import * as viewTypes from 'shared/modules/stream/frameViewTypes'
@@ -80,7 +79,6 @@ export class Editor extends Component {
       buffer: '',
       mode: 'cypher',
       notifications: [],
-      expanded: false,
       lastPosition: { line: 0, column: 0 },
       contentId: null,
       editorHeight: 0
@@ -95,17 +93,16 @@ export class Editor extends Component {
         this.setEditorValue(msg.message)
       })
       this.props.bus.take(FOCUS, this.focusEditor.bind(this))
-      this.props.bus.take(EXPAND, this.expandEditorToggle.bind(this))
     }
   }
 
   shouldComponentUpdate(nextProps, nextState) {
     return !(
-      nextState.expanded === this.state.expanded &&
       nextState.contentId === this.state.contentId &&
       nextState.editorHeight === this.state.editorHeight &&
       shallowEquals(nextState.notifications, this.state.notifications) &&
       deepEquals(nextProps.schema, this.props.schema) &&
+      nextProps.editorSize === this.props.editorSize &&
       nextProps.useDb === this.props.useDb &&
       nextProps.enableMultiStatementMode === this.props.enableMultiStatementMode
     )
@@ -116,17 +113,13 @@ export class Editor extends Component {
     this.codeMirror.setCursor(this.codeMirror.lineCount(), 0)
   }
 
-  expandEditorToggle() {
-    this.setState({ expanded: !this.state.expanded })
-  }
-
   clearEditor = () => {
     this.setEditorValue('')
     this.setContentId(null)
   }
 
   handleEnter(cm) {
-    const multiline = cm.lineCount() !== 1 || this.state.expanded
+    const multiline = this.props.editorSize !== 'LINE'
     if (multiline) {
       this.newlineAndIndent(cm)
     } else {
@@ -152,9 +145,9 @@ export class Editor extends Component {
       this.setState({
         notifications: [],
         historyIndex: -1,
-        buffer: null,
-        expanded: false
+        buffer: null
       })
+      this.props.setSize('LINE')
     }
   }
 
@@ -255,6 +248,9 @@ export class Editor extends Component {
         console.log(e)
       }
     })
+    if (this.props.editorRef) {
+      this.props.editorRef.current = this.codeMirror
+    }
   }
 
   getEditorValue() {
@@ -400,8 +396,8 @@ export class Editor extends Component {
   }
 
   lineNumberFormatter = line => {
-    const multiLine = this.codeMirror && this.codeMirror.lineCount() > 1
-    if (this.state.expanded || multiLine) {
+    const multiline = this.props.editorSize !== 'LINE'
+    if (multiline) {
       return line
     } else {
       return `${this.props.useDb || ''}$`
@@ -417,6 +413,13 @@ export class Editor extends Component {
     }
   }
 
+  goToCard(cm) {
+    this.newlineAndIndent(cm)
+    if (this.props.editorSize === 'LINE') {
+      this.props.setSize('CARD')
+    }
+  }
+
   render(cm) {
     const options = {
       lineNumbers: true,
@@ -431,7 +434,7 @@ export class Editor extends Component {
       extraKeys: {
         'Ctrl-Space': 'autocomplete',
         Enter: this.handleEnter.bind(this),
-        'Shift-Enter': this.newlineAndIndent.bind(this),
+        'Shift-Enter': this.goToCard.bind(this),
         'Cmd-Enter': this.execCurrent.bind(this),
         'Ctrl-Enter': this.execCurrent.bind(this),
         'Cmd-Up': this.historyPrev.bind(this),
@@ -461,12 +464,6 @@ export class Editor extends Component {
 
     const editorIsEmpty = this.getEditorValue().length > 0
     const buttons = [
-      {
-        onClick: () => this.setEditorValue(''),
-        icon: eraser2,
-        title: 'Clear',
-        disabled: editorIsEmpty
-      },
       {
         onClick: this.state.contentId
           ? () =>
@@ -486,18 +483,20 @@ export class Editor extends Component {
         onClick: this.execCurrent,
         icon: controlsPlay,
         title: 'Play',
-        disabled: editorIsEmpty
+        disabled: editorIsEmpty,
+        iconColor: this.props.theme.linkHover
       }
     ]
 
-    const cardView = this.codeMirror && this.codeMirror.lineCount() !== 1
+    const isFullscreen = this.props.editorSize === 'FULLSCREEN'
+    const isCardSize = this.props.editorSize === 'CARD'
 
     return (
-      <Bar expanded={this.state.expanded} card={cardView}>
-        <Header expanded={this.state.expanded} card={cardView}>
-          <ActionButtons buttons={buttons} />
+      <Bar>
+        <Header>
+          <ActionButtons width={15} buttons={buttons} />
         </Header>
-        <EditorWrapper expanded={this.state.expanded} card={cardView}>
+        <EditorWrapper fullscreen={isFullscreen} cardSize={isCardSize}>
           <Codemirror
             ref={ref => {
               this.editor = ref