Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(build): override env var with manually-defined localBaseUrl #62

Merged
merged 1 commit into from
Apr 30, 2024
Merged

fix(build): override env var with manually-defined localBaseUrl #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 2 additions & 14 deletions src/modules/api/context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
useState,
} from "react";
import { RekorClient } from "rekor";
import getConfig from "next/config";

export interface RekorClientContext {
client: RekorClient;
Expand All @@ -23,21 +22,10 @@ export const RekorClientProvider: FunctionComponent<PropsWithChildren<{}>> = ({
children,
}) => {
const [baseUrl, setBaseUrl] = useState<string>();
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 {
Expand Down
171 changes: 81 additions & 90 deletions src/modules/components/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { FormEvent, useCallback, useState } from "react";
import { useRekorBaseUrl } from "../api/context";
import {
Modal,
Expand All @@ -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<HTMLInputElement>) => {
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 (
<Modal
Expand All @@ -51,9 +66,7 @@ export function Settings({ open, onClose }: SettingsProps) {
<Button
key="confirm"
variant="primary"
isDisabled={!isValid}
onClick={onSave}
type="submit"
>
Confirm
</Button>,
Expand All @@ -66,76 +79,54 @@ export function Settings({ open, onClose }: SettingsProps) {
</Button>,
]}
>
<Form
id="settings-form"
onSubmit={handleSubmit(onSave)}
>
<Controller
name="endpoint"
control={control}
rules={{
required: {
value: true,
message: "To continue, specify an endpoint in xxxx format",
},
validate: (url: string | undefined) => {
return (
validateUrl(url) ||
"To continue, provide a valid URL, starting with https://"
);
},
}}
render={({ field, fieldState }) => (
<FormGroup
label="Override Rekor Endpoint"
labelIcon={
<Popover
bodyContent={"Specify your private Rekor endpoint URL."}
<Form id="settings-form">
<FormGroup
label="Override Rekor Endpoint"
labelIcon={
<Popover bodyContent={"Specify your private Rekor endpoint URL."}>
<button
type="button"
aria-label="More info for name field"
onClick={e => e.preventDefault()}
aria-describedby="form-group-label-info"
className={styles.formGroupLabelHelp}
>
<HelpIcon />
</button>
</Popover>
}
isRequired
fieldId="rekor-endpoint-override"
>
<TextInput
value={localBaseUrl ?? "https://rekor.sigstore.dev"}
type="text"
onChange={handleChangeBaseUrl}
placeholder={
baseUrl === undefined
? "https://private.rekor.example.com"
: baseUrl
}
label={"name"}
aria-label="override rekor endpoint"
id={"rekor-endpoint-override"}
validated={showValidation ? ValidatedOptions.error : undefined}
aria-invalid={showValidation}
isRequired
/>
{showValidation && (
<FormHelperText>
<HelperText>
<HelperTextItem
icon={<ExclamationCircleIcon />}
variant={"error"}
>
<button
type="button"
aria-label="Rekor endpoint URL"
onClick={e => e.preventDefault()}
aria-describedby="rekor-endpoint-url"
className={styles.formGroupLabelHelp}
>
<HelpIcon />
</button>
</Popover>
}
isRequired
fieldId="rekor-endpoint-override"
>
<TextInput
type="text"
{...field}
aria-invalid={errors.endpoint ? "true" : "false"}
placeholder={
baseUrl === undefined
? "https://private.rekor.example.com"
: baseUrl
}
label={"name"}
aria-label="override rekor endpoint"
id={"rekor-endpoint-override"}
validated={fieldState.invalid ? "error" : "default"}
/>

{fieldState.invalid && (
<FormHelperText>
<HelperText>
<HelperTextItem
icon={<ExclamationCircleIcon />}
variant={"error"}
>
{fieldState.error?.message}
</HelperTextItem>
</HelperText>
</FormHelperText>
)}
</FormGroup>
To continue, specify an endpoint in https://xxxx format
</HelperTextItem>
</HelperText>
</FormHelperText>
)}
/>
</FormGroup>
</Form>
</Modal>
);
Expand Down
Loading