forked from github/plane
fix: resolve z-index and peek overview component bug (#2624)
* fix: resolved z-index issue on peek overview component * fix: fix issue with peekover view in spreadsheet view --------- Co-authored-by: gurusainath <gurusainath007@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
1352c200dd
commit
4c1aee0cfc
@ -5,7 +5,6 @@ import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { IssuePeekOverview } from "components/issues/issue-peek-overview";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
@ -16,10 +15,16 @@ type Props = {
|
||||
issue: IIssue;
|
||||
expanded: boolean;
|
||||
handleToggleExpand: (issueId: string) => void;
|
||||
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
|
||||
properties: IIssueDisplayProperties;
|
||||
handleEditIssue: (issue: IIssue) => void;
|
||||
handleDeleteIssue: (issue: IIssue) => void;
|
||||
setIssuePeekOverView: React.Dispatch<
|
||||
React.SetStateAction<{
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
} | null>
|
||||
>;
|
||||
disableUserActions: boolean;
|
||||
nestingLevel: number;
|
||||
};
|
||||
@ -28,7 +33,7 @@ export const IssueColumn: React.FC<Props> = ({
|
||||
issue,
|
||||
expanded,
|
||||
handleToggleExpand,
|
||||
handleUpdateIssue,
|
||||
setIssuePeekOverView,
|
||||
properties,
|
||||
handleEditIssue,
|
||||
handleDeleteIssue,
|
||||
@ -53,105 +58,116 @@ export const IssueColumn: React.FC<Props> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const handleIssuePeekOverview = (issue: IIssue) => {
|
||||
const { query } = router;
|
||||
setIssuePeekOverView({
|
||||
workspaceSlug: issue?.workspace_detail?.slug,
|
||||
projectId: issue?.project_detail?.id,
|
||||
issueId: issue?.id,
|
||||
});
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query, peekIssueId: issue?.id },
|
||||
});
|
||||
};
|
||||
|
||||
const paddingLeft = `${nestingLevel * 54}px`;
|
||||
|
||||
return (
|
||||
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
|
||||
{properties.key && (
|
||||
<div
|
||||
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
|
||||
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
|
||||
>
|
||||
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
|
||||
<span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
<>
|
||||
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
|
||||
{properties.key && (
|
||||
<div
|
||||
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"
|
||||
style={issue.parent && nestingLevel !== 0 ? { paddingLeft } : {}}
|
||||
>
|
||||
<div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100">
|
||||
<span className="flex items-center justify-center font-medium opacity-100 group-hover:opacity-0 ">
|
||||
{issue.project_detail?.identifier}-{issue.sequence_id}
|
||||
</span>
|
||||
|
||||
{!disableUserActions && (
|
||||
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
|
||||
<Popover2
|
||||
isOpen={isOpen}
|
||||
canEscapeKeyClose
|
||||
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
|
||||
content={
|
||||
<div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleCopyText();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link className="h-3 w-3" />
|
||||
<span>Copy link</span>
|
||||
</div>
|
||||
</button>
|
||||
{!disableUserActions && (
|
||||
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
|
||||
<Popover2
|
||||
isOpen={isOpen}
|
||||
canEscapeKeyClose
|
||||
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
|
||||
content={
|
||||
<div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleCopyText();
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link className="h-3 w-3" />
|
||||
<span>Copy link</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleEditIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
<span>Edit issue</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleEditIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Pencil className="h-3 w-3" />
|
||||
<span>Edit issue</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleDeleteIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<span>Delete issue</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
placement="bottom-start"
|
||||
<button
|
||||
type="button"
|
||||
className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
|
||||
onClick={() => {
|
||||
handleDeleteIssue(issue);
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
<span>Delete issue</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<MoreHorizontal className="h-5 w-5 text-custom-text-200" />
|
||||
</Popover2>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{issue.sub_issues_count > 0 && (
|
||||
<div className="h-6 w-6 flex justify-center items-center">
|
||||
<button
|
||||
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
|
||||
onClick={() => handleToggleExpand(issue.id)}
|
||||
>
|
||||
<MoreHorizontal className="h-5 w-5 text-custom-text-200" />
|
||||
</Popover2>
|
||||
<ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{issue.sub_issues_count > 0 && (
|
||||
<div className="h-6 w-6 flex justify-center items-center">
|
||||
<button
|
||||
className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
|
||||
onClick={() => handleToggleExpand(issue.id)}
|
||||
>
|
||||
<ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<IssuePeekOverview
|
||||
workspaceSlug={issue?.workspace_detail?.slug}
|
||||
projectId={issue?.project_detail?.id}
|
||||
issueId={issue?.id}
|
||||
handleIssue={(issueToUpdate) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
|
||||
>
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<span className="flex items-center px-4 py-2.5 h-full truncate flex-grow">
|
||||
<div className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]">
|
||||
)}
|
||||
<div className="w-full overflow-hidden">
|
||||
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
|
||||
<div
|
||||
className="px-4 py-2.5 h-full w-full truncate text-custom-text-100 text-left cursor-pointer text-[0.825rem]"
|
||||
onClick={() => handleIssuePeekOverview(issue)}
|
||||
>
|
||||
{issue.name}
|
||||
</div>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</IssuePeekOverview>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -11,9 +11,15 @@ type Props = {
|
||||
issue: IIssue;
|
||||
expandedIssues: string[];
|
||||
setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
|
||||
properties: IIssueDisplayProperties;
|
||||
handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
|
||||
setIssuePeekOverView: React.Dispatch<
|
||||
React.SetStateAction<{
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
} | null>
|
||||
>;
|
||||
disableUserActions: boolean;
|
||||
nestingLevel?: number;
|
||||
};
|
||||
@ -22,7 +28,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
|
||||
issue,
|
||||
expandedIssues,
|
||||
setExpandedIssues,
|
||||
handleUpdateIssue,
|
||||
setIssuePeekOverView,
|
||||
properties,
|
||||
handleIssueAction,
|
||||
disableUserActions,
|
||||
@ -51,9 +57,9 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
|
||||
expanded={isExpanded}
|
||||
handleToggleExpand={handleToggleExpand}
|
||||
properties={properties}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
handleEditIssue={() => handleIssueAction(issue, "edit")}
|
||||
handleDeleteIssue={() => handleIssueAction(issue, "delete")}
|
||||
setIssuePeekOverView={setIssuePeekOverView}
|
||||
disableUserActions={disableUserActions}
|
||||
nestingLevel={nestingLevel}
|
||||
/>
|
||||
@ -67,10 +73,10 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
expandedIssues={expandedIssues}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
setExpandedIssues={setExpandedIssues}
|
||||
properties={properties}
|
||||
handleIssueAction={handleIssueAction}
|
||||
setIssuePeekOverView={setIssuePeekOverView}
|
||||
disableUserActions={disableUserActions}
|
||||
nestingLevel={nestingLevel + 1}
|
||||
/>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// components
|
||||
import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
|
||||
import { CustomMenu, Spinner } from "@plane/ui";
|
||||
import { IssuePeekOverview } from "components/issues/issue-peek-overview";
|
||||
import { Spinner } from "@plane/ui";
|
||||
// types
|
||||
import {
|
||||
IIssue,
|
||||
@ -47,6 +47,11 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
} = props;
|
||||
|
||||
const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
|
||||
const [issuePeekOverview, setIssuePeekOverView] = useState<{
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
} | null>(null);
|
||||
|
||||
const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
|
||||
|
||||
@ -104,11 +109,11 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
key={`${issue.id}_${index}`}
|
||||
issue={issue}
|
||||
expandedIssues={expandedIssues}
|
||||
handleUpdateIssue={handleUpdateIssue}
|
||||
setExpandedIssues={setExpandedIssues}
|
||||
properties={displayProperties}
|
||||
handleIssueAction={handleIssueAction}
|
||||
disableUserActions={disableUserActions}
|
||||
setIssuePeekOverView={setIssuePeekOverView}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@ -174,6 +179,14 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
))} */}
|
||||
</div>
|
||||
</div>
|
||||
{issuePeekOverview && (
|
||||
<IssuePeekOverview
|
||||
workspaceSlug={issuePeekOverview?.workspaceSlug}
|
||||
projectId={issuePeekOverview?.projectId}
|
||||
issueId={issuePeekOverview?.issueId}
|
||||
handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -13,7 +13,7 @@ interface IIssuePeekOverview {
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
handleIssue: (issue: Partial<IIssue>) => void;
|
||||
children: ReactNode;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC, ReactNode, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { PanelRightOpen, Square, SquareCode, MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
|
||||
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
@ -165,9 +165,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
||||
/>
|
||||
)}
|
||||
<div className="w-full !text-base">
|
||||
<div onClick={updateRoutePeekId} className="w-full cursor-pointer">
|
||||
{children}
|
||||
</div>
|
||||
{children && (
|
||||
<div onClick={updateRoutePeekId} className="w-full cursor-pointer">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{issueId === peekIssueId && (
|
||||
<div
|
||||
|
||||
Loading…
Reference in New Issue
Block a user