feat: add options to Select field (#2665)

Closes #2447

front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx

@@ -24,6 +24,10 @@ type SettingsObjectFieldRelationFormProps = {
   values?: SettingsObjectFieldRelationFormValues;
 };
 
+const StyledContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
 const StyledSelectsContainer = styled.div`
   display: grid;
   gap: ${({ theme }) => theme.spacing(4)};
@@ -62,7 +66,7 @@ export const SettingsObjectFieldRelationForm = ({
       : undefined) || objectMetadataItems[0];
 
   return (
-    <div>
+    <StyledContainer>
       <StyledSelectsContainer>
         <Select
           label="Relation type"
@@ -122,6 +126,6 @@ export const SettingsObjectFieldRelationForm = ({
           fullWidth
         />
       </StyledInputsContainer>
-    </div>
+    </StyledContainer>
   );
 };

front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx

@@ -1,7 +1,9 @@
 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 { ThemeColor } from '@/ui/theme/constants/colors';
+import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
 
 export type SettingsObjectFieldSelectFormValues = {
   color: ThemeColor;
@@ -13,46 +15,93 @@ type SettingsObjectFieldSelectFormProps = {
   values?: SettingsObjectFieldSelectFormValues;
 };
 
+const StyledContainer = styled.div`
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+
 const StyledLabel = styled.span`
   color: ${({ theme }) => theme.font.color.light};
   display: block;
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  margin-bottom: ${({ theme }) => theme.spacing(3)};
+  margin-bottom: 6px;
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-transform: uppercase;
 `;
 
-const StyledInputsContainer = styled.div`
+const StyledRows = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  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;
+  border-radius: 0;
+  border-right: 0;
+  justify-content: center;
+  text-align: center;
+`;
+
+const getNextColor = (currentColor: ThemeColor) => {
+  const colors = Object.keys(mainColors) as ThemeColor[];
+  const currentColorIndex = colors.findIndex((color) => color === currentColor);
+  return colors[(currentColorIndex + 1) % colors.length];
+};
+
 export const SettingsObjectFieldSelectForm = ({
   onChange,
   values = [],
 }: SettingsObjectFieldSelectFormProps) => {
   return (
-    <div>
+    <>
-      <StyledLabel>Options</StyledLabel>
+      <StyledContainer>
-      <StyledInputsContainer>
+        <StyledLabel>Options</StyledLabel>
-        {values.map((value, index) => (
+        <StyledRows>
-          <StyledOptionInput
+          {values.map((value, index) => (
-            value={value.text}
+            <StyledRow>
-            onChange={(text) => {
+              <StyledOptionInput
-              const nextValues = [...values];
+                value={value.text}
-              nextValues.splice(index, 1, { ...values[index], text });
+                onChange={(text) => {
-              onChange(nextValues);
+                  const nextValues = [...values];
-            }}
+                  nextValues.splice(index, 1, { ...values[index], text });
-          />
+                  onChange(nextValues);
-        ))}
+                }}
-      </StyledInputsContainer>
+              />
-    </div>
+            </StyledRow>
+          ))}
+        </StyledRows>
+      </StyledContainer>
+      <StyledButton
+        title="Add option"
+        fullWidth
+        Icon={IconPlus}
+        onClick={() =>
+          onChange([
+            ...values,
+            {
+              color: getNextColor(values[values.length - 1].color),
+              text: `Option ${values.length + 1}`,
+            },
+          ])
+        }
+      />
+    </>
   );
 };

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx

@@ -39,7 +39,7 @@ const StyledFormContainer = styled.div`
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  padding: ${({ theme }) => theme.spacing(4)};
+  overflow: hidden;
 `;
 
 export const SettingsObjectFieldTypeCard = ({