From 971165fd4884b49dacd646535066a3f2b57334b6 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Fri, 14 Apr 2023 14:54:00 -0700
Subject: [PATCH] [Console][Multiple Datasource]Fine tuned dev tool datasource
 selector UI (#3806)

* Fine tuned dev tool datasource selector UI
* Refactor DevToolsWrapper to conditionally render the EuiComboBox based on the dataSourceEnabled prop

Signed-off-by: Su <szhongna@amazon.com>

---------

Signed-off-by: Su <szhongna@amazon.com>
---
 src/plugins/dev_tools/public/application.tsx | 81 +++++++++-----------
 src/plugins/dev_tools/public/index.scss      | 10 ++-
 2 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
index 859d62acee51..7066c63d9798 100644
--- a/src/plugins/dev_tools/public/application.tsx
+++ b/src/plugins/dev_tools/public/application.tsx
@@ -154,51 +154,42 @@ function DevToolsWrapper({
 
   return (
     <main className="devApp">
-      <div>
-        <EuiFlexGroup gutterSize="none">
-          <EuiFlexItem>
-            <EuiTabs>
-              {devTools.map((currentDevTool) => (
-                <EuiToolTip content={currentDevTool.tooltipContent} key={currentDevTool.id}>
-                  <EuiTab
-                    disabled={currentDevTool.isDisabled()}
-                    isSelected={currentDevTool === activeDevTool}
-                    onClick={() => {
-                      if (!currentDevTool.isDisabled()) {
-                        updateRoute(`/${currentDevTool.id}`);
-                      }
-                    }}
-                  >
-                    {currentDevTool.title}
-                  </EuiTab>
-                </EuiToolTip>
-              ))}
-            </EuiTabs>
-          </EuiFlexItem>
-          {dataSourceEnabled ? (
-            <EuiFlexItem grow={false} className="dataSourceSelector">
-              <EuiComboBox
-                aria-label={i18n.translate('devTool.devToolWrapper.DataSourceComboBoxAriaLabel', {
-                  defaultMessage: 'Select a Data Source',
-                })}
-                placeholder={i18n.translate(
-                  'devTool.devToolWrapper.DataSourceComboBoxPlaceholder',
-                  {
-                    defaultMessage: 'Select a Data Source',
-                  }
-                )}
-                singleSelection={{ asPlainText: true }}
-                options={dataSources}
-                selectedOptions={selectedOptions}
-                onChange={onChange}
-                prepend="DataSource"
-                compressed
-                isDisabled={!dataSourceEnabled}
-              />
-            </EuiFlexItem>
-          ) : null}
-        </EuiFlexGroup>
-      </div>
+      <EuiTabs className="devAppTabs">
+        {devTools.map((currentDevTool) => (
+          <EuiToolTip content={currentDevTool.tooltipContent} key={currentDevTool.id}>
+            <EuiTab
+              disabled={currentDevTool.isDisabled()}
+              isSelected={currentDevTool === activeDevTool}
+              onClick={() => {
+                if (!currentDevTool.isDisabled()) {
+                  updateRoute(`/${currentDevTool.id}`);
+                }
+              }}
+            >
+              {currentDevTool.title}
+            </EuiTab>
+          </EuiToolTip>
+        ))}
+        {dataSourceEnabled ? (
+          <div className="devAppDataSourcePicker">
+            <EuiComboBox
+              aria-label={i18n.translate('devTool.devToolWrapper.DataSourceComboBoxAriaLabel', {
+                defaultMessage: 'Select a Data Source',
+              })}
+              placeholder={i18n.translate('devTool.devToolWrapper.DataSourceComboBoxPlaceholder', {
+                defaultMessage: 'Select a Data Source',
+              })}
+              singleSelection={{ asPlainText: true }}
+              options={dataSources}
+              selectedOptions={selectedOptions}
+              onChange={onChange}
+              prepend="DataSource"
+              compressed
+              isDisabled={!dataSourceEnabled}
+            />
+          </div>
+        ) : null}
+      </EuiTabs>
 
       <div
         className="devApp__container"
diff --git a/src/plugins/dev_tools/public/index.scss b/src/plugins/dev_tools/public/index.scss
index 6ed9c38f106b..38bb0d31f166 100644
--- a/src/plugins/dev_tools/public/index.scss
+++ b/src/plugins/dev_tools/public/index.scss
@@ -22,7 +22,13 @@
   flex-grow: 1;
 }
 
-.dataSourceSelector {
-  margin: 5px 10px 5px 5px;
+.devAppDataSourcePicker {
+  margin: 7px 8px 0 0;
   min-width: 400px;
 }
+
+.devAppTabs {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}