Show partial domain fetch results + error banner for failed fetches (#692)

adhityamamallan · web-flow · commit 00fdd4eed0ad · 2024-10-15T13:12:14.000+02:00
* Add error banner for domains page

* Rename domain test to domains test

* Fix tests to improve coverage

* Fix snapshots

* Remove snapshot tests

* Add config for error banner text

* Mock out error banner config
diff --git a/src/config/theme/theme-light.config.ts b/src/config/theme/theme-light.config.ts
@@ -12,6 +12,7 @@ const themeLight = {
   colors: {
     borderOpaque: '#F3F3F3',
     backgroundSecondary: '#F3F3F3',
+    backgroundWarningLight: '#FDF2DC',
   },
 } satisfies DeepPartial<MakeExtendable<Theme>>;
 
diff --git a/src/views/domains-page/config/domains-page-error-banner.config.ts b/src/views/domains-page/config/domains-page-error-banner.config.ts
@@ -0,0 +1,11 @@
+import { MdWarning } from 'react-icons/md';
+
+import { type Props } from '../domains-page-error-banner/domains-page-error-banner.types';
+
+const domainsPageErrorBannerConfig = {
+  icon: MdWarning,
+  getErrorMessage: ({ failedClusters }: Props) =>
+    `Failed to fetch domains for following clusters: ${failedClusters.join(', ')}`,
+};
+
+export default domainsPageErrorBannerConfig;
diff --git a/src/views/domains-page/domains-page-error-banner/__tests__/domains-page-error-banner.test.tsx b/src/views/domains-page/domains-page-error-banner/__tests__/domains-page-error-banner.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import DomainsPageErrorBanner from '../domains-page-error-banner';
+import { type Props } from '../domains-page-error-banner.types';
+
+jest.mock('../../config/domains-page-error-banner.config', () => ({
+  icon: () => <div data-testid="mock-error-icon" />,
+  getErrorMessage: ({ failedClusters }: Props) =>
+    `Mock message for clusters failure: ${failedClusters.join(', ')}`,
+}));
+
+describe(DomainsPageErrorBanner.name, () => {
+  it('should render if there are failed clusters', async () => {
+    render(
+      <DomainsPageErrorBanner failedClusters={['cluster_1', 'cluster_2']} />
+    );
+
+    expect(await screen.findByTestId('mock-error-icon')).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        'Mock message for clusters failure: cluster_1, cluster_2'
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('should not render anything if no clusters failed', async () => {
+    render(<DomainsPageErrorBanner failedClusters={[]} />);
+
+    expect(screen.queryByTestId('mock-error-icon')).toBeNull();
+    expect(screen.queryByText(/Mock message for clusters failure/)).toBeNull();
+  });
+});
diff --git a/src/views/domains-page/domains-page-error-banner/domains-page-error-banner.styles.ts b/src/views/domains-page/domains-page-error-banner/domains-page-error-banner.styles.ts
@@ -0,0 +1,20 @@
+import { type Theme } from 'baseui';
+import type { BannerOverrides } from 'baseui/banner';
+import { type StyleObject } from 'styletron-react';
+
+export const overrides = {
+  banner: {
+    Root: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        backgroundColor: $theme.colors.backgroundWarningLight,
+        marginLeft: 0,
+        marginRight: 0,
+      }),
+    },
+    Message: {
+      style: ({ $theme }: { $theme: Theme }): StyleObject => ({
+        ...$theme.typography.LabelSmall,
+      }),
+    },
+  } satisfies BannerOverrides,
+};
diff --git a/src/views/domains-page/domains-page-error-banner/domains-page-error-banner.tsx b/src/views/domains-page/domains-page-error-banner/domains-page-error-banner.tsx
@@ -0,0 +1,28 @@
+'use client';
+import React from 'react';
+
+import { Banner, KIND, HIERARCHY } from 'baseui/banner';
+
+import PageSection from '@/components/page-section/page-section';
+
+import domainsPageErrorBannerConfig from '../config/domains-page-error-banner.config';
+
+import { overrides } from './domains-page-error-banner.styles';
+import { type Props } from './domains-page-error-banner.types';
+
+export default function DomainsPageErrorBanner({ failedClusters }: Props) {
+  if (failedClusters.length === 0) return null;
+
+  return (
+    <PageSection>
+      <Banner
+        hierarchy={HIERARCHY.low}
+        kind={KIND.negative}
+        artwork={{ icon: domainsPageErrorBannerConfig.icon }}
+        overrides={overrides.banner}
+      >
+        {domainsPageErrorBannerConfig.getErrorMessage({ failedClusters })}
+      </Banner>
+    </PageSection>
+  );
+}
diff --git a/src/views/domains-page/domains-page-error-banner/domains-page-error-banner.types.ts b/src/views/domains-page/domains-page-error-banner/domains-page-error-banner.types.ts
@@ -0,0 +1,3 @@
+export type Props = {
+  failedClusters: Array<string>;
+};
diff --git a/src/views/domains-page/domains-page-title/__tests__/domains-page-title.test.tsx b/src/views/domains-page/domains-page-title/__tests__/domains-page-title.test.tsx
diff --git a/src/views/domains-page/domains-page-title/domains-page-title.tsx b/src/views/domains-page/domains-page-title/domains-page-title.tsx
@@ -1,7 +1,7 @@
 'use client';
-import { Cell, Grid } from 'baseui/layout-grid';
 import { LabelLarge } from 'baseui/typography';
 
+import PageSection from '@/components/page-section/page-section';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 
 import { cssStyles } from './domains-page-title.styles';
@@ -11,15 +11,11 @@ export default function DomainsPageTitle({ countBadge }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
 
   return (
-    <section>
-      <Grid>
-        <Cell span={12}>
-          <div className={cls.titleContainer}>
-            <LabelLarge>All domains</LabelLarge>
-            {countBadge}
-          </div>
-        </Cell>
-      </Grid>
-    </section>
+    <PageSection>
+      <div className={cls.titleContainer}>
+        <LabelLarge>All domains</LabelLarge>
+        {countBadge}
+      </div>
+    </PageSection>
   );
 }
diff --git a/src/views/domains-page/domains-page.tsx b/src/views/domains-page/domains-page.tsx
@@ -2,11 +2,13 @@ import React, { Suspense } from 'react';
 
 import AsyncPropsLoader from '@/components/async-props-loader/async-props-loader';
 import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
-import DomainsPageFilters from '@/views/domains-page/domains-page-filters/domains-page-filters';
-import DomainsPageTitle from '@/views/domains-page/domains-page-title/domains-page-title';
-import DomainsPageTitleBadge from '@/views/domains-page/domains-page-title-badge/domains-page-title-badge';
-import DomainsTable from '@/views/domains-page/domains-table/domains-table';
-import { getCachedAllDomains } from '@/views/domains-page/helpers/get-all-domains';
+
+import DomainsPageErrorBanner from './domains-page-error-banner/domains-page-error-banner';
+import DomainsPageFilters from './domains-page-filters/domains-page-filters';
+import DomainsPageTitle from './domains-page-title/domains-page-title';
+import DomainsPageTitleBadge from './domains-page-title-badge/domains-page-title-badge';
+import DomainsTable from './domains-table/domains-table';
+import { getCachedAllDomains } from './helpers/get-all-domains';
 
 export default async function DomainsPage() {
   return (
@@ -25,6 +27,15 @@ export default async function DomainsPage() {
         }
       />
       <DomainsPageFilters />
+      <Suspense>
+        <AsyncPropsLoader
+          component={DomainsPageErrorBanner}
+          getAsyncProps={async () => {
+            const res = await getCachedAllDomains();
+            return { failedClusters: res.failedClusters };
+          }}
+        />
+      </Suspense>
       <Suspense fallback={<SectionLoadingIndicator />}>
         <AsyncPropsLoader
           component={DomainsTable}
diff --git a/src/views/domains-page/domains-table/domains-table.tsx b/src/views/domains-page/domains-table/domains-table.tsx
@@ -1,9 +1,9 @@
 'use client';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { Cell, Grid } from 'baseui/layout-grid';
 import { useInView } from 'react-intersection-observer';
 
+import PageSection from '@/components/page-section/page-section';
 import Table from '@/components/table/table';
 import usePageQueryParams from '@/hooks/use-page-query-params/use-page-query-params';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
@@ -77,39 +77,37 @@ function DomainsTable({
   });
 
   return (
-    <section className={cls.tableContainer}>
-      <Grid>
-        <Cell span={12}>
-          <Table
-            data={paginatedDomains}
-            columns={tableColumns}
-            shouldShowResults={true}
-            onSort={(columnID) =>
-              setQueryParams({
-                sortColumn: columnID,
-                sortOrder: toggleSortOrder({
-                  currentSortColumn: queryParams.sortColumn,
-                  currentSortOrder: queryParams.sortOrder,
-                  newSortColumn: columnID,
-                }),
-              })
-            }
-            sortColumn={queryParams.sortColumn}
-            sortOrder={queryParams.sortOrder as SortOrder}
-            endMessage={
-              <DomainsTableEndMessage
-                key={visibleListItems}
-                canLoadMoreResults={
-                  paginatedDomains.length < sortedDomains.length
-                }
-                hasSearchResults={sortedDomains.length > 0}
-                infiniteScrollTargetRef={loadMoreRef}
-              />
-            }
-          />
-        </Cell>
-      </Grid>
-    </section>
+    <PageSection>
+      <section className={cls.tableContainer}>
+        <Table
+          data={paginatedDomains}
+          columns={tableColumns}
+          shouldShowResults={true}
+          onSort={(columnID) =>
+            setQueryParams({
+              sortColumn: columnID,
+              sortOrder: toggleSortOrder({
+                currentSortColumn: queryParams.sortColumn,
+                currentSortOrder: queryParams.sortOrder,
+                newSortColumn: columnID,
+              }),
+            })
+          }
+          sortColumn={queryParams.sortColumn}
+          sortOrder={queryParams.sortOrder as SortOrder}
+          endMessage={
+            <DomainsTableEndMessage
+              key={visibleListItems}
+              canLoadMoreResults={
+                paginatedDomains.length < sortedDomains.length
+              }
+              hasSearchResults={sortedDomains.length > 0}
+              infiniteScrollTargetRef={loadMoreRef}
+            />
+          }
+        />
+      </section>
+    </PageSection>
   );
 }
 
diff --git a/src/views/domains-page/helpers/get-all-domains.ts b/src/views/domains-page/helpers/get-all-domains.ts
@@ -12,7 +12,7 @@ import getUniqueDomains from './get-unique-domains';
 const MAX_DOMAINS_TO_FETCH = 2000;
 
 export const getAllDomains = async () => {
-  const results = await Promise.all(
+  const results = await Promise.allSettled(
     CLUSTERS_CONFIGS.map(({ clusterName }) =>
       grpcClient
         .getClusterMethods(clusterName)
@@ -31,7 +31,15 @@ export const getAllDomains = async () => {
         })
     )
   );
-  return { domains: getUniqueDomains(results.flat(1)) };
+
+  return {
+    domains: getUniqueDomains(
+      results.flatMap((res) => (res.status === 'fulfilled' ? res.value : []))
+    ),
+    failedClusters: CLUSTERS_CONFIGS.map((config) => config.clusterName).filter(
+      (_, index) => results[index].status === 'rejected'
+    ),
+  };
 };
 
 export const getCachedAllDomains = cache(

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export type Props = {`
	`2`	`+ failedClusters: Array<string>;`
	`3`	`+};`