mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
fix(console): application guide drawer mode in details page (#3531)
This commit is contained in:
parent
6e2a84ef61
commit
42bb0a9fab
3 changed files with 90 additions and 68 deletions
|
@ -31,6 +31,7 @@ import { applicationTypeI18nKey } from '@/types/applications';
|
|||
import { withAppInsights } from '@/utils/app-insights';
|
||||
|
||||
import Guide from '../Applications/components/Guide';
|
||||
import GuideModal from '../Applications/components/Guide/GuideModal';
|
||||
import AdvancedSettings from './components/AdvancedSettings';
|
||||
import Settings from './components/Settings';
|
||||
import * as styles from './index.module.scss';
|
||||
|
@ -229,7 +230,7 @@ function ApplicationDetails() {
|
|||
)}
|
||||
<UnsavedChangesAlertModal hasUnsavedChanges={!isDeleted && isDirty} />
|
||||
{isGuideView && (
|
||||
<Guide
|
||||
<GuideModal
|
||||
app={data}
|
||||
onClose={(id) => {
|
||||
navigate(`/applications/${id}`);
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
import type { Application } from '@logto/schemas';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import * as modalStyles from '@/scss/modal.module.scss';
|
||||
|
||||
import Guide from '.';
|
||||
|
||||
type Props = {
|
||||
app?: Application;
|
||||
onClose: (id: string) => void;
|
||||
};
|
||||
|
||||
const GuideModal = ({ app, onClose }: Props) => {
|
||||
if (!app) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
onClose(app.id);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
shouldCloseOnEsc
|
||||
isOpen={Boolean(app)}
|
||||
className={modalStyles.fullScreen}
|
||||
onRequestClose={closeModal}
|
||||
>
|
||||
<Guide app={app} onClose={closeModal} />
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default GuideModal;
|
|
@ -5,13 +5,11 @@ import i18next from 'i18next';
|
|||
import type { MDXProps } from 'mdx/types';
|
||||
import type { LazyExoticComponent } from 'react';
|
||||
import { useEffect, useContext, cloneElement, lazy, Suspense, useState } from 'react';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
import CodeEditor from '@/components/CodeEditor';
|
||||
import TextLink from '@/components/TextLink';
|
||||
import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider';
|
||||
import DetailsSummary from '@/mdx-components/DetailsSummary';
|
||||
import * as modalStyles from '@/scss/modal.module.scss';
|
||||
import type { SupportedSdk } from '@/types/applications';
|
||||
import { applicationTypeAndSdkTypeMappings } from '@/types/applications';
|
||||
|
||||
|
@ -23,7 +21,7 @@ import * as styles from './index.module.scss';
|
|||
type Props = {
|
||||
app?: Application;
|
||||
isCompact?: boolean;
|
||||
onClose: (id: string) => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const Guides: Record<string, LazyExoticComponent<(props: MDXProps) => JSX.Element>> = {
|
||||
|
@ -72,73 +70,62 @@ const Guide = ({ app, isCompact, onClose }: Props) => {
|
|||
const guideI18nKey = `${selectedSdk}_${locale}`.toLowerCase();
|
||||
const GuideComponent = Guides[guideI18nKey] ?? Guides[selectedSdk.toLowerCase()];
|
||||
|
||||
const closeModal = () => {
|
||||
onClose(appId);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
shouldCloseOnEsc
|
||||
isOpen={Boolean(app)}
|
||||
className={modalStyles.fullScreen}
|
||||
onRequestClose={closeModal}
|
||||
>
|
||||
<div className={styles.container}>
|
||||
<GuideHeader
|
||||
appName={appName}
|
||||
selectedSdk={selectedSdk}
|
||||
isCompact={isCompact}
|
||||
onClose={closeModal}
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
{cloneElement(<SdkSelector sdks={sdks} selectedSdk={selectedSdk} />, {
|
||||
className: styles.banner,
|
||||
isCompact,
|
||||
onChange: setSelectedSdk,
|
||||
onToggle: () => {
|
||||
setActiveStepIndex(0);
|
||||
},
|
||||
})}
|
||||
<MDXProvider
|
||||
components={{
|
||||
code: ({ className, children }) => {
|
||||
const [, language] = /language-(\w+)/.exec(className ?? '') ?? [];
|
||||
<div className={styles.container}>
|
||||
<GuideHeader
|
||||
appName={appName}
|
||||
selectedSdk={selectedSdk}
|
||||
isCompact={isCompact}
|
||||
onClose={onClose}
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
{cloneElement(<SdkSelector sdks={sdks} selectedSdk={selectedSdk} />, {
|
||||
className: styles.banner,
|
||||
isCompact,
|
||||
onChange: setSelectedSdk,
|
||||
onToggle: () => {
|
||||
setActiveStepIndex(0);
|
||||
},
|
||||
})}
|
||||
<MDXProvider
|
||||
components={{
|
||||
code: ({ className, children }) => {
|
||||
const [, language] = /language-(\w+)/.exec(className ?? '') ?? [];
|
||||
|
||||
return language ? (
|
||||
<CodeEditor isReadonly language={language} value={String(children)} />
|
||||
) : (
|
||||
<code>{String(children)}</code>
|
||||
);
|
||||
},
|
||||
a: ({ children, ...props }) => (
|
||||
<TextLink {...props} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</TextLink>
|
||||
),
|
||||
details: DetailsSummary,
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<StepsSkeleton />}>
|
||||
{GuideComponent && (
|
||||
<GuideComponent
|
||||
appId={appId}
|
||||
appSecret={appSecret}
|
||||
endpoint={userEndpoint}
|
||||
redirectUris={oidcClientMetadata.redirectUris}
|
||||
postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
|
||||
activeStepIndex={activeStepIndex}
|
||||
isCompact={isCompact}
|
||||
onNext={(nextIndex: number) => {
|
||||
setActiveStepIndex(nextIndex);
|
||||
}}
|
||||
onComplete={closeModal}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
</MDXProvider>
|
||||
</div>
|
||||
return language ? (
|
||||
<CodeEditor isReadonly language={language} value={String(children)} />
|
||||
) : (
|
||||
<code>{String(children)}</code>
|
||||
);
|
||||
},
|
||||
a: ({ children, ...props }) => (
|
||||
<TextLink {...props} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</TextLink>
|
||||
),
|
||||
details: DetailsSummary,
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<StepsSkeleton />}>
|
||||
{GuideComponent && (
|
||||
<GuideComponent
|
||||
appId={appId}
|
||||
appSecret={appSecret}
|
||||
endpoint={userEndpoint}
|
||||
redirectUris={oidcClientMetadata.redirectUris}
|
||||
postLogoutRedirectUris={oidcClientMetadata.postLogoutRedirectUris}
|
||||
activeStepIndex={activeStepIndex}
|
||||
isCompact={isCompact}
|
||||
onNext={(nextIndex: number) => {
|
||||
setActiveStepIndex(nextIndex);
|
||||
}}
|
||||
onComplete={onClose}
|
||||
/>
|
||||
)}
|
||||
</Suspense>
|
||||
</MDXProvider>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue