From 81b46e72c2e888b1e87b1a6cd110501a7dca3a7a Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Mon, 22 Jan 2024 15:51:21 +0530 Subject: [PATCH] fix: issue activity/ comments `disable` and `showAccessSpecifier` logic. --- .../issue-activity/activity-comment-root.tsx | 15 +-- .../issue-activity/activity/activity-list.tsx | 4 - .../issue-activity/activity/root.tsx | 9 +- .../issue-activity/comments/comment-block.tsx | 2 +- .../issue-activity/comments/comment-card.tsx | 6 +- .../comments/comment-create-update.tsx | 79 ------------- .../comments/comment-create.tsx | 111 ++++++++++++++++++ .../issue-activity/comments/root.tsx | 13 +- .../issue-detail/issue-activity/index.ts | 2 +- .../issue-detail/issue-activity/root.tsx | 32 ++--- .../issues/issue-detail/main-content.tsx | 14 ++- 11 files changed, 152 insertions(+), 135 deletions(-) delete mode 100644 web/components/issues/issue-detail/issue-activity/comments/comment-create-update.tsx create mode 100644 web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx diff --git a/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx index db1a0fdd6..f630bbedf 100644 --- a/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx +++ b/web/components/issues/issue-detail/issue-activity/activity-comment-root.tsx @@ -9,15 +9,13 @@ import { IssueCommentCard } from "./comments/comment-card"; import { TActivityOperations } from "./root"; type TIssueActivityCommentRoot = { - workspaceSlug: string; - projectId: string; issueId: string; activityOperations: TActivityOperations; - disabled: boolean; + showAccessSpecifier?: boolean; }; export const IssueActivityCommentRoot: FC = observer((props) => { - const { workspaceSlug, projectId, issueId, activityOperations, disabled } = props; + const { issueId, activityOperations, showAccessSpecifier } = props; // hooks const { activity: { getActivityCommentByIssueId }, @@ -32,21 +30,14 @@ export const IssueActivityCommentRoot: FC = observer( {activityComments.map((activityComment, index) => activityComment.activity_type === "COMMENT" ? ( ) : activityComment.activity_type === "ACTIVITY" ? ( ) : ( diff --git a/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx b/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx index 169faad3a..0f5f6876e 100644 --- a/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx +++ b/web/components/issues/issue-detail/issue-activity/activity/activity-list.tsx @@ -24,11 +24,7 @@ import { } from "./actions"; type TIssueActivityList = { - workspaceSlug: string; - projectId: string; - issueId: string; activityId: string; - disabled: boolean; ends: "top" | "bottom" | undefined; }; diff --git a/web/components/issues/issue-detail/issue-activity/activity/root.tsx b/web/components/issues/issue-detail/issue-activity/activity/root.tsx index d8779b915..af44463d5 100644 --- a/web/components/issues/issue-detail/issue-activity/activity/root.tsx +++ b/web/components/issues/issue-detail/issue-activity/activity/root.tsx @@ -6,14 +6,11 @@ import { useIssueDetail } from "hooks/store"; import { IssueActivityList } from "./activity-list"; type TIssueActivityRoot = { - workspaceSlug: string; - projectId: string; issueId: string; - disabled: boolean; }; export const IssueActivityRoot: FC = observer((props) => { - const { workspaceSlug, projectId, issueId, disabled } = props; + const { issueId } = props; // hooks const { activity: { getActivitiesByIssueId }, @@ -26,11 +23,7 @@ export const IssueActivityRoot: FC = observer((props) => {
{activityIds.map((activityId, index) => ( ))} diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx index fb2393831..1771d053b 100644 --- a/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx +++ b/web/components/issues/issue-detail/issue-activity/comments/comment-block.tsx @@ -44,7 +44,7 @@ export const IssueCommentBlock: FC = (props) => { )}
- +
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx index 2c4f950e6..70f68b894 100644 --- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx +++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx @@ -17,18 +17,14 @@ import { TActivityOperations } from "../root"; const fileService = new FileService(); type TIssueCommentCard = { - workspaceSlug: string; - projectId: string; - issueId: string; commentId: string; activityOperations: TActivityOperations; - disabled: boolean; ends: "top" | "bottom" | undefined; showAccessSpecifier?: boolean; }; export const IssueCommentCard: FC = (props) => { - const { commentId, activityOperations, ends, showAccessSpecifier = true } = props; + const { commentId, activityOperations, ends, showAccessSpecifier = false } = props; // hooks const { comment: { getCommentById }, diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-create-update.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-create-update.tsx deleted file mode 100644 index d29f7884e..000000000 --- a/web/components/issues/issue-detail/issue-activity/comments/comment-create-update.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { FC, useRef } from "react"; -import { useForm, Controller } from "react-hook-form"; -// components -import { LiteTextEditorWithRef } from "@plane/lite-text-editor"; -import { Button } from "@plane/ui"; -// services -import { FileService } from "services/file.service"; -// types -import { TActivityOperations } from "../root"; -import { TIssueComment } from "@plane/types"; - -const fileService = new FileService(); - -type TIssueCommentCreateUpdate = { - workspaceSlug: string; - activityOperations: TActivityOperations; - disabled: boolean; -}; - -export const IssueCommentCreateUpdate: FC = (props) => { - const { workspaceSlug, activityOperations, disabled } = props; - // refs - const editorRef = useRef(null); - // react hook form - const { - handleSubmit, - control, - formState: { isSubmitting }, - reset, - } = useForm>({ defaultValues: { comment_html: "

" } }); - - const onSubmit = async (formData: Partial) => { - await activityOperations.createComment(formData).finally(() => { - reset({ comment_html: "" }); - editorRef.current?.clearEditor(); - }); - }; - - return ( -
- ( - { - handleSubmit(onSubmit)(e); - }} - cancelUploadImage={fileService.cancelUpload} - uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)} - deleteFile={fileService.deleteImage} - restoreFile={fileService.restoreImage} - ref={editorRef} - value={!value ? "

" : value} - customClassName="p-2" - editorContentCustomClassNames="min-h-[35px]" - debouncedUpdatesEnabled={false} - onChange={(comment_json: Object, comment_html: string) => { - onChange(comment_html); - }} - submitButton={ - - } - /> - )} - /> -
- ); -}; diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx new file mode 100644 index 000000000..af439e9f6 --- /dev/null +++ b/web/components/issues/issue-detail/issue-activity/comments/comment-create.tsx @@ -0,0 +1,111 @@ +import { FC, useRef } from "react"; +import { useForm, Controller } from "react-hook-form"; +// components +import { LiteTextEditorWithRef } from "@plane/lite-text-editor"; +import { Button } from "@plane/ui"; +// services +import { FileService } from "services/file.service"; +// types +import { TActivityOperations } from "../root"; +import { TIssueComment } from "@plane/types"; +// icons +import { Globe2, Lock } from "lucide-react"; + +const fileService = new FileService(); + +type TIssueCommentCreate = { + workspaceSlug: string; + activityOperations: TActivityOperations; + disabled: boolean; + showAccessSpecifier?: boolean; +}; + +type commentAccessType = { + icon: any; + key: string; + label: "Private" | "Public"; +}; +const commentAccess: commentAccessType[] = [ + { + icon: Lock, + key: "INTERNAL", + label: "Private", + }, + { + icon: Globe2, + key: "EXTERNAL", + label: "Public", + }, +]; + +export const IssueCommentCreate: FC = (props) => { + const { workspaceSlug, activityOperations, disabled, showAccessSpecifier = false } = props; + // refs + const editorRef = useRef(null); + // react hook form + const { + handleSubmit, + control, + formState: { isSubmitting }, + reset, + } = useForm>({ defaultValues: { comment_html: "

" } }); + + const onSubmit = async (formData: Partial) => { + await activityOperations.createComment(formData).finally(() => { + reset({ comment_html: "" }); + editorRef.current?.clearEditor(); + }); + }; + + return ( +
+ ( + ( + { + handleSubmit(onSubmit)(e); + }} + cancelUploadImage={fileService.cancelUpload} + uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)} + deleteFile={fileService.deleteImage} + restoreFile={fileService.restoreImage} + ref={editorRef} + value={!value ? "

" : value} + customClassName="p-2" + editorContentCustomClassNames="min-h-[35px]" + debouncedUpdatesEnabled={false} + onChange={(comment_json: Object, comment_html: string) => { + onChange(comment_html); + }} + commentAccessSpecifier={ + showAccessSpecifier + ? { accessValue: accessValue ?? "INTERNAL", onAccessChange, showAccessSpecifier, commentAccess } + : undefined + } + submitButton={ + + } + /> + )} + /> + )} + /> +
+ ); +}; diff --git a/web/components/issues/issue-detail/issue-activity/comments/root.tsx b/web/components/issues/issue-detail/issue-activity/comments/root.tsx index ccb5d397d..81bfb3da4 100644 --- a/web/components/issues/issue-detail/issue-activity/comments/root.tsx +++ b/web/components/issues/issue-detail/issue-activity/comments/root.tsx @@ -8,34 +8,29 @@ import { IssueCommentCard } from "./comment-card"; import { TActivityOperations } from "../root"; type TIssueCommentRoot = { - workspaceSlug: string; - projectId: string; issueId: string; activityOperations: TActivityOperations; - disabled: boolean; + showAccessSpecifier?: boolean; }; export const IssueCommentRoot: FC = observer((props) => { - const { workspaceSlug, projectId, issueId, disabled, activityOperations } = props; + const { issueId, activityOperations, showAccessSpecifier } = props; // hooks const { comment: { getCommentsByIssueId }, } = useIssueDetail(); const commentIds = getCommentsByIssueId(issueId); - if (!commentIds) return <>; + return (
{commentIds.map((commentId, index) => ( ))}
diff --git a/web/components/issues/issue-detail/issue-activity/index.ts b/web/components/issues/issue-detail/issue-activity/index.ts index 297fe2b49..5c6634ce5 100644 --- a/web/components/issues/issue-detail/issue-activity/index.ts +++ b/web/components/issues/issue-detail/issue-activity/index.ts @@ -9,4 +9,4 @@ export * from "./activity/activity-list"; // issue comment export * from "./comments/root"; export * from "./comments/comment-card"; -export * from "./comments/comment-create-update"; +export * from "./comments/comment-create"; diff --git a/web/components/issues/issue-detail/issue-activity/root.tsx b/web/components/issues/issue-detail/issue-activity/root.tsx index b2bafcffd..9e5b584f5 100644 --- a/web/components/issues/issue-detail/issue-activity/root.tsx +++ b/web/components/issues/issue-detail/issue-activity/root.tsx @@ -5,7 +5,7 @@ import { History, LucideIcon, MessageSquare, Network } from "lucide-react"; import { useIssueDetail } from "hooks/store"; import useToast from "hooks/use-toast"; // components -import { IssueActivityCommentRoot, IssueActivityRoot, IssueCommentRoot, IssueCommentCreateUpdate } from "./"; +import { IssueActivityCommentRoot, IssueActivityRoot, IssueCommentRoot, IssueCommentCreate } from "./"; // types import { TIssueComment } from "@plane/types"; @@ -14,6 +14,7 @@ type TIssueActivity = { projectId: string; issueId: string; disabled: boolean; + showAccessSpecifier?: boolean; }; type TActivityTabs = "all" | "activity" | "comments"; @@ -45,7 +46,7 @@ export type TActivityOperations = { }; export const IssueActivity: FC = observer((props) => { - const { workspaceSlug, projectId, issueId, disabled } = props; + const { workspaceSlug, projectId, issueId, disabled, showAccessSpecifier } = props; // hooks const { createComment, updateComment, removeComment, createCommentReaction, removeCommentReaction } = useIssueDetail(); @@ -154,13 +155,6 @@ export const IssueActivity: FC = observer((props) => { ] ); - const componentCommonProps = { - workspaceSlug, - projectId, - issueId, - disabled, - }; - return (
{/* header */} @@ -191,22 +185,32 @@ export const IssueActivity: FC = observer((props) => {
{activityTab === "all" ? ( <> - - + ) : activityTab === "activity" ? ( - + ) : ( <> - - + )} diff --git a/web/components/issues/issue-detail/main-content.tsx b/web/components/issues/issue-detail/main-content.tsx index e23a6dff2..efa02c18c 100644 --- a/web/components/issues/issue-detail/main-content.tsx +++ b/web/components/issues/issue-detail/main-content.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react-lite"; // hooks -import { useIssueDetail, useProjectState, useUser } from "hooks/store"; +import { useIssueDetail, useProject, useProjectState, useUser } from "hooks/store"; // components import { IssueDescriptionForm, IssueAttachmentRoot, IssueUpdateStatus } from "components/issues"; import { IssueParentDetail } from "./parent"; @@ -32,10 +32,14 @@ export const IssueMainContent: React.FC = observer((props) => { const { issue: { getIssueById }, } = useIssueDetail(); + const { getProjectById } = useProject(); const issue = getIssueById(issueId); if (!issue) return <>; + const project = getProjectById(projectId); + if (!project) return <>; + const currentIssueState = projectStates?.find((s) => s.id === issue.state_id); return ( @@ -100,7 +104,13 @@ export const IssueMainContent: React.FC = observer((props) => { disabled={!is_editable} /> - + ); });