diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
index 531f43d66..bb8fd477a 100644
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
@@ -2,13 +2,15 @@ import styled from '@emotion/styled';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
-import { TextInput } from '@/ui/input/components/TextInput';
import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
-export type SettingsObjectFieldSelectFormValues = {
- color: ThemeColor;
- text: string;
-}[];
+import {
+ SettingsObjectFieldSelectFormOption,
+ SettingsObjectFieldSelectFormOptionRow,
+} from './SettingsObjectFieldSelectFormOptionRow';
+
+export type SettingsObjectFieldSelectFormValues =
+ SettingsObjectFieldSelectFormOption[];
type SettingsObjectFieldSelectFormProps = {
onChange: (values: SettingsObjectFieldSelectFormValues) => void;
@@ -35,21 +37,6 @@ const StyledRows = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
-const StyledRow = styled.div`
- align-items: center;
- display: flex;
- height: ${({ theme }) => theme.spacing(6)};
- padding: ${({ theme }) => theme.spacing(1)} 0;
-`;
-
-const StyledOptionInput = styled(TextInput)`
- flex: 1 0 auto;
-
- & input {
- height: ${({ theme }) => theme.spacing(2)};
- }
-`;
-
const StyledButton = styled(Button)`
border-bottom: 0;
border-left: 0;
@@ -75,16 +62,24 @@ export const SettingsObjectFieldSelectForm = ({
Options
{values.map((value, index) => (
-
- {
- const nextValues = [...values];
- nextValues.splice(index, 1, { ...values[index], text });
- onChange(nextValues);
- }}
- />
-
+ {
+ const nextValues = [...values];
+ nextValues.splice(index, 1, optionValue);
+ onChange(nextValues);
+ }}
+ onRemove={
+ values.length > 1
+ ? () => {
+ const nextValues = [...values];
+ nextValues.splice(index, 1);
+ onChange(nextValues);
+ }
+ : undefined
+ }
+ value={value}
+ />
))}
diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
new file mode 100644
index 000000000..c3207ed15
--- /dev/null
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import styled from '@emotion/styled';
+import { v4 } from 'uuid';
+
+import { IconDotsVertical, IconTrash } from '@/ui/display/icon';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+export type SettingsObjectFieldSelectFormOption = {
+ color: ThemeColor;
+ text: string;
+};
+
+type SettingsObjectFieldSelectFormOptionRowProps = {
+ onChange: (value: SettingsObjectFieldSelectFormOption) => void;
+ onRemove?: () => void;
+ value: SettingsObjectFieldSelectFormOption;
+};
+
+const StyledRow = styled.div`
+ align-items: center;
+ display: flex;
+ height: ${({ theme }) => theme.spacing(6)};
+ padding: ${({ theme }) => theme.spacing(1)} 0;
+`;
+
+const StyledOptionInput = styled(TextInput)`
+ flex: 1 0 auto;
+ margin-right: ${({ theme }) => theme.spacing(2)};
+
+ & input {
+ height: ${({ theme }) => theme.spacing(2)};
+ }
+`;
+
+export const SettingsObjectFieldSelectFormOptionRow = ({
+ onChange,
+ onRemove,
+ value,
+}: SettingsObjectFieldSelectFormOptionRowProps) => {
+ const dropdownScopeId = useMemo(() => `select-field-option-row-${v4()}`, []);
+
+ const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+ return (
+
+ onChange({ ...value, text })}
+ />
+
+ }
+ dropdownComponents={
+
+
+ {!!onRemove && (
+
+
+ }
+ />
+
+
+ );
+};