Link to workflow search from Workflow ID breadcrumb (#706)

* Add workflow link in breadcrumb

* Add a type annotation

* Add another type annotation

Author: adhityamamallan

src/views/workflow-page/workflow-page-header/__tests__/workflow-page-header.test.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 
 import { render } from '@/test-utils/rtl';
 
-import WorkflowPageHeader from '../workflow-page-header'; // Import the component
+import WorkflowPageHeader from '../workflow-page-header';
 import type { Props } from '../workflow-page-header.types';
 
+jest.mock('query-string', () => ({
+  stringifyUrl: jest.fn(() => 'mock-stringified-api-url'),
+}));
+
 jest.mock(
   '../../workflow-page-status-tag/workflow-page-status-tag',
   () =>
@@ -29,14 +33,17 @@ describe('WorkflowPageHeader', () => {
     );
   });
 
-  it('renders breadcrumbs with correct workflowId content and link', () => {
+  it('renders breadcrumbs with correct workflowId content and query-string stringified link', () => {
     const workflowId = 'test-workflowId';
     const { getByText } = setup({ workflowId });
 
     // Verify workflowId breadcrumb
     const workflowIdBreadcrumb = getByText(workflowId);
     expect(workflowIdBreadcrumb).toBeInTheDocument();
-    expect(workflowIdBreadcrumb).toHaveAttribute('href', `/#`);
+    expect(workflowIdBreadcrumb).toHaveAttribute(
+      'href',
+      '/mock-stringified-api-url'
+    );
   });
 
   it('renders breadcrumbs with correct runId and status tag', () => {

src/views/workflow-page/workflow-page-header/workflow-page-header.tsx

@@ -5,11 +5,15 @@ import { Breadcrumbs } from 'baseui/breadcrumbs';
 import { StyledLink } from 'baseui/link';
 import Image from 'next/image';
 import Link from 'next/link';
+import queryString from 'query-string';
 
 import cadenceLogoBlack from '@/assets/cadence-logo-black.svg';
 import ErrorBoundary from '@/components/error-boundary/error-boundary';
 import PageSection from '@/components/page-section/page-section';
+import { type PageQueryParamSetterValues } from '@/hooks/use-page-query-params/use-page-query-params.types';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
+import type domainPageQueryParamsConfig from '@/views/domain-page/config/domain-page-query-params.config';
+import type domainPageTabsConfig from '@/views/domain-page/config/domain-page-tabs.config';
 
 import WorkflowPageStatusTag from '../workflow-page-status-tag/workflow-page-status-tag';
 
@@ -23,6 +27,7 @@ export default function WorkflowPageHeader({
   cluster,
 }: Props) {
   const { cls } = useStyletronClasses(cssStyles);
+  const domainLink = `/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}`;
   return (
     <PageSection>
       <Breadcrumbs
@@ -36,15 +41,26 @@ export default function WorkflowPageHeader({
             alt="Cadence Icon"
             src={cadenceLogoBlack}
           />
-          <StyledLink
-            $as={Link}
-            href={`/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}`}
-          >
+          <StyledLink $as={Link} href={domainLink}>
             {domain}
           </StyledLink>
         </div>
-        {/** TODO: @assem.hafez change those to actual links */}
-        <StyledLink $as={Link} href="#">
+        <StyledLink
+          $as={Link}
+          href={queryString.stringifyUrl({
+            url:
+              domainLink +
+              '/' +
+              // ensuring that this tab exists in config
+              ('workflows' satisfies (typeof domainPageTabsConfig)[number]['key']),
+            // ensuring that these query params exist in config
+            query: {
+              search: workflowId,
+            } satisfies Partial<
+              PageQueryParamSetterValues<typeof domainPageQueryParamsConfig>
+            >,
+          })}
+        >
           {workflowId}
         </StyledLink>
         <div className={cls.breadcrumbItemContainer}>