Use smaller and compressed varients of buttons and form components (#257

) Signed-off-by: Miki <[email protected]>
opensearch-project · Aug 2, 2024 · 9f9f74e · 9f9f74e
1 parent 83e6b5e
commit 9f9f74e
Show file tree

Hide file tree

Showing 17 changed files with 62 additions and 62 deletions.
diff --git 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
@@ -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
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
 } from '@elastic/eui';
 import {
   DEFAULT_NEW_WORKFLOW_STATE,
@@ -59,15 +59,15 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
         </EuiFlexGroup>
       }
       rightSideItems={[
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           style={{ marginTop: '8px' }}
           onClick={() => {
             // TODO: add lightweight save here when available
             history.replace(APP_PATH.WORKFLOWS);
           }}
         >
           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
diff --git a/public/pages/workflow_detail/prototype/query_executor.tsx b/public/pages/workflow_detail/prototype/query_executor.tsx
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)}