Add failover version for active-active domains (#1003)

Add a component that shows the failover version(s) for an active-active domain

Author: adhityamamallan

src/views/domain-page/config/domain-page-metadata-extended-table.config.ts

@@ -2,6 +2,7 @@ import { createElement } from 'react';
 
 import DomainPageMetadataClusters from '../domain-page-metadata-clusters/domain-page-metadata-clusters';
 import DomainPageMetadataDescription from '../domain-page-metadata-description/domain-page-metadata-description';
+import DomainPageMetadataFailoverVersion from '../domain-page-metadata-failover-version/domain-page-metadata-failover-version';
 import DomainPageMetadataMode from '../domain-page-metadata-mode/domain-page-metadata-mode';
 import { type MetadataItem } from '../domain-page-metadata-table/domain-page-metadata-table.types';
 import DomainPageMetadataViewJson from '../domain-page-metadata-view-json/domain-page-metadata-view-json';
@@ -53,7 +54,8 @@ const domainPageMetadataExtendedTableConfig = [
     label: 'Failover version',
     description: 'The failover version of the domain',
     kind: 'simple',
-    getValue: ({ domainDescription }) => domainDescription.failoverVersion,
+    getValue: ({ domainDescription }) =>
+      createElement(DomainPageMetadataFailoverVersion, domainDescription),
   },
   {
     key: 'describeDomainJson',

src/views/domain-page/config/domain-page-metadata-table.config.ts

@@ -1,6 +1,7 @@
 import type { ListTableItem } from '@/components/list-table/list-table.types';
 
 import DomainPageMetadataClusters from '../domain-page-metadata-clusters/domain-page-metadata-clusters';
+import DomainPageMetadataFailoverVersion from '../domain-page-metadata-failover-version/domain-page-metadata-failover-version';
 import DomainPageMetadataMode from '../domain-page-metadata-mode/domain-page-metadata-mode';
 import { type DomainDescription } from '../domain-page.types';
 
@@ -29,8 +30,7 @@ const domainPageMetadataTableConfig: Array<ListTableItem<DomainDescription>> = [
   {
     key: 'failoverVersion',
     label: 'Failover version',
-    renderValue: (domainDescription: DomainDescription) =>
-      domainDescription.failoverVersion,
+    renderValue: DomainPageMetadataFailoverVersion,
   },
 ];
 

src/views/domain-page/domain-page-metadata-failover-version/__tests__/domain-page-metadata-failover-version.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@/test-utils/rtl';
+
+import { type Props as SublistTableProps } from '@/components/list-table-nested/sublist-table/sublist-table.types';
+import { mockActiveActiveDomain } from '@/views/shared/active-active/__fixtures__/active-active-domain';
+
+import { mockDomainDescription } from '../../__fixtures__/domain-description';
+import DomainPageMetadataFailoverVersion from '../domain-page-metadata-failover-version';
+
+jest.mock('@/components/list-table-nested/sublist-table/sublist-table', () =>
+  jest.fn(({ items }: SublistTableProps) => (
+    <div data-testid="mock-sublist-table">{JSON.stringify(items)}</div>
+  ))
+);
+
+jest.mock('@/views/shared/active-active/helpers/is-active-active-domain');
+
+describe(DomainPageMetadataFailoverVersion.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders failover version as text for non-active-active domains', () => {
+    render(<DomainPageMetadataFailoverVersion {...mockDomainDescription} />);
+
+    expect(screen.getByText('123456')).toBeInTheDocument();
+    expect(screen.queryByTestId('mock-sublist-table')).not.toBeInTheDocument();
+  });
+
+  it('renders SublistTable for active-active domains', () => {
+    render(<DomainPageMetadataFailoverVersion {...mockActiveActiveDomain} />);
+
+    const sublistTable = screen.getByTestId('mock-sublist-table');
+    expect(sublistTable).toBeInTheDocument();
+    expect(sublistTable).toHaveTextContent(
+      /{"key":"cluster0","label":"cluster0","value":"0"}/
+    );
+    expect(sublistTable).toHaveTextContent(
+      /{"key":"cluster1","label":"cluster1","value":"2"}/
+    );
+  });
+});

src/views/domain-page/domain-page-metadata-failover-version/domain-page-metadata-failover-version.tsx

@@ -0,0 +1,29 @@
+import SublistTable from '@/components/list-table-nested/sublist-table/sublist-table';
+import isActiveActiveDomain from '@/views/shared/active-active/helpers/is-active-active-domain';
+
+import { type DomainDescription } from '../domain-page.types';
+
+export default function DomainPageMetadataFailoverVersion(
+  domainDescription: DomainDescription
+) {
+  if (isActiveActiveDomain(domainDescription)) {
+    return (
+      <SublistTable
+        items={Object.values(domainDescription.activeClusters.regionToCluster)
+          .sort(
+            (
+              { activeClusterName: clusterA },
+              { activeClusterName: clusterB }
+            ) => (clusterA > clusterB ? 1 : -1)
+          )
+          .map(({ activeClusterName, failoverVersion }) => ({
+            key: activeClusterName,
+            label: activeClusterName,
+            value: failoverVersion,
+          }))}
+      />
+    );
+  }
+
+  return domainDescription.failoverVersion;
+}