Use monaco editor for Request Body in Query Editor #4516

Dogacel · 2022-11-03T12:57:25Z

Motivation:

Update the debug form to use Microsoft's well-known Monaco Editor.

Modifications:

Integrate Monaco editor to be used in the request body text editor.
- Easy-to-use editor with bracket highlight, auto-close tags, etc.
- Enable JSON syntax highlighting
- Show JSON syntax errors (For future, we will generate JSON schemas for protos to verify the object syntax as well)

Result:

Screen.Recording.2022-11-10.at.22.44.28.mov

The example used is GrpcDocServiceTest the method is UnaryMethod.
This PR is required to enable auto-complete:

docs-client/package.json

codecov · 2022-11-04T09:36:48Z

Codecov Report

❗ No coverage uploaded for pull request base (main@f769310). Click here to learn what that means.
Patch has no changes to coverable lines.

❗ Current head 0bc19f7 differs from pull request most recent head 4ab898e. Consider uploading reports for the commit 4ab898e to get more accurate results

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4516   +/-   ##
=======================================
  Coverage        ?   74.08%           
  Complexity      ?    18186           
=======================================
  Files           ?     1537           
  Lines           ?    67469           
  Branches        ?     8537           
=======================================
  Hits            ?    49987           
  Misses          ?    13412           
  Partials        ?     4070

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

docs-client/src/containers/App/index.tsx

## Motivation Allow viewing/editing files. ## Modification - Add monaco editor. https://www.npmjs.com/package/@monaco-editor/react - Update FileList to allow recursive structure for folder. - Add file content. - Add some placeholder components. - Add edit and preview modes ### Notes regarding the choice of file editor The old app is using Ace. It's quite stable but there are some warnings and it needs some workaround to make it work with Nextjs. https://github.com/securingsincity/react-ace Thus, we look into other options https://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors. Both Codemirror and Monaco seem to be a great choice in terms of setup and UI. There's a caveat when using Monaco for JSON. Need a workaround to format the code properly. Since Armeria is moving away from Codemirror line/armeria#4516, we go with Monaco. ## Result <img width="1253" alt="Screen Shot 2022-12-26 at 18 04 18" src="https://user-images.githubusercontent.com/5079588/209541874-48470cc4-fe25-4c63-9136-d7a977ef9123.png"> <img width="829" alt="Screen Shot 2022-12-27 at 11 52 15" src="https://user-images.githubusercontent.com/5079588/209612997-af4d8506-edb9-4767-95a0-99c863d5c20e.png">

Dogacel · 2023-01-02T07:25:29Z

Waiting until

Generate JSON Schema from ServiceSpecifications #4518

is merged so we can have the full autocomplete feature right away.

Dogacel · 2023-01-31T21:04:13Z

Updated with the latest master ^

Dogacel · 2023-02-08T14:56:27Z

@ikhoon Can we release this in 1.22.0 ? This is ready to be tested and hopefully it will be useful.

ikhoon · 2023-02-09T01:30:50Z

@ikhoon Can we release this in 1.22.0 ? This is ready to be tested and hopefully it will be useful.

Thanks for your hard work. 🙇‍♂️ This is so a nice feature that users should love. That being said, we didn't have the time to review this PR. There are some features needed to release in a timely manner for LINE internal users.

Let me review this after releasing 1.22.0 and ship it in 1.23.0.

Dogacel · 2023-02-09T10:08:55Z

@ikhoon Can we release this in 1.22.0 ? This is ready to be tested and hopefully it will be useful.

Thanks for your hard work. 🙇‍♂️ This is so a nice feature that users should love. That being said, we didn't have the time to review this PR. There are some features needed to release in a timely manner for LINE internal users.

Let me review this after releasing 1.22.0 and ship it in 1.23.0.

Sure, thanks for the heads-up 😉

Dogacel · 2023-02-22T13:37:01Z

bump

jrhee17 · 2023-02-22T13:43:35Z

Sorry 😅 We definitely didn't forget about this PR (it's going to be one of the highlights of the next release)
Let me take a look tomorrow morning

ikhoon · 2023-02-23T09:25:12Z

I found a bug that a JSON schema for AnnotatedDocServiceTest$MyService.json() isn't correctly created.

armeria/core/src/test/java/com/linecorp/armeria/internal/server/annotation/AnnotatedDocServiceTest.java

Lines 561 to 563 in ed1482a

    
           public String json(JsonRequest request) { 
        
               return request.bar; 
        
           }

We may apply useParameterAsRoot to the JSON request.

ikhoon

This is so awesome for gRPC and Thrift.
However, we need to consider exceptional rules for annotated services.

docs-client/src/containers/App/index.tsx

docs-client/src/containers/MethodPage/RequestBody.tsx

ikhoon · 2023-02-23T09:59:29Z

Had a chat with other team members and we decided to support gRPC and Thrift at the moment.
So please disable JSON schema for annotated services.
Annotated services will take advantage of JSON schema later when it is ready.

Dogacel · 2023-02-23T10:19:52Z

Had a chat with other team members and we decided to support gRPC and Thrift at the moment. So please disable JSON schema for annotated services. Annotated services will take advantage of JSON schema later when it is ready.

What is the easiest way to check whether a call is gRPC or thrift? Should I take a look at availableMimeTypes?

Maybe via this:

const isRPC = grpcUnframedTransport.supportsMimeType(mimeType)
 || thriftTransport.supportsMimeType(mimeType);

ikhoon · 2023-02-23T10:54:18Z

It looks like the easiest way. 😅

trustin

Lovely. Thanks a lot, @Dogacel! 🙇

Dogacel · 2023-03-24T11:14:22Z

I am blocked by this:

Packages with similar names cause Multiple assets emit different content to the same filename error. xz64/license-webpack-plugin#128

And I suppose my package-lock.json file is not correct. What is the recommended node/npm version I should use to update the package-lock? Is it possible that last lock file had issues?

trustin · 2023-03-28T03:51:53Z

And I suppose my package-lock.json file is not correct. What is the recommended node/npm version I should use to update the package-lock? Is it possible that last lock file had issues?

According to docs-client/build.gradle, we're using nodejs 16.14.0 and npm 8.5.2, which are probably outdated. Let me push a commit to this PR to update them to the newer versions and resolve the conflicts.

trustin · 2023-03-28T04:04:34Z

@Dogacel It seems like the npm and webpack don't complain anymore at least. Could you check if my fix works as intended?

trustin · 2023-03-28T04:25:48Z

I had to downgrade nodejs from 18 to 16 because our CI machines are using old GLIBC, but it still seems to work.

- Do not set the language option to 'json' if no JSON schema is available.

ikhoon

Thanks a ton, @Dogacel! ❤️

ikhoon · 2023-03-29T02:18:25Z

docs-client/src/containers/MethodPage/GraphqlRequestBody.tsx

@@ -77,6 +80,19 @@ const GraphqlRequestBody: React.FunctionComponent<Props> = ({
  const [variablesText, setVariablesText] = useState('');
  const [schema, setSchema] = useState<GraphQLSchema | undefined>();

+  const monacoEditor = useMonaco();
+
+  useEffect(() => {


Recently, I read an article about useEffect() https://react.dev/learn/you-might-not-need-an-effect
Based on the article, I thought this was not a good case of using useEffect. So I used useMemo() instead.
https://react.dev/learn/you-might-not-need-an-effect#caching-expensive-calculations

Ah, I got confused for a second because commit title was [- Replace useMemo with useEffect.] 😅 I think it makes sense, thanks for adding this 👍

ikhoon · 2023-03-29T05:54:48Z

docs-client/package.json

-    "codemirror": "^5.65.2",
-    "codemirror-graphql": "^1.2.17",


ikhoon · 2023-03-29T06:42:50Z

I had to downgrade nodejs from 18 to 16 because our CI machines are using old GLIBC, but it still seems to work.

I will check this separetely.

ikhoon · 2023-03-29T08:40:47Z

I found out that incompatibility with NodeJS 18 and AWS EC2 is a known issue.
nvm-sh/nvm#2972
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html
It seems to be better to upgrade the NodeJS version when AWS supports it.

jrhee17

The code changes itself look good to me! Also looking into the file issue mentioned here by @ikhoon #4516 (comment)

Dogacel · 2023-03-29T13:40:30Z

docs-client/webpack.config.ts

+    excludedPackageTest: (packageName: string) => {
+      // @monaco-editor/react and monaco-editor are the same package and causes license duplication.
+      return packageName.includes("monaco-editor");
+    },


@trustin @ikhoon @jrhee17

As a workaround we can add a separate file web-licenses-extra.txt and copy paste licenses from the monaco-editor packages to unblock ourselves. Wdy think?

Did you try running with perChunkOutput:false by any chance? I don't think we want to generate license files per chunk anyways and it seemed to run without errors in my local env.

ref: https://github.com/xz64/license-webpack-plugin/blob/master/DOCUMENTATION.md

That + @ikhoon 's changes regarding the number of chunks actually fixed the error and now we have a lot more licenses inside the license file. Probably it was what it should have been in the first place.

…r the input

Dogacel · 2023-03-30T22:14:07Z

I have tested this one last time and everything looks good to me. Thanks, everyone for all the collaborative effort. It included lots of learning experiences for me, I hope people will enjoy using doc service more now 😄

minwoox

Great job, @Dogacel! 👍 👍 👍

minwoox · 2023-03-31T04:01:07Z

This will be one of the key features of the year. 🎉 🎉 🎉
Thanks, @Dogacel and others for helping. 😄

## Motivation Allow viewing/editing files. ## Modification - Add monaco editor. https://www.npmjs.com/package/@monaco-editor/react - Update FileList to allow recursive structure for folder. - Add file content. - Add some placeholder components. - Add edit and preview modes ### Notes regarding the choice of file editor The old app is using Ace. It's quite stable but there are some warnings and it needs some workaround to make it work with Nextjs. https://github.com/securingsincity/react-ace Thus, we look into other options https://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors. Both Codemirror and Monaco seem to be a great choice in terms of setup and UI. There's a caveat when using Monaco for JSON. Need a workaround to format the code properly. Since Armeria is moving away from Codemirror line/armeria#4516, we go with Monaco. ## Result <img width="1253" alt="Screen Shot 2022-12-26 at 18 04 18" src="https://user-images.githubusercontent.com/5079588/209541874-48470cc4-fe25-4c63-9136-d7a977ef9123.png"> <img width="829" alt="Screen Shot 2022-12-27 at 11 52 15" src="https://user-images.githubusercontent.com/5079588/209612997-af4d8506-edb9-4767-95a0-99c863d5c20e.png">

ikhoon · 2023-06-07T08:56:43Z

I had to downgrade nodejs from 18 to 16 because our CI machines are using old GLIBC, but it still seems to work.

I've upgraded our self-hosted CI machines to the latest OS that will be compatible NodeJS 18.

Dogacel requested review from ikhoon, jrhee17, minwoox and trustin as code owners November 3, 2022 12:57

Dogacel changed the title ~~use monaco editor~~ Use monaco editor for Request Body in Query Editor Nov 3, 2022

heowc reviewed Nov 3, 2022

View reviewed changes

docs-client/package.json Outdated Show resolved Hide resolved

Dogacel mentioned this pull request Nov 4, 2022

Generate JSON Schema from ServiceSpecifications #4518

Merged

Dogacel commented Nov 17, 2022

View reviewed changes

docs-client/src/containers/App/index.tsx Outdated Show resolved Hide resolved

Dogacel mentioned this pull request Nov 18, 2022

Debug Form doesn't show for RPC in DocService #4284

Closed

rainy789 mentioned this pull request Dec 26, 2022

Add file editor line/centraldogma#778

Merged

Dogacel mentioned this pull request Dec 31, 2022

Lift up debug page #4599

Merged

ikhoon added the new feature label Feb 9, 2023

ikhoon added this to the 1.23.0 milestone Feb 9, 2023

ikhoon requested changes Feb 23, 2023

View reviewed changes

docs-client/src/containers/App/index.tsx Outdated Show resolved Hide resolved

docs-client/src/containers/MethodPage/RequestBody.tsx Outdated Show resolved Hide resolved

ikhoon mentioned this pull request Feb 28, 2023

Generate OpenAPI Specification from ServiceSpecification #4713

Open

try using monaco with webpack bundler

86fd7be

Dogacel force-pushed the dogac/use-monaco-editor branch from 7235e1f to 86fd7be Compare March 17, 2023 10:36

Dogacel requested a review from ikhoon March 17, 2023 12:57

trustin approved these changes Mar 23, 2023

View reviewed changes

trustin added 4 commits March 28, 2023 12:56

Update nodejs and npm

3d3b92e

Merge branch 'main' into pr-4516-Dogacel-dogac/use-monaco-editor

7f720fd

Fix build issues and use the npm bundled with nodejs

b8f956f

Comment

08b359a

trustin added 2 commits March 28, 2023 13:12

Fix site generation

998137f

Downgradle nodejs since our self-hosted runners can't run them

2391db2

- Replace useMemo with useEffect.

807ed51

- Do not set the language option to 'json' if no JSON schema is available.

ikhoon approved these changes Mar 29, 2023

View reviewed changes

lint

8b9ceeb

jrhee17 approved these changes Mar 29, 2023

View reviewed changes

Dogacel commented Mar 29, 2023

View reviewed changes

ikhoon added 2 commits March 30, 2023 18:36

Limit the max chunk size to 1

5eaaf70

Remove GraphQL playground webconsole and the redundant placeholder fo…

3ea52ad

…r the input

Dogacel mentioned this pull request Mar 30, 2023

Consider splitting DocService from the core module and providing it as an opt-in feature #4795

Open

disable per chunk output in webpack licenses plugin

4ab898e

minwoox approved these changes Mar 31, 2023

View reviewed changes

minwoox merged commit 8652e5e into line:main Mar 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use monaco editor for Request Body in Query Editor #4516

Use monaco editor for Request Body in Query Editor #4516

Dogacel commented Nov 3, 2022 •

edited

Loading

codecov bot commented Nov 4, 2022 •

edited

Loading

Dogacel commented Jan 2, 2023

Dogacel commented Jan 31, 2023

Dogacel commented Feb 8, 2023

ikhoon commented Feb 9, 2023

Dogacel commented Feb 9, 2023

Dogacel commented Feb 22, 2023

jrhee17 commented Feb 22, 2023

ikhoon commented Feb 23, 2023 •

edited

Loading

ikhoon left a comment

ikhoon commented Feb 23, 2023

Dogacel commented Feb 23, 2023

ikhoon commented Feb 23, 2023 •

edited

Loading

trustin left a comment

Dogacel commented Mar 24, 2023

trustin commented Mar 28, 2023

trustin commented Mar 28, 2023

trustin commented Mar 28, 2023 •

edited

Loading

ikhoon left a comment

ikhoon Mar 29, 2023

Dogacel Mar 29, 2023

ikhoon Mar 29, 2023

ikhoon commented Mar 29, 2023

ikhoon commented Mar 29, 2023

jrhee17 left a comment

Dogacel Mar 29, 2023

jrhee17 Mar 30, 2023 •

edited

Loading

Dogacel Mar 30, 2023

Dogacel commented Mar 30, 2023

minwoox left a comment

minwoox commented Mar 31, 2023

ikhoon commented Jun 7, 2023

Use monaco editor for Request Body in Query Editor #4516

Use monaco editor for Request Body in Query Editor #4516

Conversation

Dogacel commented Nov 3, 2022 • edited Loading

codecov bot commented Nov 4, 2022 • edited Loading

Codecov Report

Dogacel commented Jan 2, 2023

Dogacel commented Jan 31, 2023

Dogacel commented Feb 8, 2023

ikhoon commented Feb 9, 2023

Dogacel commented Feb 9, 2023

Dogacel commented Feb 22, 2023

jrhee17 commented Feb 22, 2023

ikhoon commented Feb 23, 2023 • edited Loading

ikhoon left a comment

Choose a reason for hiding this comment

ikhoon commented Feb 23, 2023

Dogacel commented Feb 23, 2023

ikhoon commented Feb 23, 2023 • edited Loading

trustin left a comment

Choose a reason for hiding this comment

Dogacel commented Mar 24, 2023

trustin commented Mar 28, 2023

trustin commented Mar 28, 2023

trustin commented Mar 28, 2023 • edited Loading

ikhoon left a comment

Choose a reason for hiding this comment

ikhoon Mar 29, 2023

Choose a reason for hiding this comment

Dogacel Mar 29, 2023

Choose a reason for hiding this comment

ikhoon Mar 29, 2023

Choose a reason for hiding this comment

ikhoon commented Mar 29, 2023

ikhoon commented Mar 29, 2023

jrhee17 left a comment

Choose a reason for hiding this comment

Dogacel Mar 29, 2023

Choose a reason for hiding this comment

jrhee17 Mar 30, 2023 • edited Loading

Choose a reason for hiding this comment

Dogacel Mar 30, 2023

Choose a reason for hiding this comment

Dogacel commented Mar 30, 2023

minwoox left a comment

Choose a reason for hiding this comment

minwoox commented Mar 31, 2023

ikhoon commented Jun 7, 2023

Dogacel commented Nov 3, 2022 •

edited

Loading

codecov bot commented Nov 4, 2022 •

edited

Loading

ikhoon commented Feb 23, 2023 •

edited

Loading

ikhoon commented Feb 23, 2023 •

edited

Loading

trustin commented Mar 28, 2023 •

edited

Loading

jrhee17 Mar 30, 2023 •

edited

Loading