Skip to content

Commit

Permalink
feat: use AuthFields to for git password and username
Browse files Browse the repository at this point in the history
fix: fix issue withEnvVarSource not working
  • Loading branch information
mainawycliffe committed Nov 16, 2023
1 parent 6509482 commit 178444f
Show file tree
Hide file tree
Showing 7 changed files with 339 additions and 116 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function FormikConnectionOptionsSwitchField({ field }: Props) {
const firstField = field.options?.find((option) => {
return option.fields?.find((field) => get(values, field.key));
});
return firstField?.key ?? field.default ?? field.options?.[0]?.key;
return firstField?.key ?? "None";
});

if (!field.options) {
Expand All @@ -33,7 +33,7 @@ export default function FormikConnectionOptionsSwitchField({ field }: Props) {
<label className="font-semibold text-sm">{field.label}</label>
<div className="flex flex-row">
<Switch
options={[...field.options?.map((option) => option.label)]}
options={["None", ...field.options?.map((option) => option.label)]}
defaultValue="None"
value={
field.options?.find((option) => option.key === selectedGroup)?.label
Expand All @@ -47,12 +47,12 @@ export default function FormikConnectionOptionsSwitchField({ field }: Props) {
setFieldValue(option.key, undefined);
});
setSelectedGroup(
field.options?.find((option) => option.label === v)?.key
field.options?.find((option) => option.label === v)?.key ?? "None"
);
}}
/>
</div>
<div className="flex flex-col gap-4 overflow-y-auto px-4">
<div className="flex flex-col gap-4 overflow-y-auto px-2">
{selectedField?.fields?.map((field) => (
<RenderConnectionFormFields field={field} key={field.key} />
))}
Expand Down
16 changes: 14 additions & 2 deletions src/components/Connections/RenderConnectionFormFields.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import FormikConnectionOptionsSwitchField from "./FormikConnectionOptionsSwitchField";
import FormikCheckbox from "../Forms/Formik/FormikCheckbox";
import { FormikCompactEnvVarSource } from "../Forms/Formik/FormikCompactEnvVarSource";
import { FormikEnvVarSource } from "../Forms/Formik/FormikEnvVarSource";
import FormikTextInput from "../Forms/Formik/FormikTextInput";
import FormikConnectionOptionsSwitchField from "./FormikConnectionOptionsSwitchField";
import { ConnectionFormFields } from "./connectionTypes";

interface FieldViewProps {
Expand Down Expand Up @@ -46,14 +47,25 @@ export default function RenderConnectionFormFields({ field }: FieldViewProps) {
return (
<FormikEnvVarSource
name={field.key}
label={field.label}
label={field.hideLabel ? undefined : field.label}
variant={field.variant}
hint={field.hint}
required={field.required}
/>
);
case "switch":
return <FormikConnectionOptionsSwitchField field={field} />;

case "authentication":
return (
<FormikCompactEnvVarSource
name={field.key}
label={field.hideLabel ? undefined : field.label}
variant={field.variant}
hint={field.hint}
required={field.required}
/>
);
default:
return null;
}
Expand Down
13 changes: 8 additions & 5 deletions src/components/Connections/connectionTypes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ const enum ConnectionsFieldTypes {
input = "input",
numberInput = "numberInput",
EnvVarSource = "EnvVarSource",
switch = "switch"
switch = "switch",
Authentication = "authentication"
}

type Variant = "small" | "large";
Expand All @@ -26,6 +27,7 @@ export type ConnectionFormFields = {
required?: boolean;
hint?: string;
default?: boolean | number | string;
hideLabel?: boolean;
options?: {
label: string;
key: string;
Expand Down Expand Up @@ -1838,27 +1840,28 @@ export const connectionTypes: ConnectionType[] = [
default: "password",
options: [
{
label: "Password",
label: "Basic",
key: "password",
fields: [
{
label: "Username",
key: "username",
type: ConnectionsFieldTypes.EnvVarSource
type: ConnectionsFieldTypes.Authentication
},
{
label: "Password",
key: "password",
type: ConnectionsFieldTypes.EnvVarSource
type: ConnectionsFieldTypes.Authentication
}
]
},
{
label: "SSH Key",
label: "SSH",
key: "certificate",
fields: [
{
label: "SSH Key",
hideLabel: true,
key: "certificate",
type: ConnectionsFieldTypes.EnvVarSource,
variant: variants.large
Expand Down
148 changes: 148 additions & 0 deletions src/components/Forms/Formik/FormikCompactEnvVarSource.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import { useField } from "formik";
import { useEffect, useState } from "react";
import { Switch } from "../../Switch";
import {
EnvVarSourceType,
FormikEnvVarSourceProps,
configmapValueRegex,
secretValueRegex
} from "./FormikEnvVarSource";
import FormikEnvVarK8SView from "./utils/FormikEnvVarK8SView";
import FormikEnvVarStaticView from "./utils/FormikEnvVarStaticView";

export function FormikCompactEnvVarSource({
className,
variant = "small",
name,
label,
hint,
disabled,
readOnly,
required,
...props
}: FormikEnvVarSourceProps) {
const [type, setType] = useState<EnvVarSourceType>("Static");
const prefix = `${name}.${type === "ConfigMap" ? "configmap" : "secret"}`;
const [data, setData] = useState({
static: "",
name: "",
key: ""
});
const [field, meta] = useField({
name: name!,
type: "text",
required,
validate: (value) => {
if (required && !value) {
return "This field is required";
}
}
});

useEffect(() => {
const value = getValue();
if (field.value !== value) {
field.onChange({
target: {
name,
value
}
});
}
}, [data]);

useEffect(() => {
if (field.value === getValue()) {
return;
}
let value =
field.value?.match(configmapValueRegex) ||
field.value?.match(secretValueRegex);
if (value?.length === 3 && field.value?.includes("configmap")) {
setData({
static: "",
key: value[2],
name: value[1]
});
setType("ConfigMap");
return;
}
if (value?.length === 3 && field.value?.includes("secret")) {
setData({
static: "",
key: value[2],
name: value[1]
});
setType("Secret");
return;
}
setData({
static: field.value,
key: "",
name: ""
});
setType("Static");
}, []);

const getValue = () => {
let value = "";
if (type === "Static") {
value = data.static;
}
if (type === "Secret" && data.name && data.key) {
value = `secret://${data.name}/${data.key}`;
}
if (type === "ConfigMap" && data.name && data.key) {
value = `configmap://${data.name}/${data.key}`;
}
return value;
};

return (
<div className="flex flex-col gap-2">
<label className="font-semibold text-sm">{label}</label>
<div className="flex flex-row gap-2">
<div className="w-full">
{type === "Static" ? (
<FormikEnvVarStaticView
name="name"
variant="small"
disabled={disabled}
readOnly={readOnly}
data={data}
setData={setData}
/>
) : (
<FormikEnvVarK8SView
prefix={prefix}
data={data}
setData={setData}
className="flex flex-row gap-2 items-center"
/>
)}
{meta.touched && meta.error ? (
<p className="text-sm text-red-500 w-full py-1">{meta.error}</p>
) : null}
</div>
<Switch
options={["Static", "Secret", "ConfigMap"]}
defaultValue={"None"}
value={type}
onChange={(v) => {
if (readOnly || disabled) {
return;
}
setData({
static: "",
key: "",
name: ""
});
setType(v as EnvVarSourceType);
}}
className="w-[24rem]"
/>
</div>
{hint && <p className="text-sm text-gray-500 py-1">{hint}</p>}
</div>
);
}
Loading

0 comments on commit 178444f

Please sign in to comment.