feat: remove Select field options (#2668)

Closes #2587

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 = ({
         <StyledLabel>Options</StyledLabel>
         <StyledRows>
           {values.map((value, index) => (
-            <StyledRow>
-              <StyledOptionInput
-                value={value.text}
-                onChange={(text) => {
-                  const nextValues = [...values];
-                  nextValues.splice(index, 1, { ...values[index], text });
-                  onChange(nextValues);
-                }}
-              />
-            </StyledRow>
+            <SettingsObjectFieldSelectFormOptionRow
+              key={index}
+              onChange={(optionValue) => {
+                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}
+            />
           ))}
         </StyledRows>
       </StyledContainer>

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 (
+    <StyledRow>
+      <StyledOptionInput
+        value={value.text}
+        onChange={(text) => onChange({ ...value, text })}
+      />
+      <DropdownScope dropdownScopeId={dropdownScopeId}>
+        <Dropdown
+          dropdownPlacement="right-start"
+          dropdownHotkeyScope={{
+            scope: dropdownScopeId,
+          }}
+          clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
+          dropdownComponents={
+            <DropdownMenu>
+              <DropdownMenuItemsContainer>
+                {!!onRemove && (
+                  <MenuItem
+                    accent="danger"
+                    LeftIcon={IconTrash}
+                    text="Remove option"
+                    onClick={() => {
+                      onRemove();
+                      closeDropdown();
+                    }}
+                  />
+                )}
+              </DropdownMenuItemsContainer>
+            </DropdownMenu>
+          }
+        />
+      </DropdownScope>
+    </StyledRow>
+  );
+};