Misc Domain Page refactoring (#867)

- Rename DomainInfo to DomainDescription
- Add common hook useSuspenseDomainDescription to load domain description
- Move generated Domain type to route handlers
- Fix lint warnings in archival header
- Add hook for DomainPageMetadata, which can be overridden with additional domain metadata

Author: adhityamamallan

src/route-handlers/describe-domain/describe-domain.types.ts

@@ -1,5 +1,5 @@
+import { type Domain } from '@/__generated__/proto-ts/uber/cadence/api/v1/Domain';
 import { type DefaultMiddlewaresContext } from '@/utils/route-handlers-middleware';
-import { type DomainInfo } from '@/views/domain-page/domain-page.types';
 
 export type RouteParams = {
   domain: string;
@@ -11,4 +11,4 @@ export type RequestParams = {
 };
 
 export type Context = DefaultMiddlewaresContext;
-export type DescribeDomainResponse = DomainInfo;
+export type DescribeDomainResponse = Domain;

src/route-handlers/update-domain/update-domain.types.ts

@@ -1,6 +1,6 @@
+import { type Domain } from '@/__generated__/proto-ts/uber/cadence/api/v1/Domain';
 import { type UpdateDomainRequest__Input } from '@/__generated__/proto-ts/uber/cadence/api/v1/UpdateDomainRequest';
 import { type DefaultMiddlewaresContext } from '@/utils/route-handlers-middleware';
-import { type DomainInfo } from '@/views/domain-page/domain-page.types';
 
 export type RouteParams = {
   domain: string;
@@ -16,6 +16,6 @@ export type UpdateDomainFields = Omit<
   'securityToken' | 'name' | 'updateMask'
 >;
 
-export type UpdateDomainResponse = DomainInfo;
+export type UpdateDomainResponse = Domain;
 
 export type Context = DefaultMiddlewaresContext;

src/views/domain-page/__fixtures__/domain-info.ts renamed to src/views/domain-page/__fixtures__/domain-description.ts

@@ -1,6 +1,6 @@
-import { type DomainInfo } from '../domain-page.types';
+import { type DomainDescription } from '../domain-page.types';
 
-export const mockDomainInfo: DomainInfo = {
+export const mockDomainDescription: DomainDescription = {
   activeClusterName: 'cluster_1',
   clusters: [{ clusterName: 'cluster_1' }, { clusterName: 'cluster_2' }],
   data: { Tier: '5', IsManagedByCadence: 'true' },
@@ -25,7 +25,7 @@ export const mockDomainInfo: DomainInfo = {
   failoverVersion: '123456',
 };
 
-export const mockDomainInfoSingleCluster: DomainInfo = {
+export const mockDomainDescriptionSingleCluster: DomainDescription = {
   activeClusterName: 'cluster_1',
   clusters: [{ clusterName: 'cluster_1' }],
   data: { Tier: '5', IsManagedByCadence: 'true' },

src/views/domain-page/config/domain-page-header-info-items.config.ts

@@ -13,12 +13,13 @@ const domainPageHeaderInfoItemsConfig = [
   {
     title: 'Global/Local',
     getLabel: (props: DomainHeaderInfoItemContentProps) =>
-      props.domainInfo.isGlobalDomain ? 'Global' : 'Local',
+      props.domainDescription.isGlobalDomain ? 'Global' : 'Local',
     placeholderSize: '64px',
   },
   {
     title: 'Domain ID',
-    getLabel: (props: DomainHeaderInfoItemContentProps) => props.domainInfo.id,
+    getLabel: (props: DomainHeaderInfoItemContentProps) =>
+      props.domainDescription.id,
     placeholderSize: '256px',
   },
 ] as const satisfies DomainPageHeaderInfoItemsConfig;

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

@@ -1,37 +1,36 @@
-import { createElement } from 'react';
-
 import type { ListTableItem } from '@/components/list-table/list-table.types';
 
 import DomainPageMetadataClusters from '../domain-page-metadata-clusters/domain-page-metadata-clusters';
-import { type DomainInfo } from '../domain-page.types';
+import { type DomainDescription } from '../domain-page.types';
 
-const domainPageMetadataTableConfig: Array<ListTableItem<DomainInfo>> = [
+const domainPageMetadataTableConfig: Array<ListTableItem<DomainDescription>> = [
   {
     key: 'domainId',
     label: 'Domain ID',
-    renderValue: (domainInfo: DomainInfo) => domainInfo.id,
+    renderValue: (domainDescription: DomainDescription) => domainDescription.id,
   },
   {
     key: 'owner',
     label: 'Owner',
-    renderValue: (domainInfo: DomainInfo) => domainInfo.ownerEmail,
+    renderValue: (domainDescription: DomainDescription) =>
+      domainDescription.ownerEmail,
   },
   {
     key: 'clusters',
     label: 'Clusters',
-    renderValue: (domainInfo: DomainInfo) =>
-      createElement(DomainPageMetadataClusters, domainInfo),
+    renderValue: DomainPageMetadataClusters,
   },
   {
     key: 'globalOrLocal',
     label: 'Global/Local',
-    renderValue: (domainInfo: DomainInfo) =>
-      domainInfo.isGlobalDomain ? 'Global' : 'Local',
+    renderValue: (domainDescription: DomainDescription) =>
+      domainDescription.isGlobalDomain ? 'Global' : 'Local',
   },
   {
     key: 'failoverVersion',
     label: 'Failover version',
-    renderValue: (domainInfo: DomainInfo) => domainInfo.failoverVersion,
+    renderValue: (domainDescription: DomainDescription) =>
+      domainDescription.failoverVersion,
   },
 ];
 

src/views/domain-page/config/domain-page-settings-form.config.ts

@@ -8,7 +8,7 @@ import formatDurationToSeconds from '@/utils/data-formatters/format-duration-to-
 import { type SettingsFormField } from '@/views/shared/settings-form/settings-form.types';
 
 import DomainPageSettingsRetentionPeriod from '../domain-page-settings-retention-period/domain-page-settings-retention-period';
-import { type DomainInfo } from '../domain-page.types';
+import { type DomainDescription } from '../domain-page.types';
 
 export const domainPageSettingsFormSchema = z.object({
   description: z.string(),
@@ -21,22 +21,22 @@ export const domainPageSettingsFormSchema = z.object({
 
 export const domainPageSettingsFormConfig: [
   SettingsFormField<
-    DomainInfo,
+    DomainDescription,
     typeof domainPageSettingsFormSchema,
     'description'
   >,
   SettingsFormField<
-    DomainInfo,
+    DomainDescription,
     typeof domainPageSettingsFormSchema,
     'retentionPeriodSeconds'
   >,
   SettingsFormField<
-    DomainInfo,
+    DomainDescription,
     typeof domainPageSettingsFormSchema,
     'visibilityArchival'
   >,
   SettingsFormField<
-    DomainInfo,
+    DomainDescription,
     typeof domainPageSettingsFormSchema,
     'historyArchival'
   >,

src/views/domain-page/domain-page-cluster-selector/__tests__/domain-page-cluster-selector.test.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import { render, screen, fireEvent, act, within } from '@/test-utils/rtl';
 
 import {
-  mockDomainInfo,
-  mockDomainInfoSingleCluster,
-} from '../../__fixtures__/domain-info';
-import { type DomainInfo } from '../../domain-page.types';
+  mockDomainDescription,
+  mockDomainDescriptionSingleCluster,
+} from '../../__fixtures__/domain-description';
+import { type DomainDescription } from '../../domain-page.types';
 import DomainPageClusterSelector from '../domain-page-cluster-selector';
 
 const mockPushFn = jest.fn();
@@ -33,21 +33,21 @@ describe(DomainPageClusterSelector.name, () => {
   });
 
   it('Should render current cluster correctly', () => {
-    setup({ domainInfo: mockDomainInfo });
+    setup({ domainDescription: mockDomainDescription });
 
     expect(screen.getByText('cluster_1')).toBeInTheDocument();
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 
   it('Should render only a label for single cluster', () => {
-    setup({ domainInfo: mockDomainInfoSingleCluster });
+    setup({ domainDescription: mockDomainDescriptionSingleCluster });
 
     expect(screen.getByText('cluster_1')).toBeInTheDocument();
     expect(screen.queryByRole('combobox')).toBeNull();
   });
 
   it('Should show available clusters and redirect when one is selected', () => {
-    setup({ domainInfo: mockDomainInfo });
+    setup({ domainDescription: mockDomainDescription });
 
     expect(screen.getByText('cluster_1')).toBeInTheDocument();
     const clusterSelect = screen.getByRole('combobox');
@@ -69,8 +69,15 @@ describe(DomainPageClusterSelector.name, () => {
   });
 });
 
-function setup({ domainInfo }: { domainInfo: DomainInfo }) {
+function setup({
+  domainDescription,
+}: {
+  domainDescription: DomainDescription;
+}) {
   render(
-    <DomainPageClusterSelector cluster="cluster_1" domainInfo={domainInfo} />
+    <DomainPageClusterSelector
+      cluster="cluster_1"
+      domainDescription={domainDescription}
+    />
   );
 }

src/views/domain-page/domain-page-cluster-selector/domain-page-cluster-selector.tsx

@@ -15,14 +15,14 @@ export default function DomainPageClusterSelector(
   const router = useRouter();
   const { domain: encodedDomain, domainTab: encodedDomainTab } = useParams();
 
-  if (props.domainInfo.clusters?.length === 1) {
+  if (props.domainDescription.clusters?.length === 1) {
     return <styled.ItemLabel>{props.cluster}</styled.ItemLabel>;
   }
 
   return (
     <Select
       overrides={overrides.select}
-      options={props.domainInfo.clusters.map((cluster) => ({
+      options={props.domainDescription.clusters.map((cluster) => ({
         id: cluster.clusterName,
         label: cluster.clusterName,
       }))}

src/views/domain-page/domain-page-header-info-loader/__tests__/domain-page-header-info-loader.test.tsx

@@ -4,16 +4,22 @@ import { render, screen, act } from '@/test-utils/rtl';
 
 import * as requestModule from '@/utils/request';
 
-import { mockDomainInfo } from '../../__fixtures__/domain-info';
-import { type DomainInfo } from '../../domain-page.types';
+import { mockDomainDescription } from '../../__fixtures__/domain-description';
+import { type DomainDescription } from '../../domain-page.types';
 import DomainPageHeaderInfoLoader from '../domain-page-header-info-loader';
 
 jest.mock('../../domain-page-header-info/domain-page-header-info', () =>
   jest.fn(
-    ({ domainInfo, cluster }: { domainInfo: DomainInfo; cluster: string }) => (
+    ({
+      domainDescription,
+      cluster,
+    }: {
+      domainDescription: DomainDescription;
+      cluster: string;
+    }) => (
       <div>
-        Mock domain info for Domain {domainInfo.name} in {cluster}
-        <div>Domain ID: {domainInfo.id}</div>
+        Mock domain info for Domain {domainDescription.name} in {cluster}
+        <div>Domain ID: {domainDescription.id}</div>
       </div>
     )
   )
@@ -59,7 +65,7 @@ async function setup({ error }: { error?: boolean }) {
     requestMock.mockRejectedValue(new Error('Failed to fetch domain info'));
   } else {
     requestMock.mockResolvedValue({
-      json: () => Promise.resolve(mockDomainInfo),
+      json: () => Promise.resolve(mockDomainDescription),
     });
   }
 

src/views/domain-page/domain-page-header-info-loader/domain-page-header-info-loader.tsx

@@ -1,28 +1,19 @@
 'use client';
 import React from 'react';
 
-import { useSuspenseQuery } from '@tanstack/react-query';
-
-import request from '@/utils/request';
+import useSuspenseDomainDescription from '@/views/shared/hooks/use-suspense-domain-description';
 
 import DomainPageHeaderInfo from '../domain-page-header-info/domain-page-header-info';
-import { type DomainInfo } from '../domain-page.types';
 
 import { type Props } from './domain-page-header-info-loader.types';
 
 export default function DomainPageHeaderInfoLoader(props: Props) {
-  const { data: domainInfo } = useSuspenseQuery<DomainInfo>({
-    queryKey: ['describeDomain', props],
-    queryFn: () =>
-      request(`/api/domains/${props.domain}/${props.cluster}`).then((res) =>
-        res.json()
-      ),
-  });
+  const { data: domainDescription } = useSuspenseDomainDescription(props);
 
   return (
     <DomainPageHeaderInfo
       loading={false}
-      domainInfo={domainInfo}
+      domainDescription={domainDescription}
       cluster={props.cluster}
     />
   );