diff --git a/src/modules/api/context.tsx b/src/modules/api/context.tsx index 2693881..c48f618 100644 --- a/src/modules/api/context.tsx +++ b/src/modules/api/context.tsx @@ -7,7 +7,6 @@ import { useState, } from "react"; import { RekorClient } from "rekor"; -import getConfig from "next/config"; export interface RekorClientContext { client: RekorClient; @@ -23,21 +22,10 @@ export const RekorClientProvider: FunctionComponent> = ({ children, }) => { const [baseUrl, setBaseUrl] = useState(); - const { publicRuntimeConfig } = getConfig(); const context: RekorClientContext = useMemo(() => { - /* - Using the Next.js framework, the NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN env variable requires - a NEXT_PUBLIC_* prefix to make the value of the variable accessible to the browser. - Variables missing this prefix are only accessible in the Node.js environment. - https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables - */ - if (baseUrl === undefined) { - if (publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN) { - setBaseUrl(publicRuntimeConfig.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN); - } else { - setBaseUrl("https://rekor.sigstore.dev"); - } + if (baseUrl === undefined && process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN) { + setBaseUrl(process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN); } return { diff --git a/src/modules/components/Settings.tsx b/src/modules/components/Settings.tsx index 33fd99c..175cf45 100644 --- a/src/modules/components/Settings.tsx +++ b/src/modules/components/Settings.tsx @@ -1,3 +1,4 @@ +import { FormEvent, useCallback, useState } from "react"; import { useRekorBaseUrl } from "../api/context"; import { Modal, @@ -10,36 +11,50 @@ import { HelperText, HelperTextItem, FormHelperText, + ValidatedOptions, } from "@patternfly/react-core"; import { ExclamationCircleIcon, HelpIcon } from "@patternfly/react-icons"; import styles from "@patternfly/react-styles/css/components/Form/form"; import { validateUrl } from "../utils/validateUrl"; -import { Controller, useForm } from "react-hook-form"; -export interface SettingsProps { - onClose: () => void; +export function Settings({ + open, + onClose, +}: { open: boolean; -} - -export function Settings({ open, onClose }: SettingsProps) { + onClose: () => void; +}) { const [baseUrl, setBaseUrl] = useRekorBaseUrl(); + const [localBaseUrl, setLocalBaseUrl] = useState(baseUrl); + const [showValidation, setShowValidation] = useState(false); - const { - control, - formState: { errors, isValid }, - handleSubmit, - } = useForm({ - mode: "all", - reValidateMode: "onChange", - defaultValues: { - endpoint: baseUrl, - }, - }); + const handleChangeBaseUrl = useCallback((e: FormEvent) => { + if (e.currentTarget.value.length === 0) { + setLocalBaseUrl(undefined); + } else { + setLocalBaseUrl(e.currentTarget.value); + } + }, []); - const onSave = (data: any) => { - setBaseUrl(data.currentTarget.value); + const onSave = useCallback(() => { + if (!validateUrl(localBaseUrl)) { + console.log(!validateUrl(localBaseUrl)); + setShowValidation(true); + return; + } else { + setShowValidation(false); + } + + if ( + localBaseUrl === undefined && + process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN + ) { + setLocalBaseUrl(process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN); + } + + setBaseUrl(localBaseUrl); onClose(); - }; + }, [localBaseUrl, setBaseUrl, onClose]); return ( Confirm , @@ -66,76 +79,54 @@ export function Settings({ open, onClose }: SettingsProps) { , ]} > -
- { - return ( - validateUrl(url) || - "To continue, provide a valid URL, starting with https://" - ); - }, - }} - render={({ field, fieldState }) => ( - + + + + } + isRequired + fieldId="rekor-endpoint-override" + > + + {showValidation && ( + + + } + variant={"error"} > - - - } - isRequired - fieldId="rekor-endpoint-override" - > - - - {fieldState.invalid && ( - - - } - variant={"error"} - > - {fieldState.error?.message} - - - - )} - + To continue, specify an endpoint in https://xxxx format + + + )} - /> +
);