diff --git a/src/components/Content.tsx b/src/components/Content.tsx index b5034dc5e..31bd89074 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -4,7 +4,7 @@ import SplitPane from 'react-split-pane'; import { Editor } from './Editor/Editor'; import { Navigation } from './Navigation'; import { Template } from './Template'; -import { NewFileModal } from './Modals/NewFileModal'; +import { NewFileModal, RedirectedModal } from './Modals'; import { VisualiserTemplate } from './Visualiser'; import { debounce } from '../helpers'; @@ -50,6 +50,7 @@ export const Content: React.FunctionComponent = () => { // eslint-
+ {children}
-
+
{onSubmit && (
diff --git a/src/components/Modals/RedirectedModal.tsx b/src/components/Modals/RedirectedModal.tsx new file mode 100644 index 000000000..552b06982 --- /dev/null +++ b/src/components/Modals/RedirectedModal.tsx @@ -0,0 +1,81 @@ +import React, { useEffect, useState } from 'react'; + +import { ConfirmModal } from './ConfirmModal'; +import { Markdown } from '../common'; + +import state from '../../state'; + +const CHANGES = ` +Below are the changes compared to the old AsyncAPI Playground: + +- There is no preview for markdown. +- Studio supports the same query parameters except **template**. +- To download an AsyncAPI document from an external source use the editor menu and select **Import from URL**. There is also an option to use a local file, base64 saved file, convert a given version of AsyncAPI document to a newer one as well as change the format from YAML to JSON and vice versa. There is also option to download AsyncAPI document as file. +- To generate the template, please click on the **Generate code/docs** item in the menu at the top right corner of the editor, enter (needed) the parameters and click **Generate**. +- The left navigation is used to open/close the panels. +- Errors in the AsyncAPI document are shown in a panel at the bottom of the editor. The panel is expandable. +- To see the data flow in AsyncAPI document click the 4th node in the left navigation. +- To select a sample template file click on the 5th item in the left navigation. +- Studio settings can be changed by clicking on the settings icon in the lower left corner. +- Panels can be stretched. +`; + +export const RedirectedModal: React.FunctionComponent = () => { + const [show, setShow] = useState(false); + const [showMore, setShowMore] = useState(false); + + const appState = state.useAppState(); + const isRedirected = appState.redirectedFrom.get(); + + useEffect(() => { + isRedirected === 'playground' && setShow(true); + }, [isRedirected]); + + useEffect(() => { + show === false && appState.redirectedFrom.set(false); + }, [show]); // eslint-disable-line + + function onCancel() { + if (typeof window.history.replaceState === 'function') { + const url = new URL(window.location.href); + url.searchParams.delete('redirectedFrom'); + window.history.replaceState({}, window.location.href, url.toString()); + } + setShow(false); + } + + function onShowMoreClick() { + setShowMore(true); + } + + return ( + +
+
+ + {CHANGES} + + {!showMore && ( + <> +
+
+ +
+ + )} +
+
+ + ); +}; diff --git a/src/components/Modals/index.tsx b/src/components/Modals/index.tsx index b0ce82c73..d588b329b 100644 --- a/src/components/Modals/index.tsx +++ b/src/components/Modals/index.tsx @@ -3,4 +3,6 @@ export * from './ConvertModal'; export * from './ConvertToLatestModal'; export * from './ImportBase64Modal'; export * from './ImportURLModal'; +export * from './NewFileModal'; +export * from './RedirectedModal'; export * from './Generator/GeneratorModal'; \ No newline at end of file diff --git a/src/components/Visualiser/Nodes/ApplicationNode.tsx b/src/components/Visualiser/Nodes/ApplicationNode.tsx index 5f4811ead..5796011a6 100644 --- a/src/components/Visualiser/Nodes/ApplicationNode.tsx +++ b/src/components/Visualiser/Nodes/ApplicationNode.tsx @@ -2,8 +2,7 @@ import React from 'react'; import { Handle, Position } from 'react-flow-renderer'; import { AsyncAPIDocument } from '@asyncapi/parser'; -// @ts-ignore -import { Markdown } from '@asyncapi/react-component/lib/esm/components/Markdown'; +import { Markdown } from '../../common'; interface IData { spec: AsyncAPIDocument diff --git a/src/components/common/Markdown.tsx b/src/components/common/Markdown.tsx new file mode 100644 index 000000000..4ca2efebe --- /dev/null +++ b/src/components/common/Markdown.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +// @ts-ignore +import { Markdown as MarkdownComponent } from '@asyncapi/react-component/lib/esm/components/Markdown'; + +export const Markdown: React.FunctionComponent = ({ + children, +}) => { + return ( +
+ + {children} + +
+ ); +}; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index e32589988..a2df6d995 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,2 +1,3 @@ export * from './Dropdown'; +export * from './Markdown'; export * from './Switch'; diff --git a/src/services/navigation.service.ts b/src/services/navigation.service.ts index 3c0dc6397..38ded2a2a 100644 --- a/src/services/navigation.service.ts +++ b/src/services/navigation.service.ts @@ -86,6 +86,7 @@ export class NavigationService { const documentUrl = urlParams.get('url') || urlParams.get('load'); const base64Document = urlParams.get('base64'); const liveServerPort = urlParams.get('liveServer'); + const redirectedFrom = urlParams.get('redirectedFrom'); if (liveServerPort && typeof Number(liveServerPort) === 'number') { SocketClient.connect(window.location.hostname, liveServerPort); @@ -108,6 +109,7 @@ export class NavigationService { state.app.merge({ readOnly: isReadonly, initialized: true, + redirectedFrom: redirectedFrom || false, }); } diff --git a/src/state/app.ts b/src/state/app.ts index aa23d28c4..8b1bd0cd3 100644 --- a/src/state/app.ts +++ b/src/state/app.ts @@ -3,13 +3,15 @@ import { createState, useState } from '@hookstate/core'; export interface AppState { initialized: boolean; readOnly: boolean; - liveServer: boolean, + liveServer: boolean; + redirectedFrom: string | false; } export const appState = createState({ initialized: false, readOnly: false, liveServer: false, + redirectedFrom: false, }); export function useAppState() {