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

[WEB-3045] fix: stickies bugs (#6433)

Browse source 
* fix: stickies bugs

* fix: sticky height fixed

---------

Co-authored-by: gakshita <akshitagoyal1516@gmail.com>
This commit is contained in:
Aaryan Khandelwal 2025-01-21 16:37:27 +05:30 • committed by GitHub
parent 22836ea03e
commit 58a4b45463
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 190 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/core/components/stickies/delete-modal.tsx
View file

@ -7,7 +7,7 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
interface IStickyDelete { interface IStickyDelete {
isOpen: boolean; isOpen: boolean;
handleSubmit: () => void; handleSubmit: () => Promise<void>;
handleClose: () => void; handleClose: () => void;
} }
@ -20,11 +20,11 @@ export const StickyDeleteModal: React.FC<IStickyDelete> = observer((props) => {
try { try {
setLoader(true); setLoader(true);
await handleSubmit(); await handleSubmit();
} catch (error) { } catch {
setToast({ setToast({
type: TOAST_TYPE.ERROR, type: TOAST_TYPE.ERROR,
title: "Warning!", title: "Warning!",
message: "Something went wrong please try again later.", message: "Something went wrong. Please try again later.",
}); });
} finally { } finally {
setLoader(false); setLoader(false);
@ -38,7 +38,7 @@ export const StickyDeleteModal: React.FC<IStickyDelete> = observer((props) => {
isSubmitting={loader} isSubmitting={loader}
isOpen={isOpen} isOpen={isOpen}
title="Delete sticky" title="Delete sticky"
content={<>Are you sure you want to delete the sticky? </>} content="Are you sure you want to delete the sticky?"
/> />
); );
}); });

26
web/core/components/stickies/layout/stickies-list.tsx
View file

@ -7,18 +7,17 @@ import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/eleme
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import Masonry from "react-masonry-component"; import Masonry from "react-masonry-component";
// plane ui
import { Loader } from "@plane/ui";
// components // components
import { EmptyState } from "@/components/empty-state"; import { EmptyState } from "@/components/empty-state";
import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
// constants // constants
import { EmptyStateType } from "@/constants/empty-state"; import { EmptyStateType } from "@/constants/empty-state";
// hooks // hooks
import { useSticky } from "@/hooks/use-stickies"; import { useSticky } from "@/hooks/use-stickies";
import { useStickyOperations } from "../sticky/use-operations"; import { useStickyOperations } from "../sticky/use-operations";
import { StickiesLoader } from "./stickies-loader";
import { StickyDNDWrapper } from "./sticky-dnd-wrapper"; import { StickyDNDWrapper } from "./sticky-dnd-wrapper";
import { getInstructionFromPayload } from "./sticky.helpers"; import { getInstructionFromPayload } from "./sticky.helpers";
import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
type TStickiesLayout = { type TStickiesLayout = {
workspaceSlug: string; workspaceSlug: string;
@ -42,6 +41,14 @@ export const StickiesList = observer((props: TProps) => {
const itemWidth = `${100 / columnCount}%`; const itemWidth = `${100 / columnCount}%`;
const totalRows = Math.ceil(workspaceStickyIds.length / columnCount); const totalRows = Math.ceil(workspaceStickyIds.length / columnCount);
const isStickiesPage = pathname?.includes("stickies"); const isStickiesPage = pathname?.includes("stickies");
const masonryRef = useRef<any>(null);
const handleLayout = () => {
if (masonryRef.current) {
// Force reflow
masonryRef.current.performLayout();
}
};
// Function to determine if an item is in first or last row // Function to determine if an item is in first or last row
const getRowPositions = (index: number) => { const getRowPositions = (index: number) => {
@ -72,19 +79,13 @@ export const StickiesList = observer((props: TProps) => {
}; };
if (loader === "init-loader") { if (loader === "init-loader") {
return ( return <StickiesLoader />;
<div className="min-h-[500px] overflow-scroll pb-2">
<Loader>
<Loader.Item height="300px" width="255px" />
</Loader>
</div>
);
} }
if (loader === "loaded" && workspaceStickyIds.length === 0) { if (loader === "loaded" && workspaceStickyIds.length === 0) {
return ( return (
<div className="size-full grid place-items-center"> <div className="size-full grid place-items-center">
{isStickiesPage ? ( {isStickiesPage || searchQuery ? (
<EmptyState <EmptyState
type={searchQuery ? EmptyStateType.STICKIES_SEARCH : EmptyStateType.STICKIES} type={searchQuery ? EmptyStateType.STICKIES_SEARCH : EmptyStateType.STICKIES}
layout={searchQuery ? "screen-simple" : "screen-detailed"} layout={searchQuery ? "screen-simple" : "screen-detailed"}
@ -106,7 +107,7 @@ export const StickiesList = observer((props: TProps) => {
return ( return (
<div className="transition-opacity duration-300 ease-in-out"> <div className="transition-opacity duration-300 ease-in-out">
{/* @ts-expect-error type mismatch here */} {/* @ts-expect-error type mismatch here */}
<Masonry elementType="div"> <Masonry elementType="div" ref={masonryRef}>
{workspaceStickyIds.map((stickyId, index) => { {workspaceStickyIds.map((stickyId, index) => {
const { isInFirstRow, isInLastRow } = getRowPositions(index); const { isInFirstRow, isInLastRow } = getRowPositions(index);
return ( return (
@ -119,6 +120,7 @@ export const StickiesList = observer((props: TProps) => {
isLastChild={index === workspaceStickyIds.length - 1} isLastChild={index === workspaceStickyIds.length - 1}
isInFirstRow={isInFirstRow} isInFirstRow={isInFirstRow}
isInLastRow={isInLastRow} isInLastRow={isInLastRow}
handleLayout={handleLayout}
/> />
); );
})} })}

45
web/core/components/stickies/layout/stickies-loader.tsx Normal file
View file

@ -0,0 +1,45 @@
// plane ui
import { Loader } from "@plane/ui";
export const StickiesLoader = () => (
<div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, index) => (
<Loader key={index} className="space-y-5 border border-custom-border-200 p-3 rounded">
<div className="space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="15px" width="75%" />
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<Loader.Item height="15px" width="15px" className="flex-shrink-0" />
<Loader.Item height="15px" width="100%" />
</div>
<div className="flex items-center gap-2">
<Loader.Item height="15px" width="15px" className="flex-shrink-0" />
<Loader.Item height="15px" width="75%" />
</div>
<div className="flex items-center gap-2">
<Loader.Item height="15px" width="15px" className="flex-shrink-0" />
<Loader.Item height="15px" width="90%" />
</div>
<div className="flex items-center gap-2">
<Loader.Item height="15px" width="15px" className="flex-shrink-0" />
<Loader.Item height="15px" width="60%" />
</div>
<div className="flex items-center gap-2">
<Loader.Item height="15px" width="15px" className="flex-shrink-0" />
<Loader.Item height="15px" width="50%" />
</div>
</div>
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<Loader.Item height="25px" width="25px" />
<Loader.Item height="25px" width="25px" />
<Loader.Item height="25px" width="25px" />
</div>
<Loader.Item height="25px" width="25px" className="flex-shrink-0" />
</div>
</Loader>
))}
</div>
);

216
web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
View file

@ -15,123 +15,121 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
// plane types
import { InstructionType } from "@plane/types"; import { InstructionType } from "@plane/types";
// plane ui
import { DropIndicator } from "@plane/ui"; import { DropIndicator } from "@plane/ui";
import { cn } from "@plane/utils"; // components
import { StickyNote } from "../sticky"; import { StickyNote } from "../sticky";
// helpers
import { getInstructionFromPayload } from "./sticky.helpers"; import { getInstructionFromPayload } from "./sticky.helpers";
// Draggable Sticky Wrapper Component type Props = {
export const StickyDNDWrapper = observer( stickyId: string;
({ workspaceSlug: string;
stickyId, itemWidth: string;
workspaceSlug, isLastChild: boolean;
itemWidth, isInFirstRow: boolean;
isLastChild, isInLastRow: boolean;
isInFirstRow, handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
isInLastRow, handleLayout: () => void;
handleDrop, };
}: {
stickyId: string;
workspaceSlug: string;
itemWidth: string;
isLastChild: boolean;
isInFirstRow: boolean;
isInLastRow: boolean;
handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
}) => {
const pathName = usePathname();
const [isDragging, setIsDragging] = useState(false);
const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
const elementRef = useRef<HTMLDivElement>(null);
useEffect(() => { export const StickyDNDWrapper = observer((props: Props) => {
const element = elementRef.current; const { stickyId, workspaceSlug, itemWidth, isLastChild, isInFirstRow, isInLastRow, handleDrop, handleLayout } =
if (!element) return; props;
// states
const [isDragging, setIsDragging] = useState(false);
const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
// refs
const elementRef = useRef<HTMLDivElement>(null);
// navigation
const pathname = usePathname();
const initialData = { id: stickyId, type: "sticky" }; useEffect(() => {
const element = elementRef.current;
if (!element) return;
if (pathName.includes("stickies")) const initialData = { id: stickyId, type: "sticky" };
return combine(
draggable({ if (pathname.includes("stickies"))
element, return combine(
dragHandle: element, draggable({
getInitialData: () => initialData, element,
onDragStart: () => { dragHandle: element,
setIsDragging(true); getInitialData: () => initialData,
}, onDragStart: () => {
onDrop: () => { setIsDragging(true);
setIsDragging(false); },
}, onDrop: () => {
onGenerateDragPreview: ({ nativeSetDragImage }) => { setIsDragging(false);
setCustomNativeDragPreview({ },
getOffset: pointerOutsideOfPreview({ x: "-200px", y: "0px" }), onGenerateDragPreview: ({ nativeSetDragImage }) => {
render: ({ container }) => { setCustomNativeDragPreview({
const root = createRoot(container); getOffset: pointerOutsideOfPreview({ x: "-200px", y: "0px" }),
root.render( render: ({ container }) => {
<div className="scale-50"> const root = createRoot(container);
<div className="-m-2 max-h-[150px]"> root.render(
<StickyNote <div className="scale-50">
className={"w-[290px]"} <div className="-m-2 max-h-[150px]">
workspaceSlug={workspaceSlug.toString()} <StickyNote
stickyId={stickyId} className={"w-[290px]"}
showToolbar={false} workspaceSlug={workspaceSlug.toString()}
/> stickyId={stickyId}
</div> showToolbar={false}
/>
</div> </div>
); </div>
return () => root.unmount(); );
}, return () => root.unmount();
nativeSetDragImage, },
}); nativeSetDragImage,
}, });
}), },
dropTargetForElements({ }),
element, dropTargetForElements({
canDrop: ({ source }) => source.data?.type === "sticky", element,
getData: ({ input, element }) => { canDrop: ({ source }) => source.data?.type === "sticky",
const blockedStates: InstructionType[] = ["make-child"]; getData: ({ input, element }) => {
if (!isLastChild) { const blockedStates: InstructionType[] = ["make-child"];
blockedStates.push("reorder-below"); if (!isLastChild) {
} blockedStates.push("reorder-below");
}
return attachInstruction(initialData, { return attachInstruction(initialData, {
input, input,
element, element,
currentLevel: 1, currentLevel: 1,
indentPerLevel: 0, indentPerLevel: 0,
mode: isLastChild ? "last-in-group" : "standard", mode: isLastChild ? "last-in-group" : "standard",
block: blockedStates, block: blockedStates,
}); });
}, },
onDrag: ({ self, source, location }) => { onDrag: ({ self, source, location }) => {
const instruction = getInstructionFromPayload(self, source, location); const instruction = getInstructionFromPayload(self, source, location);
setInstruction(instruction); setInstruction(instruction);
}, },
onDragLeave: () => { onDragLeave: () => {
setInstruction(undefined); setInstruction(undefined);
}, },
onDrop: ({ self, source, location }) => { onDrop: ({ self, source, location }) => {
setInstruction(undefined); setInstruction(undefined);
handleDrop(self, source, location); handleDrop(self, source, location);
}, },
}) })
); );
}, [stickyId, isDragging]); }, [handleDrop, isDragging, isLastChild, pathname, stickyId, workspaceSlug]);
return ( return (
<div className="relative" style={{ width: itemWidth }}> <div className="flex min-h-[300px] box-border p-2 flex-col" style={{ width: itemWidth }}>
{!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />} {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />}
<div <StickyNote
ref={elementRef} key={stickyId || "new"}
className={cn("flex min-h-[300px] box-border p-2", { workspaceSlug={workspaceSlug}
"opacity-50": isDragging, stickyId={stickyId}
})} handleLayout={handleLayout}
> />
<StickyNote key={stickyId || "new"} workspaceSlug={workspaceSlug} stickyId={stickyId} /> {!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />}
</div> </div>
{!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />} );
</div> });
);
}
);

13
web/core/components/stickies/modal/stickies.tsx
View file

@ -1,8 +1,11 @@
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { Plus, X } from "lucide-react"; import { Plus, X } from "lucide-react";
// plane ui
import { RecentStickyIcon } from "@plane/ui"; import { RecentStickyIcon } from "@plane/ui";
// hooks
import { useSticky } from "@/hooks/use-stickies"; import { useSticky } from "@/hooks/use-stickies";
// components
import { StickiesTruncated } from "../layout/stickies-truncated"; import { StickiesTruncated } from "../layout/stickies-truncated";
import { useStickyOperations } from "../sticky/use-operations"; import { useStickyOperations } from "../sticky/use-operations";
import { StickySearch } from "./search"; import { StickySearch } from "./search";
@ -13,8 +16,11 @@ type TProps = {
export const Stickies = observer((props: TProps) => { export const Stickies = observer((props: TProps) => {
const { handleClose } = props; const { handleClose } = props;
// navigation
const { workspaceSlug } = useParams(); const { workspaceSlug } = useParams();
// store hooks
const { creatingSticky, toggleShowNewSticky } = useSticky(); const { creatingSticky, toggleShowNewSticky } = useSticky();
// sticky operations
const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() }); const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
return ( return (
@ -22,9 +28,9 @@ export const Stickies = observer((props: TProps) => {
{/* header */} {/* header */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
{/* Title */} {/* Title */}
<div className="text-custom-text-100 flex gap-2"> <div className="text-custom-text-200 flex items-center gap-2">
<RecentStickyIcon className="size-5 rotate-90" /> <RecentStickyIcon className="size-5 rotate-90 flex-shrink-0" />
<p className="text-lg font-medium">Your stickies</p> <p className="text-xl font-medium">Your stickies</p>
</div> </div>
{/* actions */} {/* actions */}
<div className="flex gap-2"> <div className="flex gap-2">
@ -50,6 +56,7 @@ export const Stickies = observer((props: TProps) => {
</button> </button>
{handleClose && ( {handleClose && (
<button <button
type="button"
onClick={handleClose} onClick={handleClose}
className="flex-shrink-0 grid place-items-center text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-80 rounded p-1 transition-colors my-auto" className="flex-shrink-0 grid place-items-center text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-80 rounded p-1 transition-colors my-auto"
> >

3
web/core/components/stickies/sticky/inputs.tsx
View file

@ -1,5 +1,4 @@
import { useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useRef } from "react";
import { DebouncedFunc } from "lodash";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// plane editor // plane editor
import { EditorRefApi } from "@plane/editor"; import { EditorRefApi } from "@plane/editor";
@ -13,7 +12,7 @@ import { StickyEditor } from "../../editor";
type TProps = { type TProps = {
stickyData: TSticky | undefined; stickyData: TSticky | undefined;
workspaceSlug: string; workspaceSlug: string;
handleUpdate: DebouncedFunc<(payload: Partial<TSticky>) => Promise<void>>; handleUpdate: (payload: Partial<TSticky>) => void;
stickyId: string | undefined; stickyId: string | undefined;
showToolbar?: boolean; showToolbar?: boolean;
handleChange: (data: Partial<TSticky>) => Promise<void>; handleChange: (data: Partial<TSticky>) => Promise<void>;

16
web/core/components/stickies/sticky/root.tsx
View file

@ -1,7 +1,6 @@
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { debounce } from "lodash"; import { debounce } from "lodash";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { usePathname } from "next/navigation";
import { Minimize2 } from "lucide-react"; import { Minimize2 } from "lucide-react";
// plane types // plane types
import { TSticky } from "@plane/types"; import { TSticky } from "@plane/types";
@ -13,7 +12,6 @@ import { useSticky } from "@/hooks/use-stickies";
import { STICKY_COLORS_LIST } from "../../editor/sticky-editor/color-palette"; import { STICKY_COLORS_LIST } from "../../editor/sticky-editor/color-palette";
import { StickyDeleteModal } from "../delete-modal"; import { StickyDeleteModal } from "../delete-modal";
import { StickyInput } from "./inputs"; import { StickyInput } from "./inputs";
import { StickyItemDragHandle } from "./sticky-item-drag-handle";
import { useStickyOperations } from "./use-operations"; import { useStickyOperations } from "./use-operations";
type TProps = { type TProps = {
@ -22,11 +20,12 @@ type TProps = {
className?: string; className?: string;
stickyId: string | undefined; stickyId: string | undefined;
showToolbar?: boolean; showToolbar?: boolean;
handleLayout?: () => void;
}; };
export const StickyNote = observer((props: TProps) => { export const StickyNote = observer((props: TProps) => {
const { onClose, workspaceSlug, className = "", stickyId, showToolbar } = props; const { onClose, workspaceSlug, className = "", stickyId, showToolbar, handleLayout } = props;
// navigation // navigation
const pathName = usePathname(); // const pathName = usePathname();
// states // states
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
// store hooks // store hooks
@ -35,7 +34,7 @@ export const StickyNote = observer((props: TProps) => {
const { stickyOperations } = useStickyOperations({ workspaceSlug }); const { stickyOperations } = useStickyOperations({ workspaceSlug });
// derived values // derived values
const stickyData = stickyId ? stickies[stickyId] : undefined; const stickyData = stickyId ? stickies[stickyId] : undefined;
const isStickiesPage = pathName?.includes("stickies"); // const isStickiesPage = pathName?.includes("stickies");
const backgroundColor = const backgroundColor =
STICKY_COLORS_LIST.find((c) => c.key === stickyData?.background_color)?.backgroundColor || STICKY_COLORS_LIST.find((c) => c.key === stickyData?.background_color)?.backgroundColor ||
STICKY_COLORS_LIST[0].backgroundColor; STICKY_COLORS_LIST[0].backgroundColor;
@ -79,7 +78,7 @@ export const StickyNote = observer((props: TProps) => {
backgroundColor, backgroundColor,
}} }}
> >
{isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} {/* {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} */}
{onClose && ( {onClose && (
<button type="button" className="flex w-full" onClick={onClose}> <button type="button" className="flex w-full" onClick={onClose}>
<Minimize2 className="size-4 m-auto mr-0" /> <Minimize2 className="size-4 m-auto mr-0" />
@ -89,7 +88,10 @@ export const StickyNote = observer((props: TProps) => {
<StickyInput <StickyInput
stickyData={stickyData} stickyData={stickyData}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
handleUpdate={debouncedFormSave} handleUpdate={(payload) => {
handleLayout?.();
debouncedFormSave(payload);
}}
stickyId={stickyId} stickyId={stickyId}
handleDelete={() => setIsDeleteModalOpen(true)} handleDelete={() => setIsDeleteModalOpen(true)}
handleChange={handleChange} handleChange={handleChange}