[Chrome Next] Add AppHeader to dashboards listing page

kowalczyk-krzysztof · kowalczyk-krzysztof · commit ac655f90ed85 · 2026-05-29T17:31:10.000+02:00
diff --git a/src/platform/packages/shared/content-management/tabbed_table_list_view/src/tabbed_table_list_view.tsx b/src/platform/packages/shared/content-management/tabbed_table_list_view/src/tabbed_table_list_view.tsx
@@ -21,6 +21,7 @@ export interface TableListBreadcrumb {
 export type TableListTabParentProps<T extends UserContentCommonSchema = UserContentCommonSchema> =
   Pick<TableListViewTableProps<T>, 'onFetchSuccess' | 'setPageDataTestSubject'> & {
     getBreadcrumbs?: (appId: string) => TableListBreadcrumb[];
+    showCreateButton?: boolean;
   };
 
 export interface TableListTab<T extends UserContentCommonSchema = UserContentCommonSchema> {
@@ -33,12 +34,14 @@ export interface TableListTab<T extends UserContentCommonSchema = UserContentCom
 
 type TabbedTableListViewProps = Pick<
   TableListViewProps<UserContentCommonSchema>,
-  'title' | 'description' | 'headingId' | 'children'
+  'description' | 'headingId' | 'children'
 > & {
+  title?: TableListViewProps<UserContentCommonSchema>['title'];
   tabs: TableListTab[];
   activeTabId: string;
   changeActiveTab: (id: string) => void;
   getBreadcrumbs?: TableListTabParentProps['getBreadcrumbs'];
+  showCreateButton?: boolean;
 };
 
 export const TabbedTableListView = ({
@@ -50,6 +53,7 @@ export const TabbedTableListView = ({
   activeTabId,
   changeActiveTab,
   getBreadcrumbs,
+  showCreateButton,
 }: TabbedTableListViewProps) => {
   const [hasInitialFetchReturned, setHasInitialFetchReturned] = useState(false);
   const [pageDataTestSubject, setPageDataTestSubject] = useState<string>();
@@ -71,17 +75,18 @@ export const TabbedTableListView = ({
         onFetchSuccess,
         setPageDataTestSubject,
         getBreadcrumbs,
+        showCreateButton,
       });
       setTableList(newTableList);
     }
 
     loadTableList();
-  }, [activeTabId, tabs, getActiveTab, onFetchSuccess, getBreadcrumbs]);
+  }, [activeTabId, tabs, getActiveTab, onFetchSuccess, getBreadcrumbs, showCreateButton]);
 
   return (
     <KibanaPageTemplate panelled data-test-subj={pageDataTestSubject}>
       <KibanaPageTemplate.Header
-        pageTitle={<span id={headingId}>{title}</span>}
+        pageTitle={title ? <span id={headingId}>{title}</span> : undefined}
         description={description}
         data-test-subj="top-nav"
         tabs={tabs.map((tab) => ({
@@ -90,7 +95,9 @@ export const TabbedTableListView = ({
           label: tab.title,
         }))}
       />
-      <KibanaPageTemplate.Section aria-labelledby={hasInitialFetchReturned ? headingId : undefined}>
+      <KibanaPageTemplate.Section
+        aria-labelledby={hasInitialFetchReturned && title ? headingId : undefined}
+      >
         {/* Any children passed to the component */}
         {children}
 
diff --git a/src/platform/plugins/private/event_annotation_listing/public/plugin.ts b/src/platform/plugins/private/event_annotation_listing/public/plugin.ts
@@ -8,6 +8,7 @@
  */
 
 import type { Plugin, CoreSetup, CoreStart } from '@kbn/core/public';
+import { firstValueFrom } from 'rxjs';
 import type { PresentationUtilPluginStart } from '@kbn/presentation-util-plugin/public';
 import type { SavedObjectTaggingPluginStart } from '@kbn/saved-objects-tagging-plugin/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
@@ -101,7 +102,35 @@ export class EventAnnotationListingPlugin
       },
     };
     dependencies.visualizations.listingViewRegistry.add(annotationGroupsTabConfig);
-    dependencies.dashboard.registerListingPageTab(annotationGroupsTabConfig);
+    dependencies.dashboard.registerListingPageTab({
+      ...annotationGroupsTabConfig,
+      createAction: async () => {
+        const [coreStart, pluginsStart] = await core.getStartServices();
+        const currentApp = await firstValueFrom(coreStart.application.currentAppId$);
+        if (!currentApp) return;
+        const stateTransfer = pluginsStart.embeddable.getStateTransfer();
+        const breadcrumbs = [
+          {
+            text: stateTransfer.getAppNameFromId(currentApp) ?? currentApp,
+            href: coreStart.application.getUrlForApp(currentApp),
+          },
+          {
+            text: tabTitle,
+            href: coreStart.application.getUrlForApp(currentApp, {
+              path: window.location.hash,
+            }),
+          },
+        ];
+        await stateTransfer.navigateToEditor('lens', {
+          path: '',
+          state: {
+            originatingApp: currentApp,
+            originatingPath: window.location.hash,
+            breadcrumbs,
+          },
+        });
+      },
+    });
   }
 
   public start(core: CoreStart, plugins: object): void {
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_listing/dashboard_listing.test.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_listing/dashboard_listing.test.tsx
@@ -27,6 +27,11 @@ jest.mock('@kbn/content-management-tabbed-table-list-view', () => ({
   TabbedTableListView: jest.fn().mockReturnValue(null),
 }));
 
+jest.mock('@kbn/app-header', () => ({
+  __esModule: true,
+  AppHeader: () => null,
+}));
+
 const renderDashboardListing = (
   props: Partial<DashboardListingProps> = {},
   { initialEntries = ['/list'] }: { initialEntries?: string[] } = {}
@@ -58,7 +63,6 @@ test('renders TabbedTableListView with correct title and dashboards tab', () =>
   expect(mockTabbedTableListView).toHaveBeenCalledTimes(1);
   const props = mockTabbedTableListView.mock.calls[0][0];
   expect(props).toMatchObject({
-    title: 'Dashboards',
     headingId: 'dashboardListingHeading',
   });
   expect(props.tabs[0]).toMatchObject({ id: 'dashboards', title: 'Dashboards' });
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_listing/dashboard_listing.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_listing/dashboard_listing.tsx
@@ -17,11 +17,13 @@ import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 import { QueryClientProvider } from '@kbn/react-query';
 import type { EmbeddableEditorBreadcrumb } from '@kbn/embeddable-plugin/public';
 
+import { AppHeader } from '@kbn/app-header';
+import type { AppMenuConfig } from '@kbn/core-chrome-app-menu-components';
 import { coreServices } from '../services/kibana_services';
 import { dashboardQueryClient } from '../services/dashboard_query_client';
 import { DASHBOARD_APP_ID, LANDING_PAGE_PATH } from '../../common/page_bundle_constants';
 import { getDashboardListingTabs } from './get_dashboard_listing_tabs';
-import type { DashboardListingProps } from './types';
+import type { DashboardListingProps, DashboardListingTab } from './types';
 
 export const DashboardListing = ({
   children,
@@ -86,19 +88,63 @@ export const DashboardListing = ({
     [tabs, activeTabId]
   );
 
+  const appMenu: AppMenuConfig = useMemo(() => {
+    const tabsByIdMap = new Map((tabs as DashboardListingTab[]).map((tab) => [tab.id, tab]));
+    return {
+      primaryActionItem: {
+        id: 'create',
+        iconType: 'plus',
+        label: i18n.translate('dashboard.listing.createButtonLabel', {
+          defaultMessage: 'Create',
+        }),
+        popoverWidth: 180,
+        items: [
+          {
+            id: 'createDashboard',
+            order: 1,
+            label: 'Dashboard',
+            iconType: 'productDashboard',
+            testId: 'createDashboardButton',
+            run: () => tabsByIdMap.get('dashboards')?.createAction?.(),
+          },
+          {
+            id: 'createVisualization',
+            order: 2,
+            label: 'Visualization',
+            iconType: 'chartBarVertical',
+            testId: 'createVisualizationButton',
+            run: () => tabsByIdMap.get('visualizations')?.createAction?.(),
+          },
+          {
+            id: 'createAnnotation',
+            order: 3,
+            label: 'Annotation',
+            iconType: 'flag',
+            testId: 'createAnnotationButton',
+            run: () => tabsByIdMap.get('annotations')?.createAction?.(),
+          },
+        ],
+      },
+    };
+  }, [tabs]);
+
   return (
     <I18nProvider>
       <QueryClientProvider client={dashboardQueryClient}>
         {children}
-        <TabbedTableListView
-          headingId="dashboardListingHeading"
+        <AppHeader
           title={i18n.translate('dashboard.listing.title', {
             defaultMessage: 'Dashboards',
           })}
+          menu={appMenu}
+        />
+        <TabbedTableListView
+          headingId="dashboardListingHeading"
           getBreadcrumbs={getBreadcrumbs}
           tabs={tabs}
           activeTabId={activeTabId}
           changeActiveTab={changeActiveTab}
+          showCreateButton={false}
         />
       </QueryClientProvider>
     </I18nProvider>
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_listing/get_dashboard_listing_tabs.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_listing/get_dashboard_listing_tabs.tsx
@@ -9,10 +9,7 @@
 
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import type {
-  TableListTab,
-  TableListTabParentProps,
-} from '@kbn/content-management-tabbed-table-list-view';
+import type { TableListTabParentProps } from '@kbn/content-management-tabbed-table-list-view';
 import {
   TableListViewTable,
   TableListViewKibanaProvider,
@@ -29,7 +26,13 @@ import {
 } from '../services/kibana_services';
 import { DashboardUnsavedListing } from './dashboard_unsaved_listing';
 import { useDashboardListingTable } from './hooks/use_dashboard_listing_table';
-import type { DashboardListingProps, DashboardSavedObjectUserContent } from './types';
+import { confirmCreateWithUnsaved } from './confirm_overlays';
+import { getDashboardBackupService } from '../services/dashboard_api_services';
+import type {
+  DashboardListingProps,
+  DashboardListingTab,
+  DashboardSavedObjectUserContent,
+} from './types';
 
 type GetDashboardListingTabsParams = Pick<
   DashboardListingProps,
@@ -64,6 +67,7 @@ const DashboardsTabContent = ({
     getDashboardUrl,
     useSessionStorageIntegration,
     initialFilter,
+    showCreateDashboardButton: parentProps.showCreateButton,
   });
 
   const dashboardFavoritesClient = useMemo(() => {
@@ -101,22 +105,32 @@ export const getDashboardListingTabs = ({
   useSessionStorageIntegration,
   initialFilter,
   getTabs,
-}: GetDashboardListingTabsParams): TableListTab<DashboardSavedObjectUserContent>[] => {
+}: GetDashboardListingTabsParams): DashboardListingTab[] => {
   const commonProps = {
     goToDashboard,
     getDashboardUrl,
     useSessionStorageIntegration,
     initialFilter,
   };
 
-  const dashboardsTab: TableListTab<DashboardSavedObjectUserContent> = {
+  const dashboardsTab: DashboardListingTab = {
     title: i18n.translate('dashboard.listing.tabs.dashboards.title', {
       defaultMessage: 'Dashboards',
     }),
     id: 'dashboards',
     getTableList: (parentProps) => (
       <DashboardsTabContent {...commonProps} parentProps={parentProps} />
     ),
+    createAction: () => {
+      if (useSessionStorageIntegration && getDashboardBackupService().dashboardHasUnsavedEdits()) {
+        confirmCreateWithUnsaved(() => {
+          getDashboardBackupService().clearState();
+          goToDashboard();
+        }, goToDashboard);
+        return;
+      }
+      goToDashboard();
+    },
   };
 
   // Additional tabs (e.g., visualizations and annotation groups)
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_listing/types.ts b/src/platform/plugins/shared/dashboard/public/dashboard_listing/types.ts
@@ -14,14 +14,13 @@ import type { SavedObjectAccessControl } from '@kbn/core-saved-objects-common';
 import type { TableListTab } from '@kbn/content-management-tabbed-table-list-view';
 import type { AppDeepLinkLocations } from '@kbn/core/public';
 
-/** Tab interface with optional deep link support. */
+/** Tab interface with optional deep link and create action support. */
 export type DashboardListingTab = TableListTab & {
   deepLink?: {
-    /** Title to display in global search results */
     title: string;
-    /** Where this deep link should be visible. */
     visibleIn?: AppDeepLinkLocations[];
   };
+  createAction?: () => void;
 };
 
 export type DashboardListingProps = PropsWithChildren<{
diff --git a/src/platform/plugins/shared/visualization_listing/public/components/visualization_table_list.tsx b/src/platform/plugins/shared/visualization_listing/public/components/visualization_table_list.tsx
@@ -60,7 +60,7 @@ export const VisualizationTableList = ({
   savedObjectsTagging,
   parentProps,
 }: VisualizationTableListProps) => {
-  const { getBreadcrumbs, onFetchSuccess, setPageDataTestSubject } = parentProps;
+  const { getBreadcrumbs, onFetchSuccess, setPageDataTestSubject, showCreateButton } = parentProps;
   const euiThemeContext = useEuiTheme();
   const tableStyles = useMemo(
     () => getVisualizationListingTableStyles(euiThemeContext),
@@ -74,14 +74,15 @@ export const VisualizationTableList = ({
   const visualizedUserContent = useRef<VisualizeUserContent[]>();
   const closeNewVisModal = useRef(() => {});
 
-  const createNewVis = useCallback(async () => {
-    const currentApp = await firstValueFrom(core.application.currentAppId$);
-    const breadcrumbs = currentApp ? getBreadcrumbs?.(currentApp) : undefined;
-    closeNewVisModal.current = visualizations.showNewVisModal({
-      originatingApp: currentApp,
-      originatingPath: window.location.hash,
-      breadcrumbs,
-      outsideVisualizeApp: currentApp !== VISUALIZE_APP_NAME,
+  const createNewVis = useCallback(() => {
+    firstValueFrom(core.application.currentAppId$).then((currentApp) => {
+      const breadcrumbs = currentApp ? getBreadcrumbs?.(currentApp) : undefined;
+      closeNewVisModal.current = visualizations.showNewVisModal({
+        originatingApp: currentApp,
+        originatingPath: window.location.hash,
+        breadcrumbs,
+        outsideVisualizeApp: currentApp !== VISUALIZE_APP_NAME,
+      });
     });
   }, [visualizations, core.application, getBreadcrumbs]);
 
@@ -244,7 +245,7 @@ export const VisualizationTableList = ({
           customValidators: contentEditorValidators,
         }}
         emptyPrompt={noItemsFragment}
-        createItem={createNewVis}
+        createItem={showCreateButton === false ? undefined : createNewVis}
         customTableColumn={getCustomColumn()}
         customSortingOptions={getCustomSortingOptions()}
         initialPageSize={initialPageSize}
diff --git a/src/platform/plugins/shared/visualization_listing/public/plugin.ts b/src/platform/plugins/shared/visualization_listing/public/plugin.ts
@@ -8,13 +8,15 @@
  */
 
 import type { Plugin, CoreSetup, CoreStart } from '@kbn/core/public';
+import { firstValueFrom } from 'rxjs';
 import type { ContentManagementPublicStart } from '@kbn/content-management-plugin/public';
 import type { SavedObjectTaggingOssPluginStart } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import type { VisualizationsStart } from '@kbn/visualizations-plugin/public';
 import type { DashboardSetup, DashboardListingTab } from '@kbn/dashboard-plugin/public';
 import type { EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import type { TableListTabParentProps } from '@kbn/content-management-tabbed-table-list-view';
 import { i18n } from '@kbn/i18n';
+import { VISUALIZE_APP_NAME } from '@kbn/visualizations-common';
 import type { VisualizationListingPageServices } from './get_table_list';
 
 export interface VisualizationListingStartDependencies {
@@ -72,6 +74,32 @@ export class VisualizationListingPlugin
         }),
         visibleIn: ['globalSearch'],
       },
+      createAction: async () => {
+        const [coreStart, pluginsStart] = await core.getStartServices();
+        const currentApp = await firstValueFrom(coreStart.application.currentAppId$);
+        const breadcrumbs = currentApp
+          ? [
+              {
+                text:
+                  pluginsStart.embeddable.getStateTransfer().getAppNameFromId(currentApp) ??
+                  currentApp,
+                href: coreStart.application.getUrlForApp(currentApp),
+              },
+              {
+                text: tabTitle,
+                href: coreStart.application.getUrlForApp(currentApp, {
+                  path: window.location.hash,
+                }),
+              },
+            ]
+          : undefined;
+        pluginsStart.visualizations.showNewVisModal({
+          originatingApp: currentApp,
+          originatingPath: window.location.hash,
+          outsideVisualizeApp: currentApp !== VISUALIZE_APP_NAME,
+          breadcrumbs,
+        });
+      },
     };
 
     if (dependencies.dashboard) {
