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

[WEB-1008] chore: issue toast alert improvement (#4914)

Browse source 
* chore: toast alert improvement

* chore: create issue toast action items component added

* chore: toast alert improvement

* chore: issue toast alert implementation

* fix: spreadsheet layout quick add toast action
This commit is contained in:
Anmol Singh Bhatia 2024-06-24 18:07:27 +05:30 • committed by GitHub
parent b6cf177630
commit 3eda3845fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 158 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/ui/src/toast/index.tsx
View file

@ -25,13 +25,16 @@ type SetToastProps =
type: Exclude<TOAST_TYPE, TOAST_TYPE.LOADING>;
title: string;
message?: string;
actionItems?: React.ReactNode;
};
type PromiseToastCallback<ToastData> = (data: ToastData) => string;
type ActionItemsPromiseToastCallback<ToastData> = (data: ToastData) => JSX.Element;
type PromiseToastData<ToastData> = {
title: string;
message?: PromiseToastCallback<ToastData>;
actionItems?: ActionItemsPromiseToastCallback<ToastData>;
};
type PromiseToastOptions<ToastData> = {
@ -54,7 +57,7 @@ type ToastProps = {
export const Toast = (props: ToastProps) => {
const { theme } = props;
return <Toaster visibleToasts={5} gap={20} theme={theme} />;
return <Toaster visibleToasts={5} gap={16} theme={theme} />;
};
export const setToast = (props: SetToastProps) => {
@ -66,16 +69,13 @@ export const setToast = (props: SetToastProps) => {
borderColorClassName,
}: ToastContentProps) =>
props.type === TOAST_TYPE.LOADING ? (
<div className="flex items-center h-[98px] w-[350px]">
<div
onMouseDown={(e) => {
e.stopPropagation();
e.preventDefault();
}}
className={cn(
"w-[350px] h-[67.3px] rounded-lg border shadow-sm p-2",
backgroundColorClassName,
borderColorClassName
)}
className={cn("w-full rounded-lg border shadow-sm p-2", backgroundColorClassName, borderColorClassName)}
>
<div className="w-full h-full flex items-center justify-center px-4 py-2">
{icon && <div className="flex items-center justify-center">{icon}</div>}
@ -93,6 +93,7 @@ export const setToast = (props: SetToastProps) => {
</div>
</div>
</div>
</div>
) : (
<div
onMouseDown={(e) => {
@ -100,7 +101,7 @@ export const setToast = (props: SetToastProps) => {
e.preventDefault();
}}
className={cn(
"relative flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
"relative group flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
backgroundColorClassName,
borderColorClassName
)}
@ -112,13 +113,16 @@ export const setToast = (props: SetToastProps) => {
height={14}
onClick={() => toast.dismiss(toastId)}
/>
<div className="w-full flex items-center px-4 py-2">
<div className="w-full flex flex-col gap-2 p-2">
<div className="flex items-center w-full">
{icon && <div className="flex items-center justify-center">{icon}</div>}
<div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-6" : "pl-1")}>
<div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
<div className={cn("text-sm font-semibold", textColorClassName)}>{props.title}</div>
{props.message && <div className="text-toast-text-secondary text-xs font-medium">{props.message}</div>}
</div>
</div>
{props.actionItems && <div className="flex items-center pl-[32px]">{props.actionItems}</div>}
</div>
</div>
);
@ -128,7 +132,7 @@ export const setToast = (props: SetToastProps) => {
(toastId) =>
renderToastContent({
toastId,
icon: <CheckCircle2 width={28} height={28} strokeWidth={1.5} className="text-toast-text-success" />,
icon: <CheckCircle2 width={24} height={24} strokeWidth={1.5} className="text-toast-text-success" />,
textColorClassName: "text-toast-text-success",
backgroundColorClassName: "bg-toast-background-success",
borderColorClassName: "border-toast-border-success",
@ -140,7 +144,7 @@ export const setToast = (props: SetToastProps) => {
(toastId) =>
renderToastContent({
toastId,
icon: <XCircle width={28} height={28} strokeWidth={1.5} className="text-toast-text-error" />,
icon: <XCircle width={24} height={24} strokeWidth={1.5} className="text-toast-text-error" />,
textColorClassName: "text-toast-text-error",
backgroundColorClassName: "bg-toast-background-error",
borderColorClassName: "border-toast-border-error",
@ -152,7 +156,7 @@ export const setToast = (props: SetToastProps) => {
(toastId) =>
renderToastContent({
toastId,
icon: <AlertTriangle width={28} height={28} strokeWidth={1.5} className="text-toast-text-warning" />,
icon: <AlertTriangle width={24} height={24} strokeWidth={1.5} className="text-toast-text-warning" />,
textColorClassName: "text-toast-text-warning",
backgroundColorClassName: "bg-toast-background-warning",
borderColorClassName: "border-toast-border-warning",
@ -197,6 +201,7 @@ export const setPromiseToast = <ToastData,>(
id: tId,
title: options.success.title,
message: options.success.message?.(data),
actionItems: options.success.actionItems?.(data),
});
})
.catch((data: ToastData) => {
@ -205,6 +210,7 @@ export const setPromiseToast = <ToastData,>(
id: tId,
title: options.error.title,
message: options.error.message?.(data),
actionItems: options.error.actionItems?.(data),
});
});
};

70
web/core/components/issues/create-issue-toast-action-items.tsx Normal file
View file

@ -0,0 +1,70 @@
"use client";
import React, { FC, useState } from "react";
import { observer } from "mobx-react";
// helpers
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
import { useIssueDetail } from "@/hooks/store";
type TCreateIssueToastActionItems = {
workspaceSlug: string;
projectId: string;
issueId: string;
};
export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = observer((props) => {
const { workspaceSlug, projectId, issueId } = props;
// state
const [copied, setCopied] = useState(false);
// store hooks
const {
issue: { getIssueById },
} = useIssueDetail();
// derived values
const issue = getIssueById(issueId);
if (!issue) return null;
const issueLink = `${workspaceSlug}/projects/${projectId}/issues/${issueId}`;
const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
try {
await copyUrlToClipboard(issueLink);
setCopied(true);
setTimeout(() => setCopied(false), 3000);
} catch (error) {
setCopied(false);
}
e.preventDefault();
e.stopPropagation();
};
return (
<div className="flex items-center gap-1 text-xs text-custom-text-200">
<a
href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`}
target="_blank"
rel="noopener noreferrer"
className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-medium rounded"
>
View issue
</a>
{copied ? (
<>
<span className="cursor-default px-2 py-1 text-custom-text-200">Copied!</span>
</>
) : (
<>
<button
className="cursor-pointer hidden group-hover:flex px-2 py-1 text-custom-text-300 hover:text-custom-text-200 hover:bg-custom-background-90 rounded"
onClick={copyToClipboard}
>
Copy link
</button>
</>
)}
</div>
);
});

1
web/core/components/issues/index.ts
View file

@ -9,6 +9,7 @@ export * from "./parent-issues-list-modal";
export * from "./label";
export * from "./confirm-issue-discard";
export * from "./issue-update-status";
export * from "./create-issue-toast-action-items";
// issue details
export * from "./issue-detail";

8
web/core/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
View file

@ -12,6 +12,7 @@ import { ISearchIssueResponse, TIssue } from "@plane/types";
import { TOAST_TYPE, setPromiseToast, setToast, CustomMenu } from "@plane/ui";
// components
import { ExistingIssuesListModal } from "@/components/core";
import { CreateIssueToastActionItems } from "@/components/issues";
// constants
import { ISSUE_CREATED } from "@/constants/event-tracker";
// helpers
@ -135,6 +136,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
success: {
title: "Success!",
message: () => "Issue created successfully.",
actionItems: (data) => (
<CreateIssueToastActionItems
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={data.id}
/>
),
},
error: {
title: "Error!",

8
web/core/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
View file

@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
import { IProject, TIssue } from "@plane/types";
// hooks
import { setPromiseToast } from "@plane/ui";
import { CreateIssueToastActionItems } from "@/components/issues";
import { ISSUE_CREATED } from "@/constants/event-tracker";
import { cn } from "@/helpers/common.helper";
import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
@ -113,6 +114,13 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
success: {
title: "Success!",
message: () => "Issue created successfully.",
actionItems: (data) => (
<CreateIssueToastActionItems
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={data.id}
/>
),
},
error: {
title: "Error!",

8
web/core/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
View file

@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
import { TIssue } from "@plane/types";
// hooks
import { setPromiseToast } from "@plane/ui";
import { CreateIssueToastActionItems } from "@/components/issues";
import { ISSUE_CREATED } from "@/constants/event-tracker";
import { createIssuePayload } from "@/helpers/issue.helper";
import { useEventTracker, useProject } from "@/hooks/store";
@ -102,6 +103,13 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
success: {
title: "Success!",
message: () => "Issue created successfully.",
actionItems: (data) => (
<CreateIssueToastActionItems
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={data.id}
/>
),
},
error: {
title: "Error!",

8
web/core/components/issues/issue-layouts/list/quick-add-issue-form.tsx
View file

@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
import { TIssue, IProject } from "@plane/types";
// hooks
import { setPromiseToast } from "@plane/ui";
import { CreateIssueToastActionItems } from "@/components/issues";
import { ISSUE_CREATED } from "@/constants/event-tracker";
import { createIssuePayload } from "@/helpers/issue.helper";
import { useEventTracker, useProject } from "@/hooks/store";
@ -104,6 +105,13 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
success: {
title: "Success!",
message: () => "Issue created successfully.",
actionItems: (data) => (
<CreateIssueToastActionItems
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={data.id}
/>
),
},
error: {
title: "Error!",

8
web/core/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
View file

@ -8,6 +8,7 @@ import { PlusIcon } from "lucide-react";
import { TIssue } from "@plane/types";
// hooks
import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
import { CreateIssueToastActionItems } from "@/components/issues";
import { ISSUE_CREATED } from "@/constants/event-tracker";
import { createIssuePayload } from "@/helpers/issue.helper";
import { useEventTracker, useProject, useWorkspace } from "@/hooks/store";
@ -162,6 +163,13 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
success: {
title: "Success!",
message: () => "Issue created successfully.",
actionItems: (data) => (
<CreateIssueToastActionItems
workspaceSlug={currentWorkspace.slug}
projectId={currentProjectDetails.id}
issueId={data.id}
/>
),
},
error: {
title: "Error!",

8
web/core/components/issues/issue-modal/modal.tsx
View file

@ -7,6 +7,7 @@ import { useParams, usePathname } from "next/navigation";
import type { TIssue } from "@plane/types";
// ui
import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
import { CreateIssueToastActionItems } from "@/components/issues";
// constants
import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
import { EIssuesStoreType } from "@/constants/issue";
@ -189,6 +190,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: `${is_draft_issue ? "Draft issue" : "Issue"} created successfully.`,
actionItems: !is_draft_issue && (
<CreateIssueToastActionItems
workspaceSlug={workspaceSlug.toString()}
projectId={projectId.toString()}
issueId={response.id}
/>
),
});
captureIssueEvent({
eventName: ISSUE_CREATED,