From dbf2a138b3018a5c29ee99a942b0f99c55cf68f0 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 24 Nov 2022 19:18:18 +0530 Subject: [PATCH 1/2] dev: profile page, issue details page design --- .../project/issues/BoardView/SingleBoard.tsx | 6 +- components/project/issues/BoardView/index.tsx | 15 +- .../CreateUpdateIssueModal/SelectAssignee.tsx | 2 +- .../CreateUpdateIssueModal/SelectCycles.tsx | 12 +- .../CreateUpdateIssueModal/SelectLabels.tsx | 14 +- .../SelectParentIssues.tsx | 2 +- .../CreateUpdateIssueModal/SelectPriority.tsx | 14 +- .../CreateUpdateIssueModal/SelectProject.tsx | 2 +- .../CreateUpdateIssueModal/SelectState.tsx | 2 +- .../issues/CreateUpdateIssueModal/index.tsx | 4 +- components/project/issues/ListView/index.tsx | 591 +++++++++--------- .../issue-detail/IssueDetailSidebar.tsx | 298 +++++---- .../issues/issue-detail/activity/index.tsx | 122 ++++ .../comment/IssueCommentCard.tsx | 0 .../comment/IssueCommentSection.tsx | 10 +- constants/common.ts | 33 + contexts/theme.context.tsx | 2 +- layouts/AdminLayout.tsx | 16 +- layouts/Container.tsx | 37 +- layouts/Navbar/Sidebar.tsx | 41 +- layouts/ProjectLayout.tsx | 27 - pages/index.tsx | 21 +- pages/me/my-issues.tsx | 415 ++++++++---- pages/me/profile.tsx | 392 +++++++----- pages/projects/[projectId]/cycles.tsx | 111 ++-- .../projects/[projectId]/issues/[issueId].tsx | 347 ++++------ pages/projects/[projectId]/issues/index.tsx | 350 ++++++----- pages/projects/[projectId]/members.tsx | 248 ++++---- pages/projects/[projectId]/settings.tsx | 490 +++++++-------- pages/projects/index.tsx | 110 ++-- pages/workspace/index.tsx | 34 +- pages/workspace/members.tsx | 247 ++++---- pages/workspace/settings.tsx | 264 ++++---- public/animated-icons/uploading.json | 1 + tailwind.config.js | 2 + types/workspace.d.ts | 2 +- ui/Breadcrumbs/index.tsx | 22 +- ui/EmptySpace/index.tsx | 6 +- ui/HeaderButton/index.tsx | 21 +- ui/index.ts | 2 + 40 files changed, 2301 insertions(+), 2034 deletions(-) create mode 100644 components/project/issues/issue-detail/activity/index.tsx rename components/project/issues/{ => issue-detail}/comment/IssueCommentCard.tsx (100%) rename components/project/issues/{ => issue-detail}/comment/IssueCommentSection.tsx (92%) delete mode 100644 layouts/ProjectLayout.tsx create mode 100644 public/animated-icons/uploading.json diff --git a/components/project/issues/BoardView/SingleBoard.tsx b/components/project/issues/BoardView/SingleBoard.tsx index 1e79b3471..019b4ac5f 100644 --- a/components/project/issues/BoardView/SingleBoard.tsx +++ b/components/project/issues/BoardView/SingleBoard.tsx @@ -36,6 +36,7 @@ type Props = { >; bgColor?: string; stateId?: string; + createdBy?: string; }; const SingleBoard: React.FC = ({ @@ -48,6 +49,7 @@ const SingleBoard: React.FC = ({ setPreloadedData, bgColor = "#0f2b16", stateId, + createdBy, }) => { // Collapse/Expand const [show, setState] = useState(true); @@ -118,6 +120,8 @@ const SingleBoard: React.FC = ({ > {groupTitle === null || groupTitle === "null" ? "None" + : createdBy + ? createdBy : addSpaceIfCamelCase(groupTitle)} @@ -280,7 +284,7 @@ const SingleBoard: React.FC = ({ ) : (
{assignee.first_name.charAt(0)}
diff --git a/components/project/issues/BoardView/index.tsx b/components/project/issues/BoardView/index.tsx index 921a46972..2dfd5575c 100644 --- a/components/project/issues/BoardView/index.tsx +++ b/components/project/issues/BoardView/index.tsx @@ -18,9 +18,9 @@ import SingleBoard from "components/project/issues/BoardView/SingleBoard"; import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; // ui -import { Spinner, Button } from "ui"; +import { Spinner } from "ui"; // types -import type { IState, IIssue, Properties, NestedKeyOf } from "types"; +import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types"; type Props = { properties: Properties; @@ -28,9 +28,10 @@ type Props = { groupedByIssues: { [key: string]: IIssue[]; }; + members: ProjectMember[] | undefined; }; -const BoardView: React.FC = ({ properties, selectedGroup, groupedByIssues }) => { +const BoardView: React.FC = ({ properties, selectedGroup, groupedByIssues, members }) => { const [isOpen, setIsOpen] = useState(false); const [isIssueOpen, setIsIssueOpen] = useState(false); @@ -164,7 +165,7 @@ const BoardView: React.FC = ({ properties, selectedGroup, groupedByIssues /> {groupedByIssues ? ( groupedByIssues ? ( -
+
@@ -180,6 +181,12 @@ const BoardView: React.FC = ({ properties, selectedGroup, groupedByIssues key={singleGroup} selectedGroup={selectedGroup} groupTitle={singleGroup} + createdBy={ + members + ? members?.find((m) => m.member.id === singleGroup)?.member + .first_name + : undefined + } groupedByIssues={groupedByIssues} index={index} setIsIssueOpen={setIsIssueOpen} diff --git a/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx b/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx index b98f35376..fb7c66ef8 100644 --- a/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx +++ b/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx @@ -72,7 +72,7 @@ const SelectAssignee: React.FC = ({ control }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{people?.map((person) => ( = ({ control, setIsOpen }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{sprints?.map((sprint) => ( = ({ control, setIsOpen }) => { {sprint.name} - - {selected && ( - - - )} )} diff --git a/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx b/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx index 5d7088c39..ede265c98 100644 --- a/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx +++ b/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx @@ -98,7 +98,7 @@ const SelectLabels: React.FC = ({ control }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{issueLabels?.map((label) => ( = ({ control }) => { > {label.name} - - {selected ? ( - i === label.id) - ? "text-white" - : "text-indigo-600" - }`} - > - - ) : null} )} diff --git a/components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx b/components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx index ab2f9fada..7d6d7a5f2 100644 --- a/components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx +++ b/components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx @@ -52,7 +52,7 @@ const SelectParent: React.FC = ({ control }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{projectIssues?.results?.map((issue) => ( = ({ control }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{PRIORITIES.map((priority) => ( = ({ control }) => { <> {priority} - - {selected ? ( - - - ) : null} )} diff --git a/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx b/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx index 70a9138ce..773c660f9 100644 --- a/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx +++ b/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx @@ -51,7 +51,7 @@ const SelectProject: React.FC = ({ control }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{projects ? ( projects.length > 0 ? ( diff --git a/components/project/issues/CreateUpdateIssueModal/SelectState.tsx b/components/project/issues/CreateUpdateIssueModal/SelectState.tsx index f93da9b84..daed34a73 100644 --- a/components/project/issues/CreateUpdateIssueModal/SelectState.tsx +++ b/components/project/issues/CreateUpdateIssueModal/SelectState.tsx @@ -49,7 +49,7 @@ const SelectState: React.FC = ({ control, data, setIsOpen }) => { leaveFrom="opacity-100" leaveTo="opacity-0" > - +
{states ? ( states.filter((i) => i.id !== data?.id).length > 0 ? ( diff --git a/components/project/issues/CreateUpdateIssueModal/index.tsx b/components/project/issues/CreateUpdateIssueModal/index.tsx index d27486795..b6f1bab2a 100644 --- a/components/project/issues/CreateUpdateIssueModal/index.tsx +++ b/components/project/issues/CreateUpdateIssueModal/index.tsx @@ -135,7 +135,7 @@ const CreateUpdateIssuesModal: React.FC = ({ setToastAlert({ title: "Success", type: "success", - message: "Issue added to sprint successfully", + message: "Issue added to cycle successfully", }); }) .catch((err) => { @@ -325,7 +325,7 @@ const CreateUpdateIssuesModal: React.FC = ({ register={register} />
-
+
diff --git a/components/project/issues/ListView/index.tsx b/components/project/issues/ListView/index.tsx index 4fb985f28..0ecd5e620 100644 --- a/components/project/issues/ListView/index.tsx +++ b/components/project/issues/ListView/index.tsx @@ -9,7 +9,15 @@ import { Listbox, Transition } from "@headlessui/react"; // icons import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"; // types -import { IIssue, IssueResponse, IState, NestedKeyOf, Properties, WorkspaceMember } from "types"; +import { + IIssue, + IssueResponse, + IState, + NestedKeyOf, + ProjectMember, + Properties, + WorkspaceMember, +} from "types"; // hooks import useUser from "lib/hooks/useUser"; // fetch keys @@ -32,6 +40,7 @@ type Props = { selectedGroup: NestedKeyOf | null; setSelectedIssue: any; handleDeleteIssue: React.Dispatch>; + members: ProjectMember[] | undefined; }; const PRIORITIES = ["high", "medium", "low"]; @@ -42,6 +51,7 @@ const ListView: React.FC = ({ selectedGroup, setSelectedIssue, handleDeleteIssue, + members, }) => { const { activeWorkspace, activeProject, states } = useUser(); @@ -71,255 +81,185 @@ const ListView: React.FC = ({ ); return ( -
-
-
-
- - - - {Object.keys(properties).map( - (key) => - properties[key as keyof Properties] && ( - - ) - )} - - - - - {Object.keys(groupedByIssues).map((singleGroup) => ( - - {selectedGroup !== null ? ( - - - - ) : null} - {groupedByIssues[singleGroup].length > 0 - ? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => { - const assignees = [ - ...(issue?.assignees_list ?? []), - ...(issue?.assignees ?? []), - ]?.map( - (assignee) => - people?.find((p) => p.member.id === assignee)?.member.email - ); +
+
+
+
- {replaceUnderscoreIfSnakeCase(key)} - - ACTIONS -
- {singleGroup === null || singleGroup === "null" - ? selectedGroup === "priority" && "No priority" - : addSpaceIfCamelCase(singleGroup)} - - {groupedByIssues[singleGroup as keyof IIssue].length} - -
+ + + {Object.keys(properties).map( + (key) => + properties[key as keyof Properties] && ( + + ) + )} + + + + + {Object.keys(groupedByIssues).map((singleGroup) => ( + + {selectedGroup !== null ? ( + + + + ) : null} + {groupedByIssues[singleGroup].length > 0 + ? groupedByIssues[singleGroup].map((issue: IIssue, index: number) => { + const assignees = [ + ...(issue?.assignees_list ?? []), + ...(issue?.assignees ?? []), + ]?.map( + (assignee) => people?.find((p) => p.member.id === assignee)?.member.email + ); - return ( - - {Object.keys(properties).map( - (key) => - properties[key as keyof Properties] && ( - + {Object.keys(properties).map( + (key) => + properties[key as keyof Properties] && ( + - ) - )} - - - ); - }) - : null} - - ))} - -
+ {replaceUnderscoreIfSnakeCase(key)} + + ACTIONS +
+ {singleGroup === null || singleGroup === "null" + ? selectedGroup === "priority" && "No priority" + : addSpaceIfCamelCase(singleGroup)} + + {groupedByIssues[singleGroup as keyof IIssue].length} + +
- {(key as keyof Properties) === "name" ? ( -

- - - {issue.name} - - -

- ) : (key as keyof Properties) === "key" ? ( -

- {activeProject?.identifier}-{issue.sequence_id} -

- ) : (key as keyof Properties) === "description" ? ( -

- {issue.description} -

- ) : (key as keyof Properties) === "priority" ? ( - { - partialUpdateIssue({ priority: data }, issue.id); - }} - className="flex-shrink-0" + return ( +
+ {(key as keyof Properties) === "name" ? ( +

+ - {({ open }) => ( - <> -

- - - {issue.priority ?? "None"} - - - - + {issue.name} + + +

+ ) : (key as keyof Properties) === "key" ? ( +

+ {activeProject?.identifier}-{issue.sequence_id} +

+ ) : (key as keyof Properties) === "description" ? ( +

+ {issue.description} +

+ ) : (key as keyof Properties) === "priority" ? ( + { + partialUpdateIssue({ priority: data }, issue.id); + }} + className="flex-shrink-0" + > + {({ open }) => ( + <> +
+ + - - {PRIORITIES?.map((priority) => ( - - classNames( - active ? "bg-indigo-50" : "bg-white", - "cursor-pointer capitalize select-none px-3 py-2" - ) - } - value={priority} - > - {priority} - - ))} - - -
- - )} - - ) : (key as keyof Properties) === "assignee" ? ( - <> - { - const newData = issue.assignees ?? []; - if (newData.includes(data)) { - newData.splice(newData.indexOf(data), 1); - } else { - newData.push(data); - } - partialUpdateIssue( - { assignees_list: newData }, - issue.id - ); - }} - className="flex-shrink-0" - > - {({ open }) => ( - <> -
- - {() => { - if (assignees.length > 0) - return ( - <> - {assignees.map((assignee, index) => ( -
- {assignee} -
- ))} - - ); - else return None; - }} - + {issue.priority ?? "None"} + + - - - {people?.map((person) => ( - - classNames( - active ? "bg-indigo-50" : "bg-white", - "cursor-pointer select-none px-3 py-2" - ) - } - value={person.member.id} - > -
- {person.member.email} -
- - ))} - - -
- - )} - - - ) : (key as keyof Properties) === "state" ? ( + + + {PRIORITIES?.map((priority) => ( + + classNames( + active ? "bg-indigo-50" : "bg-white", + "cursor-pointer capitalize select-none px-3 py-2" + ) + } + value={priority} + > + {priority} + + ))} + + +
+ + )} + + ) : (key as keyof Properties) === "assignee" ? ( + <> { - partialUpdateIssue({ state: data }, issue.id); + value={issue.assignees} + onChange={(data: any) => { + const newData = issue.assignees ?? []; + if (newData.includes(data)) { + newData.splice(newData.indexOf(data), 1); + } else { + newData.push(data); + } + partialUpdateIssue( + { assignees_list: newData }, + issue.id + ); }} className="flex-shrink-0" > {({ open }) => ( <>
- + {() => { + if (assignees.length > 0) + return ( + <> + {assignees.map((assignee, index) => ( +
+ {assignee} +
+ ))} + + ); + else return None; }} - > - - {addSpaceIfCamelCase(issue.state_detail.name)} - = ({ leaveTo="opacity-0" > - {states?.map((state) => ( + {people?.map((person) => ( classNames( active ? "bg-indigo-50" : "bg-white", "cursor-pointer select-none px-3 py-2" ) } - value={state.id} + value={person.member.id} > - {addSpaceIfCamelCase(state.name)} +
+ {person.member.email} +
))} @@ -350,58 +298,115 @@ const ListView: React.FC = ({ )} - ) : (key as keyof Properties) === "children" ? ( -

No children.

- ) : (key as keyof Properties) === "target_date" ? ( -

- {issue.target_date - ? renderShortNumericDateFormat(issue.target_date) - : "-"} -

- ) : ( -

- {issue[key as keyof IIssue] ?? - (issue[key as keyof IIssue] as any)?.name ?? - "None"} -

- )} -
-
- - -
-
-
+ + ) : (key as keyof Properties) === "state" ? ( + { + partialUpdateIssue({ state: data }, issue.id); + }} + className="flex-shrink-0" + > + {({ open }) => ( + <> +
+ + + {addSpaceIfCamelCase(issue.state_detail.name)} + + + + + + {states?.map((state) => ( + + classNames( + active ? "bg-indigo-50" : "bg-white", + "cursor-pointer select-none px-3 py-2" + ) + } + value={state.id} + > + {addSpaceIfCamelCase(state.name)} + + ))} + + +
+ + )} + + ) : (key as keyof Properties) === "children" ? ( +

No children.

+ ) : (key as keyof Properties) === "target_date" ? ( +

+ {issue.target_date + ? renderShortNumericDateFormat(issue.target_date) + : "-"} +

+ ) : ( +

+ {issue[key as keyof IIssue] ?? + (issue[key as keyof IIssue] as any)?.name ?? + "None"} +

+ )} + + ) + )} + +
+ + +
+ + + ); + }) + : null} + + ))} + +
diff --git a/components/project/issues/issue-detail/IssueDetailSidebar.tsx b/components/project/issues/issue-detail/IssueDetailSidebar.tsx index c300d5ff0..985146cdc 100644 --- a/components/project/issues/issue-detail/IssueDetailSidebar.tsx +++ b/components/project/issues/issue-detail/IssueDetailSidebar.tsx @@ -19,11 +19,20 @@ import { PROJECT_ISSUE_LABELS, } from "constants/fetch-keys"; // commons -import { classNames } from "constants/common"; +import { classNames, copyTextToClipboard } from "constants/common"; // ui import { Input, Button } from "ui"; // icons -import { Bars3BottomRightIcon, PlusIcon, UserIcon, TagIcon } from "@heroicons/react/24/outline"; +import { + UserIcon, + TagIcon, + UserGroupIcon, + ChevronDownIcon, + Squares2X2Icon, + ChartBarIcon, + ClipboardDocumentIcon, + LinkIcon, +} from "@heroicons/react/24/outline"; // types import type { Control } from "react-hook-form"; import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types"; @@ -31,6 +40,7 @@ import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } fro type Props = { control: Control; submitChanges: (formData: Partial) => void; + issueDetail: IIssue | undefined; }; const PRIORITIES = ["high", "medium", "low"]; @@ -39,7 +49,7 @@ const defaultValues: Partial = { name: "", }; -const IssueDetailSidebar: React.FC = ({ control, submitChanges }) => { +const IssueDetailSidebar: React.FC = ({ control, submitChanges, issueDetail }) => { const { activeWorkspace, activeProject } = useUser(); const { data: states } = useSWR( @@ -90,65 +100,88 @@ const IssueDetailSidebar: React.FC = ({ control, submitChanges }) => { }); }; + const sidebarOptions = [ + { + label: "Priority", + name: "priority", + canSelectMultipleOptions: false, + icon: ChartBarIcon, + options: PRIORITIES.map((property) => ({ + label: property, + value: property, + })), + }, + { + label: "Status", + name: "state", + canSelectMultipleOptions: false, + icon: Squares2X2Icon, + options: states?.map((state) => ({ + label: state.name, + value: state.id, + })), + }, + { + label: "Assignees", + name: "assignees_list", + canSelectMultipleOptions: true, + icon: UserGroupIcon, + options: people?.map((person) => ({ + label: person.member.first_name, + value: person.member.id, + })), + }, + { + label: "Blocker", + name: "blockers_list", + canSelectMultipleOptions: true, + icon: UserIcon, + options: projectIssues?.results?.map((issue) => ({ + label: issue.name, + value: issue.id, + })), + }, + { + label: "Blocked", + name: "blocked_list", + canSelectMultipleOptions: true, + icon: UserIcon, + options: projectIssues?.results?.map((issue) => ({ + label: issue.name, + value: issue.id, + })), + }, + ]; + return ( -
+
- {[ - { - label: "Priority", - name: "priority", - canSelectMultipleOptions: false, - icon: Bars3BottomRightIcon, - options: PRIORITIES.map((property) => ({ - label: property, - value: property, - })), - }, - { - label: "Status", - name: "state", - canSelectMultipleOptions: false, - icon: Bars3BottomRightIcon, - options: states?.map((state) => ({ - label: state.name, - value: state.id, - })), - }, - { - label: "Assignees", - name: "assignees_list", - canSelectMultipleOptions: true, - icon: UserIcon, - options: people?.map((person) => ({ - label: person.member.first_name, - value: person.member.id, - })), - }, - { - label: "Blocker", - name: "blockers_list", - canSelectMultipleOptions: true, - icon: UserIcon, - options: projectIssues?.results?.map((issue) => ({ - label: issue.name, - value: issue.id, - })), - }, - { - label: "Blocked", - name: "blocked_list", - canSelectMultipleOptions: true, - icon: UserIcon, - options: projectIssues?.results?.map((issue) => ({ - label: issue.name, - value: issue.id, - })), - }, - ].map((item) => ( -
-
- +

Quick Actions

+
+ + +
+ {sidebarOptions.map((item) => ( +
+
+

{item.label}

@@ -160,68 +193,61 @@ const IssueDetailSidebar: React.FC = ({ control, submitChanges }) => { as="div" value={value} multiple={item.canSelectMultipleOptions} - onChange={(value) => submitChanges({ [item.name]: value })} + onChange={(value: any) => submitChanges({ [item.name]: value })} className="flex-shrink-0" > {({ open }) => ( - <> - {item.label} -
- - - - + + - + {value + ? Array.isArray(value) + ? value + .map( + (i: any) => + item.options?.find((option) => option.value === i)?.label + ) + .join(", ") || item.label + : item.options?.find((option) => option.value === value)?.label + : "None"} + + + + + + +
{item.options?.map((option) => ( - classNames( - active || selected ? "bg-indigo-50" : "bg-white", - "relative cursor-default select-none py-2 px-3" - ) + `${ + active || selected ? "text-white bg-theme" : "text-gray-900" + } ${ + item.label === "Priority" && "capitalize" + } cursor-pointer select-none relative p-2 rounded-md truncate` } value={option.value} > -
- - {option.label} - -
+ {option.label} ))} - - -
- +
+ + +
)} )} @@ -230,11 +256,11 @@ const IssueDetailSidebar: React.FC = ({ control, submitChanges }) => {
))}
-
+ = ({ control, submitChanges }) => {
-
-
- +
+
+

Label

@@ -267,15 +293,11 @@ const IssueDetailSidebar: React.FC = ({ control, submitChanges }) => { <> Label
- -
diff --git a/components/project/issues/issue-detail/activity/index.tsx b/components/project/issues/issue-detail/activity/index.tsx new file mode 100644 index 000000000..c48ba6ea8 --- /dev/null +++ b/components/project/issues/issue-detail/activity/index.tsx @@ -0,0 +1,122 @@ +// next +import Image from "next/image"; +import { + ChartBarIcon, + ChatBubbleBottomCenterTextIcon, + Squares2X2Icon, +} from "@heroicons/react/24/outline"; +import { addSpaceIfCamelCase, timeAgo } from "constants/common"; +import { IState } from "types"; +import { Spinner } from "ui"; + +type Props = { + issueActivities: any[] | undefined; + states: IState[] | undefined; +}; + +const activityIcons = { + state: , + priority: , + name: , + description: , +}; + +const IssueActivitySection: React.FC = ({ issueActivities, states }) => { + return ( + <> + {issueActivities ? ( +
+ {issueActivities.map((activity) => { + if (activity.field !== "updated_by") + return ( +
+ {issueActivities.length > 1 ? ( +
+ ); + })} +
+ ) : ( +
+ +
+ )} + + ); +}; + +export default IssueActivitySection; diff --git a/components/project/issues/comment/IssueCommentCard.tsx b/components/project/issues/issue-detail/comment/IssueCommentCard.tsx similarity index 100% rename from components/project/issues/comment/IssueCommentCard.tsx rename to components/project/issues/issue-detail/comment/IssueCommentCard.tsx diff --git a/components/project/issues/comment/IssueCommentSection.tsx b/components/project/issues/issue-detail/comment/IssueCommentSection.tsx similarity index 92% rename from components/project/issues/comment/IssueCommentSection.tsx rename to components/project/issues/issue-detail/comment/IssueCommentSection.tsx index ead953f2f..e0b043710 100644 --- a/components/project/issues/comment/IssueCommentSection.tsx +++ b/components/project/issues/issue-detail/comment/IssueCommentSection.tsx @@ -8,11 +8,14 @@ import issuesServices from "lib/services/issues.services"; // fetch keys import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys"; // components -import CommentCard from "components/project/issues/comment/IssueCommentCard"; +import CommentCard from "components/project/issues/issue-detail/comment/IssueCommentCard"; // ui import { TextArea, Button, Spinner } from "ui"; // types import type { IIssueComment } from "types"; +// icons +import UploadingIcon from "public/animated-icons/uploading.json"; + type Props = { comments?: IIssueComment[]; workspaceSlug: string; @@ -67,9 +70,9 @@ const IssueCommentSection: React.FC = ({ comments, issueId, projectId, wo }; return ( -
+
-
+