feat: refactoring casl permission checks for recursive nested operations (#778)

* feat: nested casl abilities

* fix: remove unused packages

* Fixes

* Fix createMany broken

* Fix lint

* Fix lint

* Fix lint

* Fix lint

* Fixes

* Fix CommentThread

* Fix bugs

* Fix lint

* Fix bugs

* Fixed auto routing

* Fixed app path

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/button/components/ButtonGroup.tsx

@@ -19,11 +19,11 @@ export function ButtonGroup({ children, variant, size }: ButtonGroupProps) {
         let position: ButtonPosition;
 
         if (index === 0) {
-          position = 'left';
+          position = ButtonPosition.Left;
         } else if (index === children.length - 1) {
-          position = 'right';
+          position = ButtonPosition.Right;
         } else {
-          position = 'middle';
+          position = ButtonPosition.Middle;
         }
 
         const additionalProps: any = { position };

front/src/modules/ui/inplace-input/components/InplaceInputTextEditMode.tsx

@@ -48,6 +48,7 @@ export function InplaceInputTextEditMode({
 
   return (
     <StyledInput
+      autoComplete="off"
       ref={wrapperRef}
       placeholder={placeholder}
       onChange={handleChange}

front/src/modules/ui/input/components/ImageInput.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { Button } from '@/ui/button/components/Button';
+import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icon';
 
 const Container = styled.div`
@@ -123,7 +123,7 @@ export function ImageInput({
           <Button
             icon={<IconUpload size={theme.icon.size.sm} />}
             onClick={onUploadButtonClick}
-            variant="secondary"
+            variant={ButtonVariant.Secondary}
             title="Upload"
             disabled={disabled}
             fullWidth
@@ -131,7 +131,7 @@ export function ImageInput({
           <Button
             icon={<IconTrash size={theme.icon.size.sm} />}
             onClick={onRemove}
-            variant="secondary"
+            variant={ButtonVariant.Secondary}
             title="Remove"
             disabled={!picture || disabled}
             fullWidth

front/src/modules/ui/table/editable-cell/types/EditableCellDoubleTextEditMode.tsx

@@ -48,9 +48,9 @@ export function EditableCellDoubleTextEditMode({
     setSecondInternalValue(secondValue);
   }, [firstValue, secondValue]);
 
-  function handleOnChange(firstValue: string, secondValue: string): void {
-    setFirstInternalValue(firstValue);
-    setSecondInternalValue(secondValue);
+  function handleOnChange(newFirstValue: string, newSecondValue: string): void {
+    setFirstInternalValue(newFirstValue);
+    setSecondInternalValue(newSecondValue);
   }
 
   const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left');
@@ -142,18 +142,18 @@ export function EditableCellDoubleTextEditMode({
         autoFocus
         placeholder={firstValuePlaceholder}
         ref={firstValueInputRef}
-        value={firstValue}
+        value={firstInternalValue}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          handleOnChange(event.target.value, secondValue);
+          handleOnChange(event.target.value, secondInternalValue);
         }}
       />
       <StyledInput
         autoComplete="off"
         placeholder={secondValuePlaceholder}
         ref={secondValueInputRef}
-        value={secondValue}
+        value={secondInternalValue}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          handleOnChange(firstValue, event.target.value);
+          handleOnChange(firstInternalValue, event.target.value);
         }}
       />
     </StyledContainer>

front/src/modules/ui/table/editable-cell/types/EditableCellPhone.tsx

@@ -14,7 +14,6 @@ export function EditableCellPhone({ value, placeholder, onSubmit }: OwnProps) {
     <EditableCell
       editModeContent={
         <InplaceInputTextEditMode
-          autoComplete="off"
           autoFocus
           placeholder={placeholder || ''}
           value={value}

front/src/modules/ui/table/editable-cell/types/EditableCellText.tsx

@@ -32,7 +32,6 @@ export function EditableCellText({
           autoFocus
           value={value}
           onSubmit={(newText) => onSubmit?.(newText)}
-          autoComplete="off"
         />
       }
       nonEditModeContent={

front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx

@@ -27,7 +27,6 @@ export function EditableCellURL({
       editModeContent={
         <InplaceInputTextEditMode
           placeholder={placeholder}
-          autoComplete="off"
           autoFocus
           value={url}
           onSubmit={(newURL) => onSubmit?.(newURL)}

front/src/modules/ui/table/editable-cell/types/EditableChip.tsx

@@ -56,7 +56,6 @@ export function EditableCellChip({
           placeholder={placeholder || ''}
           autoFocus
           value={inputValue}
-          autoComplete="off"
           onSubmit={(newValue) => onSubmit?.(newValue)}
         />
       }