Initial Apollo Client setup and ability to add/remove/update/get Project Files

package.json

@@ -69,8 +69,11 @@
     "@testing-library/jest-dom": "^5.3.0",
     "@testing-library/react": "^9.0.1",
     "@testing-library/react-hooks": "^2.0.1",
+    "@types/apollo-upload-client": "^14.1.0",
     "@types/jest": "^24.9.0",
+    "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@types/styled-components": "^5.1.1",
     "@types/uuid": "^8.3.0",
@@ -140,12 +143,14 @@
     "xml2js": "^0.4.19"
   },
   "dependencies": {
+    "@apollo/client": "^3.2.0",
     "@literal-jsx/parser": "^0.1.7",
     "@mdx-js/runtime": "^1.6.1",
     "@neo4j/browser-lambda-parser": "1.0.5",
     "@relate-by-ui/css": "1.0.5",
     "@relate-by-ui/relatable": "1.0.1",
-    "@relate-by-ui/saved-scripts": "^1.0.4",
+    "@relate-by-ui/saved-scripts": "^1.0.5",
+    "apollo-upload-client": "^14.1.2",
     "ascii-data-table": "^2.1.1",
     "canvg": "^1.5.3",
     "codemirror": "^5.29.0",
@@ -156,6 +161,7 @@
     "deepmerge": "^2.1.1",
     "file-saver": "^1.3.8",
     "firebase": "^7.13.1",
+    "graphql": "^15.3.0",
     "isomorphic-fetch": "^2.2.1",
     "jsonic": "^0.3.0",
     "jszip": "^3.2.2",
@@ -165,7 +171,7 @@
     "react": "^16.9.0",
     "react-dnd": "9.3.2",
     "react-dnd-html5-backend": "9.3.2",
-    "react-dom": "^16.8.1",
+    "react-dom": "^16.9.0",
     "react-redux": "^5.0.7",
     "react-spring": "^8.0.27",
     "react-suber": "1.0.4",

src/browser/AppInit.jsx

@@ -30,6 +30,8 @@ import { BusProvider } from 'react-suber'
 import App from './modules/App/App'
 import reducers from 'shared/rootReducer'
 import epics from 'shared/rootEpic'
+import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
+import { createUploadLink } from 'apollo-upload-client'
 
 import { createReduxMiddleware, getAll, applyKeys } from 'services/localstorage'
 import { APP_START } from 'shared/modules/app/appDuck'
@@ -86,16 +88,61 @@ const env = detectRuntimeEnv(window, NEO4J_CLOUD_DOMAINS)
 // URL we're on
 const url = window.location.href
 
+const searchParams = new URL(url).searchParams
+
+// Desktop/Relate params
+const relateUrl = searchParams.get('relateUrl')
+const relateApiToken = searchParams.get('relateApiToken')
+const neo4jDesktopProjectId = searchParams.get('neo4jDesktopProjectId')
+const neo4jDesktopGraphAppId = searchParams.get('neo4jDesktopGraphAppId')
+
 // Signal app upstart (for epics)
-store.dispatch({ type: APP_START, url, env })
+store.dispatch({
+  type: APP_START,
+  url,
+  env,
+  relateUrl,
+  relateApiToken,
+  neo4jDesktopProjectId,
+  neo4jDesktopGraphAppId
+})
+
+// typePolicies allow apollo cache to use these fields as 'id'
+// for automated cache updates when updating a single existing entity
+// https://www.apollographql.com/docs/react/caching/cache-configuration/#customizing-identifier-generation-by-type
+const apolloCache = new InMemoryCache({
+  typePolicies: {
+    RelateFile: {
+      keyFields: ['name', 'directory']
+    }
+  }
+})
+
+// https://www.apollographql.com/blog/file-uploads-with-apollo-server-2-0-5db2f3f60675/
+const uploadLink = createUploadLink({
+  uri: `${relateUrl || ''}/graphql`,
+  credentials: 'same-origin',
+  headers: {
+    'keep-alive': 'true',
+    'X-API-Token': relateApiToken,
+    'X-Client-Id': neo4jDesktopGraphAppId
+  }
+})
+
+const client = new ApolloClient({
+  cache: apolloCache,
+  link: uploadLink
+})
 
 const AppInit = () => {
   return (
     <Provider store={store}>
       <BusProvider bus={bus}>
         <>
           <GlobalStyle />
-          <App />
+          <ApolloProvider client={client}>
+            <App />
+          </ApolloProvider>
         </>
       </BusProvider>
     </Provider>

src/browser/custom.d.ts

@@ -7,7 +7,9 @@ declare module 'react-suber' {
   interface BusProps {
     bus: Bus
   }
-  const withBus: (comp: any) => React.ComponentType
+  const withBus: (
+    comp: React.ComponentType<P>
+  ) => React.ComponentType<P & BusProps>
   const BusProvider: React.ComponentType
   export { withBus, BusProvider, BusProps }
 }

src/browser/modules/App/keyboardShortcuts.ts

@@ -5,6 +5,8 @@ import { Bus } from 'suber'
 export const isMac = /Mac|iPad/.test(navigator.platform)
 const modKey = isMac ? 'metaKey' : 'ctrlKey'
 
+export const isWindows = /Win32/.test(navigator.platform)
+
 type ModifierKey = 'metaKey' | 'altKey' | 'ctrlKey'
 const printModifiers: Record<ModifierKey, string> = {
   altKey: isMac ? '⌥' : 'alt',

src/browser/modules/Editor/ActionButtons.tsx

@@ -19,11 +19,16 @@
  */
 
 import React from 'react'
+
 import { ActionButtonSection } from './styled'
 import { EditorButton } from 'browser-components/buttons'
+import ProjectFilesButton from './ProjectFilesButton'
+
 interface ActionButtonProps {
   buttons: ActionButton[]
   width?: number
+  editorValue: () => string
+  isRelateAvailable: boolean
 }
 
 interface ActionButton {
@@ -36,9 +41,14 @@ interface ActionButton {
 
 const ActionButtons = ({
   buttons,
-  width = 24
+  width = 24,
+  editorValue,
+  isRelateAvailable
 }: ActionButtonProps): JSX.Element => (
   <ActionButtonSection>
+    {isRelateAvailable && (
+      <ProjectFilesButton width={width} editorValue={editorValue} />
+    )}
     {buttons.map((btn: ActionButton) => (
       <EditorButton
         data-testid={`editor-${btn.title.split(' ')[0]}`}

src/browser/modules/Editor/Editor.jsx

@@ -89,7 +89,9 @@ export class Editor extends Component {
         this.setEditorValue(msg.message)
       })
       this.props.bus.take(EDIT_CONTENT, msg => {
-        this.setContentId(msg.id)
+        if (!msg.isProjectFile) {
+          this.setContentId(msg.id)
+        }
         this.setEditorValue(msg.message)
       })
       this.props.bus.take(FOCUS, this.focusEditor.bind(this))
@@ -499,7 +501,12 @@ export class Editor extends Component {
     return (
       <Bar>
         <Header>
-          <ActionButtons width={16} buttons={buttons} />
+          <ActionButtons
+            width={16}
+            buttons={buttons}
+            editorValue={() => this.getEditorValue()}
+            isRelateAvailable={this.props.isRelateAvailable}
+          />
         </Header>
         <EditorWrapper fullscreen={isFullscreen} cardSize={isCardSize}>
           <Codemirror
@@ -560,7 +567,11 @@ const mapStateToProps = state => {
       ],
       procedures: state.meta.procedures.map(schemaConvert.toProcedure)
     },
-    enableMultiStatementMode: shouldEnableMultiStatementMode(state)
+    enableMultiStatementMode: shouldEnableMultiStatementMode(state),
+    isRelateAvailable:
+      state.app.relateUrl &&
+      state.app.relateApiToken &&
+      state.app.neo4jDesktopProjectId
   }
 }
 

src/browser/modules/Editor/EditorFrame.tsx

@@ -35,7 +35,12 @@ import {
   UIControls,
   AnimationContainer
 } from './styled'
-import { EXPAND, SET_CONTENT, CARDSIZE } from 'shared/modules/editor/editorDuck'
+import {
+  EXPAND,
+  SET_CONTENT,
+  CARDSIZE,
+  EDIT_CONTENT
+} from 'shared/modules/editor/editorDuck'
 import { FrameButton } from 'browser-components/buttons'
 import {
   ExpandIcon,
@@ -44,6 +49,14 @@ import {
   UpIcon,
   DownIcon
 } from 'browser-components/icons/Icons'
+import {
+  SELECT_PROJECT_FILE,
+  ProjectFile,
+  PROJECT_FILE_ERROR,
+  EDIT_PROJECT_FILE_START,
+  EDIT_PROJECT_FILE_END,
+  REMOVE_PROJECT_FILE
+} from 'browser/modules/Sidebar/project-files.constants'
 
 type EditorSize = 'CARD' | 'LINE' | 'FULLSCREEN'
 type EditorFrameProps = { bus: Bus }
@@ -52,8 +65,17 @@ type CodeEditor = {
   setValue: (newText: string) => void
 }
 
+type ActiveRelateFile = Omit<ProjectFile, 'downloadToken'>
+
 export function EditorFrame({ bus }: EditorFrameProps): JSX.Element {
   const [sizeState, setSize] = useState<EditorSize>('LINE')
+  const [
+    activeProjectFile,
+    setActiveProjectFile
+  ] = useState<ActiveRelateFile | null>(null)
+  const [activeProjectFileStatus, setActiveProjectFileStatus] = useState<
+    string | null
+  >(null)
   const isFullscreen = sizeState === 'FULLSCREEN'
   const isCardSize = sizeState === 'CARD'
   const editorRef = useRef<CodeEditor>(null)
@@ -94,6 +116,80 @@ export function EditorFrame({ bus }: EditorFrameProps): JSX.Element {
 
   useEffect(() => bus && bus.take(EXPAND, toggleFullscreen))
   useEffect(() => bus && bus.take(CARDSIZE, toggleCardView))
+  useEffect(() => {
+    let isStillMounted = true
+    // when a saved Project Script or Local Cache Script is clicked
+    // not sure at this point which it could be
+    bus &&
+      bus.take(EDIT_CONTENT, () => {
+        if (isStillMounted) {
+          setActiveProjectFile(null)
+          setActiveProjectFileStatus(null)
+        }
+      })
+    // only when a Project Script is clicked
+    bus &&
+      bus.take(SELECT_PROJECT_FILE, projectFile => {
+        if (isStillMounted) {
+          setActiveProjectFile(projectFile)
+          setActiveProjectFileStatus(null)
+        }
+      })
+    // when a non-Project File action sets content in the editor
+    bus &&
+      bus.take(SET_CONTENT, () => {
+        if (isStillMounted) {
+          setActiveProjectFile(null)
+          setActiveProjectFileStatus(null)
+        }
+      })
+    // start of Project File edit (ProjectFileButton)
+    bus &&
+      bus.take(EDIT_PROJECT_FILE_START, () => {
+        if (isStillMounted) {
+          setActiveProjectFileStatus('saving edit...')
+        }
+      })
+    // successful completion of Project File edit (ProjectFilesButton)
+    bus &&
+      bus.take(EDIT_PROJECT_FILE_END, () => {
+        if (isStillMounted) {
+          setActiveProjectFileStatus(null)
+        }
+      })
+    // Edit error (ProjectFilesButton)
+    bus &&
+      bus.take(PROJECT_FILE_ERROR, () => {
+        if (isStillMounted) {
+          setActiveProjectFileStatus('error saving...')
+        }
+      })
+
+    return () => {
+      isStillMounted = false
+    }
+  }, [bus])
+
+  useEffect(() => {
+    let isStillMounted = true
+    // clear editor if active Relate file is deleted from sidebar
+    bus &&
+      bus.take(REMOVE_PROJECT_FILE, (removedProjectFile: ActiveRelateFile) => {
+        if (isStillMounted) {
+          if (
+            activeProjectFile &&
+            removedProjectFile.directory === activeProjectFile.directory &&
+            removedProjectFile.name === activeProjectFile.name
+          ) {
+            bus.send(SET_CONTENT, { message: '' })
+          }
+        }
+      })
+
+    return () => {
+      isStillMounted = false
+    }
+  }, [bus, activeProjectFile])
 
   function discardEditor() {
     sizeState !== 'LINE' && setSize('LINE')
@@ -162,6 +258,13 @@ export function EditorFrame({ bus }: EditorFrameProps): JSX.Element {
     config
   }))
 
+  const activeProjectFileName = activeProjectFile && activeProjectFile.name
+  const activeProjectFileHeading =
+    activeProjectFileName &&
+    `${activeProjectFileName}${
+      activeProjectFileStatus ? ` - ${activeProjectFileStatus}` : ''
+    }`
+
   return (
     <AnimationContainer cardSize={isCardSize}>
       <animated.div
@@ -171,7 +274,7 @@ export function EditorFrame({ bus }: EditorFrameProps): JSX.Element {
       >
         <Frame fullscreen={isFullscreen}>
           <FrameHeader>
-            <FrameHeaderText />
+            <FrameHeaderText>{activeProjectFileHeading}</FrameHeaderText>
             <UIControls>
               {buttons.map(({ onClick, icon, title, testId }) => (
                 <FrameButton