From b36cc04cd08bea0e713c2284adfaf1c9e443cd68 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Fri, 13 Sep 2024 16:47:01 +0000
Subject: [PATCH] [Page Headder]Add responsiveness for page header

Signed-off-by: Zhongnan Su <szhongna@amazon.com>
---
 .../header/__snapshots__/header.test.tsx.snap | 1464 +++++++++--------
 src/core/public/chrome/ui/header/header.scss  |    8 +
 src/core/public/chrome/ui/header/header.tsx   |   51 +-
 .../create_data_source_menu.tsx               |    2 +-
 4 files changed, 807 insertions(+), 718 deletions(-)

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 f5a8d1ce5f09..6087641cff87 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
@@ -18106,723 +18106,785 @@ exports[`Header renders page header with application title 1`] = `
           <div
             className="euiHeader euiHeader--default euiHeader--static newTopNavHeader"
           >
-            <EuiHeaderSection
-              side="left"
+            <EuiFlexGroup
+              className="secondaryPageHeaderFlexGroup"
+              gutterSize="s"
+              justifyContent="spaceBetween"
             >
               <div
-                className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive secondaryPageHeaderFlexGroup"
               >
-                <EuiHeaderSectionItem
-                  border="none"
-                  data-test-subj="headerApplicationTitle"
+                <EuiHeaderSection
+                  side="left"
                 >
                   <div
-                    className="euiHeaderSectionItem"
-                    data-test-subj="headerApplicationTitle"
+                    className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
                   >
-                    <EuiTitle
-                      className="newTopNavHeaderTitle"
-                      size="l"
+                    <EuiFlexGroup
+                      gutterSize="s"
                     >
-                      <h1
-                        className="euiTitle euiTitle--large newTopNavHeaderTitle"
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        testTitle
-                      </h1>
-                    </EuiTitle>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiHeaderSectionItem
+                              border="none"
+                              data-test-subj="headerApplicationTitle"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                                data-test-subj="headerApplicationTitle"
+                              >
+                                <EuiTitle
+                                  className="newTopNavHeaderTitle"
+                                  size="l"
+                                >
+                                  <h1
+                                    className="euiTitle euiTitle--large newTopNavHeaderTitle"
+                                  >
+                                    testTitle
+                                  </h1>
+                                </EuiTitle>
+                              </div>
+                            </EuiHeaderSectionItem>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderControlsContainer
+                                  controls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": undefined,
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                  data-test-subj="headerBadgeControl"
+                                >
+                                  <div
+                                    className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
+                                    data-test-subj="headerBadgeControl"
+                                  />
+                                </HeaderControlsContainer>
+                              </div>
+                            </EuiHeaderSectionItem>
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderBadge
+                                  badge$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": undefined,
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                />
+                              </div>
+                            </EuiHeaderSectionItem>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderControlsContainer
+                                  controls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": undefined,
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                  data-test-subj="headerLeftControl"
+                                >
+                                  <div
+                                    className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
+                                    data-test-subj="headerLeftControl"
+                                  />
+                                </HeaderControlsContainer>
+                              </div>
+                            </EuiHeaderSectionItem>
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderNavControls
+                                  navControls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": Array [],
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                  side="left"
+                                />
+                              </div>
+                            </EuiHeaderSectionItem>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
                   </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
+                </EuiHeaderSection>
+                <EuiHeaderSection
+                  side="right"
                 >
                   <div
-                    className="euiHeaderSectionItem"
+                    className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--right"
                   >
-                    <HeaderControlsContainer
-                      controls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": undefined,
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                      data-test-subj="headerBadgeControl"
+                    <EuiFlexGroup
+                      gutterSize="s"
                     >
                       <div
-                        className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
-                        data-test-subj="headerBadgeControl"
-                      />
-                    </HeaderControlsContainer>
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderBadge
-                      badge$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": undefined,
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                    />
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderControlsContainer
-                      controls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": undefined,
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                      data-test-subj="headerLeftControl"
-                    >
-                      <div
-                        className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
-                        data-test-subj="headerLeftControl"
-                      />
-                    </HeaderControlsContainer>
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderNavControls
-                      navControls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": Array [],
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                      side="left"
-                    />
-                  </div>
-                </EuiHeaderSectionItem>
-              </div>
-            </EuiHeaderSection>
-            <EuiHeaderSection
-              side="right"
-            >
-              <div
-                className="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--right"
-              >
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderNavControls
-                      navControls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": Array [],
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                    />
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderControlsContainer
-                      controls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": undefined,
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                      data-test-subj="headerCenterControl"
-                    >
-                      <div
-                        className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
-                        data-test-subj="headerCenterControl"
-                      />
-                    </HeaderControlsContainer>
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderNavControls
-                      navControls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": Array [],
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                    />
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                  className="headerAppActionMenuSection"
-                >
-                  <div
-                    className="euiHeaderSectionItem headerAppActionMenuSection"
-                  >
-                    <HeaderActionMenu
-                      actionMenu$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": undefined,
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                    >
-                      <div
-                        className="headerAppActionMenu"
-                        data-test-subj="headerAppActionMenu"
-                      />
-                    </HeaderActionMenu>
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderNavControls
-                      navControls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": Array [],
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                    />
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderControlsContainer
-                      controls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": undefined,
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                      data-test-subj="headerRightControl"
-                    >
-                      <div
-                        className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
-                        data-test-subj="headerRightControl"
-                      />
-                    </HeaderControlsContainer>
-                  </div>
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem
-                  border="none"
-                >
-                  <div
-                    className="euiHeaderSectionItem"
-                  >
-                    <HeaderNavControls
-                      navControls$={
-                        BehaviorSubject {
-                          "_isScalar": false,
-                          "_value": Array [],
-                          "closed": false,
-                          "hasError": false,
-                          "isStopped": false,
-                          "observers": Array [
-                            Subscriber {
-                              "_parentOrParents": null,
-                              "_subscriptions": Array [
-                                SubjectSubscription {
-                                  "_parentOrParents": [Circular],
-                                  "_subscriptions": null,
-                                  "closed": false,
-                                  "subject": [Circular],
-                                  "subscriber": [Circular],
-                                },
-                              ],
-                              "closed": false,
-                              "destination": SafeSubscriber {
-                                "_complete": undefined,
-                                "_context": [Circular],
-                                "_error": undefined,
-                                "_next": [Function],
-                                "_parentOrParents": null,
-                                "_parentSubscriber": [Circular],
-                                "_subscriptions": null,
-                                "closed": false,
-                                "destination": Object {
-                                  "closed": true,
-                                  "complete": [Function],
-                                  "error": [Function],
-                                  "next": [Function],
-                                },
-                                "isStopped": false,
-                                "syncErrorThrowable": false,
-                                "syncErrorThrown": false,
-                                "syncErrorValue": null,
-                              },
-                              "isStopped": false,
-                              "syncErrorThrowable": true,
-                              "syncErrorThrown": false,
-                              "syncErrorValue": null,
-                            },
-                          ],
-                          "thrownError": null,
-                        }
-                      }
-                      side="right"
-                    />
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderNavControls
+                                  navControls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": Array [],
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                />
+                              </div>
+                            </EuiHeaderSectionItem>
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderControlsContainer
+                                  controls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": undefined,
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                  data-test-subj="headerCenterControl"
+                                >
+                                  <div
+                                    className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
+                                    data-test-subj="headerCenterControl"
+                                  />
+                                </HeaderControlsContainer>
+                              </div>
+                            </EuiHeaderSectionItem>
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderNavControls
+                                  navControls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": Array [],
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                />
+                              </div>
+                            </EuiHeaderSectionItem>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiHeaderSectionItem
+                              border="none"
+                              className="headerAppActionMenuSection"
+                            >
+                              <div
+                                className="euiHeaderSectionItem headerAppActionMenuSection"
+                              >
+                                <HeaderActionMenu
+                                  actionMenu$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": undefined,
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                >
+                                  <div
+                                    className="headerAppActionMenu"
+                                    data-test-subj="headerAppActionMenu"
+                                  />
+                                </HeaderActionMenu>
+                              </div>
+                            </EuiHeaderSectionItem>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderNavControls
+                                  navControls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": Array [],
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                />
+                              </div>
+                            </EuiHeaderSectionItem>
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderControlsContainer
+                                  controls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": undefined,
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                  data-test-subj="headerRightControl"
+                                >
+                                  <div
+                                    className="euiHeaderSection euiHeaderSection--dontGrow headerControl"
+                                    data-test-subj="headerRightControl"
+                                  />
+                                </HeaderControlsContainer>
+                              </div>
+                            </EuiHeaderSectionItem>
+                            <EuiHeaderSectionItem
+                              border="none"
+                            >
+                              <div
+                                className="euiHeaderSectionItem"
+                              >
+                                <HeaderNavControls
+                                  navControls$={
+                                    BehaviorSubject {
+                                      "_isScalar": false,
+                                      "_value": Array [],
+                                      "closed": false,
+                                      "hasError": false,
+                                      "isStopped": false,
+                                      "observers": Array [
+                                        Subscriber {
+                                          "_parentOrParents": null,
+                                          "_subscriptions": Array [
+                                            SubjectSubscription {
+                                              "_parentOrParents": [Circular],
+                                              "_subscriptions": null,
+                                              "closed": false,
+                                              "subject": [Circular],
+                                              "subscriber": [Circular],
+                                            },
+                                          ],
+                                          "closed": false,
+                                          "destination": SafeSubscriber {
+                                            "_complete": undefined,
+                                            "_context": [Circular],
+                                            "_error": undefined,
+                                            "_next": [Function],
+                                            "_parentOrParents": null,
+                                            "_parentSubscriber": [Circular],
+                                            "_subscriptions": null,
+                                            "closed": false,
+                                            "destination": Object {
+                                              "closed": true,
+                                              "complete": [Function],
+                                              "error": [Function],
+                                              "next": [Function],
+                                            },
+                                            "isStopped": false,
+                                            "syncErrorThrowable": false,
+                                            "syncErrorThrown": false,
+                                            "syncErrorValue": null,
+                                          },
+                                          "isStopped": false,
+                                          "syncErrorThrowable": true,
+                                          "syncErrorThrown": false,
+                                          "syncErrorValue": null,
+                                        },
+                                      ],
+                                      "thrownError": null,
+                                    }
+                                  }
+                                  side="right"
+                                />
+                              </div>
+                            </EuiHeaderSectionItem>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
                   </div>
-                </EuiHeaderSectionItem>
+                </EuiHeaderSection>
               </div>
-            </EuiHeaderSection>
+            </EuiFlexGroup>
           </div>
         </EuiHeader>
         <EuiHeader
diff --git a/src/core/public/chrome/ui/header/header.scss b/src/core/public/chrome/ui/header/header.scss
index 59a7c4adcacf..5647bec00c9b 100644
--- a/src/core/public/chrome/ui/header/header.scss
+++ b/src/core/public/chrome/ui/header/header.scss
@@ -110,3 +110,11 @@
 #globalHeaderBars:has(.primaryApplicationHeader) {
   border-bottom: 1px solid $euiColorLightShade;
 }
+
+/* Control flex items to wrap when the viewport is less than the medium size */
+@media (max-width: 768px) {
+  .secondaryPageHeaderFlexGroup {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 72d9ba6be3fc..b823a1be0455 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -29,6 +29,8 @@
  */
 import {
   EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiHeader,
   EuiHeaderProps,
   EuiHeaderSection,
@@ -443,22 +445,39 @@ export function Header({
 
       {/* Secondary header */}
       <EuiHeader className="newTopNavHeader">
-        <EuiHeaderSection side="left">
-          <EuiHeaderSectionItem border="none" data-test-subj="headerApplicationTitle">
-            <EuiTitle size="l" className="newTopNavHeaderTitle">
-              {breadcrumbs && <h1>{breadcrumbs[breadcrumbs.length - 1]?.text}</h1>}
-            </EuiTitle>
-          </EuiHeaderSectionItem>
-
-          {renderBadge()}
-          {renderLeftControls()}
-        </EuiHeaderSection>
-
-        <EuiHeaderSection side="right">
-          {renderCenterControls()}
-          {renderActionMenu()}
-          {renderRightControls()}
-        </EuiHeaderSection>
+        <EuiFlexGroup
+          justifyContent="spaceBetween"
+          gutterSize="s"
+          className="secondaryPageHeaderFlexGroup"
+        >
+          {/* Left Section */}
+          <EuiHeaderSection side="left">
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem>
+                <EuiHeaderSectionItem border="none" data-test-subj="headerApplicationTitle">
+                  <EuiTitle size="l" className="newTopNavHeaderTitle">
+                    {breadcrumbs && <h1>{breadcrumbs[breadcrumbs.length - 1]?.text}</h1>}
+                  </EuiTitle>
+                </EuiHeaderSectionItem>
+              </EuiFlexItem>
+
+              <EuiFlexItem>{renderBadge()}</EuiFlexItem>
+
+              <EuiFlexItem>{renderLeftControls()}</EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiHeaderSection>
+
+          {/* Right Section */}
+          <EuiHeaderSection side="right">
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem>{renderCenterControls()}</EuiFlexItem>
+
+              <EuiFlexItem>{renderActionMenu()}</EuiFlexItem>
+
+              <EuiFlexItem>{renderRightControls()}</EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiHeaderSection>
+        </EuiFlexGroup>
       </EuiHeader>
 
       <EuiHeader className="newTopNavHeader">
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
index 1d053c0449b7..436d34466510 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
@@ -20,7 +20,7 @@ export function createDataSourceMenu<T>() {
     if (props.setMenuMountPoint) {
       return (
         <MountPointPortal setMountPoint={props.setMenuMountPoint}>
-          <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs">
+          <EuiHeaderLinks data-test-subj="top-nav" gutterSize="xs" popoverBreakpoints={'none'}>
             <DataSourceMenu
               {...props}
               uiSettings={uiSettings}