feat(GAT-3104): Show federation level error when present

Shows 'Disabled on error' to make it clear it has been disabled due to error + shows the error message

Author: equinoxmatt

mocks/data/integration/v1/integration.data.ts

@@ -32,6 +32,8 @@ const generateIntegrationV1 = (data = {}): Integration => {
         run_time_hour: faker.datatype.number(),
         enabled: faker.datatype.boolean(),
         tested: faker.datatype.boolean(),
+        error: false,
+        error_text: null,
         notifications: [],
         id: faker.datatype.number(),
         ...data,

src/app/[locale]/account/team/[teamId]/(withLeftNav)/integrations/integration/list/[intId]/components/EditIntegrationForm/EditIntegrationForm.test.tsx

@@ -37,6 +37,39 @@ describe("EditIntegrationForm", () => {
         expect(allSelects[0]).toHaveClass("Mui-disabled");
     });
 
+    it("should show an error alert with the failure reason when the integration has failed", async () => {
+        const mockIntegration = {
+            ...integrationV1,
+            id: 2,
+            error: true,
+            error_text: "Connection timed out",
+        };
+        server.use(getIntegrationV1({ data: mockIntegration }));
+
+        await act(() => render(<EditIntegrationForm />));
+
+        expect(
+            await screen.findByText("Connection timed out")
+        ).toBeInTheDocument();
+    });
+
+    it("should not show an error alert when the integration has not failed", async () => {
+        const mockIntegration = {
+            ...integrationV1,
+            id: 2,
+            error: false,
+            error_text: null,
+        };
+        server.use(getIntegrationV1({ data: mockIntegration }));
+
+        await act(() => render(<EditIntegrationForm />));
+
+        expect(
+            await screen.findByDisplayValue(mockIntegration.endpoint_baseurl)
+        ).toBeInTheDocument();
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    });
+
     it("should run the 'Run now' button through Run now -> Running -> Complete -> Run now", async () => {
         const mockIntegration = {
             ...integrationV1,

src/app/[locale]/account/team/[teamId]/(withLeftNav)/integrations/integration/list/[intId]/components/EditIntegrationForm/EditIntegrationForm.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Stack, Typography } from "@mui/material";
+import { Alert, Stack, Typography } from "@mui/material";
 import { pick } from "lodash";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter } from "next/navigation";
@@ -277,6 +277,9 @@ const EditIntegrationForm = () => {
                         display: "flex",
                         flexDirection: "column",
                     }}>
+                    {integration?.error && (
+                        <Alert severity="error">{integration.error_text}</Alert>
+                    )}
                     <Paper sx={{ p: 1 }}>
                         <Box sx={{ display: "flex", justifyContent: "center" }}>
                             <Stack

src/app/[locale]/account/team/[teamId]/(withLeftNav)/integrations/integration/list/components/IntegrationListItem/IntegrationListItem.test.tsx

@@ -64,6 +64,35 @@ describe("IntegrationListItem", () => {
         expect(screen.getByText("Disabled")).toBeInTheDocument();
     });
 
+    it("should show a 'Disabled on error' status and the failure reason when the integration has failed", async () => {
+        render(
+            <IntegrationListItem
+                index={1}
+                integration={{
+                    ...integration,
+                    enabled: false,
+                    error: true,
+                    error_text: "Connection timed out",
+                }}
+            />
+        );
+
+        expect(screen.getByText("Disabled on error")).toBeInTheDocument();
+        expect(screen.getByText("Error:")).toBeInTheDocument();
+        expect(screen.getByText("Connection timed out")).toBeInTheDocument();
+    });
+
+    it("should not show an Error row when the integration has not failed", async () => {
+        render(
+            <IntegrationListItem
+                index={1}
+                integration={{ ...integration, error: false, error_text: null }}
+            />
+        );
+
+        expect(screen.queryByText("Error:")).not.toBeInTheDocument();
+    });
+
     it("should link the Edit action to the integration's detail page", async () => {
         render(<IntegrationListItem index={1} integration={integration} />);
 

src/app/[locale]/account/team/[teamId]/(withLeftNav)/integrations/integration/list/components/IntegrationListItem/IntegrationListItem.tsx

@@ -122,7 +122,9 @@ const IntegrationListItem = ({
                         <Typography sx={{ fontWeight: "bold", fontSize: 14 }}>
                             Integration {index}
                         </Typography>
-                        {integration.enabled ? (
+                        {integration.error ? (
+                            <Chip label="Disabled on error" color="error" />
+                        ) : integration.enabled ? (
                             <Chip label="Enabled" color="success" />
                         ) : (
                             <Chip label="Disabled" color="error" />
@@ -150,6 +152,15 @@ const IntegrationListItem = ({
                                       )
                                     : "Never",
                             },
+                            ...(integration.error
+                                ? [
+                                      {
+                                          key: "Error",
+                                          value: integration.error_text,
+                                          color: colors.red700,
+                                      },
+                                  ]
+                                : []),
                         ]}
                     />
                 </Box>

src/interfaces/Integration.ts

@@ -17,6 +17,8 @@ interface Integration {
     enabled: boolean;
     tested: boolean;
     last_run_at: string | null;
+    error: boolean;
+    error_text: string | null;
     notifications: Notification[] | undefined;
 }