Add favorites and saved scripts from result frame (#1211)

* update ux

new icon

remove ref to card size

Update button looks

Fix bug that crashed on clicking old command

fix name with extra .cypher

Fix unit tests

New Icons

Remove old notes file

Fix e2e tests

Solve merge conflict

Fix edit frame test

* Add icon to header

* Add jas's button

improve cancel button

* Move stuff in sidebar and set new icon for help

New run icon

* Fix titlebar showing wrong name

Remove console log

* Cleanup editor

* Better error handling

* Fix syntax highlight

* Remove show sample script from sidebar

* Remove un-needed check

* Update notice and licenses

* fix bug that caused script to say it was unsaved

* Correct naming rules

* Re-add comment

* Make toggle actions type safe

* Move duplicated function

* remove un-need null-check

* Spread instead of filtering out null

* Add better typing to dispatch

* Re add title

* move helper function to correct utils file

* Fix unit test

* Fix console.error

* Update icon name

* Unit tests

* rename icon

LICENSES.txt

@@ -6212,6 +6212,32 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----
 
+The following software may be included in this product: monaco-editor. A copy of the source code may be downloaded from https://github.com/Microsoft/monaco-editor. This software contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2016 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: moo. A copy of the source code may be downloaded from https://github.com/tjvr/moo.git. This software contains the following license and notice below:
 
 BSD 3-Clause License

NOTICE.txt

@@ -181,7 +181,7 @@ Third-party licenses
 │  │  └─ URL: https://github.com/neo4j-apps/relate-by-ui
 │  ├─ @relate-by-ui/[email protected]
 │  │  └─ URL: https://github.com/neo4j-apps/relatable
-│  ├─ @relate-by-ui/[email protected].4
+│  ├─ @relate-by-ui/[email protected].5
 │  │  └─ URL: https://github.com/neo4j-apps/relate-by-ui
 │  ├─ [email protected]
 │  │  ├─ URL: https://github.com/mikeal/aws-sign
@@ -316,6 +316,9 @@ Third-party licenses
 │  ├─ @protobufjs/[email protected]
 │  │  ├─ URL: https://github.com/dcodeIO/protobuf.js.git
 │  │  └─ VendorName: Daniel Wirtz
+│  ├─ [email protected]
+│  │  ├─ URL: https://github.com/antlr/antlr4.git
+│  │  └─ VendorUrl: https://github.com/antlr/antlr4
 │  ├─ [email protected]
 │  │  └─ URL: git://github.com/joyent/node-bcrypt-pbkdf.git
 │  ├─ [email protected]
@@ -1300,6 +1303,9 @@ Third-party licenses
 │  │  ├─ URL: git://github.com/substack/minimist.git
 │  │  ├─ VendorName: James Halliday
 │  │  └─ VendorUrl: https://github.com/substack/minimist
+│  ├─ [email protected]
+│  │  ├─ URL: https://github.com/Microsoft/monaco-editor
+│  │  └─ VendorName: Microsoft Corporation
 │  ├─ [email protected]
 │  │  └─ URL: https://github.com/zeit/ms.git
 │  ├─ [email protected]

e2e_tests/integration/0.index.spec.ts

@@ -20,7 +20,7 @@
 
 import { isAura, isEnterpriseEdition } from '../support/utils'
 
-/* global Cypress, cy, expect, before */
+/* global Cypress, cy, before */
 
 const Editor = '[data-testid="activeEditor"] textarea'
 const Carousel = '[data-testid="carousel"]'
@@ -156,10 +156,15 @@ describe('Neo4j Browser', () => {
   if (!isAura()) {
     it('will clear local storage when clicking "Clear local data"', () => {
       const scriptName = 'foo'
-      cy.get(Editor).type(`//${scriptName}`, { force: true })
-      cy.get('[data-testid="editor-Favorite"]').click()
+      cy.get(Editor).type(
+        `//${scriptName}
+      RETURN 1{enter}`,
+        { force: true }
+      )
+
+      cy.get('[data-testid="frame-Favorite"]').click()
+      cy.get('[data-testid="saveScript"]').click()
 
-      cy.get('[data-testid="drawerFavorites"]').click()
       cy.get('.saved-scripts-list-item')
         .first()
         .should('be', scriptName)

e2e_tests/integration/bolt.spec.ts

@@ -66,7 +66,7 @@ describe('Bolt connections', () => {
   }
 
   if (isEnterpriseEdition()) {
-    it.only('users with no role can connect and shows up in sidebar', () => {
+    it('users with no role can connect and shows up in sidebar', () => {
       cy.executeCommand(':clear')
       const password = Cypress.config('password')
       cy.connect('neo4j', password)

package.json

@@ -76,6 +76,7 @@
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
+    "@types/react-svg-inline": "^2.1.1",
     "@types/redux-mock-store": "^1.0.2",
     "@types/styled-components": "^5.1.1",
     "@types/uuid": "^8.3.0",

src/browser/components/TabNavigation/Navigation.test.js

@@ -24,7 +24,10 @@ import { render, fireEvent } from '@testing-library/react'
 import Navigation from './Navigation'
 
 describe('<Navigation />', () => {
-  const div = testid => () => <div data-testid={testid}></div>
+  const div = testid =>
+    function Testdiv() {
+      return <div data-testid={testid}></div>
+    }
 
   const topNavItems = [
     {

src/browser/components/buttons/index.jsx

@@ -33,10 +33,15 @@ export const CloseButton = props => {
 }
 
 export const EditorButton = props => {
-  const { icon, title, color, width, ...rest } = props
+  const { icon, title, color, width, onClick, ...rest } = props
   const overrideColor = { ...(color ? { color } : {}) }
   return (
-    <BaseButton title={title} style={overrideColor} width={width}>
+    <BaseButton
+      onClick={onClick}
+      title={title}
+      style={overrideColor}
+      width={width}
+    >
       <SVGInline
         svg={icon}
         accessibilityLabel={title}

src/browser/components/icons/Icons.jsx

@@ -41,6 +41,12 @@ import arrowLeft1 from 'icons/arrow-left-1.svg'
 import arrowRight1 from 'icons/arrow-right-1.svg'
 import skipPrev from 'icons/skip-prev.svg'
 import file from 'icons/file.svg'
+import floppyDisk from 'icons/floppy-disk.svg'
+import update_file from 'icons/update_file.svg'
+import save_file from 'icons/save_file.svg'
+import update_favorite from 'icons/update_favorite.svg'
+import save_favorite from 'icons/save_favorite.svg'
+import help from 'icons/help.svg'
 
 const inactive = `
   color: #797979;
@@ -49,6 +55,10 @@ const inactive = `
 const green = `
   color: #4cd950;
 `
+const lightGreen = `
+  color: #61B88C
+`
+
 const successGreen = `
   color: #4cd950;
 `
@@ -124,7 +134,6 @@ export const FavoritesIcon = props => (
     {...props}
   />
 )
-
 export const ProjectFilesIcon = props => (
   <IconContainer
     activeStyle={white}
@@ -139,7 +148,7 @@ export const DocumentsIcon = props => (
   <IconContainer
     activeStyle={white}
     inactiveStyle={inactive}
-    icon={bookSearch}
+    icon={help}
     width={28}
     {...props}
   />
@@ -268,6 +277,13 @@ export const DownIcon = () => <IconContainer className="sl-chevron-down" />
 export const DoubleUpIcon = () => <IconContainer className="sl-double-up" />
 export const DoubleDownIcon = () => <IconContainer className="sl-double-down" />
 export const PinIcon = () => <IconContainer icon={pin} width={12} />
+export const SaveFavorite = () => (
+  <IconContainer inactiveStyle={lightBlue} icon={save_favorite} width={12} />
+)
+export const SaveFile = () => (
+  <IconContainer inactiveStyle={lightGreen} icon={save_file} width={12} />
+)
+
 export const MinusIcon = () => (
   <IconContainer
     activeStyle={blue}
@@ -305,6 +321,7 @@ export const PlayIcon = () => (
     className="fa fa-play-circle-o"
   />
 )
+
 export const PlainPlayIcon = () => (
   <IconContainer className="fa fa-play-circle" />
 )

src/browser/documentation/help/keys.jsx

@@ -22,7 +22,6 @@ import React from 'react'
 import {
   FULLSCREEN_SHORTCUT,
   FOCUS_SHORTCUT,
-  CARDSIZE_SHORTCUT,
   printShortcut,
   isMac
 } from 'browser/modules/App/keyboardShortcuts'
@@ -100,12 +99,6 @@ const content = (
             <div className="key code">{printShortcut(FULLSCREEN_SHORTCUT)}</div>
           </td>
         </tr>
-        <tr>
-          <td>Toggle cardsize editor</td>
-          <td>
-            <div className="key code">{printShortcut(CARDSIZE_SHORTCUT)}</div>
-          </td>
-        </tr>
         <tr>
           <td />
         </tr>