Update data explorer ui to use compressed components (#8222) (#8343)

* update discover ui to use compressed components



* revert query editor changes



* Changeset file for PR #8222 created/updated

* update overflow prop for query editor



* update language selector snapshots



---------



(cherry picked from commit 8d45530)

Signed-off-by: Shenoy Pratik <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Signed-off-by: Kawika Avilla <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Kawika Avilla <[email protected]>

changelogs/fragments/8222.yml

@@ -0,0 +1,2 @@
+fix:
+- Update data explorer ui to use compressed components ([#8222](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8222))

src/plugins/data/public/data_sources/datasource_selector/data_selector_refresher.tsx

@@ -3,15 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import { EuiButtonIconProps, EuiSmallButtonIcon, EuiToolTip, EuiToolTipProps } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import {
-  EuiSmallButtonIcon,
-  EuiButtonIconProps,
-  EuiText,
-  EuiToolTip,
-  EuiToolTipProps,
-} from '@elastic/eui';
+import React from 'react';
 
 interface IDataSelectorRefresherProps {
   tooltipText: string;
@@ -23,26 +17,24 @@ interface IDataSelectorRefresherProps {
 export const DataSelectorRefresher: React.FC<IDataSelectorRefresherProps> = React.memo(
   ({ tooltipText, onRefresh, buttonProps, toolTipProps }) => {
     return (
-      <EuiText size="s" className="sourceRefreshText">
-        <EuiToolTip
-          position="right"
-          content={i18n.translate('data.datasource.selector.refreshDataSources', {
-            defaultMessage: tooltipText,
-          })}
-          display="block"
-          data-test-subj="sourceRefreshButtonToolTip"
-          {...toolTipProps}
-        >
-          <EuiSmallButtonIcon
-            onClick={onRefresh}
-            iconType="refresh"
-            aria-label="sourceRefresh"
-            className="sourceRefreshButton"
-            data-test-subj="sourceRefreshButton"
-            {...buttonProps}
-          />
-        </EuiToolTip>
-      </EuiText>
+      <EuiToolTip
+        position="right"
+        content={i18n.translate('data.datasource.selector.refreshDataSources', {
+          defaultMessage: tooltipText,
+        })}
+        display="block"
+        data-test-subj="sourceRefreshButtonToolTip"
+        {...toolTipProps}
+      >
+        <EuiSmallButtonIcon
+          onClick={onRefresh}
+          iconType="refresh"
+          aria-label="sourceRefresh"
+          className="sourceRefreshButton"
+          data-test-subj="sourceRefreshButton"
+          {...buttonProps}
+        />
+      </EuiToolTip>
     );
   }
 );

src/plugins/data/public/data_sources/datasource_selector/datasource_selectable.tsx

@@ -3,17 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useCallback, useMemo } from 'react';
 import { EuiCompressedComboBox } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { DataSource, DataSetWithDataSource, IndexPatternOption } from '../datasource';
-import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types';
-import { DataSelectorRefresher } from './data_selector_refresher';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import {
   DATA_SELECTOR_DEFAULT_PLACEHOLDER,
   DATA_SELECTOR_REFRESHER_POPOVER_TEXT,
   DATA_SELECTOR_S3_DATA_SOURCE_GROUP_HINT_LABEL,
 } from '../constants';
+import { DataSetWithDataSource, DataSource, IndexPatternOption } from '../datasource';
+import { DataSelectorRefresher } from './data_selector_refresher';
+import { DataSourceGroup, DataSourceOption, DataSourceSelectableProps } from './types';
 
 // Asynchronously retrieves and formats dataset from a given data source.
 const getAndFormatDataSetFromDataSource = async (

src/plugins/data/public/ui/dataset_selector/dataset_selector.tsx

@@ -3,23 +3,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiIcon,
   EuiPopover,
   EuiPopoverFooter,
   EuiSelectable,
   EuiSelectableOption,
+  EuiSmallButtonEmpty,
   EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toMountPoint } from '../../../../opensearch_dashboards_react/public';
 import { Dataset, DEFAULT_DATA } from '../../../common';
+import { getQueryService } from '../../services';
 import { IDataPluginServices } from '../../types';
 import { AdvancedSelector } from './advanced_selector';
-import { getQueryService } from '../../services';
 
 interface DatasetSelectorProps {
   selectedDataset?: Dataset;
@@ -138,15 +138,15 @@ export const DatasetSelector = ({
     <EuiPopover
       button={
         <EuiToolTip content={`${selectedDataset?.title ?? 'Select data'}`}>
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="datasetSelector__button"
             iconType="arrowDown"
             iconSide="right"
             onClick={togglePopover}
           >
             <EuiIcon type={datasetIcon} className="datasetSelector__icon" />
             {datasetTitle}
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiToolTip>
       }
       isOpen={isOpen}