Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use monaco editor for Request Body in Query Editor #4516

Merged
merged 15 commits into from
Mar 31, 2023
Merged

Use monaco editor for Request Body in Query Editor #4516

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
86fd7be
try using monaco with webpack bundler
Dogacel Mar 17, 2023
c8f08a2
fix webpack temporarily
Dogacel Mar 17, 2023
5be8791
fix unnecessary eslint ignores
Dogacel Mar 17, 2023
73a9f24
add service type to the method page
Dogacel Mar 17, 2023
3d3b92e
Update nodejs and npm
trustin Mar 28, 2023
7f720fd
Merge branch 'main' into pr-4516-Dogacel-dogac/use-monaco-editor
trustin Mar 28, 2023
b8f956f
Fix build issues and use the npm bundled with nodejs
trustin Mar 28, 2023
08b359a
Comment
trustin Mar 28, 2023
998137f
Fix site generation
trustin Mar 28, 2023
2391db2
Downgradle nodejs since our self-hosted runners can't run them
trustin Mar 28, 2023
807ed51
- Replace `useMemo` with `useEffect`.
ikhoon Mar 29, 2023
8b9ceeb
lint
ikhoon Mar 29, 2023
5eaaf70
Limit the max chunk size to 1
ikhoon Mar 30, 2023
3ea52ad
Remove GraphQL playground webconsole and the redundant placeholder fo…
ikhoon Mar 30, 2023
4ab898e
disable per chunk output in webpack licenses plugin
Dogacel Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9,799 changes: 359 additions & 9,440 deletions docs-client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions docs-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,18 @@
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/lab": "^4.11.3-deprecations.1",
"codemirror": "^5.65.2",
"codemirror-graphql": "^1.2.17",
Comment on lines -16 to -17
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

"@monaco-editor/react": "^4.4.6",
"core-js": "^3.22.0",
"dayjs": "^1.11.1",
"github-markdown-css": "^5.1.0",
"graphql": "^16.3.0",
"json-bigint": "^1.0.0",
"jsonminify": "^0.4.2",
"mermaid": "^9.3.0",
"monaco-editor": "^0.34.1",
"monaco-editor-webpack-plugin": "^7.0.1",
"monaco-graphql": "^1.1.8",
"react": "^17.0.2",
"react-codemirror2": "^7.2.1",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-hot-loader": "^4.13.0",
Expand All @@ -38,7 +39,6 @@
"@babel/core": "^7.17.9",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@types/codemirror": "^5.60.5",
"@types/favicons-webpack-plugin": "^1.0.0",
"@types/html-webpack-plugin": "^3.2.6",
"@types/json-bigint": "^1.0.1",
Expand Down Expand Up @@ -82,6 +82,7 @@
"tsconfig-paths": "^3.14.1",
"typescript": "^4.6.3",
"webpack": "^5.72.0",
"webpack-bundle-analyzer": "^4.8.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1"
}
Expand Down
28 changes: 26 additions & 2 deletions docs-client/src/containers/App/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,11 +386,13 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
interface RouterServicesProps {
versions: Versions | undefined;
specification: Specification;
jsonSchemas: any[];
}

const RouterServices: React.FunctionComponent<RouterServicesProps> = ({
versions,
specification,
jsonSchemas,
}) => {
return (
<div>
Expand All @@ -409,7 +411,13 @@ const RouterServices: React.FunctionComponent<RouterServicesProps> = ({
/>
<Route
path="/methods/:serviceName/:methodName/:httpMethod"
render={(p) => <MethodPage {...p} specification={specification} />}
render={(p) => (
<MethodPage
{...p}
specification={specification}
jsonSchemas={jsonSchemas}
/>
)}
/>
<Route
path="/structs/:name"
Expand All @@ -435,6 +443,7 @@ const dummySpecification = new Specification({

const App: React.FunctionComponent<Props> = (props) => {
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
const [jsonSchemas, setJsonSchemas] = useState<any[]>([]);
const [specification, setSpecification] =
useState<Specification>(dummySpecification);
const [specLoadingStatus, setSpecLoadingStatus] = useState<SpecLoadingStatus>(
Expand Down Expand Up @@ -467,6 +476,17 @@ const App: React.FunctionComponent<Props> = (props) => {
setSpecLoadingStatus(SpecLoadingStatus.FAILED);
return;
}

try {
const schemaData: any[] = await fetch(`/docs/schemas.json`).then((r) =>
r.json(),
);
setJsonSchemas(schemaData);
} catch (e) {
// Ignore the error and continue
setJsonSchemas([]);
}

setSpecLoadingStatus(SpecLoadingStatus.SUCCESS);
})();
}, []);
Expand Down Expand Up @@ -632,7 +652,11 @@ const App: React.FunctionComponent<Props> = (props) => {
status={specLoadingStatus}
failureMessage="Failed to load specifications. Try refreshing!"
>
<RouterServices versions={versions} specification={specification} />
<RouterServices
versions={versions}
specification={specification}
jsonSchemas={jsonSchemas}
/>
</LoadingContainer>
</main>
</div>
Expand Down
56 changes: 33 additions & 23 deletions docs-client/src/containers/MethodPage/DebugPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ import Alert from '@material-ui/lab/Alert';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import { docServiceDebug } from '../../lib/header-provider';
import jsonPrettify from '../../lib/json-prettify';
import { Method } from '../../lib/specification';
import { Method, ServiceType } from '../../lib/specification';
import { TRANSPORTS } from '../../lib/transports';
import { SelectOption } from '../../lib/types';
import EndpointPath from './EndpointPath';
Expand All @@ -73,15 +73,15 @@ SyntaxHighlighter.registerLanguage('json', json);

interface OwnProps {
method: Method;
isAnnotatedService: boolean;
isGraphqlService: boolean;
serviceType: ServiceType;
exampleHeaders: SelectOption[];
examplePaths: SelectOption[];
exampleQueries: SelectOption[];
exactPathMapping: boolean;
useRequestBody: boolean;
debugFormIsOpen: boolean;
setDebugFormIsOpen: Dispatch<React.SetStateAction<boolean>>;
jsonSchemas: any[];
}

type Props = OwnProps & RouteComponentProps;
Expand Down Expand Up @@ -132,15 +132,15 @@ const DebugPage: React.FunctionComponent<Props> = ({
exampleHeaders,
examplePaths,
exampleQueries,
isAnnotatedService,
isGraphqlService,
serviceType,
history,
location,
match,
method,
useRequestBody,
debugFormIsOpen,
setDebugFormIsOpen,
jsonSchemas,
}) => {
const [requestBodyOpen, toggleRequestBodyOpen] = useReducer(toggle, true);
const [requestBody, setRequestBody] = useState('');
Expand Down Expand Up @@ -183,7 +183,10 @@ const DebugPage: React.FunctionComponent<Props> = ({
}

let urlPath;
if (isAnnotatedService || isGraphqlService) {
if (
serviceType === ServiceType.HTTP ||
serviceType === ServiceType.GRAPHQL
) {
if (exactPathMapping) {
urlPath = extractUrlPath(method);
} else {
Expand All @@ -197,7 +200,8 @@ const DebugPage: React.FunctionComponent<Props> = ({
)?.pathMapping || '';
}

const urlQueries = isAnnotatedService ? urlParams.get('queries') ?? '' : '';
const urlQueries =
serviceType === ServiceType.HTTP ? urlParams.get('queries') ?? '' : '';

if (!keepDebugResponse) {
setDebugResponse('');
Expand All @@ -213,8 +217,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
}, [
exactPathMapping,
exampleQueries.length,
isAnnotatedService,
isGraphqlService,
serviceType,
location.search,
match.params,
method,
Expand Down Expand Up @@ -325,7 +328,10 @@ const DebugPage: React.FunctionComponent<Props> = ({
let uri;
let endpoint;

if (isAnnotatedService || isGraphqlService) {
if (
serviceType === ServiceType.HTTP ||
serviceType === ServiceType.GRAPHQL
) {
const queries = additionalQueries;
if (exactPathMapping) {
endpoint = transport.getDebugMimeTypeEndpoint(method);
Expand Down Expand Up @@ -358,7 +364,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
if (process.env.WEBPACK_DEV === 'true') {
headers[docServiceDebug] = 'true';
}
if (isGraphqlService) {
if (serviceType === ServiceType.GRAPHQL) {
headers.Accept = 'application/json';
}

Expand Down Expand Up @@ -387,8 +393,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
method,
transport,
requestBody,
isAnnotatedService,
isGraphqlService,
serviceType,
showSnackbar,
additionalQueries,
exactPathMapping,
Expand Down Expand Up @@ -419,7 +424,7 @@ const DebugPage: React.FunctionComponent<Props> = ({

let queries;
let executedEndpointPath;
if (isAnnotatedService) {
if (serviceType === ServiceType.HTTP) {
queries = params.get('queries') || '';
if (!exactPathMapping) {
executedEndpointPath = params.get('endpoint_path') || undefined;
Expand Down Expand Up @@ -449,7 +454,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
}
setDebugResponse(executedDebugResponse);
},
[useRequestBody, isAnnotatedService, exactPathMapping, method, transport],
[useRequestBody, serviceType, exactPathMapping, method, transport],
);

const onSubmit = useCallback(async () => {
Expand All @@ -473,7 +478,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
params.set('request_body', jsonMinify(requestBody) || '{}');
}

if (isAnnotatedService) {
if (serviceType === ServiceType.HTTP) {
if (queries) {
params.set('queries', queries);
} else {
Expand Down Expand Up @@ -534,7 +539,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
stickyHeaders,
executeRequest,
useRequestBody,
isAnnotatedService,
serviceType,
requestBody,
exactPathMapping,
additionalPath,
Expand All @@ -544,7 +549,10 @@ const DebugPage: React.FunctionComponent<Props> = ({
]);

const supportedExamplePaths = useMemo(() => {
if (isAnnotatedService || isGraphqlService) {
if (
serviceType === ServiceType.HTTP ||
serviceType === ServiceType.GRAPHQL
) {
return examplePaths;
}
return transport.listDebugMimeTypeEndpoint(method).map((endpoint) => {
Expand All @@ -553,7 +561,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
value: endpoint.pathMapping,
};
});
}, [isAnnotatedService, isGraphqlService, transport, method, examplePaths]);
}, [serviceType, transport, method, examplePaths]);

const [debugAlertIsOpen, setDebugAlertIsOpen] = React.useState(true);

Expand Down Expand Up @@ -591,15 +599,14 @@ const DebugPage: React.FunctionComponent<Props> = ({
<EndpointPath
examplePaths={supportedExamplePaths}
editable={!exactPathMapping}
isAnnotatedService={isAnnotatedService}
isGraphqlService={isGraphqlService}
serviceType={serviceType}
endpointPathOpen={endpointPathOpen}
additionalPath={additionalPath}
onEditEndpointPathClick={toggleEndpointPathOpen}
onPathFormChange={onPathFormChange}
onSelectedPathChange={onSelectedPathChange}
/>
{isAnnotatedService && (
{serviceType === ServiceType.HTTP && (
<HttpQueryString
exampleQueries={exampleQueries}
additionalQueriesOpen={additionalQueriesOpen}
Expand All @@ -619,7 +626,7 @@ const DebugPage: React.FunctionComponent<Props> = ({
onHeadersFormChange={onHeadersFormChange}
onStickyHeadersChange={toggleStickyHeaders}
/>
{useRequestBody && isGraphqlService ? (
{useRequestBody && serviceType === ServiceType.GRAPHQL ? (
<GraphqlRequestBody
requestBodyOpen={requestBodyOpen}
requestBody={requestBody}
Expand All @@ -635,6 +642,9 @@ const DebugPage: React.FunctionComponent<Props> = ({
requestBody={requestBody}
onEditRequestBodyClick={toggleRequestBodyOpen}
onDebugFormChange={onDebugFormChange}
method={method}
serviceType={serviceType}
jsonSchemas={jsonSchemas}
/>
)}
<Typography variant="body2" paragraph />
Expand Down
7 changes: 4 additions & 3 deletions docs-client/src/containers/MethodPage/EndpointPath.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ import Typography from '@material-ui/core/Typography';
import React, { ChangeEvent } from 'react';

import { SelectOption } from '../../lib/types';
import { ServiceType } from '../../lib/specification';

const endpointPathPlaceHolder = '/foo/bar';

interface Props {
editable: boolean;
isAnnotatedService: boolean;
isGraphqlService: boolean;
serviceType: ServiceType;
endpointPathOpen: boolean;
examplePaths: SelectOption[];
additionalPath: string;
Expand All @@ -46,7 +46,8 @@ const EndpointPath: React.FunctionComponent<Props> = (props) => (
{props.endpointPathOpen && (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{props.isAnnotatedService || props.isGraphqlService ? (
{props.serviceType === ServiceType.HTTP ||
props.serviceType === ServiceType.GRAPHQL ? (
<>
{props.examplePaths.length > 0 && (
<>
Expand Down
Loading