Use smaller and compressed varients of buttons and form components (o…

…pensearch-project#336) Signed-off-by: saimedhi <[email protected]> Signed-off-by: Sai Medhini Reddy Maryada <[email protected]>
ohltyler · Sep 3, 2024 · 82a50d7 · 82a50d7
1 parent 8461369
commit 82a50d7
Show file tree

Hide file tree

Showing 16 changed files with 74 additions and 80 deletions.
diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
@@ -122,7 +122,7 @@ export function Tools(props: ToolsProps) {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiTabs size="m" expand={false}>
+          <EuiTabs size="s" expand={false}>
             {inputTabs.map((tab, idx) => {
               return (
                 <EuiTab

diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
@@ -9,7 +9,7 @@ import { useSelector } from 'react-redux';
 import { ReactFlowProvider } from 'reactflow';
 import { escape } from 'lodash';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -115,13 +115,13 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
         />
       </EuiFlexItem>
       <EuiFlexItem grow={7}>
-        <EuiButton
+        <EuiSmallButton
           style={{ width: '200px' }}
           fill={false}
           href={constructHrefWithDataSourceId(APP_PATH.WORKFLOWS, dataSourceId)}
         >
           Return to home
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   ) : (

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
@@ -6,7 +6,6 @@
 import React, { useEffect, useState } from 'react';
 import { useFormikContext } from 'formik';
 import {
-  EuiButton,
   EuiSmallButton,
   EuiCompressedFilePicker,
   EuiFlexGroup,
@@ -109,14 +108,13 @@ export function SourceData(props: SourceDataProps) {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill={false}
             style={{ width: '100px' }}
-            size="s"
             onClick={() => setIsEditModalOpen(true)}
           >
             Edit
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <JsonField

diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx
@@ -9,7 +9,7 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiPanel,
   EuiSmallButton,
@@ -87,7 +87,7 @@ export function MapArrayField(props: MapArrayFieldProps) {
           field.value[0].length > 0;
 
         return (
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth={true}
             key={props.fieldPath}
             label={props.label}
@@ -188,7 +188,7 @@ export function MapArrayField(props: MapArrayFieldProps) {
                 </div>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         );
       }}
     </Field>

diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/number_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/number_field.tsx
@@ -9,7 +9,7 @@ import {
   EuiCompressedFormRow,
   EuiLink,
   EuiText,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
 } from '@elastic/eui';
 import { WorkspaceFormValues } from '../../../../../common';
 import { camelCaseToTitleString, getInitialValue } from '../../../../utils';
@@ -49,10 +49,9 @@ export function NumberField(props: NumberFieldProps) {
             error={props.showError && getIn(errors, field.name)}
             isInvalid={getIn(errors, field.name) && getIn(touched, field.name)}
           >
-            <EuiFieldNumber
+            <EuiCompressedFieldNumber
               {...field}
               placeholder={props.placeholder || ''}
-              compressed={false}
               value={field.value || getInitialValue('number')}
               onChange={(e) => {
                 form.setFieldValue(props.fieldPath, e.target.value);

diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/select_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/select_field.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { Field, FieldProps, getIn, useFormikContext } from 'formik';
 import {
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSuperSelect,
   EuiSuperSelectOption,
   EuiText,
@@ -30,7 +30,7 @@ export function SelectField(props: SelectFieldProps) {
     <Field name={props.fieldPath}>
       {({ field, form }: FieldProps) => {
         return (
-          <EuiFormRow label={camelCaseToTitleString(props.field.id)}>
+          <EuiCompressedFormRow label={camelCaseToTitleString(props.field.id)}>
             <EuiSuperSelect
               options={
                 props.field.selectOptions
@@ -63,7 +63,7 @@ export function SelectField(props: SelectFieldProps) {
                   : 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
@@ -6,7 +6,7 @@
 import React from 'react';
 import { Field, FieldProps, getIn, useFormikContext } from 'formik';
 import {
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiCompressedFormRow,
   EuiLink,
   EuiText,
@@ -50,11 +50,10 @@ export function TextField(props: TextFieldProps) {
             error={props.showError && getIn(errors, field.name)}
             isInvalid={getIn(errors, field.name) && getIn(touched, field.name)}
           >
-            <EuiFieldText
+            <EuiCompressedFieldText
               fullWidth={props.fullWidth}
               {...field}
               placeholder={props.placeholder || ''}
-              compressed={false}
               value={field.value || getInitialValue('string')}
               onChange={(e) => {
                 form.setFieldValue(props.fieldPath, e.target.value);

diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx
@@ -15,7 +15,7 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSelectOption,
   EuiSmallButton,
   EuiSpacer,
@@ -274,9 +274,8 @@ export function InputTransformModal(props: InputTransformModalProps) {
           </EuiFlexItem>
           <EuiFlexItem>
             <>
-              <EuiSelect
+              <EuiCompressedSelect
                 prepend={<EuiText>Expected output for</EuiText>}
-                compressed={true}
                 options={outputOptions}
                 value={selectedOutputOption}
                 onChange={(e) => {

diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx
@@ -8,7 +8,7 @@ import { getIn, useFormikContext } from 'formik';
 import { useSelector } from 'react-redux';
 import {
   EuiAccordion,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
@@ -199,16 +199,15 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
                     : 'Preview is unavailable for multiple search request processors'
                 }
               >
-                <EuiButtonEmpty
+                <EuiSmallButtonEmpty
                   disabled={!isInputPreviewAvailable}
                   style={{ width: '100px', paddingTop: '8px' }}
-                  size="s"
                   onClick={() => {
                     setIsInputTransformModalOpen(true);
                   }}
                 >
                   Preview
-                </EuiButtonEmpty>
+                </EuiSmallButtonEmpty>
               </EuiToolTip>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -249,16 +248,15 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
                     : 'Preview of model outputs is unavailable for search request processors'
                 }
               >
-                <EuiButtonEmpty
+                <EuiSmallButtonEmpty
                   disabled={!isOutputPreviewAvailable}
                   style={{ width: '100px', paddingTop: '8px' }}
-                  size="s"
                   onClick={() => {
                     setIsOutputTransformModalOpen(true);
                   }}
                 >
                   Preview
-                </EuiButtonEmpty>
+                </EuiSmallButtonEmpty>
               </EuiToolTip>
             </EuiFlexItem>
           </EuiFlexGroup>

diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx
@@ -15,7 +15,7 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSelectOption,
   EuiSmallButton,
   EuiSpacer,
@@ -257,9 +257,8 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
           </EuiFlexItem>
           <EuiFlexItem>
             <>
-              <EuiSelect
+              <EuiCompressedSelect
                 prepend={<EuiText>Expected output for</EuiText>}
-                compressed={true}
                 options={outputOptions}
                 value={selectedOutputOption}
                 onChange={(e) => {

diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx
@@ -7,12 +7,11 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useFormikContext } from 'formik';
 import {
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
-  EuiSmallButton,
+  EuiCompressedFormRow,
   EuiSuperSelect,
   EuiSuperSelectOption,
   EuiText,
@@ -98,9 +97,9 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormRow label="Retrieval index">
+          <EuiCompressedFormRow label="Retrieval index">
             {ingestEnabled ? (
-              <EuiFieldText
+              <EuiCompressedFieldText
                 value={values?.ingest?.index?.name}
                 readOnly={true}
               />
@@ -123,17 +122,16 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
                 isInvalid={selectedIndex === undefined}
               />
             )}
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill={false}
             style={{ width: '100px' }}
-            size="s"
             onClick={() => setIsEditModalOpen(true)}
           >
             Edit
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <JsonField

diff --git a/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx b/public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx
@@ -7,7 +7,6 @@ import React, { useState } from 'react';
 import { useFormikContext } from 'formik';
 import {
   EuiSmallButton,
-  EuiButton,
   EuiContextMenu,
   EuiModal,
   EuiModalBody,
@@ -87,13 +86,13 @@ export function EditQueryModal(props: EditQueryModalProps) {
         />
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButton
+        <EuiSmallButton
           onClick={() => props.setModalOpen(false)}
           fill={false}
           color="primary"
         >
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );