chore: update in sub-issues component and property validation and issue loaders (#3375)
* fix: handled undefined issue_id in list layout * chore: refactor peek overview and user role validation. * chore: sub issues * fix: sub issues state distribution changed * chore: sub_issues implementation in issue detail page * chore: fixes in cycle/ module layout. * Fix progress chart * Module issues's update/ delete. * Peek Overview for Modules/ Cycle. * Fix Cycle Filters not applying bug. --------- Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
guru_sainath
sriram veeraghanta
parent
11f84a986c
commit
6a16a98b03
32 changed files with 1136 additions and 1174 deletions
|
|
@ -1,133 +1,32 @@
|
|||
import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import debounce from "lodash/debounce";
|
||||
// packages
|
||||
import { RichTextEditor } from "@plane/rich-text-editor";
|
||||
import { FC } from "react";
|
||||
// hooks
|
||||
import { useMention, useProject, useUser } from "hooks/store";
|
||||
import useReloadConfirmations from "hooks/use-reload-confirmation";
|
||||
import { useIssueDetail, useProject, useUser } from "hooks/store";
|
||||
// components
|
||||
import { IssuePeekOverviewReactions } from "components/issues";
|
||||
// ui
|
||||
import { TextArea } from "@plane/ui";
|
||||
// types
|
||||
import { TIssue, IUser } from "@plane/types";
|
||||
// services
|
||||
import { FileService } from "services/file.service";
|
||||
// constants
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
const fileService = new FileService();
|
||||
import { IssueDescriptionForm, TIssueOperations } from "components/issues";
|
||||
import { IssueReaction } from "../issue-detail/reactions";
|
||||
|
||||
interface IPeekOverviewIssueDetails {
|
||||
workspaceSlug: string;
|
||||
issue: TIssue;
|
||||
issueReactions: any;
|
||||
user: IUser | null;
|
||||
issueUpdate: (issue: Partial<TIssue>) => void;
|
||||
issueReactionCreate: (reaction: string) => void;
|
||||
issueReactionRemove: (reaction: string) => void;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
issueOperations: TIssueOperations;
|
||||
is_archived: boolean;
|
||||
disabled: boolean;
|
||||
isSubmitting: "submitting" | "submitted" | "saved";
|
||||
setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
|
||||
}
|
||||
|
||||
export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) => {
|
||||
const {
|
||||
workspaceSlug,
|
||||
issue,
|
||||
issueReactions,
|
||||
user,
|
||||
issueUpdate,
|
||||
issueReactionCreate,
|
||||
issueReactionRemove,
|
||||
isSubmitting,
|
||||
setIsSubmitting,
|
||||
} = props;
|
||||
// states
|
||||
const [characterLimit, setCharacterLimit] = useState(false);
|
||||
const { workspaceSlug, projectId, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { mentionHighlights, mentionSuggestions } = useMention();
|
||||
const { getProjectById } = useProject();
|
||||
// derived values
|
||||
const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
// toast alert
|
||||
const { setShowAlert } = useReloadConfirmations();
|
||||
// form info
|
||||
const { currentUser } = useUser();
|
||||
const {
|
||||
handleSubmit,
|
||||
watch,
|
||||
reset,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm<TIssue>({
|
||||
defaultValues: {
|
||||
name: issue.name,
|
||||
description_html: issue.description_html,
|
||||
},
|
||||
});
|
||||
|
||||
const handleDescriptionFormSubmit = useCallback(
|
||||
async (formData: Partial<TIssue>) => {
|
||||
if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
|
||||
|
||||
await issueUpdate({
|
||||
...issue,
|
||||
name: formData.name ?? "",
|
||||
description_html: formData.description_html ?? "<p></p>",
|
||||
});
|
||||
},
|
||||
[issue, issueUpdate]
|
||||
);
|
||||
|
||||
const [localTitleValue, setLocalTitleValue] = useState("");
|
||||
const [localIssueDescription, setLocalIssueDescription] = useState({
|
||||
id: issue.id,
|
||||
description_html: issue.description_html,
|
||||
});
|
||||
|
||||
// adding issue.description_html or issue.name to dependency array causes
|
||||
// editor rerendering on every save
|
||||
useEffect(() => {
|
||||
if (issue.id) {
|
||||
setLocalIssueDescription({ id: issue.id, description_html: issue.description_html });
|
||||
setLocalTitleValue(issue.name);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [issue.id]); // TODO: Verify the exhaustive-deps warning
|
||||
|
||||
// ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
|
||||
// TODO: Verify the exhaustive-deps warning
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const debouncedFormSave = useCallback(
|
||||
debounce(async () => {
|
||||
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
|
||||
}, 1500),
|
||||
[handleSubmit]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSubmitting === "submitted") {
|
||||
setShowAlert(false);
|
||||
setTimeout(async () => {
|
||||
setIsSubmitting("saved");
|
||||
}, 2000);
|
||||
} else if (isSubmitting === "submitting") {
|
||||
setShowAlert(true);
|
||||
}
|
||||
}, [isSubmitting, setShowAlert, setIsSubmitting]);
|
||||
|
||||
// reset form values
|
||||
useEffect(() => {
|
||||
if (!issue) return;
|
||||
|
||||
reset({
|
||||
...issue,
|
||||
});
|
||||
}, [issue, reset]);
|
||||
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
// derived values
|
||||
const issue = getIssueById(issueId);
|
||||
if (!issue) return <></>;
|
||||
const projectDetails = getProjectById(issue?.project_id);
|
||||
|
||||
return (
|
||||
|
|
@ -135,82 +34,24 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
|
|||
<span className="text-base font-medium text-custom-text-400">
|
||||
{projectDetails?.identifier}-{issue?.sequence_id}
|
||||
</span>
|
||||
|
||||
<div className="relative">
|
||||
{isAllowed ? (
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
render={({ field: { onChange } }) => (
|
||||
<TextArea
|
||||
id="name"
|
||||
name="name"
|
||||
value={localTitleValue}
|
||||
placeholder="Enter issue name"
|
||||
onFocus={() => setCharacterLimit(true)}
|
||||
onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setCharacterLimit(false);
|
||||
setIsSubmitting("submitting");
|
||||
setLocalTitleValue(e.target.value);
|
||||
onChange(e.target.value);
|
||||
debouncedFormSave();
|
||||
}}
|
||||
required={true}
|
||||
className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !p-0 text-xl outline-none ring-0 focus:!px-3 focus:!py-2 focus:ring-1 focus:ring-custom-primary"
|
||||
hasError={Boolean(errors?.name)}
|
||||
role="textbox"
|
||||
disabled={!true}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
|
||||
)}
|
||||
{characterLimit && true && (
|
||||
<div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200">
|
||||
<span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
|
||||
{watch("name").length}
|
||||
</span>
|
||||
/255
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<span>{errors.name ? errors.name.message : null}</span>
|
||||
<div className="relative">
|
||||
<Controller
|
||||
name="description_html"
|
||||
control={control}
|
||||
render={({ field: { onChange } }) => (
|
||||
<RichTextEditor
|
||||
cancelUploadImage={fileService.cancelUpload}
|
||||
uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
|
||||
deleteFile={fileService.deleteImage}
|
||||
restoreFile={fileService.restoreImage}
|
||||
value={localIssueDescription.description_html}
|
||||
rerenderOnPropsChange={localIssueDescription}
|
||||
setShouldShowAlert={setShowAlert}
|
||||
setIsSubmitting={setIsSubmitting}
|
||||
dragDropEnabled
|
||||
customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
|
||||
noBorder={!isAllowed}
|
||||
onChange={(description: Object, description_html: string) => {
|
||||
setShowAlert(true);
|
||||
setIsSubmitting("submitting");
|
||||
onChange(description_html);
|
||||
debouncedFormSave();
|
||||
}}
|
||||
mentionSuggestions={mentionSuggestions}
|
||||
mentionHighlights={mentionHighlights}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<IssuePeekOverviewReactions
|
||||
issueReactions={issueReactions}
|
||||
user={user}
|
||||
issueReactionCreate={issueReactionCreate}
|
||||
issueReactionRemove={issueReactionRemove}
|
||||
<IssueDescriptionForm
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
isSubmitting={isSubmitting}
|
||||
issue={issue}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{currentUser && (
|
||||
<IssueReaction
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
currentUser={currentUser}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,61 +1,40 @@
|
|||
import { FC } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { CalendarDays, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
|
||||
// hooks
|
||||
import { useProject, useUser } from "hooks/store";
|
||||
import { useIssueDetail, useProject } from "hooks/store";
|
||||
// ui icons
|
||||
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
|
||||
import { IssueLinkRoot, IssueCycleSelect, IssueModuleSelect, IssueParentSelect, IssueLabel } from "components/issues";
|
||||
import {
|
||||
IssueLinkRoot,
|
||||
IssueCycleSelect,
|
||||
IssueModuleSelect,
|
||||
IssueParentSelect,
|
||||
IssueLabel,
|
||||
TIssueOperations,
|
||||
} from "components/issues";
|
||||
import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
|
||||
// components
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
// types
|
||||
import { TIssue, TIssuePriorities } from "@plane/types";
|
||||
// constants
|
||||
// import { EUserProjectRoles } from "constants/project";
|
||||
|
||||
interface IPeekOverviewProperties {
|
||||
issue: TIssue;
|
||||
issueUpdate: (issue: Partial<TIssue>) => void;
|
||||
disableUserActions: boolean;
|
||||
issueOperations: any;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
disabled: boolean;
|
||||
issueOperations: TIssueOperations;
|
||||
}
|
||||
|
||||
export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
|
||||
const { issue, issueUpdate, disableUserActions, issueOperations } = props;
|
||||
|
||||
const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { getProjectById } = useProject();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const uneditable = currentProjectRole ? [5, 10].includes(currentProjectRole) : false;
|
||||
// const isAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const handleState = (_state: string) => {
|
||||
issueUpdate({ ...issue, state_id: _state });
|
||||
};
|
||||
const handlePriority = (_priority: TIssuePriorities) => {
|
||||
issueUpdate({ ...issue, priority: _priority });
|
||||
};
|
||||
const handleAssignee = (_assignees: string[]) => {
|
||||
issueUpdate({ ...issue, assignee_ids: _assignees });
|
||||
};
|
||||
const handleEstimate = (_estimate: number | null) => {
|
||||
issueUpdate({ ...issue, estimate_point: _estimate });
|
||||
};
|
||||
const handleStartDate = (_startDate: string | null) => {
|
||||
issueUpdate({ ...issue, start_date: _startDate || undefined });
|
||||
};
|
||||
const handleTargetDate = (_targetDate: string | null) => {
|
||||
issueUpdate({ ...issue, target_date: _targetDate || undefined });
|
||||
};
|
||||
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
// derived values
|
||||
const issue = getIssueById(issueId);
|
||||
if (!issue) return <></>;
|
||||
const projectDetails = getProjectById(issue.project_id);
|
||||
const isEstimateEnabled = projectDetails?.estimate;
|
||||
|
||||
|
|
@ -68,7 +47,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex w-full flex-col gap-5 py-5">
|
||||
<div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
|
||||
{/* state */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
|
|
@ -77,10 +56,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div>
|
||||
<StateDropdown
|
||||
value={issue?.state_id || ""}
|
||||
onChange={handleState}
|
||||
projectId={issue.project_id}
|
||||
disabled={disableUserActions}
|
||||
value={issue?.state_id ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
disabled={disabled}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -94,14 +73,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div className="h-5 sm:w-1/2">
|
||||
<ProjectMemberDropdown
|
||||
value={issue.assignee_ids}
|
||||
onChange={handleAssignee}
|
||||
disabled={disableUserActions}
|
||||
value={issue?.assignee_ids ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
|
||||
disabled={disabled}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
placeholder="Assignees"
|
||||
multiple
|
||||
buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
|
||||
buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
|
||||
buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
|
||||
buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,9 +93,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div className="h-5">
|
||||
<PriorityDropdown
|
||||
value={issue.priority || ""}
|
||||
onChange={handlePriority}
|
||||
disabled={disableUserActions}
|
||||
value={issue?.priority || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
|
||||
disabled={disabled}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -131,10 +110,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div>
|
||||
<EstimateDropdown
|
||||
value={issue.estimate_point}
|
||||
onChange={handleEstimate}
|
||||
projectId={issue.project_id}
|
||||
disabled={disableUserActions}
|
||||
value={issue?.estimate_point || null}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
|
||||
projectId={projectId}
|
||||
disabled={disabled}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -150,11 +129,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
<div>
|
||||
<CustomDatePicker
|
||||
placeholder="Start date"
|
||||
value={issue.start_date}
|
||||
onChange={handleStartDate}
|
||||
className="!rounded border-none bg-custom-background-80 !px-2.5 !py-0.5"
|
||||
value={issue.start_date || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })}
|
||||
className="border-none bg-custom-background-80"
|
||||
maxDate={maxDate ?? undefined}
|
||||
disabled={disableUserActions}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -168,11 +147,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
<div>
|
||||
<CustomDatePicker
|
||||
placeholder="Due date"
|
||||
value={issue.target_date}
|
||||
onChange={handleTargetDate}
|
||||
className="!rounded border-none bg-custom-background-80 !px-2.5 !py-0.5"
|
||||
value={issue.target_date || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })}
|
||||
className="border-none bg-custom-background-80"
|
||||
minDate={minDate ?? undefined}
|
||||
disabled={disableUserActions}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -185,11 +164,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div>
|
||||
<IssueParentSelect
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
issueId={issue?.id}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disableUserActions}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -197,7 +176,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
|
||||
<span className="border-t border-custom-border-200" />
|
||||
|
||||
<div className="flex w-full flex-col gap-5 py-5">
|
||||
<div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
|
||||
{projectDetails?.cycle_view && (
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
|
|
@ -206,11 +185,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div>
|
||||
<IssueCycleSelect
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
issueId={issue?.id}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disableUserActions}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,11 +203,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
</div>
|
||||
<div>
|
||||
<IssueModuleSelect
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
issueId={issue?.id}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disableUserActions}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -240,12 +219,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
<p>Label</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<IssueLabel
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
issueId={issue?.id}
|
||||
disabled={uneditable}
|
||||
/>
|
||||
<IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -253,11 +227,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
|||
<span className="border-t border-custom-border-200" />
|
||||
|
||||
<div className="w-full pt-3">
|
||||
<IssueLinkRoot
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
issueId={issue?.id}
|
||||
/>
|
||||
<IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
import { FC, Fragment, useEffect, useState, useMemo } from "react";
|
||||
// router
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useIssueDetail, useIssues, useMember, useProject, useUser } from "hooks/store";
|
||||
import { useIssueDetail, useIssues, useMember, useUser } from "hooks/store";
|
||||
// components
|
||||
import { IssueView } from "components/issues";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
// constants
|
||||
|
|
@ -16,10 +12,20 @@ import { EUserProjectRoles } from "constants/project";
|
|||
import { EIssuesStoreType } from "constants/issue";
|
||||
|
||||
interface IIssuePeekOverview {
|
||||
isArchived?: boolean;
|
||||
is_archived?: boolean;
|
||||
onIssueUpdate?: (issue: Partial<TIssue>) => Promise<void>;
|
||||
}
|
||||
|
||||
export type TIssuePeekOperations = {
|
||||
fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
|
||||
update: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: Partial<TIssue>,
|
||||
showToast?: boolean
|
||||
) => Promise<void>;
|
||||
remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
|
||||
addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
|
||||
removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
|
||||
addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) => Promise<void>;
|
||||
|
|
@ -27,17 +33,13 @@ export type TIssuePeekOperations = {
|
|||
};
|
||||
|
||||
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
const { isArchived = false } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { is_archived = false, onIssueUpdate } = props;
|
||||
// hooks
|
||||
const {
|
||||
project: {},
|
||||
} = useMember();
|
||||
const { currentProjectDetails } = useProject();
|
||||
const { setToastAlert } = useToast();
|
||||
const {
|
||||
currentUser,
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const {
|
||||
|
|
@ -47,17 +49,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
peekIssue,
|
||||
updateIssue,
|
||||
removeIssue,
|
||||
createComment,
|
||||
updateComment,
|
||||
removeComment,
|
||||
createCommentReaction,
|
||||
removeCommentReaction,
|
||||
createReaction,
|
||||
removeReaction,
|
||||
createSubscription,
|
||||
removeSubscription,
|
||||
issue: { getIssueById, fetchIssue },
|
||||
fetchActivities,
|
||||
} = useIssueDetail();
|
||||
const { addIssueToCycle, removeIssueFromCycle, addIssueToModule, removeIssueFromModule } = useIssueDetail();
|
||||
// state
|
||||
|
|
@ -74,6 +66,54 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
|
||||
const issueOperations: TIssuePeekOperations = useMemo(
|
||||
() => ({
|
||||
fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
await fetchIssue(workspaceSlug, projectId, issueId);
|
||||
} catch (error) {
|
||||
console.error("Error fetching the parent issue");
|
||||
}
|
||||
},
|
||||
update: async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
data: Partial<TIssue>,
|
||||
showToast: boolean = true
|
||||
) => {
|
||||
try {
|
||||
const response = await updateIssue(workspaceSlug, projectId, issueId, data);
|
||||
if (onIssueUpdate) await onIssueUpdate(response);
|
||||
if (showToast)
|
||||
setToastAlert({
|
||||
title: "Issue updated successfully",
|
||||
type: "success",
|
||||
message: "Issue updated successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
setToastAlert({
|
||||
title: "Issue update failed",
|
||||
type: "error",
|
||||
message: "Issue update failed",
|
||||
});
|
||||
}
|
||||
},
|
||||
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
else await removeIssue(workspaceSlug, projectId, issueId);
|
||||
setToastAlert({
|
||||
title: "Issue deleted successfully",
|
||||
type: "success",
|
||||
message: "Issue deleted successfully",
|
||||
});
|
||||
} catch (error) {
|
||||
setToastAlert({
|
||||
title: "Issue delete failed",
|
||||
type: "error",
|
||||
message: "Issue delete failed",
|
||||
});
|
||||
}
|
||||
},
|
||||
addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
|
||||
try {
|
||||
await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
|
||||
|
|
@ -139,73 +179,27 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
}
|
||||
},
|
||||
}),
|
||||
[addIssueToCycle, removeIssueFromCycle, addIssueToModule, removeIssueFromModule, setToastAlert]
|
||||
[
|
||||
is_archived,
|
||||
fetchIssue,
|
||||
updateIssue,
|
||||
removeIssue,
|
||||
removeArchivedIssue,
|
||||
addIssueToCycle,
|
||||
removeIssueFromCycle,
|
||||
addIssueToModule,
|
||||
removeIssueFromModule,
|
||||
setToastAlert,
|
||||
onIssueUpdate,
|
||||
]
|
||||
);
|
||||
|
||||
if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;
|
||||
|
||||
const issue = getIssueById(peekIssue.issueId) || undefined;
|
||||
|
||||
const redirectToIssueDetail = () => {
|
||||
router.push({
|
||||
pathname: `/${peekIssue.workspaceSlug}/projects/${peekIssue.projectId}/${
|
||||
isArchived ? "archived-issues" : "issues"
|
||||
}/${peekIssue.issueId}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(
|
||||
`${peekIssue.workspaceSlug}/projects/${peekIssue.projectId}/${isArchived ? "archived-issues" : "issues"}/${
|
||||
peekIssue.issueId
|
||||
}`
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Issue link copied to clipboard.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const issueUpdate = async (_data: Partial<TIssue>) => {
|
||||
if (!issue) return;
|
||||
await updateIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, _data);
|
||||
fetchActivities(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
|
||||
};
|
||||
const issueDelete = async () => {
|
||||
if (!issue) return;
|
||||
if (isArchived) await removeArchivedIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
|
||||
else await removeIssue(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
|
||||
};
|
||||
|
||||
const issueReactionCreate = (reaction: string) =>
|
||||
createReaction(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, reaction);
|
||||
const issueReactionRemove = (reaction: string) =>
|
||||
currentUser &&
|
||||
currentUser.id &&
|
||||
removeReaction(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, reaction, currentUser.id);
|
||||
|
||||
const issueCommentCreate = (comment: any) =>
|
||||
createComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, comment);
|
||||
const issueCommentUpdate = (comment: any) =>
|
||||
updateComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, comment?.id, comment);
|
||||
const issueCommentRemove = (commentId: string) =>
|
||||
removeComment(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId, commentId);
|
||||
|
||||
const issueCommentReactionCreate = (commentId: string, reaction: string) =>
|
||||
createCommentReaction(peekIssue.workspaceSlug, peekIssue.projectId, commentId, reaction);
|
||||
const issueCommentReactionRemove = (commentId: string, reaction: string) =>
|
||||
removeCommentReaction(peekIssue.workspaceSlug, peekIssue.projectId, commentId, reaction);
|
||||
|
||||
const issueSubscriptionCreate = () =>
|
||||
createSubscription(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
|
||||
const issueSubscriptionRemove = () =>
|
||||
removeSubscription(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId);
|
||||
|
||||
const userRole = currentProjectRole ?? EUserProjectRoles.GUEST;
|
||||
// Check if issue is editable, based on user role
|
||||
const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
const isLoading = !issue || loader ? true : false;
|
||||
|
||||
return (
|
||||
|
|
@ -215,23 +209,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
projectId={peekIssue.projectId}
|
||||
issueId={peekIssue.issueId}
|
||||
isLoading={isLoading}
|
||||
isArchived={isArchived}
|
||||
issue={issue}
|
||||
handleCopyText={handleCopyText}
|
||||
redirectToIssueDetail={redirectToIssueDetail}
|
||||
issueUpdate={issueUpdate}
|
||||
issueDelete={issueDelete}
|
||||
issueReactionCreate={issueReactionCreate}
|
||||
issueReactionRemove={issueReactionRemove}
|
||||
issueCommentCreate={issueCommentCreate}
|
||||
issueCommentUpdate={issueCommentUpdate}
|
||||
issueCommentRemove={issueCommentRemove}
|
||||
issueCommentReactionCreate={issueCommentReactionCreate}
|
||||
issueCommentReactionRemove={issueCommentReactionRemove}
|
||||
issueSubscriptionCreate={issueSubscriptionCreate}
|
||||
issueSubscriptionRemove={issueSubscriptionRemove}
|
||||
disableUserActions={[5, 10].includes(userRole)}
|
||||
showCommentAccessSpecifier={currentProjectDetails?.is_deployed}
|
||||
is_archived={is_archived}
|
||||
disabled={!is_editable}
|
||||
issueOperations={issueOperations}
|
||||
/>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,36 @@
|
|||
import { FC, useRef, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
|
||||
import { MoveRight, MoveDiagonal, Link2, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
// store hooks
|
||||
import { useIssueDetail, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import {
|
||||
DeleteArchivedIssueModal,
|
||||
DeleteIssueModal,
|
||||
IssueActivity,
|
||||
IssueSubscription,
|
||||
IssueUpdateStatus,
|
||||
PeekOverviewIssueDetails,
|
||||
PeekOverviewProperties,
|
||||
TIssueOperations,
|
||||
} from "components/issues";
|
||||
// ui
|
||||
import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
|
||||
// types
|
||||
import { TIssue } from "@plane/types";
|
||||
import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
|
||||
interface IIssueView {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
|
||||
isLoading?: boolean;
|
||||
isArchived?: boolean;
|
||||
|
||||
issue: TIssue | undefined;
|
||||
|
||||
handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
redirectToIssueDetail: () => void;
|
||||
|
||||
issueUpdate: (issue: Partial<TIssue>) => void;
|
||||
issueDelete: () => Promise<void>;
|
||||
|
||||
issueReactionCreate: (reaction: string) => void;
|
||||
issueReactionRemove: (reaction: string) => void;
|
||||
issueCommentCreate: (comment: any) => void;
|
||||
issueCommentUpdate: (comment: any) => void;
|
||||
issueCommentRemove: (commentId: string) => void;
|
||||
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
|
||||
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
|
||||
issueSubscriptionCreate: () => void;
|
||||
issueSubscriptionRemove: () => void;
|
||||
|
||||
disableUserActions?: boolean;
|
||||
showCommentAccessSpecifier?: boolean;
|
||||
|
||||
issueOperations: any;
|
||||
is_archived: boolean;
|
||||
disabled?: boolean;
|
||||
issueOperations: TIssueOperations;
|
||||
}
|
||||
|
||||
type TPeekModes = "side-peek" | "modal" | "full-screen";
|
||||
|
|
@ -72,79 +54,68 @@ const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
|
|||
];
|
||||
|
||||
export const IssueView: FC<IIssueView> = observer((props) => {
|
||||
const {
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
issueId,
|
||||
issue,
|
||||
isLoading,
|
||||
isArchived,
|
||||
handleCopyText,
|
||||
redirectToIssueDetail,
|
||||
|
||||
issueUpdate,
|
||||
issueReactionCreate,
|
||||
issueReactionRemove,
|
||||
issueCommentCreate,
|
||||
issueCommentUpdate,
|
||||
issueCommentRemove,
|
||||
issueCommentReactionCreate,
|
||||
issueCommentReactionRemove,
|
||||
issueSubscriptionCreate,
|
||||
issueSubscriptionRemove,
|
||||
|
||||
issueDelete,
|
||||
disableUserActions = false,
|
||||
showCommentAccessSpecifier = false,
|
||||
|
||||
issueOperations,
|
||||
} = props;
|
||||
const { workspaceSlug, projectId, issueId, isLoading, is_archived, disabled = false, issueOperations } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
// states
|
||||
const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
|
||||
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
|
||||
// ref
|
||||
const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
|
||||
// store hooks
|
||||
const {
|
||||
activity,
|
||||
reaction,
|
||||
subscription,
|
||||
setPeekIssue,
|
||||
isAnyModalOpen,
|
||||
isDeleteIssueModalOpen,
|
||||
toggleDeleteIssueModal,
|
||||
} = useIssueDetail();
|
||||
const { activity, setPeekIssue, isAnyModalOpen, isDeleteIssueModalOpen, toggleDeleteIssueModal } = useIssueDetail();
|
||||
const { currentUser } = useUser();
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
const { setToastAlert } = useToast();
|
||||
// derived values
|
||||
const issueActivity = activity.getActivitiesByIssueId(issueId);
|
||||
const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
|
||||
const issue = getIssueById(issueId);
|
||||
|
||||
const removeRoutePeekId = () => {
|
||||
setPeekIssue(undefined);
|
||||
};
|
||||
|
||||
const issueReactions = reaction.getReactionsByIssueId(issueId) || [];
|
||||
const issueActivity = activity.getActivitiesByIssueId(issueId);
|
||||
const issueSubscription = subscription.getSubscriptionByIssueId(issueId) || {};
|
||||
|
||||
const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
|
||||
|
||||
useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId());
|
||||
|
||||
const redirectToIssueDetail = () => {
|
||||
router.push({
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(
|
||||
`${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Issue link copied to clipboard.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{issue && !isArchived && (
|
||||
{issue && !is_archived && (
|
||||
<DeleteIssueModal
|
||||
isOpen={isDeleteIssueModalOpen}
|
||||
handleClose={() => toggleDeleteIssueModal(false)}
|
||||
data={issue}
|
||||
onSubmit={issueDelete}
|
||||
onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{issue && isArchived && (
|
||||
{issue && is_archived && (
|
||||
<DeleteArchivedIssueModal
|
||||
data={issue}
|
||||
isOpen={isDeleteIssueModalOpen}
|
||||
handleClose={() => toggleDeleteIssueModal(false)}
|
||||
onSubmit={issueDelete}
|
||||
onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -208,27 +179,18 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
<div className="flex items-center gap-x-4">
|
||||
<IssueUpdateStatus isSubmitting={isSubmitting} />
|
||||
<div className="flex items-center gap-4">
|
||||
{issue?.created_by !== currentUser?.id &&
|
||||
!issue?.assignee_ids.includes(currentUser?.id ?? "") &&
|
||||
!issue?.archived_at && (
|
||||
<Button
|
||||
size="sm"
|
||||
prependIcon={<Bell className="h-3 w-3" />}
|
||||
variant="outline-primary"
|
||||
className="hover:!bg-custom-primary-100/20"
|
||||
onClick={() =>
|
||||
issueSubscription && issueSubscription.subscribed
|
||||
? issueSubscriptionRemove()
|
||||
: issueSubscriptionCreate()
|
||||
}
|
||||
>
|
||||
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</Button>
|
||||
)}
|
||||
{currentUser && !is_archived && (
|
||||
<IssueSubscription
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
currentUserId={currentUser?.id}
|
||||
/>
|
||||
)}
|
||||
<button onClick={handleCopyText}>
|
||||
<Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
|
||||
</button>
|
||||
{!disableUserActions && (
|
||||
{!disabled && (
|
||||
<button onClick={() => toggleDeleteIssueModal(true)}>
|
||||
<Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
|
||||
</button>
|
||||
|
|
@ -248,29 +210,29 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
<>
|
||||
{["side-peek", "modal"].includes(peekMode) ? (
|
||||
<div className="relative flex flex-col gap-3 px-8 py-5">
|
||||
{isArchived && (
|
||||
{is_archived && (
|
||||
<div className="absolute left-0 top-0 z-[9] flex h-full min-h-full w-full items-center justify-center bg-custom-background-100 opacity-60" />
|
||||
)}
|
||||
<PeekOverviewIssueDetails
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
isSubmitting={isSubmitting}
|
||||
workspaceSlug={workspaceSlug}
|
||||
issue={issue}
|
||||
issueUpdate={issueUpdate}
|
||||
issueReactions={issueReactions}
|
||||
user={currentUser}
|
||||
issueReactionCreate={issueReactionCreate}
|
||||
issueReactionRemove={issueReactionRemove}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
is_archived={is_archived}
|
||||
disabled={disabled}
|
||||
isSubmitting={isSubmitting}
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
/>
|
||||
|
||||
<PeekOverviewProperties
|
||||
issue={issue}
|
||||
issueUpdate={issueUpdate}
|
||||
disableUserActions={disableUserActions}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<IssueActivity
|
||||
{/* <IssueActivity
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
|
|
@ -282,25 +244,24 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
issueCommentReactionCreate={issueCommentReactionCreate}
|
||||
issueCommentReactionRemove={issueCommentReactionRemove}
|
||||
showCommentAccessSpecifier={showCommentAccessSpecifier}
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
) : (
|
||||
<div className={`flex h-full w-full overflow-auto ${isArchived ? "opacity-60" : ""}`}>
|
||||
<div className={`flex h-full w-full overflow-auto ${is_archived ? "opacity-60" : ""}`}>
|
||||
<div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
|
||||
<div className={isArchived ? "pointer-events-none" : ""}>
|
||||
<div className={is_archived ? "pointer-events-none" : ""}>
|
||||
<PeekOverviewIssueDetails
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
isSubmitting={isSubmitting}
|
||||
workspaceSlug={workspaceSlug}
|
||||
issue={issue}
|
||||
issueReactions={issueReactions}
|
||||
issueUpdate={issueUpdate}
|
||||
user={currentUser}
|
||||
issueReactionCreate={issueReactionCreate}
|
||||
issueReactionRemove={issueReactionRemove}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
is_archived={is_archived}
|
||||
disabled={disabled}
|
||||
isSubmitting={isSubmitting}
|
||||
setIsSubmitting={(value) => setIsSubmitting(value)}
|
||||
/>
|
||||
|
||||
<IssueActivity
|
||||
{/* <IssueActivity
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
|
|
@ -312,19 +273,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
issueCommentReactionCreate={issueCommentReactionCreate}
|
||||
issueCommentReactionRemove={issueCommentReactionRemove}
|
||||
showCommentAccessSpecifier={showCommentAccessSpecifier}
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`h-full !w-[400px] flex-shrink-0 border-l border-custom-border-200 p-4 py-5 ${
|
||||
isArchived ? "pointer-events-none" : ""
|
||||
is_archived ? "pointer-events-none" : ""
|
||||
}`}
|
||||
>
|
||||
<PeekOverviewProperties
|
||||
issue={issue}
|
||||
issueUpdate={issueUpdate}
|
||||
disableUserActions={disableUserActions}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue