mirror of
https://github.com/logto-io/logto.git
synced 2025-01-27 21:39:16 -05:00
feat(console,phrases): add test result component (#5479)
* feat(console,phrases): add test result component add test result component * fix(console): remove unused styles remove unused styles
This commit is contained in:
simeng-li
GitHub
parent
2d98982588
commit
f44ba31275
18 changed files with 129 additions and 2 deletions
|
|
@ -0,0 +1,47 @@
|
|||
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;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import classNames from 'classnames';
|
||||
import { useMemo } from 'react';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
|
@ -15,6 +15,7 @@ import {
|
|||
} from '../config.js';
|
||||
import { type JwtClaimsFormType } from '../type.js';
|
||||
|
||||
import TestResult, { type TestResultData } from './TestResult.js';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -23,6 +24,7 @@ type Props = {
|
|||
|
||||
function TestTab({ isActive }: Props) {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
|
||||
const [testResult, setTestResult] = useState<TestResultData>();
|
||||
|
||||
const { watch } = useFormContext<JwtClaimsFormType>();
|
||||
const tokenType = watch('tokenType');
|
||||
|
|
@ -35,6 +37,10 @@ function TestTab({ isActive }: Props) {
|
|||
[tokenType]
|
||||
);
|
||||
|
||||
const onTestHandler = useCallback(() => {
|
||||
// TODO: API integration, read form data and send the request to the server
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.tabContent, isActive && styles.active)}>
|
||||
<Card className={classNames(styles.card, styles.flexGrow, styles.flexColumn)}>
|
||||
|
|
@ -43,10 +49,18 @@ function TestTab({ isActive }: Props) {
|
|||
<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" />
|
||||
<Button title="jwt_claims.tester.run_button" type="primary" onClick={onTestHandler} />
|
||||
</div>
|
||||
<div className={classNames(styles.cardContent, styles.flexColumn, styles.flexGrow)}>
|
||||
<MonacoCodeEditor models={editorModels} className={styles.flexGrow} />
|
||||
{testResult && (
|
||||
<TestResult
|
||||
testResult={testResult}
|
||||
onClose={() => {
|
||||
setTestResult(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
}
|
||||
|
||||
.cardContent {
|
||||
// Collapsible content should be hidden by default, margin space can only be set at the child level
|
||||
> *:first-child {
|
||||
margin-top: _.unit(6);
|
||||
}
|
||||
|
|
@ -143,6 +144,42 @@
|
|||
}
|
||||
}
|
||||
|
||||
.testResult {
|
||||
margin-top: _.unit(3);
|
||||
height: calc(50% - _.unit(3));
|
||||
background-color: var(--color-bg-layer-2);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-divider);
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
|
||||
.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);
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flexColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ const jwt_claims = {
|
|||
title: 'Test',
|
||||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
run_button: 'Run',
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ const jwt_claims = {
|
|||
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
|
||||
/** UNTRANSLATED */
|
||||
run_button: 'Run',
|
||||
/** UNTRANSLATED */
|
||||
result_title: 'Test result',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue