[WEB-999] chore: updated UI improvements and workflow updates in the project inbox (#4180)
* chore: snoozed filter in the issue inbox filter * chore: navigating to the next or previous issue when we accept, decline, or duplicate the issue in inbox * chore: Implemented state, label, assignee and target_date in the inbox issue description and Implemented issue edit confirmation once we click accept the inbox issue * chore: removed logs * chore: inbox issue create response * chore: update inbox issue response * chore: updated inbox issue accept workflow and added issue properties in inbox issue create modal * chore: resolved build errors and upgraded lucide react * chore: updated inbox issue store hook * chore: code cleanup and removed validation for inbox description * fix: renamed the variable isLoading to loader in project-inbox store * fix: updated set function for issue property update --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
guru_sainath
GitHub
parent
a44a032683
commit
20b0edeaa6
22 changed files with 965 additions and 127 deletions
|
|
@ -1,13 +1,23 @@
|
|||
import { FC, useCallback, useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { ChevronDown, ChevronUp, Clock, ExternalLink, FileStack, Link, Trash2 } from "lucide-react";
|
||||
import {
|
||||
CircleCheck,
|
||||
CircleX,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
FileStack,
|
||||
Link,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { Button, ControlLink, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// components
|
||||
import {
|
||||
AcceptIssueModal,
|
||||
DeclineIssueModal,
|
||||
DeleteInboxIssueModal,
|
||||
InboxIssueCreateEditModalRoot,
|
||||
InboxIssueSnoozeModal,
|
||||
InboxIssueStatus,
|
||||
SelectDuplicateInboxIssueModal,
|
||||
|
|
@ -39,7 +49,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
|||
const [declineIssueModal, setDeclineIssueModal] = useState(false);
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
// store
|
||||
const { deleteInboxIssue, inboxIssuesArray } = useProjectInbox();
|
||||
const { currentTab, deleteInboxIssue, inboxIssuesArray } = useProjectInbox();
|
||||
const {
|
||||
currentUser,
|
||||
membership: { currentProjectRole },
|
||||
|
|
@ -60,25 +70,50 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
|||
|
||||
const issueLink = `${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`;
|
||||
|
||||
const redirectIssue = (): string | undefined => {
|
||||
let nextOrPreviousIssueId: string | undefined = undefined;
|
||||
const currentIssueIndex = inboxIssuesArray.findIndex((i) => i.issue.id === currentInboxIssueId);
|
||||
if (inboxIssuesArray[currentIssueIndex + 1])
|
||||
nextOrPreviousIssueId = inboxIssuesArray[currentIssueIndex + 1].issue.id;
|
||||
else if (inboxIssuesArray[currentIssueIndex - 1])
|
||||
nextOrPreviousIssueId = inboxIssuesArray[currentIssueIndex - 1].issue.id;
|
||||
else nextOrPreviousIssueId = undefined;
|
||||
return nextOrPreviousIssueId;
|
||||
};
|
||||
|
||||
const handleRedirection = (nextOrPreviousIssueId: string | undefined) => {
|
||||
if (nextOrPreviousIssueId)
|
||||
router.push(
|
||||
`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${currentTab}&inboxIssueId=${nextOrPreviousIssueId}`
|
||||
);
|
||||
else router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${currentTab}`);
|
||||
};
|
||||
|
||||
const handleInboxIssueAccept = async () => {
|
||||
const nextOrPreviousIssueId = redirectIssue();
|
||||
await inboxIssue?.updateInboxIssueStatus(EInboxIssueStatus.ACCEPTED);
|
||||
setAcceptIssueModal(false);
|
||||
handleRedirection(nextOrPreviousIssueId);
|
||||
};
|
||||
|
||||
const handleInboxIssueDecline = async () => {
|
||||
const nextOrPreviousIssueId = redirectIssue();
|
||||
await inboxIssue?.updateInboxIssueStatus(EInboxIssueStatus.DECLINED);
|
||||
setDeclineIssueModal(false);
|
||||
handleRedirection(nextOrPreviousIssueId);
|
||||
};
|
||||
|
||||
const handleInboxSIssueSnooze = async (date: Date) => {
|
||||
const nextOrPreviousIssueId = redirectIssue();
|
||||
await inboxIssue?.updateInboxIssueSnoozeTill(date);
|
||||
setIsSnoozeDateModalOpen(false);
|
||||
handleRedirection(nextOrPreviousIssueId);
|
||||
};
|
||||
|
||||
const handleInboxIssueDuplicate = async (issueId: string) => {
|
||||
await inboxIssue?.updateInboxIssueDuplicateTo(issueId);
|
||||
};
|
||||
|
||||
const handleInboxSIssueSnooze = async (date: Date) => {
|
||||
await inboxIssue?.updateInboxIssueSnoozeTill(date);
|
||||
setIsSnoozeDateModalOpen(false);
|
||||
};
|
||||
|
||||
const handleInboxIssueDelete = async () => {
|
||||
if (!inboxIssue || !currentInboxIssueId) return;
|
||||
await deleteInboxIssue(workspaceSlug, projectId, currentInboxIssueId).finally(() => {
|
||||
|
|
@ -143,10 +178,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
|||
onSubmit={handleInboxIssueDuplicate}
|
||||
/>
|
||||
|
||||
<AcceptIssueModal
|
||||
data={inboxIssue?.issue}
|
||||
isOpen={acceptIssueModal}
|
||||
onClose={() => setAcceptIssueModal(false)}
|
||||
<InboxIssueCreateEditModalRoot
|
||||
workspaceSlug={workspaceSlug.toString()}
|
||||
projectId={projectId.toString()}
|
||||
modalState={acceptIssueModal}
|
||||
handleModalClose={() => setAcceptIssueModal(false)}
|
||||
issue={inboxIssue?.issue}
|
||||
onSubmit={handleInboxIssueAccept}
|
||||
/>
|
||||
|
||||
|
|
@ -156,14 +193,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
|||
onClose={() => setDeclineIssueModal(false)}
|
||||
onSubmit={handleInboxIssueDecline}
|
||||
/>
|
||||
|
||||
<DeleteInboxIssueModal
|
||||
data={inboxIssue?.issue}
|
||||
isOpen={deleteIssueModal}
|
||||
onClose={() => setDeleteIssueModal(false)}
|
||||
onSubmit={handleInboxIssueDelete}
|
||||
/>
|
||||
|
||||
<InboxIssueSnoozeModal
|
||||
isOpen={isSnoozeDateModalOpen}
|
||||
handleClose={() => setIsSnoozeDateModalOpen(false)}
|
||||
|
|
@ -206,7 +241,13 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
|||
<div className="flex flex-wrap items-center gap-2">
|
||||
{canMarkAsAccepted && (
|
||||
<div className="flex-shrink-0">
|
||||
<Button variant="neutral-primary" size="sm" onClick={() => setAcceptIssueModal(true)}>
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<CircleCheck className="w-3 h-3" />}
|
||||
className="text-green-500 border-0.5 border-green-500 bg-green-500/20 focus:bg-green-500/20 focus:text-green-500 hover:bg-green-500/40 bg-opacity-20"
|
||||
onClick={() => setAcceptIssueModal(true)}
|
||||
>
|
||||
Accept
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -214,7 +255,13 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
|||
|
||||
{canMarkAsDeclined && (
|
||||
<div className="flex-shrink-0">
|
||||
<Button variant="neutral-primary" size="sm" onClick={() => setDeclineIssueModal(true)}>
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<CircleX className="w-3 h-3" />}
|
||||
className="text-red-500 border-0.5 border-red-500 bg-red-500/20 focus:bg-red-500/20 focus:text-red-500 hover:bg-red-500/40 bg-opacity-20"
|
||||
onClick={() => setDeclineIssueModal(true)}
|
||||
>
|
||||
Decline
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ type Props = {
|
|||
duplicateIssueDetails: TInboxDuplicateIssueDetails | undefined;
|
||||
};
|
||||
|
||||
export const InboxIssueProperties: React.FC<Props> = observer((props) => {
|
||||
export const InboxIssueContentProperties: React.FC<Props> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props;
|
||||
|
||||
const router = useRouter();
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
|
|||
import { observer } from "mobx-react";
|
||||
import { useRouter } from "next/router";
|
||||
import { TIssue } from "@plane/types";
|
||||
import { TOAST_TYPE, setToast } from "@plane/ui";
|
||||
import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// components
|
||||
import { InboxIssueProperties } from "@/components/inbox/content";
|
||||
import { InboxIssueContentProperties } from "@/components/inbox/content";
|
||||
import {
|
||||
IssueDescriptionInput,
|
||||
IssueTitleInput,
|
||||
|
|
@ -13,7 +13,7 @@ import {
|
|||
TIssueOperations,
|
||||
} from "@/components/issues";
|
||||
// hooks
|
||||
import { useEventTracker, useUser } from "@/hooks/store";
|
||||
import { useEventTracker, useProjectInbox, useUser } from "@/hooks/store";
|
||||
import useReloadConfirmations from "@/hooks/use-reload-confirmation";
|
||||
// store types
|
||||
import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
|
||||
|
|
@ -36,6 +36,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
|
|||
const { currentUser } = useUser();
|
||||
const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
|
||||
const { captureIssueEvent } = useEventTracker();
|
||||
const { loader } = useProjectInbox();
|
||||
|
||||
useEffect(() => {
|
||||
if (isSubmitting === "submitted") {
|
||||
|
|
@ -126,16 +127,22 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
|
|||
value={issue.name}
|
||||
/>
|
||||
|
||||
<IssueDescriptionInput
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={issue.project_id}
|
||||
issueId={issue.id}
|
||||
swrIssueDescription={swrIssueDescription}
|
||||
initialValue={issue.description_html ?? "<p></p>"}
|
||||
disabled={!isEditable}
|
||||
issueOperations={issueOperations}
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
/>
|
||||
{loader === "issue-loading" ? (
|
||||
<Loader className="min-h-[6rem] rounded-md border border-custom-border-200">
|
||||
<Loader.Item width="100%" height="140px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<IssueDescriptionInput
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={issue.project_id}
|
||||
issueId={issue.id}
|
||||
swrIssueDescription={swrIssueDescription}
|
||||
initialValue={issue.description_html ?? "<p></p>"}
|
||||
disabled={!isEditable}
|
||||
issueOperations={issueOperations}
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{currentUser && (
|
||||
<IssueReaction
|
||||
|
|
@ -147,7 +154,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<InboxIssueProperties
|
||||
<InboxIssueContentProperties
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issue={issue}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue