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

jk05 · 2020-10-05T13:03:45Z

Browser File IO Feature Branch

Displays Project Files specific UI (save button in Editor frame and Sidebar drawer) only when certain params are passed in via Desktop
Add in Apollo Client allowing getting/adding/removing/updating Project Files on the file system (via Relate)
Adding a project file will currently only be added to the root of a Project in this phase. Getting/Removing/Updating can work at any level in a project for now.

How to test this work

Desktop now has latest changes on master branch. Relate has a fix for token verification (on master) but not been released or updated in Desktop.
The method I used to test this work right now is to launch dev Browser from Desktop (enabling dev mode). Either as a graph app file url or via the dev mode url input. This will launch Browser from Desktop and allow you to get the params passed to Browser from from the dev console (new URL(location.href).search) and copy them.
The params will look something like ?relateApiToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MDIxNjk1NTcsImV4cCI6MTYwMjI1NTk1N30.ktiZGi4TXzSSOa1a1WlZD7HlFU-lyVFR3-koFF89v24&relateUrl=http%3A%2F%2F127.0.0.1%3A12111&neo4jDesktopProjectId=project-6d927250-a154-4d3e-9052-a372bd269705&neo4jDesktopGraphAppRootPath=&neo4jDesktopGraphAppId=neo4j-browser-1&neo4jDesktopApiUrl=http%3A%2F%2F127.0.0.1%3A11001&neo4jDesktopGraphAppClientId=cd50b2fd9f5a8704efdf52f7e2aff663065c32b6f77e0b7b27e7f9868da9da80&neo4jDesktopInternalAppId=0bcdeecb-c3f6-4bfb-a2f8-c5e3b5e009b0 . You should be done with Desktop at this point.
Now in order to test with latest Relate, pull latest master and run relate web (may be a port conflict if you still run Desktop, so either close or pass in a port var). Then with Browser running in your web browser, paste the params in and make sure to change relateUrl to point to :3000 (Relate). It should look something like ?relateApiToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MDIxNjk1NTcsImV4cCI6MTYwMjI1NTk1N30.ktiZGi4TXzSSOa1a1WlZD7HlFU-lyVFR3-koFF89v24&relateUrl=http%3A%2F%2F127.0.0.1%3A3000&neo4jDesktopProjectId=project-6d927250-a154-4d3e-9052-a372bd269705&neo4jDesktopGraphAppRootPath=&neo4jDesktopGraphAppId=neo4j-browser-1&neo4jDesktopApiUrl=http%3A%2F%2F127.0.0.1%3A11001&neo4jDesktopGraphAppClientId=cd50b2fd9f5a8704efdf52f7e2aff663065c32b6f77e0b7b27e7f9868da9da80&neo4jDesktopInternalAppId=0bcdeecb-c3f6-4bfb-a2f8-c5e3b5e009b0
You should now see the Project Files specific UI and graphQL calls working correctly. If you remove all the params or specifically any/all of relateApiToken, neo4jDesktopApiUrl or neo4jDesktopProjectId, then then Project Files specifics will not show at all (Apollo client should not cause any problems in this case)
Prior UI tweaks have been added in small adjustments for Project Files coming from Relate (prevent folder and file rename and folder deletion) neo4j-devtools/relate-by-ui#7 and updating a file added in updateFile method added to projects neo4j-devtools/relate#199.

Screenshots and Videos:

Video 1 : showing files being created, updated, removed and general UI

Video 2 : network error handling

Video 3 : graphQL error handling

Video 4 : edit file error status

changelog: Add support for storing scripts as project files when in a desktop environment (for desktop versions that support it)

build_scripts/webpack.config.js

src/browser/modules/Editor/ProjectFilesButton.tsx

src/browser/modules/Sidebar/ProjectFiles.tsx

…roject Cypher files

huboneo

comments from first browse. also please delete package-lock.json

src/browser/modules/Editor/ProjectFilesButton.tsx

src/browser/modules/Sidebar/project-files.utils.ts

src/browser/modules/Editor/ProjectFilesButton.tsx

src/browser/modules/Sidebar/ProjectFiles.tsx

jk05 · 2020-10-06T15:17:08Z

N.B. JS tests for 3.5 are failing for Editor.test - need to look into testing with Apollo or something quick to fix for the time being. Will have to be in another PR.

src/browser/modules/Editor/ActionButtons.tsx

src/browser/modules/Editor/EditorFrame.tsx

OskarDamkjaer · 2020-10-07T08:09:26Z

src/browser/modules/Editor/ProjectFilesButton.tsx

+  isDrawerOpen: boolean
+}
+
+type IActiveRelateFile = Omit<IProjectFile, 'downloadToken'>


We don't use the I-prefix in the rest of the project and I don't see the use of it in typescript, so I'd prefer the I-s be omitted

Ok fair enough. I like the I prefix as it makes it clear but happy to remove and rename

The I prefix is for interfaces by convention :)

Id like to keep this too. Thoughts @OskarDamkjaer ?

same time, I appreciate that the rest of Browser may not use it so you dont want to add it

Besides, IActiveRelateFile is not even an interface? I think the prefix makes sense in C# but not in typescript, at the very least let's not have a mix of both

ok, I will remove the I prefix

I agree here, if it's a type it should not have a prefix

Following up on @HerrEmil comment, we should probably change this eslint rule in relate then and update our code for consistency

Ill add a card for this

src/browser/modules/Sidebar/ProjectFiles.tsx

src/browser/modules/Sidebar/ProjectsFilesScripts.tsx

src/browser/modules/Sidebar/Sidebar.tsx

src/browser/modules/Sidebar/project-files.utils.ts

…roject Cypher files

jk05 · 2020-10-08T12:41:56Z

@huboneo @OskarDamkjaer can you guys check these latest commits:

0dbbcb8
8a5cfd8
e8f1067

These add the ability to work with params passed from Desktop and cleanups some path issues.

src/browser/modules/Editor/EditorFrame.tsx

src/browser/modules/Editor/ProjectFilesButton.tsx

src/browser/modules/Sidebar/ProjectFiles.tsx

src/browser/modules/Editor/ProjectFilesButton.tsx

src/browser/AppInit.jsx

… prop to pass Editor test

jk05 · 2020-10-09T09:56:36Z

src/browser/modules/Editor/Editor.jsx

+            width={16}
+            buttons={buttons}
+            editorValue={() => this.getEditorValue()}
+            isRelateAvailable={this.props.isRelateAvailable}


in order to get tests to pass. I will look at additional tests during code freeze.

huboneo

Minor comments, but LGTM

huboneo · 2020-10-09T11:21:11Z

src/browser/modules/Sidebar/ProjectsFilesScripts.tsx

+              relateUrl: props.relateUrl
+            })
+        )
+        const projectFiles = await Promise.all(getProjectFilePromises)


technically speaking shadowing, but wont affect logic at this point

yeah, should name it something else ideally but Ill leave it for now

huboneo · 2020-10-09T11:21:44Z

src/browser/modules/Editor/ProjectFilesButton.tsx

+
+    // when a saved Project Script or Local Cache Script is clicked
+    // not sure at this point which it could be
+    bus &&


IMO this syntax is harder to read than just having if (!bus) return above

yeah I do agree, I just kept it in line with how its done in the rest of Browser. I can change if needed.

jk05 commented Oct 5, 2020

View reviewed changes

build_scripts/webpack.config.js Outdated Show resolved Hide resolved

jk05 commented Oct 5, 2020

View reviewed changes

src/browser/modules/Editor/ProjectFilesButton.tsx Outdated Show resolved Hide resolved

jk05 commented Oct 5, 2020

View reviewed changes

src/browser/modules/Sidebar/ProjectFiles.tsx Outdated Show resolved Hide resolved

jk05 marked this pull request as ready for review October 5, 2020 13:09

jk05 requested a review from huboneo October 5, 2020 13:09

jk05 mentioned this pull request Oct 5, 2020

Browser File IO - add Apollo Client and relate-scripts component in sidebar #1201

Closed

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

b19ee00

…roject Cypher files

jk05 force-pushed the browser-file-io branch from af97ba1 to b19ee00 Compare October 5, 2020 13:24

huboneo reviewed Oct 6, 2020

View reviewed changes

huboneo self-requested a review October 6, 2020 13:46

huboneo reviewed Oct 6, 2020

View reviewed changes

src/browser/modules/Editor/ProjectFilesButton.tsx Show resolved Hide resolved

huboneo reviewed Oct 6, 2020

View reviewed changes

src/browser/modules/Sidebar/ProjectFiles.tsx Outdated Show resolved Hide resolved

jk05 force-pushed the browser-file-io branch from b19ee00 to 37ed8a0 Compare October 6, 2020 14:13

jk05 requested a review from huboneo October 6, 2020 14:15

jk05 force-pushed the browser-file-io branch 2 times, most recently from 50d13ee to ffe97dc Compare October 6, 2020 15:15

jk05 requested a review from OskarDamkjaer October 7, 2020 07:39

jk05 force-pushed the browser-file-io branch from ffe97dc to a0457a0 Compare October 7, 2020 08:29

OskarDamkjaer reviewed Oct 7, 2020

View reviewed changes

jk05 force-pushed the browser-file-io branch from a0457a0 to 8438eb4 Compare October 7, 2020 10:24

jk05 requested a review from OskarDamkjaer October 7, 2020 10:25

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

ac57288

…roject Cypher files

jk05 force-pushed the browser-file-io branch from 8438eb4 to ac57288 Compare October 7, 2020 10:59

jk05 added the DONT-MERGE label Oct 7, 2020

Jas Kuner added 3 commits October 7, 2020 17:47

Add params from Desktop

0dbbcb8

merge browser-file-io

8dd59c1

merge cleanup

8a5cfd8

jk05 force-pushed the browser-file-io branch 2 times, most recently from 526d04c to e8f1067 Compare October 8, 2020 12:08

huboneo reviewed Oct 8, 2020

View reviewed changes

src/browser/modules/Editor/EditorFrame.tsx Outdated Show resolved Hide resolved

huboneo reviewed Oct 8, 2020

View reviewed changes

src/browser/modules/Editor/ProjectFilesButton.tsx Show resolved Hide resolved

huboneo reviewed Oct 8, 2020

View reviewed changes

src/browser/modules/Sidebar/ProjectFiles.tsx Outdated Show resolved Hide resolved

OskarDamkjaer reviewed Oct 8, 2020

View reviewed changes

src/browser/modules/Editor/ProjectFilesButton.tsx Outdated Show resolved Hide resolved

OskarDamkjaer reviewed Oct 8, 2020

View reviewed changes

src/browser/AppInit.jsx Show resolved Hide resolved

jk05 force-pushed the browser-file-io branch from e8f1067 to 0a9bccd Compare October 8, 2020 15:27

jk05 requested a review from huboneo October 8, 2020 15:28

jk05 force-pushed the browser-file-io branch 2 times, most recently from 9544a5a to 20789b5 Compare October 9, 2020 08:54

rework file path for scripts, useEffect dependency arrays and pass in…

f7570c9

… prop to pass Editor test

jk05 force-pushed the browser-file-io branch from 20789b5 to f7570c9 Compare October 9, 2020 09:00

jk05 commented Oct 9, 2020

View reviewed changes

jk05 requested a review from OskarDamkjaer October 9, 2020 10:02

jk05 removed the DONT-MERGE label Oct 9, 2020

OskarDamkjaer approved these changes Oct 9, 2020

View reviewed changes

huboneo approved these changes Oct 9, 2020

View reviewed changes

jk05 merged commit 61aeb5b into neo4j:master Oct 9, 2020

jk05 deleted the browser-file-io branch October 9, 2020 13:22

oskarhane added the changelog label Oct 21, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jk05 commented Oct 5, 2020 •

edited by oskarhane

Loading

huboneo left a comment

jk05 commented Oct 6, 2020 •

edited

Loading

OskarDamkjaer Oct 7, 2020

jk05 Oct 7, 2020

huboneo Oct 7, 2020

jk05 Oct 7, 2020

jk05 Oct 7, 2020

OskarDamkjaer Oct 7, 2020

jk05 Oct 7, 2020

huboneo Oct 7, 2020

huboneo Oct 8, 2020

jk05 Oct 9, 2020

jk05 commented Oct 8, 2020

jk05 Oct 9, 2020

huboneo left a comment

huboneo Oct 9, 2020

jk05 Oct 9, 2020

huboneo Oct 9, 2020

jk05 Oct 9, 2020

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

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

Conversation

jk05 commented Oct 5, 2020 • edited by oskarhane Loading

huboneo left a comment

Choose a reason for hiding this comment

jk05 commented Oct 6, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jk05 commented Oct 8, 2020

Choose a reason for hiding this comment

huboneo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jk05 commented Oct 5, 2020 •

edited by oskarhane

Loading

jk05 commented Oct 6, 2020 •

edited

Loading