From 83a96668077492f5cda4ff0b8ca7b171c5ffc3b2 Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Mon, 27 Feb 2023 17:21:10 +1000 Subject: [PATCH] Nicer cert type create select --- frontend/src/components/LocalePicker.tsx | 1 - .../components/Navigation/NavigationMenu.tsx | 1 - frontend/src/components/PrettyMenuButton.tsx | 23 +++++ frontend/src/components/index.ts | 1 + .../CertificateCreateModal.tsx | 86 +++++++------------ .../src/pages/Certificates/TableWrapper.tsx | 18 +--- frontend/src/pages/Certificates/index.tsx | 47 ++++++++-- 7 files changed, 93 insertions(+), 84 deletions(-) create mode 100644 frontend/src/components/PrettyMenuButton.tsx diff --git a/frontend/src/components/LocalePicker.tsx b/frontend/src/components/LocalePicker.tsx index 27ed3f1c..53e76771 100644 --- a/frontend/src/components/LocalePicker.tsx +++ b/frontend/src/components/LocalePicker.tsx @@ -47,7 +47,6 @@ function LocalePicker({ onChange, className }: LocalPickerProps) { } onClick={() => changeTo(item[0])} - // rel={item[1]} key={`locale-${item[0]}`}> {intl.formatMessage({ id: `locale-${item[1]}` })} diff --git a/frontend/src/components/Navigation/NavigationMenu.tsx b/frontend/src/components/Navigation/NavigationMenu.tsx index 62edb3b7..8ee4abb2 100644 --- a/frontend/src/components/Navigation/NavigationMenu.tsx +++ b/frontend/src/components/Navigation/NavigationMenu.tsx @@ -173,7 +173,6 @@ const DesktopNavigation: FC = () => { navItems.findIndex((item) => { // Find the nav item whose location / sub items location is the beginning of the currently active path if (item.to) { - // console.debug(item.to, path); if (item.to === "/") { return path === item.to; } diff --git a/frontend/src/components/PrettyMenuButton.tsx b/frontend/src/components/PrettyMenuButton.tsx new file mode 100644 index 00000000..554a078c --- /dev/null +++ b/frontend/src/components/PrettyMenuButton.tsx @@ -0,0 +1,23 @@ +import { Button, MenuButton, MenuButtonProps } from "@chakra-ui/react"; +import { FiChevronDown } from "react-icons/fi"; + +function PrettyMenuButton(props: MenuButtonProps) { + return ( + } + _hover={{ + bgGradient: "linear(to-r, red.400,pink.400)", + boxShadow: "xl", + }} + {...props}> + {props.children} + + ); +} + +export { PrettyMenuButton }; diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 47caaa09..3f88be3e 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -9,6 +9,7 @@ export * from "./Monospace"; export * from "./Navigation"; export * from "./Permissions"; export * from "./PrettyButton"; +export * from "./PrettyMenuButton"; export * from "./SiteWrapper"; export * from "./SpinnerPage"; export * from "./Table"; diff --git a/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx b/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx index fc43c45b..6c899fb4 100644 --- a/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx +++ b/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx @@ -1,8 +1,5 @@ -import { useState } from "react"; - import { Button, - ButtonGroup, FormControl, FormErrorMessage, FormLabel, @@ -24,23 +21,25 @@ import { useSetCertificate } from "hooks"; import { intl } from "locale"; import { validateString } from "modules/Validations"; +import CustomForm from "./CustomForm"; +import DNSForm from "./DNSForm"; import HTTPForm from "./HTTPForm"; interface CertificateCreateModalProps { isOpen: boolean; onClose: () => void; + certType: string; } function CertificateCreateModal({ isOpen, onClose, + certType, }: CertificateCreateModalProps) { - const [certType, setCertType] = useState(""); const toast = useToast(); const { mutate: setCertificate } = useSetCertificate(); const onModalClose = () => { onClose(); - setCertType(""); }; const onSubmit = async ( @@ -98,60 +97,33 @@ function CertificateCreateModal({ - {certType === "" ? ( - - - Select the Certificate Validation method - - - - - - - - ) : null} - - {certType !== "" ? ( - - - {({ field, form }: any) => ( - - - {intl.formatMessage({ - id: "name", - })} - - - - {form.errors.name} - - - )} - - - ) : null} + + + {({ field, form }: any) => ( + + + {intl.formatMessage({ + id: "name", + })} + + + {form.errors.name} + + )} + + {certType === "http" ? : null} + {certType === "dns" ? : null} + {certType === "custom" ? : null} {certType !== "" ? ( diff --git a/frontend/src/pages/Certificates/TableWrapper.tsx b/frontend/src/pages/Certificates/TableWrapper.tsx index b1f51c55..e585da2b 100644 --- a/frontend/src/pages/Certificates/TableWrapper.tsx +++ b/frontend/src/pages/Certificates/TableWrapper.tsx @@ -1,12 +1,7 @@ import { useEffect, useReducer, useState } from "react"; import { Alert, AlertIcon } from "@chakra-ui/react"; -import { - EmptyList, - PrettyButton, - SpinnerPage, - tableEventReducer, -} from "components"; +import { EmptyList, SpinnerPage, tableEventReducer } from "components"; import { useCertificates } from "hooks"; import { intl } from "locale"; @@ -23,11 +18,7 @@ const initialState = { ], filters: [], }; - -interface TableWrapperProps { - onCreateClick?: () => void; -} -function TableWrapper({ onCreateClick }: TableWrapperProps) { +function TableWrapper() { const [{ offset, limit, sortBy, filters }, dispatch] = useReducer( tableEventReducer, initialState, @@ -68,11 +59,6 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) { - {intl.formatMessage({ id: "lets-go" })} - - } /> ); } diff --git a/frontend/src/pages/Certificates/index.tsx b/frontend/src/pages/Certificates/index.tsx index e76f006f..6477d4d2 100644 --- a/frontend/src/pages/Certificates/index.tsx +++ b/frontend/src/pages/Certificates/index.tsx @@ -1,14 +1,22 @@ import { useState } from "react"; -import { Heading, HStack } from "@chakra-ui/react"; -import { HelpDrawer, PrettyButton } from "components"; +import { + Heading, + HStack, + Menu, + MenuList, + MenuItem, + MenuDivider, +} from "@chakra-ui/react"; +import { HelpDrawer, PrettyMenuButton } from "components"; import { intl } from "locale"; import { CertificateCreateModal } from "modals"; +import { FiGlobe, FiServer, FiUpload } from "react-icons/fi"; import TableWrapper from "./TableWrapper"; function Certificates() { - const [createShown, setCreateShown] = useState(false); + const [createShown, setCreateShown] = useState(""); return ( <> @@ -18,15 +26,36 @@ function Certificates() { - setCreateShown(true)}> - {intl.formatMessage({ id: "certificate.create" })} - + + + {intl.formatMessage({ id: "certificate.create" })} + + + } + onClick={() => setCreateShown("http")}> + {intl.formatMessage({ id: "type.http" })} + + } + onClick={() => setCreateShown("dns")}> + {intl.formatMessage({ id: "type.dns" })} + + + } + onClick={() => setCreateShown("custom")}> + {intl.formatMessage({ id: "type.custom" })} + + + - setCreateShown(true)} /> + setCreateShown(false)} + isOpen={createShown !== ""} + certType={createShown} + onClose={() => setCreateShown("")} /> );