Allow screenTitle to be present when SearchBar is not in Applicatio…

…n header (#7721) * Allow `screenTitle` to be present when SearchBar is not Signed-off-by: Miki <miki@amazon.com> * Changeset file for PR #7721 created/updated --------- Signed-off-by: Miki <miki@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 577b3ec) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Aug 15, 2024 · ca4b010 · ca4b010
1 parent b3078c4
commit ca4b010
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/changelogs/fragments/7721.yml b/changelogs/fragments/7721.yml
@@ -0,0 +1,2 @@
+feat:
+- Allow `screenTitle` to be present when SearchBar is not in Application header ([#7721](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7721))
diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -67,3 +67,9 @@
     text-overflow: ellipsis;
   }
 }
+
+// stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+.osdTopNavMenuSpread .euiHeaderLinks__list {
+  width: 100%;
+  justify-content: space-between;
+}
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu.tsx
@@ -128,11 +128,14 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
     );
   }
 
-  function renderMenu(className: string): ReactElement | null {
+  function renderMenu(className: string, spreadSections: boolean = false): ReactElement | null {
     if ((!config || config.length === 0) && (!showDataSourceMenu || !dataSourceMenuConfig))
       return null;
+
+    const menuClassName = classNames(className, { osdTopNavMenuSpread: spreadSections });
+
     return (
-      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={className}>
+      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={menuClassName}>
         {renderItems()}
         {renderDataSourceMenu()}
       </EuiHeaderLinks>
@@ -182,12 +185,19 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
 
           case false:
           case TopNavMenuItemRenderType.OMITTED:
-            return (
-              <>
-                <MountPointPortal setMountPoint={setMenuMountPoint}>
-                  {renderMenu(menuClassName)}
-                </MountPointPortal>
-              </>
+            return screenTitle ? (
+              <MountPointPortal setMountPoint={setMenuMountPoint}>
+                <EuiFlexGroup alignItems="stretch" gutterSize="s">
+                  <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
+                    <EuiText size="s">{screenTitle}</EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem>{renderMenu(menuClassName, true)}</EuiFlexItem>
+                </EuiFlexGroup>
+              </MountPointPortal>
+            ) : (
+              <MountPointPortal setMountPoint={setMenuMountPoint}>
+                {renderMenu(menuClassName)}
+              </MountPointPortal>
             );
 
           // Show the SearchBar in-place