Make commands editable and re-usable #1268

OskarDamkjaer · 2021-01-21T11:07:35Z

This pull request aims to make it possible to edit and re-run frames. It's added as an experimental setting for now, but defaults to on for ease of testing.

I've annotated the source code to explain what's changed and why. Apologies for the size of the PR, I recommend setting the "side by side" diff ignoring whitespace to get a better view of the bigger changes.

Demo: https://user-images.githubusercontent.com/10564538/105364088-098cad80-5bfd-11eb-9869-d606b59699a6.mp4

Try it yourself at: http://reusable-frame.surge.sh/

build_scripts/webpack-plugins.js

package.json

src/browser/components/icons/Icons.tsx

src/browser/modules/Editor/EditorFrame.tsx

OskarDamkjaer · 2021-01-21T15:39:02Z

src/shared/modules/dbMeta/dbMetaDuck.ts

  const requestedUseDb = activeConnection?.requestedUseDb

-  const useDefaultDb = () => {
+  const switchToDefaultDb = () => {


renamed because of react hooks lint rule

OskarDamkjaer · 2021-01-21T15:39:43Z

src/shared/modules/requests/requestsDuck.ts

+export const REQUEST_SENT = 'requests/SENT'
+export const CANCEL_REQUEST = 'requests/CANCEL'
+export const REQUEST_CANCELED = 'requests/CANCELED'
+export const REQUEST_UPDATED = 'requests/UPDATED'


Typescript struggles to correctly type the actions if they´re not simple strings

OskarDamkjaer · 2021-01-21T15:40:28Z

src/shared/modules/udc/udcDuck.ts

-  getSettings,
-  REPLACE,
-  UPDATE
+  getSettings


A few unused imports

OskarDamkjaer · 2021-01-21T15:41:00Z

src/shared/services/commandInterpreterHelper.ts

-          this.code = code
-          // @ts-expect-error ts-migrate(2683) FIXME: 'this' implicitly has type 'any' because it does n... Remove this comment to see the full error message
-          this.message = message
+        class UseDbError extends Error {


Threw together an a better Error to avoid ts-errors

OskarDamkjaer · 2021-01-21T15:41:25Z

src/shared/services/commandInterpreterHelper.ts

+      if (response) {
+        if (response.then) {
+          response.then((res: any) => {
+            if (res) {


Moved the conditions in a way I found easier to read

oskarhane

Wow, I like this feature more than I thought!
The user experience is actually really good, it's no big deal to just click in a query in the stream and edit it.
Well done!

I've left some comments but the main issue is around fullscreen mode.

e2e_tests/integration/topics.spec.ts

src/browser/modules/Editor/Monaco.tsx

HerrEmil

Really cool feature :)

The gutter width does not update immediately when the useDb changes, so it's often cut off when starting to edit in a frame title bar for me

e2e_tests/integration/0.index.spec.ts

e2e_tests/support/commands.ts

e2e_tests/support/global.d.ts

e2e_tests/integration/params.spec.ts

src/browser/modules/Editor/Monaco.tsx

src/browser/modules/Stream/PlayFrame.tsx

OskarDamkjaer · 2021-01-29T12:23:41Z

I've gone through your comments, tests pass locally and the preview is updated (http://reusable-frame.surge.sh/). Awaiting more feedback/green pipe :)

HerrEmil

🎉

oskarhane

Not all frames seems to have the "exit fullscreen" button, which would be needed now that all frame can go into fullscreen.

Example:

On :play start that shows up, click the frame editor.
Press Esc to go into fullscreen on that frame
Click on an input field on the frame
Press Esc.
Nothing happens and there's no obvious way for the user how to get out of the fullscreen state (click editor + press Esc is the only way out)

OskarDamkjaer · 2021-01-29T13:25:43Z

Oh right forgot about that, I've removed the conditional render of it now! @oskarhane

oskarhane · 2021-01-29T13:33:21Z

src/browser/modules/Stream/Stream.tsx

-              const cmd = frame.cmd.replace(/^:/, '')
-              const Frame = cmd[0].toUpperCase() + cmd.slice(1) + 'Frame'
-              MyFrame = require('./Extras/index')[Frame]
-              if (!MyFrame) {
-                MyFrame = getFrame(frame.type)


This was written for us to sneak in fun frames without having to explicitly import them. I think we should keep it :)

It's always easier to take fun out than put it in, I'll keep it as is then :)

oskarhane

Executing:

RETURN 1;
RETURN "hej";

kills the stream (at least when I'm not connected to a DBMS)

oskarhane · 2021-01-29T13:34:07Z

src/shared/modules/experimentalFeatures/experimentalFeaturesDuck.ts

+  },
+  [reusableFrame]: {
+    name: reusableFrame,
+    on: true,
+    displayName: 'Enable reuseable frame',
+    tooltip: 'Edit and rerun right in a frame'


oskarhane · 2021-01-29T13:35:08Z

src/browser/modules/Stream/styled.tsx

+const rollDownAnimation = keyframes`
+  from {
+    transform: translate(0, -${dim.frameBodyHeight}px);
+    max-height: 0;
+  }
+  to {
+    transform: translateY(0);
+    max-height: 500px; /* Greater than a frame can be */
+  }
+`
+export const AnimationContainer = styled.div`
+  animation: ${rollDownAnimation} 0.4s ease-in;
+`


OskarDamkjaer · 2021-01-30T15:14:47Z

Good that you caught the multi statement issue! Should be resolved now.

oskarhane

Let's do this 🎞️

Emil Andersson and others added 30 commits January 21, 2021 11:43

clean up unused styling

308bd55

Fix compile issues

a4ba072

mellan

7e462a6

Wrestle some more types

c4cc712

Frame header ts

88841f4

Titlebar ts

d57a96b

battling with style

97fa2ba

Add monaco

c443268

add todos for where i left off

f52ae74

Merge

425eb21

start history

e0af9d9

remove unused options

00a4fa2

Solve bug where guides and help would not re-use

28785d1

Convert to function component

d1740eb

Write stream as fucntion comp

dde3667

Re-write animation to prevent extra rolling

5e89426

Repair run button

c3cc708

Remove logs and error in console

bce7218

Keep focus when swithcing framtype

a8d1dc2

Focus management work around

3d994d9

Fix animation bug

c4bcfcd

Remove todos and move deps

38bd753

Fix bug going from graph result to table result

cb5c28a

Enable multistatements to be re-runnable

d890ad7

Full screen only small frame

adbf903

Make animation more efficient and fix fullscreen issue

309a54c

Remove react-spring

4f9c41d

meln

6f5c1ce

Nice resizing

75d656f

Add ignore comment

43e072b

OskarDamkjaer commented Jan 21, 2021

View reviewed changes

Add data-test-id

f8de7a6

OskarDamkjaer requested review from HerrEmil and oskarhane January 21, 2021 15:54

oskarhane reviewed Jan 22, 2021

View reviewed changes

e2e_tests/integration/topics.spec.ts Show resolved Hide resolved

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

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

HerrEmil reviewed Jan 28, 2021

View reviewed changes

OskarDamkjaer added 2 commits January 29, 2021 09:34

Fix minor errors and allow only one fullscreen at a time

1784b82

Fix padding issue

63f9702

OskarDamkjaer force-pushed the rebased_reusable branch from 8bd4473 to 63f9702 Compare January 29, 2021 10:10

OskarDamkjaer added 4 commits January 29, 2021 11:36

Fix unit tests

1427e71

Update e2e tests

ad4055c

Fix e2e tests

e35d9b0

Remove unneeded test-id

372bcd3

OskarDamkjaer requested review from HerrEmil and oskarhane January 29, 2021 12:22

HerrEmil approved these changes Jan 29, 2021

View reviewed changes

oskarhane reviewed Jan 29, 2021

View reviewed changes

Remove conditional render of fullscreen button

7137059

oskarhane reviewed Jan 29, 2021

View reviewed changes

OskarDamkjaer added 2 commits January 30, 2021 16:27

Fix review comments

8710e92

Fix e2e test

3589745

OskarDamkjaer requested a review from oskarhane January 30, 2021 17:16

oskarhane approved these changes Feb 1, 2021

View reviewed changes

OskarDamkjaer merged commit a8dc660 into neo4j:master Feb 1, 2021

OskarDamkjaer deleted the rebased_reusable branch February 1, 2021 12:49

HerrEmil added the changelog label Mar 2, 2021

Make commands editable and re-usable #1268

Make commands editable and re-usable #1268

Uh oh!

Conversation

OskarDamkjaer commented Jan 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oskarhane left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HerrEmil left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

OskarDamkjaer commented Jan 29, 2021

Uh oh!

HerrEmil left a comment

Choose a reason for hiding this comment

Uh oh!

oskarhane left a comment

Choose a reason for hiding this comment

Uh oh!

OskarDamkjaer commented Jan 29, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oskarhane left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OskarDamkjaer commented Jan 30, 2021

Uh oh!

oskarhane left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

OskarDamkjaer commented Jan 21, 2021 •

edited

Loading