From 365ddbbea478b2b8b36ddb0cf53d71f9b3a647fd Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Wed, 24 Jul 2024 10:52:13 -0700
Subject: [PATCH] Compress data source selector on (#7329) (#7412)

* management's data sources page
* dev tools
* home
* query enhancements
* saved object mgmt
* time series



(cherry picked from commit 3526f96f5889227fd79f3e671b3e3507a1a547d1)

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com>
---
 changelogs/fragments/7329.yml                 |  2 ++
 ...query_data_connections_table.test.tsx.snap | 25 ++++++++++---------
 ...ge_direct_query_data_connections_table.tsx |  1 +
 src/plugins/dev_tools/public/application.tsx  |  2 +-
 .../components/tutorial_directory.js          |  1 +
 .../components/connections_bar.tsx            |  1 +
 .../__snapshots__/flyout.test.tsx.snap        |  1 +
 .../objects_table/components/flyout.tsx       |  1 +
 .../application/components/index_pattern.js   |  1 +
 9 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 changelogs/fragments/7329.yml

diff --git a/changelogs/fragments/7329.yml b/changelogs/fragments/7329.yml
new file mode 100644
index 00000000000..e30e73df593
--- /dev/null
+++ b/changelogs/fragments/7329.yml
@@ -0,0 +1,2 @@
+feat:
+- Use compressed DataSourceSelector ([#7329](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7329))
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
index 0de4a45d747..83cfde5b9ef 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
@@ -107,6 +107,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                       }
                     >
                       <DataSourceSelector
+                        compressed={true}
                         disabled={false}
                         fullWidth={true}
                         notifications={
@@ -135,7 +136,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                         <EuiComboBox
                           aria-label="Select a data source"
                           async={false}
-                          compressed={false}
+                          compressed={true}
                           data-test-subj="dataSourceSelectorComboBox"
                           fullWidth={true}
                           isClearable={true}
@@ -171,14 +172,14 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                             aria-expanded={false}
                             aria-haspopup="listbox"
                             aria-label="Select a data source"
-                            className="euiComboBox euiComboBox--fullWidth"
+                            className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
                             data-test-subj="dataSourceSelectorComboBox"
                             onKeyDown={[Function]}
                             role="combobox"
                           >
                             <EuiComboBoxInput
                               autoSizeInputRef={[Function]}
-                              compressed={false}
+                              compressed={true}
                               fullWidth={true}
                               hasSelectedOptions={true}
                               inputRef={[Function]}
@@ -220,7 +221,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                     "onClick": [Function],
                                   }
                                 }
-                                compressed={false}
+                                compressed={true}
                                 fullWidth={true}
                                 icon={
                                   Object {
@@ -236,7 +237,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                 prepend="Data source"
                               >
                                 <div
-                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
                                 >
                                   <EuiFormLabel
                                     className="euiFormControlLayout__prepend"
@@ -251,7 +252,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                     className="euiFormControlLayout__childrenWrapper"
                                   >
                                     <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable euiComboBox__inputWrap--inGroup"
+                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable euiComboBox__inputWrap--inGroup"
                                       data-test-subj="comboBoxInput"
                                       onClick={[Function]}
                                       tabIndex={-1}
@@ -342,7 +343,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                           "onClick": [Function],
                                         }
                                       }
-                                      compressed={false}
+                                      compressed={true}
                                       icon={
                                         Object {
                                           "aria-label": "Open list of options",
@@ -361,7 +362,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                         <EuiFormControlLayoutClearButton
                                           data-test-subj="comboBoxClearButton"
                                           onClick={[Function]}
-                                          size="m"
+                                          size="s"
                                         >
                                           <EuiI18n
                                             default="Clear input"
@@ -369,7 +370,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                           >
                                             <button
                                               aria-label="Clear input"
-                                              className="euiFormControlLayoutClearButton"
+                                              className="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                                               data-test-subj="comboBoxClearButton"
                                               onClick={[Function]}
                                               type="button"
@@ -392,7 +393,7 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                           disabled={false}
                                           iconRef={[Function]}
                                           onClick={[Function]}
-                                          size="m"
+                                          size="s"
                                           type="arrowDown"
                                         >
                                           <button
@@ -406,14 +407,14 @@ exports[`ManageDirectQueryDataConnectionsTable renders correctly 1`] = `
                                             <EuiIcon
                                               aria-hidden="true"
                                               className="euiFormControlLayoutCustomIcon__icon"
-                                              size="m"
+                                              size="s"
                                               type="arrowDown"
                                             >
                                               <span
                                                 aria-hidden="true"
                                                 className="euiFormControlLayoutCustomIcon__icon"
                                                 data-euiicon-type="arrowDown"
-                                                size="m"
+                                                size="s"
                                               />
                                             </EuiIcon>
                                           </button>
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
index f4bc2974a9f..54d3fe2fa57 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
@@ -234,6 +234,7 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
             fullWidth={true}
             uiSettings={uiSettings}
             disabled={false}
+            compressed={true}
           />
         </EuiFlexItem>
       )}
diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
index 6c4cae6e18c..38d44466585 100644
--- a/src/plugins/dev_tools/public/application.tsx
+++ b/src/plugins/dev_tools/public/application.tsx
@@ -124,7 +124,7 @@ function DevToolsWrapper({
           onSelectedDataSource={onChange}
           disabled={!dataSourceEnabled}
           fullWidth={false}
-          compressed
+          compressed={true}
         />
       </div>
     );
diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/src/plugins/home/public/application/components/tutorial_directory.js
index 4d4cf4566d1..d9ddcc167e0 100644
--- a/src/plugins/home/public/application/components/tutorial_directory.js
+++ b/src/plugins/home/public/application/components/tutorial_directory.js
@@ -240,6 +240,7 @@ class TutorialDirectoryUi extends React.Component {
           disabled={!isDataSourceEnabled}
           hideLocalCluster={isLocalClusterHidden}
           uiSettings={getServices().uiSettings}
+          compressed={true}
         />
       </div>
     ) : null;
diff --git a/src/plugins/query_enhancements/public/data_source_connection/components/connections_bar.tsx b/src/plugins/query_enhancements/public/data_source_connection/components/connections_bar.tsx
index d7590b27822..3fd592e50b3 100644
--- a/src/plugins/query_enhancements/public/data_source_connection/components/connections_bar.tsx
+++ b/src/plugins/query_enhancements/public/data_source_connection/components/connections_bar.tsx
@@ -81,6 +81,7 @@ export const ConnectionsBar: React.FC<ConnectionsProps> = ({ connectionsService,
           notifications={toasts}
           disabled={false}
           fullWidth={false}
+          compressed={true}
           removePrepend={true}
           isClearable={false}
           onSelectedDataSource={(dataSource) =>
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap
index 09471948281..4329f6164ff 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/__snapshots__/flyout.test.tsx.snap
@@ -598,6 +598,7 @@ exports[`Flyout should render cluster selector and import options when datasourc
           }
         >
           <DataSourceSelector
+            compressed={true}
             disabled={false}
             fullWidth={true}
             isClearable={false}
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
index 5f14a1c6b11..074a185390c 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
@@ -837,6 +837,7 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
             disabled={!this.props.dataSourceEnabled}
             fullWidth={true}
             isClearable={false}
+            compressed={true}
           />
         </EuiFormFieldset>
         <EuiSpacer />
diff --git a/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js b/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
index f39771de11d..60f709b41c0 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
@@ -189,6 +189,7 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
                 }
                 disabled={false}
                 fullWidth={false}
+                compressed={true}
                 removePrepend={true}
                 isClearable={false}
               />