Add special redirect route to load domains when the cluster is not known (#839)

* Add redirect logic

* Resolve comments

* Add not found page

* Fix tests

* Add comment and query params

---------

Co-authored-by: Assem Hafez <[email protected]>

Author: adhityamamallan

next.config.mjs

@@ -7,7 +7,10 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const BUILD_OUTPUT = process.env.NEXT_CONFIG_BUILD_OUTPUT === 'standalone' ? 'standalone' : undefined;
+const BUILD_OUTPUT =
+  process.env.NEXT_CONFIG_BUILD_OUTPUT === 'standalone'
+    ? 'standalone'
+    : undefined;
 
 const nextConfig = {
   webpack: (config) => {
@@ -20,6 +23,13 @@ const nextConfig = {
   redirects: async () => {
     // TODO - load tabs configs here to dynamically define redirects
     return [
+      {
+        // This regex matches paths that try to load a domain or workflow without specifying the active cluster
+        source:
+          '/domains/:path((?:[^/]+)(?:/(?:workflows|metadata|settings|archival|task-lists)(?:/.*)?)?)',
+        destination: '/redirects/domain/:path',
+        permanent: true,
+      },
       {
         source: '/domains/:domain/:cluster',
         destination: '/domains/:domain/:cluster/workflows',

src/app/(Home)/redirects/domain/[...domainParams]/error.tsx

@@ -0,0 +1,4 @@
+'use client';
+import RedirectDomainError from '@/views/redirect-domain/redirect-domain-error/redirect-domain-error';
+
+export default RedirectDomainError;

src/app/(Home)/redirects/domain/[...domainParams]/loading.tsx

@@ -0,0 +1,3 @@
+import SectionLoadingIndicator from '@/components/section-loading-indicator/section-loading-indicator';
+
+export default SectionLoadingIndicator;

src/app/(Home)/redirects/domain/[...domainParams]/not-found.tsx

@@ -0,0 +1,3 @@
+import RedirectDomainNotFound from '@/views/redirect-domain/redirect-domain-not-found/redirect-domain-not-found';
+
+export default RedirectDomainNotFound;

src/app/(Home)/redirects/domain/[...domainParams]/page.tsx

@@ -0,0 +1,3 @@
+import RedirectDomain from '@/views/redirect-domain/redirect-domain';
+
+export default RedirectDomain;

src/views/redirect-domain/__tests__/redirect-domain.node.ts

@@ -0,0 +1,141 @@
+import { getDomainObj } from '@/views/domains-page/__fixtures__/domains';
+import { type DomainData } from '@/views/domains-page/domains-page.types';
+
+import RedirectDomain from '../redirect-domain';
+
+const MOCK_ALL_DOMAINS: Array<DomainData> = [
+  getDomainObj({
+    name: 'mock-domain-unique',
+    id: 'mock-domain-id-unique',
+    activeClusterName: 'mock-cluster-1',
+    clusters: [
+      { clusterName: 'mock-cluster-1' },
+      { clusterName: 'mock-cluster-2' },
+    ],
+  }),
+  getDomainObj({
+    name: 'mock-domain-shared-name',
+    id: 'mock-domain-id-shared-name-1',
+    activeClusterName: 'mock-cluster-1',
+    clusters: [
+      { clusterName: 'mock-cluster-1' },
+      { clusterName: 'mock-cluster-2' },
+    ],
+  }),
+  getDomainObj({
+    name: 'mock-domain-shared-name',
+    id: 'mock-domain-id-shared-name-2',
+    activeClusterName: 'mock-cluster-3',
+    clusters: [
+      { clusterName: 'mock-cluster-3' },
+      { clusterName: 'mock-cluster-4' },
+    ],
+  }),
+];
+
+const mockRedirect = jest.fn();
+jest.mock('next/navigation', () => ({
+  redirect: (url: string) => {
+    mockRedirect(url);
+    // Server component stops rendering after a redirect is called
+    throw new Error('Redirected');
+  },
+  notFound: () => {
+    // Server component stops rendering after notFound is called
+    throw new Error('Not found');
+  },
+}));
+
+jest.mock(
+  '@/views/domains-page/helpers/get-all-domains',
+  jest.fn(() => ({
+    getCachedAllDomains: jest.fn(() => ({
+      domains: MOCK_ALL_DOMAINS,
+      failedClusters: [],
+    })),
+  }))
+);
+
+describe(RedirectDomain.name, () => {
+  const tests: Array<{
+    name: string;
+    urlParams: Array<string>;
+    queryParams?: { [key: string]: string | string[] | undefined };
+    assertOnError?: (e: Error) => void;
+    expectedRedirect?: string;
+  }> = [
+    {
+      name: 'should redirect to domain page of active cluster',
+      urlParams: ['mock-domain-unique'],
+      expectedRedirect: '/domains/mock-domain-unique/mock-cluster-1',
+    },
+    {
+      name: 'should redirect to workflow page of active cluster',
+      urlParams: ['mock-domain-unique', 'workflows', 'mock-wfid', 'mock-runid'],
+      expectedRedirect:
+        '/domains/mock-domain-unique/mock-cluster-1/workflows/mock-wfid/mock-runid',
+    },
+    {
+      name: 'should redirect with query params',
+      urlParams: [
+        'mock-domain-unique',
+        'workflows',
+        'mock-wfid',
+        'mock-runid',
+        'history',
+      ],
+      queryParams: {
+        ht: 'ACTIVITY',
+        hs: 'COMPLETED',
+      },
+      expectedRedirect:
+        '/domains/mock-domain-unique/mock-cluster-1/workflows/mock-wfid/mock-runid/history?ht=ACTIVITY&hs=COMPLETED',
+    },
+    {
+      name: 'should redirect to All Domains page with search param if multiple domains exist',
+      urlParams: ['mock-domain-shared-name'],
+      expectedRedirect: '/domains?s=mock-domain-shared-name',
+    },
+    {
+      name: 'should redirect to All Domains page with search param if multiple domains exist, for workflow link',
+      urlParams: [
+        'mock-domain-shared-name',
+        'workflows',
+        'mock-wfid',
+        'mock-runid',
+      ],
+      expectedRedirect: '/domains?s=mock-domain-shared-name',
+    },
+    {
+      name: 'should call notFound if no domain exists',
+      urlParams: ['mock-domain-nonexistent'],
+      assertOnError: (e) => {
+        expect(e.message).toEqual('Not found');
+      },
+    },
+    {
+      // This never happens in practice because the router simply would not route to this component
+      name: 'should throw if domain is invalid',
+      urlParams: [],
+      assertOnError: (e) =>
+        expect(e.message).toEqual('Invalid domain URL param'),
+    },
+  ];
+
+  tests.forEach((test) =>
+    it(test.name, async () => {
+      try {
+        await RedirectDomain({
+          params: { domainParams: test.urlParams },
+        });
+
+        expect(mockRedirect).toHaveBeenCalledWith(test.expectedRedirect);
+      } catch (e) {
+        if (e instanceof Error && e.message !== 'Redirected') {
+          expect(test.assertOnError).toBeDefined();
+          test.assertOnError?.(e);
+        }
+      }
+    })
+  );
+});

src/views/redirect-domain/redirect-domain-error/redirect-domain-error.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { useParams } from 'next/navigation';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+
+import { type RouteParams } from '../redirect-domain.types';
+
+import { type Props } from './redirect-domain-error.types';
+
+export default function RedirectDomainError({ error }: Props) {
+  const { domainParams } = useParams<RouteParams>();
+
+  const domain = decodeURIComponent(domainParams[0]);
+
+  return (
+    <ErrorPanel
+      error={error}
+      message={`Could not redirect to domain "${domain}"`}
+      actions={[
+        {
+          kind: 'link-internal',
+          label: 'Go to domain overview',
+          link: '/domains',
+        },
+      ]}
+      omitLogging={true}
+    />
+  );
+}

src/views/redirect-domain/redirect-domain-error/redirect-domain-error.types.ts

@@ -0,0 +1,3 @@
+export type Props = {
+  error: Error;
+};

src/views/redirect-domain/redirect-domain-not-found/redirect-domain-not-found.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { useParams } from 'next/navigation';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+
+import { type RouteParams } from '../redirect-domain.types';
+
+export default function RedirectDomainNotFound() {
+  const { domainParams } = useParams<RouteParams>();
+
+  const domain = decodeURIComponent(domainParams[0]);
+
+  return (
+    <ErrorPanel
+      message={`The domain "${domain}" was not found`}
+      actions={[
+        {
+          kind: 'link-internal',
+          label: 'Go to domain overview',
+          link: '/domains',
+        },
+      ]}
+      omitLogging={true}
+    />
+  );
+}

src/views/redirect-domain/redirect-domain.tsx

@@ -0,0 +1,44 @@
+import { notFound, redirect } from 'next/navigation';
+import queryString from 'query-string';
+
+import { getCachedAllDomains } from '../domains-page/helpers/get-all-domains';
+
+import { type Props } from './redirect-domain.types';
+
+export default async function RedirectDomain(props: Props) {
+  const [encodedDomain, ...restParams] = props.params.domainParams;
+  if (!encodedDomain) {
+    throw new Error('Invalid domain URL param');
+  }
+
+  const domain = decodeURIComponent(encodedDomain);
+
+  const { domains } = await getCachedAllDomains();
+
+  const [domainDetails, ...restDomains] = domains.filter(
+    (d) => d.name === domain
+  );
+
+  if (!domainDetails) {
+    notFound();
+  } else if (restDomains.length > 0) {
+    redirect(
+      queryString.stringifyUrl({
+        url: '/domains',
+        query: {
+          // TODO @assem.hafez: see if this type can be asserted
+          s: domain,
+        },
+      })
+    );
+  }
+
+  const baseUrl = `/domains/${encodeURIComponent(domain)}/${encodeURIComponent(domainDetails.activeClusterName)}`;
+
+  redirect(
+    queryString.stringifyUrl({
+      url: baseUrl + (restParams.length > 0 ? `/${restParams.join('/')}` : ''),
+      query: props.searchParams,
+    })
+  );
+}