Toggle visibility of comment UI based on policy (#5143)

app/scenes/Document/components/CommentThread.tsx

@@ -16,6 +16,7 @@ import Typing from "~/components/Typing";
 import { WebsocketContext } from "~/components/WebsocketProvider";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { sidebarAppearDuration } from "~/styles/animations";
 import CommentForm from "./CommentForm";
@@ -68,6 +69,7 @@ function CommentThread({
     document,
     comment: thread,
   });
+  const can = usePolicy(document.id);
 
   const commentsInThread = comments
     .inThread(thread.id)
@@ -155,7 +157,8 @@ function CommentThread({
             comment={comment}
             key={comment.id}
             firstOfThread={index === 0}
-            lastOfThread={index === commentsInThread.length - 1 && !focused}
+            lastOfThread={index === commentsInThread.length - 1}
+            canReply={focused && can.comment}
             firstOfAuthor={firstOfAuthor}
             lastOfAuthor={lastOfAuthor}
             previousCommentCreatedAt={commentsInThread[index - 1]?.createdAt}
@@ -174,7 +177,7 @@ function CommentThread({
         ))}
 
       <ResizingHeightContainer hideOverflow={false}>
-        {(focused || commentsInThread.length === 0) && (
+        {(focused || commentsInThread.length === 0) && can.comment && (
           <Fade timing={100}>
             <CommentForm
               documentId={document.id}
@@ -187,7 +190,7 @@ function CommentThread({
           </Fade>
         )}
       </ResizingHeightContainer>
-      {!focused && !recessed && (
+      {!focused && !recessed && can.comment && (
         <Reply onClick={() => setAutoFocus(true)}>{t("Reply")}…</Reply>
       )}
     </Thread>

app/scenes/Document/components/CommentThreadItem.tsx

@@ -68,6 +68,8 @@ type Props = {
   lastOfAuthor?: boolean;
   /** The date of the previous comment in the thread */
   previousCommentCreatedAt?: string;
+  /** Whether the user can reply in the thread */
+  canReply: boolean;
 };
 
 function CommentThreadItem({
@@ -77,6 +79,7 @@ function CommentThreadItem({
   lastOfThread,
   dir,
   previousCommentCreatedAt,
+  canReply,
 }: Props) {
   const { editor } = useDocumentContext();
   const { showToast } = useToasts();
@@ -139,6 +142,7 @@ function CommentThreadItem({
         $firstOfAuthor={firstOfAuthor}
         $lastOfThread={lastOfThread}
         $dir={dir}
+        $canReply={canReply}
         column
       >
         {(showAuthor || showTime) && (
@@ -247,6 +251,7 @@ export const Bubble = styled(Flex)<{
   $firstOfThread?: boolean;
   $firstOfAuthor?: boolean;
   $lastOfThread?: boolean;
+  $canReply?: boolean;
   $focused?: boolean;
   $dir?: "rtl" | "ltr";
 }>`
@@ -260,8 +265,9 @@ export const Bubble = styled(Flex)<{
   padding: 8px 12px;
   transition: color 100ms ease-out, ${s("backgroundTransition")};
 
-  ${({ $lastOfThread }) =>
+  ${({ $lastOfThread, $canReply }) =>
     $lastOfThread &&
+    !$canReply &&
     "border-bottom-left-radius: 8px; border-bottom-right-radius: 8px"};
 
   ${({ $firstOfThread }) =>

app/scenes/Document/components/Comments.tsx

@@ -10,6 +10,7 @@ import Scrollable from "~/components/Scrollable";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useFocusedComment from "~/hooks/useFocusedComment";
 import useKeyDown from "~/hooks/useKeyDown";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import CommentForm from "./CommentForm";
 import CommentThread from "./CommentThread";
@@ -22,6 +23,7 @@ function Comments() {
   const match = useRouteMatch<{ documentSlug: string }>();
   const document = documents.getByUrl(match.params.documentSlug);
   const focusedComment = useFocusedComment();
+  const can = usePolicy(document?.id);
 
   useKeyDown("Escape", () => document && ui.collapseComments(document?.id));
 
@@ -65,7 +67,7 @@ function Comments() {
         </Wrapper>
       </Scrollable>
       <AnimatePresence initial={false}>
-        {!focusedComment && (
+        {!focusedComment && can.comment && (
           <NewCommentForm
             documentId={document.id}
             placeholder={`${t("Add a comment")}…`}

app/scenes/Document/components/Editor.tsx

@@ -11,6 +11,7 @@ import { RefHandle } from "~/components/ContentEditable";
 import Editor, { Props as EditorProps } from "~/components/Editor";
 import Flex from "~/components/Flex";
 import useFocusedComment from "~/hooks/useFocusedComment";
+import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import {
   documentHistoryUrl,
@@ -60,6 +61,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     multiplayer,
     ...rest
   } = props;
+  const can = usePolicy(document.id);
 
   const childRef = React.useRef<HTMLDivElement>(null);
   const focusAtStart = React.useCallback(() => {
@@ -178,7 +180,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         focusedCommentId={focusedComment?.id}
         onClickCommentMark={handleClickComment}
         onCreateCommentMark={
-          team?.getPreference(TeamPreference.Commenting)
+          team?.getPreference(TeamPreference.Commenting) && can.comment
             ? handleDraftComment
             : undefined
         }