[One Workflow] Adopt alert-like table and filtering from observability/discovery

src/platform/plugins/shared/workflows_management/kibana.jsonc

@@ -30,6 +30,8 @@
       "fieldFormats",
       "unifiedSearch",
       "embeddable",
+      "controls",
+      "uiActions",
       "licensing"
     ],
     "optionalPlugins": ["alerting", "serverless", "cloud", "inbox"],

src/platform/plugins/shared/workflows_management/moon.yml

@@ -113,6 +113,7 @@ dependsOn:
   - '@kbn/inbox-plugin'
   - '@kbn/inbox-common'
   - '@kbn/datemath'
+  - '@kbn/presentation-publishing'
 tags:
   - plugin
   - prod

src/platform/plugins/shared/workflows_management/public/mocks.ts

@@ -21,6 +21,7 @@ import { QueryClient } from '@kbn/react-query';
 import { serverlessMock } from '@kbn/serverless/public/mocks';
 import { spacesPluginMock } from '@kbn/spaces-plugin/public/mocks';
 import { triggersActionsUiMock } from '@kbn/triggers-actions-ui-plugin/public/mocks';
+import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
 import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
 import { workflowsExtensionsMock } from '@kbn/workflows-extensions/public/mocks';
 import { createAvailabilityServiceMock } from './common/lib/availability/mock';
@@ -39,6 +40,7 @@ export const createStartServicesMock = () => ({
   data: dataPluginMock.createStartContract(),
   spaces: spacesPluginMock.createStartContract(),
   triggersActionsUi: triggersActionsUiMock.createStart(),
+  uiActions: uiActionsPluginMock.createStartContract(),
   workflowsExtensions: workflowsExtensionsMock.createStart(),
   licensing: licensingMock.createStart(),
   cloud: cloudMock.createStart(),

src/platform/plugins/shared/workflows_management/public/pages/executions/executions_page.test.tsx

@@ -7,21 +7,60 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
+import { of } from 'rxjs';
+import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_source/mocks';
 import { WorkflowExecutionsPage } from './executions_page';
 import { createStartServicesMock } from '../../mocks';
 import { getTestProvider } from '../../shared/mocks/test_providers';
 
+jest.mock('@kbn/alerts-ui-shared/src/alert_filter_controls', () => ({
+  AlertFilterControls: () => <div data-test-subj="alertFilterControlsStub" />,
+}));
+
+jest.mock('@kbn/unified-data-table', () => {
+  const actual = jest.requireActual('@kbn/unified-data-table');
+  return {
+    ...actual,
+    UnifiedDataTable: () => <div data-test-subj="unifiedDataTableStub" />,
+  };
+});
+
+jest.mock('@kbn/cell-actions', () => ({
+  CellActionsProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
 describe('WorkflowExecutionsPage', () => {
-  it('renders the executions shell and stub grid', async () => {
+  it('renders the executions page with search, filters, and table', async () => {
     const services = createStartServicesMock();
     services.workflowsManagement.globalExecutionsView.enabled = true;
+    services.spaces.getActiveSpace = jest.fn().mockResolvedValue({ id: 'default' });
+    const SearchBarStub = () => <div data-test-subj="searchBarStub" />;
+    services.unifiedSearch.ui.SearchBar = SearchBarStub;
+
+    jest.mocked(searchSourceInstanceMock.fetch$).mockReturnValue(
+      of({
+        rawResponse: {
+          hits: {
+            hits: [],
+            total: { value: 0, relation: 'eq' },
+          },
+        },
+      }) as unknown as ReturnType<typeof searchSourceInstanceMock.fetch$>
+    );
 
     render(<WorkflowExecutionsPage />, { wrapper: getTestProvider({ services }) });
 
     expect(screen.getByTestId('workflowExecutionsPage')).toBeInTheDocument();
-    expect(screen.getByTestId('workflowExecutionsSearchFilterScaffold')).toBeInTheDocument();
-    await screen.findByTestId('discoverDocTable');
+    expect(screen.getByTestId('workflowExecutionsPageContent')).toBeInTheDocument();
+    expect(screen.getByTestId('searchBarStub')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('workflowExecutionsFilters')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('alertFilterControlsStub')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByTestId('workflowExecutionsTableEmpty')).toBeInTheDocument();
+    });
   });
 });

src/platform/plugins/shared/workflows_management/public/pages/executions/executions_page.tsx

@@ -7,13 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiPageTemplate, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui';
+import { EuiPageTemplate, EuiScreenReaderOnly, EuiText, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { WorkflowExecutionsFilterSearchScaffold } from './workflow_executions_filter_search_scaffold';
-import { WorkflowExecutionsStubDataGrid } from './workflow_executions_stub_data_grid';
-import { useKibana } from '../../hooks/use_kibana';
+import { WorkflowExecutionsPageContent } from './workflow_executions_page_content';
 import { useWorkflowsBreadcrumbs } from '../../hooks/use_workflow_breadcrumbs/use_workflow_breadcrumbs';
 
 const executionsPageTitle = i18n.translate('workflowsManagement.executionsPage.pageTitle', {
@@ -23,13 +20,11 @@ const executionsPageTitle = i18n.translate('workflowsManagement.executionsPage.p
 const executionsPageDescription = i18n.translate(
   'workflowsManagement.executionsPage.pageDescription',
   {
-    defaultMessage:
-      'Recent workflow executions for your space. Data below is static until the list is connected to Elasticsearch.',
+    defaultMessage: 'Browse and filter workflow executions across your space.',
   }
 );
 
 export function WorkflowExecutionsPage() {
-  const services = useKibana().services;
   const { euiTheme } = useEuiTheme();
 
   useWorkflowsBreadcrumbs(executionsPageTitle);
@@ -41,23 +36,15 @@ export function WorkflowExecutionsPage() {
       data-test-subj="workflowExecutionsPage"
     >
       <EuiPageTemplate.Header bottomBorder pageTitle={executionsPageTitle}>
+        <EuiScreenReaderOnly>
+          <h2 id="workflowExecutionsTableLabel">{executionsPageTitle}</h2>
+        </EuiScreenReaderOnly>
         <EuiText size="s" color="subdued">
           <p>{executionsPageDescription}</p>
         </EuiText>
       </EuiPageTemplate.Header>
       <EuiPageTemplate.Section paddingSize="m" grow>
-        <EuiText size="xs" color="subdued">
-          <p>
-            <FormattedMessage
-              id="workflowsManagement.executionsPage.stubDataHint"
-              defaultMessage="Showing sample rows only — API integration will replace this table in a follow-up change."
-            />
-          </p>
-        </EuiText>
-        <EuiSpacer size="m" />
-        <WorkflowExecutionsFilterSearchScaffold />
-        <EuiSpacer size="m" />
-        <WorkflowExecutionsStubDataGrid services={services} />
+        <WorkflowExecutionsPageContent />
       </EuiPageTemplate.Section>
     </EuiPageTemplate>
   );

src/platform/plugins/shared/workflows_management/public/pages/executions/workflow_execution_detail_flyout.tsx

@@ -0,0 +1,152 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import {
+  EuiCodeBlock,
+  EuiDescriptionList,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  useGeneratedHtmlId,
+} from '@elastic/eui';
+import React, { useMemo } from 'react';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import { i18n } from '@kbn/i18n';
+
+export interface WorkflowExecutionDetailFlyoutProps {
+  hit: DataTableRecord;
+  onClose: () => void;
+}
+
+const formatValue = (value: unknown): string => {
+  if (value == null) {
+    return '\u2014';
+  }
+  if (Array.isArray(value)) {
+    return value.length === 1 ? formatValue(value[0]) : value.map(formatValue).join(', ');
+  }
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  return String(value);
+};
+
+const SUMMARY_FIELDS: ReadonlyArray<{ field: string; label: string }> = [
+  {
+    field: 'id',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldId', {
+      defaultMessage: 'Execution ID',
+    }),
+  },
+  {
+    field: 'workflowId',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldWorkflow', {
+      defaultMessage: 'Workflow',
+    }),
+  },
+  {
+    field: 'status',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldStatus', {
+      defaultMessage: 'Status',
+    }),
+  },
+  {
+    field: 'startedAt',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldStarted', {
+      defaultMessage: 'Started at',
+    }),
+  },
+  {
+    field: 'finishedAt',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldFinished', {
+      defaultMessage: 'Finished at',
+    }),
+  },
+  {
+    field: 'triggeredBy',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldTriggeredBy', {
+      defaultMessage: 'Triggered by',
+    }),
+  },
+  {
+    field: 'executedBy',
+    label: i18n.translate('workflowsManagement.executionsPage.flyoutFieldExecutedBy', {
+      defaultMessage: 'Executed by',
+    }),
+  },
+];
+
+export const WorkflowExecutionDetailFlyout = React.memo<WorkflowExecutionDetailFlyoutProps>(
+  ({ hit, onClose }) => {
+    const flyoutTitleId = useGeneratedHtmlId({ prefix: 'workflowExecutionDetailFlyoutTitle' });
+
+    const summary = useMemo(
+      () =>
+        SUMMARY_FIELDS.map(({ field, label }) => ({
+          title: label,
+          description: formatValue(hit.flattened[field]),
+        })),
+      [hit.flattened]
+    );
+
+    const rawJson = useMemo(
+      () => JSON.stringify(hit.raw?._source ?? hit.flattened, null, 2),
+      [hit.flattened, hit.raw]
+    );
+
+    return (
+      <EuiFlyout
+        aria-labelledby={flyoutTitleId}
+        data-test-subj="workflowExecutionDetailFlyout"
+        onClose={onClose}
+        ownFocus
+        size="m"
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id={flyoutTitleId}>
+              {i18n.translate('workflowsManagement.executionsPage.flyoutTitle', {
+                defaultMessage: 'Execution details',
+              })}
+            </h2>
+          </EuiTitle>
+          <EuiSpacer size="xs" />
+          <EuiText color="subdued" size="xs">
+            <code>{hit.flattened.id ? formatValue(hit.flattened.id) : hit.id}</code>
+          </EuiText>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiDescriptionList compressed listItems={summary} type="column" />
+          <EuiSpacer size="m" />
+          <EuiTitle size="xs">
+            <h3>
+              {i18n.translate('workflowsManagement.executionsPage.flyoutRawJsonTitle', {
+                defaultMessage: 'Raw document',
+              })}
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiCodeBlock
+            fontSize="s"
+            isCopyable
+            language="json"
+            overflowHeight={400}
+            paddingSize="s"
+          >
+            {rawJson}
+          </EuiCodeBlock>
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    );
+  }
+);
+WorkflowExecutionDetailFlyout.displayName = 'WorkflowExecutionDetailFlyout';