From fe93f511837a3766e416cc6e540d68f5334461d7 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 2 Aug 2024 15:40:03 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components  (#257) (#259)

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit 9f9f74efee1b15b08ba6603e89de2f304374cf0f)

Co-authored-by: Miki <amoo_miki@yahoo.com>
---
 .../delete_workflow_modal.tsx                 | 10 +++----
 .../multi_select_filter.tsx                   |  6 ++---
 .../workflow_detail/components/header.tsx     |  6 ++---
 .../workflow_detail/prototype/ingestor.tsx    |  0
 .../prototype/query_executor.tsx              |  0
 .../export_options/export_options.tsx         |  4 +--
 .../ingest_inputs/source_data.tsx             |  9 ++++---
 .../input_fields/boolean_field.tsx            |  6 ++---
 .../input_fields/json_field.tsx               |  6 ++---
 .../input_fields/map_field.tsx                | 10 +++----
 .../input_fields/model_field.tsx              | 10 +++----
 .../input_fields/text_field.tsx               |  6 ++---
 .../workflow_inputs/processors_list.tsx       | 10 +++----
 public/pages/workflows/empty_list_message.tsx |  6 ++---
 .../workflows/new_workflow/new_workflow.tsx   |  4 +--
 .../pages/workflows/new_workflow/use_case.tsx | 27 +++++++++----------
 .../workflows/workflow_list/workflow_list.tsx |  4 +--
 17 files changed, 62 insertions(+), 62 deletions(-)
 create mode 100644 public/pages/workflow_detail/prototype/ingestor.tsx
 create mode 100644 public/pages/workflow_detail/prototype/query_executor.tsx

diff --git a/public/general_components/delete_workflow_modal.tsx b/public/general_components/delete_workflow_modal.tsx
index b15e0a97..081ef4ee 100644
--- a/public/general_components/delete_workflow_modal.tsx
+++ b/public/general_components/delete_workflow_modal.tsx
@@ -5,8 +5,8 @@
 
 import React from 'react';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -40,10 +40,10 @@ export function DeleteWorkflowModal(props: DeleteWorkflowModalProps) {
         </EuiText>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={props.onClose}> Cancel</EuiButtonEmpty>
-        <EuiButton onClick={props.onConfirm} fill={true} color="danger">
+        <EuiSmallButtonEmpty onClick={props.onClose}> Cancel</EuiSmallButtonEmpty>
+        <EuiSmallButton onClick={props.onConfirm} fill={true} color="danger">
           Delete
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/general_components/multi_select_filter.tsx b/public/general_components/multi_select_filter.tsx
index 5825da62..815149c1 100644
--- a/public/general_components/multi_select_filter.tsx
+++ b/public/general_components/multi_select_filter.tsx
@@ -8,7 +8,7 @@ import {
   EuiFilterSelectItem,
   EuiFilterGroup,
   EuiPopover,
-  EuiFilterButton,
+  EuiSmallFilterButton,
   EuiFlexItem,
 } from '@elastic/eui';
 
@@ -57,7 +57,7 @@ export function MultiSelectFilter(props: MultiSelectFilterProps) {
       <EuiFilterGroup>
         <EuiPopover
           button={
-            <EuiFilterButton
+            <EuiSmallFilterButton
               iconType="arrowDown"
               onClick={onButtonClick}
               isSelected={isPopoverOpen}
@@ -72,7 +72,7 @@ export function MultiSelectFilter(props: MultiSelectFilterProps) {
               }
             >
               {props.title}
-            </EuiFilterButton>
+            </EuiSmallFilterButton>
           }
           isOpen={isPopoverOpen}
           closePopover={onPopoverClose}
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
index 4de598a2..bc5c129d 100644
--- a/public/pages/workflow_detail/components/header.tsx
+++ b/public/pages/workflow_detail/components/header.tsx
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
 } from '@elastic/eui';
 import {
   DEFAULT_NEW_WORKFLOW_STATE,
@@ -59,7 +59,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
         </EuiFlexGroup>
       }
       rightSideItems={[
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           style={{ marginTop: '8px' }}
           onClick={() => {
             // TODO: add lightweight save here when available
@@ -67,7 +67,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
           }}
         >
           Close
-        </EuiButtonEmpty>,
+        </EuiSmallButtonEmpty>,
         <EuiText style={{ marginTop: '16px' }} color="subdued" size="s">
           {`Last updated: ${workflowLastUpdated}`}
         </EuiText>,
diff --git a/public/pages/workflow_detail/prototype/ingestor.tsx b/public/pages/workflow_detail/prototype/ingestor.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/public/pages/workflow_detail/prototype/query_executor.tsx b/public/pages/workflow_detail/prototype/query_executor.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/public/pages/workflow_detail/workflow_inputs/export_options/export_options.tsx b/public/pages/workflow_detail/workflow_inputs/export_options/export_options.tsx
index 409ca35e..f239a5c0 100644
--- a/public/pages/workflow_detail/workflow_inputs/export_options/export_options.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/export_options/export_options.tsx
@@ -9,7 +9,7 @@ import {
   EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiRadioGroup,
+  EuiCompressedRadioGroup,
 } from '@elastic/eui';
 import { Workflow } from '../../../../../common';
 import { reduceToTemplate } from '../../../../utils';
@@ -59,7 +59,7 @@ export function ExportOptions(props: SearchInputsProps) {
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={false}>
-        <EuiRadioGroup
+        <EuiCompressedRadioGroup
           options={exportOptions}
           idSelected={selectedOption}
           onChange={(option) => {
diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
index fcc82042..10a1aef7 100644
--- a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
@@ -7,7 +7,8 @@ import React, { useEffect, useState } from 'react';
 import { useFormikContext } from 'formik';
 import {
   EuiButton,
-  EuiFilePicker,
+  EuiSmallButton,
+  EuiCompressedFilePicker,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -70,7 +71,7 @@ export function SourceData(props: SourceDataProps) {
                 Upload a JSON file or enter manually.
               </EuiText>{' '}
               <EuiSpacer size="s" />
-              <EuiFilePicker
+              <EuiCompressedFilePicker
                 accept="application/json"
                 multiple={false}
                 initialPromptText="Upload file"
@@ -94,13 +95,13 @@ export function SourceData(props: SourceDataProps) {
             </>
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButton
+            <EuiSmallButton
               onClick={() => setIsEditModalOpen(false)}
               fill={false}
               color="primary"
             >
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       )}
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx
index 660f2b38..98368d5d 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { Field, FieldProps } from 'formik';
-import { EuiRadioGroup, EuiRadioGroupOption } from '@elastic/eui';
+import { EuiCompressedRadioGroup, EuiRadioGroupOption } from '@elastic/eui';
 
 interface BooleanFieldProps {
   fieldPath: string; // the full path in string-form to the field (e.g., 'ingest.enrich.processors.text_embedding_processor.inputField')
@@ -15,14 +15,14 @@ interface BooleanFieldProps {
 }
 
 /**
- * An input field for a boolean value. Implemented as an EuiRadioGroup with 2 mutually exclusive options.
+ * An input field for a boolean value. Implemented as an EuiCompressedRadioGroup with 2 mutually exclusive options.
  */
 export function BooleanField(props: BooleanFieldProps) {
   return (
     <Field name={props.fieldPath}>
       {({ field, form }: FieldProps) => {
         return (
-          <EuiRadioGroup
+          <EuiCompressedRadioGroup
             options={[props.enabledOption, props.disabledOption]}
             idSelected={
               field.value === undefined || field.value === true
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx
index 44584a9f..833d4c00 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx
@@ -5,7 +5,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Field, FieldProps, getIn, useFormikContext } from 'formik';
-import { EuiCodeEditor, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
+import { EuiCodeEditor, EuiCompressedFormRow, EuiLink, EuiText } from '@elastic/eui';
 import { WorkspaceFormValues } from '../../../../../common';
 
 interface JsonFieldProps {
@@ -42,7 +42,7 @@ export function JsonField(props: JsonFieldProps) {
     <Field name={props.fieldPath}>
       {({ field, form }: FieldProps) => {
         return (
-          <EuiFormRow
+          <EuiCompressedFormRow
             key={props.fieldPath}
             label={props.label}
             labelAppend={
@@ -87,7 +87,7 @@ export function JsonField(props: JsonFieldProps) {
               aria-label="Code Editor"
               tabSize={2}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         );
       }}
     </Field>
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
index d601a961..b8664da2 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
@@ -6,10 +6,10 @@
 import React from 'react';
 import {
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiIcon,
   EuiLink,
   EuiText,
@@ -70,7 +70,7 @@ export function MapField(props: MapFieldProps) {
     <Field name={props.fieldPath} key={props.fieldPath}>
       {({ field, form }: FieldProps) => {
         return (
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth={true}
             key={props.fieldPath}
             label={props.label}
@@ -155,7 +155,7 @@ export function MapField(props: MapFieldProps) {
                         </EuiFlexGroup>
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           style={{ marginTop: '8px' }}
                           iconType={'trash'}
                           color="danger"
@@ -184,7 +184,7 @@ export function MapField(props: MapFieldProps) {
                 </div>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         );
       }}
     </Field>
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
index e1837f0f..d42de5b3 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
@@ -8,10 +8,10 @@ import { useSelector } from 'react-redux';
 import { Field, FieldProps, getIn, useFormikContext } from 'formik';
 import {
   EuiCallOut,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
   EuiSuperSelectOption,
   EuiText,
 } from '@elastic/eui';
@@ -85,7 +85,7 @@ export function ModelField(props: ModelFieldProps) {
       <Field name={props.fieldPath}>
         {({ field, form }: FieldProps) => {
           return (
-            <EuiFormRow
+            <EuiCompressedFormRow
               label={'Model'}
               labelAppend={
                 <EuiText size="xs">
@@ -96,7 +96,7 @@ export function ModelField(props: ModelFieldProps) {
               }
               helpText={'The model ID.'}
             >
-              <EuiSuperSelect
+              <EuiCompressedSuperSelect
                 options={deployedModels.map(
                   (option) =>
                     ({
@@ -135,7 +135,7 @@ export function ModelField(props: ModelFieldProps) {
                     : undefined
                 }
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           );
         }}
       </Field>
diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx
index e9c40447..25d76f67 100644
--- a/public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { Field, FieldProps, getIn, useFormikContext } from 'formik';
-import { EuiFieldText, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
+import { EuiFieldText, EuiCompressedFormRow, EuiLink, EuiText } from '@elastic/eui';
 import { WorkspaceFormValues } from '../../../../../common';
 import { getInitialValue } from '../../../../utils';
 
@@ -29,7 +29,7 @@ export function TextField(props: TextFieldProps) {
     <Field name={props.fieldPath}>
       {({ field, form }: FieldProps) => {
         return (
-          <EuiFormRow
+          <EuiCompressedFormRow
             key={props.fieldPath}
             label={props.label}
             labelAppend={
@@ -55,7 +55,7 @@ export function TextField(props: TextFieldProps) {
                 props.onFormChange();
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         );
       }}
     </Field>
diff --git a/public/pages/workflow_detail/workflow_inputs/processors_list.tsx b/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
index 37b3144e..638bf926 100644
--- a/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
+++ b/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
@@ -5,8 +5,8 @@
 
 import React, { useEffect, useState } from 'react';
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiContextMenu,
   EuiFlexGroup,
   EuiFlexItem,
@@ -145,7 +145,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
                   <EuiText>{processor.name || 'Processor'}</EuiText>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     iconType={'trash'}
                     color="danger"
                     aria-label="Delete"
@@ -177,7 +177,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
         <div>
           <EuiPopover
             button={
-              <EuiButton
+              <EuiSmallButton
                 iconType="arrowDown"
                 iconSide="right"
                 size="s"
@@ -188,7 +188,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
                 {processors.length > 0
                   ? 'Add another processor'
                   : 'Add processor'}
-              </EuiButton>
+              </EuiSmallButton>
             }
             isOpen={isPopoverOpen}
             closePopover={closePopover}
diff --git a/public/pages/workflows/empty_list_message.tsx b/public/pages/workflows/empty_list_message.tsx
index 79e6eda4..e30cd343 100644
--- a/public/pages/workflows/empty_list_message.tsx
+++ b/public/pages/workflows/empty_list_message.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -34,9 +34,9 @@ export function EmptyListMessage(props: EmptyListMessageProps) {
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiButton fill={false} onClick={props.onClickNewWorkflow}>
+        <EuiSmallButton fill={false} onClick={props.onClickNewWorkflow}>
           New workflow
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/public/pages/workflows/new_workflow/new_workflow.tsx b/public/pages/workflows/new_workflow/new_workflow.tsx
index 108aa2be..f3d29762 100644
--- a/public/pages/workflows/new_workflow/new_workflow.tsx
+++ b/public/pages/workflows/new_workflow/new_workflow.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexItem,
   EuiFlexGrid,
   EuiFlexGroup,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiLoadingSpinner,
 } from '@elastic/eui';
 import { useSelector } from 'react-redux';
@@ -73,7 +73,7 @@ export function NewWorkflow(props: NewWorkflowProps) {
   return (
     <EuiFlexGroup direction="column">
       <EuiFlexItem grow={true}>
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           fullWidth={true}
           placeholder="Search"
           onChange={(e) => debounceSearchQuery(e.target.value)}
diff --git a/public/pages/workflows/new_workflow/use_case.tsx b/public/pages/workflows/new_workflow/use_case.tsx
index fe8b6a61..0262836a 100644
--- a/public/pages/workflows/new_workflow/use_case.tsx
+++ b/public/pages/workflows/new_workflow/use_case.tsx
@@ -12,15 +12,15 @@ import {
   EuiTitle,
   EuiCard,
   EuiHorizontalRule,
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiModalBody,
   EuiModalFooter,
-  EuiButtonEmpty,
-  EuiFieldText,
-  EuiFormRow,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
 } from '@elastic/eui';
 import { Workflow } from '../../../../common';
 import { APP_PATH } from '../../../utils';
@@ -53,26 +53,25 @@ export function UseCase(props: UseCaseProps) {
             </EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
-            <EuiFormRow
+            <EuiCompressedFormRow
               label={'Name'}
               error={'Name cannot be empty'}
               isInvalid={workflowName === ''}
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 placeholder={processWorkflowName(props.workflow.name)}
-                compressed={false}
                 value={workflowName}
                 onChange={(e) => {
                   setWorkflowName(e.target.value);
                 }}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={() => setIsNameModalOpen(false)}>
+            <EuiSmallButtonEmpty onClick={() => setIsNameModalOpen(false)}>
               Cancel
-            </EuiButtonEmpty>
-            <EuiButton
+            </EuiSmallButtonEmpty>
+            <EuiSmallButton
               disabled={workflowName === ''}
               onClick={() => {
                 const workflowToCreate = {
@@ -94,7 +93,7 @@ export function UseCase(props: UseCaseProps) {
               color="primary"
             >
               Create
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       )}
@@ -115,7 +114,7 @@ export function UseCase(props: UseCaseProps) {
           </EuiFlexItem>
           <EuiFlexGroup direction="column" alignItems="center">
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 disabled={false}
                 isLoading={false}
                 onClick={() => {
@@ -123,7 +122,7 @@ export function UseCase(props: UseCaseProps) {
                 }}
               >
                 Go
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexGroup>
diff --git a/public/pages/workflows/workflow_list/workflow_list.tsx b/public/pages/workflows/workflow_list/workflow_list.tsx
index 9e7c0a2a..70972512 100644
--- a/public/pages/workflows/workflow_list/workflow_list.tsx
+++ b/public/pages/workflows/workflow_list/workflow_list.tsx
@@ -12,7 +12,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFilterSelectItem,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiLoadingSpinner,
   EuiFlyout,
   EuiFlyoutHeader,
@@ -186,7 +186,7 @@ export function WorkflowList(props: WorkflowListProps) {
         <EuiFlexItem>
           <EuiFlexGroup direction="row" gutterSize="m">
             <EuiFlexItem grow={true}>
-              <EuiFieldSearch
+              <EuiCompressedFieldSearch
                 fullWidth={true}
                 placeholder="Search"
                 onChange={(e) => debounceSearchQuery(e.target.value)}