chore: update issue detail store to handle peek overview (#2237)

* chore: dynamic position dropdown (#2138) * chore: dynamic position state dropdown for issue view * style: state select dropdown styling * fix: state icon attribute names * chore: state select dynamic dropdown * chore: member select dynamic dropdown * chore: label select dynamic dropdown * chore: priority select dynamic dropdown * chore: label select dropdown improvement * refactor: state dropdown location * chore: dropdown improvement and code refactor * chore: dynamic dropdown hook type added --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> * fix: fields not getting selected in the create issue form (#2212) * fix: hydration error and draft issue workflow * fix: build error * fix: properties getting de-selected after create, module & cycle not getting auto-select on the form * fix: display layout, props being updated directly * chore: sub issues count in individual issue (#2221) * Implemented nested issues in the sub issues section in issue detail page (#2233) * feat: subissues infinte level * feat: updated UI for sub issues * feat: subissues new ui and nested sub issues in issue detail * chore: removed repeated code * refactor: product updates modal layout (#2225) * fix: handle no issues in custom analytics (#2226) * fix: activity label color (#2227) * fix: profile issues layout switch (#2228) * chore: update service imports * chore: update issue detail store to handle peek overview --------- Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Co-authored-by: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com> Co-authored-by: Bavisetti Narayan <72156168+NarayanBavisetti@users.noreply.github.com> Co-authored-by: guru_sainath <gurusainath007@gmail.com>
makeplane · Sep 21, 2023 · daa3094 · daa3094
1 parent 9b41b5b
commit daa3094
Show file tree

Hide file tree

Showing 21 changed files with 1,022 additions and 181 deletions.
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -9,7 +9,6 @@ import { findStringWithMostCharacters } from "helpers/array.helper";
 import { generateBarColor } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
-// constants
 
 type Props = {
   analytics: IAnalyticsResponse;

diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
@@ -1,5 +1,9 @@
 import { useRouter } from "next/router";
 
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issue.service";
 // icons
 import { Icon, Tooltip } from "components/ui";
 import { CopyPlus } from "lucide-react";
@@ -10,26 +14,22 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IIssueActivity } from "types";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
 
 const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   return (
-    <Tooltip
-      tooltipContent={
-        activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
-      }
-    >
+    <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
       <a
         href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
         target="_blank"
         rel="noopener noreferrer"
         className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
       >
-        {activity.issue_detail
-          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
-          : "Issue"}
+        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
         <Icon iconName="launch" className="!text-xs" />
       </a>
     </Tooltip>
@@ -52,13 +52,29 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
   );
 };
 
+const LabelPill = ({ labelId }: { labelId: string }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: labels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <span
+      className="h-1.5 w-1.5 rounded-full"
+      style={{
+        backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
 const activityDetails: {
   [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
+    message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -151,8 +167,7 @@ const activityDetails: {
       else
         return (
           <>
-            removed the blocking issue{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -208,8 +223,7 @@ const activityDetails: {
       else
         return (
           <>
-            removed the relation from{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -298,8 +312,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the estimate point to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            set the estimate point to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -325,14 +338,8 @@ const activityDetails: {
         return (
           <>
             added a new label{" "}
-            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
+            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <LabelPill labelId={activity.new_identifier ?? ""} />
               <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             </span>
             {showIssue && (
@@ -348,13 +355,7 @@ const activityDetails: {
           <>
             removed the label{" "}
             <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
+              <LabelPill labelId={activity.old_identifier ?? ""} />
               <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             </span>
             {showIssue && (
@@ -509,8 +510,7 @@ const activityDetails: {
       if (!activity.new_value)
         return (
           <>
-            removed the parent{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -523,8 +523,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the parent to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -592,8 +591,7 @@ const activityDetails: {
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -645,13 +643,7 @@ export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
   <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
 );
 
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
-  activity: IIssueActivity;
-  showIssue?: boolean;
-}) => {
+export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIssueActivity; showIssue?: boolean }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 

diff --git a/web/components/core/views/board-view/all-boards.tsx b/web/components/core/views/board-view/all-boards.tsx
@@ -78,7 +78,7 @@ export const AllBoards: React.FC<Props> = ({
         readOnly={disableUserActions}
       />
       {groupedIssues ? (
-        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
+        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
           {Object.keys(groupedIssues).map((singleGroup, index) => {
             const currentState =
               displayFilters?.group_by === "state"

diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
@@ -35,9 +35,17 @@ type Props = {
   data: IIssue | null;
   user: ICurrentUserResponse | undefined;
   onSubmit?: () => Promise<void>;
+  redirection?: boolean;
 };
 
-export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, user, onSubmit }) => {
+export const DeleteIssueModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  user,
+  onSubmit,
+  redirection = true,
+}) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -122,7 +130,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, u
           message: "Issue deleted successfully",
         });
 
-        if (issueId) router.back();
+        if (issueId && redirection) router.back();
       })
       .catch((error) => {
         console.log(error);

diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
@@ -138,8 +138,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
     // issue. This has more priority than the project in the url.
     if (data && data.project) return setActiveProject(data.project);
 
-    if (prePopulateData && prePopulateData.project && !activeProject)
-      return setActiveProject(prePopulateData.project);
+    if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
 
     if (prePopulateData && prePopulateData.project) return setActiveProject(prePopulateData.project);
 
@@ -349,8 +348,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
     };
 
     if (action === "createDraft") await createDraftIssue(payload);
-    else if (action === "updateDraft" || action === "convertToNewIssue")
-      await updateDraftIssue(payload);
+    else if (action === "updateDraft" || action === "convertToNewIssue") await updateDraftIssue(payload);
     else if (action === "createNewIssue") await createIssue(payload);
 
     clearDraftIssueLocalStorage();

diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
@@ -12,7 +12,6 @@ export * from "./main-content";
 export * from "./modal";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
-export * from "./sub-issues-list";
 export * from "./label";
 export * from "./issue-reaction";
 export * from "./peek-overview";

diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
@@ -18,9 +18,9 @@ import {
   IssueAttachmentUpload,
   IssueAttachments,
   IssueDescriptionForm,
-  SubIssuesList,
   IssueReaction,
 } from "components/issues";
+import { SubIssuesRoot } from "./sub-issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
@@ -170,7 +170,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
         <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
 
         <div className="mt-2 space-y-2">
-          <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
+          <SubIssuesRoot parentIssue={issueDetails} user={user} editable={uneditable} />
         </div>
       </div>
       <div className="flex flex-col gap-3 py-3">

diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
@@ -36,7 +36,7 @@ export const IssuePeekOverview: React.FC<Props> = observer(({ handleMutation, pr
   const { peekIssue } = router.query;
 
   const { issueDetail: issueDetailStore } = useMobxStore();
-  const { deleteIssue, getIssueById, issues, updateIssue } = issueDetailStore;
+  const { deleteIssue, fetchIssueDetails, issues, updateIssue } = issueDetailStore;
 
   const issue = issues[peekIssue?.toString() ?? ""];
 
@@ -72,8 +72,8 @@ export const IssuePeekOverview: React.FC<Props> = observer(({ handleMutation, pr
   useEffect(() => {
     if (!peekIssue) return;
 
-    getIssueById(workspaceSlug, projectId, peekIssue.toString());
-  }, [getIssueById, peekIssue, projectId, workspaceSlug]);
+    fetchIssueDetails(workspaceSlug, projectId, peekIssue.toString());
+  }, [fetchIssueDetails, peekIssue, projectId, workspaceSlug]);
 
   useEffect(() => {
     if (peekIssue) {

diff --git a/web/components/issues/sub-issues/index.ts b/web/components/issues/sub-issues/index.ts
@@ -0,0 +1 @@
+export * from "./root";