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>

apiserver/plane/api/serializers/issue.py

@@ -24,9 +24,15 @@ from plane.db.models import (
     Cycle,
     Module,
     ModuleIssue,
+    IssueLink,
 )
 
 
+class IssueLinkCreateSerializer(serializers.Serializer):
+    url = serializers.CharField(required=True)
+    title = serializers.CharField(required=False)
+
+
 class IssueFlatSerializer(BaseSerializer):
     ## Contain only flat fields
 
@@ -86,6 +92,11 @@ class IssueCreateSerializer(BaseSerializer):
         write_only=True,
         required=False,
     )
+    links_list = serializers.ListField(
+        child=IssueLinkCreateSerializer(),
+        write_only=True,
+        required=False,
+    )
 
     class Meta:
         model = Issue
@@ -104,6 +115,7 @@ class IssueCreateSerializer(BaseSerializer):
         assignees = validated_data.pop("assignees_list", None)
         labels = validated_data.pop("labels_list", None)
         blocks = validated_data.pop("blocks_list", None)
+        links = validated_data.pop("links_list", None)
 
         project = self.context["project"]
         issue = Issue.objects.create(**validated_data, project=project)
@@ -172,6 +184,24 @@ class IssueCreateSerializer(BaseSerializer):
                 batch_size=10,
             )
 
+        if links is not None:
+            IssueLink.objects.bulk_create(
+                [
+                    IssueLink(
+                        issue=issue,
+                        project=project,
+                        workspace=project.workspace,
+                        created_by=issue.created_by,
+                        updated_by=issue.updated_by,
+                        title=link.get("title", None),
+                        url=link.get("url", None),
+                    )
+                    for link in links
+                ],
+                batch_size=10,
+                ignore_conflicts=True,
+            )
+
         return issue
 
     def update(self, instance, validated_data):
@@ -179,6 +209,7 @@ class IssueCreateSerializer(BaseSerializer):
         assignees = validated_data.pop("assignees_list", None)
         labels = validated_data.pop("labels_list", None)
         blocks = validated_data.pop("blocks_list", None)
+        links = validated_data.pop("links_list", None)
 
         if blockers is not None:
             IssueBlocker.objects.filter(block=instance).delete()
@@ -248,6 +279,25 @@ class IssueCreateSerializer(BaseSerializer):
                 batch_size=10,
             )
 
+        if links is not None:
+            IssueLink.objects.filter(issue=instance).delete()
+            IssueLink.objects.bulk_create(
+                [
+                    IssueLink(
+                        issue=instance,
+                        project=instance.project,
+                        workspace=instance.project.workspace,
+                        created_by=instance.created_by,
+                        updated_by=instance.updated_by,
+                        title=link.get("title", None),
+                        url=link.get("url", None),
+                    )
+                    for link in links
+                ],
+                batch_size=10,
+                ignore_conflicts=True,
+            )
+
         return super().update(instance, validated_data)
 
 
@@ -410,6 +460,12 @@ class IssueModuleDetailSerializer(BaseSerializer):
         ]
 
 
+class IssueLinkSerializer(BaseSerializer):
+    class Meta:
+        model = IssueLink
+        fields = "__all__"
+
+
 class IssueSerializer(BaseSerializer):
     project_detail = ProjectSerializer(read_only=True, source="project")
     state_detail = StateSerializer(read_only=True, source="state")
@@ -422,6 +478,7 @@ class IssueSerializer(BaseSerializer):
     blocker_issues = BlockerIssueSerializer(read_only=True, many=True)
     issue_cycle = IssueCycleDetailSerializer(read_only=True)
     issue_module = IssueModuleDetailSerializer(read_only=True)
+    issue_link = IssueLinkSerializer(read_only=True, many=True)
     sub_issues_count = serializers.IntegerField(read_only=True)
 
     class Meta:

apiserver/plane/api/views/issue.py

@@ -39,6 +39,7 @@ from plane.db.models import (
     IssueBlocker,
     CycleIssue,
     ModuleIssue,
+    IssueLink,
 )
 from plane.bgtasks.issue_activites_task import issue_activity
 
@@ -75,7 +76,6 @@ class IssueViewSet(BaseViewSet):
             self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
         )
         if current_instance is not None:
-
             issue_activity.delay(
                 {
                     "type": "issue.activity",
@@ -92,7 +92,6 @@ class IssueViewSet(BaseViewSet):
         return super().perform_update(serializer)
 
     def get_queryset(self):
-
         return (
             super()
             .get_queryset()
@@ -136,6 +135,12 @@ class IssueViewSet(BaseViewSet):
                     ).prefetch_related("module__members"),
                 ),
             )
+            .prefetch_related(
+                Prefetch(
+                    "issue_link",
+                    queryset=IssueLink.objects.select_related("issue"),
+                )
+            )
         )
 
     def grouper(self, issue, group_by):
@@ -265,6 +270,12 @@ class UserWorkSpaceIssues(BaseAPIView):
                         queryset=ModuleIssue.objects.select_related("module", "issue"),
                     ),
                 )
+                .prefetch_related(
+                    Prefetch(
+                        "issue_link",
+                        queryset=IssueLink.objects.select_related("issue"),
+                    )
+                )
             )
             serializer = IssueSerializer(issues, many=True)
             return Response(serializer.data, status=status.HTTP_200_OK)
@@ -277,7 +288,6 @@ class UserWorkSpaceIssues(BaseAPIView):
 
 
 class WorkSpaceIssuesEndpoint(BaseAPIView):
-
     permission_classes = [
         WorkSpaceAdminPermission,
     ]
@@ -298,7 +308,6 @@ class WorkSpaceIssuesEndpoint(BaseAPIView):
 
 
 class IssueActivityEndpoint(BaseAPIView):
-
     permission_classes = [
         ProjectEntityPermission,
     ]
@@ -333,7 +342,6 @@ class IssueActivityEndpoint(BaseAPIView):
 
 
 class IssueCommentViewSet(BaseViewSet):
-
     serializer_class = IssueCommentSerializer
     model = IssueComment
     permission_classes = [
@@ -436,7 +444,6 @@ class IssuePropertyViewSet(BaseViewSet):
 
     def create(self, request, slug, project_id):
         try:
-
             issue_property, created = IssueProperty.objects.get_or_create(
                 user=request.user,
                 project_id=project_id,
@@ -463,7 +470,6 @@ class IssuePropertyViewSet(BaseViewSet):
 
 
 class LabelViewSet(BaseViewSet):
-
     serializer_class = LabelSerializer
     model = Label
     permission_classes = [
@@ -490,14 +496,12 @@ class LabelViewSet(BaseViewSet):
 
 
 class BulkDeleteIssuesEndpoint(BaseAPIView):
-
     permission_classes = [
         ProjectEntityPermission,
     ]
 
     def delete(self, request, slug, project_id):
         try:
-
             issue_ids = request.data.get("issue_ids", [])
 
             if not len(issue_ids):
@@ -527,14 +531,12 @@ class BulkDeleteIssuesEndpoint(BaseAPIView):
 
 
 class SubIssuesEndpoint(BaseAPIView):
-
     permission_classes = [
         ProjectEntityPermission,
     ]
 
     def get(self, request, slug, project_id, issue_id):
         try:
-
             sub_issues = (
                 Issue.objects.filter(
                     parent_id=issue_id, workspace__slug=slug, project_id=project_id

apiserver/plane/db/models/__init__.py

@@ -23,6 +23,7 @@ from .issue import (
     IssueAssignee,
     Label,
     IssueBlocker,
+    IssueLink,
 )
 
 from .asset import FileAsset

apiserver/plane/db/models/issue.py

@@ -161,6 +161,23 @@ class IssueAssignee(ProjectBaseModel):
         return f"{self.issue.name} {self.assignee.email}"
 
 
+class IssueLink(ProjectBaseModel):
+    title = models.CharField(max_length=255, null=True)
+    url = models.URLField()
+    issue = models.ForeignKey(
+        "db.Issue", on_delete=models.CASCADE, related_name="issue_link"
+    )
+
+    class Meta:
+        verbose_name = "Issue Link"
+        verbose_name_plural = "Issue Links"
+        db_table = "issue_links"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.issue.name} {self.url}"
+
+
 class IssueActivity(ProjectBaseModel):
     issue = models.ForeignKey(
         Issue, on_delete=models.CASCADE, related_name="issue_activity"

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";

apps/app/components/core/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";
+import type { IIssueLink, ModuleLink } from "types";
-// fetch-keys
-import { MODULE_DETAILS } from "constants/fetch-keys";
 
 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 }) => {
+export const LinkModal: React.FC<Props> = ({ isOpen, handleClose, onFormSubmit }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
   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 }));
+    onClose();
-
-    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(", "),
-          });
-        });
-      });
   };
 
   const onClose = () => {

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";

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>
+        )
+      )}
+    </>
+  );
+};

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">
+                        <button
-                          <CustomMenu ellipsis>
+                          type="button"
-                            <CustomMenu.MenuItem onClick={() => handleSubIssueRemove(issue.id)}>
+                          className="opacity-0 group-hover:opacity-100 cursor-pointer"
-                              Remove as sub-issue
+                          onClick={() => handleSubIssueRemove(issue.id)}
-                            </CustomMenu.MenuItem>
+                        >
-                          </CustomMenu>
+                          <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-900" />
-                        </div>
+                        </button>
                       )}
                     </div>
                   ))}

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";

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 {
+import { LinkModal, SidebarProgressStats } from "components/core";
-  DeleteModuleModal,
+import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
-  ModuleLinkModal,
+import ProgressChart from "components/core/sidebar/progress-chart";
-  SidebarLeadSelect,
-  SidebarMembersSelect,
-} from "components/modules";
 
 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}

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">

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;