feat: access selector for comment (#2012)

* dev: access specifier for comment

* chore: change access order

apps/app/components/issues/comment/add-comment.tsx

@@ -3,38 +3,55 @@ import { useRouter } from "next/router";
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
 // components
-import { SecondaryButton } from "components/ui";
 import { TipTapEditor } from "components/tiptap";
+// ui
+import { Icon, SecondaryButton, Tooltip } from "components/ui";
 // types
 import type { IIssueComment } from "types";
 
 const defaultValues: Partial<IIssueComment> = {
-  comment_json: "",
+  access: "INTERNAL",
   comment_html: "",
 };
 
 type Props = {
   disabled?: boolean;
   onSubmit: (data: IIssueComment) => Promise<void>;
+  showAccessSpecifier?: boolean;
 };
 
-export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
+const commentAccess = [
-  const {
+  {
-    control,
+    icon: "lock",
-    formState: { isSubmitting },
+    key: "INTERNAL",
-    handleSubmit,
+    label: "Private",
-    reset,
+  },
-    setValue,
+  {
-    watch,
+    icon: "public",
-  } = useForm<IIssueComment>({ defaultValues });
+    key: "EXTERNAL",
+    label: "Public",
+  },
+];
 
+export const AddComment: React.FC<Props> = ({
+  disabled = false,
+  onSubmit,
+  showAccessSpecifier = false,
+}) => {
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<IIssueComment>({ defaultValues });
+
   const handleAddComment = async (formData: IIssueComment) => {
-    if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
+    if (!formData.comment_html || isSubmitting) return;
 
     await onSubmit(formData).then(() => {
       reset(defaultValues);
@@ -45,7 +62,40 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
   return (
     <div>
       <form onSubmit={handleSubmit(handleAddComment)}>
-        <div className="issue-comments-section">
+        <div>
+          <div className="relative">
+            {showAccessSpecifier && (
+              <div className="absolute bottom-2 left-3 z-[1]">
+                <Controller
+                  control={control}
+                  name="access"
+                  render={({ field: { onChange, value } }) => (
+                    <div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
+                      {commentAccess.map((access) => (
+                        <Tooltip key={access.key} tooltipContent={access.label}>
+                          <button
+                            type="button"
+                            onClick={() => onChange(access.key)}
+                            className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
+                              value === access.key ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            <Icon
+                              iconName={access.icon}
+                              className={`w-4 h-4 -mt-1 ${
+                                value === access.key
+                                  ? "!text-custom-text-100"
+                                  : "!text-custom-text-400"
+                              }`}
+                            />
+                          </button>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  )}
+                />
+              </div>
+            )}
             <Controller
               name="comment_html"
               control={control}
@@ -53,22 +103,14 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
                 <TipTapEditor
                   workspaceSlug={workspaceSlug as string}
                   ref={editorRef}
-                value={
+                  value={!value || value === "" ? "<p></p>" : value}
-                  !value ||
+                  customClassName="p-3 min-h-[100px] shadow-sm"
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("comment_html")
-                    : value
-                }
-                customClassName="p-3 min-h-[50px] shadow-sm"
                   debouncedUpdatesEnabled={false}
-                onChange={(comment_json: Object, comment_html: string) => {
+                  onChange={(comment_json: Object, comment_html: string) => onChange(comment_html)}
-                  onChange(comment_html);
-                  setValue("comment_json", comment_json);
-                }}
                 />
               )}
             />
+          </div>
 
           <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
             {isSubmitting ? "Adding..." : "Comment"}

apps/app/components/issues/main-content.tsx

@@ -8,6 +8,7 @@ import issuesService from "services/issues.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
@@ -49,6 +50,8 @@ export const IssueMainContent: React.FC<Props> = ({
   const { user } = useUserAuth();
   const { memberRole } = useProjectMyMembership();
 
+  const { projectDetails } = useProjectDetails();
+
   const { data: siblingIssues } = useSWR(
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
@@ -220,7 +223,11 @@ export const IssueMainContent: React.FC<Props> = ({
           handleCommentUpdate={handleCommentUpdate}
           handleCommentDelete={handleCommentDelete}
         />
-        <AddComment onSubmit={handleAddComment} disabled={uneditable} />
+        <AddComment
+          onSubmit={handleAddComment}
+          disabled={uneditable}
+          showAccessSpecifier={projectDetails && projectDetails.is_deployed}
+        />
       </div>
     </>
   );

apps/app/services/issues.service.ts

@@ -182,7 +182,7 @@ class ProjectIssuesServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     issueId: string,
-    data: any,
+    data: Partial<IIssueComment>,
     user: ICurrentUserResponse | undefined
   ): Promise<any> {
     return this.post(
@@ -468,8 +468,7 @@ class ProjectIssuesServices extends APIService {
       metadata: any;
       title: string;
       url: string;
-    },
+    }
-
   ): Promise<any> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
@@ -481,7 +480,6 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-
   async deleteIssueLink(
     workspaceSlug: string,
     projectId: string,

apps/app/types/issues.d.ts

@@ -198,6 +198,7 @@ export interface IIssueActivity {
 }
 
 export interface IIssueComment extends IIssueActivity {
+  access: "EXTERNAL" | "INTERNAL";
   comment_html: string;
   comment_json: any;
   comment_stripped: string;

apps/app/types/projects.d.ts

@@ -39,6 +39,7 @@ export interface IProject {
   } | null;
   id: string;
   identifier: string;
+  is_deployed: boolean;
   is_favorite: boolean;
   is_member: boolean;
   member_role: 5 | 10 | 15 | 20 | null;
@@ -57,7 +58,6 @@ export interface IProject {
   updated_by: string;
   workspace: IWorkspace | string;
   workspace_detail: IWorkspaceLite;
-  is_deployed: boolean;
 }
 
 export interface IProjectLite {