From 577b3ec1f3cc7f2f4b521ff31a1680af0b129d36 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 15 Aug 2024 15:17:17 -0700
Subject: [PATCH] Allow `screenTitle` to be present when SearchBar is not in
 Application 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>
---
 changelogs/fragments/7721.yml                 |  2 ++
 .../public/top_nav_menu/_index.scss           |  6 +++++
 .../public/top_nav_menu/top_nav_menu.tsx      | 26 +++++++++++++------
 3 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 changelogs/fragments/7721.yml

diff --git a/changelogs/fragments/7721.yml b/changelogs/fragments/7721.yml
new file mode 100644
index 000000000000..1963c6ea4755
--- /dev/null
+++ 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))
\ No newline at end of file
diff --git a/src/plugins/navigation/public/top_nav_menu/_index.scss b/src/plugins/navigation/public/top_nav_menu/_index.scss
index a4de5f473fb0..556b58ff6454 100644
--- 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
index e8e3489fe285..4abf5a4cd8bc 100644
--- 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