admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

validation on Select field (#8316)

Browse Source 
fix #8204
I changed "API keys" to "API values".
Stopped inputting special characters in Select field option keys.

@lucasbordeau please check the changes and tell me if I need to do any
other changes. :)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Ketan Mehta
2024-11-14 22:16:18 +05:30
committed by GitHub
parent 15b8b9b158
commit 51c54d4c5b
22 changed files with 96 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
View File

@ -266,7 +266,7 @@ export const SettingsDataModelFieldSelectForm = ({
color={MAIN_COLORS.yellow}
/>
</StyledIconContainer>
<StyledApiKey>API keys</StyledApiKey>
<StyledApiKey>API values</StyledApiKey>
</StyledApiKeyContainer>
</motion.div>
)}

8
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View File

@ -18,7 +18,6 @@ import { v4 } from 'uuid';
import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
import { EXPANDED_WIDTH_ANIMATION_VARIANTS } from '@/settings/constants/ExpandedWidthAnimationVariants';
import { OPTION_VALUE_MAXIMUM_LENGTH } from '@/settings/data-model/constants/OptionValueMaximumLength';
import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel';
import { TextInput } from '@/ui/input/components/TextInput';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@ -27,6 +26,7 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
import { AnimatePresence, motion } from 'framer-motion';
import { useRecoilValue } from 'recoil';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
type SettingsDataModelFieldSelectFormOptionRowProps = {
className?: string;
@ -124,7 +124,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
onChange={(input) =>
onChange({
...option,
value: getOptionValueFromLabel(input),
value: computeOptionValueFromLabel(input),
})
}
RightIcon={isDefault ? IconCheck : undefined}
@ -162,14 +162,14 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
value={option.label}
onChange={(label) => {
const optionNameHasBeenEdited = !(
option.value === getOptionValueFromLabel(option.label)
option.value === computeOptionValueFromLabel(option.label)
);
onChange({
...option,
label,
value: optionNameHasBeenEdited
? option.value
: getOptionValueFromLabel(label),
: computeOptionValueFromLabel(label),
});
}}
RightIcon={isDefault ? IconCheck : undefined}

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues.ts
View File

@ -7,14 +7,14 @@ import {
FieldMetadataItemOption,
} from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelFieldSelectFormValues } from '@/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm';
import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
const DEFAULT_OPTION: FieldMetadataItemOption = {
color: 'green',
id: v4(),
label: 'Option 1',
position: 0,
value: getOptionValueFromLabel('Option 1'),
value: computeOptionValueFromLabel('Option 1'),
};
export const useSelectSettingsFormInitialValues = ({

39
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/__tests__/getOptionValueFromLabel.test.ts
View File

@ -1,39 +0,0 @@
import { getOptionValueFromLabel } from '../getOptionValueFromLabel';
describe('getOptionValueFromLabel', () => {
it('should return the option value from the label', () => {
const label = 'Example Label';
const expected = 'EXAMPLE_LABEL';
const result = getOptionValueFromLabel(label);
expect(result).toEqual(expected);
});
it('should handle labels with accents', () => {
const label = 'Éxàmplè Làbèl';
const expected = 'EXAMPLE_LABEL';
const result = getOptionValueFromLabel(label);
expect(result).toEqual(expected);
});
it('should handle labels with special characters', () => {
const label = 'Example!@#$%^&*() Label';
const expected = 'EXAMPLE_LABEL';
const result = getOptionValueFromLabel(label);
expect(result).toEqual(expected);
});
it('should handle labels with emojis', () => {
const label = '📱 Example Label';
const expected = 'EXAMPLE_LABEL';
const result = getOptionValueFromLabel(label);
expect(result).toEqual(expected);
});
});

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts
View File

@ -3,7 +3,7 @@ import { v4 } from 'uuid';
import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
import { generateNewSelectOptionLabel } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOptionLabel';
import { getOptionValueFromLabel } from '@/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
export const generateNewSelectOption = (
options: FieldMetadataItemOption[],
@ -15,6 +15,6 @@ export const generateNewSelectOption = (
id: v4(),
label: newOptionLabel,
position: options.length,
value: getOptionValueFromLabel(newOptionLabel),
value: computeOptionValueFromLabel(newOptionLabel),
};
};

14
packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/getOptionValueFromLabel.ts
View File

@ -1,14 +0,0 @@
import snakeCase from 'lodash.snakecase';
import { computeOptionValueFromLabelOrThrow } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';
export const getOptionValueFromLabel = (label: string) => {
let transliteratedLabel = label;
try {
transliteratedLabel = computeOptionValueFromLabelOrThrow(label);
} catch (error) {
return label;
}
return snakeCase(transliteratedLabel).toUpperCase();
};