From 6e81ede3de5254b079bf08c3758c2187d6da24b1 Mon Sep 17 00:00:00 2001
From: anuj-kumary <anujf0510@gmail.com>
Date: Mon, 10 Aug 2026 11:58:25 +0530
Subject: [PATCH] fix(ui): apply the revamped workflow header only in AI mode

The revamped HeaderShell + HeaderBreadcrumb workflow-details header was
rendering in classic (non-AI) mode too. Gate it on isAiMode so classic mode
keeps the original TitleBreadcrumb + WorkflowHeader card, and only the AI
experience gets the new gradient header.

- WorkflowHeader: new isAiMode prop; renders HeaderShell when true, the
  original Card layout otherwise (shared edit-name modal + subcomponents)
- WorkflowBuilder: render TitleBreadcrumb in classic mode; pass isAiMode and
  the AI HeaderBreadcrumb only when in AI mode
- add an AI-mode render test alongside the existing classic-mode tests

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../WorkflowBuilder/WorkflowHeader.test.tsx   |  17 ++
 .../WorkflowBuilder/WorkflowHeader.tsx        | 220 +++++++++++-------
 .../workflow-builder-components.interface.ts  |   1 +
 .../WorkflowBuilder/WorkflowBuilder.tsx       |  22 +-
 4 files changed, 173 insertions(+), 87 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx
index 7064fe8a1272..0e39735d0fb6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx
@@ -275,4 +275,21 @@ describe('WorkflowHeader — System badge', () => {
       screen.queryByTestId('edit-workflow-title-button')
     ).not.toBeInTheDocument();
   });
+
+  it('renders the AI-mode header with the breadcrumb when isAiMode is true', () => {
+    mockUseWorkflowModeContext.mockReturnValue(buildContextMock());
+
+    render(
+      <WorkflowHeader
+        {...defaultProps}
+        isAiMode
+        breadcrumb={<div data-testid="ai-breadcrumb">crumb</div>}
+      />
+    );
+
+    expect(screen.getByTestId('ai-breadcrumb')).toBeInTheDocument();
+    expect(screen.getByTestId('workflow-title')).toHaveTextContent(
+      'Glossary Approval Workflow'
+    );
+  });
 });
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.tsx b/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.tsx
index 271990970d5e..e91544b5074a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.tsx
@@ -14,6 +14,7 @@
 import {
   Badge,
   Button,
+  Card,
   Dialog,
   Input,
   Modal,
@@ -35,6 +36,7 @@ import { WorkflowControls } from './WorkflowControls';
 
 export const WorkflowHeader: React.FC<WorkflowHeaderProps> = ({
   breadcrumb,
+  isAiMode = false,
   title,
   workflowName,
   handleTestWorkflow,
@@ -89,97 +91,143 @@ export const WorkflowHeader: React.FC<WorkflowHeaderProps> = ({
     setIsEditModalOpen(false);
   };
 
+  const workflowControls = (
+    <WorkflowControls
+      isRunLoading={isRunLoading}
+      onCancelWorkflow={showCancelButton ? enterViewMode : undefined}
+      onDeleteWorkflow={showDeleteButton ? handleDeleteWorkflow : undefined}
+      onRevertAndCancel={showCancelButton ? handleRevertAndCancel : undefined}
+      onRunWorkflow={handleRunWorkflow}
+      onSaveWorkflow={showSaveButton ? handleSaveAndEnterViewMode : undefined}
+      onTestWorkflow={showTestButton ? handleTestWorkflow : undefined}
+    />
+  );
+
+  const editWorkflowButton = showEditButton && (
+    <Button
+      color="primary"
+      data-testid="edit-workflow-button"
+      size="sm"
+      onPress={enterEditMode}>
+      {t('label.edit-workflow')}
+    </Button>
+  );
+
+  const systemBadge = isNoOp && (
+    <Tooltip
+      placement="top"
+      title={t('message.system-workflow-edit-restriction')}>
+      <TooltipTrigger>
+        <Badge
+          color="gray"
+          data-testid="system-workflow-badge"
+          size="sm"
+          type="color">
+          {t('label.system')}
+        </Badge>
+      </TooltipTrigger>
+    </Tooltip>
+  );
+
+  const editTitleButton = !isViewMode && !isNoOp && (
+    <Button
+      color="tertiary"
+      data-testid="edit-workflow-title-button"
+      iconLeading={EditIcon}
+      size="sm"
+      onPress={handleOpenEditModal}
+    />
+  );
+
+  const workflowIcon = (
+    <div className="tw:flex tw:items-center tw:justify-center tw:size-8 tw:rounded-md tw:bg-brand-solid">
+      <WorkflowIcon className="tw:size-4 tw:text-white" />
+    </div>
+  );
+
   return (
     <>
-      <HeaderShell
-        actions={
-          <>
-            <WorkflowControls
-              isRunLoading={isRunLoading}
-              onCancelWorkflow={showCancelButton ? enterViewMode : undefined}
-              onDeleteWorkflow={
-                showDeleteButton ? handleDeleteWorkflow : undefined
-              }
-              onRevertAndCancel={
-                showCancelButton ? handleRevertAndCancel : undefined
-              }
-              onRunWorkflow={handleRunWorkflow}
-              onSaveWorkflow={
-                showSaveButton ? handleSaveAndEnterViewMode : undefined
-              }
-              onTestWorkflow={showTestButton ? handleTestWorkflow : undefined}
-            />
-            {showEditButton && (
-              <Button
-                color="primary"
-                data-testid="edit-workflow-button"
-                size="sm"
-                onPress={enterEditMode}>
-                {t('label.edit-workflow')}
-              </Button>
-            )}
-          </>
-        }
-        badge={
-          <>
-            {isNoOp && (
-              <Tooltip
-                placement="top"
-                title={t('message.system-workflow-edit-restriction')}>
-                <TooltipTrigger>
-                  <Badge
-                    color="gray"
-                    data-testid="system-workflow-badge"
-                    size="sm"
-                    type="color">
-                    {t('label.system')}
-                  </Badge>
-                </TooltipTrigger>
-              </Tooltip>
-            )}
-            {!isViewMode && !isNoOp && (
-              <Button
-                color="tertiary"
-                data-testid="edit-workflow-title-button"
-                iconLeading={EditIcon}
-                size="sm"
-                onPress={handleOpenEditModal}
-              />
-            )}
-          </>
-        }
-        breadcrumb={breadcrumb}
-        data-testid="workflow-header"
-        leading={
-          <div className="tw:flex tw:items-center tw:justify-center tw:size-8 tw:rounded-md tw:bg-brand-solid">
-            <WorkflowIcon className="tw:size-4 tw:text-white" />
-          </div>
-        }
-        subtitle={
-          workflowName ? (
+      {isAiMode ? (
+        <HeaderShell
+          actions={
+            <>
+              {workflowControls}
+              {editWorkflowButton}
+            </>
+          }
+          badge={
+            <>
+              {systemBadge}
+              {editTitleButton}
+            </>
+          }
+          breadcrumb={breadcrumb}
+          data-testid="workflow-header"
+          leading={workflowIcon}
+          subtitle={
+            workflowName ? (
+              <Typography
+                ellipsis
+                as="p"
+                className="tw:m-0 tw:text-secondary tw:max-w-150"
+                data-testid="workflow-description"
+                size="text-sm">
+                {workflowName}
+              </Typography>
+            ) : undefined
+          }
+          title={
             <Typography
               ellipsis
-              as="p"
-              className="tw:m-0 tw:text-secondary tw:max-w-150"
-              data-testid="workflow-description"
-              size="text-sm">
-              {workflowName}
+              as="h3"
+              className="tw:m-0 tw:text-primary"
+              data-testid="workflow-title"
+              size="text-xl"
+              weight="semibold">
+              {title}
             </Typography>
-          ) : undefined
-        }
-        title={
-          <Typography
-            ellipsis
-            as="h3"
-            className="tw:m-0 tw:text-primary"
-            data-testid="workflow-title"
-            size="text-xl"
-            weight="semibold">
-            {title}
-          </Typography>
-        }
-        variant="gradient"
-      />
+          }
+          variant="gradient"
+        />
+      ) : (
+        <Card className="tw:px-6 tw:py-4" data-testid="workflow-header">
+          <div className="tw:flex tw:items-center tw:justify-between">
+            <div className="tw:flex tw:items-center tw:gap-3">
+              {workflowIcon}
+              <div data-testid="workflow-title-section">
+                <div className="tw:flex tw:items-center tw:gap-2">
+                  <Typography
+                    ellipsis
+                    as="p"
+                    className="tw:m-0 tw:mb-1 tw:text-primary"
+                    data-testid="workflow-title"
+                    size="text-md"
+                    weight="semibold">
+                    {title}
+                  </Typography>
+                  {systemBadge}
+                  {editTitleButton}
+                </div>
+                {workflowName && (
+                  <Typography
+                    ellipsis
+                    as="p"
+                    className="tw:m-0 tw:text-secondary tw:max-w-150"
+                    data-testid="workflow-description"
+                    size="text-sm">
+                    {workflowName}
+                  </Typography>
+                )}
+              </div>
+            </div>
+
+            <div className="tw:flex tw:gap-3 tw:items-center">
+              {workflowControls}
+              {editWorkflowButton}
+            </div>
+          </div>
+        </Card>
+      )}
 
       <ModalOverlay isOpen={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
         <Modal>
diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/workflow-builder-components.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/workflow-builder-components.interface.ts
index 98979afbff0e..6d94caa65e2a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/interface/workflow-builder-components.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/interface/workflow-builder-components.interface.ts
@@ -290,6 +290,7 @@ export interface WorkflowControlsProps {
 
 export interface WorkflowHeaderProps {
   breadcrumb?: React.ReactNode;
+  isAiMode?: boolean;
   title: string;
   workflowName?: string;
   children?: React.ReactNode;
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx
index 5c95b9d847a3..e218f64e2d73 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx
@@ -29,6 +29,7 @@ import DeleteModal from '../../../components/common/DeleteModal/DeleteModal';
 import HeaderBreadcrumb from '../../../components/common/HeaderBreadcrumb/HeaderBreadcrumb.component';
 import { getGlossaryHomeCrumb } from '../../../components/common/HeaderBreadcrumb/HeaderBreadcrumb.utils';
 import Loader from '../../../components/common/Loader/Loader';
+import TitleBreadcrumb from '../../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { UnsavedChangesModal } from '../../../components/Modals/UnsavedChangesModal/UnsavedChangesModal.component';
 import PageLayoutV1 from '../../../components/PageLayoutV1/PageLayoutV1';
 import {
@@ -411,6 +412,7 @@ const WorkflowBuilderInternal: React.FC<WorkflowBuilderInternalProps> = ({
     workflowMetadata?.displayName || 'Workflow Builder';
   const workflowName = workflowMetadata?.name;
 
+  // AI-mode breadcrumb: rendered inside the HeaderShell gradient header.
   const breadcrumb = useMemo(
     () => (
       <HeaderBreadcrumb
@@ -429,6 +431,18 @@ const WorkflowBuilderInternal: React.FC<WorkflowBuilderInternalProps> = ({
     [workflowDisplayName, t]
   );
 
+  // Classic-mode breadcrumb: the legacy TitleBreadcrumb shown above the header.
+  const breadcrumbs = useMemo(
+    () => [
+      {
+        activeTitle: false,
+        name: t('label.workflow-plural'),
+        url: getWorkflowDefinitionsListPath(),
+      },
+    ],
+    [t]
+  );
+
   if (loading) {
     return <Loader />;
   }
@@ -462,14 +476,20 @@ const WorkflowBuilderInternal: React.FC<WorkflowBuilderInternalProps> = ({
           'tw:flex tw:flex-1 tw:min-h-0 tw:flex-col tw:overflow-hidden',
           { 'tw:bg-gray-50': !isAiMode }
         )}>
+        {!isAiMode && (
+          <div className="tw:mb-4 tw:shrink-0">
+            <TitleBreadcrumb titleLinks={breadcrumbs} />
+          </div>
+        )}
         <div className="tw:shrink-0">
           <WorkflowHeader
-            breadcrumb={breadcrumb}
+            breadcrumb={isAiMode ? breadcrumb : undefined}
             handleDeleteWorkflow={handleShowDeleteModal}
             handleRevertAndCancel={handleRevertAndCancel}
             handleRunWorkflow={handleRunWorkflow}
             handleSaveWorkflow={handleSaveWorkflowWithSnapshot}
             handleTestWorkflow={handleTestWorkflow}
+            isAiMode={isAiMode}
             isRunLoading={isRunLoading}
             title={workflowDisplayName}
             workflowName={workflowName}