Add create dialog to app

PeculiarVentures · May 20, 2024 · 16bb784 · 16bb784
1 parent 42f04ee
commit 16bb784
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 20 deletions.
diff --git 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 (
     <>
       <CertificatesSidebar className={styles.sidebar}>
@@ -57,7 +65,7 @@ export function App() {
         className={styles.top_bar}
         onSearch={handleCertificatesSearch}
         onImport={handleCertificateImportDialogOpen}
-        onCreate={handleCertificateCreate}
+        onCreate={handleCertificateCreateDialogOpen}
       ></CertificatesTopbar>
       {fetching.certificates ? (
         <CertificatesList
@@ -84,6 +92,7 @@ export function App() {
         />
       ) : null}
       {certificateImportDialog()}
+      {certificateCreateDialog()}
     </>
   );
 }
diff --git 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<
               </Typography>
             </div>
             <div>
-              {
-                // TODO: need merge another PR first where providers list component present
-                // CertificatesProvidersSelectList
-              }
+              <CertificatesProvidersSelectList
+                providers={providers}
+                currentProviderId={currentProviderId}
+                onSelect={onProviderSelect}
+                className={styles.provider_select}
+                popoverClassName={styles.provider_select_popover}
+              />
             </div>
           </div>
         </div>

diff --git 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
@@ -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<CertificateType>("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
@@ -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
@@ -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,