Settings Form Select refacto (#8875)

fixes #8751

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx

@@ -5,45 +5,31 @@ import {
   StyledSettingsOptionCardTitle,
 } from '@/settings/components/SettingsOptions/SettingsOptionCardContentBase';
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
-import { Select, SelectValue } from '@/ui/input/components/Select';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
-type SettingsOptionCardContentSelectProps<Value extends SelectValue> = {
+type SettingsOptionCardContentSelectProps = {
   Icon?: IconComponent;
   title: React.ReactNode;
   description?: string;
   divider?: boolean;
   disabled?: boolean;
-  value: Value;
-  onChange: (value: Value) => void;
-  options: {
-    value: Value;
-    label: string;
-    Icon?: IconComponent;
-  }[];
   selectClassName?: string;
-  dropdownId: string;
-  fullWidth?: boolean;
+  children?: React.ReactNode;
 };
 
 const StyledSelectContainer = styled.div`
   margin-left: auto;
 `;
 
-export const SettingsOptionCardContentSelect = <Value extends SelectValue>({
+export const SettingsOptionCardContentSelect = ({
   Icon,
   title,
   description,
   divider,
   disabled = false,
-  value,
-  onChange,
-  options,
-  selectClassName,
-  dropdownId,
-  fullWidth,
-}: SettingsOptionCardContentSelectProps<Value>) => {
+  children,
+}: SettingsOptionCardContentSelectProps) => {
   return (
     <StyledSettingsOptionCardContent divider={divider} disabled={disabled}>
       {Icon && (
@@ -57,18 +43,7 @@ export const SettingsOptionCardContentSelect = <Value extends SelectValue>({
           {description}
         </StyledSettingsOptionCardDescription>
       </div>
-      <StyledSelectContainer>
-        <Select<Value>
-          className={selectClassName}
-          dropdownWidth={fullWidth ? 'auto' : 120}
-          disabled={disabled}
-          dropdownId={dropdownId}
-          value={value}
-          onChange={onChange}
-          options={options}
-          selectSizeVariant="small"
-        />
-      </StyledSelectContainer>
+      <StyledSelectContainer>{children}</StyledSelectContainer>
     </StyledSettingsOptionCardContent>
   );
 };

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx

@@ -1,4 +1,5 @@
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { Select, SelectValue } from '@/ui/input/components/Select';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
@@ -16,28 +17,37 @@ const StyledContainer = styled.div`
   width: 480px;
 `;
 
-type SelectValue = string | number | boolean | null;
+interface SettingsOptionCardContentSelectProps
+  extends React.ComponentProps<typeof SettingsOptionCardContentSelect> {}
 
+interface SettingsOptionCardContentSelectWrapperProps
+  extends SettingsOptionCardContentSelectProps {
+  onChange: any;
+  options: any;
+  value: any;
+  dropdownId: string;
+}
 const SettingsOptionCardContentSelectWrapper = <Value extends SelectValue>(
-  args: React.ComponentProps<typeof SettingsOptionCardContentSelect<Value>>,
+  args: SettingsOptionCardContentSelectWrapperProps,
 ) => {
-  const [value, setValue] = useState<Value>(args.value);
+  const [value] = useState<Value>(args.value);
 
   return (
     <StyledContainer>
       <SettingsOptionCardContentSelect
-        value={value}
-        onChange={(newValue) => setValue(newValue as Value)}
         Icon={args.Icon}
         title={args.title}
         description={args.description}
-        divider={args.divider}
-        disabled={args.disabled}
-        options={args.options}
-        selectClassName={args.selectClassName}
-        dropdownId={args.dropdownId}
-        fullWidth={args.fullWidth}
-      />
+      >
+        <Select<Value>
+          value={value}
+          onChange={args.onChange}
+          dropdownId={args.dropdownId}
+          options={args.options}
+          selectSizeVariant="small"
+          dropdownWidth={120}
+        />
+      </SettingsOptionCardContentSelect>
     </StyledContainer>
   );
 };
@@ -137,6 +147,5 @@ export const FullWidth: Story = {
       },
     ],
     dropdownId: 'full-width-select',
-    fullWidth: true,
   },
 };