WD-8546 - Create secrets

package.json

@@ -78,7 +78,8 @@
     "react-scripts": "5.0.1",
     "react-useportal": "1.0.19",
     "redux": "5.0.1",
-    "vanilla-framework": "4.5.1"
+    "vanilla-framework": "4.5.1",
+    "yup": "1.3.3"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",

src/components/FormikField/FormikField.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import { Formik } from "formik";
+
+import FormikField from "./FormikField";
+
+describe("FormikField", () => {
+  it("can set a different component", () => {
+    const Component = () => <select />;
+    render(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <FormikField component={Component} name="username" />
+      </Formik>,
+    );
+
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+  });
+
+  it("can pass errors", () => {
+    render(
+      <Formik
+        initialErrors={{ username: "Uh oh!" }}
+        initialTouched={{ username: true }}
+        initialValues={{ username: "" }}
+        onSubmit={jest.fn()}
+      >
+        <FormikField name="username" />
+      </Formik>,
+    );
+
+    expect(screen.getByRole("textbox")).toHaveAccessibleErrorMessage(
+      "Error: Uh oh!",
+    );
+  });
+
+  it("can hide the errors", () => {
+    render(
+      <Formik
+        initialErrors={{ username: "Uh oh!" }}
+        initialTouched={{ username: true }}
+        initialValues={{ username: "" }}
+        onSubmit={jest.fn()}
+      >
+        <FormikField displayError={false} name="username" />
+      </Formik>,
+    );
+
+    expect(screen.getByRole("textbox")).not.toHaveAccessibleErrorMessage();
+  });
+});

src/components/FormikField/FormikField.tsx

@@ -0,0 +1,43 @@
+import { Input } from "@canonical/react-components";
+import { useField } from "formik";
+import {
+  useId,
+  type ComponentProps,
+  type ComponentType,
+  type ElementType,
+  type HTMLProps,
+} from "react";
+
+export type Props<C extends ElementType | ComponentType = typeof Input> = {
+  component?: C;
+  displayError?: boolean;
+  name: string;
+  value?: HTMLProps<HTMLElement>["value"];
+} & ComponentProps<C>;
+
+const FormikField = <C extends ElementType | ComponentType = typeof Input>({
+  component: Component = Input,
+  displayError = true,
+  name,
+  value,
+  label,
+  ...props
+}: Props<C>): JSX.Element => {
+  const id = useId();
+  const [field, meta] = useField({ name, type: props.type, value });
+
+  return (
+    <Component
+      aria-label={label}
+      error={meta.touched && displayError ? meta.error : null}
+      // Have to manually set the id until this issue has been fixed:
+      // https://github.com/canonical/react-components/issues/957
+      id={id}
+      label={label}
+      {...field}
+      {...props}
+    />
+  );
+};
+
+export default FormikField;