Lucas/t 365 on comment drawer i see a add comment section with severa (#256)

* Added comments and authors on drawer with proper resolving

* Fixed generated front graphql from rebase

* Fixed comment chip

* wip

* wip 2

* - Added string typing for DateTime scalar
- Refactored user in a recoil state and workspace using it
- Added comment creation

* Put theme and user state in generic providers

* Fix from rebase

* Fixed app theme provider removed from storybook

* Wip

* Fix graphql front

* Fixed backend bug

* - Added comment fetching in creation mode
- Fixed drawer overflows and heights

* - Fixed autosize validation button CSS bug

* Fixed CSS bug with drawer changing height if overflow

* Fixed text input too many event catched and useless error message

* Removed console.log

* Fixed comment cell chip

* Create comment thread on each comment action bar click

* Fixed lint

* Fixed TopBar height

front/src/modules/ui/components/inputs/AutosizeTextInput.tsx

@@ -5,16 +5,19 @@ import { HiArrowSmRight } from 'react-icons/hi';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 
-import { IconButton } from '../buttons/IconButton';
+import { IconButton } from '@/ui/components/buttons/IconButton';
+
+const MAX_ROWS = 5;
 
 type OwnProps = {
-  onSend?: (text: string) => void;
+  onValidate?: (text: string) => void;
+  minRows?: number;
   placeholder?: string;
 };
 
 const StyledContainer = styled.div`
   display: flex;
-  min-height: 32px;
+
   width: 100%;
 `;
 
@@ -43,14 +46,21 @@ const StyledTextArea = styled(TextareaAutosize)`
   }
 `;
 
+// TODO: this messes with the layout, fix it
 const StyledBottomRightIconButton = styled.div`
   width: 0px;
   position: relative;
   top: calc(100% - 26.5px);
   right: 26px;
+  height: 0;
 `;
 
-export function AutosizeTextInput({ placeholder, onSend }: OwnProps) {
+export function AutosizeTextInput({
+  placeholder,
+  onValidate,
+  minRows = 1,
+}: OwnProps) {
+  const [isFocused, setIsFocused] = useState(false);
   const [text, setText] = useState('');
 
   const isSendButtonDisabled = !text;
@@ -58,12 +68,12 @@ export function AutosizeTextInput({ placeholder, onSend }: OwnProps) {
   useHotkeys(
     ['shift+enter', 'enter'],
     (event: KeyboardEvent, handler: HotkeysEvent) => {
-      if (handler.shift) {
+      if (handler.shift || !isFocused) {
         return;
       } else {
         event.preventDefault();
 
-        onSend?.(text);
+        onValidate?.(text);
 
         setText('');
       }
@@ -72,12 +82,16 @@ export function AutosizeTextInput({ placeholder, onSend }: OwnProps) {
       enableOnContentEditable: true,
       enableOnFormTags: true,
     },
-    [onSend, text, setText],
+    [onValidate, text, setText, isFocused],
   );
 
   useHotkeys(
     'esc',
     (event: KeyboardEvent) => {
+      if (!isFocused) {
+        return;
+      }
+
       event.preventDefault();
 
       setText('');
@@ -86,7 +100,7 @@ export function AutosizeTextInput({ placeholder, onSend }: OwnProps) {
       enableOnContentEditable: true,
       enableOnFormTags: true,
     },
-    [onSend, setText],
+    [onValidate, setText, isFocused],
   );
 
   function handleInputChange(event: React.FormEvent<HTMLTextAreaElement>) {
@@ -96,19 +110,24 @@ export function AutosizeTextInput({ placeholder, onSend }: OwnProps) {
   }
 
   function handleOnClickSendButton() {
-    onSend?.(text);
+    onValidate?.(text);
 
     setText('');
   }
 
+  const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
+
   return (
     <>
       <StyledContainer>
         <StyledTextArea
           placeholder={placeholder || 'Write something...'}
-          maxRows={5}
+          maxRows={MAX_ROWS}
+          minRows={computedMinRows}
           onChange={handleInputChange}
           value={text}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
         />
         <StyledBottomRightIconButton>
           <IconButton

front/src/modules/ui/components/inputs/__stories__/AutosizeTextInput.stories.tsx

@@ -7,11 +7,6 @@ import { AutosizeTextInput } from '../AutosizeTextInput';
 const meta: Meta<typeof AutosizeTextInput> = {
   title: 'Components/Common/AutosizeTextInput',
   component: AutosizeTextInput,
-  argTypes: {
-    onSend: {
-      action: 'onSend',
-    },
-  },
 };
 
 export default meta;

front/src/modules/ui/components/table/action-bar/TableActionBarButtonOpenComments.tsx

@@ -1,23 +1,17 @@
 import { FaRegComment } from 'react-icons/fa';
 
-import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer';
-
 import { EntityTableActionBarButton } from './EntityTableActionBarButton';
 
-export function TableActionBarButtonToggleComments() {
-  // TODO: here it would be nice to access the table context
-  // But let's see when we have custom entities and properties
-  const openRightDrawer = useOpenRightDrawer();
-
-  async function handleButtonClick() {
-    openRightDrawer('comments');
-  }
+type OwnProps = {
+  onClick: () => void;
+};
 
+export function TableActionBarButtonToggleComments({ onClick }: OwnProps) {
   return (
     <EntityTableActionBarButton
       label="Comment"
       icon={<FaRegComment size={16} />}
-      onClick={handleButtonClick}
+      onClick={onClick}
     />
   );
 }