feat: Add modal to view full failover event (#1080)

* Add modal for viewing an individual failover event, which is shown when "See more" in the table is clicked

Signed-off-by: Adhitya Mamallan <[email protected]>

Author: adhityamamallan

src/views/domain-page/domain-page-failover-active-active/__tests__/domain-page-failover-active-active.test.tsx

@@ -22,6 +22,10 @@ jest.mock(
     ))
 );
 
+jest.mock('../../domain-page-failover-modal/domain-page-failover-modal', () =>
+  jest.fn(() => <div data-testid="mock-failover-modal">Modal</div>)
+);
+
 describe(DomainPageFailoverActiveActive.name, () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -61,6 +65,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
     ).toBeInTheDocument();
     expect(screen.getByText('cluster-1 -> cluster-2')).toBeInTheDocument();
     expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
   it('renders cluster failover when matching non-primary cluster failover is found', () => {
@@ -101,6 +106,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
     ).toBeInTheDocument();
     expect(screen.getByText('cluster-1 -> cluster-2')).toBeInTheDocument();
     expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
   it('does not render cluster failover section when clusterAttributeScope is set but clusterAttributeValue is undefined for non-primary scope', () => {
@@ -138,6 +144,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
       screen.queryByTestId('mock-single-cluster-failover')
     ).not.toBeInTheDocument();
     expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
   it('does not render cluster failover section when no matching cluster failover is found', () => {
@@ -177,6 +184,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
       screen.queryByTestId('mock-single-cluster-failover')
     ).not.toBeInTheDocument();
     expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
   it('does not render cluster failover section when clusterAttributeScope is undefined', () => {
@@ -211,6 +219,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
       screen.queryByTestId('mock-single-cluster-failover')
     ).not.toBeInTheDocument();
     expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
   it('renders "See more" button even when no matching cluster failover is found', () => {
@@ -233,6 +242,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
       screen.queryByTestId('mock-single-cluster-failover')
     ).not.toBeInTheDocument();
     expect(screen.getByText('See more')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 
   it('selects the correct cluster failover when multiple cluster failovers exist', () => {
@@ -286,6 +296,7 @@ describe(DomainPageFailoverActiveActive.name, () => {
       screen.getByTestId('mock-single-cluster-failover')
     ).toBeInTheDocument();
     expect(screen.getByText('cluster-3 -> cluster-4')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-failover-modal')).toBeInTheDocument();
   });
 });
 

src/views/domain-page/domain-page-failover-active-active/domain-page-failover-active-active.tsx

@@ -1,11 +1,12 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Button } from 'baseui/button';
 import { MdVisibility } from 'react-icons/md';
 
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 
 import domainPageQueryParamsConfig from '../config/domain-page-query-params.config';
+import DomainPageFailoverModal from '../domain-page-failover-modal/domain-page-failover-modal';
 import DomainPageFailoverSingleCluster from '../domain-page-failover-single-cluster/domain-page-failover-single-cluster';
 import { PRIMARY_CLUSTER_SCOPE } from '../domain-page-failovers/domain-page-failovers.constants';
 import clusterFailoverMatchesAttribute from '../helpers/cluster-failover-matches-attribute';
@@ -16,6 +17,7 @@ import { type Props } from './domain-page-failover-active-active.types';
 export default function DomainPageFailoverActiveActive({
   failoverEvent,
 }: Props) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [{ clusterAttributeScope, clusterAttributeValue }] = usePageQueryParams(
     domainPageQueryParamsConfig
   );
@@ -42,35 +44,42 @@ export default function DomainPageFailoverActiveActive({
   ]);
 
   return (
-    <styled.FailoverEventContainer>
-      {clusterFailoverForMaybeSelectedAttribute && (
-        <styled.ClusterFailoverContainer>
-          <styled.ClusterAttributeLabel>
-            {clusterAttributeScope === PRIMARY_CLUSTER_SCOPE
-              ? 'Primary:'
-              : `${clusterAttributeScope} (${clusterAttributeValue}):`}
-          </styled.ClusterAttributeLabel>
-          <DomainPageFailoverSingleCluster
-            fromCluster={
-              clusterFailoverForMaybeSelectedAttribute.fromCluster
-                ?.activeClusterName
-            }
-            toCluster={
-              clusterFailoverForMaybeSelectedAttribute.toCluster
-                ?.activeClusterName
-            }
-          />
-        </styled.ClusterFailoverContainer>
-      )}
-      <Button
-        size="mini"
-        kind="secondary"
-        shape="pill"
-        endEnhancer={<MdVisibility />}
-        // TODO: open the failover modal here on click
-      >
-        See more
-      </Button>
-    </styled.FailoverEventContainer>
+    <>
+      <styled.FailoverEventContainer>
+        {clusterFailoverForMaybeSelectedAttribute && (
+          <styled.ClusterFailoverContainer>
+            <styled.ClusterAttributeLabel>
+              {clusterAttributeScope === PRIMARY_CLUSTER_SCOPE
+                ? 'Primary:'
+                : `${clusterAttributeScope} (${clusterAttributeValue}):`}
+            </styled.ClusterAttributeLabel>
+            <DomainPageFailoverSingleCluster
+              fromCluster={
+                clusterFailoverForMaybeSelectedAttribute.fromCluster
+                  ?.activeClusterName
+              }
+              toCluster={
+                clusterFailoverForMaybeSelectedAttribute.toCluster
+                  ?.activeClusterName
+              }
+            />
+          </styled.ClusterFailoverContainer>
+        )}
+        <Button
+          size="mini"
+          kind="secondary"
+          shape="pill"
+          endEnhancer={<MdVisibility />}
+          onClick={() => setIsModalOpen(true)}
+        >
+          See more
+        </Button>
+      </styled.FailoverEventContainer>
+      <DomainPageFailoverModal
+        failoverEvent={failoverEvent}
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
+    </>
   );
 }