Skip to content

Commit

Permalink
[Look&Feel] Use smaller and compressed varients of buttons and form c…
Browse files Browse the repository at this point in the history 
…omponents (opensearch-project#826)
  • Loading branch information
@AMoo-Miki
AMoo-Miki authored Aug 17, 2024
1 parent 7940942 commit 3203e43
Show file tree
Hide file tree
Showing 92 changed files with 702 additions and 701 deletions.
4 changes: 2 additions & 2 deletions public/components/ConfigCell/ConfigCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
* GitHub history for details.
*/

import { EuiText, EuiFormRow, EuiFormRowProps } from '@elastic/eui';
import { EuiText, EuiCompressedFormRow, EuiFormRowProps } from '@elastic/eui';
import React from 'react';

export const FixedWidthRow = (props: EuiFormRowProps) => (
<EuiFormRow {...props} style={{ width: '250px' }} />
<EuiCompressedFormRow {...props} style={{ width: '250px' }} />
);

interface ConfigCellProps {
Expand Down
12 changes: 6 additions & 6 deletions public/components/CreateDetectorButtons/CreateDetectorButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* GitHub history for details.
*/

import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
import React from 'react';
import { APP_PATH, PLUGIN_NAME } from '../../utils/constants';
import { useLocation } from 'react-router-dom';
Expand All @@ -23,27 +23,27 @@ export const CreateDetectorButtons = () => {
const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.CREATE_DETECTOR}`, dataSourceId, false);

const sampleDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.OVERVIEW}`, dataSourceId, false);

return (
<EuiFlexGroup direction="row" gutterSize="m" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButton
<EuiSmallButton
style={{ width: '200px' }}
href={sampleDetectorUrl}
data-test-subj="sampleDetectorButton"
>
Try a sample detector
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
<EuiSmallButton
style={{ width: '200px' }}
fill
href={createDetectorUrl}
data-test-subj="createDetectorButton"
>
Create detector
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
);
Expand Down
12 changes: 6 additions & 6 deletions .../AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import React, { useState } from 'react';
import {
EuiText,
EuiOverlayMask,
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiModal,
EuiModalHeader,
EuiModalFooter,
Expand Down Expand Up @@ -51,14 +51,14 @@ export const ConfirmUnlinkDetectorModal = (
</EuiModalBody>
<EuiModalFooter>
{isLoading ? null : (
<EuiButtonEmpty
<EuiSmallButtonEmpty
data-test-subj="cancelUnlinkButton"
onClick={props.onHide}
>
Cancel
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
)}
<EuiButton
<EuiSmallButton
data-test-subj="confirmUnlinkButton"
color="primary"
fill
Expand All @@ -70,7 +70,7 @@ export const ConfirmUnlinkDetectorModal = (
}}
>
{'Remove association'}
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down
10 changes: 5 additions & 5 deletions ...ponents/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
EuiSpacer,
EuiInMemoryTable,
EuiFlyoutBody,
EuiButton,
EuiSmallButton,
EuiFlyout,
EuiFlexItem,
EuiFlexGroup,
Expand Down Expand Up @@ -85,7 +85,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
const refs = indexPattern.references as References[];
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
setDataSourceId(foundDataSourceId);
setDataSourceId(foundDataSourceId);
} catch (error) {
console.error("Error fetching index pattern:", error);
}
Expand Down Expand Up @@ -270,7 +270,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
getDetectorList(
getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
)
);
);
};

const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
Expand Down Expand Up @@ -371,7 +371,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
</EuiFlexItem>
<EuiFlexItem grow={false}>
<div>
<EuiButton
<EuiSmallButton
data-test-subj="associateDetectorButton"
fill
disabled={associationLimitReached}
Expand All @@ -381,7 +381,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
}}
>
Associate a detector
</EuiButton>
</EuiSmallButton>
</div>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
54 changes: 27 additions & 27 deletions public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@ import {
EuiFlyoutBody,
EuiFlyoutFooter,
EuiTitle,
EuiButton,
EuiSmallButton,
EuiFormFieldset,
EuiCheckableCard,
EuiSpacer,
EuiIcon,
EuiText,
EuiSwitch,
EuiFormRow,
EuiFieldText,
EuiCheckbox,
EuiCompressedSwitch,
EuiCompressedFormRow,
EuiCompressedFieldText,
EuiCompressedCheckbox,
EuiFlexItem,
EuiFlexGroup,
EuiFieldNumber,
EuiCompressedFieldNumber,
EuiCallOut,
EuiButtonEmpty,
EuiSmallButtonEmpty,
EuiPanel,
} from '@elastic/eui';
import './styles.scss';
Expand Down Expand Up @@ -141,7 +141,7 @@ function AddAnomalyDetector({
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
const refs = indexPattern.references as References[];
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
setDataSourceId(foundDataSourceId);
setDataSourceId(foundDataSourceId);
} catch (error) {
console.error("Error fetching index pattern:", error);
}
Expand All @@ -167,7 +167,7 @@ function AddAnomalyDetector({
}
fetchData();
createEmbeddable();
}, [dataSourceId]);
}, [dataSourceId]);

const [isShowVis, setIsShowVis] = useState(false);
const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
Expand Down Expand Up @@ -311,7 +311,7 @@ function AddAnomalyDetector({
{title}
</h4>
</EuiTitle>
<EuiSwitch
<EuiCompressedSwitch
label="Show visualization"
checked={isShowVis}
onChange={() => setIsShowVis(!isShowVis)}
Expand Down Expand Up @@ -478,9 +478,9 @@ function AddAnomalyDetector({
</EuiFlexItem>
<EuiFlexItem grow={false}>
<div>
<EuiButton onClick={() => openAlerting(detectorId)}>
<EuiSmallButton onClick={() => openAlerting(detectorId)}>
Set up alerts
</EuiButton>
</EuiSmallButton>
</div>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down Expand Up @@ -684,7 +684,7 @@ function AddAnomalyDetector({
isInvalid={isInvalid(field.name, form)}
error={getError(field.name, form)}
>
<EuiFieldText
<EuiCompressedFieldText
data-test-subj="detectorNameTextInputFlyout"
isInvalid={isInvalid(field.name, form)}
{...field}
Expand Down Expand Up @@ -713,7 +713,7 @@ function AddAnomalyDetector({
alignItems="center"
>
<EuiFlexItem grow={false}>
<EuiFieldNumber
<EuiCompressedFieldNumber
id="detectionInterval"
placeholder="Detector interval"
data-test-subj="detectionInterval"
Expand Down Expand Up @@ -750,7 +750,7 @@ function AddAnomalyDetector({
>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiFieldNumber
<EuiCompressedFieldNumber
id="windowDelay"
placeholder="Window delay"
data-test-subj="windowDelay"
Expand Down Expand Up @@ -829,7 +829,7 @@ function AddAnomalyDetector({
alignItems="center"
>
<EuiFlexItem grow={false}>
<EuiFieldNumber
<EuiCompressedFieldNumber
id="shingleSize"
placeholder="Shingle size"
data-test-subj="shingleSize"
Expand Down Expand Up @@ -857,7 +857,7 @@ function AddAnomalyDetector({
{({ field, form }: FieldProps) => (
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiCheckbox
<EuiCompressedCheckbox
id={'resultIndexCheckbox'}
label="Enable custom result index"
checked={enabled}
Expand All @@ -884,18 +884,18 @@ function AddAnomalyDetector({

{enabled ? (
<EuiFlexItem>
<EuiFormRow
<EuiCompressedFormRow
label="Field"
isInvalid={isInvalid(field.name, form)}
helpText={`Custom result index name must contain less than 255 characters including the prefix "opensearch-ad-plugin-result-". Valid characters are a-z, 0-9, -(hyphen) and _(underscore).`}
>
<EuiFieldText
<EuiCompressedFieldText
id="resultIndex"
placeholder="Enter result index name"
prepend={CUSTOM_AD_RESULT_INDEX_PREFIX}
{...field}
/>
</EuiFormRow>
</EuiCompressedFormRow>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
Expand Down Expand Up @@ -960,7 +960,7 @@ function AddAnomalyDetector({

<EuiSpacer size="m" />
<EuiPanel paddingSize="none">
<EuiButton
<EuiSmallButton
className="featureButton"
data-test-subj="addFeature"
isDisabled={
Expand All @@ -972,7 +972,7 @@ function AddAnomalyDetector({
}}
>
Add another feature
</EuiButton>
</EuiSmallButton>
</EuiPanel>
<EuiSpacer size="s" />
<EuiText className="content-panel-subTitle">
Expand Down Expand Up @@ -1000,20 +1000,20 @@ function AddAnomalyDetector({
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={closeFlyout}>Cancel</EuiButtonEmpty>
<EuiSmallButtonEmpty onClick={closeFlyout}>Cancel</EuiSmallButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
{mode === FLYOUT_MODES.existing ? (
<EuiButton
<EuiSmallButton
fill={true}
data-test-subj="adAnywhereAssociateDetectorButton"
isLoading={formikProps.isSubmitting}
onClick={() => handleAssociate(selectedDetector)}
>
Associate detector
</EuiButton>
</EuiSmallButton>
) : (
<EuiButton
<EuiSmallButton
fill={true}
disabled={associationLimitReached}
data-test-subj="adAnywhereCreateDetectorButton"
Expand All @@ -1023,7 +1023,7 @@ function AddAnomalyDetector({
}}
>
Create detector
</EuiButton>
</EuiSmallButton>
)}
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
6 changes: 3 additions & 3 deletions ...whereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
EuiSpacer,
EuiIcon,
EuiText,
EuiComboBox,
EuiCompressedComboBox,
EuiLoadingSpinner,
EuiLink,
EuiFlexGroup,
Expand Down Expand Up @@ -78,7 +78,7 @@ export function AssociateExisting(
const indexPattern = await getSavedObjectsClient().get('index-pattern', associateExistingProps.indexPatternId);
const refs = indexPattern.references as References[];
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
setDataSourceId(foundDataSourceId);
setDataSourceId(foundDataSourceId);
} catch (error) {
console.error("Error fetching index pattern:", error);
}
Expand Down Expand Up @@ -228,7 +228,7 @@ export function AssociateExisting(
Eligible detectors don't include high-cardinality detectors.
</EuiText>
{existingDetectorsAvailableToAssociate ? (
<EuiComboBox
<EuiCompressedComboBox
isLoading={isLoading}
id="associate-existing__select"
options={options}
Expand Down
10 changes: 5 additions & 5 deletions public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import React from 'react';
import {
EuiTitle,
EuiSpacer,
EuiButtonIcon,
EuiButtonEmpty,
EuiSmallButtonIcon,
EuiSmallButtonEmpty,
EuiAccordion,
EuiPanel,
} from '@elastic/eui';
Expand All @@ -27,7 +27,7 @@ const EnhancedAccordion = ({
}) => (
<div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard">
<div className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner">
<EuiButtonIcon
<EuiSmallButtonIcon
color="text"
iconType="arrowRight"
aria-label="Expand"
Expand Down Expand Up @@ -76,10 +76,10 @@ const EnhancedAccordion = ({
</EuiAccordion>
)}
{isButton && (
<EuiButtonEmpty
<EuiSmallButtonEmpty
iconType={iconType}
className="enhanced-accordion__button"
></EuiButtonEmpty>
></EuiSmallButtonEmpty>
)}
</div>
</div>
Expand Down
Loading

0 comments on commit 3203e43

Please sign in to comment.