Skip to content

Commit

Permalink
feat: add a modal with information about what has changed in relation…
Browse files Browse the repository at this point in the history
… to the playground. (#282)
  • Loading branch information
magicmatatjahu authored Mar 3, 2022
1 parent e8d403d commit 150b7ad
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 6 deletions.
3 changes: 2 additions & 1 deletion src/components/Content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -50,6 +50,7 @@ export const Content: React.FunctionComponent<ContentProps> = () => { // eslint-
<div className="flex flex-1 flex-row relative">
<div className="flex flex-1 flex-row relative">
<NewFileModal />
<RedirectedModal />
<SplitPane
size={viewEnabled ? secondPaneSize : 0}
minSize={0}
Expand Down
6 changes: 4 additions & 2 deletions src/components/Modals/ConfirmModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ interface ConfirmModalProps {
title: React.ReactNode;
description?: React.ReactNode;
confirmText?: React.ReactNode;
cancelText?: React.ReactNode;
confirmDisabled?: boolean;
cancelDisabled?: boolean;
opener?: React.ReactNode;
Expand All @@ -23,6 +24,7 @@ const ConfirmModalSans: React.ForwardRefRenderFunction<ConfirmModalHandle, React
title,
description,
confirmText = 'Save',
cancelText = 'Cancel',
confirmDisabled = true,
cancelDisabled = false,
opener,
Expand Down Expand Up @@ -117,7 +119,7 @@ const ConfirmModalSans: React.ForwardRefRenderFunction<ConfirmModalHandle, React
<div className="my-8 space-y-4">{children}</div>
</div>
</div>
<div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<div className={`mt-5 sm:mt-6 sm:grid sm:gap-3 sm:grid-flow-row-dense ${onSubmit ? 'sm:grid-cols-2' : ''}`}>
{onSubmit && (
<button
type="button"
Expand All @@ -137,7 +139,7 @@ const ConfirmModalSans: React.ForwardRefRenderFunction<ConfirmModalHandle, React
disabled={cancelDisabled}
ref={cancelButtonRef}
>
Cancel
{cancelText}
</button>
</div>
</div>
Expand Down
81 changes: 81 additions & 0 deletions src/components/Modals/RedirectedModal.tsx
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&apos;s changed
</button>
</div>
</>
)}
</div>
</div>
</ConfirmModal>
);
};
2 changes: 2 additions & 0 deletions src/components/Modals/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
3 changes: 1 addition & 2 deletions src/components/Visualiser/Nodes/ApplicationNode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 16 additions & 0 deletions src/components/common/Markdown.tsx
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>
);
};
1 change: 1 addition & 0 deletions src/components/common/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './Dropdown';
export * from './Markdown';
export * from './Switch';
2 changes: 2 additions & 0 deletions src/services/navigation.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -108,6 +109,7 @@ export class NavigationService {
state.app.merge({
readOnly: isReadonly,
initialized: true,
redirectedFrom: redirectedFrom || false,
});
}

Expand Down
4 changes: 3 additions & 1 deletion src/state/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<AppState>({
initialized: false,
readOnly: false,
liveServer: false,
redirectedFrom: false,
});

export function useAppState() {
Expand Down

0 comments on commit 150b7ad

Please sign in to comment.