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}
     />
   );
 }

front/src/modules/ui/layout/containers/WithTopBarContainer.tsx

@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
 import { Panel } from '../Panel';
 import { RightDrawer } from '../right-drawer/components/RightDrawer';
 import { isRightDrawerOpenState } from '../right-drawer/states/isRightDrawerOpenState';
-import { TopBar } from '../top-bar/TopBar';
+import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/TopBar';
 
 type OwnProps = {
   children: JSX.Element;
@@ -20,13 +20,14 @@ const StyledContainer = styled.div`
   width: 100%;
 `;
 
-const TOPBAR_HEIGHT = '48px';
-
 const MainContainer = styled.div`
   display: flex;
   flex-direction: row;
   width: calc(100% - ${(props) => props.theme.spacing(3)});
-  height: calc(100% - ${TOPBAR_HEIGHT} - ${(props) => props.theme.spacing(3)});
+  height: calc(
+    100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} -
+      ${(props) => props.theme.spacing(5)}
+  );
   background: ${(props) => props.theme.noisyBackground};
   padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};

front/src/modules/ui/layout/right-drawer/components/RightDrawerBody.tsx

@@ -3,4 +3,5 @@ import styled from '@emotion/styled';
 export const RightDrawerBody = styled.div`
   display: flex;
   flex-direction: column;
+  overflow: auto;
 `;

front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -1,6 +1,7 @@
 import { useRecoilState } from 'recoil';
 
 import { RightDrawerComments } from '@/comments/components/comments/RightDrawerComments';
+import { RightDrawerCreateCommentThread } from '@/comments/components/comments/RightDrawerCreateCommentThread';
 import { isDefined } from '@/utils/type-guards/isDefined';
 
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
@@ -12,5 +13,11 @@ export function RightDrawerRouter() {
     return <></>;
   }
 
-  return rightDrawerPage === 'comments' ? <RightDrawerComments /> : <></>;
+  return rightDrawerPage === 'comments' ? (
+    <RightDrawerComments />
+  ) : rightDrawerPage === 'create-comment-thread' ? (
+    <RightDrawerCreateCommentThread />
+  ) : (
+    <></>
+  );
 }

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -5,7 +5,7 @@ import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 const StyledRightDrawerTopBar = styled.div`
   display: flex;
   flex-direction: row;
-  height: 40px;
+  min-height: 40px;
   align-items: center;
   justify-content: space-between;
   padding-left: 8px;

front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts

@@ -4,5 +4,5 @@ import { RightDrawerPage } from '../types/RightDrawerPage';
 
 export const rightDrawerPageState = atom<RightDrawerPage | null>({
   key: 'ui/layout/right-drawer-page',
-  default: 'comments',
+  default: null,
 });

front/src/modules/ui/layout/right-drawer/types/RightDrawerPage.ts

@@ -1 +1 @@
-export type RightDrawerPage = 'comments';
+export type RightDrawerPage = 'comments' | 'create-comment-thread';

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -2,13 +2,15 @@ import { ReactNode } from 'react';
 import { TbPlus } from 'react-icons/tb';
 import styled from '@emotion/styled';
 
+export const TOP_BAR_MIN_HEIGHT = '40px';
+
 const TopBarContainer = styled.div`
   display: flex;
   flex-direction: row;
-  height: 38px;
+  min-height: ${TOP_BAR_MIN_HEIGHT};
   align-items: center;
   background: ${(props) => props.theme.noisyBackground};
-  padding: 8px;
+  padding: ${(props) => props.theme.spacing(2)};
   font-size: 14px;
   color: ${(props) => props.theme.text80};
 `;