From a4753db4171e6d4570aa9cb7929b10d654038171 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Sun, 11 Aug 2024 18:36:34 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components (#349)

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonIcon

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonEmpty

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedFormRow

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedField*

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallFilterButton

Signed-off-by: Miki <miki@amazon.com>

---------

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit 6c280ae18e914908bb18f695feb6170fccb68dfe)
---
 public/components/common/copyable_text.tsx    |  4 +--
 .../common/options_filter/options_filter.tsx  |  6 ++--
 public/components/common/refresh_interval.tsx | 30 +++++++++----------
 .../monitoring/model_deployment_table.tsx     |  6 ++--
 public/components/monitoring/search_bar.tsx   |  4 +--
 public/components/status_filter/index.tsx     |  6 ++--
 6 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/public/components/common/copyable_text.tsx b/public/components/common/copyable_text.tsx
index abc9301a..2945df28 100644
--- a/public/components/common/copyable_text.tsx
+++ b/public/components/common/copyable_text.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useState, useRef } from 'react';
-import { EuiButtonIcon, copyToClipboard, EuiToolTip } from '@elastic/eui';
+import { EuiSmallButtonIcon, copyToClipboard, EuiToolTip } from '@elastic/eui';
 
 interface Props {
   text: string;
@@ -33,7 +33,7 @@ export const CopyableText = ({
     <div data-test-subj="copyable-text-div">
       {iconLeft ? null : text}
       <EuiToolTip content={isTextCopied ? copiedTooltipText : tooltipText}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           buttonRef={copyButtonRef}
           aria-label="Copy ID to clipboard"
           color="text"
diff --git a/public/components/common/options_filter/options_filter.tsx b/public/components/common/options_filter/options_filter.tsx
index 155fa0d0..e7ef04c3 100644
--- a/public/components/common/options_filter/options_filter.tsx
+++ b/public/components/common/options_filter/options_filter.tsx
@@ -8,7 +8,7 @@ import {
   EuiPopover,
   EuiPopoverTitle,
   EuiFieldSearch,
-  EuiFilterButton,
+  EuiSmallFilterButton,
   EuiPopoverFooter,
   EuiFlexGroup,
   EuiFlexItem,
@@ -73,14 +73,14 @@ export const OptionsFilter = <T extends string | number = string>({
   return (
     <EuiPopover
       button={
-        <EuiFilterButton
+        <EuiSmallFilterButton
           iconType="arrowDown"
           onClick={handleButtonClick}
           isSelected={isPopoverOpen}
           {...(value.length > 0 ? { hasActiveFilters: true, numActiveFilters: value.length } : {})}
         >
           {name}
-        </EuiFilterButton>
+        </EuiSmallFilterButton>
       }
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/public/components/common/refresh_interval.tsx b/public/components/common/refresh_interval.tsx
index d0f37557..68df681e 100644
--- a/public/components/common/refresh_interval.tsx
+++ b/public/components/common/refresh_interval.tsx
@@ -5,15 +5,15 @@
 
 import {
   EuiIcon,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiPopover,
   EuiFlexGroup,
-  EuiFieldNumber,
-  EuiSelect,
-  EuiButton,
+  EuiCompressedFieldNumber,
+  EuiCompressedSelect,
+  EuiSmallButton,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
 } from '@elastic/eui';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 
@@ -116,14 +116,14 @@ export const RefreshInterval = ({
   }, [interval, isPaused, onRefresh, onRefreshChange]);
 
   const intervalButton = (
-    <EuiButtonEmpty
+    <EuiSmallButtonEmpty
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
       aria-label="set refresh interval"
     >
       <EuiIcon type="clock" />
-    </EuiButtonEmpty>
+    </EuiSmallButtonEmpty>
   );
 
   let errors: string[] = [];
@@ -132,7 +132,7 @@ export const RefreshInterval = ({
   }
 
   return (
-    <EuiFieldText
+    <EuiCompressedFieldText
       aria-label="current interval value"
       readOnly
       value={displayedIntervalValue}
@@ -142,7 +142,7 @@ export const RefreshInterval = ({
           isOpen={isPopoverOpen}
           closePopover={() => setIsPopoverOpen(false)}
         >
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Refresh every"
             helpText={
               errors.length > 0 ? '' : 'Enter an auto-refresh rate greater than 10 seconds.'
@@ -152,7 +152,7 @@ export const RefreshInterval = ({
           >
             <EuiFlexGroup>
               <EuiFlexItem>
-                <EuiFieldNumber
+                <EuiCompressedFieldNumber
                   aria-label="interval value input"
                   isInvalid={isInvalid}
                   value={intervalValue}
@@ -160,7 +160,7 @@ export const RefreshInterval = ({
                 />
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiSelect
+                <EuiCompressedSelect
                   aria-label="interval unit selector"
                   isInvalid={isInvalid}
                   value={intervalUnit}
@@ -169,17 +169,17 @@ export const RefreshInterval = ({
                 />
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiButton
+                <EuiSmallButton
                   aria-label={`${isPaused ? 'start' : 'stop'} refresh interval`}
                   disabled={isInvalid}
                   iconType={isPaused ? 'play' : 'stop'}
                   onClick={() => setIsPaused(!isPaused)}
                 >
                   {isPaused ? 'Start' : 'Stop'}
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiPopover>
       }
     />
diff --git a/public/components/monitoring/model_deployment_table.tsx b/public/components/monitoring/model_deployment_table.tsx
index 231eff05..28841d61 100644
--- a/public/components/monitoring/model_deployment_table.tsx
+++ b/public/components/monitoring/model_deployment_table.tsx
@@ -11,7 +11,7 @@ import {
   Direction,
   EuiBasicTable,
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiEmptyPrompt,
   EuiHealth,
   EuiSpacer,
@@ -154,7 +154,7 @@ export const ModelDeploymentTable = ({
               anchorClassName="ml-modelModelIdCell"
             >
               {(copy) => (
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   aria-label="Copy ID to clipboard"
                   color="text"
                   iconType="copy"
@@ -176,7 +176,7 @@ export const ModelDeploymentTable = ({
         render: (id: string, modelDeploymentItem: ModelDeploymentItem) => {
           return (
             <EuiToolTip content="View status details">
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={() => {
                   onViewDetail?.(modelDeploymentItem);
                 }}
diff --git a/public/components/monitoring/search_bar.tsx b/public/components/monitoring/search_bar.tsx
index 6319918d..39eec9d6 100644
--- a/public/components/monitoring/search_bar.tsx
+++ b/public/components/monitoring/search_bar.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useMemo, useCallback } from 'react';
-import { EuiFieldSearch } from '@elastic/eui';
+import { EuiCompressedFieldSearch } from '@elastic/eui';
 import { debounce } from 'lodash';
 interface SearchBarProps {
   onSearch: (value: string) => void;
@@ -20,7 +20,7 @@ export const SearchBar = ({ onSearch, inputRef }: SearchBarProps) => {
   );
 
   return (
-    <EuiFieldSearch
+    <EuiCompressedFieldSearch
       autoFocus
       inputRef={inputRef}
       placeholder="Search by model name or ID"
diff --git a/public/components/status_filter/index.tsx b/public/components/status_filter/index.tsx
index 291eed41..836ad801 100644
--- a/public/components/status_filter/index.tsx
+++ b/public/components/status_filter/index.tsx
@@ -8,7 +8,7 @@ import {
   EuiPopover,
   EuiPopoverTitle,
   EuiFilterGroup,
-  EuiFilterButton,
+  EuiSmallFilterButton,
   EuiSelectable,
   EuiSelectableOption,
   EuiIcon,
@@ -66,7 +66,7 @@ export const StatusFilter = ({ onUpdateFilters, options, loading }: Props) => {
   );
 
   const button = (
-    <EuiFilterButton
+    <EuiSmallFilterButton
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
@@ -76,7 +76,7 @@ export const StatusFilter = ({ onUpdateFilters, options, loading }: Props) => {
       isLoading={loading}
     >
       Status
-    </EuiFilterButton>
+    </EuiSmallFilterButton>
   );
 
   return (