plane/web/components/web-view/issue-link-list.tsx
Dakshesh Jain 892a30c3a8
fix: web-view action permission, logs, archive issue, and more (#2356)
* fix: web-view

* feat: select module

* dev: select cycle & module

* fix: permissions, logs and archive issue

* fix: logs for issue select

fix: hard-coded web-view validation

* fix: attachment confirm delete workflow

* fix: typo

* fix: logging link instead of redirecting to the link

* fix: made editor height 100%

* style: due-date select

* fix: update comment not working

* fix: changed button text

style: spacing

* fix: due date select not working for today's date

* fix: typography

* fix: spacing in select parent
2023-10-12 12:28:36 +05:30

156 lines
4.4 KiB
TypeScript

// react
import React, { useState } from "react";
// next
import Link from "next/link";
import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// services
import issuesService from "services/issues.service";
// icons
// import { LinkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react";
// components
import { Label, WebViewModal, CreateUpdateLinkForm, DeleteConfirmation } from "components/web-view";
// ui
import { SecondaryButton } from "components/ui";
// fetch keys
import { ISSUE_DETAILS } from "constants/fetch-keys";
// types
import type { IIssue } from "types";
type Props = {
allowed: boolean;
issueDetails: IIssue;
};
export const IssueLinks: React.FC<Props> = (props) => {
const { issueDetails, allowed } = props;
const links = issueDetails?.issue_link;
const [isOpen, setIsOpen] = useState(false);
const [selectedLink, setSelectedLink] = useState<string | null>(null);
const [deleteSelected, setDeleteSelected] = useState<string | null>(null);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const handleDeleteLink = async (linkId: string) => {
if (!workspaceSlug || !projectId || !issueDetails || !allowed) return;
const updatedLinks = issueDetails.issue_link.filter((l) => l.id !== linkId);
mutate<IIssue>(
ISSUE_DETAILS(issueDetails.id),
(prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }),
false
);
await issuesService
.deleteIssueLink(workspaceSlug as string, projectId as string, issueDetails.id, linkId)
.then(() => {
mutate(ISSUE_DETAILS(issueDetails.id));
})
.catch((err) => {
console.log(err);
});
};
return (
<div>
<WebViewModal
isOpen={isOpen}
onClose={() => {
setIsOpen(false);
setSelectedLink(null);
}}
modalTitle={selectedLink ? "Update Link" : "Add Link"}
>
<CreateUpdateLinkForm
isOpen={isOpen}
links={links}
onSuccess={() => {
setIsOpen(false);
setSelectedLink(null);
}}
data={links?.find((link) => link.id === selectedLink)}
/>
</WebViewModal>
<DeleteConfirmation
title="Delete Link"
content="Are you sure you want to delete this link?"
isOpen={!!deleteSelected}
onCancel={() => setDeleteSelected(null)}
onConfirm={() => {
if (!deleteSelected || !allowed) return;
handleDeleteLink(deleteSelected);
setDeleteSelected(null);
}}
/>
<Label>Links</Label>
<div className="mt-1 space-y-[6px]">
{links?.map((link) => (
<div
key={link.id}
className="px-3 border border-custom-border-200 rounded-[4px] py-2 flex justify-between items-center bg-custom-background-100"
>
<button
type="button"
onClick={() => {
console.log("link", link.url);
}}
className="text-custom-text-200 truncate"
>
<span>
<LinkIcon className="w-4 h-4 inline-block mr-1" />
</span>
<span>{link.title || link.metadata?.title || link.url}</span>
</button>
{allowed && (
<div className="flex gap-2 items-center">
<button
type="button"
onClick={() => {
setIsOpen(true);
setSelectedLink(link.id);
}}
>
<Pencil className="w-[18px] h-[18px] text-custom-text-400" />
</button>
<button
type="button"
onClick={() => {
setDeleteSelected(link.id);
}}
>
<X className="w-[18px] h-[18px] text-custom-text-400" />
</button>
</div>
)}
</div>
))}
<SecondaryButton
type="button"
disabled={!allowed}
onClick={() => setIsOpen(true)}
className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
>
<Plus className="w-[18px] h-[18px] inline-block mr-1" />
<span>Add</span>
</SecondaryButton>
</div>
</div>
);
};