Fix header look and feel changes (#8064) (#8090)

(cherry picked from commit ecd33b0)

Signed-off-by: Suchit Sahoo <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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

@@ -7,6 +7,7 @@ import React, { memo, useState, useEffect } from 'react';
 import { IndexPattern } from 'src/plugins/data/public';
 import { useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
+import { i18n } from '@osd/i18n';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { getTopNavConfig, getTopNavRightConfig, getTopNavLegacyConfig } from './top_nav';
 import { DashboardAppStateContainer, DashboardAppState, DashboardServices } from '../../../types';
@@ -144,7 +145,12 @@ const TopNav = ({
         appName={'dashboard'}
         config={showTopNavMenu ? topNavMenu : undefined}
         className={isFullScreenMode ? 'osdTopNavMenu-isFullScreen' : undefined}
-        screenTitle={currentAppState.title}
+        screenTitle={
+          currentAppState.title ||
+          i18n.translate('discover.savedSearch.newTitle', {
+            defaultMessage: 'New dashboard',
+          })
+        }
         showSearchBar={showSearchBar && TopNavMenuItemRenderType.IN_PORTAL}
         showQueryBar={showQueryBar}
         showQueryInput={showQueryInput}

src/plugins/dashboard/public/application/embeddable/empty/dashboard_empty_screen.scss

@@ -18,5 +18,6 @@
   padding: $euiSizeXXL * 2;
   max-width: 400px;
   margin-left: $euiSizeS;
+  margin-top: $euiSizeS;
   text-align: center;
 }

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

@@ -124,7 +124,7 @@ export const TopNav = ({ opts, showSaveQuery, isEnhancementsEnabled }: TopNavPro
     setScreenTitle(
       savedSearch?.title ||
         i18n.translate('discover.savedSearch.newTitle', {
-          defaultMessage: 'Untitled',
+          defaultMessage: 'New search',
         })
     );
   }, [savedSearch?.title]);

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

@@ -542,7 +542,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
           </EuiFlexGroup>
         )}
 
-        <EuiSpacer size="m" />
+        {!this.props.showUpdatedUx && <EuiSpacer size="m" />}
 
         {this.renderListingLimitWarning()}
         {this.renderFetchError()}

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

@@ -7,6 +7,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { isEqual } from 'lodash';
 import { useParams } from 'react-router-dom';
 import { useUnmount } from 'react-use';
+import { i18n } from '@osd/i18n';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getLegacyTopNavConfig, getNavActions, getTopNavConfig } from '../utils/get_top_nav_config';
 import { VisBuilderServices } from '../../types';
@@ -151,7 +152,10 @@ export const TopNav = () => {
         onSavedQueryIdChange={updateSavedQueryId}
         groupActions={showActionsInGroup}
         screenTitle={
-          savedVisBuilderVis?.title.length ? savedVisBuilderVis?.title : 'New visualization'
+          savedVisBuilderVis?.title ||
+          i18n.translate('discover.savedSearch.newTitle', {
+            defaultMessage: 'New visualization',
+          })
         }
       />
     </div>

src/plugins/visualize/public/application/components/visualize_listing.tsx

@@ -234,6 +234,7 @@ export const VisualizeListing = () => {
         })}
         toastNotifications={toastNotifications}
         showUpdatedUx={showUpdatedUx}
+        paddingSize={showUpdatedUx ? 'm' : 'l'}
       />
     </>
   );

src/plugins/visualize/public/application/components/visualize_top_nav.tsx

@@ -259,7 +259,12 @@ const TopNav = ({
       savedQueryId={currentAppState.savedQuery}
       onSavedQueryIdChange={stateContainer.transitions.updateSavedQuery}
       indexPatterns={indexPatterns}
-      screenTitle={vis.title.length ?? '' ? vis.title : 'New visualization'}
+      screenTitle={
+        vis.title ||
+        i18n.translate('discover.savedSearch.newTitle', {
+          defaultMessage: 'New visualization',
+        })
+      }
       showAutoRefreshOnly={!showDatePicker()}
       showDatePicker={showDatePicker()}
       showFilterBar={showFilterBar}