show workflow execution with no runid (#846)

* match only complete execution objects

* lint

* render workflowId as link

* add more test cases

* rename component and support basic visibility

* Update src/views/shared/workflow-event-details-execution-link/workflow-event-details-execution-link.tsx

---------

Co-authored-by: Adhitya Mamallan <[email protected]>

Author: Assem-Uber

src/views/shared/workflow-event-details-execution-link/__tests__/workflow-event-details-execution-link.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+
+import { screen, render } from '@/test-utils/rtl';
+
+import WorkflowEventDetailsExecutionLink from '../workflow-event-details-execution-link';
+
+describe('WorkflowEventDetailsExecutionLink', () => {
+  const props = {
+    runId: 'testRunId',
+    workflowId: 'testWorkflowId',
+    cluster: 'testCluster',
+    domain: 'testDomain',
+  };
+
+  it('should render the link with correct workflow run link', () => {
+    render(<WorkflowEventDetailsExecutionLink {...props} />);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute(
+      'href',
+      `/domains/${props.domain}/${props.cluster}/workflows/${props.workflowId}/${props.runId}`
+    );
+  });
+
+  it('should render runId as a the link text for workflow run link', () => {
+    render(<WorkflowEventDetailsExecutionLink {...props} />);
+
+    const linkElement = screen.getByRole('link', { name: props.runId });
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  it('should render the link with correct workflow search link', () => {
+    render(
+      <WorkflowEventDetailsExecutionLink
+        domain={props.domain}
+        cluster={props.cluster}
+        workflowId={props.workflowId}
+        runId=""
+      />
+    );
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute(
+      'href',
+      `/domains/${props.domain}/${props.cluster}/workflows?search=${props.workflowId}&workflowId=${props.workflowId}`
+    );
+  });
+
+  it('should render workflowId as a the link text for workflow search link', () => {
+    render(
+      <WorkflowEventDetailsExecutionLink
+        domain={props.domain}
+        cluster={props.cluster}
+        workflowId={props.workflowId}
+        runId=""
+      />
+    );
+
+    const linkElement = screen.getByRole('link', { name: props.workflowId });
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  it('should not render link if runId and workflowId is missing', () => {
+    render(
+      <WorkflowEventDetailsExecutionLink
+        domain={props.domain}
+        cluster={props.cluster}
+        workflowId=""
+        runId=""
+      />
+    );
+
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  it('should render disabled link with empty href if domain, cluster or workflowId is missing', () => {
+    const propKeys = Object.keys(
+      pick(props, ['domain', 'cluster', 'workflowId'])
+    );
+
+    propKeys.forEach((key) => {
+      const { container } = render(
+        // @ts-expect-error testing missing props
+        <WorkflowEventDetailsExecutionLink {...omit(props, key)} />
+      );
+      const linkElement = container.querySelector('a');
+      expect(linkElement).toHaveAttribute('href', '/');
+    });
+  });
+});

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

@@ -0,0 +1,33 @@
+'use client';
+import React from 'react';
+
+import queryString from 'query-string';
+
+import Link from '@/components/link/link';
+
+import { type Props } from './workflow-event-details-execution-link.types';
+
+export default function WorkflowEventDetailsExecutionLink({
+  runId,
+  workflowId,
+  cluster,
+  domain,
+}: Props) {
+  const linkText = runId || workflowId;
+  if (!linkText) return null;
+
+  let href = '';
+  if (domain && cluster && workflowId) {
+    href = runId
+      ? `/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}/workflows/${encodeURIComponent(workflowId)}/${encodeURIComponent(runId)}`
+      : // TODO: @assem.hafez make query params type safe
+        // NOTE: workflowId is passed to both search and workflowId to support basic/advanced/visibility
+        `/domains/${encodeURIComponent(domain)}/${encodeURIComponent(cluster)}/workflows?${queryString.stringify({ search: workflowId, workflowId })}`;
+  }
+
+  return (
+    <Link href={href} style={{ fontWeight: 'inherit' }}>
+      {linkText}
+    </Link>
+  );
+}

src/views/shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link.types.ts renamed to src/views/shared/workflow-event-details-execution-link/workflow-event-details-execution-link.types.ts

@@ -2,7 +2,7 @@ import { createElement } from 'react';
 
 import formatDate from '@/utils/data-formatters/format-date';
 import formatDuration from '@/utils/data-formatters/format-duration';
-import WorkflowHistoryEventDetailsExecutionLink from '@/views/shared/workflow-history-event-details-wf-execution-link/workflow-history-event-details-wf-execution-link';
+import WorkflowEventDetailsExecutionLink from '@/views/shared/workflow-event-details-execution-link/workflow-event-details-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';
@@ -62,7 +62,7 @@ const workflowHistoryEventDetailsConfig = [
     pathRegex:
       '(parentWorkflowExecution|externalWorkflowExecution|workflowExecution)$',
     valueComponent: ({ entryValue, domain, cluster }) => {
-      return createElement(WorkflowHistoryEventDetailsExecutionLink, {
+      return createElement(WorkflowEventDetailsExecutionLink, {
         domain,
         cluster,
         workflowId: entryValue?.workflowId,
@@ -75,7 +75,7 @@ const workflowHistoryEventDetailsConfig = [
     pathRegex:
       '(firstExecutionRunId|originalExecutionRunId|newExecutionRunId)$',
     valueComponent: ({ entryValue, domain, cluster, workflowId }) => {
-      return createElement(WorkflowHistoryEventDetailsExecutionLink, {
+      return createElement(WorkflowEventDetailsExecutionLink, {
         domain,
         cluster,
         workflowId,

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

@@ -5,7 +5,7 @@ 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 WorkflowEventDetailsExecutionLink from '../../shared/workflow-event-details-execution-link/workflow-event-details-execution-link';
 import { type WorkflowSummaryTabDetailsConfig } from '../workflow-summary-tab-details/workflow-summary-tab-details.types';
 
 const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
@@ -34,7 +34,7 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
         firstEvent?.workflowExecutionStartedEventAttributes
           ?.continuedExecutionRunId;
       if (runId) {
-        return createElement(WorkflowHistoryEventDetailsExecutionLink, {
+        return createElement(WorkflowEventDetailsExecutionLink, {
           ...decodedPageUrlParams,
           runId,
         });
@@ -129,7 +129,7 @@ const workflowSummaryTabDetailsConfig: WorkflowSummaryTabDetailsConfig[] = [
         formattedFirstEvent?.parentWorkflowExecution || {};
       const domain = formattedFirstEvent?.parentWorkflowDomain;
       if (runId && workflowId && domain && decodedPageUrlParams.cluster) {
-        return createElement(WorkflowHistoryEventDetailsExecutionLink, {
+        return createElement(WorkflowEventDetailsExecutionLink, {
           domain,
           cluster: decodedPageUrlParams.cluster,
           workflowId,