From e3203153cf869692735bb90f32c3d4cae7db5d60 Mon Sep 17 00:00:00 2001
From: huwshimi <huwshimi@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:40:58 +1100
Subject: [PATCH] WD-8394 - Add secrets tab (#1684)

* Add secrets tab to model details.
---
 src/pages/EntityDetails/EntityDetails.test.tsx  | 17 +++++++++++------
 src/pages/EntityDetails/EntityDetails.tsx       |  7 +++++++
 src/pages/EntityDetails/Model/Model.test.tsx    | 11 +++++++++++
 src/pages/EntityDetails/Model/Model.tsx         |  6 +++++-
 .../Model/Secrets/Secrets.test.tsx              | 12 ++++++++++++
 .../EntityDetails/Model/Secrets/Secrets.tsx     |  5 +++++
 src/pages/EntityDetails/Model/Secrets/index.ts  |  1 +
 src/urls.ts                                     |  1 +
 8 files changed, 53 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/EntityDetails/Model/Secrets/Secrets.test.tsx
 create mode 100644 src/pages/EntityDetails/Model/Secrets/Secrets.tsx
 create mode 100644 src/pages/EntityDetails/Model/Secrets/index.ts

diff --git a/src/pages/EntityDetails/EntityDetails.test.tsx b/src/pages/EntityDetails/EntityDetails.test.tsx
index 207b4e047..1b17409f7 100644
--- a/src/pages/EntityDetails/EntityDetails.test.tsx
+++ b/src/pages/EntityDetails/EntityDetails.test.tsx
@@ -19,6 +19,7 @@ import {
 } from "testing/factories/juju/model-watcher";
 import { renderComponent } from "testing/utils";
 import urls from "urls";
+import { ModelTab } from "urls";
 
 import EntityDetails, { Label } from "./EntityDetails";
 
@@ -115,7 +116,7 @@ describe("Entity Details Container", () => {
   it("lists the correct tabs", () => {
     renderComponent(<EntityDetails />, { path, url, state });
     expect(screen.getByTestId("view-selector")).toHaveTextContent(
-      /^ApplicationsIntegrationsLogsMachines$/,
+      /^ApplicationsIntegrationsLogsSecretsMachines$/,
     );
   });
 
@@ -134,7 +135,7 @@ describe("Entity Details Container", () => {
     };
     renderComponent(<EntityDetails />, { path, url, state });
     expect(screen.getByTestId("view-selector")).toHaveTextContent(
-      /^ApplicationsIntegrationsLogs$/,
+      /^ApplicationsIntegrationsLogsSecrets$/,
     );
   });
 
@@ -144,19 +145,23 @@ describe("Entity Details Container", () => {
     const sections = [
       {
         text: "Applications",
-        query: "apps",
+        query: ModelTab.APPS,
       },
       {
         text: "Integrations",
-        query: "integrations",
+        query: ModelTab.INTEGRATIONS,
       },
       {
         text: "Logs",
-        query: "logs",
+        query: ModelTab.LOGS,
       },
       {
         text: "Machines",
-        query: "machines",
+        query: ModelTab.MACHINES,
+      },
+      {
+        text: "Secrets",
+        query: ModelTab.SECRETS,
       },
     ];
     sections.forEach((section) => {
diff --git a/src/pages/EntityDetails/EntityDetails.tsx b/src/pages/EntityDetails/EntityDetails.tsx
index d8c68b11c..844474415 100644
--- a/src/pages/EntityDetails/EntityDetails.tsx
+++ b/src/pages/EntityDetails/EntityDetails.tsx
@@ -138,6 +138,13 @@ const EntityDetails = ({ modelWatcherError }: Props) => {
         to: urls.model.tab({ userName, modelName, tab: ModelTab.LOGS }),
         component: Link,
       },
+      {
+        active: activeView === "secrets",
+        label: "Secrets",
+        onClick: (e: MouseEvent) => handleNavClick(e),
+        to: urls.model.tab({ userName, modelName, tab: ModelTab.SECRETS }),
+        component: Link,
+      },
     ];
 
     if (modelInfo?.type !== "kubernetes") {
diff --git a/src/pages/EntityDetails/Model/Model.test.tsx b/src/pages/EntityDetails/Model/Model.test.tsx
index 9f02eaf35..0944d6cca 100644
--- a/src/pages/EntityDetails/Model/Model.test.tsx
+++ b/src/pages/EntityDetails/Model/Model.test.tsx
@@ -428,6 +428,17 @@ describe("Model", () => {
     expect(screen.getByTestId(TestId.CONSUMED)).toBeInTheDocument();
   });
 
+  it("can display the secrets tab via the URL", async () => {
+    renderComponent(<Model />, {
+      state,
+      url: "/models/eggman@external/test1?activeView=secrets",
+      path,
+    });
+    expect(
+      within(screen.getByTestId(TestId.MAIN)).getByText("Secrets"),
+    ).toBeInTheDocument();
+  });
+
   it("renders the details pane for models shared-with-me", () => {
     state.juju.modelWatcherData = {
       abc123: modelWatcherModelDataFactory.build({
diff --git a/src/pages/EntityDetails/Model/Model.tsx b/src/pages/EntityDetails/Model/Model.tsx
index 9ca02e2f8..43d9cd4c7 100644
--- a/src/pages/EntityDetails/Model/Model.tsx
+++ b/src/pages/EntityDetails/Model/Model.tsx
@@ -36,6 +36,7 @@ import {
 
 import ApplicationsTab from "./ApplicationsTab/ApplicationsTab";
 import Logs from "./Logs";
+import Secrets from "./Secrets";
 
 export enum Label {
   ACCESS_BUTTON = "Model access",
@@ -43,6 +44,7 @@ export enum Label {
 
 export enum TestId {
   CONSUMED = "consumed",
+  MAIN = "entity-details-main",
   OFFERS = "offers",
 }
 
@@ -56,6 +58,7 @@ const shouldShow = (segment: string, activeView: string) => {
     case "machines":
     case "integrations":
     case "logs":
+    case "secrets":
       if (segment === "relations-title") {
         return true;
       }
@@ -160,7 +163,7 @@ const Model = () => {
           />
         )}
       </div>
-      <div className="entity-details__main">
+      <div className="entity-details__main" data-testid={TestId.MAIN}>
         {shouldShow("apps", query.activeView) && <ApplicationsTab />}
         {shouldShow("machines", query.activeView) &&
           (machinesTableRows.length > 0 ? (
@@ -242,6 +245,7 @@ const Model = () => {
           </>
         )}
         {shouldShow("logs", query.activeView) && <Logs />}
+        {shouldShow("secrets", query.activeView) && <Secrets />}
       </div>
     </>
   );
diff --git a/src/pages/EntityDetails/Model/Secrets/Secrets.test.tsx b/src/pages/EntityDetails/Model/Secrets/Secrets.test.tsx
new file mode 100644
index 000000000..432b69d09
--- /dev/null
+++ b/src/pages/EntityDetails/Model/Secrets/Secrets.test.tsx
@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/react";
+
+import { renderComponent } from "testing/utils";
+
+import Secrets from "./Secrets";
+
+describe("Secrets", () => {
+  it("can display the action logs tab", async () => {
+    renderComponent(<Secrets />);
+    expect(screen.getByText("Secrets")).toBeInTheDocument();
+  });
+});
diff --git a/src/pages/EntityDetails/Model/Secrets/Secrets.tsx b/src/pages/EntityDetails/Model/Secrets/Secrets.tsx
new file mode 100644
index 000000000..08d7d5622
--- /dev/null
+++ b/src/pages/EntityDetails/Model/Secrets/Secrets.tsx
@@ -0,0 +1,5 @@
+const Secrets = () => {
+  return <div>Secrets</div>;
+};
+
+export default Secrets;
diff --git a/src/pages/EntityDetails/Model/Secrets/index.ts b/src/pages/EntityDetails/Model/Secrets/index.ts
new file mode 100644
index 000000000..76d66b379
--- /dev/null
+++ b/src/pages/EntityDetails/Model/Secrets/index.ts
@@ -0,0 +1 @@
+export { default } from "./Secrets";
diff --git a/src/urls.ts b/src/urls.ts
index 2c690a78a..c9ba0c703 100644
--- a/src/urls.ts
+++ b/src/urls.ts
@@ -5,6 +5,7 @@ export enum ModelTab {
   MACHINES = "machines",
   INTEGRATIONS = "integrations",
   LOGS = "logs",
+  SECRETS = "secrets",
 }
 
 export type AppTab = "machines" | "units";