WD-8399 - Create add secrets panel

src/pages/EntityDetails/Model/Secrets/Secrets.test.tsx

@@ -1,4 +1,5 @@
 import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import configureStore from "redux-mock-store";
 
 import { actions as jujuActions } from "store/juju";
@@ -18,7 +19,7 @@ import {
 import { renderComponent } from "testing/utils";
 import urls from "urls";
 
-import Secrets from "./Secrets";
+import Secrets, { Label } from "./Secrets";
 import { TestId as SecretsTableTestId } from "./SecretsTable/SecretsTable";
 
 const mockStore = configureStore<RootState, unknown>([]);
@@ -111,4 +112,10 @@ describe("Secrets", () => {
       ).toBeUndefined();
     });
   });
+
+  it("can open the add secret panel", async () => {
+    renderComponent(<Secrets />, { state, path, url });
+    await userEvent.click(screen.getByRole("button", { name: Label.ADD }));
+    expect(window.location.search).toEqual("?panel=add-secret");
+  });
 });

src/pages/EntityDetails/Model/Secrets/Secrets.tsx

@@ -1,9 +1,10 @@
-import { Notification } from "@canonical/react-components";
+import { Notification, Button } from "@canonical/react-components";
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 
 import type { EntityDetailsRoute } from "components/Routes/Routes";
+import { useQueryParams } from "hooks/useQueryParams";
 import { useListSecrets } from "juju/apiHooks";
 import { actions as jujuActions } from "store/juju";
 import {
@@ -15,6 +16,10 @@ import { useAppDispatch, useAppSelector } from "store/store";
 
 import SecretsTable from "./SecretsTable";
 
+export enum Label {
+  ADD = "Add secret",
+}
+
 export enum TestId {
   SECRETS_TAB = "secrets-tab",
 }
@@ -30,6 +35,12 @@ const Secrets = () => {
     getSecretsErrors(state, modelUUID),
   );
 
+  const [, setQuery] = useQueryParams<{
+    panel: string | null;
+  }>({
+    panel: null,
+  });
+
   useListSecrets(userName, modelName);
 
   useEffect(
@@ -50,7 +61,16 @@ const Secrets = () => {
       </Notification>
     );
   } else {
-    content = <SecretsTable />;
+    content = (
+      <>
+        <Button
+          onClick={() => setQuery({ panel: "add-secret" }, { replace: true })}
+        >
+          {Label.ADD}
+        </Button>
+        <SecretsTable />
+      </>
+    );
   }
 
   return <div data-testid={TestId.SECRETS_TAB}>{content}</div>;

src/panels/AddSecretPanel/AddSecretPanel.test.tsx

@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/react";
+
+import { renderComponent } from "testing/utils";
+
+import AddSecretPanel, { TestId } from "./AddSecretPanel";
+
+describe("AddSecretPanel", () => {
+  it("renders", async () => {
+    renderComponent(<AddSecretPanel />);
+    expect(screen.getByTestId(TestId.PANEL)).toBeInTheDocument();
+  });
+});

src/panels/AddSecretPanel/AddSecretPanel.tsx

@@ -0,0 +1,89 @@
+import {
+  ActionButton,
+  Button,
+  Notification,
+} from "@canonical/react-components";
+import { Form, Formik } from "formik";
+import { useId, useState, useRef } from "react";
+
+import Panel from "components/Panel";
+import ScrollOnRender from "components/ScrollOnRender";
+import { usePanelQueryParams } from "panels/hooks";
+
+import Fields from "./Fields";
+import { RotatePolicy, type FormFields } from "./types";
+
+export enum TestId {
+  PANEL = "add-secret-panel",
+}
+
+export enum Label {
+  CANCEL = "Cancel",
+  SUBMIT = "Add secret",
+}
+
+const AddSecretPanel = () => {
+  const scrollArea = useRef<HTMLDivElement>(null);
+  const formId = useId();
+  const [, , handleRemovePanelQueryParams] = usePanelQueryParams<{
+    panel: string | null;
+  }>({
+    panel: null,
+  });
+  const [inlineError, setInlineError] = useState<string[] | null>(null);
+  const [saving, setSaving] = useState<boolean>(false);
+  return (
+    <>
+      {inlineError ? (
+        <ScrollOnRender scrollArea={scrollArea?.current}>
+          <Notification severity="negative">{inlineError}</Notification>
+        </ScrollOnRender>
+      ) : null}
+      <Panel
+        data-testid={TestId.PANEL}
+        drawer={
+          <>
+            <Button onClick={handleRemovePanelQueryParams}>
+              {Label.CANCEL}
+            </Button>
+            <ActionButton
+              appearance="positive"
+              disabled={saving}
+              form={formId}
+              loading={saving}
+              type="submit"
+            >
+              {Label.SUBMIT}
+            </ActionButton>
+          </>
+        }
+        onRemovePanelQueryParams={handleRemovePanelQueryParams}
+        ref={scrollArea}
+        title="Add a secret"
+        width="narrow"
+      >
+        <Formik<FormFields>
+          initialValues={{
+            content: "",
+            description: "",
+            expiryTime: "",
+            isBase64: false,
+            label: "",
+            rotatePolicy: RotatePolicy.NEVER,
+          }}
+          onSubmit={(values) => {
+            setSaving(true);
+            setInlineError(null);
+            handleRemovePanelQueryParams();
+          }}
+        >
+          <Form id={formId}>
+            <Fields />
+          </Form>
+        </Formik>
+      </Panel>
+    </>
+  );
+};
+
+export default AddSecretPanel;

src/panels/AddSecretPanel/Fields/Fields.test.tsx

@@ -0,0 +1,17 @@
+import { screen } from "@testing-library/react";
+import { Formik } from "formik";
+
+import { renderComponent } from "testing/utils";
+
+import Fields from "./Fields";
+
+describe("Fields", () => {
+  it("renders", async () => {
+    renderComponent(
+      <Formik initialValues={{}} onSubmit={jest.fn()}>
+        <Fields />
+      </Formik>,
+    );
+    expect(screen.getByRole("textbox", { name: "Label" })).toBeInTheDocument();
+  });
+});

src/panels/AddSecretPanel/Fields/Fields.tsx

@@ -0,0 +1,77 @@
+import { Input, Select, Textarea } from "@canonical/react-components";
+import { Field } from "formik";
+
+import { RotatePolicy } from "../types";
+
+export enum Label {
+  CONTENT = "Content",
+  DESCRIPTION = "Description",
+  EXPIRY_TIME = "Expiry time",
+  IS_BASE_64 = "Is base64 encoded",
+  LABEL = "Label",
+  ROTATE_POLICY = "Rotate policy",
+}
+
+const Fields = (): JSX.Element => {
+  return (
+    <>
+      <Field
+        // Have to manually set the id until this issue has been fixed:
+        // https://github.com/canonical/react-components/issues/957
+        id={Label.LABEL}
+        label={Label.LABEL}
+        name="label"
+        as={Input}
+        type="text"
+      />
+      <Field
+        // Have to manually set the id until this issue has been fixed:
+        // https://github.com/canonical/react-components/issues/957
+        id={Label.DESCRIPTION}
+        label={Label.DESCRIPTION}
+        name="description"
+        as={Textarea}
+      />
+      <Field
+        // Have to manually set the id until this issue has been fixed:
+        // https://github.com/canonical/react-components/issues/957
+        id={Label.CONTENT}
+        label={Label.CONTENT}
+        name="content"
+        as={Textarea}
+      />
+      <Field
+        // Have to manually set the id until this issue has been fixed:
+        // https://github.com/canonical/react-components/issues/957
+        id={Label.IS_BASE_64}
+        label={Label.IS_BASE_64}
+        name="isBase64"
+        as={Input}
+        type="checkbox"
+      />
+      <Field
+        type="datetime-local"
+        // Have to manually set the id until this issue has been fixed:
+        // https://github.com/canonical/react-components/issues/957
+        id={Label.EXPIRY_TIME}
+        label={Label.EXPIRY_TIME}
+        name="expire-time"
+        as={Input}
+      />
+      <Field
+        // Have to manually set the id until this issue has been fixed:
+        // https://github.com/canonical/react-components/issues/957
+        id={Label.ROTATE_POLICY}
+        label={Label.ROTATE_POLICY}
+        name="rotate-policy"
+        as={Select}
+        options={Object.values(RotatePolicy).map((option) => ({
+          label: option,
+          value: option,
+        }))}
+      />
+    </>
+  );
+};
+
+export default Fields;

src/panels/AddSecretPanel/Fields/index.ts

@@ -0,0 +1 @@
+export { default } from "./Fields";

src/panels/AddSecretPanel/index.ts

@@ -0,0 +1 @@
+export { default } from "./AddSecretPanel";

src/panels/AddSecretPanel/types.ts

@@ -0,0 +1,18 @@
+export enum RotatePolicy {
+  NEVER = "never",
+  HOURLY = "hourly",
+  DAILY = "daily",
+  WEEKLY = "weekly",
+  MONTHLY = "monthly",
+  QUARTERLY = "quarterly",
+  YEARLY = "yearly",
+}
+
+export type FormFields = {
+  content: string;
+  description: string;
+  expiryTime: string;
+  isBase64: boolean;
+  label: string;
+  rotatePolicy: RotatePolicy;
+};

src/panels/Panels.test.tsx

@@ -3,6 +3,7 @@ import { screen } from "@testing-library/react";
 import { renderComponent } from "testing/utils";
 
 import { TestId as ActionsPanelTestId } from "./ActionsPanel/ActionsPanel";
+import { TestId as AddSecretPanelTestId } from "./AddSecretPanel/AddSecretPanel";
 import { TestId as AuditLogsFilterPanelTestId } from "./AuditLogsFilterPanel/AuditLogsFilterPanel";
 import { TestId as CharmsAndActionsPanelTestId } from "./CharmsAndActionsPanel/CharmsAndActionsPanel";
 import { TestId as ConfigPanelTestId } from "./ConfigPanel/ConfigPanel";
@@ -44,4 +45,13 @@ describe("Panels", () => {
       await screen.findByTestId(AuditLogsFilterPanelTestId.PANEL),
     ).toBeInTheDocument();
   });
+
+  it("can display the add secret panel", async () => {
+    renderComponent(<Panels />, {
+      url: "/?panel=add-secret",
+    });
+    expect(
+      await screen.findByTestId(AddSecretPanelTestId.PANEL),
+    ).toBeInTheDocument();
+  });
 });

src/panels/Panels.tsx

@@ -2,6 +2,7 @@ import { AnimatePresence } from "framer-motion";
 
 import { useQueryParams } from "hooks/useQueryParams";
 import ActionsPanel from "panels/ActionsPanel/ActionsPanel";
+import AddSecretPanel from "panels/AddSecretPanel";
 import ShareModel from "panels/ShareModelPanel/ShareModel";
 
 import AuditLogsFilterPanel from "./AuditLogsFilterPanel";
@@ -25,6 +26,8 @@ export default function Panels() {
         return <ConfigPanel />;
       case "audit-log-filters":
         return <AuditLogsFilterPanel />;
+      case "add-secret":
+        return <AddSecretPanel />;
       default:
         return null;
     }