diff --git a/src/views/domain-page/domain-page-cluster-selector/__tests__/domain-page-cluster-selector.test.tsx b/src/views/domain-page/domain-page-cluster-selector/__tests__/domain-page-cluster-selector.test.tsx index 5b83ad005..63761143a 100644 --- a/src/views/domain-page/domain-page-cluster-selector/__tests__/domain-page-cluster-selector.test.tsx +++ b/src/views/domain-page/domain-page-cluster-selector/__tests__/domain-page-cluster-selector.test.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { render, screen, fireEvent, act, within } from '@/test-utils/rtl'; +import { mockActiveActiveDomain } from '@/views/shared/active-active/__fixtures__/active-active-domain'; + import { mockDomainDescription, mockDomainDescriptionSingleCluster, @@ -27,6 +29,8 @@ jest.mock('next/navigation', () => ({ }), })); +jest.mock('../../helpers/get-cluster-replication-status-label'); + describe(DomainPageClusterSelector.name, () => { afterEach(() => { jest.clearAllMocks(); @@ -35,7 +39,7 @@ describe(DomainPageClusterSelector.name, () => { it('Should render current cluster correctly', () => { setup({ domainDescription: mockDomainDescription }); - expect(screen.getByText('cluster_1')).toBeInTheDocument(); + expect(screen.getByText('cluster_1 (active)')).toBeInTheDocument(); expect(screen.getByRole('combobox')).toBeInTheDocument(); }); @@ -49,7 +53,7 @@ describe(DomainPageClusterSelector.name, () => { it('Should show available clusters and redirect when one is selected', () => { setup({ domainDescription: mockDomainDescription }); - expect(screen.getByText('cluster_1')).toBeInTheDocument(); + expect(screen.getByText('cluster_1 (active)')).toBeInTheDocument(); const clusterSelect = screen.getByRole('combobox'); act(() => { @@ -57,7 +61,9 @@ describe(DomainPageClusterSelector.name, () => { }); const clustersMenu = screen.getByRole('listbox'); - const cluster2option = within(clustersMenu).getByText('cluster_2'); + const cluster2option = within(clustersMenu).getByText( + 'cluster_2 (passive)' + ); act(() => { fireEvent.click(cluster2option); @@ -67,16 +73,54 @@ describe(DomainPageClusterSelector.name, () => { '/domains/mock-domain/cluster_2/workflows' ); }); + + it('Should show active/passive labels for active-passive domains', () => { + setup({ domainDescription: mockDomainDescription }); + + const clusterSelect = screen.getByRole('combobox'); + + act(() => { + fireEvent.click(clusterSelect); + }); + + const clustersMenu = screen.getByRole('listbox'); + + expect( + within(clustersMenu).getByText('cluster_1 (active)') + ).toBeInTheDocument(); + expect( + within(clustersMenu).getByText('cluster_2 (passive)') + ).toBeInTheDocument(); + }); + + it('Should show primary label only for active cluster in active-active domains', () => { + setup({ domainDescription: mockActiveActiveDomain, cluster: 'cluster0' }); + + const clusterSelect = screen.getByRole('combobox'); + + act(() => { + fireEvent.click(clusterSelect); + }); + + const clustersMenu = screen.getByRole('listbox'); + + expect( + within(clustersMenu).getByText('cluster0 (primary)') + ).toBeInTheDocument(); + expect(within(clustersMenu).getByText('cluster1')).toBeInTheDocument(); + }); }); function setup({ domainDescription, + cluster = 'cluster_1', }: { domainDescription: DomainDescription; + cluster?: string; }) { render( ); diff --git a/src/views/domain-page/domain-page-cluster-selector/domain-page-cluster-selector.tsx b/src/views/domain-page/domain-page-cluster-selector/domain-page-cluster-selector.tsx index 0238a2f57..b3d7125a6 100644 --- a/src/views/domain-page/domain-page-cluster-selector/domain-page-cluster-selector.tsx +++ b/src/views/domain-page/domain-page-cluster-selector/domain-page-cluster-selector.tsx @@ -6,6 +6,7 @@ import { type Route } from 'next'; import { useRouter, useParams } from 'next/navigation'; import { type DomainHeaderInfoItemContentProps } from '../domain-page-header-info/domain-page-header-info.types'; +import getClusterReplicationStatusLabel from '../helpers/get-cluster-replication-status-label'; import { overrides, styled } from './domain-page-cluster-selector.styles'; @@ -19,15 +20,28 @@ export default function DomainPageClusterSelector( return {props.cluster}; } + const clusterSelectorOptions = props.domainDescription.clusters.map( + (cluster) => { + const replicationStatusLabel = getClusterReplicationStatusLabel( + props.domainDescription, + cluster.clusterName + ); + + return { + id: cluster.clusterName, + label: replicationStatusLabel + ? `${cluster.clusterName} (${replicationStatusLabel})` + : cluster.clusterName, + }; + } + ); + return (