libre.sh/keycloak-scim
4
0
Fork 0
Code Issues 15 Pull requests Releases 1 Activity Actions

Refactor SAML keys dialog to react-hook-form v7 (#4164)

Browse source
This commit is contained in:
Erik Jan de Wit 2023-01-12 10:23:48 +01:00 committed by GitHub
parent 6f498a9af7
commit 201c41858f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/admin-ui/src/clients/keys/SamlKeysDialog.tsx
View file

@ -1,7 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FormProvider, useForm } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form-v7";
import { import {
AlertVariant, AlertVariant,
Button, Button,
@ -75,10 +75,10 @@ export const SamlKeysDialog = ({
const { t } = useTranslation("clients"); const { t } = useTranslation("clients");
const [type, setType] = useState(false); const [type, setType] = useState(false);
const [keys, setKeys] = useState<CertificateRepresentation>(); const [keys, setKeys] = useState<CertificateRepresentation>();
const form = useForm<SamlKeysDialogForm>(); const form = useForm<SamlKeysDialogForm>({ mode: "onChange" });
const { const {
handleSubmit, handleSubmit,
formState: { isDirty }, formState: { isValid },
} = form; } = form;
const { adminClient } = useAdminClient(); const { adminClient } = useAdminClient();
@ -132,7 +132,7 @@ export const SamlKeysDialog = ({
key="confirm" key="confirm"
data-testid="confirm" data-testid="confirm"
variant="primary" variant="primary"
isDisabled={!isDirty && !keys} isDisabled={!isValid && !keys}
onClick={() => { onClick={() => {
if (type) { if (type) {
handleSubmit(submit)(); handleSubmit(submit)();
@ -181,9 +181,7 @@ export const SamlKeysDialog = ({
</FlexItem> </FlexItem>
</Flex> </Flex>
</FormGroup> </FormGroup>
</Form>
{!type && ( {!type && (
<Form>
<FormGroup <FormGroup
label={t("certificate")} label={t("certificate")}
fieldId="certificate" fieldId="certificate"
@ -209,8 +207,8 @@ export const SamlKeysDialog = ({
</SplitItem> </SplitItem>
</Split> </Split>
</FormGroup> </FormGroup>
</Form>
)} )}
</Form>
{type && <KeyForm useFile />} {type && <KeyForm useFile />}
</FormProvider> </FormProvider>
</Modal> </Modal>