From 16bb784422a643ee0a92ead6396ace38ffb8b4a5 Mon Sep 17 00:00:00 2001 From: alex-slobodian Date: Mon, 20 May 2024 13:38:46 +0300 Subject: [PATCH] Add create dialog to app --- src/app.tsx | 13 +++++++++++-- .../CertificateCreateDialog.tsx | 19 +++++++++++-------- .../styles/index.module.scss | 4 ++++ .../useCertificateCreateDialog.tsx | 14 +++++++++++--- .../useCertificateImportDialog.tsx | 6 +++++- src/hooks/app/useApp.tsx | 6 ------ 6 files changed, 42 insertions(+), 20 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 380f66ca..f71991a7 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -9,6 +9,7 @@ import { CertificatesTopbar } from "./components/certificates-topbar"; import { CertificateDeleteDialog } from "./components/certificate-delete-dialog"; import { CertificateViewerDialog } from "./components/certificate-viewer-dialog"; import { useCertificateImportDialog } from "./dialogs/certificate-import-dialog"; +import { useCertificateCreateDialog } from "./dialogs/certificate-create-dialog"; import styles from "./app.module.scss"; @@ -23,7 +24,6 @@ export function App() { currentCertificateViewerValue, handleProviderChange, handleCertificatesSearch, - handleCertificateCreate, handleCertificateDeleteDialogOpen, handleCertificateDeleteDialogClose, handleCertificateDelete, @@ -39,6 +39,14 @@ export function App() { currentProviderId, }); + const { + open: handleCertificateCreateDialogOpen, + dialog: certificateCreateDialog, + } = useCertificateCreateDialog({ + providers, + currentProviderId, + }); + return ( <> @@ -57,7 +65,7 @@ export function App() { className={styles.top_bar} onSearch={handleCertificatesSearch} onImport={handleCertificateImportDialogOpen} - onCreate={handleCertificateCreate} + onCreate={handleCertificateCreateDialogOpen} > {fetching.certificates ? ( ) : null} {certificateImportDialog()} + {certificateCreateDialog()} ); } diff --git a/src/components/certificate-create-dialog/CertificateCreateDialog.tsx b/src/components/certificate-create-dialog/CertificateCreateDialog.tsx index c585c17b..b738e3d5 100644 --- a/src/components/certificate-create-dialog/CertificateCreateDialog.tsx +++ b/src/components/certificate-create-dialog/CertificateCreateDialog.tsx @@ -17,6 +17,7 @@ import { Card } from "../card"; import { CertificateCreateByEmail } from "../certificate-create-by-email"; import { CertificateCreateByCname } from "../certificate-create-by-cname"; import { CertificateCreateByCustom } from "../certificate-create-by-custom"; +import { CertificatesProvidersSelectList } from "../certificates-providers-select-list"; import { CertificateType } from "../../types"; import styles from "./styles/index.module.scss"; @@ -37,10 +38,9 @@ export const CertificateCreateDialog: React.FunctionComponent< const { loading, type = "x509", - // TODO: need merge another PR first where providers list component present - // providers, - // currentProviderId, - // onProviderSelect, + providers, + currentProviderId, + onProviderSelect, onDialogClose, onCreateButtonClick, } = props; @@ -110,10 +110,13 @@ export const CertificateCreateDialog: React.FunctionComponent<
- { - // TODO: need merge another PR first where providers list component present - // CertificatesProvidersSelectList - } +
diff --git a/src/components/certificate-create-dialog/styles/index.module.scss b/src/components/certificate-create-dialog/styles/index.module.scss index 3c3709ba..e143ac15 100644 --- a/src/components/certificate-create-dialog/styles/index.module.scss +++ b/src/components/certificate-create-dialog/styles/index.module.scss @@ -66,3 +66,7 @@ gap: var(--pv-size-base-6); } } + +.provider_select_popover { + min-width: 200px !important; +} diff --git a/src/dialogs/certificate-create-dialog/useCertificateCreateDialog.tsx b/src/dialogs/certificate-create-dialog/useCertificateCreateDialog.tsx index cbf3d47c..b79b8e7d 100644 --- a/src/dialogs/certificate-create-dialog/useCertificateCreateDialog.tsx +++ b/src/dialogs/certificate-create-dialog/useCertificateCreateDialog.tsx @@ -8,21 +8,27 @@ import { CertificateType } from "../../types"; export function useCertificateCreateDialog(props: { providers: IProviderInfo[]; currentProviderId?: string; - handleProviderChange: (certificate: string) => void; }) { - const { providers, currentProviderId, handleProviderChange } = props; + const { providers, currentProviderId } = props; const { addToast } = useToast(); const { t } = useTranslation(); const [isOpen, setIsOpen] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); + const localCurrentProviderId = useRef(currentProviderId); + const dialogType = useRef("x509"); // TODO: fix unknown const handleCertificateCreate = (data: unknown) => { + // Check provider + if (!localCurrentProviderId?.current) { + localCurrentProviderId.current = currentProviderId; + } // TODO: add logic console.log("Create", data); + console.log("localCurrentProviderId", localCurrentProviderId.current); // temporary behaviour setIsLoading(true); setTimeout(function () { @@ -47,7 +53,9 @@ export function useCertificateCreateDialog(props: { onCreateButtonClick={handleCertificateCreate} type={dialogType.current} onDialogClose={() => setIsOpen(false)} - onProviderSelect={handleProviderChange} + onProviderSelect={(id) => { + localCurrentProviderId.current = id; + }} providers={providers} currentProviderId={currentProviderId} loading={isLoading} diff --git a/src/dialogs/certificate-import-dialog/useCertificateImportDialog.tsx b/src/dialogs/certificate-import-dialog/useCertificateImportDialog.tsx index 1acf724b..935fcf02 100644 --- a/src/dialogs/certificate-import-dialog/useCertificateImportDialog.tsx +++ b/src/dialogs/certificate-import-dialog/useCertificateImportDialog.tsx @@ -22,6 +22,10 @@ export function useCertificateImportDialog(props: { const localCurrentProviderId = useRef(currentProviderId); const handleCertificateImport = () => { + // Check provider + if (!localCurrentProviderId?.current) { + localCurrentProviderId.current = currentProviderId; + } // TODO: add logic console.log("Import", certificate); console.log("localCurrentProviderId", localCurrentProviderId?.current); @@ -58,7 +62,7 @@ export function useCertificateImportDialog(props: { }} onTextAreaBlur={() => { try { - // certificate?.length && new X509Certificate(certificate); + certificate?.length && new X509Certificate(certificate); setIsTextAreaError(false); } catch (error) { diff --git a/src/hooks/app/useApp.tsx b/src/hooks/app/useApp.tsx index e0eb797a..a292b2bb 100644 --- a/src/hooks/app/useApp.tsx +++ b/src/hooks/app/useApp.tsx @@ -204,11 +204,6 @@ export function useApp() { console.log(value); }; - const handleCertificateCreate = () => { - // TODO: add logic - console.log("Create"); - }; - const handleCertificateDeleteDialogOpen = (id: string, name: string) => { setCurrentCetificateDelete({ id, @@ -255,7 +250,6 @@ export function useApp() { currentCertificateViewerValue, handleProviderChange, handleCertificatesSearch, - handleCertificateCreate, handleCertificateDeleteDialogOpen, handleCertificateDeleteDialogClose, handleCertificateDelete,