From cd6b772e7202a7a5bed5e7f0a34f847cda93e924 Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Fri, 13 Jan 2023 10:10:03 +1000 Subject: [PATCH] Support unmodified meta objects in frontend api --- frontend/src/api/npm/base.ts | 20 +- frontend/src/api/npm/createDNSProvider.ts | 13 +- frontend/src/api/npm/setDNSProvider.ts | 13 +- .../modals/DNSProviderCreateModal copy.tsx | 284 ------------------ 4 files changed, 36 insertions(+), 294 deletions(-) delete mode 100644 frontend/src/modals/DNSProviderCreateModal copy.tsx diff --git a/frontend/src/api/npm/base.ts b/frontend/src/api/npm/base.ts index a1d9065..5380fb6 100644 --- a/frontend/src/api/npm/base.ts +++ b/frontend/src/api/npm/base.ts @@ -22,9 +22,9 @@ function buildAuthHeader(): Record | undefined { return {}; } -function buildBody(data?: Record) { +function buildBody(data?: Record, skipDecamelize = false) { if (data) { - return JSON.stringify(decamelizeKeys(data)); + return JSON.stringify(skipDecamelize ? data : decamelizeKeys(data)); } } @@ -57,10 +57,12 @@ export async function get( interface PostArgs { url: string; data?: any; + skipCamelize?: boolean; + skipDecamelize?: boolean; } export async function post( - { url, data }: PostArgs, + { url, data, skipCamelize, skipDecamelize }: PostArgs, abortController?: AbortController, ) { const apiUrl = buildUrl({ url }); @@ -70,17 +72,19 @@ export async function post( [contentTypeHeader]: "application/json", }; const signal = abortController?.signal; - const body = buildBody(data); + const body = buildBody(data, skipDecamelize); const response = await fetch(apiUrl, { method, headers, body, signal }); - return processResponse(response); + return processResponse(response, skipCamelize); } interface PutArgs { url: string; data?: any; + skipCamelize?: boolean; + skipDecamelize?: boolean; } export async function put( - { url, data }: PutArgs, + { url, data, skipCamelize, skipDecamelize }: PutArgs, abortController?: AbortController, ) { const apiUrl = buildUrl({ url }); @@ -90,7 +94,7 @@ export async function put( [contentTypeHeader]: "application/json", }; const signal = abortController?.signal; - const body = buildBody(data); + const body = buildBody(data, skipDecamelize); const response = await fetch(apiUrl, { method, headers, body, signal }); - return processResponse(response); + return processResponse(response, skipCamelize); } diff --git a/frontend/src/api/npm/createDNSProvider.ts b/frontend/src/api/npm/createDNSProvider.ts index 6a8821d..b20f7ff 100644 --- a/frontend/src/api/npm/createDNSProvider.ts +++ b/frontend/src/api/npm/createDNSProvider.ts @@ -1,3 +1,5 @@ +import { decamelizeKeys } from "humps"; + import * as api from "./base"; import { DNSProvider } from "./models"; @@ -5,10 +7,19 @@ export async function createDNSProvider( data: DNSProvider, abortController?: AbortController, ): Promise { + // Because the meta property of the data should not be decamelized, + // we're going to decamelize the rest here instead of in base.ts + let dcData: any = decamelizeKeys(data); + if (typeof data.meta !== "undefined") { + dcData.meta = data.meta; + } + const { result } = await api.post( { url: "/dns-providers", - data, + data: dcData, + skipCamelize: true, + skipDecamelize: true, }, abortController, ); diff --git a/frontend/src/api/npm/setDNSProvider.ts b/frontend/src/api/npm/setDNSProvider.ts index 7eb2368..0e2d2e0 100644 --- a/frontend/src/api/npm/setDNSProvider.ts +++ b/frontend/src/api/npm/setDNSProvider.ts @@ -1,3 +1,5 @@ +import { decamelizeKeys } from "humps"; + import * as api from "./base"; import { DNSProvider } from "./models"; @@ -9,9 +11,18 @@ export async function setDNSProvider( delete data.id; } + // Because the meta property of the data should not be decamelized, + // we're going to decamelize the rest here instead of in base.ts + let dcData: any = decamelizeKeys(data); + if (typeof data.meta !== "undefined") { + dcData.meta = data.meta; + } + const { result } = await api.put({ url: `/dns-providers/${id}`, - data, + data: dcData, + skipCamelize: true, + skipDecamelize: true, }); return result; } diff --git a/frontend/src/modals/DNSProviderCreateModal copy.tsx b/frontend/src/modals/DNSProviderCreateModal copy.tsx deleted file mode 100644 index ef1a1ca..0000000 --- a/frontend/src/modals/DNSProviderCreateModal copy.tsx +++ /dev/null @@ -1,284 +0,0 @@ -import { useEffect, useState } from "react"; - -import { - Button, - Checkbox, - FormControl, - FormErrorMessage, - FormLabel, - Input, - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalCloseButton, - ModalBody, - ModalFooter, - Select, - Stack, - useToast, -} from "@chakra-ui/react"; -import { - DNSProvider, - DNSProvidersAcmesh, - DNSProvidersAcmeshProperty, -} from "api/npm"; -import { PrettyButton } from "components"; -import { Formik, Form, Field } from "formik"; -import { useSetDNSProvider, useDNSProvidersAcmesh } from "hooks"; -import { intl } from "locale"; -import { validateString } from "modules/Validations"; - -interface DNSProviderCreateModalProps { - isOpen: boolean; - onClose: () => void; -} -function DNSProviderCreateModal({ - isOpen, - onClose, -}: DNSProviderCreateModalProps) { - const toast = useToast(); - const { mutate: setDNSProvider } = useSetDNSProvider(); - const { - isLoading: acmeshIsLoading, - // isError: acmeshIsError, - // error: acmeshError, - data: acmeshDataResp, - } = useDNSProvidersAcmesh(); - - const [acmeshData, setAcmeshData] = useState([] as DNSProvidersAcmesh[]); - const [acmeshItem, setAcmeshItem] = useState(""); - - useEffect(() => { - setAcmeshData(acmeshDataResp || []); - }, [acmeshDataResp]); - - const onSubmit = async ( - payload: DNSProvider, - { setErrors, setSubmitting }: any, - ) => { - // TODO: filter out the meta object and only include items that apply to the acmesh provider selected - - const showErr = (msg: string) => { - toast({ - description: intl.formatMessage({ - id: `error.${msg}`, - }), - status: "error", - position: "top", - duration: 3000, - isClosable: true, - }); - }; - - setDNSProvider(payload, { - onError: (err: any) => { - if (err.message === "ca-bundle-does-not-exist") { - setErrors({ - caBundle: intl.formatMessage({ - id: `error.${err.message}`, - }), - }); - } else { - showErr(err.message); - } - }, - onSuccess: () => onClose(), - onSettled: () => setSubmitting(false), - }); - }; - - const getAcmeshItem = (name: string): DNSProvidersAcmesh | undefined => { - return acmeshData.find((item) => item.title === name); - }; - - const fullItem = getAcmeshItem(acmeshItem); - const itemProperties = fullItem?.properties; - - const renderInputType = ( - field: any, - fieldName: string, - f: DNSProvidersAcmeshProperty, - value: any, - ) => { - if (f.type === "bool") { - return ( - - {f.title} - - ); - } - - let type = "text"; - let props: any = {}; - if (fullItem?.required.indexOf(fieldName) !== -1) { - // This is required - props.required = true; - } - if (f.type === "string") { - props.minLength = f.minLength || null; - props.maxLength = f.maxLength || null; - props.pattern = f.pattern || null; - } - if (f.type === "integer") { - type = "number"; - props.min = f.minimum || null; - props.max = f.maximum || null; - } - if (f.isSecret) { - type = "password"; - } - - return ( - - ); - }; - - return ( - - - - {acmeshIsLoading ? ( - "loading" - ) : ( - - {({ isSubmitting, handleChange, values, setValues }) => ( -
- - {intl.formatMessage({ id: "dns-provider.create" })} - - - - - - {({ field, form }: any) => ( - - - {intl.formatMessage({ - id: "dns-provider.name", - })} - - - - {form.errors.name} - - - )} - - - {({ field, form }: any) => ( - - - {intl.formatMessage({ - id: "dns-provider.acmesh-name", - })} - - - - {form.errors.acmeshName} - - - )} - - {acmeshItem !== "" ?
: null} - {itemProperties - ? Object.keys(itemProperties).map((fieldName, _) => { - const f = itemProperties[fieldName]; - const name = `meta[${fieldName}]`; - return ( - - {({ field, form }: any) => ( - - {f.type !== "bool" ? ( - - {f.title} - {/* todo: locale for this*/} - - ) : null} - {renderInputType( - field, - fieldName, - f, - values.meta[f.title], - )} - - {form.errors[name]} - - - )} - - ); - }) - : null} - - - - - {intl.formatMessage({ id: "form.save" })} - - - - - )} -
- )} - - - ); -} - -export { DNSProviderCreateModal };