@orchestrator-ui/orchestrator-ui-components 1.38.2 → 2.1.0

package/src/pages/metadata/WfoTasksPage.tsx

@@ -3,10 +3,13 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
-import { WfoTableWithFilter, WfoWorkflowTargetBadge } from '@/components';
-import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    WfoWorkflowTargetBadge,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
+import type { WfoDataSorting } from '@/components';
 import { StoredTableConfig } from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
@@ -14,13 +17,15 @@ import {
     METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY,
     WfoProductBlockBadge,
 } from '@/components';
-import {
-    getDataSortHandler,
-    getPageChangeHandler,
-    getQueryStringHandler,
-} from '@/components';
+import { getDataSortHandler, getQueryStringHandler } from '@/components';
 import { WfoDateTime } from '@/components/WfoDateTime/WfoDateTime';
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import {
+    ColumnType,
+    Pagination,
+} from '@/components/WfoTable/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -91,33 +96,31 @@ export const WfoTasksPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<TaskListItem> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<TaskListItem> = {
         name: {
-            field: 'name',
-            name: t('name'),
-            width: '20%',
-            render: (name) => (
+            columnType: ColumnType.DATA,
+            label: t('name'),
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.TASK}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: 'description',
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
             width: '40%',
         },
         target: {
-            field: 'target',
-            name: t('target'),
-            width: '15%',
-            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+            columnType: ColumnType.DATA,
+            label: t('target'),
+            renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         productTags: {
-            field: 'productTags',
-            name: t('productTags'),
+            columnType: ColumnType.DATA,
+            label: t('productTags'),
             width: '20%',
-            render: (productTags) => (
+            renderData: (productTags) => (
                 <>
                     {productTags
                         ?.filter(onlyUnique)
@@ -147,10 +150,10 @@ export const WfoTasksPage = () => {
             ),
         },
         createdAt: {
-            field: 'createdAt',
-            name: t('createdAt'),
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
             width: '15%',
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -188,6 +191,8 @@ export const WfoTasksPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const mapToExportItems = (
@@ -212,19 +217,16 @@ export const WfoTasksPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<TaskListItem>
+            <WfoAdvancedTable
                 data={data ? mapTaskDefinitionToTaskListItem(data.tasks) : []}
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<TaskListItem>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<TaskListItem>(
+                onUpdateDataSorting={getDataSortHandler<TaskListItem>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<TaskListItem>(

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -3,9 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 
 import { EuiBadgeGroup } from '@elastic/eui';
-import type { Pagination } from '@elastic/eui/src/components';
 
-import type { WfoDataSorting, WfoTableColumns } from '@/components';
+import {
+    WfoDataSorting,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
 import {
     DEFAULT_PAGE_SIZE,
     DEFAULT_PAGE_SIZES,
@@ -13,12 +16,17 @@ import {
     StoredTableConfig,
     WfoDateTime,
     WfoProductBlockBadge,
-    WfoTableWithFilter,
     WfoWorkflowTargetBadge,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
 } from '@/components';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import {
+    ColumnType,
+    Pagination,
+} from '@/components/WfoTable/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import {
     useDataDisplayParams,
     useShowToastMessage,
@@ -44,7 +52,6 @@ import {
     getCsvFileNameWithDate,
 } from '@/utils/csvDownload';
 
-import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 import {
     graphQlWorkflowListMapper,
@@ -95,33 +102,31 @@ export const WfoWorkflowsPage = () => {
             },
         });
 
-    const tableColumns: WfoTableColumns<WorkflowListItem> = {
+    const tableColumns: WfoAdvancedTableColumnConfig<WorkflowListItem> = {
         name: {
-            field: 'name',
-            name: t('name'),
-            width: '20%',
-            render: (name) => (
+            columnType: ColumnType.DATA,
+            label: t('name'),
+            renderData: (name) => (
                 <WfoProductBlockBadge badgeType={BadgeType.WORKFLOW}>
                     {name}
                 </WfoProductBlockBadge>
             ),
         },
         description: {
-            field: 'description',
-            name: t('description'),
+            columnType: ColumnType.DATA,
+            label: t('description'),
             width: '40%',
         },
         target: {
-            field: 'target',
-            name: t('target'),
-            width: '15%',
-            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+            columnType: ColumnType.DATA,
+            label: t('target'),
+            renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         productTags: {
-            field: 'productTags',
-            name: t('productTags'),
+            columnType: ColumnType.DATA,
+            label: t('productTags'),
             width: '20%',
-            render: (productTags) => (
+            renderData: (productTags) => (
                 <>
                     {productTags
                         ?.filter(onlyUnique)
@@ -151,10 +156,10 @@ export const WfoWorkflowsPage = () => {
             ),
         },
         createdAt: {
-            field: 'createdAt',
-            name: t('createdAt'),
+            columnType: ColumnType.DATA,
+            label: t('createdAt'),
             width: '15%',
-            render: (date) => <WfoDateTime dateOrIsoString={date} />,
+            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
         },
@@ -193,6 +198,8 @@ export const WfoWorkflowsPage = () => {
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
 
     const mapToExportItems = (
@@ -212,7 +219,7 @@ export const WfoWorkflowsPage = () => {
 
     return (
         <WfoMetadataPageLayout>
-            <WfoTableWithFilter<WorkflowListItem>
+            <WfoAdvancedTable
                 data={
                     data
                         ? mapWorkflowDefinitionToWorkflowListItem(
@@ -220,17 +227,14 @@ export const WfoWorkflowsPage = () => {
                           )
                         : []
                 }
-                tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                     tableColumns,
                     sortFields,
                     filterFields,
                 )}
-                dataSorting={dataSorting}
+                dataSorting={[dataSorting]}
                 defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSort={getDataSortHandler<WorkflowListItem>(
-                    setDataDisplayParam,
-                )}
-                onUpdatePage={getPageChangeHandler<WorkflowListItem>(
+                onUpdateDataSorting={getDataSortHandler<WorkflowListItem>(
                     setDataDisplayParam,
                 )}
                 onUpdateQueryString={getQueryStringHandler<WorkflowListItem>(

package/src/pages/processes/WfoProcessDetail.tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router';
 import {
     EuiButton,
     EuiFlexGroup,
-    EuiFlexItem,
     EuiPanel,
     EuiSpacer,
     EuiText,
@@ -21,6 +20,7 @@ import {
     WfoTimeline,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import { useCheckEngineStatus, useOrchestratorTheme, usePolicy } from '@/hooks';
@@ -192,63 +192,55 @@ export const WfoProcessDetail = ({
 
     return (
         <>
-            <EuiFlexGroup>
-                <EuiFlexItem>
-                    <WfoTitleWithWebsocketBadge title={pageTitle} />
-                    <EuiSpacer />
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title={pageTitle} />}
+                subtitle={
                     <WfoProductInformationWithLink
                         productNames={productNames}
                         workflowName={processDetail?.workflowName ?? ''}
                     />
-                </EuiFlexItem>
-                <EuiFlexGroup
-                    justifyContent="flexEnd"
-                    direction="row"
-                    css={{ flexGrow: 0 }}
-                    gutterSize="s"
-                >
-                    <WfoIsAllowedToRender
-                        resource={PolicyResource.PROCESS_RETRY}
+                }
+            >
+                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
+                    <EuiButton
+                        onClick={handleActionButtonClick(retryAction)}
+                        iconType={() => (
+                            <WfoRefresh
+                                color={
+                                    retryButtonIsDisabled
+                                        ? theme.colors.subduedText
+                                        : theme.colors.link
+                                }
+                            />
+                        )}
+                        isDisabled={retryButtonIsDisabled}
                     >
-                        <EuiButton
-                            onClick={handleActionButtonClick(retryAction)}
-                            iconType={() => (
-                                <WfoRefresh
-                                    color={
-                                        retryButtonIsDisabled
-                                            ? theme.colors.subduedText
-                                            : theme.colors.link
-                                    }
-                                />
-                            )}
-                            isDisabled={retryButtonIsDisabled}
-                        >
-                            {t('retry')}
-                        </EuiButton>
-                    </WfoIsAllowedToRender>
-                    <WfoIsAllowedToRender
-                        resource={PolicyResource.PROCESS_ABORT}
+                        {t('retry')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
+                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_ABORT}>
+                    <EuiButton
+                        onClick={handleActionButtonClick(abortAction)}
+                        iconType={() => (
+                            <WfoXCircleFill
+                                color={
+                                    abortButtonIsDisabled
+                                        ? theme.colors.subduedText
+                                        : theme.colors.danger
+                                }
+                            />
+                        )}
+                        color="danger"
+                        isDisabled={abortButtonIsDisabled}
                     >
-                        <EuiButton
-                            onClick={handleActionButtonClick(abortAction)}
-                            iconType={() => (
-                                <WfoXCircleFill
-                                    color={
-                                        abortButtonIsDisabled
-                                            ? theme.colors.subduedText
-                                            : theme.colors.danger
-                                    }
-                                />
-                            )}
-                            color="danger"
-                            isDisabled={abortButtonIsDisabled}
+                        {t('abort')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
+                <>
+                    {processDetail && processIsTask && (
+                        <WfoIsAllowedToRender
+                            resource={PolicyResource.PROCESS_DELETE}
                         >
-                            {t('abort')}
-                        </EuiButton>
-                    </WfoIsAllowedToRender>
-                    {processDetail &&
-                        processIsTask &&
-                        isAllowed(PolicyResource.PROCESS_DELETE) && (
                             <EuiButton
                                 onClick={handleActionButtonClick(deleteAction)}
                                 iconType={() => (
@@ -265,10 +257,10 @@ export const WfoProcessDetail = ({
                             >
                                 {t('delete')}
                             </EuiButton>
-                        )}
-                </EuiFlexGroup>
-            </EuiFlexGroup>
-            <EuiSpacer />
+                        </WfoIsAllowedToRender>
+                    )}
+                </>
+            </WfoContentHeader>
 
             <EuiPanel
                 hasShadow={false}

package/src/pages/settings/WfoSettingsPage.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
+
+import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
 
 import {
     WfoEngineStatus,
@@ -8,17 +10,20 @@ import {
     WfoModifySettings,
     WfoWorkerStatus,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useOrchestratorTheme } from '@/hooks';
 
 export const WfoSettingsPage = () => {
     const { theme } = useOrchestratorTheme();
+    const t = useTranslations('main');
 
     return (
         <>
-            <EuiSpacer />
+            <WfoContentHeader
+                title={t('settings')}
+                subtitle={<EuiHorizontalRule margin="s" />}
+            />
 
-            <EuiPageHeader pageTitle="Settings" />
-            <EuiHorizontalRule />
             <div css={{ maxWidth: theme.base * 40 }}>
                 <WfoFlushSettings />
                 <EuiSpacer />

package/src/pages/startPage/WfoStartPage.tsx

@@ -1,5 +1,9 @@
 import React, { ReactElement } from 'react';
 
+import { useTranslations } from 'next-intl';
+
+import { EuiPageHeader } from '@elastic/eui';
+
 import {
     WfoActiveWorkflowsSummaryCard,
     WfoFailedTasksSummaryCard,
@@ -9,6 +13,7 @@ import {
     WfoProductsSummaryCard,
     WfoSummaryCards,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { PolicyResource } from '@/configuration';
 import { usePolicy, useWfoSession } from '@/hooks';
 import { toOptionalArrayEntry } from '@/utils';
@@ -16,6 +21,8 @@ import { toOptionalArrayEntry } from '@/utils';
 import { useStartPageSummaryCardConfigurationOverride } from './useStartPageSummaryCardConfigurationOverride';
 
 export const WfoStartPage = () => {
+    const t = useTranslations('main');
+
     const { overrideSummaryCards } =
         useStartPageSummaryCardConfigurationOverride();
 
@@ -42,5 +49,14 @@ export const WfoStartPage = () => {
     const summaryCards =
         overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
 
-    return <WfoSummaryCards>{summaryCards}</WfoSummaryCards>;
+    return (
+        <>
+            <WfoContentHeader
+                title={
+                    <EuiPageHeader pageTitle={`${t('welcome')} ${username}`} />
+                }
+            />
+            <WfoSummaryCards>{summaryCards}</WfoSummaryCards>
+        </>
+    );
 };

package/src/pages/subscriptions/WfoSubscriptionsListPage.tsx

@@ -18,6 +18,7 @@ import {
     WfoTitleWithWebsocketBadge,
     subscriptionListTabs,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
 import { SortOrder } from '@/types';
 
@@ -77,11 +78,9 @@ export const WfoSubscriptionsListPage = () => {
 
     return (
         <>
-            <EuiSpacer />
-
-            <WfoTitleWithWebsocketBadge title={t('title')} />
-
-            <EuiSpacer size="m" />
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title={t('title')} />}
+            />
 
             <WfoFilterTabs
                 tabs={subscriptionListTabs}

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -5,17 +5,17 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiButton, EuiSpacer } from '@elastic/eui';
 
 import {
     ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY,
     COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY,
+    ColumnType,
     DEFAULT_PAGE_SIZE,
     StoredTableConfig,
     WfoFilterTabs,
     WfoIsAllowedToRender,
     WfoStartTaskButtonComboBox,
-    WfoTableColumns,
 } from '@/components';
 import { PATH_TASKS } from '@/components';
 import {
@@ -23,6 +23,9 @@ import {
     WfoProcessesList,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
+import { toSortedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import {
@@ -111,64 +114,53 @@ export const WfoTasksListPage = () => {
 
     // Changing the order of the keys, resulting in an updated column order in the table
     const handleOverrideTableColumns: (
-        defaultTableColumns: WfoTableColumns<ProcessListItem>,
-    ) => WfoTableColumns<ProcessListItem> = (defaultTableColumns) => ({
+        defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem>,
+    ) => WfoAdvancedTableColumnConfig<ProcessListItem> = (
+        defaultTableColumns,
+    ) => ({
         workflowName: {
-            field: 'workflowName',
-            name: t('taskName'),
-            render: (value, { processId }) => (
+            columnType: ColumnType.DATA,
+            label: t('taskName'),
+            renderData: (value, { processId }) => (
                 <Link href={`${PATH_TASKS}/${processId}`}>{value}</Link>
             ),
         },
-        lastStep: defaultTableColumns.lastStep,
-        lastStatus: defaultTableColumns.lastStatus,
-        workflowTarget: defaultTableColumns.workflowTarget,
-        productTag: defaultTableColumns.tag,
-        productName: defaultTableColumns.productName,
-        customer: defaultTableColumns.customer,
-        customerAbbreviation: defaultTableColumns.customerAbbreviation,
-        subscriptions: defaultTableColumns.subscriptions,
-        createdBy: defaultTableColumns.createdBy,
-        assignee: defaultTableColumns.assignee,
-        processId: defaultTableColumns.processId,
-        startedAt: defaultTableColumns.startedAt,
-        lastModifiedAt: defaultTableColumns.lastModifiedAt,
+        ...toSortedTableColumnConfig(defaultTableColumns, [
+            'lastStep',
+            'lastStatus',
+            'workflowTarget',
+            'tag',
+            'productName',
+            'customer',
+            'customerAbbreviation',
+            'subscriptions',
+            'createdBy',
+            'assignee',
+            'processId',
+            'startedAt',
+            'lastModifiedAt',
+        ]),
     });
 
     return (
         <>
-            <EuiSpacer />
-
-            <EuiFlexGroup>
-                <EuiFlexItem>
-                    <WfoTitleWithWebsocketBadge title="Tasks" />
-                </EuiFlexItem>
-
-                <EuiFlexItem>
-                    <EuiFlexGroup justifyContent="flexEnd">
-                        {' '}
-                        <WfoIsAllowedToRender
-                            resource={PolicyResource.TASKS_RETRY_ALL}
-                        >
-                            <EuiButton
-                                onClick={handleRerunAllButtonClick}
-                                iconType={() => (
-                                    <WfoRefresh
-                                        color={theme.colors.primaryText}
-                                    />
-                                )}
-                            >
-                                {t('rerunAll')}
-                            </EuiButton>
-                        </WfoIsAllowedToRender>
-                        <WfoIsAllowedToRender
-                            resource={PolicyResource.TASKS_CREATE}
-                        >
-                            <WfoStartTaskButtonComboBox />
-                        </WfoIsAllowedToRender>
-                    </EuiFlexGroup>
-                </EuiFlexItem>
-            </EuiFlexGroup>
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title="Tasks" />}
+            >
+                <WfoIsAllowedToRender resource={PolicyResource.TASKS_RETRY_ALL}>
+                    <EuiButton
+                        onClick={handleRerunAllButtonClick}
+                        iconType={() => (
+                            <WfoRefresh color={theme.colors.primaryText} />
+                        )}
+                    >
+                        {t('rerunAll')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
+                <WfoIsAllowedToRender resource={PolicyResource.TASKS_CREATE}>
+                    <WfoStartTaskButtonComboBox />
+                </WfoIsAllowedToRender>
+            </WfoContentHeader>
 
             <WfoFilterTabs
                 tabs={defaultTasksListTabs}

package/src/pages/workflows/WfoWorkflowsListPage.tsx

@@ -19,6 +19,7 @@ import {
     WfoProcessesList,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
 import { SortOrder } from '@/types';
 
@@ -84,11 +85,9 @@ export const WfoWorkflowsListPage = () => {
 
     return (
         <>
-            <EuiSpacer />
-
-            <WfoTitleWithWebsocketBadge title={t('title')} />
-
-            <EuiSpacer size="m" />
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title={t('title')} />}
+            />
 
             <WfoFilterTabs
                 tabs={defaultWorkflowsListTabs}