Fix certificate creation button

PeculiarVentures · Sep 27, 2024 · 52403df · 52403df
1 parent f833573
commit 52403df
Showing 1 changed file with 68 additions and 63 deletions.
diff --git a/src/components/certificates-topbar/CertificatesTopbar.tsx b/src/components/certificates-topbar/CertificatesTopbar.tsx
@@ -53,71 +53,76 @@ export const CertificatesTopbar: React.FunctionComponent<
 
   const { t } = useTranslation();
 
-  const renderCreateButton = () =>
-    !isReadOnly ? (
-      <div>
-        {isDisabled || !isLoggedIn ? (
-          <Tooltip
-            color="white"
+  const renderCreateButton = () => {
+    if (isReadOnly) {
+      return null;
+    }
+
+    if (isDisabled || !isLoggedIn) {
+      return (
+        <Tooltip
+          color="white"
+          size="large"
+          arrow={true}
+          placement="bottom-end"
+          offset={10}
+          title={
+            !isLoggedIn
+              ? t("topbar.create-certificate-disabled-tooltip")
+              : undefined
+          }
+        >
+          <Button
+            color="primary"
+            variant="contained"
             size="large"
-            arrow={true}
-            placement="bottom-end"
-            offset={10}
-            title={
-              !isLoggedIn
-                ? t("topbar.create-certificate-disabled-tooltip")
-                : undefined
-            }
-          >
-            <Button
-              color="primary"
-              variant="contained"
-              size="large"
-              startIcon={<PlusIcon />}
-              disabled={true}
-            >
-              {t("topbar.create-certificate")}
-            </Button>
-          </Tooltip>
-        ) : (
-          <Menu
-            popoverProps={{
-              className: styles.creation_menu,
-            }}
-            options={[
-              {
-                label: t("topbar.create-certificate-scr"),
-                startIcon: (
-                  <CertificatCSRIcon className={styles.creation_menu_icon} />
-                ),
-                onClick: () => onCreate("csr"),
-              },
-              {
-                label: t("topbar.create-certificate-ssc"),
-                startIcon: (
-                  <CertificatSSCIcon className={styles.creation_menu_icon} />
-                ),
-                onClick: () => onCreate("x509"),
-              },
-              {
-                label: t("topbar.import-certificate"),
-                startIcon: <ImportIcon className={styles.creation_menu_icon} />,
-                onClick: onImport,
-              },
-            ]}
+            startIcon={<PlusIcon />}
+            disabled={true}
           >
-            <Button
-              color="primary"
-              variant="contained"
-              size="large"
-              startIcon={<PlusIcon />}
-            >
-              {t("topbar.create-certificate")}
-            </Button>
-          </Menu>
-        )}
-      </div>
-    ) : null;
+            {t("topbar.create-certificate")}
+          </Button>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Menu
+        popoverProps={{
+          className: styles.creation_menu,
+        }}
+        options={[
+          {
+            label: t("topbar.create-certificate-scr"),
+            startIcon: (
+              <CertificatCSRIcon className={styles.creation_menu_icon} />
+            ),
+            onClick: () => onCreate("csr"),
+          },
+          {
+            label: t("topbar.create-certificate-ssc"),
+            startIcon: (
+              <CertificatSSCIcon className={styles.creation_menu_icon} />
+            ),
+            onClick: () => onCreate("x509"),
+          },
+          {
+            label: t("topbar.import-certificate"),
+            startIcon: <ImportIcon className={styles.creation_menu_icon} />,
+            onClick: onImport,
+          },
+        ]}
+      >
+        <Button
+          color="primary"
+          variant="contained"
+          size="large"
+          startIcon={<PlusIcon />}
+        >
+          {t("topbar.create-certificate")}
+        </Button>
+      </Menu>
+    );
+  };
 
   return (
     <div className={clsx(styles.topbar_root, className)}>