Skip to content

Revamped workflow details header page #31158

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anuj-kumary merged 8 commits into from
Aug 7, 2026
+150 −98
Merged

Revamped workflow details header page #31158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac015eb
Revamped workflow details header page
anuj-kumary Aug 7, 2026
c906954
test(ui): rewrite CsvJobsTray spec without API mocking — use real bac…
anuj-kumary Aug 7, 2026
618d1b9
Revert "test(ui): rewrite CsvJobsTray spec without API mocking — use …
anuj-kumary Aug 7, 2026
3108181
Merge branch 'main' into workflow-header
anuj-kumary Aug 7, 2026
7d3c546
test(ui): scope CsvJobsTray assertions to specific jobId to prevent c…
anuj-kumary Aug 7, 2026
e98217c
Merge branch 'workflow-header' of https://github.com/open-metadata/Op…
anuj-kumary Aug 7, 2026
3ffcca7
Revert "test(ui): scope CsvJobsTray assertions to specific jobId to p…
anuj-kumary Aug 7, 2026
f2263d6
fix lint checks
anuj-kumary Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions ...n/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,36 @@
}) => <span {...rest}>{children}</span>,
}));

jest.mock('../../common/HeaderShell/HeaderShell.component', () => ({
__esModule: true,
default: ({
breadcrumb,
leading,
title,
subtitle,
badge,
actions,
'data-testid': dataTestId,
}: {
breadcrumb?: React.ReactNode;
leading?: React.ReactNode;
title?: React.ReactNode;
subtitle?: React.ReactNode;
badge?: React.ReactNode;
actions?: React.ReactNode;
'data-testid'?: string;
}) => (
<div data-testid={dataTestId}>
{breadcrumb}
{leading}
{title}
{badge}
{subtitle}
{actions}
</div>
),
}));

jest.mock('../../../assets/svg/edit-new.svg', () => ({
ReactComponent: () => null,
}));
Expand Down Expand Up @@ -173,7 +203,7 @@

render(<WorkflowHeader {...defaultProps} />);

expect(screen.getByTestId('system-workflow-badge')).toBeInTheDocument();

Check warning on line 206 in openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

Define a constant instead of duplicating this literal 3 times
expect(screen.getByTestId('system-workflow-badge')).toHaveTextContent(
'label.system'
);
Expand Down Expand Up @@ -214,7 +244,7 @@
render(<WorkflowHeader {...defaultProps} />);

expect(
screen.queryByTestId('edit-workflow-title-button')

Check warning on line 247 in openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.test.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

Define a constant instead of duplicating this literal 3 times
).not.toBeInTheDocument();
});

Expand Down
172 changes: 90 additions & 82 deletions ...c/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
import {
Badge,
Button,
Card,
Dialog,
Input,
Modal,
Expand All @@ -31,9 +30,11 @@
import { useWorkflowModeContext } from '../../../contexts/WorkflowModeContext';
import { WorkflowHeaderProps } from '../../../interface/workflow-builder-components.interface';
import { showErrorToast } from '../../../utils/ToastUtils';
import HeaderShell from '../../common/HeaderShell/HeaderShell.component';
import { WorkflowControls } from './WorkflowControls';

export const WorkflowHeader: React.FC<WorkflowHeaderProps> = ({
breadcrumb,
title,
workflowName,
handleTestWorkflow,
Expand All @@ -43,7 +44,7 @@
handleRunWorkflow,
isRunLoading = false,
onUpdateDisplayName,
}) => {

Check warning on line 47 in openmetadata-ui/src/main/resources/ui/src/components/WorkflowDefinitions/WorkflowBuilder/WorkflowHeader.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

{"message":"Function has a complexity of 12 which is greater than 10 authorized.","cost":2,"secondaryLocations":[{"line":47,"column":3,"endLine":47,"endColumn":5,"message":"+1"},{"line":61,"column":65,"endLine":61,"endColumn":67,"message":"+1"},{"line":99,"column":49,"endLine":99,"endColumn":50,"message":"+1"},{"line":101,"column":33,"endLine":101,"endColumn":34,"message":"+1"},{"line":104,"column":33,"endLine":104,"endColumn":34,"message":"+1"},{"line":108,"column":31,"endLine":108,"endColumn":32,"message":"+1"},{"line":110,"column":45,"endLine":110,"endColumn":46,"message":"+1"},{"line":112,"column":28,"endLine":112,"endColumn":30,"message":"+1"},{"line":125,"column":20,"endLine":125,"endColumn":22,"message":"+1"},{"line":140,"column":36,"endLine":140,"endColumn":38,"message":"+1"},{"line":140,"column":25,"endLine":140,"endColumn":27,"message":"+1"},{"line":159,"column":23,"endLine":159,"endColumn":24,"message":"+1"}]}
const { t } = useTranslation();
const {
showEditButton,
Expand Down Expand Up @@ -89,89 +90,96 @@
};

return (
<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">
<>
<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>

<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>
{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}
/>
)}
</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
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>
)}
</div>
</div>
}
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="h3"
className="tw:m-0 tw:text-primary"
data-testid="workflow-title"
size="text-xl"
weight="semibold">
{title}
</Typography>
}
variant="gradient"
/>

<ModalOverlay isOpen={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
<Modal>
Expand Down Expand Up @@ -209,6 +217,6 @@
</Dialog>
</Modal>
</ModalOverlay>
</Card>
</>
);
};
1 change: 1 addition & 0 deletions openmetadata-ui/src/main/resources/ui/src/interface/workflow-builder-components.interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,7 @@ export interface WorkflowControlsProps {
}

export interface WorkflowHeaderProps {
breadcrumb?: React.ReactNode;
title: string;
workflowName?: string;
children?: React.ReactNode;
Expand Down
45 changes: 29 additions & 16 deletions ...i/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@
import { Navigate } from 'react-router-dom';
import { Edge, Node, ReactFlowProvider } from 'reactflow';
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 {
Expand All @@ -48,6 +49,7 @@
WorkflowModeProvider,
} from '../../../contexts/WorkflowModeContext';
import { NodeType } from '../../../generated/governance/workflows/elements/nodeType';
import { useIsAiMode } from '../../../hooks/useAppMode';
import { useFqn } from '../../../hooks/useFqn';
import { useWorkflowActions } from '../../../hooks/useWorkflowActions';
import { useWorkflowHistory } from '../../../hooks/useWorkflowHistory';
Expand All @@ -71,8 +73,9 @@

const WorkflowBuilderInternal: React.FC<WorkflowBuilderInternalProps> = ({
workflowLogic,
}) => {

Check warning on line 76 in openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

{"message":"Function has a complexity of 21 which is greater than 10 authorized.","cost":11,"secondaryLocations":[{"line":76,"column":3,"endLine":76,"endColumn":5,"message":"+1"},{"line":249,"column":53,"endLine":249,"endColumn":55,"message":"+1"},{"line":335,"column":37,"endLine":335,"endColumn":39,"message":"+1"},{"line":411,"column":34,"endLine":411,"endColumn":36,"message":"+1"},{"line":432,"column":2,"endLine":432,"endColumn":4,"message":"+1"},{"line":442,"column":41,"endLine":442,"endColumn":43,"message":"+1"},{"line":455,"column":24,"endLine":455,"endColumn":25,"message":"+1"},{"line":456,"column":29,"endLine":456,"endColumn":31,"message":"+1"},{"line":499,"column":54,"endLine":499,"endColumn":55,"message":"+1"},{"line":510,"column":20,"endLine":510,"endColumn":21,"message":"+1"},{"line":512,"column":20,"endLine":512,"endColumn":21,"message":"+1"},{"line":540,"column":36,"endLine":540,"endColumn":38,"message":"+1"},{"line":539,"column":29,"endLine":539,"endColumn":31,"message":"+1"},{"line":538,"column":54,"endLine":538,"endColumn":56,"message":"+1"},{"line":545,"column":22,"endLine":545,"endColumn":23,"message":"+1"},{"line":544,"column":31,"endLine":544,"endColumn":33,"message":"+1"},{"line":563,"column":47,"endLine":563,"endColumn":49,"message":"+1"},{"line":564,"column":43,"endLine":564,"endColumn":45,"message":"+1"},{"line":572,"column":57,"endLine":572,"endColumn":59,"message":"+1"},{"line":595,"column":51,"endLine":595,"endColumn":53,"message":"+1"},{"line":598,"column":48,"endLine":598,"endColumn":50,"message":"+1"}]}
const { t } = useTranslation();
const isAiMode = useIsAiMode();
const {
canAccessSidebar,
canDragNodes,
Expand Down Expand Up @@ -327,7 +330,7 @@
} else if (!isEditMode && savedStateOnEdit) {
setSavedStateOnEdit(null);
}
}, [isEditMode, savedStateOnEdit, loading]);

Check warning on line 333 in openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

React Hook useEffect has missing dependencies: 'edges' and 'nodes'. Either include them or remove the dependency array

const navBlockEnabled = isEditMode && hasNodeConfigSaved;

Expand Down Expand Up @@ -391,7 +394,7 @@
showErrorToast(error as AxiosError);
}
},
[

Check warning on line 397 in openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

React Hook useCallback has missing dependencies: 't' and 'workflowLogic'. Either include them or remove the dependency array
workflowDefinition,
workflowMetadata?.description,
handleWorkflowMetadataUpdate,
Expand All @@ -408,15 +411,23 @@
workflowMetadata?.displayName || 'Workflow Builder';
const workflowName = workflowMetadata?.name;

const breadcrumbs = useMemo(() => {
return [
{
activeTitle: false,
name: t('label.workflow-plural'),
url: getWorkflowDefinitionsListPath(),
},
];
}, [workflowDisplayName, t]);
const breadcrumb = useMemo(
() => (
<HeaderBreadcrumb
noMargin
items={[
getGlossaryHomeCrumb(t),
{
label: t('label.workflow-plural'),
href: getWorkflowDefinitionsListPath(),
},
{ label: workflowDisplayName },
]}
showHome={false}
/>
),
Comment thread
anuj-kumary marked this conversation as resolved.
[workflowDisplayName, t]
);

if (loading) {
return <Loader />;
Expand All @@ -440,18 +451,20 @@
height: 'calc(100vh - var(--ant-navbar-height))',
overflow: 'hidden',
}}
pageTitle={t('label.workflow-plural')}>
pageTitle={t('label.workflow-plural')}
variant={isAiMode ? 'compact' : 'default'}>
{isConnectionModalOpen && (
<div className="tw:fixed tw:inset-0 tw:bg-black/30 tw:z-9999" />
)}

<div className="tw:bg-gray-50 tw:flex tw:flex-1 tw:min-h-0 tw:flex-col tw:overflow-hidden">
<div className="tw:mb-4 tw:shrink-0">
<TitleBreadcrumb titleLinks={breadcrumbs} />
</div>

<div
className={classNames(
'tw:flex tw:flex-1 tw:min-h-0 tw:flex-col tw:overflow-hidden',
{ 'tw:bg-gray-50': !isAiMode }
)}>
<div className="tw:shrink-0">
<WorkflowHeader
breadcrumb={breadcrumb}
handleDeleteWorkflow={handleShowDeleteModal}
handleRevertAndCancel={handleRevertAndCancel}
handleRunWorkflow={handleRunWorkflow}
Expand Down Expand Up @@ -495,7 +508,7 @@
isNodeDragEnabled={
canDragNodes
? isNodeDragEnabledWrapper
: canDragNodesInViewMode

Check warning on line 511 in openmetadata-ui/src/main/resources/ui/src/pages/WorkflowDefinitions/WorkflowBuilder/WorkflowBuilder.tsx

View workflow job for this annotation

GitHub Actions / checkstyle 

Extract this nested ternary operation into an independent statement
? () => true
: () => false
}
Expand Down
Loading