WD-8401 - Remove secrets

src/juju/apiHooks.test.tsx

@@ -24,6 +24,7 @@ import {
   useCreateSecrets,
   useModelConnectionCallback,
   useGetSecretContent,
+  useRemoveSecrets,
 } from "./apiHooks";
 
 const mockStore = configureStore<RootState, unknown>([]);
@@ -932,3 +933,169 @@ describe("useCreateSecrets", () => {
     );
   });
 });
+
+describe("useRemoveSecrets", () => {
+  let state: RootState;
+
+  beforeEach(() => {
+    state = rootStateFactory.build({
+      general: generalStateFactory.build({
+        credentials: {
+          "wss://example.com/api": credentialFactory.build(),
+        },
+        config: configFactory.build({
+          controllerAPIEndpoint: "wss://example.com/api",
+        }),
+      }),
+      juju: {
+        models: {
+          abc123: modelListInfoFactory.build({
+            wsControllerURL: "wss://example.com/api",
+            uuid: "abc123",
+          }),
+        },
+      },
+    });
+  });
+
+  it("can remove secrets", async () => {
+    const store = mockStore(state);
+    changeURL("/models/eggman@external/group-test/app/etcd");
+    const secrets = [
+      {
+        uri: "secret:aabbccdd",
+      },
+    ];
+    const results = { results: [{ result: "secret:def456" }] };
+    const removeSecrets = jest
+      .fn()
+      .mockImplementation(() => Promise.resolve(results));
+    const loginResponse = {
+      conn: {
+        facades: {
+          secrets: {
+            removeSecrets,
+          },
+        },
+      } as unknown as Connection,
+      logout: jest.fn(),
+    };
+    jest
+      .spyOn(jujuLib, "connectAndLogin")
+      .mockImplementation(() => Promise.resolve(loginResponse));
+    const { result } = renderHook(
+      () => useRemoveSecrets("eggman@external", "test-model"),
+      {
+        wrapper: (props) => (
+          <ComponentProviders
+            {...props}
+            path="/models/:userName/:modelName/app/:appName"
+            store={store}
+          />
+        ),
+      },
+    );
+    await expect(result.current(secrets)).resolves.toBe(results);
+    expect(removeSecrets).toHaveBeenCalledWith({ args: secrets });
+  });
+
+  it("handles no connection", async () => {
+    const store = mockStore(state);
+    changeURL("/models/eggman@external/group-test/app/etcd");
+    const secrets = [
+      {
+        uri: "secret:aabbccdd",
+      },
+    ];
+    const loginResponse = {
+      logout: jest.fn(),
+    };
+    jest
+      .spyOn(jujuLib, "connectAndLogin")
+      .mockImplementation(() => Promise.resolve(loginResponse));
+    const { result } = renderHook(
+      () => useRemoveSecrets("eggman@external", "test-model"),
+      {
+        wrapper: (props) => (
+          <ComponentProviders
+            {...props}
+            path="/models/:userName/:modelName/app/:appName"
+            store={store}
+          />
+        ),
+      },
+    );
+    await expect(result.current(secrets)).rejects.toStrictEqual(
+      new Error("Unable to connect to model"),
+    );
+  });
+
+  it("handles connection errors", async () => {
+    const store = mockStore(state);
+    changeURL("/models/eggman@external/group-test/app/etcd");
+    const secrets = [
+      {
+        uri: "secret:aabbccdd",
+      },
+    ];
+    jest
+      .spyOn(jujuLib, "connectAndLogin")
+      .mockImplementation(() => Promise.reject(new Error()));
+    const { result } = renderHook(
+      () => useRemoveSecrets("eggman@external", "test-model"),
+      {
+        wrapper: (props) => (
+          <ComponentProviders
+            {...props}
+            path="/models/:userName/:modelName/app/:appName"
+            store={store}
+          />
+        ),
+      },
+    );
+    await expect(result.current(secrets)).rejects.toBe(
+      "Error during promise race.",
+    );
+  });
+
+  it("handles errors from removing secrets", async () => {
+    const store = mockStore(state);
+    changeURL("/models/eggman@external/group-test/app/etcd");
+    const secrets = [
+      {
+        uri: "secret:aabbccdd",
+      },
+    ];
+    const removeSecrets = jest
+      .fn()
+      .mockImplementation(() => Promise.reject(new Error("Uh oh!")));
+    const loginResponse = {
+      conn: {
+        facades: {
+          secrets: {
+            removeSecrets,
+          },
+        },
+      } as unknown as Connection,
+      logout: jest.fn(),
+    };
+    jest
+      .spyOn(jujuLib, "connectAndLogin")
+      .mockImplementation(() => Promise.resolve(loginResponse));
+    const { result } = renderHook(
+      () => useRemoveSecrets("eggman@external", "test-model"),
+      {
+        wrapper: (props) => (
+          <ComponentProviders
+            {...props}
+            path="/models/:userName/:modelName/app/:appName"
+            store={store}
+          />
+        ),
+      },
+    );
+    await expect(result.current(secrets)).rejects.toStrictEqual(
+      new Error("Uh oh!"),
+    );
+  });
+});

src/juju/apiHooks.ts

@@ -3,6 +3,8 @@ import type {
   ListSecretsArgs,
   CreateSecretArgs,
   StringResults,
+  ErrorResults,
+  DeleteSecretArg,
 } from "@canonical/jujulib/dist/api/facades/secrets/SecretsV2";
 import { useEffect, useCallback } from "react";
 import { useSelector } from "react-redux";
@@ -234,3 +236,39 @@ export const useCreateSecrets = (userName?: string, modelName?: string) => {
     [modelConnectionCallback],
   );
 };
+
+export const useRemoveSecrets = (userName?: string, modelName?: string) => {
+  const modelUUID = useSelector(getModelUUIDFromList(modelName, userName));
+  const modelConnectionCallback = useModelConnectionCallback(modelUUID);
+  return useCallback(
+    (secrets: Partial<DeleteSecretArg>[]) => {
+      return new Promise<ErrorResults>((resolve, reject) => {
+        modelConnectionCallback(
+          (
+            connection?: ConnectionWithFacades | null,
+            error?: string | null,
+          ) => {
+            if (error) {
+              reject(error);
+              return;
+            }
+            if (!connection) {
+              reject(new Error("Unable to connect to model"));
+              return;
+            }
+            connection.facades.secrets
+              // Cast to `DeleteSecretArg` as the API requires either label or
+              // URI, but the type declares both as required.
+              ?.removeSecrets({ args: secrets as DeleteSecretArg[] })
+              .then((response) => {
+                resolve(response);
+                return;
+              })
+              .catch((error) => reject(error));
+          },
+        );
+      });
+    },
+    [modelConnectionCallback],
+  );
+};

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

@@ -151,4 +151,24 @@ describe("SecretsTable", () => {
       }),
     );
   });
+
+  it("can display the remove secret panel", async () => {
+    state.juju.secrets = secretsStateFactory.build({
+      abc123: modelSecretsFactory.build({
+        items: [listSecretResultFactory.build({ uri: "secret:aabbccdd" })],
+        loaded: true,
+      }),
+    });
+    renderComponent(<SecretsTable />, { state, path, url });
+    expect(window.location.search).toEqual("");
+    await userEvent.click(
+      screen.getByRole("button", { name: Label.ACTION_MENU }),
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: Label.REMOVE_BUTTON }),
+    );
+    expect(window.location.search).toEqual(
+      "?panel=remove-secret&secret=secret%3Aaabbccdd",
+    );
+  });
 });

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

@@ -3,6 +3,7 @@ import {
   Button,
   Icon,
   Tooltip,
+  ContextualMenu,
 } from "@canonical/react-components";
 import type { ReactNode } from "react";
 import { useMemo } from "react";
@@ -15,6 +16,7 @@ import RelativeDate from "components/RelativeDate";
 import type { EntityDetailsRoute } from "components/Routes/Routes";
 import TruncatedTooltip from "components/TruncatedTooltip";
 import { copyToClipboard } from "components/utils";
+import { useQueryParams } from "hooks/useQueryParams";
 import {
   getSecretsLoading,
   getSecretsLoaded,
@@ -26,7 +28,9 @@ import { useAppSelector } from "store/store";
 import SecretContent from "../SecretContent";
 
 export enum Label {
+  ACTION_MENU = "Action menu",
   COPY = "Copy",
+  REMOVE_BUTTON = "Remove secret",
 }
 
 export enum TestId {
@@ -43,6 +47,13 @@ const SecretsTable = () => {
   const secretsLoading = useAppSelector((state) =>
     getSecretsLoading(state, modelUUID),
   );
+  const [, setQuery] = useQueryParams<{
+    panel: string | null;
+    secret: string | null;
+  }>({
+    panel: null,
+    secret: null,
+  });
 
   const tableData = useMemo(() => {
     if (!secrets) {
@@ -97,10 +108,25 @@ const SecretsTable = () => {
         owner,
         created: <RelativeDate datetime={secret["create-time"]} />,
         updated: <RelativeDate datetime={secret["update-time"]} />,
-        actions: "",
+        actions: (
+          <ContextualMenu
+            links={[
+              {
+                children: Label.REMOVE_BUTTON,
+                onClick: () =>
+                  setQuery({ panel: "remove-secret", secret: secret.uri }),
+              },
+            ]}
+            position="right"
+            scrollOverflow
+            toggleAppearance="base"
+            toggleClassName="has-icon u-no-margin--bottom is-small"
+            toggleLabel={<Icon name="menu">{Label.ACTION_MENU}</Icon>}
+          />
+        ),
       };
     });
-  }, [modelUUID, secrets]);
+  }, [modelUUID, secrets, setQuery]);
 
   const columnData: Column[] = useMemo(
     () => [
@@ -136,6 +162,7 @@ const SecretsTable = () => {
       {
         Header: "Actions",
         accessor: "actions",
+        className: "u-align--right",
       },
     ],
     [],

src/panels/Panels.test.tsx

@@ -8,6 +8,7 @@ import { TestId as AuditLogsFilterPanelTestId } from "./AuditLogsFilterPanel/Aud
 import { TestId as CharmsAndActionsPanelTestId } from "./CharmsAndActionsPanel/CharmsAndActionsPanel";
 import { TestId as ConfigPanelTestId } from "./ConfigPanel/ConfigPanel";
 import Panels from "./Panels";
+import { TestId as RemoveSecretPanelTestId } from "./RemoveSecretPanel/RemoveSecretPanel";
 import { TestId as ShareModelTestId } from "./ShareModelPanel/ShareModel";
 
 describe("Panels", () => {
@@ -54,4 +55,13 @@ describe("Panels", () => {
       await screen.findByTestId(AddSecretPanelTestId.PANEL),
     ).toBeInTheDocument();
   });
+
+  it("can display the remove secret panel", async () => {
+    renderComponent(<Panels />, {
+      url: "/?panel=remove-secret",
+    });
+    expect(
+      await screen.findByTestId(RemoveSecretPanelTestId.PANEL),
+    ).toBeInTheDocument();
+  });
 });

src/panels/Panels.tsx

@@ -8,6 +8,7 @@ import ShareModel from "panels/ShareModelPanel/ShareModel";
 import AuditLogsFilterPanel from "./AuditLogsFilterPanel";
 import CharmsAndActionsPanel from "./CharmsAndActionsPanel/CharmsAndActionsPanel";
 import ConfigPanel from "./ConfigPanel/ConfigPanel";
+import RemoveSecretPanel from "./RemoveSecretPanel";
 
 export default function Panels() {
   const [panelQs] = useQueryParams<{ panel: string | null }>({
@@ -28,6 +29,8 @@ export default function Panels() {
         return <AuditLogsFilterPanel />;
       case "add-secret":
         return <AddSecretPanel />;
+      case "remove-secret":
+        return <RemoveSecretPanel />;
       default:
         return null;
     }