Turn workflow execution & runId in event details to links (#709)

* change runIds and wf executions into links

* fix lint

* remove log

Author: Assem-Hafez

src/components/link/link.tsx

@@ -12,7 +12,13 @@ export default function Link({
   ...restProps
 }: Props) {
   return (
-    <styled.LinkBase {...restProps} $as={NextLink} href={href} disabled={!href}>
+    <styled.LinkBase
+      {...restProps}
+      $as={NextLink}
+      href={href}
+      disabled={!href}
+      prefetch={prefetch}
+    >
       {children}
     </styled.LinkBase>
   );

src/views/shared/workflow-history-event-details-wf-execution-link/__tests__/workflow-summary-tab-details-wf-execution-link.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import omit from 'lodash/omit';
+
+import { render } from '@/test-utils/rtl';
+
+import WorkflowHistoryEventDetailsExecutionLink from '../workflow-history-event-details-wf-execution-link';
+
+describe('WorkflowHistoryEventDetailsExecutionLink', () => {
+  const props = {
+    runId: 'testRunId',
+    workflowId: 'testWorkflowId',
+    cluster: 'testCluster',
+    domain: 'testDomain',
+  };
+
+  it('should render the link with correct href', () => {
+    const { getByText } = render(
+      <WorkflowHistoryEventDetailsExecutionLink {...props} />
+    );
+
+    const linkElement = getByText(props.runId).closest('a');
+    expect(linkElement).toHaveAttribute(
+      'href',
+      `/domains/${props.domain}/${props.cluster}/workflows/${props.workflowId}/${props.runId}`
+    );
+  });
+
+  it('should render the runId as link text', () => {
+    const { getByText } = render(
+      <WorkflowHistoryEventDetailsExecutionLink {...props} />
+    );
+
+    expect(getByText(props.runId)).toBeInTheDocument();
+  });
+
+  it('should render disabled link with empty href if any prop is missing', () => {
+    const propKeys = Object.keys(props);
+
+    propKeys.forEach((key) => {
+      const { container } = render(
+        // @ts-expect-error testing missing props
+        <WorkflowHistoryEventDetailsExecutionLink {...omit(props, key)} />
+      );
+      const linkElement = container.querySelector('a');
+      expect(linkElement).toHaveAttribute('href', '/');
+    });
+  });
+});

src/views/shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link.tsx

@@ -0,0 +1,24 @@
+'use client';
+import React from 'react';
+
+import Link from '@/components/link/link';
+
+import { type Props } from './workflow-history-event-details-wf-execution-link.types';
+
+export default function WorkflowHistoryEventDetailsExecutionLink({
+  runId,
+  workflowId,
+  cluster,
+  domain,
+}: Props) {
+  const noMissingData = Boolean(domain && cluster && workflowId && runId);
+
+  const href = noMissingData
+    ? `/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}/workflows/${encodeURIComponent(workflowId)}/${encodeURIComponent(runId)}`
+    : '';
+  return (
+    <Link href={href} style={{ fontWeight: 'inherit' }}>
+      {runId}
+    </Link>
+  );
+}

…y-tab-details-wf-execution-link.types.ts …event-details-wf-execution-link.types.tssrc/views/workflow-summary-tab/workflow-summary-tab-details-wf-execution-link/workflow-summary-tab-details-wf-execution-link.types.ts renamed to src/views/shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link.types.ts src/views/workflow-summary-tab/workflow-summary-tab-details-wf-execution-link/workflow-summary-tab-details-wf-execution-link.types.ts renamed to src/views/shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link.types.ts

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 
 import formatDate from '@/utils/data-formatters/format-date';
+import WorkflowHistoryEventDetailsExecutionLink from '@/views/shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link';
 
 import WorkflowHistoryEventDetailsTaskListLink from '../../shared/workflow-history-event-details-task-list-link/workflow-history-event-details-task-list-link';
 import { type WorkflowHistoryEventDetailsConfig } from '../workflow-history-event-details/workflow-history-event-details.types';
@@ -30,15 +31,39 @@ const workflowHistoryEventDetailsConfig = [
   },
   {
     name: 'Json as PrettyJson',
-    pathRegex: '.*(input|result|details|Error)$',
+    pathRegex: '(input|result|details|Error)$',
     valueComponent: WorkflowHistoryEventDetailsJson,
     forceWrap: true,
   },
   {
     name: 'Duration timeout & backoff seconds',
-    pathRegex: '.+(TimeoutSeconds|BackoffSeconds)$',
+    pathRegex: '(TimeoutSeconds|BackoffSeconds)$',
     valueComponent: ({ entryValue }) => `${entryValue}s`, // TODO @assem.hafez: format the value as duration
   },
+  {
+    name: 'WorkflowExecution as link',
+    pathRegex: '(parentWorkflowExecution|externalWorkflowExecution)$',
+    valueComponent: ({ entryValue, domain, cluster }) => {
+      return createElement(WorkflowHistoryEventDetailsExecutionLink, {
+        domain,
+        cluster,
+        workflowId: entryValue?.workflowId,
+        runId: entryValue?.runId,
+      });
+    },
+  },
+  {
+    name: 'RunIds as link',
+    pathRegex: '(firstExecutionRunId|originalExecutionRunId)$',
+    valueComponent: ({ entryValue, domain, cluster, workflowId }) => {
+      return createElement(WorkflowHistoryEventDetailsExecutionLink, {
+        domain,
+        cluster,
+        workflowId,
+        runId: entryValue,
+      });
+    },
+  },
 ] as const satisfies WorkflowHistoryEventDetailsConfig[];
 
 export default workflowHistoryEventDetailsConfig;

src/views/workflow-history/config/workflow-history-event-details.config.ts

@@ -4,8 +4,8 @@ import WorkflowHistoryEventDetailsTaskListLink from '@/views/shared/workflow-his
 import WorkflowStatusTag from '@/views/shared/workflow-status-tag/workflow-status-tag';
 import getWorkflowStatusTagProps from '@/views/workflow-page/helpers/get-workflow-status-tag-props';
 
+import WorkflowHistoryEventDetailsExecutionLink from '../../shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link';
 import { type WorkflowSummaryTabDetailsConfig } from '../workflow-summary-tab-details/workflow-summary-tab-details.types';
-import WorkflowSummaryTabDetailsExecutionLink from '../workflow-summary-tab-details-wf-execution-link/workflow-summary-tab-details-wf-execution-link';
 
 const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
   {
@@ -29,7 +29,7 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
         firstEvent?.workflowExecutionStartedEventAttributes
           ?.continuedExecutionRunId;
       if (runId) {
-        return createElement(WorkflowSummaryTabDetailsExecutionLink, {
+        return createElement(WorkflowHistoryEventDetailsExecutionLink, {
           ...decodedPageUrlParams,
           runId,
         });
@@ -116,7 +116,7 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
         formattedFirstEvent?.parentWorkflowExecution || {};
       const domain = formattedFirstEvent?.parentWorkflowDomain;
       if (runId && workflowId && domain && decodedPageUrlParams.cluster) {
-        return createElement(WorkflowSummaryTabDetailsExecutionLink, {
+        return createElement(WorkflowHistoryEventDetailsExecutionLink, {
           domain,
           cluster: decodedPageUrlParams.cluster,
           workflowId,