Use EuiCompressedComboBox

Signed-off-by: Miki <[email protected]>
opensearch-project · Aug 1, 2024 · 69a0f0d · 69a0f0d
1 parent 4115d74
commit 69a0f0d
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 20 deletions.
diff --git a/public/apps/account/tenant-switch-panel.tsx b/public/apps/account/tenant-switch-panel.tsx
@@ -17,7 +17,7 @@ import {
   EuiSmallButton,
   EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiModal,
   EuiModalBody,
@@ -258,7 +258,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
         {/* This combo box has to be outside the radio group.
           In current EUI if put into the child of radio option, clicking in the combo box will not
           show the drop down list since the radio option consumes the click event. */}
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder="Select a custom tenant"
           options={customTenantOptions}
           singleSelection={{ asPlainText: true }}

diff --git a/public/apps/configuration/panels/audit-logging/edit-setting-group.tsx b/public/apps/configuration/panels/audit-logging/edit-setting-group.tsx
@@ -16,7 +16,7 @@
 import React, { Fragment } from 'react';
 import {
   EuiCodeBlock,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiDescribedFormGroup,
   EuiCompressedFormRow,
   EuiSpacer,
@@ -77,7 +77,7 @@ export function EditSettingGroup(props: {
       val = val || [];
 
       return (
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder={setting.title}
           options={setting.options.map(stringToComboBoxOption)}
           // @ts-ignore
@@ -91,7 +91,7 @@ export function EditSettingGroup(props: {
       val = val || [];
 
       return (
-        <EuiComboBox
+        <EuiCompressedComboBox
           noSuggestions
           placeholder={setting.title}
           // @ts-ignore

diff --git a/public/apps/configuration/panels/permission-list/edit-modal.tsx b/public/apps/configuration/panels/permission-list/edit-modal.tsx
@@ -23,7 +23,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiForm,
-  EuiComboBox,
+  EuiCompressedComboBox,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { ComboBoxOptions, Action } from '../../types';
@@ -76,7 +76,7 @@ export function PermissionEditModal(props: PermissionEditModalDeps) {
               setIsFormValid={setIsFormValid}
             />
             <FormRow headerText="Permissions">
-              <EuiComboBox
+              <EuiCompressedComboBox
                 options={props.optionUniverse}
                 selectedOptions={allowedActions}
                 onCreateOption={appendOptionToComboBoxHandler(setAllowedActions, [])}

diff --git a/public/apps/configuration/panels/role-edit/cluster-permission-panel.tsx b/public/apps/configuration/panels/role-edit/cluster-permission-panel.tsx
@@ -14,7 +14,7 @@
  */
 
 import React, { Dispatch, SetStateAction } from 'react';
-import { EuiForm, EuiFlexGroup, EuiFlexItem, EuiComboBox } from '@elastic/eui';
+import { EuiForm, EuiFlexGroup, EuiFlexItem, EuiCompressedComboBox } from '@elastic/eui';
 import { ComboBoxOptions } from '../../types';
 import { ResourceType } from '../../../../../common';
 import { PanelWithHeader } from '../../utils/panel-with-header';
@@ -45,7 +45,7 @@ export function ClusterPermissionPanel(props: {
         >
           <EuiFlexGroup>
             <EuiFlexItem className={LIMIT_WIDTH_INPUT_CLASS}>
-              <EuiComboBox
+              <EuiCompressedComboBox
                 placeholder="Search for action group name or permission name"
                 options={optionUniverse}
                 selectedOptions={state}

diff --git a/public/apps/configuration/panels/role-edit/index-permission-panel.tsx b/public/apps/configuration/panels/role-edit/index-permission-panel.tsx
@@ -16,7 +16,7 @@
 import {
   EuiAccordion,
   EuiSmallButton,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -121,7 +121,7 @@ export function IndexPatternRow(props: {
   return (
     <FormRow headerText="Index" helpText="Specify index pattern using *">
       <EuiFlexItem className={LIMIT_WIDTH_INPUT_CLASS}>
-        <EuiComboBox
+        <EuiCompressedComboBox
           noSuggestions
           placeholder="Search for index name or type in index pattern"
           selectedOptions={props.value}
@@ -149,7 +149,7 @@ export function IndexPermissionRow(props: {
     >
       <EuiFlexGroup>
         <EuiFlexItem className={LIMIT_WIDTH_INPUT_CLASS}>
-          <EuiComboBox
+          <EuiCompressedComboBox
             placeholder="Search for action group name or permission name"
             options={props.permisionOptionsSet}
             selectedOptions={props.value}
@@ -214,7 +214,7 @@ export function FieldLevelSecurityRow(props: {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={9}>
-          <EuiComboBox
+          <EuiCompressedComboBox
             noSuggestions
             placeholder="Type in field name"
             selectedOptions={props.fields}
@@ -238,7 +238,7 @@ export function AnonymizationRow(props: {
       headerSubText="Masks any sensitive fields with a random value to protect your data security."
       optional
     >
-      <EuiComboBox
+      <EuiCompressedComboBox
         noSuggestions
         placeholder="Type in field name"
         selectedOptions={props.value}

diff --git a/public/apps/configuration/panels/role-edit/tenant-panel.tsx b/public/apps/configuration/panels/role-edit/tenant-panel.tsx
@@ -15,7 +15,7 @@
 
 import {
   EuiSmallButton,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiFlexGroup,
   EuiFlexItem,
   EuiCompressedSuperSelect,
@@ -91,7 +91,7 @@ function generateTenantPermissionPanels(
       <Fragment key={`tenant-permission-${arrayIndex}`}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: '400px' }}>
-            <EuiComboBox
+            <EuiCompressedComboBox
               placeholder="Search tenant name or add a tenant pattern"
               selectedOptions={tenantPermission.tenantPatterns}
               onChange={onValueChangeHandler('tenantPatterns')}

diff --git a/public/apps/configuration/panels/role-mapping/users-panel.tsx b/public/apps/configuration/panels/role-mapping/users-panel.tsx
@@ -14,7 +14,7 @@
  */
 
 import React, { Dispatch, SetStateAction } from 'react';
-import { EuiForm, EuiFlexGroup, EuiFlexItem, EuiComboBox } from '@elastic/eui';
+import { EuiForm, EuiFlexGroup, EuiFlexItem, EuiCompressedComboBox } from '@elastic/eui';
 import { ComboBoxOptions } from '../../types';
 import { PanelWithHeader } from '../../utils/panel-with-header';
 import { FormRow } from '../../utils/form-row';
@@ -47,7 +47,7 @@ export function InternalUsersPanel(props: {
         >
           <EuiFlexGroup>
             <EuiFlexItem style={{ maxWidth: '400px' }}>
-              <EuiComboBox
+              <EuiCompressedComboBox
                 options={optionUniverse}
                 selectedOptions={state}
                 onChange={setState}

diff --git a/public/apps/configuration/panels/tenant-list/configure_tab1.tsx b/public/apps/configuration/panels/tenant-list/configure_tab1.tsx
@@ -30,7 +30,7 @@ import {
   EuiCompressedCheckbox,
   EuiCallOut,
   EuiBottomBar,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiIcon,
   EuiLoadingContent,
 } from '@elastic/eui';
@@ -453,7 +453,7 @@ export function ConfigureTab1(props: AppDependencies) {
             >
               <EuiFlexGroup>
                 <EuiFlexItem>
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     placeholder={updatedConfiguration.default_tenant}
                     options={comboBoxOptions}
                     selectedOptions={selectedComboBoxOptions}