[Console][Multiple Datasource]Fine tuned dev tool datasource selector…

… UI (opensearch-project#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>
ananzh · Apr 14, 2023 · 971165f · 971165f
1 parent 01c5a92
commit 971165f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 47 deletions.
diff --git 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
@@ -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;
+}