WD-8394 - Add secrets tab (#1684)

* Add secrets tab to model details.

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) => {

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") {

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({

src/pages/EntityDetails/Model/Model.tsx

@@ -36,13 +36,15 @@ import {
 
 import ApplicationsTab from "./ApplicationsTab/ApplicationsTab";
 import Logs from "./Logs";
+import Secrets from "./Secrets";
 
 export enum Label {
   ACCESS_BUTTON = "Model access",
 }
 
 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>
     </>
   );

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();
+  });
+});

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

@@ -0,0 +1,5 @@
+const Secrets = () => {
+  return <div>Secrets</div>;
+};
+
+export default Secrets;

src/pages/EntityDetails/Model/Secrets/index.ts

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

src/urls.ts

@@ -5,6 +5,7 @@ export enum ModelTab {
   MACHINES = "machines",
   INTEGRATIONS = "integrations",
   LOGS = "logs",
+  SECRETS = "secrets",
 }
 
 export type AppTab = "machines" | "units";