Skip to content
This repository has been archived by the owner on Nov 13, 2024. It is now read-only.

DEX-1270 remove id from optionEditor #412

Merged
merged 7 commits into from
Jul 7, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 2 additions & 1 deletion locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1127,5 +1127,6 @@
"PAGINATION_FIRST_PAGE": "first page",
"PAGINATION_LAST_PAGE": "last page",
"PAGINATION_PREVIOUS_PAGE": "previous page",
"PAGINATION_NEXT_PAGE": "next page"
"PAGINATION_NEXT_PAGE": "next page",
"UNFINISHED_OPTIONS": "Options must have valid values and labels and unique values"
}
27 changes: 22 additions & 5 deletions src/components/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
import { FormattedMessage } from 'react-intl';
import { useTheme } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import CircularProgress from '@material-ui/core/CircularProgress';
import BackIcon from '@material-ui/icons/KeyboardBackspace';

Expand All @@ -25,7 +26,6 @@ const Core = function (
let spinnerStyles = {
color: theme.palette.common.white,
};

if (display === 'back') {
return (
<Button
Expand Down Expand Up @@ -136,22 +136,39 @@ const Core = function (
);
};

const ButtonWithTooltip = function (
{ showTooltip = false, tooltipText = '', ...rest },
ref,
) {
if (showTooltip)
return (
<Tooltip title={tooltipText}>
<span>
<CoreForwardRef ref={ref} {...rest} />
</span>
</Tooltip>
);
else return <CoreForwardRef ref={ref} {...rest} />;
};

const CoreForwardRef = forwardRef(Core);

const ButtonForwardRef = forwardRef(ButtonWithTooltip);

function CustomButton(
{ id, domId = undefined, values, children, ...rest },
ref,
) {
if (!id)
return (
<CoreForwardRef id={domId} ref={ref} {...rest}>
<ButtonForwardRef id={domId} ref={ref} {...rest}>
{children}
</CoreForwardRef>
</ButtonForwardRef>
);
return (
<CoreForwardRef id={domId} ref={ref} {...rest}>
<ButtonForwardRef id={domId} ref={ref} {...rest}>
<FormattedMessage id={id} values={values} />
</CoreForwardRef>
</ButtonForwardRef>
);
}

Expand Down
41 changes: 33 additions & 8 deletions src/pages/fieldManagement/settings/saveField/OptionEditor.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { v4 as uuid } from 'uuid';
import { useIntl, FormattedMessage } from 'react-intl';
import { map, some, uniqBy } from 'lodash-es';

import FormControl from '@material-ui/core/FormControl';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
Expand All @@ -19,9 +20,22 @@ export default function OptionEditor({
onChange,
...rest
}) {
const intl = useIntl();
const options = value || [];
const displayedOptions =
options.length > 0 ? options : [{ label: '', value: '', id: 6 }];
options.length > 0 ? options : [{ label: '', value: '' }];

const areAllOptionsNonEmpty = !some(
displayedOptions,
option => !option?.value || !option?.label,
);

const areAllValuesUnique =
uniqBy(displayedOptions, option => option?.value).length ===
displayedOptions.length;

const areAllOptionsValid =
areAllOptionsNonEmpty && areAllValuesUnique;

return (
<StandardDialog
Expand All @@ -30,9 +44,9 @@ export default function OptionEditor({
titleId="OPTION_EDITOR"
>
<DialogContent style={{ minWidth: 200 }}>
{displayedOptions.map((option, optionIndex) => {
{map(displayedOptions, (option, optionIndex) => {
const otherOptions = options.filter(
o => o.id !== option.id,
(o, oIdx) => oIdx !== optionIndex,
);
const showDeleteButton = displayedOptions.length !== 1;
return (
Expand All @@ -42,7 +56,7 @@ export default function OptionEditor({
flexDirection: 'column',
marginBottom: 12,
}}
key={option.id}
key={optionIndex}
>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Text variant="subtitle2" id="OPTION" />
Expand Down Expand Up @@ -98,7 +112,6 @@ export default function OptionEditor({
{
label: '',
value: '',
id: uuid(),
},
]);
}}
Expand All @@ -112,7 +125,19 @@ export default function OptionEditor({
</Button>
</DialogContent>
<DialogActions style={{ padding: '0px 24px 24px 24px' }}>
<Button display="primary" onClick={onSubmit}>
<Button
disabled={!areAllOptionsValid}
showTooltip={!areAllOptionsValid}
tooltipText={
!areAllOptionsValid
? intl.formatMessage({
id: 'UNFINISHED_OPTIONS',
})
: undefined
}
display="primary"
onClick={onSubmit}
>
<FormattedMessage id="FINISH" />
</Button>
</DialogActions>
Expand Down