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>
2023-07-26 01:37:22 +02:00
parent 92b9e987a5
commit 51cfc0d82c
69 changed files with 1192 additions and 883 deletions
--- a/front/src/modules/activities/components/CommentThreadCreateButton.tsx
+++ b/front/src/modules/activities/components/CommentThreadCreateButton.tsx
@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';

-import { Button } from '@/ui/button/components/Button';
+import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon/index';

@ -17,7 +17,7 @@ export function CommentThreadCreateButton({
 }: CommentThreadCreateButtonProps) {
  const theme = useTheme();
  return (
-    <ButtonGroup variant="secondary">
+    <ButtonGroup variant={ButtonVariant.Secondary}>
      <Button
        icon={<IconNotes size={theme.icon.size.sm} />}
        title="Note"
--- a/front/src/modules/activities/components/CommentThreadEditor.tsx
+++ b/front/src/modules/activities/components/CommentThreadEditor.tsx
@ -0,0 +1,190 @@
+import React, { useCallback, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+import styled from '@emotion/styled';
+
+import { CommentThreadBodyEditor } from '@/activities/components/CommentThreadBodyEditor';
+import { CommentThreadComments } from '@/activities/components/CommentThreadComments';
+import { CommentThreadRelationPicker } from '@/activities/components/CommentThreadRelationPicker';
+import { CommentThreadTypeDropdown } from '@/activities/components/CommentThreadTypeDropdown';
+import { GET_COMMENT_THREADS_BY_TARGETS } from '@/activities/queries';
+import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { PropertyBoxItem } from '@/ui/editable-field/property-box/components/PropertyBoxItem';
+import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { IconArrowUpRight } from '@/ui/icon/index';
+import {
+  CommentThread,
+  CommentThreadTarget,
+  useUpdateCommentThreadMutation,
+} from '~/generated/graphql';
+import { debounce } from '~/utils/debounce';
+
+import { CommentThreadActionBar } from '../right-drawer/components/CommentThreadActionBar';
+import { CommentForDrawer } from '../types/CommentForDrawer';
+
+import '@blocknote/core/style.css';
+
+const StyledContainer = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  overflow-y: auto;
+`;
+
+const StyledUpperPartContainer = styled.div`
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  gap: ${({ theme }) => theme.spacing(4)};
+  justify-content: flex-start;
+`;
+
+const StyledTopContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  background: ${({ theme }) => theme.background.secondary};
+  border-bottom: ${({ theme }) =>
+    useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px 24px 24px 48px;
+`;
+
+const StyledEditableTitleInput = styled.input`
+  background: transparent;
+
+  border: none;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex: 1 0 0;
+
+  flex-direction: column;
+  font-family: Inter;
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  justify-content: center;
+
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+  outline: none;
+  width: calc(100% - ${({ theme }) => theme.spacing(2)});
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+`;
+
+const StyledTopActionsContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+type OwnProps = {
+  commentThread: Pick<CommentThread, 'id' | 'title' | 'body' | 'type'> & {
+    comments?: Array<CommentForDrawer> | null;
+  } & {
+    commentThreadTargets?: Array<
+      Pick<CommentThreadTarget, 'id' | 'commentableId' | 'commentableType'>
+    > | null;
+  };
+  showComment?: boolean;
+  autoFillTitle?: boolean;
+};
+
+export function CommentThreadEditor({
+  commentThread,
+  showComment = true,
+  autoFillTitle = false,
+}: OwnProps) {
+  const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
+    useState<boolean>(false);
+
+  const [title, setTitle] = useState<string | null>(commentThread.title ?? '');
+
+  const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
+
+  const updateTitle = useCallback(
+    (newTitle: string) => {
+      updateCommentThreadMutation({
+        variables: {
+          id: commentThread.id,
+          title: newTitle ?? '',
+        },
+        refetchQueries: [
+          getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
+        ],
+      });
+    },
+    [commentThread, updateCommentThreadMutation],
+  );
+  const debouncedUpdateTitle = debounce(updateTitle, 200);
+
+  function updateTitleFromBody(body: string) {
+    const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
+    if (!hasUserManuallySetTitle && autoFillTitle) {
+      setTitle(parsedTitle);
+      debouncedUpdateTitle(parsedTitle);
+    }
+  }
+
+  if (!commentThread) {
+    return <></>;
+  }
+
+  return (
+    <StyledContainer>
+      <StyledUpperPartContainer>
+        <StyledTopContainer>
+          <StyledTopActionsContainer>
+            <CommentThreadTypeDropdown commentThread={commentThread} />
+            <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
+          </StyledTopActionsContainer>
+          <StyledEditableTitleInput
+            autoComplete="off"
+            autoFocus
+            placeholder={`${commentThread.type} title (optional)`}
+            onChange={(event) => {
+              setHasUserManuallySetTitle(true);
+              setTitle(event.target.value);
+              debouncedUpdateTitle(event.target.value);
+            }}
+            value={title ?? ''}
+          />
+          <PropertyBox>
+            <PropertyBoxItem
+              icon={<IconArrowUpRight />}
+              value={
+                <CommentThreadRelationPicker
+                  commentThread={{
+                    id: commentThread.id,
+                    commentThreadTargets:
+                      commentThread.commentThreadTargets ?? [],
+                  }}
+                />
+              }
+              label="Relations"
+            />
+          </PropertyBox>
+        </StyledTopContainer>
+        <CommentThreadBodyEditor
+          commentThread={commentThread}
+          onChange={updateTitleFromBody}
+        />
+      </StyledUpperPartContainer>
+      {showComment && (
+        <CommentThreadComments
+          commentThread={{
+            id: commentThread.id,
+            comments: commentThread.comments ?? [],
+          }}
+        />
+      )}
+    </StyledContainer>
+  );
+}
--- a/front/src/modules/activities/right-drawer/components/CommentThread.tsx
+++ b/front/src/modules/activities/right-drawer/components/CommentThread.tsx
@ -1,88 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
-import styled from '@emotion/styled';
-
-import { CommentThreadBodyEditor } from '@/activities/components/CommentThreadBodyEditor';
-import { CommentThreadComments } from '@/activities/components/CommentThreadComments';
-import { CommentThreadRelationPicker } from '@/activities/components/CommentThreadRelationPicker';
-import { CommentThreadTypeDropdown } from '@/activities/components/CommentThreadTypeDropdown';
-import { GET_COMMENT_THREAD } from '@/activities/queries';
-import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
-import { PropertyBoxItem } from '@/ui/editable-field/property-box/components/PropertyBoxItem';
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
-import { IconArrowUpRight } from '@/ui/icon/index';
-import {
-  useGetCommentThreadQuery,
-  useUpdateCommentThreadMutation,
-} from '~/generated/graphql';
-import { debounce } from '~/utils/debounce';
-
-import { CommentThreadActionBar } from './CommentThreadActionBar';
+import { CommentThreadEditor } from '@/activities/components/CommentThreadEditor';
+import { useGetCommentThreadQuery } from '~/generated/graphql';

 import '@blocknote/core/style.css';

-const StyledContainer = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: space-between;
-  overflow-y: auto;
-`;
-
-const StyledUpperPartContainer = styled.div`
-  align-items: flex-start;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  gap: ${({ theme }) => theme.spacing(4)};
-  justify-content: flex-start;
-`;
-
-const StyledTopContainer = styled.div`
-  align-items: flex-start;
-  align-self: stretch;
-  background: ${({ theme }) => theme.background.secondary};
-  border-bottom: ${({ theme }) =>
-    useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 24px 24px 24px 48px;
-`;
-
-const StyledEditableTitleInput = styled.input`
-  background: transparent;
-
-  border: none;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex: 1 0 0;
-
-  flex-direction: column;
-  font-family: Inter;
-  font-size: ${({ theme }) => theme.font.size.xl};
-  font-style: normal;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-  justify-content: center;
-
-  line-height: ${({ theme }) => theme.text.lineHeight.md};
-  outline: none;
-  width: calc(100% - ${({ theme }) => theme.spacing(2)});
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-  }
-`;
-
-const StyledTopActionsContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-`;
-
 type OwnProps = {
  commentThreadId: string;
  showComment?: boolean;
@ -101,103 +21,14 @@ export function CommentThread({
    skip: !commentThreadId,
  });
  const commentThread = data?.findManyCommentThreads[0];
-  const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
-    useState<boolean>(false);

-  const [title, setTitle] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!hasUserManuallySetTitle) {
-      setTitle(commentThread?.title ?? '');
-    }
-  }, [setTitle, commentThread?.title, hasUserManuallySetTitle]);
-
-  const [updateCommentThreadMutation] = useUpdateCommentThreadMutation();
-
-  const debounceUpdateTitle = useMemo(() => {
-    function updateTitle(title: string) {
-      if (commentThread) {
-        updateCommentThreadMutation({
-          variables: {
-            id: commentThreadId,
-            title: title ?? '',
-          },
-          refetchQueries: [getOperationName(GET_COMMENT_THREAD) ?? ''],
-          optimisticResponse: {
-            __typename: 'Mutation',
-            updateOneCommentThread: {
-              __typename: 'CommentThread',
-              id: commentThreadId,
-              title: title,
-              type: commentThread.type,
-            },
-          },
-        });
-      }
-    }
-    return debounce(updateTitle, 200);
-  }, [commentThreadId, updateCommentThreadMutation, commentThread]);
-
-  function updateTitleFromBody(body: string) {
-    const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
-    if (!hasUserManuallySetTitle && autoFillTitle) {
-      setTitle(parsedTitle);
-      debounceUpdateTitle(parsedTitle);
-    }
-  }
-
-  if (!commentThread) {
-    return <></>;
-  }
-
-  return (
-    <StyledContainer>
-      <StyledUpperPartContainer>
-        <StyledTopContainer>
-          <StyledTopActionsContainer>
-            <CommentThreadTypeDropdown commentThread={commentThread} />
-            <CommentThreadActionBar commentThreadId={commentThread?.id ?? ''} />
-          </StyledTopActionsContainer>
-          <StyledEditableTitleInput
-            autoComplete="off"
-            autoFocus
-            placeholder={`${commentThread.type} title (optional)`}
-            onChange={(event) => {
-              setHasUserManuallySetTitle(true);
-              setTitle(event.target.value);
-              debounceUpdateTitle(event.target.value);
-            }}
-            value={title ?? ''}
-          />
-          <PropertyBox>
-            <PropertyBoxItem
-              icon={<IconArrowUpRight />}
-              value={
-                <CommentThreadRelationPicker
-                  commentThread={{
-                    id: commentThread.id,
-                    commentThreadTargets:
-                      commentThread.commentThreadTargets ?? [],
-                  }}
-                />
-              }
-              label="Relations"
-            />
-          </PropertyBox>
-        </StyledTopContainer>
-        <CommentThreadBodyEditor
-          commentThread={commentThread}
-          onChange={updateTitleFromBody}
-        />
-      </StyledUpperPartContainer>
-      {showComment && (
-        <CommentThreadComments
-          commentThread={{
-            id: commentThread.id,
-            comments: commentThread.comments ?? [],
-          }}
-        />
-      )}
-    </StyledContainer>
+  return commentThread ? (
+    <CommentThreadEditor
+      commentThread={commentThread}
+      showComment={showComment}
+      autoFillTitle={autoFillTitle}
+    />
+  ) : (
+    <></>
  );
 }
--- a/front/src/modules/activities/right-drawer/components/CommentThreadActionBar.tsx
+++ b/front/src/modules/activities/right-drawer/components/CommentThreadActionBar.tsx
@ -6,7 +6,7 @@ import { useRecoilState } from 'recoil';
 import { GET_COMMENT_THREADS_BY_TARGETS } from '@/activities/queries';
 import { GET_COMPANIES } from '@/companies/queries';
 import { GET_PEOPLE } from '@/people/queries';
-import { Button } from '@/ui/button/components/Button';
+import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { IconTrash } from '@/ui/icon';
 import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
 import { useDeleteCommentThreadMutation } from '~/generated/graphql';
@ -44,7 +44,7 @@ export function CommentThreadActionBar({ commentThreadId }: OwnProps) {
          <IconTrash size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
        }
        onClick={deleteCommentThread}
-        variant="tertiary"
+        variant={ButtonVariant.Tertiary}
      />
    </StyledContainer>
  );