Add Application Page Header for Visualize Pages

changelogs/fragments/7712.yml

@@ -0,0 +1,2 @@
+feat:
+- Add New Page Header to Visualize ([#7712](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7712))

src/plugins/dashboard/public/application/components/dashboard_listing/dashboard_listing.tsx

@@ -34,13 +34,17 @@
       dashboardProviders,
       data: { query },
       osdUrlStateStorage,
+      navigation,
     },
   } = useOpenSearchDashboards<DashboardServices>();
 
   const location = useLocation();
   const queryParameters = useMemo(() => new URLSearchParams(location.search), [location]);
   const initialFiltersFromURL = queryParameters.get('filter');
   const [initialFilter, setInitialFilter] = useState<string | null>(initialFiltersFromURL);
+  const showUpdatedUx = uiSettings?.get('home:useNewHomePage');
+  const { HeaderControl } = navigation.ui;
+  const { setAppRightControls } = application;
 
   useEffect(() => {
     // syncs `_g` portion of url with query services
@@ -201,31 +205,40 @@
     );
   });
 
+  const createButton = <CreateButton dashboardProviders={dashboardProviders()} />;
+
   return (
-    <TableListView
-      headingId="dashboardListingHeading"
-      createItem={hideWriteControls ? undefined : createItem}
-      createButton={
-        hideWriteControls ? undefined : <CreateButton dashboardProviders={dashboardProviders()} />
-      }
-      findItems={find}
-      deleteItems={hideWriteControls ? undefined : deleteItems}
-      editItem={hideWriteControls ? undefined : editItem}
-      tableColumns={tableColumns}
-      listingLimit={listingLimit}
-      initialFilter={initialFilter ?? ''}
-      initialPageSize={initialPageSize}
-      noItemsFragment={noItemsFragment}
-      entityName={i18n.translate('dashboard.listing.table.entityName', {
-        defaultMessage: 'dashboard',
-      })}
-      entityNamePlural={i18n.translate('dashboard.listing.table.entityNamePlural', {
-        defaultMessage: 'dashboards',
-      })}
-      tableListTitle={i18n.translate('dashboard.listing.dashboardsTitle', {
-        defaultMessage: 'Dashboards',
-      })}
-      toastNotifications={notifications.toasts}
-    />
+    <>
+      {showUpdatedUx && !hideWriteControls && (
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[{ renderComponent: createButton }]}
+        />
+      )}
+      <TableListView
+        headingId="dashboardListingHeading"
+        createItem={hideWriteControls ? undefined : createItem}
+        createButton={hideWriteControls ? undefined : createButton}
+        findItems={find}
+        deleteItems={hideWriteControls ? undefined : deleteItems}
+        editItem={hideWriteControls ? undefined : editItem}
+        tableColumns={tableColumns}
+        listingLimit={listingLimit}
+        initialFilter={initialFilter ?? ''}
+        initialPageSize={initialPageSize}
+        noItemsFragment={noItemsFragment}
+        entityName={i18n.translate('dashboard.listing.table.entityName', {
+          defaultMessage: 'dashboard',
+        })}
+        entityNamePlural={i18n.translate('dashboard.listing.table.entityNamePlural', {
+          defaultMessage: 'dashboards',
+        })}
+        tableListTitle={i18n.translate('dashboard.listing.dashboardsTitle', {
+          defaultMessage: 'Dashboards',
+        })}
+        toastNotifications={notifications.toasts}
+        showUpdatedUx={showUpdatedUx}
+      />
+    </>
   );
 };

src/plugins/data_explorer/public/components/app_container.tsx

@@ -31,6 +31,7 @@ export const AppContainer = React.memo(
     const opensearchDashboards = useOpenSearchDashboards<IDataPluginServices>();
     const { uiSettings } = opensearchDashboards.services;
     const isEnhancementsEnabled = uiSettings?.get(QUERY_ENHANCEMENT_ENABLED_SETTING);
+    const showActionsInGroup = uiSettings?.get('home:useNewHomePage');
 
     const topLinkRef = useRef<HTMLDivElement>(null);
     const datePickerRef = useRef<HTMLDivElement>(null);
@@ -47,21 +48,22 @@ export const AppContainer = React.memo(
       topLinkRef,
       datePickerRef,
     };
-
     // Render the application DOM.
     return (
       <div className="mainPage">
         {isEnhancementsEnabled && (
           <EuiFlexGroup
             direction="row"
-            className="mainPage navBar"
+            className={`mainPage ${showActionsInGroup ? '' : 'navBar'}"`}
             gutterSize="none"
             alignItems="center"
             justifyContent="spaceBetween"
           >
-            <EuiFlexItem grow={false}>
-              <div ref={topLinkRef} />
-            </EuiFlexItem>
+            {!showActionsInGroup && (
+              <EuiFlexItem grow={false}>
+                <div ref={topLinkRef} />
+              </EuiFlexItem>
+            )}
             <EuiFlexItem grow={false}>
               <div ref={datePickerRef} />
             </EuiFlexItem>

src/plugins/discover/public/application/view_components/canvas/top_nav.tsx

@@ -126,6 +126,7 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
     <>
       {isEnhancementsEnabled &&
         !!opts?.optionalRef?.topLinkRef?.current &&
+        !showActionsInGroup &&
         createPortal(
           <EuiFlexGroup gutterSize="m">
             {topNavLinks.map((topNavLink) => (
@@ -145,7 +146,6 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
           opts.optionalRef.topLinkRef.current
         )}
       <TopNavMenu
-        className={isEnhancementsEnabled ? 'topNav hidden' : ''}
         appName={PLUGIN_ID}
         config={topNavLinks}
         showSearchBar={TopNavMenuItemRenderType.IN_PLACE}

src/plugins/opensearch_dashboards_react/public/table_list_view/table_list_view.tsx

@@ -84,6 +84,7 @@ export interface TableListViewProps {
   headingId?: string;
   restrictWidth?: boolean;
   paddingSize?: EuiPageProps['paddingSize'];
+  showUpdatedUx?: boolean;
 }
 
 export interface TableListViewState {
@@ -525,15 +526,17 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
       <div>
         {this.state.showDeleteModal && this.renderConfirmDeleteModal()}
 
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
-          <EuiFlexItem grow={false}>
-            <EuiText size="s">
-              <h1 id={this.props.headingId}>{this.props.tableListTitle}</h1>
-            </EuiText>
-          </EuiFlexItem>
-
-          {this.props.createButton || defaultCreateButton}
-        </EuiFlexGroup>
+        {!this.props.showUpdatedUx && (
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd" data-test-subj="top-nav">
+            <EuiFlexItem grow={false}>
+              <EuiText size="s">
+                <h1 id={this.props.headingId}>{this.props.tableListTitle}</h1>
+              </EuiText>
+            </EuiFlexItem>
+
+            {this.props.createButton || defaultCreateButton}
+          </EuiFlexGroup>
+        )}
 
         <EuiSpacer size="m" />
 

src/plugins/vis_builder/public/application/app.tsx

@@ -15,6 +15,7 @@
 import { useOpenSearchDashboards } from '../../../opensearch_dashboards_react/public';
 import { VisBuilderServices } from '../types';
 import { syncQueryStateWithUrl } from '../../../data/public';
+import { HeaderVariant } from '../../../../core/public/index';
 
 import './app.scss';
 
@@ -23,9 +24,21 @@
     services: {
       data: { query },
       osdUrlStateStorage,
+      chrome,
+      uiSettings,
     },
   } = useOpenSearchDashboards<VisBuilderServices>();
   const { pathname } = useLocation();
+  const { setHeaderVariant } = chrome;
+  const showActionsInGroup = uiSettings.get('home:useNewHomePage');
+
+  useEffect(() => {
+    if (showActionsInGroup) setHeaderVariant?.(HeaderVariant.APPLICATION);
+
+    return () => {
+      setHeaderVariant?.();
+    };
+  }, [setHeaderVariant, showActionsInGroup]);
 
   useEffect(() => {
     // syncs `_g` portion of url with query services

src/plugins/vis_builder/public/application/components/top_nav.tsx

@@ -8,7 +8,7 @@
 import { useParams } from 'react-router-dom';
 import { useUnmount } from 'react-use';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { getTopNavConfig } from '../utils/get_top_nav_config';
+import { getLegacyTopNavConfig, getNavActions, getTopNavConfig } from '../utils/get_top_nav_config';
 import { VisBuilderServices } from '../../types';
 
 import './top_nav.scss';
@@ -18,7 +18,7 @@
 import { setEditorState } from '../utils/state_management/metadata_slice';
 import { useCanSave } from '../utils/use/use_can_save';
 import { saveStateToSavedObject } from '../../saved_visualizations/transforms';
-import { TopNavMenuData } from '../../../../navigation/public';
+import { TopNavMenuData, TopNavMenuItemRenderType } from '../../../../navigation/public';
 import { opensearchFilters, connectStorageToQueryState } from '../../../../data/public';
 import { RootState } from '../../../../data_explorer/public';
 
@@ -41,11 +41,13 @@
     navigation: {
       ui: { TopNavMenu },
     },
+    uiSettings,
     appName,
     capabilities,
   } = services;
   const rootState = useTypedSelector((state: RootState) => state);
   const dispatch = useTypedDispatch();
+  const showActionsInGroup = uiSettings.get('home:useNewHomePage');
 
   useDeepEffect(() => {
     dispatch(setEditorState({ state: 'dirty' }));
@@ -67,7 +69,7 @@
     const getConfig = () => {
       if (!savedVisBuilderVis || !indexPattern) return;
 
-      return getTopNavConfig(
+      const navActions = getNavActions(
         {
           visualizationIdFromUrl,
           savedVisBuilderVis: saveStateToSavedObject(savedVisBuilderVis, rootState, indexPattern),
@@ -77,6 +79,38 @@
         },
         services
       );
+
+      return showActionsInGroup
+        ? getTopNavConfig(
+            {
+              visualizationIdFromUrl,
+              savedVisBuilderVis: saveStateToSavedObject(
+                savedVisBuilderVis,
+                rootState,
+                indexPattern
+              ),
+              saveDisabledReason,
+              dispatch,
+              originatingApp,
+            },
+            services,
+            navActions
+          )
+        : getLegacyTopNavConfig(
+            {
+              visualizationIdFromUrl,
+              savedVisBuilderVis: saveStateToSavedObject(
+                savedVisBuilderVis,
+                rootState,
+                indexPattern
+              ),
+              saveDisabledReason,
+              dispatch,
+              originatingApp,
+            },
+            services,
+            navActions
+          );
     };
 
     setConfig(getConfig());
@@ -89,6 +123,7 @@
     dispatch,
     indexPattern,
     originatingApp,
+    showActionsInGroup,
   ]);
 
   // reset validity before component destroyed
@@ -109,11 +144,15 @@
         setMenuMountPoint={setHeaderActionMenu}
         indexPatterns={indexPattern ? [indexPattern] : []}
         showDatePicker={!!indexPattern?.timeFieldName ?? true}
-        showSearchBar
+        showSearchBar={TopNavMenuItemRenderType.IN_PORTAL}
         showSaveQuery={showSaveQuery}
         useDefaultBehaviors
         savedQueryId={rootState.visualization.savedQuery}
         onSavedQueryIdChange={updateSavedQueryId}
+        groupActions={showActionsInGroup}
+        screenTitle={
+          savedVisBuilderVis?.title.length ? savedVisBuilderVis?.title : 'New visualization'
+        }
       />
     </div>
   );