Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-31 22:51:25 -05:00
Code Issues Activity

Merge pull request #5591 from logto-io/simeng-log-8560-customize-jwt-claims-detail-page-redesign

Browse source 
refactor(console): redesign the jwt details page
This commit is contained in:
Darcy Ye 2024-04-01 16:43:42 +08:00 • committed by GitHub
commit 48a4da0ccc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
52 changed files with 656 additions and 535 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/assets/icons/conical-flask.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5676 11.6599L10.1609 5.81992V2.66659H10.8276C11.0044 2.66659 11.174 2.59635 11.299 2.47132C11.424 2.3463 11.4942 2.17673 11.4942 1.99992C11.4942 1.82311 11.424 1.65354 11.299 1.52851C11.174 1.40349 11.0044 1.33325 10.8276 1.33325H5.49424C5.31743 1.33325 5.14786 1.40349 5.02283 1.52851C4.89781 1.65354 4.82757 1.82311 4.82757 1.99992C4.82757 2.17673 4.89781 2.3463 5.02283 2.47132C5.14786 2.59635 5.31743 2.66659 5.49424 2.66659H6.1609V5.81992L2.75424 11.6599C2.57727 11.9637 2.48351 12.3088 2.48243 12.6604C2.48135 13.012 2.57297 13.3577 2.74807 13.6626C2.92317 13.9675 3.17555 14.2208 3.47977 14.3971C3.78399 14.5734 4.12931 14.6663 4.4809 14.6666H11.8142C12.1658 14.6663 12.5111 14.5734 12.8154 14.3971C13.1196 14.2208 13.372 13.9675 13.5471 13.6626C13.7222 13.3577 13.8138 13.012 13.8127 12.6604C13.8116 12.3088 13.7179 11.9637 13.5409 11.6599H13.5676ZM7.4009 6.32659C7.4597 6.22758 7.49186 6.11504 7.49424 5.99992V2.66659H8.82757V5.99992C8.82879 6.11731 8.86099 6.2323 8.9209 6.33325L9.49424 7.33325H6.82757L7.4009 6.32659ZM12.4142 12.9933C12.3561 13.094 12.2725 13.1778 12.172 13.2363C12.0714 13.2947 11.9572 13.3259 11.8409 13.3266H4.50757C4.39123 13.3259 4.2771 13.2947 4.17651 13.2363C4.07593 13.1778 3.99241 13.094 3.93424 12.9933C3.87573 12.8919 3.84492 12.7769 3.84492 12.6599C3.84492 12.5429 3.87573 12.4279 3.93424 12.3266L6.04757 8.66659H10.2809L12.4142 12.3333C12.4727 12.4346 12.5036 12.5496 12.5036 12.6666C12.5036 12.7836 12.4727 12.8986 12.4142 12.9999V12.9933ZM6.82757 9.99992C6.69572 9.99992 6.56682 10.039 6.45719 10.1123C6.34756 10.1855 6.26211 10.2896 6.21165 10.4115C6.16119 10.5333 6.14799 10.6673 6.17371 10.7966C6.19944 10.926 6.26293 11.0448 6.35617 11.138C6.4494 11.2312 6.56819 11.2947 6.69751 11.3204C6.82683 11.3462 6.96088 11.333 7.08269 11.2825C7.20451 11.232 7.30863 11.1466 7.38188 11.037C7.45514 10.9273 7.49424 10.7984 7.49424 10.6666C7.49424 10.4898 7.424 10.3202 7.29897 10.1952C7.17395 10.0702 7.00438 9.99992 6.82757 9.99992ZM9.49424 10.6666C9.36238 10.6666 9.23349 10.7057 9.12386 10.7789C9.01422 10.8522 8.92878 10.9563 8.87832 11.0781C8.82786 11.1999 8.81466 11.334 8.84038 11.4633C8.8661 11.5926 8.9296 11.7114 9.02283 11.8047C9.11607 11.8979 9.23486 11.9614 9.36418 11.9871C9.4935 12.0128 9.62754 11.9996 9.74936 11.9492C9.87118 11.8987 9.9753 11.8133 10.0485 11.7036C10.1218 11.594 10.1609 11.4651 10.1609 11.3333C10.1609 11.1564 10.0907 10.9869 9.96564 10.8618C9.84062 10.7368 9.67105 10.6666 9.49424 10.6666Z" fill="currentcolor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

12
packages/console/src/components/SubmitFormChangesActionBar/index.tsx
View file

@ -1,3 +1,4 @@
import { type AdminConsoleKey } from '@logto/phrases';
import classNames from 'classnames';
import Button from '@/ds-components/Button';
@ -9,9 +10,16 @@ type Props = {
isSubmitting: boolean;
onSubmit: () => Promise<void>;
onDiscard: () => void;
confirmText?: AdminConsoleKey;
};
function SubmitFormChangesActionBar({ isOpen, isSubmitting, onSubmit, onDiscard }: Props) {
function SubmitFormChangesActionBar({
isOpen,
isSubmitting,
confirmText = 'general.save_changes',
onSubmit,
onDiscard,
}: Props) {
return (
<div className={classNames(styles.container, isOpen && styles.active)}>
<div className={styles.actionBar}>
@ -27,7 +35,7 @@ function SubmitFormChangesActionBar({ isOpen, isSubmitting, onSubmit, onDiscard
isLoading={isSubmitting}
type="primary"
size="medium"
title="general.save_changes"
title={confirmText}
onClick={async () => onSubmit()}
/>
</div>

2
packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx
View file

@ -129,7 +129,7 @@ export const useSidebarMenuItems = (): {
{
Icon: JwtClaims,
title: 'customize_jwt',
isHidden: !isDevFeaturesEnabled,
isHidden: !(isCloud && isDevFeaturesEnabled),
},
{
Icon: Hook,

2
packages/console/src/containers/ConsoleContent/index.tsx
View file

@ -243,7 +243,7 @@ function ConsoleContent() {
</Route>
)}
{isCloud && isDevFeaturesEnabled && (
<Route path="jwt-customizer">
<Route path="customize-jwt">
<Route index element={<CustomizeJwt />} />
<Route path=":tokenType/:action" element={<CustomizeJwtDetails />} />
</Route>

0
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx
View file

0
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/ActionButton/index.tsx → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/index.tsx
View file

39
packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/Dashboard/index.module.scss Normal file
View file

@ -0,0 +1,39 @@
@use '@/scss/underscore' as _;
.dashboard {
background-color: var(--color-code-bg-float);
border-top: 1px solid var(--color-code-dark-bg-focused);
font-family: 'Roboto Mono', monospace;
overflow: auto;
flex: 1;
.dashboardHeader {
padding: _.unit(3) _.unit(4);
display: flex;
justify-content: space-between;
align-items: center;
font: var(--font-label-2);
font-family: 'Roboto Mono', monospace;
color: var(--color-code-white);
}
.dashboardContent {
padding: _.unit(2) _.unit(4);
font: var(--font-body-2);
overflow: auto;
color: var(--color-code-white);
pre {
white-space: pre-wrap;
&.error {
color: var(--color-error);
}
&:first-child {
margin-top: 0;
}
}
}
}

30
packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/Dashboard/index.tsx Normal file
View file

@ -0,0 +1,30 @@
import classNames from 'classnames';
import { type ReactNode } from 'react';
import CloseIcon from '@/assets/icons/close.svg';
import IconButton from '@/ds-components/IconButton';
import * as styles from './index.module.scss';
export type Props = {
title: string;
content: ReactNode;
className?: string;
onClose: () => void;
};
function Dashboard({ title, content, className, onClose }: Props) {
return (
<div className={classNames(styles.dashboard, className)}>
<div className={styles.dashboardHeader}>
<span>{title}</span>
<IconButton onClick={onClose}>
<CloseIcon />
</IconButton>
</div>
<div className={styles.dashboardContent}>{content}</div>
</div>
);
}
export default Dashboard;

7
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/config.ts → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/config.ts
View file

@ -7,6 +7,13 @@ export const logtoDarkTheme: IStandaloneThemeData = {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': '#090613', // :token/code/code-bg
},
};
export const logtoLightTheme: IStandaloneThemeData = {
...logtoDarkTheme,
colors: {
'editor.background': '#181133', // :token/code/code-bg
},

10
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/index.module.scss → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
View file

@ -1,9 +1,6 @@
@use '@/scss/underscore' as _;
@use '@/scss/code-editor' as codeEditor;
.codeEditor {
@include codeEditor.color;
@include codeEditor.font;
position: relative;
display: flex;
flex-direction: column;
@ -37,7 +34,7 @@
&.active,
&:hover {
color: var(--color-code-white);
background-color: var(--color-code-tab-active-bg);
background-color: var(--color-code-dark-bg-focused);
border-radius: 8px;
}
}
@ -54,5 +51,10 @@
.editorContainer {
position: relative;
flex-grow: 1;
&.dashboardOpen {
flex-grow: 0;
height: 50%;
}
}
}

61
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/index.tsx → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
View file

@ -1,17 +1,21 @@
import { Editor, useMonaco, type BeforeMount, type OnMount } from '@monaco-editor/react';
import { Theme } from '@logto/schemas';
import { Editor, useMonaco, type OnMount } from '@monaco-editor/react';
import { type Nullable } from '@silverhand/essentials';
import classNames from 'classnames';
import { useCallback, useEffect, useMemo, useRef } from 'react';
import { useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react';
import CopyToClipboard from '@/ds-components/CopyToClipboard';
import useTheme from '@/hooks/use-theme';
import { onKeyDownHandler } from '@/utils/a11y';
import CodeRestoreButton from './ActionButton/CodeRestoreButton.js';
import { defaultOptions, logtoDarkTheme } from './config.js';
import DashBoard, { type Props as DashboardProps } from './Dashboard';
import { defaultOptions, logtoDarkTheme, logtoLightTheme } from './config.js';
import * as styles from './index.module.scss';
import type { IStandaloneCodeEditor, ModelSettings } from './type.js';
import useEditorHeight from './use-editor-height.js';
export type { Props as DashboardProps } from './Dashboard';
export type { ModelControl, ModelSettings } from './type.js';
type ActionButtonType = 'restore' | 'copy';
@ -26,6 +30,8 @@ type Props = {
environmentVariablesDefinition?: string;
onChange?: (value: string | undefined) => void;
onMountHandler?: (editor: IStandaloneCodeEditor) => void;
actionButtons?: ReactNode;
dashboard?: DashboardProps;
};
/**
* Monaco code editor component.
@ -38,6 +44,8 @@ type Props = {
* @param {string} prop.value - The value of the code editor for the current active model.
* @param {(value: string | undefined) => void} prop.onChange - The callback function to handle the value change of the code editor.
* @param {string} [prop.environmentVariablesDefinition] - The environment variables type definition for the script section.
* @param {ReactNode} [actionButtons] - Additional action buttons shown on the header
* @param {DashboardProps} [dashboard] - The dashboard component shown at the bottom of the editor.
*
* @returns
*/
@ -51,9 +59,12 @@ function MonacoCodeEditor({
setActiveModel,
onChange,
onMountHandler,
actionButtons,
dashboard,
}: Props) {
const monaco = useMonaco();
const editorRef = useRef<Nullable<IStandaloneCodeEditor>>(null);
const theme = useTheme();
const activeModel = useMemo(
() => activeModelName && models.find((model) => model.name === activeModelName),
@ -63,8 +74,9 @@ function MonacoCodeEditor({
const isMultiModals = useMemo(() => models.length > 1, [models]);
// Get the container ref and the editor height
const { containerRef, headerRef, editorHeight } = useEditorHeight();
const { containerRef, editorHeight } = useEditorHeight();
// Handle editor extraLibs and language compile settings
useEffect(() => {
// Monaco will be ready after the editor is mounted, useEffect will be called after the monaco is ready
if (!monaco || !activeModel) {
@ -84,18 +96,27 @@ function MonacoCodeEditor({
'environmentVariables.d.ts'
);
}
if (activeModel.language === 'typescript') {
// Set the typescript compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
allowNonTsExtensions: true,
strictNullChecks: true,
});
}
}, [activeModel, monaco, environmentVariablesDefinition]);
const handleEditorWillMount = useCallback<BeforeMount>((monaco) => {
// Register the new logto theme
monaco.editor.defineTheme('logto-dark', logtoDarkTheme);
// Handle the editor theme settings
useEffect(() => {
// Monaco will be ready after the editor is mounted, useEffect will be called after the monaco is ready
if (!monaco) {
return;
}
// Set the typescript compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
allowNonTsExtensions: true,
strictNullChecks: true,
});
}, []);
const editorTheme = theme === Theme.Light ? logtoLightTheme : logtoDarkTheme;
monaco.editor.defineTheme('logto-dark', editorTheme);
}, [monaco, theme]);
const handleEditorDidMount = useCallback<OnMount>(
(editor) => {
@ -107,8 +128,8 @@ function MonacoCodeEditor({
);
return (
<div ref={containerRef} className={classNames(className, styles.codeEditor)}>
<header ref={headerRef}>
<div className={classNames(className, styles.codeEditor)}>
<header>
<div className={styles.tabList}>
{models.map(({ name, title, icon }) => (
<div
@ -138,7 +159,7 @@ function MonacoCodeEditor({
{enabledActions.includes('restore') && (
<CodeRestoreButton
onClick={() => {
if (activeModel) {
if (activeModel && value !== activeModel.defaultValue) {
onChange?.(activeModel.defaultValue);
}
}}
@ -147,9 +168,13 @@ function MonacoCodeEditor({
{enabledActions.includes('copy') && (
<CopyToClipboard variant="icon" value={editorRef.current?.getValue() ?? ''} />
)}
{actionButtons}
</div>
</header>
<div className={styles.editorContainer}>
<div
ref={containerRef}
className={classNames(styles.editorContainer, dashboard && styles.dashboardOpen)}
>
{activeModel && (
<Editor
height={editorHeight}
@ -162,12 +187,12 @@ function MonacoCodeEditor({
}}
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty string is falsy
value={value || activeModel.defaultValue}
beforeMount={handleEditorWillMount}
onMount={handleEditorDidMount}
onChange={onChange}
/>
)}
</div>
{dashboard && <DashBoard {...dashboard} />}
</div>
);
}

0
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/type.ts → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/type.ts
View file

11
packages/console/src/pages/CustomizeJwtDetails/MonacoCodeEditor/use-editor-height.ts → packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/use-editor-height.ts
View file

@ -1,23 +1,18 @@
import { useRef, useState, useLayoutEffect } from 'react';
import { useLayoutEffect, useRef, useState } from 'react';
// Recalculate the height of the editor when the container size changes
// This is to avoid the code editor's height shaking when the content is updated.
// @see {@link https://github.com/react-monaco-editor/react-monaco-editor/issues/391}
const useEditorHeight = () => {
const containerRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const [editorHeight, setEditorHeight] = useState<number | string>('100%');
const safeArea = 16;
useLayoutEffect(() => {
const handleResize = () => {
const safeAreaHeight = headerRef.current?.clientHeight
? headerRef.current.clientHeight + safeArea
: safeArea;
if (containerRef.current) {
setEditorHeight(containerRef.current.clientHeight - safeAreaHeight);
setEditorHeight(containerRef.current.clientHeight - safeArea);
}
};
@ -34,7 +29,7 @@ const useEditorHeight = () => {
};
}, []);
return { containerRef, headerRef, editorHeight };
return { containerRef, editorHeight };
};
export default useEditorHeight;

6
packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/ErrorContent/index.module.scss Normal file
View file

@ -0,0 +1,6 @@
@use '@/scss/underscore' as _;
.error {
margin: _.unit(4) 0;
color: var(--color-error-60);
}

28
packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/ErrorContent/index.tsx Normal file
View file

@ -0,0 +1,28 @@
import { type TestResultData } from '@/pages/CustomizeJwtDetails/MainContent/ScriptSection/use-test-handler';
import * as styles from './index.module.scss';
type Props = {
testResult: TestResultData;
};
function ErrorContent({ testResult }: Props) {
return (
<div>
{testResult.error && (
<pre className={styles.error}>
{'Error: \n'}
{testResult.error}
</pre>
)}
{testResult.payload && (
<pre>
{'JWT Payload: \n'}
{testResult.payload}
</pre>
)}
</div>
);
}
export default ErrorContent;

17
packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.module.scss
View file

@ -1,17 +1,18 @@
@use '@/scss/underscore' as _;
.codePanel {
.scripeSection {
position: relative;
display: flex;
flex-direction: column;
min-width: 50%;
.cardTitle {
font: var(--font-label-2);
margin-bottom: _.unit(3);
.fixHeightWrapper {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
}
.flexGrow {
.codeEditor {
min-height: 200px;
flex-grow: 1;
}
}

95
packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/index.tsx
View file

@ -1,10 +1,17 @@
/* Code Editor for the custom JWT claims script. */
import { LogtoJwtTokenPath } from '@logto/schemas';
import classNames from 'classnames';
import { useCallback, useContext, useMemo } from 'react';
import { Controller, useFormContext, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import RunIcon from '@/assets/icons/start.svg';
import Button from '@/ds-components/Button';
import { CodeEditorLoadingContext } from '@/pages/CustomizeJwtDetails/CodeEditorLoadingContext';
import MonacoCodeEditor, { type ModelSettings } from '@/pages/CustomizeJwtDetails/MonacoCodeEditor';
import MonacoCodeEditor, {
type DashboardProps,
type ModelSettings,
} from '@/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor';
import { type JwtCustomizerForm } from '@/pages/CustomizeJwtDetails/type';
import {
accessTokenJwtCustomizerModel,
@ -12,9 +19,12 @@ import {
} from '@/pages/CustomizeJwtDetails/utils/config';
import { buildEnvironmentVariablesTypeDefinition } from '@/pages/CustomizeJwtDetails/utils/type-definitions';
import ErrorContent from './ErrorContent';
import * as styles from './index.module.scss';
import useTestHandler from './use-test-handler';
function ScriptSection() {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { watch, control } = useFormContext<JwtCustomizerForm>();
const tokenType = watch('tokenType');
@ -46,35 +56,64 @@ function ScriptSection() {
setIsMonacoLoaded(true);
}, [setIsMonacoLoaded]);
return (
<Controller
// Force rerender the controller when the token type changes
// Otherwise the input field will not be updated
key={tokenType}
control={control}
name="script"
render={({ field: { onChange, value }, formState: { defaultValues } }) => (
<MonacoCodeEditor
className={styles.flexGrow}
enabledActions={['restore', 'copy']}
models={[activeModel]}
activeModelName={activeModel.name}
value={value}
environmentVariablesDefinition={environmentVariablesTypeDefinition}
onChange={(newValue) => {
// If the value is the same as the default code and the original form script value is undefined, reset the value to undefined as well
if (newValue === activeModel.defaultValue && !defaultValues?.script) {
onChange('');
return;
}
// Test handler
const { onTestHandler, setTestResult, isLoading, testResult } = useTestHandler();
// Input value should not be undefined for react-hook-form @see https://react-hook-form.com/docs/usecontroller/controller
onChange(newValue ?? '');
}}
onMountHandler={onMountHandler}
const dashBoardProps = useMemo<DashboardProps | undefined>(() => {
if (!testResult) {
return;
}
return {
title: t('jwt_claims.tester.result_title'),
content: <ErrorContent testResult={testResult} />,
onClose: () => {
setTestResult(undefined);
},
};
}, [setTestResult, t, testResult]);
return (
<div className={styles.scripeSection}>
<div className={styles.fixHeightWrapper}>
<Controller
control={control}
name="script"
render={({ field: { onChange, value }, formState: { defaultValues } }) => (
<MonacoCodeEditor
className={classNames(styles.codeEditor)}
enabledActions={['restore', 'copy']}
models={[activeModel]}
activeModelName={activeModel.name}
value={value}
environmentVariablesDefinition={environmentVariablesTypeDefinition}
actionButtons={
<Button
icon={<RunIcon />}
size="small"
title="jwt_claims.tester.run_button"
type="primary"
isLoading={isLoading}
onClick={onTestHandler}
/>
}
dashboard={dashBoardProps}
onChange={(newValue) => {
// If the value is the same as the default code and the original form script value is undefined, reset the value to undefined as well
if (newValue === activeModel.defaultValue && !defaultValues?.script) {
onChange('');
return;
}
// Input value should not be undefined for react-hook-form @see https://react-hook-form.com/docs/usecontroller/controller
onChange(newValue ?? '');
}}
onMountHandler={onMountHandler}
/>
)}
/>
)}
/>
</div>
</div>
);
}

65
packages/console/src/pages/CustomizeJwtDetails/MainContent/ScriptSection/use-test-handler.ts Normal file
View file

@ -0,0 +1,65 @@
import { type JsonObject, type RequestErrorBody } from '@logto/schemas';
import { HTTPError } from 'ky';
import { useCallback, useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { z } from 'zod';
import useApi from '@/hooks/use-api';
import { type JwtCustomizerForm } from '@/pages/CustomizeJwtDetails/type';
import { formatFormDataToTestRequestPayload } from '@/pages/CustomizeJwtDetails/utils/format';
const testEndpointPath = 'api/configs/jwt-customizer/test';
const jwtCustomizerGeneralErrorCode = 'jwt_customizer.general';
export type TestResultData = {
error?: string;
payload?: string;
};
const useTestHandler = () => {
const [testResult, setTestResult] = useState<TestResultData>();
const [isLoading, setIsLoading] = useState(false);
const { getValues } = useFormContext<JwtCustomizerForm>();
const api = useApi({ hideErrorToast: true });
const onTestHandler = useCallback(async () => {
const payload = getValues();
setIsLoading(true);
const result = await api
.post(testEndpointPath, {
json: formatFormDataToTestRequestPayload(payload),
})
.json<JsonObject>()
.catch(async (error: unknown) => {
if (error instanceof HTTPError) {
const { response } = error;
const metadata = await response.clone().json<RequestErrorBody>();
if (metadata.code === jwtCustomizerGeneralErrorCode) {
const result = z.object({ message: z.string() }).safeParse(metadata.data);
if (result.success) {
setTestResult({
error: result.data.message,
});
return;
}
}
}
setTestResult({
error: error instanceof Error ? error.message : String(error),
});
})
.finally(() => {
setIsLoading(false);
});
if (result) {
setTestResult({ payload: JSON.stringify(result, null, 2) });
}
}, [api, getValues]);
return { testResult, isLoading, onTestHandler, setTestResult };
};
export default useTestHandler;

3
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/EnvironmentVariablesField.tsx → packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/EnvironmentVariablesField.tsx
View file

@ -4,8 +4,7 @@ import { useTranslation } from 'react-i18next';
import FormField from '@/ds-components/FormField';
import KeyValueInputField from '@/ds-components/KeyValueInputField';
import { type JwtCustomizerForm } from '../../type';
import { type JwtCustomizerForm } from '@/pages/CustomizeJwtDetails/type';
const isValidKey = (key: string) => {
return /^\w+$/.test(key);

60
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/GuideCard/index.module.scss Normal file
View file

@ -0,0 +1,60 @@
@use '@/scss/underscore' as _;
.card {
.headerRow {
display: flex;
flex-direction: row;
gap: _.unit(4);
align-items: center;
cursor: pointer;
user-select: none;
}
.cardHeader {
flex: 1;
}
.cardTitle {
font: var(--font-label-2);
color: var(--color-text);
margin-bottom: _.unit(1);
}
.cardSubtitle {
font: var(--font-body-2);
color: var(--color-text-secondary);
}
.cardContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
// Collapsible content should be hidden by default, margin space can only be set at the child level
> *:first-child {
margin-top: _.unit(6);
}
> *:not(:last-child) {
margin-bottom: _.unit(4);
}
}
.expandButton {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
color: var(--color-text-secondary);
}
&.expanded {
.expandButton {
transform: rotate(180deg);
}
.cardContent {
max-height: 1000;
overflow: visible;
}
}
}

12
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/GuideCard.tsx → packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/GuideCard/index.tsx
View file

@ -1,5 +1,4 @@
import classNames from 'classnames';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import CaretExpandedIcon from '@/assets/icons/caret-expanded.svg';
@ -18,23 +17,24 @@ export enum CardType {
type GuardCardProps = {
name: CardType;
children?: React.ReactNode;
isExpanded: boolean;
setExpanded: (expanded: boolean) => void;
};
function GuideCard({ name, children }: GuardCardProps) {
const [expanded, setExpanded] = useState(false);
function GuideCard({ name, children, isExpanded, setExpanded }: GuardCardProps) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
return (
<Card className={classNames(styles.card, styles.collapsible, expanded && styles.expanded)}>
<Card className={classNames(styles.card, isExpanded && styles.expanded)}>
<div
className={styles.headerRow}
role="button"
tabIndex={0}
onClick={() => {
setExpanded((expanded) => !expanded);
setExpanded(!isExpanded);
}}
onKeyDown={onKeyDownHandler(() => {
setExpanded((expanded) => !expanded);
setExpanded(!isExpanded);
})}
>
<div className={styles.cardHeader}>

30
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.module.scss Normal file
View file

@ -0,0 +1,30 @@
@use '@/scss/underscore' as _;
.sampleCode {
:global {
/* stylelint-disable-next-line selector-class-pattern */
.monaco-editor {
border-radius: 8px;
/* stylelint-disable-next-line selector-class-pattern */
.overflow-guard {
border-radius: 8px;
}
/* stylelint-disable-next-line selector-class-pattern */
.lines-content {
padding: 0 16px;
}
}
}
}
.envVariablesField {
margin-bottom: _.unit(4);
}
.description {
font: var(--font-body-2);
color: var(--color-text-secondary);
}

58
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab.tsx → packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/InstructionTab/index.tsx
View file

@ -1,21 +1,24 @@
import { LogtoJwtTokenPath } from '@logto/schemas';
import { Editor } from '@monaco-editor/react';
import classNames from 'classnames';
import { useState } from 'react';
import { useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { type JwtCustomizerForm } from '../../type';
import { type JwtCustomizerForm } from '@/pages/CustomizeJwtDetails/type';
import {
environmentVariablesCodeExample,
fetchExternalDataCodeExample,
sampleCodeEditorOptions,
typeDefinitionCodeEditorOptions,
} from '../../utils/config';
} from '@/pages/CustomizeJwtDetails/utils/config';
import {
accessTokenPayloadTypeDefinition,
clientCredentialsPayloadTypeDefinition,
jwtCustomizerUserContextTypeDefinition,
} from '../../utils/type-definitions';
} from '@/pages/CustomizeJwtDetails/utils/type-definitions';
import * as tabContentStyles from '../index.module.scss';
import EnvironmentVariablesField from './EnvironmentVariablesField';
import GuideCard, { CardType } from './GuideCard';
@ -28,15 +31,22 @@ type Props = {
/* Instructions and environment variable settings for the custom JWT claims script. */
function InstructionTab({ isActive }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [expendCard, setExpendCard] = useState<CardType>();
const { watch } = useFormContext<JwtCustomizerForm>();
const tokenType = watch('tokenType');
return (
<div className={classNames(styles.tabContent, isActive && styles.active)}>
<div className={styles.description}>{t('jwt_claims.jwt_claims_description')}</div>
<div className={classNames(tabContentStyles.tabContent, isActive && tabContentStyles.active)}>
<div className={tabContentStyles.description}>{t('jwt_claims.jwt_claims_description')}</div>
{tokenType === LogtoJwtTokenPath.AccessToken && (
<GuideCard name={CardType.UserData}>
<GuideCard
name={CardType.UserData}
isExpanded={expendCard === CardType.UserData}
setExpanded={(expand) => {
setExpendCard(expand ? CardType.UserData : undefined);
}}
>
<Editor
language="typescript"
className={styles.sampleCode}
@ -47,7 +57,13 @@ function InstructionTab({ isActive }: Props) {
/>
</GuideCard>
)}
<GuideCard name={CardType.TokenData}>
<GuideCard
name={CardType.TokenData}
isExpanded={expendCard === CardType.TokenData}
setExpanded={(expand) => {
setExpendCard(expand ? CardType.TokenData : undefined);
}}
>
<Editor
language="typescript"
className={styles.sampleCode}
@ -61,7 +77,13 @@ function InstructionTab({ isActive }: Props) {
options={typeDefinitionCodeEditorOptions}
/>
</GuideCard>
<GuideCard name={CardType.FetchExternalData}>
<GuideCard
name={CardType.FetchExternalData}
isExpanded={expendCard === CardType.FetchExternalData}
setExpanded={(expand) => {
setExpendCard(expand ? CardType.FetchExternalData : undefined);
}}
>
<div className={styles.description}>{t('jwt_claims.fetch_external_data.description')}</div>
<Editor
language="typescript"
@ -72,18 +94,14 @@ function InstructionTab({ isActive }: Props) {
options={sampleCodeEditorOptions}
/>
</GuideCard>
<GuideCard name={CardType.EnvironmentVariables}>
{/**
* We use useFieldArray hook to manage the list of environment variables in the EnvironmentVariablesField component.
* useFieldArray will read the form context and return the necessary methods and values to manage the list.
* The form context will mutate when the tokenType changes. It will provide different form state and methods based on the tokenType. (@see JwtClaims component.)
* However, the form context/controller updates did not trigger a re-render of the useFieldArray hook. (@see {@link https://github.com/react-hook-form/react-hook-form/blob/master/src/useFieldArray.ts#L95})
*
* This cause issues when the tokenType changes and the environment variables list is not rerendered. The form state will be stale.
* In order to fix this, we need to re-render the EnvironmentVariablesField component when the tokenType changes.
* Achieve this by adding a key to the EnvironmentVariablesField component. Force a re-render when the tokenType changes.
*/}
<EnvironmentVariablesField key={tokenType} className={styles.envVariablesField} />
<GuideCard
name={CardType.EnvironmentVariables}
isExpanded={expendCard === CardType.EnvironmentVariables}
setExpanded={(expand) => {
setExpendCard(expand ? CardType.EnvironmentVariables : undefined);
}}
>
<EnvironmentVariablesField className={styles.envVariablesField} />
<div className={styles.description}>
{t('jwt_claims.environment_variables.sample_code')}
</div>

47
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestResult.tsx
View file

@ -1,47 +0,0 @@
import { useTranslation } from 'react-i18next';
import CloseIcon from '@/assets/icons/close.svg';
import IconButton from '@/ds-components/IconButton';
import * as styles from './index.module.scss';
export type TestResultData = {
error?: string;
payload?: string;
};
type Props = {
testResult: TestResultData;
onClose: () => void;
};
function TestResult({ testResult, onClose }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
return (
<div className={styles.testResult}>
<div className={styles.testResultHeader}>
<span>{t('tester.result_title')}</span>
<IconButton onClick={onClose}>
<CloseIcon />
</IconButton>
</div>
<div className={styles.testResultContent}>
{testResult.error && (
<pre className={styles.error}>
{'Error: \n'}
{testResult.error}
</pre>
)}
{testResult.payload && (
<pre>
{'JWT Payload: \n'}
{testResult.payload}
</pre>
)}
</div>
</div>
);
}
export default TestResult;

201
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab.tsx
View file

@ -1,201 +0,0 @@
import { LogtoJwtTokenPath, type JsonObject, type RequestErrorBody } from '@logto/schemas';
import { conditional } from '@silverhand/essentials';
import classNames from 'classnames';
import { HTTPError } from 'ky';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Controller, useFormContext, type ControllerRenderProps } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import Button from '@/ds-components/Button';
import Card from '@/ds-components/Card';
import useApi from '@/hooks/use-api';
import MonacoCodeEditor, { type ModelControl, type ModelSettings } from '../../MonacoCodeEditor';
import { type JwtCustomizerForm } from '../../type';
import {
accessTokenPayloadTestModel,
clientCredentialsPayloadTestModel,
userContextTestModel,
} from '../../utils/config';
import { formatFormDataToTestRequestPayload } from '../../utils/format';
import TestResult, { type TestResultData } from './TestResult';
import * as styles from './index.module.scss';
type Props = {
isActive: boolean;
};
const accessTokenModelSettings = [accessTokenPayloadTestModel, userContextTestModel];
const clientCredentialsModelSettings = [clientCredentialsPayloadTestModel];
const testEndpointPath = 'api/configs/jwt-customizer/test';
const jwtCustomizerGeneralErrorCode = 'jwt_customizer.general';
/**
* SampleCode form filed value update formatter.
* Reset the field to undefined if the value is the same as the default value
*/
const updateSampleCodeValue = (model: ModelSettings, newValue: string | undefined) => {
return newValue === model.defaultValue ? undefined : newValue;
};
function TestTab({ isActive }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
const [testResult, setTestResult] = useState<TestResultData>();
const [activeModelName, setActiveModelName] = useState<string>();
const api = useApi({ hideErrorToast: true });
const { watch, control, formState, getValues } = useFormContext<JwtCustomizerForm>();
const tokenType = watch('tokenType');
const editorModels = useMemo(
() =>
tokenType === LogtoJwtTokenPath.AccessToken
? accessTokenModelSettings
: clientCredentialsModelSettings,
[tokenType]
);
useEffect(() => {
setActiveModelName(editorModels[0]?.name);
}, [editorModels, tokenType]);
// Clear the test result when the token type changes
useEffect(() => {
setTestResult(undefined);
}, [tokenType]);
const onTestHandler = useCallback(async () => {
const payload = getValues();
const result = await api
.post(testEndpointPath, {
json: formatFormDataToTestRequestPayload(payload),
})
.json<JsonObject>()
.catch(async (error: unknown) => {
if (error instanceof HTTPError) {
const { response } = error;
const metadata = await response.clone().json<RequestErrorBody>();
if (metadata.code === jwtCustomizerGeneralErrorCode) {
const result = z.object({ message: z.string() }).safeParse(metadata.data);
if (result.success) {
setTestResult({
error: result.data.message,
});
return;
}
}
}
setTestResult({
error: error instanceof Error ? error.message : String(error),
});
});
if (result) {
setTestResult({ payload: JSON.stringify(result, null, 2) });
}
}, [api, getValues]);
const getModelControllerProps = useCallback(
({ value, onChange }: ControllerRenderProps<JwtCustomizerForm, 'testSample'>): ModelControl => {
return {
value:
activeModelName === userContextTestModel.name ? value.contextSample : value.tokenSample,
onChange: (newValue: string | undefined) => {
// Form value is a object we need to update the specific field
const updatedValue: JwtCustomizerForm['testSample'] = {
...value,
...conditional(
activeModelName === userContextTestModel.name && {
contextSample: updateSampleCodeValue(userContextTestModel, newValue),
}
),
...conditional(
activeModelName === accessTokenPayloadTestModel.name && {
tokenSample: updateSampleCodeValue(accessTokenPayloadTestModel, newValue),
}
),
...conditional(
activeModelName === clientCredentialsPayloadTestModel.name && {
// Reset the field to undefined if the value is the same as the default value
tokenSample: updateSampleCodeValue(clientCredentialsPayloadTestModel, newValue),
}
),
};
onChange(updatedValue);
},
};
},
[activeModelName]
);
const validateSampleCode = useCallback(
(value: JwtCustomizerForm['testSample']) => {
for (const [_, sampleCode] of Object.entries(value)) {
if (sampleCode) {
try {
JSON.parse(sampleCode);
} catch {
return t('form_error.invalid_json');
}
}
}
return true;
},
[t]
);
return (
<div className={classNames(styles.tabContent, isActive && styles.active)}>
<Card className={classNames(styles.card, styles.flexGrow, styles.flexColumn)}>
<div className={styles.headerRow}>
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>{t('tester.title')}</div>
<div className={styles.cardSubtitle}>{t('tester.subtitle')}</div>
</div>
<Button title="jwt_claims.tester.run_button" type="primary" onClick={onTestHandler} />
</div>
<div className={classNames(styles.cardContent, styles.flexColumn, styles.flexGrow)}>
{formState.errors.testSample && (
<div className={styles.error}>{formState.errors.testSample.message}</div>
)}
<Controller
// Force rerender the controller when the token type changes
// Otherwise the input field will not be updated
key={tokenType}
control={control}
name="testSample"
rules={{
validate: validateSampleCode,
}}
render={({ field }) => (
<MonacoCodeEditor
className={testResult ? styles.shrinkCodeEditor : styles.flexGrow}
enabledActions={['restore', 'copy']}
models={editorModels}
activeModelName={activeModelName}
setActiveModel={setActiveModelName}
// Pass the value and onChange handler based on the active model
{...getModelControllerProps(field)}
/>
)}
/>
{testResult && (
<TestResult
testResult={testResult}
onClose={() => {
setTestResult(undefined);
}}
/>
)}
</div>
</Card>
</div>
);
}
export default TestTab;

5
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.module.scss Normal file
View file

@ -0,0 +1,5 @@
@use '@/scss/underscore' as _;
.error {
color: var(--color-error);
}

129
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/TestTab/index.tsx Normal file
View file

@ -0,0 +1,129 @@
import { LogtoJwtTokenPath } from '@logto/schemas';
import { conditional } from '@silverhand/essentials';
import classNames from 'classnames';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Controller, useFormContext, type ControllerRenderProps } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import MonacoCodeEditor, {
type ModelControl,
} from '@/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor';
import { type JwtCustomizerForm } from '@/pages/CustomizeJwtDetails/type';
import {
accessTokenPayloadTestModel,
clientCredentialsPayloadTestModel,
userContextTestModel,
} from '@/pages/CustomizeJwtDetails/utils/config';
import * as tabContentStyles from '../index.module.scss';
import * as styles from './index.module.scss';
type Props = {
isActive: boolean;
};
const accessTokenModelSettings = [accessTokenPayloadTestModel, userContextTestModel];
const clientCredentialsModelSettings = [clientCredentialsPayloadTestModel];
function TestTab({ isActive }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
const [activeModelName, setActiveModelName] = useState<string>();
const { watch, control, formState } = useFormContext<JwtCustomizerForm>();
const tokenType = watch('tokenType');
const editorModels = useMemo(
() =>
tokenType === LogtoJwtTokenPath.AccessToken
? accessTokenModelSettings
: clientCredentialsModelSettings,
[tokenType]
);
useEffect(() => {
setActiveModelName(editorModels[0]?.name);
}, [editorModels, tokenType]);
const getModelControllerProps = useCallback(
({ value, onChange }: ControllerRenderProps<JwtCustomizerForm, 'testSample'>): ModelControl => {
return {
value:
activeModelName === userContextTestModel.name ? value.contextSample : value.tokenSample,
onChange: (newValue: string | undefined) => {
// Form value is a object we need to update the specific field
const updatedValue: JwtCustomizerForm['testSample'] = {
...value,
...conditional(
activeModelName === userContextTestModel.name && {
contextSample: newValue,
}
),
...conditional(
activeModelName === accessTokenPayloadTestModel.name && {
tokenSample: newValue,
}
),
...conditional(
activeModelName === clientCredentialsPayloadTestModel.name && {
// Reset the field to undefined if the value is the same as the default value
tokenSample: newValue,
}
),
};
onChange(updatedValue);
},
};
},
[activeModelName]
);
const validateSampleCode = useCallback(
(value: JwtCustomizerForm['testSample']) => {
for (const [_, sampleCode] of Object.entries(value)) {
if (sampleCode) {
try {
JSON.parse(sampleCode);
} catch {
return t('form_error.invalid_json');
}
}
}
return true;
},
[t]
);
return (
<div className={classNames(tabContentStyles.tabContent, isActive && tabContentStyles.active)}>
<div className={tabContentStyles.description}>{t('tester.subtitle')}</div>
<div className={classNames(tabContentStyles.flexColumn, tabContentStyles.flexGrow)}>
<Controller
control={control}
name="testSample"
rules={{
validate: validateSampleCode,
}}
render={({ field }) => (
<MonacoCodeEditor
className={tabContentStyles.flexGrow}
enabledActions={['restore', 'copy']}
models={editorModels}
activeModelName={activeModelName}
setActiveModel={setActiveModelName}
// Pass the value and onChange handler based on the active model
{...getModelControllerProps(field)}
/>
)}
/>
{formState.errors.testSample && (
<div className={styles.error}>{formState.errors.testSample.message}</div>
)}
</div>
</div>
);
}
export default TestTab;

140
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.module.scss
View file

@ -12,7 +12,7 @@
align-items: center;
border-radius: 100px;
color: var(--color-text);
background: transparent;
background: var(--color-layer-1);
border: 1px solid var(--color-specific-selected-disabled);
svg {
@ -51,146 +51,8 @@
}
}
.card {
.headerRow {
display: flex;
flex-direction: row;
gap: _.unit(4);
align-items: center;
}
.cardHeader {
flex: 1;
}
.cardTitle {
font: var(--font-label-2);
color: var(--color-text);
margin-bottom: _.unit(1);
}
.cardSubtitle {
font: var(--font-body-2);
color: var(--color-text-secondary);
}
.cardContent {
// Collapsible content should be hidden by default, margin space can only be set at the child level
> *:first-child {
margin-top: _.unit(6);
}
> *:not(:last-child) {
margin-bottom: _.unit(4);
}
}
.expandButton {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
color: var(--color-text-secondary);
}
&.collapsible {
.headerRow {
cursor: pointer;
user-select: none;
}
.cardContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
&.expanded {
.expandButton {
transform: rotate(180deg);
}
.cardContent {
max-height: 1000;
}
}
}
}
.sampleCode {
:global {
/* stylelint-disable-next-line selector-class-pattern */
.monaco-editor {
border-radius: 8px;
/* stylelint-disable-next-line selector-class-pattern */
.overflow-guard {
border-radius: 8px;
}
/* stylelint-disable-next-line selector-class-pattern */
.lines-content {
padding: 0 16px;
}
}
}
}
.envVariablesField {
margin-bottom: _.unit(4);
}
/** Test Tab */
.shrinkCodeEditor {
height: 50%;
}
.testResult {
margin-top: _.unit(3);
flex: 1;
background-color: var(--color-bg-layer-2);
border-radius: 8px;
border: 1px solid var(--color-divider);
font-family: 'Roboto Mono', monospace;
overflow: auto;
.testResultHeader {
padding: _.unit(3) _.unit(4);
display: flex;
justify-content: space-between;
align-items: center;
font: var(--font-label-2);
font-family: 'Roboto Mono', monospace;
color: var(--color-text);
}
.testResultContent {
padding: _.unit(2) _.unit(4);
font: var(--font-body-2);
overflow: auto;
pre {
white-space: pre-wrap;
&.error {
color: var(--color-error);
}
&:first-child {
margin-top: 0;
}
}
}
}
.error {
margin: _.unit(4) 0;
color: var(--color-error);
}
/** Flexbox */
.flexColumn {
display: flex;
flex-direction: column;

4
packages/console/src/pages/CustomizeJwtDetails/MainContent/SettingsSection/index.tsx
View file

@ -2,7 +2,7 @@ import classNames from 'classnames';
import { useState } from 'react';
import BookIcon from '@/assets/icons/book.svg';
import StartIcon from '@/assets/icons/start.svg';
import FlaskIcon from '@/assets/icons/conical-flask.svg';
import Button from '@/ds-components/Button';
import InstructionTab from './InstructionTab';
@ -24,7 +24,7 @@ function SettingsSection() {
<Button
key={tab}
type="primary"
icon={tab === Tab.DataSource ? <BookIcon /> : <StartIcon />}
icon={tab === Tab.DataSource ? <BookIcon /> : <FlaskIcon />}
title={`jwt_claims.${tab}`}
className={classNames(styles.tab, activeTab === tab && styles.active)}
onClick={() => {

13
packages/console/src/pages/CustomizeJwtDetails/MainContent/index.module.scss
View file

@ -5,13 +5,24 @@
display: flex;
flex-direction: row;
flex-grow: 1;
overflow: auto;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
&::-webkit-scrollbar {
display: none; /* For Chrome, Safari and Opera */
}
> * {
flex: 1;
margin-bottom: _.unit(6);
&:first-child {
margin-right: _.unit(3);
flex: 9;
}
&:last-child {
flex: 7;
}
}
}

1
packages/console/src/pages/CustomizeJwtDetails/MainContent/index.tsx
View file

@ -79,6 +79,7 @@ function MainContent<T extends LogtoJwtTokenPath>({
// Always show the action bar if is the create mode
isOpen={isDirty || action === 'create'}
isSubmitting={isSubmitting}
confirmText={action === 'create' ? 'general.create' : 'general.save_changes'}
onDiscard={
// If the form is in create mode, navigate back to the previous page
action === 'create'

34
packages/console/src/pages/CustomizeJwtDetails/utils/config.tsx
View file

@ -8,7 +8,7 @@ import { type EditorProps } from '@monaco-editor/react';
import TokenFileIcon from '@/assets/icons/token-file-icon.svg';
import UserFileIcon from '@/assets/icons/user-file-icon.svg';
import type { ModelSettings } from '../MonacoCodeEditor/type.js';
import type { ModelSettings } from '../MainContent/MonacoCodeEditor/type.js';
import {
JwtCustomizerTypeDefinitionKey,
@ -189,17 +189,17 @@ export const environmentVariablesCodeExample = `exports.getCustomJwtClaims = asy
*/
const standardTokenPayloadData = {
jti: 'f1d3d2d1-1f2d-3d4e-5d6f-7d8a9d0e1d2',
client_id: 'my_app',
scope: 'read write',
aud: 'http://localhost:3000/api/test',
scope: 'read write',
clientId: 'my_app',
};
export const defaultAccessTokenPayload: AccessTokenPayload = {
...standardTokenPayloadData,
grantId: 'grant_123',
accountId: 'uid_123',
kind: 'AccessToken',
grantId: 'grant_123',
gty: 'authorization_code',
kind: 'AccessToken',
};
export const defaultClientCredentialsPayload: ClientCredentialsPayload = {
@ -209,20 +209,20 @@ export const defaultClientCredentialsPayload: ClientCredentialsPayload = {
const defaultUserContext: Partial<JwtCustomizerUserContext> = {
id: '123',
name: 'Foo Bar',
roles: [],
avatar: 'https://example.com/avatar.png',
profile: {},
username: 'foo',
customData: {},
identities: {},
primaryEmail: 'foo@logto.io',
primaryPhone: '+1234567890',
username: 'foo',
name: 'Foo Bar',
avatar: 'https://example.com/avatar.png',
applicationId: 'my-app',
profile: {},
identities: {},
customData: {},
ssoIdentities: [],
mfaVerificationFactors: [],
roles: [],
organizations: [],
ssoIdentities: [],
organizationRoles: [],
mfaVerificationFactors: [],
};
export const defaultUserTokenContextData = {
@ -234,7 +234,7 @@ export const accessTokenPayloadTestModel: ModelSettings = {
icon: <TokenFileIcon />,
name: 'user-token-payload.json',
title: 'Token',
defaultValue: JSON.stringify(defaultAccessTokenPayload, null, '\t'),
defaultValue: JSON.stringify(defaultAccessTokenPayload, null, 2),
};
export const clientCredentialsPayloadTestModel: ModelSettings = {
@ -242,7 +242,7 @@ export const clientCredentialsPayloadTestModel: ModelSettings = {
icon: <TokenFileIcon />,
name: 'machine-to-machine-token-payload.json',
title: 'Token',
defaultValue: JSON.stringify(defaultClientCredentialsPayload, null, '\t'),
defaultValue: JSON.stringify(defaultClientCredentialsPayload, null, 2),
};
export const userContextTestModel: ModelSettings = {
@ -250,5 +250,5 @@ export const userContextTestModel: ModelSettings = {
icon: <UserFileIcon />,
name: 'user-token-context.json',
title: 'User Context',
defaultValue: JSON.stringify(defaultUserTokenContextData, null, '\t'),
defaultValue: JSON.stringify(defaultUserTokenContextData, null, 2),
};

6
packages/console/src/pages/EnterpriseSsoDetails/Connection/SamlConnectorForm.tsx
View file

@ -12,10 +12,10 @@ import FormCard from '@/components/FormCard';
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
import useApi from '@/hooks/use-api';
import {
type SamlSsoConnectorWithProviderConfig,
type SamlConnectorConfig,
samlConnectorConfigGuard,
samlProviderConfigGuard,
type SamlConnectorConfig,
type SamlSsoConnectorWithProviderConfig,
} from '@/pages/EnterpriseSsoDetails/types/saml';
import { trySubmitSafe } from '@/utils/form';
@ -90,8 +90,6 @@ function SamlConnectorForm({ isDeleted, data, onUpdated }: Props) {
reset(result.config);
} catch (error: unknown) {
console.log(error);
if (error instanceof HTTPError) {
const errorBody = await error.response.clone().json<RequestErrorBody>();

10
packages/console/src/scss/_code-editor.scss
View file

@ -1,10 +0,0 @@
@mixin color {
--color-code-bg: #181133;
--color-code-white: #f7f8f8;
--color-code-grey: #adaab4;
--color-code-tab-active-bg: rgba(255, 255, 255, 24%);
}
@mixin font {
--font-code: 500 14px/20px 'Roboto Mono', monospace;
}

2
packages/console/src/scss/_underscore.scss
View file

@ -5,7 +5,7 @@
}
@mixin main-content-width {
max-width: 1168px;
max-width: 1300px;
min-width: 560px;
margin: 0 auto;
}

2
packages/phrases/src/locales/de/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/en/translation/admin-console/jwt-claims.ts
View file

@ -55,7 +55,7 @@ const jwt_claims = {
tester: {
title: 'Test',
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
run_button: 'Run',
run_button: 'Run test',
result_title: 'Test result',
},
form_error: {

2
packages/phrases/src/locales/es/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/fr/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/it/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/ja/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/ko/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/pl-pl/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/pt-br/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/pt-pt/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/ru/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/tr-tr/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/zh-cn/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/zh-hk/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

2
packages/phrases/src/locales/zh-tw/translation/admin-console/jwt-claims.ts
View file

@ -92,7 +92,7 @@ const jwt_claims = {
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
/** UNTRANSLATED */
run_button: 'Run',
run_button: 'Run test',
/** UNTRANSLATED */
result_title: 'Test result',
},

16
packages/toolkit/core-kit/scss/_console-themes.scss
View file

@ -208,6 +208,15 @@
--color-bg-state-unselected: var(--color-neutral-90);
--color-bg-state-disabled: rgba(25, 28, 29, 8%); // 8% --color-neutral-10
--color-bg-info-tag: rgba(229, 225, 236, 80%); // 80% --color-neutral-variant-90
// code editor
--color-code-bg: #181133;
--color-code-bg-float: #30314e;
--color-code-white: #f7f8f8;
--color-code-grey: #adaab4;
--color-code-dark-bg-focused: rgba(255, 255, 255, 24%);
--color-code-dark-bg-hover: rgba(255, 255, 255, 12%);
--color-code-dark-bg-pressed: rgba(255, 255, 255, 18%);
}
@mixin dark {
@ -423,4 +432,11 @@
--color-bg-state-unselected: var(--color-neutral-90);
--color-bg-state-disabled: rgba(247, 248, 248, 8%); // 8% --color-neutral-10
--color-bg-info-tag: var(--color-neutral-variant-90);
// code editor
--color-code-bg: #090613;
--color-code-bg-float: #232439;
--color-code-white: #f7f8f8;
--color-code-grey: #adaab4;
--color-code-dark-bg-focused: rgba(255, 255, 255, 24%);
}

1
packages/toolkit/core-kit/scss/_fonts.scss
View file

@ -30,4 +30,5 @@ $font-family:
--font-body-3: 400 12px/16px #{$font-family};
--font-section-head-1: 700 12px/16px #{$font-family};
--font-section-head-2: 700 10px/16px #{$font-family};
--font-code: 500 14px/20px 'Roboto Mono', monospace;
}