Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00
Code Issues Activity

feat(console): add change alert and save changes footer (#5492)

Browse source 
* feat(console): add change alert and save changes footer

add change alert and save changes footer

* chore(console): add useMemo hook

add useMemo hook
This commit is contained in:
simeng-li 2024-03-12 11:04:23 +08:00 committed by GitHub
parent c8eaa45417
commit 213d6f97a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/console/src/pages/JwtClaims/index.tsx
View file

@ -1,8 +1,11 @@
import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
import classNames from 'classnames';
import { useMemo } from 'react';
import { useForm, FormProvider } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar';
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
import CardTitle from '@/ds-components/CardTitle';
import TabNav, { TabNavItem } from '@/ds-components/TabNav';
@ -43,6 +46,22 @@ function JwtClaims({ tab }: Props) {
},
});
const activeForm = useMemo(
() =>
tab === JwtTokenType.UserAccessToken ? userJwtClaimsForm : machineToMachineJwtClaimsForm,
[machineToMachineJwtClaimsForm, tab, userJwtClaimsForm]
);
const {
formState: { isDirty, isSubmitting },
reset,
handleSubmit,
} = activeForm;
const onSubmitHandler = handleSubmit(async (data) => {
// TODO: API integration
});
return (
<div className={styles.container}>
<CardTitle
@ -57,16 +76,19 @@ function JwtClaims({ tab }: Props) {
</TabNavItem>
))}
</TabNav>
<FormProvider
{...(tab === JwtTokenType.UserAccessToken
? userJwtClaimsForm
: machineToMachineJwtClaimsForm)}
>
<FormProvider {...activeForm}>
<form className={classNames(styles.tabContent)}>
<ScriptSection />
<SettingsSection />
</form>
</FormProvider>
<SubmitFormChangesActionBar
isOpen={isDirty}
isSubmitting={isSubmitting}
onDiscard={reset}
onSubmit={onSubmitHandler}
/>
<UnsavedChangesAlertModal hasUnsavedChanges={isDirty && !isSubmitting} />
</div>
);
}