From e34ca2b593ecf8d8c6caf547381cdddf5548a53c Mon Sep 17 00:00:00 2001
From: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:41:43 -0700
Subject: [PATCH] [MDS] Refactor dropdown header + Aggregate view UI (#6541)

* Refactor dropdown header + aggregate view UI

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor dropdown to use OuiPopoverTitle

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Update snapshots

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor titleComponent

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Update snapshots

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

---------

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>
---
 .../data_source_list_active_example.tsx       |    3 +-
 .../data_source_list_all_example.tsx          |    1 -
 .../data_source_aggregated_view.test.tsx.snap | 1492 ++++++++---------
 .../data_source_aggregated_view.scss          |   13 +
 .../data_source_aggregated_view.tsx           |   10 +-
 .../components/data_source_menu/types.ts      |    1 -
 .../data_source_selectable.test.tsx.snap      |    2 +-
 .../data_source_view.test.tsx.snap            |    2 +-
 .../drop_down_header.test.tsx.snap            |    4 +-
 .../drop_down_header/drop_down_header.tsx     |    4 +-
 10 files changed, 696 insertions(+), 836 deletions(-)

diff --git a/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx
index 81a15e2c03da..9563c65769f8 100644
--- a/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx
+++ b/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx
@@ -110,8 +110,7 @@ export const DataSourceListActiveExample = ({
               notifications,
               displayAllCompatibleDataSources: false,
               // To see selected options, obtain the datasource id and paste it here. Note that this needs to be defined when displayAllCompatibleDataSources is false
-              activeDataSourceIds: [],
-              uiSettings,
+              activeDataSourceIds: [''],
             }}
           />
         )}
diff --git a/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx
index 570e51be36e9..d2d5d89d3c6a 100644
--- a/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx
+++ b/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx
@@ -102,7 +102,6 @@ export const DataSourceListAllExample = ({
               savedObjects: savedObjects.client,
               notifications,
               displayAllCompatibleDataSources: true,
-              uiSettings,
             }}
           />
         )}
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
index 57ba243a476b..ebc28a49153f 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
@@ -23,56 +23,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={1}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={3}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={1}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={3}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -160,56 +152,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={2}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={4}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={2}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={4}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -303,56 +287,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={1}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={2}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={1}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={2}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -434,56 +410,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={2}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={3}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={2}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={3}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -571,56 +539,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={0}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={3}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={0}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={3}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -708,56 +668,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={0}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={4}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={0}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={4}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -851,56 +803,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={0}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={2}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={0}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={2}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -982,56 +926,48 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      activeDataSourceCount={0}
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={3}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          activeDataSourceCount={0}
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={3}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1119,55 +1055,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1219,55 +1147,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1319,55 +1239,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1419,55 +1331,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1519,55 +1423,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1619,55 +1515,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1719,55 +1607,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1819,55 +1699,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -1919,55 +1791,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
@@ -2019,55 +1883,47 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
     ownFocus={true}
     panelPaddingSize="none"
   >
+    <DataSourceDropDownHeader
+      application={
+        Object {
+          "applications$": BehaviorSubject {
+            "_isScalar": false,
+            "_value": Map {},
+            "closed": false,
+            "hasError": false,
+            "isStopped": false,
+            "observers": Array [],
+            "thrownError": null,
+          },
+          "capabilities": Object {
+            "catalogue": Object {},
+            "management": Object {},
+            "navLinks": Object {},
+            "workspaces": Object {},
+          },
+          "currentAppId$": Observable {
+            "_isScalar": false,
+            "source": Subject {
+              "_isScalar": false,
+              "closed": false,
+              "hasError": false,
+              "isStopped": false,
+              "observers": Array [],
+              "thrownError": null,
+            },
+          },
+          "getUrlForApp": [MockFunction],
+          "navigateToApp": [MockFunction],
+          "navigateToUrl": [MockFunction],
+          "registerMountContext": [MockFunction],
+        }
+      }
+      totalDataSourceCount={0}
+    />
     <EuiContextMenuPanel
       hasFocus={true}
       items={Array []}
     >
-      <EuiPanel
-        borderRadius="none"
-        className="dataSourceAggregatedViewOuiPanel"
-        color="transparent"
-        hasBorder={false}
-        paddingSize="s"
-      >
-        <DataSourceDropDownHeader
-          application={
-            Object {
-              "applications$": BehaviorSubject {
-                "_isScalar": false,
-                "_value": Map {},
-                "closed": false,
-                "hasError": false,
-                "isStopped": false,
-                "observers": Array [],
-                "thrownError": null,
-              },
-              "capabilities": Object {
-                "catalogue": Object {},
-                "management": Object {},
-                "navLinks": Object {},
-                "workspaces": Object {},
-              },
-              "currentAppId$": Observable {
-                "_isScalar": false,
-                "source": Subject {
-                  "_isScalar": false,
-                  "closed": false,
-                  "hasError": false,
-                  "isStopped": false,
-                  "observers": Array [],
-                  "thrownError": null,
-                },
-              },
-              "getUrlForApp": [MockFunction],
-              "navigateToApp": [MockFunction],
-              "navigateToUrl": [MockFunction],
-              "registerMountContext": [MockFunction],
-            }
-          }
-          totalDataSourceCount={0}
-        />
-      </EuiPanel>
       <EuiPanel
         borderRadius="none"
         className="dataSourceAggregatedViewOuiPanel"
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss
index 9e8d78eac91b..0c10d76c6bd8 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.scss
@@ -1,5 +1,18 @@
 .dataSourceAggregatedViewOuiPanel {
   width: 300px;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-top-width: 0;
+
+  /* stylelint-disable */
+  .euiSelectableListItem {
+    cursor: default;
+  }
+
+  .euiSelectableListItem__content {
+    cursor: default;
+  }
+  /* stylelint-enable */
 
   .dataSourceAggregatedViewOuiFlexGroup {
     .dataSourceAggregatedViewOuiFlexItem {
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
index 16b63d36d912..775d5e5c3e67 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
@@ -202,16 +202,8 @@ export class DataSourceAggregatedView extends React.Component<
           panelPaddingSize="none"
           anchorPosition="downLeft"
         >
+          {titleComponent}
           <EuiContextMenuPanel>
-            <EuiPanel
-              className={'dataSourceAggregatedViewOuiPanel'}
-              borderRadius="none"
-              hasBorder={false}
-              color="transparent"
-              paddingSize="s"
-            >
-              {titleComponent}
-            </EuiPanel>
             <EuiPanel
               className={'dataSourceAggregatedViewOuiPanel'}
               paddingSize="none"
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
index 3708291f0a89..debf8d928258 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/types.ts
+++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
@@ -63,7 +63,6 @@ interface DataSourceAggregatedViewBaseConfig extends DataSourceBaseConfig {
   savedObjects: SavedObjectsClientContract;
   notifications: NotificationsStart;
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
-  uiSettings?: IUiSettingsClient;
 }
 
 export type DataSourceAggregatedViewConfig =
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index b3abb935afee..481451f3d80a 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -269,7 +269,7 @@ Object {
               class="euiPopoverTitle euiPopoverTitle--paddingSmall"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
               >
                 <div
                   class="euiFlexItem"
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index efe373e7d825..80667bf86091 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -262,7 +262,7 @@ Object {
               class="euiPopoverTitle euiPopoverTitle--paddingSmall"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
               >
                 <div
                   class="euiFlexItem"
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
index 851b7a0a803b..8c49521c32cc 100644
--- a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`DataSourceDropDownHeader should render correctly with the provided tota
   paddingSize="s"
 >
   <EuiFlexGroup
+    alignItems="center"
     responsive={false}
   >
     <EuiFlexItem>
@@ -42,10 +43,11 @@ exports[`DataSourceDropDownHeader should render the activeDataSourceCount/totalD
       className="euiPopoverTitle euiPopoverTitle--paddingSmall"
     >
       <EuiFlexGroup
+        alignItems="center"
         responsive={false}
       >
         <div
-          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
         >
           <EuiFlexItem>
             <div
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
index 790f5d40696f..c07cd0e0462d 100644
--- a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
@@ -4,7 +4,7 @@
  */
 
 import './drop_down_header.scss';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink, EuiPopoverTitle } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPopoverTitle } from '@elastic/eui';
 import React from 'react';
 import { ApplicationStart } from 'opensearch-dashboards/public';
 import { DSM_APP_ID } from '../../plugin';
@@ -28,7 +28,7 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
 
   return (
     <EuiPopoverTitle paddingSize="s">
-      <EuiFlexGroup responsive={false}>
+      <EuiFlexGroup responsive={false} alignItems="center">
         <EuiFlexItem>
           {dataSourceCounterPrefix} ({dataSourceCounter})
         </EuiFlexItem>