Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Backport 2.x] Use smaller and compressed varients of buttons and form components #259

Merged
merged 1 commit into from
Aug 2, 2024
Merged

[Backport 2.x] Use smaller and compressed varients of buttons and form components #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions public/general_components/delete_workflow_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

import React from 'react';
import {
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiModal,
EuiModalBody,
EuiModalFooter,
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions public/general_components/multi_select_filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
EuiFilterSelectItem,
EuiFilterGroup,
EuiPopover,
EuiFilterButton,
EuiSmallFilterButton,
EuiFlexItem,
} from '@elastic/eui';

Expand Down Expand Up @@ -57,7 +57,7 @@ export function MultiSelectFilter(props: MultiSelectFilterProps) {
<EuiFilterGroup>
<EuiPopover
button={
<EuiFilterButton
<EuiSmallFilterButton
iconType="arrowDown"
onClick={onButtonClick}
isSelected={isPopoverOpen}
Expand All @@ -72,7 +72,7 @@ export function MultiSelectFilter(props: MultiSelectFilterProps) {
}
>
{props.title}
</EuiFilterButton>
</EuiSmallFilterButton>
}
isOpen={isPopoverOpen}
closePopover={onPopoverClose}
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiButtonEmpty,
EuiSmallButtonEmpty,
} from '@elastic/eui';
import {
DEFAULT_NEW_WORKFLOW_STATE,
Expand Down Expand Up @@ -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>,
Expand Down
Empty file added public/pages/workflow_detail/prototype/ingestor.tsx
View file
Open in desktop
Empty file.
Empty file added public/pages/workflow_detail/prototype/query_executor.tsx
View file
Open in desktop
Empty file.
4 changes: 2 additions & 2 deletions public/pages/workflow_detail/workflow_inputs/export_options/export_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiRadioGroup,
EuiCompressedRadioGroup,
} from '@elastic/eui';
import { Workflow } from '../../../../../common';
import { reduceToTemplate } from '../../../../utils';
Expand Down Expand Up @@ -59,7 +59,7 @@ export function ExportOptions(props: SearchInputsProps) {
return (
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiRadioGroup
<EuiCompressedRadioGroup
options={exportOptions}
idSelected={selectedOption}
onChange={(option) => {
Expand Down
9 changes: 5 additions & 4 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import React, { useEffect, useState } from 'react';
import { useFormikContext } from 'formik';
import {
EuiButton,
EuiFilePicker,
EuiSmallButton,
EuiCompressedFilePicker,
EuiFlexGroup,
EuiFlexItem,
EuiModal,
Expand Down Expand Up @@ -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"
Expand All @@ -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>
)}
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/boolean_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/json_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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={
Expand Down Expand Up @@ -87,7 +87,7 @@ export function JsonField(props: JsonFieldProps) {
aria-label="Code Editor"
tabSize={2}
/>
</EuiFormRow>
</EuiCompressedFormRow>
);
}}
</Field>
Expand Down
10 changes: 5 additions & 5 deletions public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
import React from 'react';
import {
EuiButton,
EuiButtonIcon,
EuiSmallButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiCompressedFormRow,
EuiIcon,
EuiLink,
EuiText,
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -155,7 +155,7 @@ export function MapField(props: MapFieldProps) {
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
<EuiSmallButtonIcon
style={{ marginTop: '8px' }}
iconType={'trash'}
color="danger"
Expand Down Expand Up @@ -184,7 +184,7 @@ export function MapField(props: MapFieldProps) {
</div>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiCompressedFormRow>
);
}}
</Field>
Expand Down
10 changes: 5 additions & 5 deletions public/pages/workflow_detail/workflow_inputs/input_fields/model_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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">
Expand All @@ -96,7 +96,7 @@ export function ModelField(props: ModelFieldProps) {
}
helpText={'The model ID.'}
>
<EuiSuperSelect
<EuiCompressedSuperSelect
options={deployedModels.map(
(option) =>
({
Expand Down Expand Up @@ -135,7 +135,7 @@ export function ModelField(props: ModelFieldProps) {
: undefined
}
/>
</EuiFormRow>
</EuiCompressedFormRow>
);
}}
</Field>
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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={
Expand All @@ -55,7 +55,7 @@ export function TextField(props: TextFieldProps) {
props.onFormChange();
}}
/>
</EuiFormRow>
</EuiCompressedFormRow>
);
}}
</Field>
Expand Down
10 changes: 5 additions & 5 deletions public/pages/workflow_detail/workflow_inputs/processors_list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

import React, { useEffect, useState } from 'react';
import {
EuiButton,
EuiButtonIcon,
EuiSmallButton,
EuiSmallButtonIcon,
EuiContextMenu,
EuiFlexGroup,
EuiFlexItem,
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -177,7 +177,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
<div>
<EuiPopover
button={
<EuiButton
<EuiSmallButton
iconType="arrowDown"
iconSide="right"
size="s"
Expand All @@ -188,7 +188,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
{processors.length > 0
? 'Add another processor'
: 'Add processor'}
</EuiButton>
</EuiSmallButton>
}
isOpen={isPopoverOpen}
closePopover={closePopover}
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflows/empty_list_message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import React from 'react';
import {
EuiButton,
EuiSmallButton,
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
Expand Down Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions public/pages/workflows/new_workflow/new_workflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
EuiFlexItem,
EuiFlexGrid,
EuiFlexGroup,
EuiFieldSearch,
EuiCompressedFieldSearch,
EuiLoadingSpinner,
} from '@elastic/eui';
import { useSelector } from 'react-redux';
Expand Down Expand Up @@ -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)}
Expand Down
Loading
Loading