Merge pull request #1155 from OskarDamkjaer/card_view

Card view

Author: OskarDamkjaer

e2e_tests/integration/0.index.spec.js

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

e2e_tests/support/commands.js

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

src/browser/components/buttons/index.jsx

@@ -33,9 +33,10 @@ export const CloseButton = props => {
 }
 
 export const EditorButton = props => {
-  const { icon, title, ...rest } = props
+  const { icon, title, color, ...rest } = props
+  const overrideColor = { ...(color ? { color } : {}) }
   return (
-    <BaseButton title={title}>
+    <BaseButton title={title} style={overrideColor}>
       <SVGInline svg={icon} accessibilityLabel={title} {...rest} width="24px" />
     </BaseButton>
   )
@@ -63,10 +64,6 @@ const BaseButton = styled.span`
   display: inline-block;
 `
 
-export const EditModeEditorButton = styled(EditorButton)`
-  color: ${props => props.theme.editModeButtonText};
-`
-
 export const StyledNavigationButton = styled.button`
   background: transparent;
   border: 0;

src/browser/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string
+  export default content
+}

src/browser/modules/Editor/ActionButtons.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2002-2020 "Neo4j,"
+ * Neo4j Sweden AB [http://neo4j.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import { ActionButtonSection } from './styled'
+import { EditorButton } from 'browser-components/buttons'
+interface ActionButtonProps {
+  buttons: ActionButton[]
+}
+
+interface ActionButton {
+  onClick: () => void
+  disabled: boolean
+  title: string
+  icon: string
+  iconColor?: string
+}
+
+const ActionButtons: React.FC<ActionButtonProps> = ({ buttons }) => (
+  <ActionButtonSection containerWidth={buttons.length * 33}>
+    {buttons.map((btn: ActionButton) => (
+      <EditorButton
+        data-testid={`editor${btn.title}`}
+        onClick={btn.onClick}
+        disabled={btn.disabled}
+        title={btn.title}
+        icon={btn.icon}
+        key={`editor${btn.title}`}
+        color={btn.iconColor}
+      />
+    ))}
+  </ActionButtonSection>
+)
+
+export default ActionButtons

src/browser/modules/Editor/Editor.jsx

@@ -21,6 +21,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withBus } from 'react-suber'
+import { withTheme } from 'styled-components'
 import uuid from 'uuid'
 import {
   executeCommand,
@@ -40,7 +41,7 @@ import {
   shouldEditorAutocomplete,
   shouldEditorLint
 } from 'shared/modules/settings/settingsDuck'
-import { Bar, ActionButtonSection, EditorWrapper } from './styled'
+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'
@@ -55,6 +56,7 @@ import eraser2 from 'icons/eraser-2.svg'
 import pencil from 'icons/pencil.svg'
 import { NEO4J_BROWSER_USER_ACTION_QUERY } from 'services/bolt/txMetadata'
 import { getUseDb } from 'shared/modules/connections/connectionsDuck'
+import ActionButtons from './ActionButtons'
 
 const shouldCheckForHints = code =>
   code.trim().length > 0 &&
@@ -403,12 +405,45 @@ export class Editor extends Component {
 
     this.setGutterMarkers()
 
+    const editorIsEmpty = this.getEditorValue().length > 0
+    const buttons = [
+      {
+        onClick: () => this.setEditorValue(''),
+        icon: eraser2,
+        title: 'Clear',
+        disabled: editorIsEmpty
+      },
+      {
+        onClick: this.state.contentId
+          ? () =>
+              this.props.onFavoriteUpdateClick(
+                this.state.contentId,
+                this.getEditorValue()
+              )
+          : () => {
+              this.props.onFavoriteClick(this.getEditorValue())
+            },
+        icon: this.state.contentId ? pencil : ratingStar,
+        title: this.state.contentId ? 'Update favorite' : 'Favorite',
+        iconColor: this.state.contentId && this.props.theme.editModeButtonText,
+        disabled: editorIsEmpty
+      },
+      {
+        onClick: this.execCurrent,
+        icon: controlsPlay,
+        title: 'Play',
+        disabled: editorIsEmpty
+      }
+    ]
+
+    const cardView = this.codeMirror && this.codeMirror.lineCount() !== 1
+
     return (
-      <Bar expanded={this.state.expanded} minHeight={this.state.editorHeight}>
-        <EditorWrapper
-          expanded={this.state.expanded}
-          minHeight={this.state.editorHeight}
-        >
+      <Bar expanded={this.state.expanded} card={cardView}>
+        <Header expanded={this.state.expanded} card={cardView}>
+          <ActionButtons buttons={buttons} />
+        </Header>
+        <EditorWrapper expanded={this.state.expanded} card={cardView}>
           <Codemirror
             ref={ref => {
               this.editor = ref
@@ -420,47 +455,6 @@ export class Editor extends Component {
             initialPosition={this.state.lastPosition}
           />
         </EditorWrapper>
-        <ActionButtonSection>
-          <Render if={this.state.contentId}>
-            <EditModeEditorButton
-              onClick={() =>
-                this.props.onFavoriteUpdateClick(
-                  this.state.contentId,
-                  this.getEditorValue()
-                )
-              }
-              disabled={this.getEditorValue().length < 1}
-              color="#ffaf00"
-              title="Favorite"
-              icon={pencil}
-            />
-          </Render>
-          <Render if={!this.state.contentId}>
-            <EditorButton
-              data-testid="editorFavorite"
-              onClick={() => {
-                this.props.onFavoriteClick(this.getEditorValue())
-              }}
-              disabled={this.getEditorValue().length < 1}
-              title="Update favorite"
-              icon={ratingStar}
-            />
-          </Render>
-          <EditorButton
-            data-testid="clearEditorContent"
-            onClick={this.clearEditor}
-            disabled={this.getEditorValue().length < 1}
-            title="Clear"
-            icon={eraser2}
-          />
-          <EditorButton
-            data-testid="submitQuery"
-            onClick={this.execCurrent}
-            disabled={this.getEditorValue().length < 1}
-            title="Play"
-            icon={controlsPlay}
-          />
-        </ActionButtonSection>
       </Bar>
     )
   }
@@ -511,4 +505,6 @@ const mapStateToProps = state => {
   }
 }
 
-export default withBus(connect(mapStateToProps, mapDispatchToProps)(Editor))
+export default withTheme(
+  withBus(connect(mapStateToProps, mapDispatchToProps)(Editor))
+)

src/browser/modules/Editor/Editor.test.js

@@ -45,7 +45,10 @@ describe('<Editor /> ', () => {
     it('should setup on mount', async () => {
       // Given bus is provided
       const bus = createBus()
-      const { findByText } = render(<Editor {...props} bus={bus} />)
+      const mockTheme = { editModeButtonText: 'red' }
+      const { findByText } = render(
+        <Editor {...props} bus={bus} theme={mockTheme} />
+      )
 
       // The SET_CONTENT action
       // When