feat: add support for both Juju 3.6 and 4.0

package.json

@@ -50,7 +50,7 @@
     ]
   },
   "dependencies": {
-    "@canonical/jujulib": "8.0.1",
+    "@canonical/jujulib": "8.1.0",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "3.8.0",
     "@canonical/rebac-admin": "0.0.1-alpha.12",

src/components/DestroyModelDialog/DestroyModelDialog.test.tsx

@@ -9,8 +9,8 @@ import {
   unitStatusFactory,
   machineStatusFactory,
   applicationOfferStatusFactory,
-} from "testing/factories/juju/ClientV7";
-import { modelInfoFactory } from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ClientV8";
+import { modelInfoFactory } from "testing/factories/juju/ModelManagerV10";
 import {
   jujuStateFactory,
   modelDataFactory,

src/components/DestroyModelDialog/DestroyModelDialog.tsx

@@ -1,4 +1,4 @@
-import type { RemoteEndpoint } from "@canonical/jujulib/dist/api/facades/application/ApplicationV19";
+import type { RemoteEndpoint } from "@canonical/jujulib/dist/api/facades/application/ApplicationV22";
 import {
   ConfirmationModal,
   Icon,

src/components/InfoPanel/InfoPanel.test.tsx

@@ -5,7 +5,7 @@ import { vi } from "vitest";
 
 import type { RootState } from "store/store";
 import { jujuStateFactory, rootStateFactory } from "testing/factories";
-import { applicationStatusFactory } from "testing/factories/juju/ClientV7";
+import { applicationStatusFactory } from "testing/factories/juju/ClientV8";
 import {
   modelDataFactory,
   modelListInfoFactory,

src/components/JujuCLI/JujuCLI.test.tsx

@@ -14,8 +14,8 @@ import {
   configFactory,
   authUserInfoFactory,
 } from "testing/factories/general";
-import { applicationStatusFactory } from "testing/factories/juju/ClientV7";
-import { modelInfoFactory } from "testing/factories/juju/ModelManagerV9";
+import { applicationStatusFactory } from "testing/factories/juju/ClientV8";
+import { modelInfoFactory } from "testing/factories/juju/ModelManagerV10";
 import {
   modelDataFactory,
   modelListInfoFactory,

src/components/ModelActions/ModelActions.test.tsx

@@ -10,7 +10,7 @@ import {
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import {
   jujuStateFactory,
   modelDataFactory,

src/components/ModelTableList/CloudCell/CloudCell.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { modelInfoFactory } from "testing/factories/juju/ModelManagerV9";
+import { modelInfoFactory } from "testing/factories/juju/ModelManagerV10";
 import { modelDataFactory } from "testing/factories/juju/juju";
 
 import CloudCell from "./CloudCell";

src/components/ModelTableList/CloudGroup/CloudGroup.test.tsx

@@ -7,11 +7,11 @@ import {
   generalStateFactory,
   authUserInfoFactory,
 } from "testing/factories/general";
-import { modelStatusInfoFactory } from "testing/factories/juju/ClientV7";
+import { modelStatusInfoFactory } from "testing/factories/juju/ClientV8";
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import {
   jujuStateFactory,
   modelDataFactory,

src/components/ModelTableList/ModelSummary/ModelSummary.test.tsx

@@ -4,7 +4,7 @@ import {
   applicationStatusFactory,
   unitStatusFactory,
   machineStatusFactory,
-} from "testing/factories/juju/ClientV7";
+} from "testing/factories/juju/ClientV8";
 import { modelDataFactory } from "testing/factories/juju/juju";
 import { renderComponent } from "testing/utils";
 

src/components/ModelTableList/ModelSummary/ModelSummary.tsx

@@ -9,7 +9,7 @@ import { Label } from "./types";
 
 type Props = {
   modelData: ModelData;
-  qualifier?: string;
+  qualifier?: null | string;
 };
 
 const ModelSummary: FC<Props> = ({ modelData, qualifier }: Props) => {

src/components/ModelTableList/ModelTable/ModelTable.tsx

@@ -15,6 +15,7 @@ import { getControllerData, getDestructionState } from "store/juju/selectors";
 import type { Controllers, DestroyState, ModelData } from "store/juju/types";
 import {
   extractOwnerName,
+  getModelQualifier,
   getModelStatusGroupData,
 } from "store/juju/utils/models";
 import { useAppSelector } from "store/store";
@@ -60,14 +61,14 @@ function generateModelTableList(
   const modelsList: MainTableRow[] = [];
   models.forEach((model) => {
     const { highestStatus } = getModelStatusGroupData(model);
-    const owner = model.info ? extractOwnerName(model.info["owner-tag"]) : null;
+    const qualifier = model.info ? getModelQualifier(model.info) : null;
+    const owner = qualifier ? extractOwnerName(qualifier) : null;
     const region = getRegion(model);
     const cloud = <CloudCell model={model} />;
     const credential = getCredential(model);
     const controller = getControllerName(model, controllers);
     const lastUpdated = getLastUpdated(model);
     const isDying = model.uuid in destructionState;
-
     const columns = [
       {
         ...testId(TestId.COLUMN_NAME),
@@ -84,7 +85,7 @@ function generateModelTableList(
                   <ModelDetailsLink
                     className={classNames({ "u-text--muted": isDying })}
                     modelName={model.model.name}
-                    qualifier={model.info?.["owner-tag"]}
+                    qualifier={qualifier}
                   >
                     {model.model.name}
                   </ModelDetailsLink>
@@ -99,12 +100,7 @@ function generateModelTableList(
       },
       {
         ...testId(TestId.COLUMN_SUMMARY),
-        content: (
-          <ModelSummary
-            modelData={model}
-            qualifier={model.info?.["owner-tag"]}
-          />
-        ),
+        content: <ModelSummary modelData={model} qualifier={qualifier} />,
         className: classNames("u-overflow--visible", {
           "dying-model": isDying,
         }),

src/components/ModelTableList/OwnerGroup/OwnerGroup.test.tsx

@@ -7,11 +7,11 @@ import {
   generalStateFactory,
   authUserInfoFactory,
 } from "testing/factories/general";
-import { modelStatusInfoFactory } from "testing/factories/juju/ClientV7";
+import { modelStatusInfoFactory } from "testing/factories/juju/ClientV8";
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import {
   jujuStateFactory,
   modelDataFactory,

src/components/ModelTableList/StatusGroup/StatusGroup.test.tsx

@@ -13,11 +13,11 @@ import {
   applicationStatusFactory,
   detailedStatusFactory,
   modelStatusInfoFactory,
-} from "testing/factories/juju/ClientV7";
+} from "testing/factories/juju/ClientV8";
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import {
   jujuStateFactory,
   modelDataFactory,

src/components/ModelTableList/StatusGroup/WarningMessage/WarningMessage.test.tsx

@@ -7,7 +7,9 @@ import {
   applicationStatusFactory,
   detailedStatusFactory,
   unitStatusFactory,
-} from "testing/factories/juju/ClientV7";
+} from "testing/factories/juju/ClientV8";
+import { modelInfoFactory as modelManagerV10ModelInfoFactory } from "testing/factories/juju/ModelManagerV10";
+import { modelInfoFactory as modelManagerV11ModelInfoFactory } from "testing/factories/juju/ModelManagerV11";
 import { modelDataFactory } from "testing/factories/juju/juju";
 import { renderComponent } from "testing/utils";
 
@@ -33,7 +35,7 @@ describe("WarningMessage", () => {
     expect(screen.queryByRole("link")).not.toBeInTheDocument();
   });
 
-  it("should display links to blocked apps and units", async () => {
+  it("should display links to blocked apps and units for Juju 3.6", async () => {
     const model = modelDataFactory.build({
       applications: {
         calico: applicationStatusFactory.build({
@@ -53,6 +55,54 @@ describe("WarningMessage", () => {
           },
         }),
       },
+      info: modelManagerV10ModelInfoFactory.build(),
+    });
+    renderComponent(<WarningMessage model={model} />);
+    const error = screen.getByRole("link", { name: "app blocked" });
+    expect(error).toHaveAttribute("href", "/models/eggman@external/sub-test");
+    await act(async () => {
+      await userEventWithTimers.hover(error);
+      vi.runAllTimers();
+    });
+    const [tooltip] = screen.getAllByRole("tooltip");
+    expect(error).toHaveAttribute("href", "/models/eggman@external/sub-test");
+    const appError = within(tooltip).getByRole("link", {
+      name: "app blocked",
+    });
+    expect(appError).toHaveAttribute(
+      "href",
+      "/models/eggman@external/sub-test/app/calico",
+    );
+    const unitError = within(tooltip).getByRole("link", {
+      name: "unit blocked",
+    });
+    expect(unitError).toHaveAttribute(
+      "href",
+      "/models/eggman@external/sub-test/app/etcd/unit/etcd-0",
+    );
+  });
+
+  it("should display links to blocked apps and units for Juju 4.0", async () => {
+    const model = modelDataFactory.build({
+      applications: {
+        calico: applicationStatusFactory.build({
+          status: detailedStatusFactory.build({
+            info: "app blocked",
+            status: "blocked",
+          }),
+        }),
+        etcd: applicationStatusFactory.build({
+          units: {
+            "etcd/0": unitStatusFactory.build({
+              "agent-status": detailedStatusFactory.build({
+                info: "unit blocked",
+                status: "lost",
+              }),
+            }),
+          },
+        }),
+      },
+      info: modelManagerV11ModelInfoFactory.build(),
     });
     renderComponent(<WarningMessage model={model} />);
     const error = screen.getByRole("link", { name: "app blocked" });

src/components/ModelTableList/StatusGroup/WarningMessage/WarningMessage.tsx

@@ -5,9 +5,11 @@ import { Link } from "react-router";
 
 import ModelDetailsLink from "components/ModelDetailsLink";
 import type { ModelData } from "store/juju/types";
-import { getModelStatusGroupData } from "store/juju/utils/models";
+import {
+  getModelQualifier,
+  getModelStatusGroupData,
+} from "store/juju/utils/models";
 import urls from "urls";
-import { getUserName } from "utils";
 
 type Props = {
   /**
@@ -25,8 +27,7 @@ const WarningMessage: FC<Props> = ({ model }: Props) => {
   if (!messages.length) {
     return null;
   }
-  const qualifier = model?.info?.["owner-tag"] ?? "";
-  const owner = getUserName(qualifier);
+  const qualifier = model.info ? getModelQualifier(model.info) : null;
   const modelName = model.model.name;
   const link = (
     <ModelDetailsLink modelName={modelName} qualifier={qualifier}>
@@ -38,25 +39,25 @@ const WarningMessage: FC<Props> = ({ model }: Props) => {
     const { appName } = message;
     return {
       className: "u-truncate",
-      content: (
+      content: qualifier ? (
         <>
           {unitId || appName}:{" "}
           <Link
             to={
               unitId
                 ? urls.model.unit({
-                    qualifier: owner,
+                    qualifier,
                     modelName,
                     appName,
                     unitId,
                   })
-                : urls.model.app.index({ qualifier: owner, modelName, appName })
+                : urls.model.app.index({ qualifier, modelName, appName })
             }
           >
             {message.message}
           </Link>
         </>
-      ),
+      ) : null,
     };
   });
   const remainder = messages.slice(5);

src/components/ModelTableList/shared.test.tsx

@@ -1,8 +1,8 @@
 import {
   detailedStatusFactory,
   modelStatusInfoFactory,
-} from "testing/factories/juju/ClientV7";
-import { modelInfoFactory } from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ClientV8";
+import { modelInfoFactory } from "testing/factories/juju/ModelManagerV10";
 import {
   controllerFactory,
   modelDataFactory,

src/components/PrimaryNav/PrimaryNav.test.tsx

@@ -15,7 +15,7 @@ import {
 import {
   applicationStatusFactory,
   detailedStatusFactory,
-} from "testing/factories/juju/ClientV7";
+} from "testing/factories/juju/ClientV8";
 import {
   rebacAllowedFactory,
   relationshipTupleFactory,

src/components/RelationIcon/RelationIcon.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 
-import { applicationStatusFactory } from "testing/factories/juju/ClientV7";
+import { applicationStatusFactory } from "testing/factories/juju/ClientV8";
 
 import RelationIcon from "./RelationIcon";
 

src/components/RelationIcon/RelationIcon.tsx

@@ -1,4 +1,4 @@
-import type { ApplicationStatus } from "@canonical/jujulib/dist/api/facades/client/ClientV6";
+import type { ApplicationStatus } from "@canonical/jujulib/dist/api/facades/client/ClientV8";
 import type { FC } from "react";
 
 import CharmIcon from "components/CharmIcon/CharmIcon";

src/components/ShareCard/ShareCard.tsx

@@ -1,4 +1,4 @@
-import type { ErrorResults } from "@canonical/jujulib/dist/api/facades/model-manager/ModelManagerV9";
+import type { ErrorResults } from "@canonical/jujulib/dist/api/facades/model-manager/ModelManagerV10";
 import { Button, Select } from "@canonical/react-components";
 import type { JSX } from "react";
 import { useEffect, useState } from "react";

src/components/Topology/Topology.test.tsx

@@ -4,7 +4,7 @@ import defaultCharmIcon from "static/images/icons/default-charm-icon.svg";
 import {
   applicationStatusFactory,
   relationStatusFactory,
-} from "testing/factories/juju/ClientV7";
+} from "testing/factories/juju/ClientV8";
 
 import Topology from "./Topology";
 

src/components/Topology/Topology.tsx

@@ -1,7 +1,7 @@
 import type {
   ApplicationStatus,
   RelationStatus,
-} from "@canonical/jujulib/dist/api/facades/client/ClientV7";
+} from "@canonical/jujulib/dist/api/facades/client/ClientV8";
 import cloneDeep from "clone-deep";
 import * as d3 from "d3";
 import { useRef, useEffect, memo } from "react";

src/hooks/useCanConfigureModel.test.tsx

@@ -18,7 +18,7 @@ import {
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import { rebacAllowedFactory } from "testing/factories/juju/jimm";
 import {
   jujuStateFactory,

src/hooks/useCanManageSecrets.test.tsx

@@ -13,7 +13,7 @@ import {
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import {
   jujuStateFactory,
   modelDataFactory,

src/hooks/useModelAccess.test.tsx

@@ -15,7 +15,7 @@ import {
 import {
   modelInfoFactory,
   modelUserInfoFactory,
-} from "testing/factories/juju/ModelManagerV9";
+} from "testing/factories/juju/ModelManagerV10";
 import {
   relationshipTupleFactory,
   rebacAllowedFactory,