From d47d49c981b3d40e278092c1bce7bc42dbc5e160 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Tue, 24 Sep 2024 17:03:50 -0700
Subject: [PATCH 1/9] [Page Headder]Add responsiveness for application header
 (#8292)

---
 src/core/public/chrome/ui/header/header.scss  |  2 +-
 .../ui/filter_bar/_global_filter_group.scss   | 17 ++++++++++++--
 .../__snapshots__/top_nav_menu.test.tsx.snap  |  2 ++
 .../public/top_nav_menu/top_nav_menu.tsx      | 23 +++++++++++++++----
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index c57a0183164..ed4608a605c 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -112,7 +112,7 @@
 }
 
 /* Control flex items to wrap when the viewport is less than the medium size */
-@media (max-width: 768px) {
+@include euiBreakpoint("s", "xs") {
   .secondaryPageHeaderFlexGroup {
     display: flex;
     flex-direction: column;
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index 3a7fe796def..2f347b6e299 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -12,8 +12,21 @@
   }
 }
 
-.globalDatePicker {
-  text-align: right;
+@include euiBreakpoint("m", "l", "xl", "xxl") {
+  .globalDatePicker {
+    text-align: right;
+  }
+}
+
+@include euiBreakpoint("s", "xs") {
+  .headerAppActionMenu {
+    .osdTopNavMenuScreenTitle,
+    .osdTopNavMenu,
+    .osdTopNavSearchBar,
+    .globalDatePicker {
+      margin-bottom: 0 !important;
+    }
+  }
 }
 
 .headerAppActionMenu .globalQueryBar,
diff --git a/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap b/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
index 1825c19d2d3..68f21dfb5b5 100644
--- a/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
+++ b/src/plugins/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`TopNavMenu mounts the data source menu as well as top nav menu 1`] = `
     className="osdTopNavMenu"
     data-test-subj="top-nav"
     gutterSize="xs"
+    popoverBreakpoints="none"
   >
     <TopNavMenuItem
       disableButton={false}
@@ -74,6 +75,7 @@ exports[`TopNavMenu mounts the data source menu if showDataSourceMenu is true 1`
     className="osdTopNavMenu"
     data-test-subj="top-nav"
     gutterSize="xs"
+    popoverBreakpoints="none"
   >
     <Component
       componentConfig={
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 7eb32c2a4a6..b2662c29a28 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
@@ -137,7 +137,12 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
     const menuClassName = classNames(className, { osdTopNavMenuSpread: spreadSections });
 
     return (
-      <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" className={menuClassName}>
+      <EuiHeaderLinks
+        data-test-subj="top-nav"
+        gutterSize="xs"
+        className={menuClassName}
+        popoverBreakpoints={'none'}
+      >
         {renderItems()}
         {renderDataSourceMenu()}
       </EuiHeaderLinks>
@@ -179,8 +184,12 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
-                    <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
-                    <EuiFlexItem>{renderSearchBar({ isFilterBarPortable: true })}</EuiFlexItem>
+                    <EuiFlexItem grow={false} className="osdTopNavMenu">
+                      {renderMenu(menuClassName)}
+                    </EuiFlexItem>
+                    <EuiFlexItem className="osdTopNavSearchBar">
+                      {renderSearchBar({ isFilterBarPortable: true })}
+                    </EuiFlexItem>
                   </EuiFlexGroup>
                 </MountPointPortal>
               </>
@@ -194,7 +203,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                   <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                     <EuiText size="s">{screenTitle}</EuiText>
                   </EuiFlexItem>
-                  <EuiFlexItem>{renderMenu(menuClassName, true)}</EuiFlexItem>
+                  <EuiFlexItem className="osdTopNavMenu">
+                    {renderMenu(menuClassName, true)}
+                  </EuiFlexItem>
                 </EuiFlexGroup>
               </MountPointPortal>
             ) : (
@@ -212,7 +223,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
                       <EuiText size="s">{screenTitle}</EuiText>
                     </EuiFlexItem>
-                    <EuiFlexItem grow={false}>{renderMenu(menuClassName)}</EuiFlexItem>
+                    <EuiFlexItem grow={false} className="osdTopNavMenu">
+                      {renderMenu(menuClassName)}
+                    </EuiFlexItem>
                     <EuiFlexItem className="globalDatePicker">
                       <div ref={datePickerRef} />
                     </EuiFlexItem>

From d3b776dcd58cf7899097678e50339b4fe6782d63 Mon Sep 17 00:00:00 2001
From: Viraj Sanghvi <virajs@amazon.com>
Date: Tue, 24 Sep 2024 20:21:13 -0700
Subject: [PATCH 2/9] fix: update osd to respect new oui breakpoints (#8320)

* fix: update osd to respect new oui breakpoints

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>

* Changeset file for PR #8320 created/updated

---------

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8320.yml                        |  2 ++
 .../__snapshots__/collapsible_nav.test.tsx.snap      | 12 ++++++++++++
 .../ui/header/__snapshots__/header.test.tsx.snap     | 12 ++++++++++++
 src/core/public/chrome/ui/header/collapsible_nav.tsx |  2 +-
 src/core/public/chrome/ui/header/header.tsx          |  4 ++--
 .../data/public/ui/query_editor/_query_editor.scss   |  2 +-
 .../public/ui/query_string_input/_query_bar.scss     |  2 +-
 .../application/components/_solutions_section.scss   |  2 +-
 .../public/components/_overview.scss                 | 12 ++++++------
 src/plugins/vis_default_editor/public/_default.scss  |  2 +-
 src/plugins/vis_default_editor/public/_sidebar.scss  |  2 +-
 11 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 changelogs/fragments/8320.yml

diff --git a/changelogs/fragments/8320.yml b/changelogs/fragments/8320.yml
new file mode 100644
index 00000000000..7d9ed1c7e62
--- /dev/null
+++ b/changelogs/fragments/8320.yml
@@ -0,0 +1,2 @@
+fix:
+- Update osd to respect new oui breakpoints ([#8320](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8320))
\ No newline at end of file
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 23433a8514e..1108d8184df 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -1860,6 +1860,8 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                 Array [
                   "l",
                   "xl",
+                  "xxl",
+                  "xxxl",
                 ]
               }
             >
@@ -3065,6 +3067,8 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                 Array [
                   "l",
                   "xl",
+                  "xxl",
+                  "xxxl",
                 ]
               }
             >
@@ -4182,6 +4186,8 @@ exports[`CollapsibleNav with custom branding renders the nav bar in dark mode 1`
                 Array [
                   "l",
                   "xl",
+                  "xxl",
+                  "xxxl",
                 ]
               }
             >
@@ -5298,6 +5304,8 @@ exports[`CollapsibleNav with custom branding renders the nav bar in default mode
                 Array [
                   "l",
                   "xl",
+                  "xxl",
+                  "xxxl",
                 ]
               }
             >
@@ -6407,6 +6415,8 @@ exports[`CollapsibleNav without custom branding renders the nav bar in dark mode
                 Array [
                   "l",
                   "xl",
+                  "xxl",
+                  "xxxl",
                 ]
               }
             >
@@ -7512,6 +7522,8 @@ exports[`CollapsibleNav without custom branding renders the nav bar in default m
                 Array [
                   "l",
                   "xl",
+                  "xxl",
+                  "xxxl",
                 ]
               }
             >
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 2d6e0decd1d..a500b1f1ff8 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -3431,6 +3431,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                       "m",
                       "l",
                       "xl",
+                      "xxl",
+                      "xxxl",
                     ]
                   }
                 >
@@ -3571,6 +3573,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                       "m",
                       "l",
                       "xl",
+                      "xxl",
+                      "xxxl",
                     ]
                   }
                 >
@@ -4184,6 +4188,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                         "m",
                         "l",
                         "xl",
+                        "xxl",
+                        "xxxl",
                       ]
                     }
                   >
@@ -4336,6 +4342,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                         "m",
                         "l",
                         "xl",
+                        "xxl",
+                        "xxxl",
                       ]
                     }
                   />
@@ -8680,6 +8688,8 @@ exports[`Header handles visibility and lock changes 1`] = `
                     Array [
                       "l",
                       "xl",
+                      "xxl",
+                      "xxxl",
                     ]
                   }
                 >
@@ -27695,6 +27705,8 @@ exports[`Header toggles primary navigation menu when clicked 1`] = `
                     Array [
                       "l",
                       "xl",
+                      "xxl",
+                      "xxxl",
                     ]
                   }
                 >
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx
index 9c9223aa501..43f1eb33dfd 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx
@@ -282,7 +282,7 @@ export function CollapsibleNav({
         ))}
 
         {/* Docking button only for larger screens that can support it*/}
-        <EuiShowFor sizes={['l', 'xl']}>
+        <EuiShowFor sizes={['l', 'xl', 'xxl', 'xxxl']}>
           <EuiCollapsibleNavGroup>
             <EuiListGroup flush>
               <EuiListGroupItem
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index bdfa8d8ec30..ef9e320e43d 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -197,7 +197,7 @@ export function Header({
         },
         {
           items: [
-            <EuiShowFor sizes={['m', 'l', 'xl']}>
+            <EuiShowFor sizes={['m', 'l', 'xl', 'xxl', 'xxxl']}>
               <HeaderNavControls navControls$={observables.navControlsExpandedCenter$} />
             </EuiShowFor>,
           ],
@@ -205,7 +205,7 @@ export function Header({
         },
         {
           items: [
-            <EuiHideFor sizes={['m', 'l', 'xl']}>
+            <EuiHideFor sizes={['m', 'l', 'xl', 'xxl', 'xxxl']}>
               <HeaderNavControls navControls$={observables.navControlsExpandedCenter$} />
             </EuiHideFor>,
             <HeaderNavControls navControls$={observables.navControlsExpandedRight$} />,
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index e9655d245fd..88bb5e0d70e 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -122,7 +122,7 @@
 }
 
 // IE specific fix for the datepicker to not collapse
-@include euiBreakpoint("m", "l", "xl") {
+@include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
   .osdQueryEditor__datePickerWrapper {
     max-width: 40vw;
     flex-grow: 0 !important;
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index f9849063f07..134120d90f6 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -72,7 +72,7 @@
 }
 
 // IE specific fix for the datepicker to not collapse
-@include euiBreakpoint("m", "l", "xl") {
+@include euiBreakpoint("m", "l", "xl", "xxl", "xxl") {
   .osdQueryBar__datePickerWrapper {
     max-width: 40vw;
     flex-grow: 0 !important;
diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss
index b6d74387547..e70aa85e2b4 100644
--- a/src/plugins/home/public/application/components/_solutions_section.scss
+++ b/src/plugins/home/public/application/components/_solutions_section.scss
@@ -45,7 +45,7 @@
     max-width: calc(75% - #{$euiSizeM * 2});
   }
 
-  @include euiBreakpoint("xl") {
+  @include euiBreakpoint("xl", "xxl", "xxxl") {
     max-width: calc(50% - #{$euiSizeM * 2});
   }
 }
diff --git a/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss b/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss
index 3720cdd6c9a..5071d2dcff1 100644
--- a/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss
+++ b/src/plugins/opensearch_dashboards_overview/public/components/_overview.scss
@@ -56,13 +56,13 @@
 
 .osdOverviewApps__item {
   .osdOverviewApps__group--primary & {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxl") {
       max-width: calc(50% - #{$euiSizeM * 2});
     }
   }
 
   .osdOverviewApps__group--secondary & {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
       max-width: calc(25% - #{$euiSizeM * 2});
     }
   }
@@ -86,7 +86,7 @@
 }
 
 .osdOverviewMore__item {
-  @include euiBreakpoint("m", "l", "xl") {
+  @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
     max-width: calc(33.3333% - #{$euiSizeM * 2});
   }
 }
@@ -101,13 +101,13 @@
 
 .osdOverviewSupplements--noNews .osdOverviewMore {
   h2 {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
       text-align: center;
     }
   }
 
   .osdOverviewMore__content {
-    @include euiBreakpoint("m", "l", "xl") {
+    @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
       justify-content: center;
     }
   }
@@ -129,7 +129,7 @@
 }
 
 .osdOverviewDataManage__item:not(:only-child) {
-  @include euiBreakpoint("m", "l", "xl") {
+  @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
     flex: 0 0 calc(50% - #{$euiSizeM * 2});
   }
 }
diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss
index 7b563b90716..fa8e08abb16 100644
--- a/src/plugins/vis_default_editor/public/_default.scss
+++ b/src/plugins/vis_default_editor/public/_default.scss
@@ -22,7 +22,7 @@
     width: 100% !important;
   }
 
-  @include euiBreakpoint("l", "xl") {
+  @include euiBreakpoint("l", "xl", "xxl", "xxxl") {
     max-width: 75%;
   }
 }
diff --git a/src/plugins/vis_default_editor/public/_sidebar.scss b/src/plugins/vis_default_editor/public/_sidebar.scss
index 3a663410891..dbaa6c7121a 100644
--- a/src/plugins/vis_default_editor/public/_sidebar.scss
+++ b/src/plugins/vis_default_editor/public/_sidebar.scss
@@ -33,7 +33,7 @@
     flex-grow: 0;
   }
 
-  @include euiBreakpoint("l", "xl") {
+  @include euiBreakpoint("l", "xl", "xxl", "xxxl") {
     @include flex-parent(1, 1, 1px);
     @include euiScrollBar;
 

From 7ab0980ab76566249b4f1b1f13c353ff1e601895 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Wed, 25 Sep 2024 12:32:53 -0700
Subject: [PATCH 3/9] Change page title of application headers to h1 and xs
 (#8227)

* Change page title of application headers to h1 and xs

Signed-off-by: Miki <miki@amazon.com>

* Changeset file for PR #8227 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/8227.yml                      |  2 ++
 .../navigation/public/top_nav_menu/_index.scss     |  2 +-
 .../public/top_nav_menu/top_nav_menu.tsx           | 14 ++++++++++----
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 changelogs/fragments/8227.yml

diff --git a/changelogs/fragments/8227.yml b/changelogs/fragments/8227.yml
new file mode 100644
index 00000000000..a2647634e9f
--- /dev/null
+++ b/changelogs/fragments/8227.yml
@@ -0,0 +1,2 @@
+feat:
+- Adjust semantics and sizing of page titles in application headers ([#8227](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8227))
\ 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 8df868a7c27..da71d3047d0 100644
--- a/src/plugins/navigation/public/top_nav_menu/_index.scss
+++ b/src/plugins/navigation/public/top_nav_menu/_index.scss
@@ -67,7 +67,7 @@
 
 .osdTopNavMenuScreenTitle {
   // stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
-  .euiText {
+  .euiTitle {
     line-height: $euiFormControlCompressedHeight;
     white-space: nowrap;
     overflow: hidden;
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 b2662c29a28..6227d775d3c 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
@@ -28,7 +28,7 @@
  * under the License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiHeaderLinks, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiHeaderLinks, EuiText, EuiTitle } from '@elastic/eui';
 import classNames from 'classnames';
 import React, { ReactElement, useRef } from 'react';
 
@@ -182,7 +182,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
                   <EuiFlexGroup alignItems="stretch" gutterSize="none">
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
-                      <EuiText size="s">{screenTitle}</EuiText>
+                      <EuiTitle size="xs">
+                        <h1>{screenTitle}</h1>
+                      </EuiTitle>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false} className="osdTopNavMenu">
                       {renderMenu(menuClassName)}
@@ -201,7 +203,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
               <MountPointPortal setMountPoint={setMenuMountPoint}>
                 <EuiFlexGroup alignItems="stretch" gutterSize="none">
                   <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
-                    <EuiText size="s">{screenTitle}</EuiText>
+                    <EuiTitle size="xs">
+                      <h1>{screenTitle}</h1>
+                    </EuiTitle>
                   </EuiFlexItem>
                   <EuiFlexItem className="osdTopNavMenu">
                     {renderMenu(menuClassName, true)}
@@ -221,7 +225,9 @@ export function TopNavMenu(props: TopNavMenuProps): ReactElement | null {
                 <MountPointPortal setMountPoint={setMenuMountPoint}>
                   <EuiFlexGroup alignItems="stretch" gutterSize="none">
                     <EuiFlexItem grow={false} className="osdTopNavMenuScreenTitle">
-                      <EuiText size="s">{screenTitle}</EuiText>
+                      <EuiTitle size="xs">
+                        <h1>{screenTitle}</h1>
+                      </EuiTitle>
                     </EuiFlexItem>
                     <EuiFlexItem grow={false} className="osdTopNavMenu">
                       {renderMenu(menuClassName)}

From 8d455306ebdcb21ba8e4d2be49008289ee9a7c61 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 25 Sep 2024 13:17:25 -0700
Subject: [PATCH 4/9] Update data explorer ui to use compressed components
 (#8222)

* update discover ui to use compressed components

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* revert query editor changes

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* Changeset file for PR #8222 created/updated

* update overflow prop for query editor

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update language selector snapshots

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8222.yml                 |   2 +
 .../data_selector_refresher.tsx               |  48 +++--
 .../datasource_selectable.tsx                 |   8 +-
 .../ui/dataset_selector/dataset_selector.tsx  |  10 +-
 .../language_selector.test.tsx.snap           | 166 ++++++++++--------
 .../public/ui/query_editor/_query_editor.scss |  27 +--
 .../public/ui/query_editor/editors/shared.tsx |   4 +-
 .../ui/query_editor/language_selector.tsx     |  16 +-
 .../ui/query_string_input/_query_bar.scss     |   4 +
 .../sidebar/discover_field_search.tsx         |  39 ++--
 .../components/sidebar/discover_sidebar.scss  |   5 +
 11 files changed, 159 insertions(+), 170 deletions(-)
 create mode 100644 changelogs/fragments/8222.yml

diff --git a/changelogs/fragments/8222.yml b/changelogs/fragments/8222.yml
new file mode 100644
index 00000000000..e617e598355
--- /dev/null
+++ b/changelogs/fragments/8222.yml
@@ -0,0 +1,2 @@
+fix:
+- Update data explorer ui to use compressed components ([#8222](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8222))
\ No newline at end of file
diff --git a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
index bab5f152458..e066d65bd8a 100644
--- a/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
+++ b/src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx
@@ -3,15 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import { EuiButtonIconProps, EuiSmallButtonIcon, EuiToolTip, EuiToolTipProps } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import {
-  EuiSmallButtonIcon,
-  EuiButtonIconProps,
-  EuiText,
-  EuiToolTip,
-  EuiToolTipProps,
-} from '@elastic/eui';
+import React from 'react';
 
 interface IDataSelectorRefresherProps {
   tooltipText: string;
@@ -23,26 +17,24 @@ interface IDataSelectorRefresherProps {
 export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = React.memo(
   ({ tooltipText, onRefresh, buttonProps, toolTipProps }) => {
     return (
-      <EuiText size="s" className="sourceRefreshText">
-        <EuiToolTip
-          position="right"
-          content={i18n.translate('data.datasource.selector.refreshDataSources', {
-            defaultMessage: tooltipText,
-          })}
-          display="block"
-          data-test-subj="sourceRefreshButtonToolTip"
-          {...toolTipProps}
-        >
-          <EuiSmallButtonIcon
-            onClick={onRefresh}
-            iconType="refresh"
-            aria-label="sourceRefresh"
-            className="sourceRefreshButton"
-            data-test-subj="sourceRefreshButton"
-            {...buttonProps}
-          />
-        </EuiToolTip>
-      </EuiText>
+      <EuiToolTip
+        position="right"
+        content={i18n.translate('data.datasource.selector.refreshDataSources', {
+          defaultMessage: tooltipText,
+        })}
+        display="block"
+        data-test-subj="sourceRefreshButtonToolTip"
+        {...toolTipProps}
+      >
+        <EuiSmallButtonIcon
+          onClick={onRefresh}
+          iconType="refresh"
+          aria-label="sourceRefresh"
+          className="sourceRefreshButton"
+          data-test-subj="sourceRefreshButton"
+          {...buttonProps}
+        />
+      </EuiToolTip>
     );
   }
 );
diff --git a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
index e826cbe18af..8e59ac91009 100644
--- a/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
+++ b/src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx
@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useCallback, useMemo } from 'react';
 import { EuiCompressedComboBox } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { DataSource, DataSetWithDataSource, IndexPatternOption } from '../datasource';
-import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types';
-import { DataSelectorRefresher } from './data_selector_refresher';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   DATA_SELECTOR_DEFAULT_PLACEHOLDER,
   DATA_SELECTOR_REFRESHER_POPOVER_TEXT,
   DATA_SELECTOR_S3_DATA_SOURCE_GROUP_HINT_LABEL,
 } from '../constants';
+import { DataSetWithDataSource, DataSource, IndexPatternOption } from '../datasource';
+import { DataSelectorRefresher } from './data_selector_refresher';
+import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types';
 
 // Asynchronously retrieves and formats dataset from a given data source.
 const getAndFormatDataSetFromDataSource = async (
diff --git a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
index d442360e4d5..817d0734c4d 100644
--- a/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
+++ b/src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx
@@ -3,23 +3,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiIcon,
   EuiPopover,
   EuiPopoverFooter,
   EuiSelectable,
   EuiSelectableOption,
+  EuiSmallButtonEmpty,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toMountPoint } from '../../../../opensearch_dashboards_react/public';
 import { Dataset, DEFAULT_DATA } from '../../../common';
+import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
-import { getQueryService } from '../../services';
 
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
@@ -133,7 +133,7 @@ export const DatasetSelector = ({
     <EuiPopover
       button={
         <EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
@@ -141,7 +141,7 @@ export const DatasetSelector = ({
           >
             <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
             {datasetTitle}
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiToolTip>
       }
       isOpen={isOpen}
diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
index fd8aa75f734..a677567d113 100644
--- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
+++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
@@ -492,7 +492,7 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
     <EuiPopover
       anchorPosition="downLeft"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="languageSelector__button"
           iconSide="right"
           iconSize="s"
@@ -500,7 +500,7 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
           onClick={[Function]}
         >
           DQL
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="languageSelector"
       closePopover={[Function]}
@@ -516,57 +516,66 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
         <div
           className="euiPopover__anchor"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="languageSelector__button"
             iconSide="right"
             iconSize="s"
             iconType="arrowDown"
             onClick={[Function]}
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--primary languageSelector__button"
-              disabled={false}
+            <EuiButtonEmpty
+              className="languageSelector__button"
+              iconSide="right"
               iconSize="s"
+              iconType="arrowDown"
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconGap="m"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small languageSelector__button"
+                disabled={false}
+                iconSize="s"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconGap="m"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <span
+                    <EuiIcon
                       className="euiButtonContent__icon"
                       color="inherit"
-                      data-euiicon-type="arrowDown"
                       size="m"
-                    />
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    DQL
+                      type="arrowDown"
+                    >
+                      <span
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowDown"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      DQL
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -1066,7 +1075,7 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
     <EuiPopover
       anchorPosition="downLeft"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="languageSelector__button"
           iconSide="right"
           iconSize="s"
@@ -1074,7 +1083,7 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
           onClick={[Function]}
         >
           Lucene
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="languageSelector"
       closePopover={[Function]}
@@ -1090,57 +1099,66 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
         <div
           className="euiPopover__anchor"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="languageSelector__button"
             iconSide="right"
             iconSize="s"
             iconType="arrowDown"
             onClick={[Function]}
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--primary languageSelector__button"
-              disabled={false}
+            <EuiButtonEmpty
+              className="languageSelector__button"
+              iconSide="right"
               iconSize="s"
+              iconType="arrowDown"
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconGap="m"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small languageSelector__button"
+                disabled={false}
+                iconSize="s"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconGap="m"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <span
+                    <EuiIcon
                       className="euiButtonContent__icon"
                       color="inherit"
-                      data-euiicon-type="arrowDown"
                       size="m"
-                    />
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Lucene
+                      type="arrowDown"
+                    >
+                      <span
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowDown"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Lucene
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index 88bb5e0d70e..14d77f739e8 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -64,26 +64,10 @@
   }
 }
 
-.osdQueryEditor__dataSetWrapper {
-  max-width: 350px;
-
-  .dataExplorerDSSelect {
-    border-bottom: $euiBorderThin !important;
-    min-width: 300px;
-
-    span:is([class$="__text"]) {
-      width: 350px;
-      text-align: left;
-    }
-
-    div:is([class$="--group"]) {
-      padding: 0 !important;
-    }
-
-    .sourceRefreshText {
-      max-height: 40px;
-    }
-  }
+// TODO: ths is a temporary fix to make sure the height is set to auto
+// Can remove this once, height issue is fixed for combo box append in Oui
+.dataExplorerDSSelect .euiFormControlLayout.euiFormControlLayout--group > .euiToolTipAnchor {
+  height: auto;
 }
 
 .osdQueryEditor__prependWrapper {
@@ -159,7 +143,6 @@
 .osdQueryEditor__topBar {
   display: flex;
   align-items: center;
-  padding: $euiSizeXS;
 
   > * {
     flex: 0 1 auto;
@@ -197,7 +180,7 @@
 }
 
 .osdQuerEditor__singleLine {
-  padding: $euiSizeS;
+  padding: calc($euiSizeXS + 1px);
   background-color: $euiColorEmptyShade;
   overflow: initial !important; // needed for suggestion window, otherwise will be hidden in child
 
diff --git a/src/plugins/data/public/ui/query_editor/editors/shared.tsx b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
index 32cb0aa18a5..ab7ad44bbf7 100644
--- a/src/plugins/data/public/ui/query_editor/editors/shared.tsx
+++ b/src/plugins/data/public/ui/query_editor/editors/shared.tsx
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import { EuiCompressedFieldText } from '@elastic/eui';
 import { monaco } from '@osd/monaco';
+import React from 'react';
 import { CodeEditor } from '../../../../../opensearch_dashboards_react/public';
 
 interface SingleLineInputProps extends React.JSX.IntrinsicAttributes {
@@ -62,7 +62,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
   provideCompletionItems,
   prepend,
 }) => (
-  <div className="euiFormControlLayout euiFormControlLayout--group osdQueryBar__wrap">
+  <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdQueryBar__wrap">
     {prepend}
     <div className="osdQuerEditor__singleLine euiFormControlLayout__childrenWrapper">
       <CodeEditor
diff --git a/src/plugins/data/public/ui/query_editor/language_selector.tsx b/src/plugins/data/public/ui/query_editor/language_selector.tsx
index 2cdac637bc0..ed7598fea56 100644
--- a/src/plugins/data/public/ui/query_editor/language_selector.tsx
+++ b/src/plugins/data/public/ui/query_editor/language_selector.tsx
@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
 import {
-  PopoverAnchorPosition,
+  EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiPopover,
-  EuiButtonEmpty,
-  EuiContextMenuItem,
+  EuiSmallButtonEmpty,
+  PopoverAnchorPosition,
 } from '@elastic/eui';
-import { getQueryService } from '../../services';
-import { LanguageConfig } from '../../query';
+import React, { useEffect, useState } from 'react';
 import { Query } from '../..';
+import { LanguageConfig } from '../../query';
+import { getQueryService } from '../../services';
 
 export interface QueryLanguageSelectorProps {
   query: Query;
@@ -109,7 +109,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
     <EuiPopover
       className="languageSelector"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           iconSide="right"
           iconSize="s"
           onClick={onButtonClick}
@@ -117,7 +117,7 @@ export const QueryLanguageSelector = (props: QueryLanguageSelectorProps) => {
           iconType="arrowDown"
         >
           {selectedLanguage.label}
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       isOpen={isPopoverOpen}
       closePopover={() => setPopover(false)}
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index 134120d90f6..45284fbc155 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -16,6 +16,10 @@
   .euiToolTipAnchor {
     height: 100%;
   }
+
+  &.euiFormControlLayout--group.euiFormControlLayout--compressed {
+    overflow: initial;
+  }
 }
 
 // Uses the append style, but no bordering
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
index 2e726eb0e96..3469fd1d34d 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
@@ -28,29 +28,27 @@
  * under the License.
  */
 
-import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
-import { i18n } from '@osd/i18n';
 import {
+  EuiButtonGroup,
   EuiCompressedFieldSearch,
+  EuiCompressedSwitch,
+  EuiFilterGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPopover,
-  EuiPopoverFooter,
-  EuiPopoverTitle,
-  EuiSelect,
-  EuiCompressedSwitch,
-  EuiSwitchEvent,
   EuiForm,
   EuiFormRow,
-  EuiButtonGroup,
   EuiOutsideClickDetector,
   EuiPanel,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiSelect,
   EuiSmallFilterButton,
-  EuiFilterGroup,
-  EuiFieldSearch,
+  EuiSwitchEvent,
 } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
-import { UI_SETTINGS } from 'src/plugins/data/common';
+import React, { OptionHTMLAttributes, ReactNode, useState } from 'react';
 
 export const NUM_FILTERS = 3;
 
@@ -257,19 +255,6 @@ export function DiscoverFieldSearch({
         onChange={(event) => onChange('name', event.currentTarget.value)}
         placeholder={searchPlaceholder}
         value={value}
-      />
-    </EuiOutsideClickDetector>
-  );
-
-  const fieldSearch = (
-    <EuiOutsideClickDetector onOutsideClick={() => {}} isDisabled={!isPopoverOpen}>
-      <EuiFieldSearch
-        aria-label={searchPlaceholder}
-        data-test-subj="fieldFilterSearchInput"
-        fullWidth
-        onChange={(event) => onChange('name', event.currentTarget.value)}
-        placeholder={searchPlaceholder}
-        value={value}
         className="dscSideBar_searchInput"
       />
     </EuiOutsideClickDetector>
@@ -329,8 +314,8 @@ export function DiscoverFieldSearch({
 
   if (isEnhancementsEnabledOverride) {
     return (
-      <div className="euiFormControlLayout euiFormControlLayout--group osdDiscoverSideBar__wrap">
-        {fieldSearch}
+      <div className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group osdDiscoverSideBar__wrap">
+        {compressedFieldSearch}
         {fieldPopover}
       </div>
     );
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
index 201debc9553..aaba1c5a42a 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.scss
@@ -1,3 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 .deSidebar_panel {
   border-left: 0;
 

From ee9785ca234d8c487f135d24a60832132b16a396 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Wed, 25 Sep 2024 16:05:38 -0700
Subject: [PATCH 5/9] [CVE-2024-45801] Bump `dompurify` from 3.0.11 to 3.1.6
 (#8346)

* [CVE-2024-45801] Bump `dompurify` from 3.0.11 to 3.1.6

Signed-off-by: Miki <miki@amazon.com>

* Changeset file for PR #8346 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/8346.yml | 2 ++
 yarn.lock                     | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 changelogs/fragments/8346.yml

diff --git a/changelogs/fragments/8346.yml b/changelogs/fragments/8346.yml
new file mode 100644
index 00000000000..66708de94ea
--- /dev/null
+++ b/changelogs/fragments/8346.yml
@@ -0,0 +1,2 @@
+security:
+- [CVE-2024-45801] Bump `dompurify` from 3.0.11 to 3.1.6 ([#8346](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8346))
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 848a12505dc..c9ddaa2fdac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7263,9 +7263,9 @@ domhandler@^4.0, domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhan
     domelementtype "^2.2.0"
 
 dompurify@^3.0.11:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.11.tgz#c163f5816eaac6aeef35dae2b77fca0504564efe"
-  integrity sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg==
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
+  integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
 
 domutils@1.5.1:
   version "1.5.1"

From 8db6a165f55aeded58e0220680dde3030b1097d1 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Wed, 25 Sep 2024 21:43:20 -0700
Subject: [PATCH 6/9] [Page Headder]Fix reponsiveness for dashboards &
 visualization app headers (#8329)

Signed-off-by: Zhongnan Su <szhongna@amazon.com>
---
 .../data/public/ui/query_editor/query_editor_top_row.tsx  | 2 +-
 .../data/public/ui/query_string_input/_query_bar.scss     | 8 +++++---
 .../public/ui/query_string_input/query_bar_top_row.tsx    | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
index d3c76623c3f..62ba24527cd 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_top_row.tsx
@@ -328,7 +328,7 @@ export default function QueryEditorTopRow(props: QueryEditorTopRowProps) {
         : datePicker}
       {renderQueryEditor()}
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false} gutterSize="none" direction="column">
+        <EuiFlexGroup responsive={false} gutterSize="s" direction="column">
           <EuiFlexItem>{renderSharingMetaFields()}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
diff --git a/src/plugins/data/public/ui/query_string_input/_query_bar.scss b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
index 45284fbc155..3976a12d594 100644
--- a/src/plugins/data/public/ui/query_string_input/_query_bar.scss
+++ b/src/plugins/data/public/ui/query_string_input/_query_bar.scss
@@ -10,9 +10,6 @@
  */
 
 .osdQueryBar__wrap {
-  max-width: 100%;
-  z-index: $euiZContentMenu;
-
   .euiToolTipAnchor {
     height: 100%;
   }
@@ -20,6 +17,11 @@
   &.euiFormControlLayout--group.euiFormControlLayout--compressed {
     overflow: initial;
   }
+
+  @include euiBreakpoint("m", "l", "xl", "xxl", "xxxl") {
+    max-width: 100%;
+    z-index: $euiZContentMenu;
+  }
 }
 
 // Uses the append style, but no bordering
diff --git a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
index a14b044c6ba..14b9ef6d8fd 100644
--- a/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx
@@ -265,7 +265,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
 
     return (
       <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
-        <EuiFlexGroup responsive={false} gutterSize="s" alignItems="flexStart">
+        <EuiFlexGroup responsive={false} gutterSize="s" justifyContent="flexStart">
           {renderDatePicker()}
           <EuiFlexItem grow={false}>{button}</EuiFlexItem>
         </EuiFlexGroup>
@@ -306,7 +306,7 @@ export default function QueryBarTopRow(props: QueryBarTopRowProps) {
     });
 
     return (
-      <EuiFlexItem className={wrapperClasses}>
+      <EuiFlexItem className={wrapperClasses} grow={false}>
         <EuiSuperDatePicker
           start={props.dateRangeFrom}
           end={props.dateRangeTo}

From 1db585dad7aad48a65747c24086f6f388965a42f Mon Sep 17 00:00:00 2001
From: Yulong Ruan <ruanyl@amazon.com>
Date: Thu, 26 Sep 2024 15:40:33 +0800
Subject: [PATCH 7/9] refactor: move the render of query extension control
 buttons to extension component (#8334)

* refactor: move the render of query extension fragments to extension component

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>

* Changeset file for PR #8334 created/updated

* fix failed unit tests

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>

---------

Signed-off-by: Yulong Ruan <ruanyl@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
---
 changelogs/fragments/8334.yml                 |  2 +
 .../public/ui/query_editor/_query_editor.scss |  6 +++
 .../public/ui/query_editor/query_editor.tsx   | 27 ++++---------
 .../query_editor_extension.tsx                |  9 +++++
 .../query_editor_extensions.test.tsx          |  1 +
 .../query_editor_extensions.tsx               | 39 ++++++++++++++-----
 .../components/query_assist_button.tsx        |  2 +-
 7 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 changelogs/fragments/8334.yml

diff --git a/changelogs/fragments/8334.yml b/changelogs/fragments/8334.yml
new file mode 100644
index 00000000000..f2ff968f472
--- /dev/null
+++ b/changelogs/fragments/8334.yml
@@ -0,0 +1,2 @@
+refactor:
+- Move the render of query extension control buttons to extension component ([#8334](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8334))
\ No newline at end of file
diff --git a/src/plugins/data/public/ui/query_editor/_query_editor.scss b/src/plugins/data/public/ui/query_editor/_query_editor.scss
index 14d77f739e8..79a453d7b21 100644
--- a/src/plugins/data/public/ui/query_editor/_query_editor.scss
+++ b/src/plugins/data/public/ui/query_editor/_query_editor.scss
@@ -152,6 +152,12 @@
   .osdQueryEditor__querycontrols {
     float: right;
     margin: $euiSizeS $euiSizeS;
+
+    .osdQueryEditor__extensionQueryControls {
+      display: flex;
+      padding: 0 $euiSizeS 0 $euiSizeXS;
+      border-right: $euiBorderThin;
+    }
   }
 
   .osdQueryEditor__dataSetPicker {
diff --git a/src/plugins/data/public/ui/query_editor/query_editor.tsx b/src/plugins/data/public/ui/query_editor/query_editor.tsx
index 6932cec906f..c2d79fb6d47 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor.tsx
@@ -106,6 +106,7 @@ export default class QueryEditorUI extends Component<Props, State> {
   private services = this.props.opensearchDashboards.services;
   private headerRef: RefObject<HTMLDivElement> = createRef();
   private bannerRef: RefObject<HTMLDivElement> = createRef();
+  private queryControlsContainer: RefObject<HTMLDivElement> = createRef();
   private extensionMap = this.languageManager.getQueryEditorExtensionMap();
 
   private getQueryString = () => {
@@ -121,6 +122,7 @@ export default class QueryEditorUI extends Component<Props, State> {
       !(
         this.headerRef.current &&
         this.bannerRef.current &&
+        this.queryControlsContainer.current &&
         this.props.query.language &&
         this.extensionMap &&
         Object.keys(this.extensionMap).length > 0
@@ -137,6 +139,7 @@ export default class QueryEditorUI extends Component<Props, State> {
         configMap={this.extensionMap}
         componentContainer={this.headerRef.current}
         bannerContainer={this.bannerRef.current}
+        queryControlsContainer={this.queryControlsContainer.current}
       />
     );
   }
@@ -336,25 +339,6 @@ export default class QueryEditorUI extends Component<Props, State> {
     return <QueryControls queryControls={queryControls} />;
   };
 
-  private renderExtensionSearchBarButton = () => {
-    if (!this.extensionMap || Object.keys(this.extensionMap).length === 0) return null;
-    const sortedConfigs = Object.values(this.extensionMap).sort((a, b) => a.order - b.order);
-    return (
-      <>
-        {sortedConfigs.map((config) => {
-          return config.getSearchBarButton
-            ? config.getSearchBarButton({
-                language: this.props.query.language,
-                onSelectLanguage: this.onSelectLanguage,
-                isCollapsed: this.state.isCollapsed,
-                setIsCollapsed: this.setIsCollapsed,
-              })
-            : null;
-        })}
-      </>
-    );
-  };
-
   public render() {
     const className = classNames(this.props.className);
 
@@ -471,9 +455,12 @@ export default class QueryEditorUI extends Component<Props, State> {
           {languageSelector}
           <div className="osdQueryEditor__querycontrols">
             <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+              <div
+                ref={this.queryControlsContainer}
+                className="osdQueryEditor__extensionQueryControls"
+              />
               {this.renderQueryControls(languageEditor.TopBar.Controls)}
               {!languageEditor.TopBar.Expanded && this.renderToggleIcon()}
-              {!languageEditor.TopBar.Expanded && this.renderExtensionSearchBarButton()}
               {this.props.savedQueryManagement}
             </EuiFlexGroup>
           </div>
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx
index 7a8fddfe7ee..95af159c785 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx
@@ -14,6 +14,7 @@ interface QueryEditorExtensionProps {
   dependencies: QueryEditorExtensionDependencies;
   componentContainer: Element;
   bannerContainer: Element;
+  queryControlsContainer: Element;
 }
 
 export interface QueryEditorExtensionDependencies {
@@ -97,6 +98,11 @@ export const QueryEditorExtension: React.FC<QueryEditorExtensionProps> = (props)
     props.dependencies,
   ]);
 
+  const queryControlButtons = useMemo(() => props.config.getSearchBarButton?.(props.dependencies), [
+    props.config,
+    props.dependencies,
+  ]);
+
   useEffect(() => {
     isMounted.current = true;
     return () => {
@@ -121,6 +127,9 @@ export const QueryEditorExtension: React.FC<QueryEditorExtensionProps> = (props)
       <QueryEditorExtensionPortal container={props.componentContainer}>
         {component}
       </QueryEditorExtensionPortal>
+      <QueryEditorExtensionPortal container={props.queryControlsContainer}>
+        {queryControlButtons}
+      </QueryEditorExtensionPortal>
     </>
   );
 };
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.test.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.test.tsx
index 37a8afe91e6..ec67a3a52df 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.test.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.test.tsx
@@ -23,6 +23,7 @@ describe('QueryEditorExtensions', () => {
   const defaultProps: QueryEditorExtensionsProps = {
     componentContainer: document.createElement('div'),
     bannerContainer: document.createElement('div'),
+    queryControlsContainer: document.createElement('div'),
     language: 'Test-lang',
     onSelectLanguage: jest.fn(),
     isCollapsed: false,
diff --git a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
index e3de25ac519..90c7fbf5166 100644
--- a/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
+++ b/src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extensions.tsx
@@ -14,10 +14,17 @@ interface QueryEditorExtensionsProps extends QueryEditorExtensionDependencies {
   configMap?: Record<string, QueryEditorExtensionConfig>;
   componentContainer: Element;
   bannerContainer: Element;
+  queryControlsContainer: Element;
 }
 
 const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((props) => {
-  const { configMap, componentContainer, bannerContainer, ...dependencies } = props;
+  const {
+    configMap,
+    componentContainer,
+    bannerContainer,
+    queryControlsContainer,
+    ...dependencies
+  } = props;
 
   const sortedConfigs = useMemo(() => {
     if (!configMap || Object.keys(configMap).length === 0) return [];
@@ -27,14 +34,25 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
   return (
     <>
       {sortedConfigs.map((config) => {
-        const id = `osdQueryEditorExtensionComponent-${config.id}`;
-
-        let container = document.getElementById(id);
-        if (!container) {
-          container = document.createElement('div');
-          container.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
-          container.id = id;
-          componentContainer.appendChild(container);
+        const extensionComponentId = `osdQueryEditorExtensionComponent-${config.id}`;
+        const extensionQueryControlsId = `osdQueryEditorExtensionQueryControls-${config.id}`;
+
+        // Make sure extension components are rendered in order
+        let extensionComponentContainer = document.getElementById(extensionComponentId);
+        if (!extensionComponentContainer) {
+          extensionComponentContainer = document.createElement('div');
+          extensionComponentContainer.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
+          extensionComponentContainer.id = extensionComponentId;
+          componentContainer.appendChild(extensionComponentContainer);
+        }
+
+        // Make sure extension query controls are rendered in order
+        let extensionQueryControlsContainer = document.getElementById(extensionQueryControlsId);
+        if (!extensionQueryControlsContainer) {
+          extensionQueryControlsContainer = document.createElement('div');
+          extensionQueryControlsContainer.className = `osdQueryEditorExtensionQueryControls osdQueryEditorExtensionQueryControls__${config.id}`;
+          extensionQueryControlsContainer.id = extensionQueryControlsId;
+          queryControlsContainer.appendChild(extensionQueryControlsContainer);
         }
 
         return (
@@ -42,8 +60,9 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
             key={config.id}
             config={config}
             dependencies={dependencies}
-            componentContainer={container}
+            componentContainer={extensionComponentContainer}
             bannerContainer={bannerContainer}
+            queryControlsContainer={extensionQueryControlsContainer}
           />
         );
       })}
diff --git a/src/plugins/query_enhancements/public/query_assist/components/query_assist_button.tsx b/src/plugins/query_enhancements/public/query_assist/components/query_assist_button.tsx
index 25a19828844..32c20b3a33c 100644
--- a/src/plugins/query_enhancements/public/query_assist/components/query_assist_button.tsx
+++ b/src/plugins/query_enhancements/public/query_assist/components/query_assist_button.tsx
@@ -32,7 +32,7 @@ export const QueryAssistButton: React.FC<QueryAssistButtonProps> = (props) => {
         iconType={
           !props.dependencies.isCollapsed && !isQueryAssistCollapsed ? expandIcon : collapsedIcon
         }
-        aria-label={i18n.translate('queryEnhancements.queryAssist.button.ariaLable', {
+        aria-label={i18n.translate('queryEnhancements.queryAssist.button.ariaLabel', {
           defaultMessage: `Query Assist Toggle`,
         })}
         onClick={onClick}

From 33f4f64f92b0b69710b5b7f40775f5aec08fa708 Mon Sep 17 00:00:00 2001
From: Suchit Sahoo <38322563+LDrago27@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:00:02 -0700
Subject: [PATCH 8/9] Filter Saved Query by supported language (#8325)

Signed-off-by: Suchit Sahoo <suchsah@amazon.com>
---
 src/plugins/data/public/plugin.ts             |  2 ++
 .../data/public/query/query_service.ts        |  7 +++-
 .../query/saved_query/saved_query_service.ts  | 33 +++++++++++++++----
 src/plugins/data/public/query/types.ts        |  9 ++++-
 4 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
index 4744606a314..7bd0515914d 100644
--- a/src/plugins/data/public/plugin.ts
+++ b/src/plugins/data/public/plugin.ts
@@ -150,6 +150,7 @@ export class DataPublicPlugin
       storage: this.storage,
       sessionStorage: this.sessionStorage,
       defaultSearchInterceptor: searchService.getDefaultSearchInterceptor(),
+      applicaton: core.application,
     });
 
     uiActions.registerAction(
@@ -224,6 +225,7 @@ export class DataPublicPlugin
       savedObjectsClient: savedObjects.client,
       uiSettings,
       indexPatterns,
+      applicaton: core.application,
     });
     setQueryService(query);
 
diff --git a/src/plugins/data/public/query/query_service.ts b/src/plugins/data/public/query/query_service.ts
index 52ca446b03a..f13f8decc9a 100644
--- a/src/plugins/data/public/query/query_service.ts
+++ b/src/plugins/data/public/query/query_service.ts
@@ -97,6 +97,7 @@ export class QueryService {
     storage,
     uiSettings,
     indexPatterns,
+    applicaton,
   }: QueryServiceStartDependencies): IQueryStart {
     this.queryStringManager.getDatasetService().init(indexPatterns);
     return {
@@ -106,7 +107,11 @@ export class QueryService {
       }),
       filterManager: this.filterManager,
       queryString: this.queryStringManager,
-      savedQueries: createSavedQueryService(savedObjectsClient),
+      savedQueries: createSavedQueryService(
+        savedObjectsClient,
+        this.queryStringManager,
+        applicaton
+      ),
       state$: this.state$,
       timefilter: this.timefilter,
       getOpenSearchQuery: (indexPattern: IndexPattern) => {
diff --git a/src/plugins/data/public/query/saved_query/saved_query_service.ts b/src/plugins/data/public/query/saved_query/saved_query_service.ts
index ec4028756a8..8fba257fad2 100644
--- a/src/plugins/data/public/query/saved_query/saved_query_service.ts
+++ b/src/plugins/data/public/query/saved_query/saved_query_service.ts
@@ -29,8 +29,10 @@
  */
 
 import { isObject } from 'lodash';
-import { SavedObjectsClientContract, SavedObjectAttributes } from 'src/core/public';
+import { SavedObjectsClientContract, SavedObjectAttributes, CoreStart } from 'src/core/public';
+import { first } from 'rxjs/operators';
 import { SavedQueryAttributes, SavedQuery, SavedQueryService } from './types';
+import { QueryStringContract } from '../query_string';
 
 type SerializedSavedQueryAttributes = SavedObjectAttributes &
   SavedQueryAttributes & {
@@ -41,7 +43,9 @@ type SerializedSavedQueryAttributes = SavedObjectAttributes &
   };
 
 export const createSavedQueryService = (
-  savedObjectsClient: SavedObjectsClientContract
+  savedObjectsClient: SavedObjectsClientContract,
+  queryStringManager?: QueryStringContract,
+  application?: CoreStart['application']
 ): SavedQueryService => {
   const saveQuery = async (attributes: SavedQueryAttributes, { overwrite = false } = {}) => {
     if (!attributes.title.length) {
@@ -117,12 +121,29 @@ export const createSavedQueryService = (
       page: activePage,
     });
 
+    let queries = response.savedObjects.map(
+      (savedObject: { id: string; attributes: SerializedSavedQueryAttributes }) =>
+        parseSavedQueryObject(savedObject)
+    );
+
+    const currentAppId =
+      (await application?.currentAppId$?.pipe(first()).toPromise()) ?? Promise.resolve(undefined);
+    const languageService = queryStringManager?.getLanguageService();
+
+    // Filtering saved queries based on language supported by cirrent application
+    if (currentAppId && languageService) {
+      queries = queries.filter((query) => {
+        const languageId = query.attributes.query.language;
+        return (
+          languageService?.getLanguage(languageId)?.supportedAppNames?.includes(currentAppId) ??
+          true
+        );
+      });
+    }
+
     return {
       total: response.total,
-      queries: response.savedObjects.map(
-        (savedObject: { id: string; attributes: SerializedSavedQueryAttributes }) =>
-          parseSavedQueryObject(savedObject)
-      ),
+      queries,
     };
   };
 
diff --git a/src/plugins/data/public/query/types.ts b/src/plugins/data/public/query/types.ts
index 1b4a58697a3..bacdc6b9b8e 100644
--- a/src/plugins/data/public/query/types.ts
+++ b/src/plugins/data/public/query/types.ts
@@ -3,7 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { IUiSettingsClient, SavedObjectsClientContract } from 'opensearch-dashboards/public';
+import {
+  ApplicationSetup,
+  ApplicationStart,
+  IUiSettingsClient,
+  SavedObjectsClientContract,
+} from 'opensearch-dashboards/public';
 import { Observable } from 'rxjs';
 import { DataStorage } from '../../common';
 import { IndexPattern, IndexPatternsService } from '../index_patterns';
@@ -38,6 +43,7 @@ export interface QueryServiceSetupDependencies {
   storage: DataStorage;
   sessionStorage: DataStorage;
   defaultSearchInterceptor: ISearchInterceptor;
+  applicaton: ApplicationSetup;
 }
 
 /** @internal */
@@ -46,4 +52,5 @@ export interface QueryServiceStartDependencies {
   storage: DataStorage;
   uiSettings: IUiSettingsClient;
   indexPatterns: IndexPatternsService;
+  applicaton: ApplicationStart;
 }

From d1caa92856e127ecc9bad9b9f64d09c1817da1a7 Mon Sep 17 00:00:00 2001
From: Sayali Gaikawad <61760125+gaiksaya@users.noreply.github.com>
Date: Thu, 26 Sep 2024 12:57:54 -0700
Subject: [PATCH 9/9] Refactor branch deletion workflow for backport branches
 (#8351)

Signed-off-by: Sayali Gaikawad <gaiksaya@amazon.com>
---
 .github/workflows/delete_backport_branch.yml | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/delete_backport_branch.yml b/.github/workflows/delete_backport_branch.yml
index 387a124b8cb..1c73d3d250c 100644
--- a/.github/workflows/delete_backport_branch.yml
+++ b/.github/workflows/delete_backport_branch.yml
@@ -7,9 +7,16 @@ on:
 jobs:
   delete-branch:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     if: startsWith(github.event.pull_request.head.ref,'backport/')
     steps:
-      - name: Delete merged branch
-        uses: SvanBoxel/delete-merged-branch@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - name: Delete merged branch
+      uses: actions/github-script@v7
+      with:
+        script: |
+          github.rest.git.deleteRef({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            ref: `heads/${context.payload.pull_request.head.ref}`,
+          })