Use monaco-editor for code display #173

carbonrobot · 2023-11-09T20:27:43Z

Use monaco-editor for code display instead of @microlink/react-json-view.

We want to remove the current editor to resolve the dependency issues with npm. See #171 for more information. Monaco Editor is the tool that powers the VS Code Editor. Having a lightweight editor allows us the opportunity to allow editing and replaying in the UX in a future update and provides built in language support/syntax highlighting for multiple response types.

Provides a <CodeDisplay> component that uses the content-type header value to determine the language for syntax highlighting
Fixes an issue where large auth tokens that are large expand vertically
Sets a fixed height for the decoded token view. The editor is lazy loaded and can't determine its height with flex. This also prevents it from expanding infinitely with large token data sets

Before

After

Also fixes an issue where large auth tokens that are large expand vertically

Before

After

changeset-bot · 2023-11-09T20:27:47Z

🦋 Changeset detected

Latest commit: c3b16d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@envyjs/webui	Minor
@envyjs/apollo	Minor
@envyjs/core	Minor
@envyjs/nextjs	Minor
@envyjs/node	Minor
@envyjs/web	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

kgpax

I'm in favour of the change to use this for the code views. Some observations though:

It looks like there is an error thrown when trying to view this mock trace... perhaps something with the JSON which throws an error when using this component?

There seems to be an unnecessary overscroll. For example, a mock which only has a 4 line response can be scrolled down, despite the full response being comfortably visible in the container.

The previous react-json-view had some nice little UX features which it would be nice to retain, if at all possible with this replacement...
Collapse the JSON at a certain level by default. This means that responses with deeply nested objects doesn't need to be fully expanded, and expansion can be a little more selective, letting the later response properties be visible:

Automatically truncate large values, and expand on click. Wasn't sure I was sold on this when I first used it, but it did make scanning the object easier, and often times we only need to see the initial part of each value to know if we want to see the full value.

One final bug: switching tabs tries to persist that selected tab when viewing other traces. This, however, is a problem if the trace we switch to does not have that tab. For example; with the mock data...

View a valid trace
Change to the "Response" tab
Change the trace to one of the error ones (which doesn't have a response)
The response from the previous trace remains visible
You have to explicitly switch to the "Details" tab to see the correct trace information

carbonrobot · 2023-11-09T21:27:38Z

@kgpax good call, will see what we can do here

carbonrobot · 2023-11-10T16:28:03Z

@kgpax Updated. I was unable to find a solution to "Automatically truncate large values". The only options are word wrap, but thats not really the same thing. Play around with the current build and let me know what you think.

kgpax · 2023-11-13T09:11:10Z

packages/webui/src/components/Authorization.tsx

@@ -105,7 +105,7 @@ export default function Authorization({ value }: AuthorizationProps) {
        }
      })()}
      {tokenState !== TokenState.Minimal && (
-        <div className={tw('flex flex-row gap-2 bg-slate-100 px-4 pt-4')}>
+        <div className={tw('flex flex-row gap-2 bg-gray-200 px-4 pt-4')}>


It would be nice if this had a hover state which re-enforced that the data is interactive. I.e., in the original design, this would have a hove state like this:

kgpax · 2023-11-13T09:15:45Z

packages/webui/src/components/ui/TraceDetail.tsx

@@ -20,8 +20,14 @@ import ResponseHeaders from './ResponseHeaders';
 import { TabContent, TabList, TabListItem } from './Tabs';


I don't think it's related to these code changes, but it does look to be related to a new mock trace that had been added at some point:

This is the mock GQL "PDP" data trace:

envy/packages/webui/src/testing/mockTraces/large-gql.ts

Line 1 in 9531b8b

import { Event, HttpRequestState } from '@envyjs/core';

And if you look at the screenshot, it doesn't look like its parsing and presenting the query correctly. Compare this with the mock trace the GQL "People" query:

Also, in this above example, the code display part should really be full width, even if the content is narrow. It looks... odd... to make the box narrow like this IMO.

Will address in #176

kgpax · 2023-11-13T09:17:35Z

packages/webui/src/components/ui/TraceDetail.tsx

@@ -20,8 +20,14 @@ import ResponseHeaders from './ResponseHeaders';
 import { TabContent, TabList, TabListItem } from './Tabs';
 import TimingsDiagram from './TimingsDiagram';


Also not quite related to these code changes, but for the "Aborted" and "Timeout" examples, maybe we shouldn't include empty the "Response Headers" and "Timing" sections:

kgpax · 2023-11-13T09:19:26Z

packages/webui/src/components/Authorization.tsx

@@ -105,7 +105,7 @@ export default function Authorization({ value }: AuthorizationProps) {
        }
      })()}
      {tokenState !== TokenState.Minimal && (
-        <div className={tw('flex flex-row gap-2 bg-slate-100 px-4 pt-4')}>
+        <div className={tw('flex flex-row gap-2 bg-gray-200 px-4 pt-4')}>


On expansion, the display mode and the collapse buttons don't look great. Not sure whether there is a plan to address this in another PR?

@ryansrofe has updated designs for this. Will address in #175

kgpax · 2023-11-13T09:21:49Z

packages/webui/src/components/MonacoEditor.tsx

+    });
+    monaco.editor.setTheme('envy');
+
+    executeFolding();


When the editor is in view, we get a flash of the folding happening. Not the end of the world, but is there anything that can be done to avoid it?

I spent some time on this, but there is no simple solutions. Will continue investigation as part of #174

kgpax · 2023-11-13T09:24:50Z

@kgpax Updated. I was unable to find a solution to "Automatically truncate large values". The only options are word wrap, but thats not really the same thing. Play around with the current build and let me know what you think.

I think the truncation in the previous component was there because the default behaviour was to wrap the text (i.e., a long value would wrap over multiple lines)... therefore the truncation made it better because each line was a different property.

Given that this editor has word-wrap disabled, we kind of get that same overall experience, so on reflection I'd say that the truncation isn't really necessary any more.

Removing blocking review; critical bug has been fixed

carbonrobot · 2023-11-13T15:55:10Z

Preview Package Publishing

🦋  success packages published successfully:
🦋  @envyjs/[email protected]
🦋  @envyjs/[email protected]
🦋  @envyjs/[email protected]
🦋  @envyjs/[email protected]
🦋  @envyjs/[email protected]
🦋  @envyjs/[email protected]

Use monaco-editor for code display

0f2a329

carbonrobot requested review from kgpax, vandosant and colinrobertbrooks November 9, 2023 20:43

kgpax previously requested changes Nov 9, 2023

View reviewed changes

carbonrobot added 8 commits November 10, 2023 07:07

Prevent uneccessary scroll in code display

fddcae4

Ensure systems return the correct types

ab3fd64

Fix persistent tabs when data is not present

62b41f3

Align background colors

bfa5ecb

Autofold on initialization

7978a58

Remove unused component

8b23016

Add xml formatting

eee9721

Add nested multi level folding

9531b8b

kgpax reviewed Nov 13, 2023

View reviewed changes

carbonrobot added 3 commits November 13, 2023 08:11

Add hover effect to auth viewer

f2264ac

Hide response headers when request is aborted

02d3c40

Editor has built in lazy loading

c3b16d6

carbonrobot mentioned this pull request Nov 13, 2023

Improve design of Graphql system component #176

Open

carbonrobot merged commit 2bc08f4 into main Nov 13, 2023
1 check passed

carbonrobot deleted the ui/code-display branch November 13, 2023 17:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use monaco-editor for code display #173

Use monaco-editor for code display #173

carbonrobot commented Nov 9, 2023 •

edited

Loading

changeset-bot bot commented Nov 9, 2023 •

edited

Loading

kgpax left a comment •

edited

Loading

carbonrobot commented Nov 9, 2023

carbonrobot commented Nov 10, 2023

kgpax Nov 13, 2023

carbonrobot Nov 13, 2023

kgpax Nov 13, 2023

carbonrobot Nov 13, 2023

kgpax Nov 13, 2023

carbonrobot Nov 13, 2023

kgpax Nov 13, 2023

carbonrobot Nov 13, 2023

kgpax Nov 13, 2023

carbonrobot Nov 13, 2023

kgpax commented Nov 13, 2023

carbonrobot commented Nov 13, 2023

		@@ -20,8 +20,14 @@ import ResponseHeaders from './ResponseHeaders';
		import { TabContent, TabList, TabListItem } from './Tabs';

		@@ -20,8 +20,14 @@ import ResponseHeaders from './ResponseHeaders';
		import { TabContent, TabList, TabListItem } from './Tabs';
		import TimingsDiagram from './TimingsDiagram';

Use monaco-editor for code display #173

Use monaco-editor for code display #173

Conversation

carbonrobot commented Nov 9, 2023 • edited Loading

Before

After

Before

After

changeset-bot bot commented Nov 9, 2023 • edited Loading

🦋 Changeset detected

kgpax left a comment • edited Loading

Choose a reason for hiding this comment

carbonrobot commented Nov 9, 2023

carbonrobot commented Nov 10, 2023

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

kgpax commented Nov 13, 2023

carbonrobot commented Nov 13, 2023

carbonrobot commented Nov 9, 2023 •

edited

Loading

changeset-bot bot commented Nov 9, 2023 •

edited

Loading

kgpax left a comment •

edited

Loading