initial setup of Apollo Client, ability to get/create/update/delete P…

…roject Cypher files

build_scripts/webpack.config.js

@@ -103,6 +103,10 @@ module.exports = {
     host: '0.0.0.0',
     port: 8080,
     disableHostCheck: true,
-    hot: !helpers.isProduction
+    hot: !helpers.isProduction,
+    proxy: {
+      context: ['/graphql', '/files'],
+      target: 'http://localhost:3000'
+    }
   }
 }

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'
@@ -89,13 +91,40 @@ const url = window.location.href
 // Signal app upstart (for epics)
 store.dispatch({ type: APP_START, url, env })
 
+// @todo: will clean this Apollo stuff up in next PR
+// typePolicies allow apollo cache to use these fields as 'id'
+// for automated cache updates when updating a single existing entity
+const apolloCache = new InMemoryCache({
+  typePolicies: {
+    RelateFile: {
+      keyFields: ['name', 'directory']
+    }
+  }
+})
+
+// apollo-upload-client
+// https://www.apollographql.com/blog/file-uploads-with-apollo-server-2-0-5db2f3f60675/
+const uploadLink = createUploadLink({
+  uri: '/graphql',
+  headers: {
+    'keep-alive': 'true'
+  }
+})
+
+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/Editor/ActionButtons.tsx

@@ -19,11 +19,15 @@
  */
 
 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
 }
 
 interface ActionButton {
@@ -36,22 +40,28 @@ interface ActionButton {
 
 const ActionButtons = ({
   buttons,
-  width = 24
-}: ActionButtonProps): JSX.Element => (
-  <ActionButtonSection>
-    {buttons.map((btn: ActionButton) => (
-      <EditorButton
-        data-testid={`editor-${btn.title.split(' ')[0]}`}
-        onClick={btn.onClick}
-        disabled={btn.disabled}
-        title={btn.title}
-        icon={btn.icon}
-        key={`editor${btn.title}`}
-        color={btn.iconColor}
-        width={width}
-      />
-    ))}
-  </ActionButtonSection>
-)
+  width = 24,
+  editorValue
+}: ActionButtonProps): JSX.Element => {
+  return (
+    <>
+      <ActionButtonSection>
+        <ProjectFilesButton width={width} editorValue={editorValue} />
+        {buttons.map((btn: ActionButton) => (
+          <EditorButton
+            data-testid={`editor-${btn.title.split(' ')[0]}`}
+            onClick={btn.onClick}
+            disabled={btn.disabled}
+            title={btn.title}
+            icon={btn.icon}
+            key={`editor${btn.title}`}
+            color={btn.iconColor}
+            width={width}
+          />
+        ))}
+      </ActionButtonSection>
+    </>
+  )
+}
 
 export default ActionButtons

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,11 @@ export class Editor extends Component {
     return (
       <Bar>
         <Header>
-          <ActionButtons width={16} buttons={buttons} />
+          <ActionButtons
+            width={16}
+            buttons={buttons}
+            editorValue={() => this.getEditorValue()}
+          />
         </Header>
         <EditorWrapper fullscreen={isFullscreen} cardSize={isCardSize}>
           <Codemirror

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,
+  IProjectFile,
+  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 IActiveRelateFile = Omit<IProjectFile, 'downloadToken'>
+
 export function EditorFrame({ bus }: EditorFrameProps): JSX.Element {
   const [sizeState, setSize] = useState<EditorSize>('LINE')
+  const [
+    activeProjectFile,
+    setActiveProjectFile
+  ] = useState<IActiveRelateFile | 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
+    }
+  }, [])
+
+  useEffect(() => {
+    let isStillMounted = true
+    // clear editor if active Relate file is deleted from sidebar
+    bus &&
+      bus.take(REMOVE_PROJECT_FILE, (removedProjectFile: IActiveRelateFile) => {
+        if (isStillMounted) {
+          if (
+            activeProjectFile &&
+            removedProjectFile.directory === activeProjectFile.directory &&
+            removedProjectFile.name === activeProjectFile.name
+          ) {
+            bus.send(SET_CONTENT, { message: '' })
+          }
+        }
+      })
+
+    return () => {
+      isStillMounted = false
+    }
+  })
 
   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