feat: issue links (#288)

* feat: links for issues * fix: add issue link in serilaizer * feat: links can be added to issues --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-02-17 17:04:12 +05:30 · 2023-02-17 17:04:12 +05:30 · 7c1f357bed
commit 7c1f357bed
parent a66b2fd73d
13 changed files with 331 additions and 65 deletions
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@ -6,4 +6,5 @@ export * from "./existing-issues-list-modal";
 export * from "./image-upload-modal";
 export * from "./issues-view-filter";
 export * from "./issues-view";
+export * from "./link-modal";
 export * from "./not-authorized-view";
--- a/apps/app/components/modules/module-link-modal.tsx
+++ b/apps/app/components/modules/module-link-modal.tsx
@ -8,19 +8,15 @@ import { mutate } from "swr";
 import { useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import modulesService from "services/modules.service";
 // ui
 import { Button, Input } from "components/ui";
 // types
-import type { IModule, ModuleLink } from "types";
-// fetch-keys
-import { MODULE_DETAILS } from "constants/fetch-keys";
+import type { IIssueLink, ModuleLink } from "types";

 type Props = {
  isOpen: boolean;
-  module: IModule | undefined;
  handleClose: () => void;
+  onFormSubmit: (formData: IIssueLink | ModuleLink) => void;
 };

 const defaultValues: ModuleLink = {
@ -28,42 +24,20 @@ const defaultValues: ModuleLink = {
  url: "",
 };

-export const ModuleLinkModal: React.FC<Props> = ({ isOpen, module, handleClose }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
+export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }) => {
  const {
    register,
    formState: { errors, isSubmitting },
    handleSubmit,
    reset,
-    setError,
  } = useForm<ModuleLink>({
    defaultValues,
  });

  const onSubmit = async (formData: ModuleLink) => {
-    if (!workspaceSlug || !projectId || !moduleId) return;
+    await onFormSubmit(formData);

-    const previousLinks = module?.link_module.map((l) => ({ title: l.title, url: l.url }));
-
-    const payload: Partial<IModule> = {
-      links_list: [...(previousLinks ?? []), formData],
-    };
-
-    await modulesService
-      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
-      .then((res) => {
-        mutate(MODULE_DETAILS(moduleId as string));
-        onClose();
-      })
-      .catch((err) => {
-        Object.keys(err).map((key) => {
-          setError(key as keyof ModuleLink, {
-            message: err[key].join(", "),
-          });
-        });
-      });
+    onClose();
  };

  const onClose = () => {
--- a/apps/app/components/issues/index.ts
+++ b/apps/app/components/issues/index.ts
@ -4,6 +4,7 @@ export * from "./activity";
 export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./form";
+export * from "./links-list";
 export * from "./modal";
 export * from "./my-issues-list-item";
 export * from "./parent-issues-list-modal";
--- a/apps/app/components/issues/links-list.tsx
+++ b/apps/app/components/issues/links-list.tsx
@ -0,0 +1,179 @@
+import { FC, useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { LinkModal } from "components/core";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { ChevronRightIcon, LinkIcon, PlusIcon } from "@heroicons/react/24/outline";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+import { timeAgo } from "helpers/date-time.helper";
+// types
+import { IIssue, IIssueLink, UserAuth } from "types";
+// fetch-keys
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+  parentIssue: IIssue;
+  userAuth: UserAuth;
+};
+
+export const LinksList: FC<Props> = ({ parentIssue, userAuth }) => {
+  const [linkModal, setLinkModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleCreateLink = async (formData: IIssueLink) => {
+    if (!workspaceSlug || !projectId || !parentIssue) return;
+
+    const previousLinks = parentIssue?.issue_link.map((l) => ({ title: l.title, url: l.url }));
+
+    const payload: Partial<IIssue> = {
+      links_list: [...(previousLinks ?? []), formData],
+    };
+
+    await issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, parentIssue.id, payload)
+      .then((res) => {
+        mutate(ISSUE_DETAILS(parentIssue.id as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId || !parentIssue) return;
+
+    const updatedLinks = parentIssue.issue_link.filter((l) => l.id !== linkId);
+
+    mutate<IIssue>(
+      ISSUE_DETAILS(parentIssue.id as string),
+      (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
+      false
+    );
+
+    await issuesService
+      .patchIssue(workspaceSlug as string, projectId as string, parentIssue.id, {
+        links_list: updatedLinks,
+      })
+      .then((res) => {
+        mutate(ISSUE_DETAILS(parentIssue.id as string));
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
+
+  return (
+    <>
+      <LinkModal
+        isOpen={linkModal}
+        handleClose={() => setLinkModal(false)}
+        onFormSubmit={handleCreateLink}
+      />
+      {parentIssue.issue_link && parentIssue.issue_link.length > 0 ? (
+        <Disclosure defaultOpen={true}>
+          {({ open }) => (
+            <>
+              <div className="flex items-center justify-between">
+                <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100">
+                  <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                  Links <span className="ml-1 text-gray-600">{parentIssue.issue_link.length}</span>
+                </Disclosure.Button>
+                {open && !isNotAllowed ? (
+                  <div className="flex items-center">
+                    <button
+                      type="button"
+                      className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
+                      onClick={() => setLinkModal(true)}
+                    >
+                      <PlusIcon className="h-3 w-3" />
+                      Create new
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+              <Transition
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
+                  {parentIssue.issue_link.map((link) => (
+                    <div
+                      key={link.id}
+                      className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-gray-100"
+                    >
+                      <Link href={link.url}>
+                        <a className="flex items-center gap-2 rounded text-xs">
+                          <LinkIcon className="h-3 w-3" />
+                          <span className="max-w-sm break-all font-medium">{link.title}</span>
+                          <span className="text-gray-400 text-[0.65rem]">
+                            {timeAgo(link.created_at)}
+                          </span>
+                        </a>
+                      </Link>
+                      {!isNotAllowed && (
+                        <div className="opacity-0 group-hover:opacity-100">
+                          <CustomMenu ellipsis>
+                            <CustomMenu.MenuItem
+                              onClick={() =>
+                                copyTextToClipboard(link.url).then(() => {
+                                  setToastAlert({
+                                    type: "success",
+                                    title: "Link copied to clipboard",
+                                  });
+                                })
+                              }
+                            >
+                              Copy link
+                            </CustomMenu.MenuItem>
+                            <CustomMenu.MenuItem onClick={() => handleDeleteLink(link.id)}>
+                              Remove link
+                            </CustomMenu.MenuItem>
+                          </CustomMenu>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        !isNotAllowed && (
+          <button
+            type="button"
+            className="flex cursor-pointer items-center justify-between gap-1 px-2 py-1 text-xs rounded duration-300 hover:bg-gray-100"
+            onClick={() => setLinkModal(true)}
+          >
+            <PlusIcon className="h-3 w-3" />
+            Add new link
+          </button>
+        )
+      )}
+    </>
+  );
+};
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@ -15,7 +15,7 @@ import { CreateUpdateIssueModal } from "components/issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronRightIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
@ -23,12 +23,12 @@ import { IIssue, IssueResponse, UserAuth } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";

-type SubIssueListProps = {
+type Props = {
  parentIssue: IIssue;
  userAuth: UserAuth;
 };

-export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth }) => {
+export const SubIssuesList: FC<Props> = ({ parentIssue, userAuth }) => {
  // states
  const [createIssueModal, setCreateIssueModal] = useState(false);
  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
@ -226,13 +226,13 @@ export const SubIssuesList: FC<SubIssueListProps> = ({ parentIssue, userAuth })
                        </a>
                      </Link>
                      {!isNotAllowed && (
-                        <div className="opacity-0 group-hover:opacity-100">
-                          <CustomMenu ellipsis>
-                            <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
-                              Remove as sub-issue
-                            </CustomMenu.MenuItem>
-                          </CustomMenu>
-                        </div>
+                        <button
+                          type="button"
+                          className="opacity-0 group-hover:opacity-100 cursor-pointer"
+                          onClick={() => handleSubIssueRemove(issue.id)}
+                        >
+                          <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-900" />
+                        </button>
                      )}
                    </div>
                  ))}
--- a/apps/app/components/modules/index.ts
+++ b/apps/app/components/modules/index.ts
@ -3,6 +3,5 @@ export * from "./sidebar-select";
 export * from "./delete-module-modal";
 export * from "./form";
 export * from "./modal";
-export * from "./module-link-modal";
 export * from "./sidebar";
 export * from "./single-module-card";
--- a/apps/app/components/modules/sidebar.tsx
+++ b/apps/app/components/modules/sidebar.tsx
@ -27,16 +27,12 @@ import modulesService from "services/modules.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import {
-  DeleteModuleModal,
-  ModuleLinkModal,
-  SidebarLeadSelect,
-  SidebarMembersSelect,
-} from "components/modules";
+import { LinkModal, SidebarProgressStats } from "components/core";
+import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
+import ProgressChart from "components/core/sidebar/progress-chart";

 import "react-circular-progressbar/dist/styles.css";
 // components
-import { SidebarProgressStats } from "components/core";
 // ui
 import { CustomSelect, Loader } from "components/ui";
 // helpers
@ -44,10 +40,9 @@ import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper"
 import { copyTextToClipboard } from "helpers/string.helper";
 import { groupBy } from "helpers/array.helper";
 // types
-import { IIssue, IModule, ModuleIssueResponse } from "types";
+import { IIssue, IModule, ModuleIssueResponse, ModuleLink } from "types";
 // fetch-keys
 import { MODULE_DETAILS } from "constants/fetch-keys";
-import ProgressChart from "components/core/sidebar/progress-chart";
 // constant
 import { MODULE_STATUS } from "constants/module";

@ -113,6 +108,29 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
      });
  };

+  const handleCreateLink = async (formData: ModuleLink) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const previousLinks = module?.link_module.map((l) => ({ title: l.title, url: l.url }));
+
+    const payload: Partial<IModule> = {
+      links_list: [...(previousLinks ?? []), formData],
+    };
+
+    await modulesService
+      .patchModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
+      .then((res) => {
+        mutate(MODULE_DETAILS(moduleId as string));
+      })
+      .catch((err) => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't create the link. Please try again.",
+        });
+      });
+  };
+
  useEffect(() => {
    if (module)
      reset({
@ -123,12 +141,13 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,

  const isStartValid = new Date(`${module?.start_date}`) <= new Date();
  const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
+
  return (
    <>
-      <ModuleLinkModal
+      <LinkModal
        isOpen={moduleLinkModal}
        handleClose={() => setModuleLinkModal(false)}
-        module={module}
+        onFormSubmit={handleCreateLink}
      />
      <DeleteModuleModal
        isOpen={moduleDeleteModal}
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@ -20,6 +20,7 @@ import {
  IssueDetailsSidebar,
  IssueActivitySection,
  AddComment,
+  LinksList,
 } from "components/issues";
 // ui
 import { Loader, CustomMenu } from "components/ui";
@ -193,8 +194,9 @@ const IssueDetailsPage: NextPage<UserAuth> = (props) => {
                handleFormSubmit={submitChanges}
                userAuth={props}
              />
-              <div className="mt-2">
+              <div className="mt-2 space-y-2">
                <SubIssuesList parentIssue={issueDetails} userAuth={props} />
+                <LinksList parentIssue={issueDetails} userAuth={props} />
              </div>
            </div>
            <div className="space-y-5 bg-secondary pt-3">
--- a/apps/app/types/issues.d.ts
+++ b/apps/app/types/issues.d.ts
@ -60,6 +60,11 @@ export interface IIssueParent {
  target_date: string | null;
 }

+export interface IIssueLink {
+  title: string;
+  url: string;
+}
+
 export interface IIssue {
  assignees: any[] | null;
  assignee_details: IUser[];
@ -83,8 +88,17 @@ export interface IIssue {
  description_html: any;
  id: string;
  issue_cycle: IIssueCycle | null;
+  issue_link: {
+    created_at: Date;
+    created_by: string;
+    created_by_detail: IUserLite;
+    id: string;
+    title: string;
+    url: string;
+  }[];
  issue_module: IIssueModule | null;
  label_details: any[];
+  links_list: IIssueLink[];
  module: string | null;
  name: string;
  parent: string | null;