binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-3892] chore: link item improvements (#6944)

Browse source 
* chore: code refactor

* chore: global link block component added

* chore: link item improvement and code refactor
This commit is contained in:
Anmol Singh Bhatia 2025-04-17 20:08:53 +05:30 • committed by GitHub
parent 18fb3b8450
commit be5d77d978
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 210 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/core/components/issues/issue-detail/links/link-detail.tsx
View file

@ -3,8 +3,9 @@
import { FC } from "react";
// hooks
// ui
import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
import { Pencil, Trash2, ExternalLink } from "lucide-react";
import { Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
import { getIconForLink } from "@plane/utils";
// icons
// types
// helpers
@ -34,6 +35,8 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
const linkDetail = getLinkById(linkId);
if (!linkDetail) return <></>;
const Icon = getIconForLink(linkDetail.url);
const toggleIssueLinkModal = (modalToggle: boolean) => {
toggleIssueLinkModalStore(modalToggle);
setIssueLinkData(linkDetail);
@ -57,7 +60,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
>
<div className="flex items-start gap-2 truncate">
<span className="py-1">
<LinkIcon className="h-3 w-3 flex-shrink-0" />
<Icon className="size-3 stroke-2 text-custom-text-350 group-hover:text-custom-text-100 flex-shrink-0" />
</span>
<Tooltip
tooltipContent={linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}

10
web/core/components/issues/issue-detail/links/link-item.tsx
View file

@ -2,14 +2,14 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { Pencil, Trash2, LinkIcon, Copy } from "lucide-react";
import { Pencil, Trash2, Copy } from "lucide-react";
import { EIssueServiceType } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { TIssueServiceType } from "@plane/types";
// ui
import { Tooltip, TOAST_TYPE, setToast, CustomMenu } from "@plane/ui";
import { calculateTimeAgo, getIconForLink } from "@plane/utils";
// helpers
import { calculateTimeAgoShort } from "@/helpers/date-time.helper";
import { copyTextToClipboard } from "@/helpers/string.helper";
// hooks
import { useIssueDetail } from "@/hooks/store";
@ -37,6 +37,8 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
const linkDetail = getLinkById(linkId);
if (!linkDetail) return <></>;
const Icon = getIconForLink(linkDetail.url);
const toggleIssueLinkModal = (modalToggle: boolean) => {
toggleIssueLinkModalStore(modalToggle);
setIssueLinkData(linkDetail);
@ -48,7 +50,7 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-custom-background-90 hover:bg-custom-background-80 border-[0.5px] border-custom-border-200 rounded"
>
<div className="flex items-center gap-2.5 truncate flex-grow">
<LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" />
<Icon className="size-4 flex-shrink-0 stroke-2 text-custom-text-350 group-hover:text-custom-text-100" />
<Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
<a
href={linkDetail.url}
@ -62,7 +64,7 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
</div>
<div className="flex items-center gap-1 flex-shrink-0">
<p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
{calculateTimeAgoShort(linkDetail.created_at)}
{calculateTimeAgo(linkDetail.created_at)}
</p>
<span
onClick={() => {