-
-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add a modal with information about what has changed in relation…
… to the playground. (#282)
- Loading branch information
1 parent
e8d403d
commit 150b7ad
Showing
9 changed files
with
112 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<ConfirmModal | ||
title='Welcome to the AsyncAPI Studio!' | ||
show={show} | ||
cancelText='OK' | ||
onCancel={onCancel} | ||
> | ||
<div className="flex flex-col content-center justify-center"> | ||
<div className={`${showMore ? '' : 'h-36'} overflow-y-hidden relative`}> | ||
<Markdown> | ||
{CHANGES} | ||
</Markdown> | ||
{!showMore && ( | ||
<> | ||
<div className='absolute top-12 bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-white' /> | ||
<div className='absolute bottom-0 left-0 right-0 text-center z-50'> | ||
<button | ||
type="button" | ||
className='mx-auto rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:text-sm' | ||
onClick={onShowMoreClick} | ||
> | ||
Show what's changed | ||
</button> | ||
</div> | ||
</> | ||
)} | ||
</div> | ||
</div> | ||
</ConfirmModal> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div className='aui-root'> | ||
<MarkdownComponent> | ||
{children} | ||
</MarkdownComponent> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
export * from './Dropdown'; | ||
export * from './Markdown'; | ||
export * from './Switch'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters