Replace react-grid-layout with plain CSS grid and remove drag#377
Replace react-grid-layout with plain CSS grid and remove drag#377urjitc wants to merge 1 commit into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR removes the Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile SummaryThis PR removes the custom
Confidence Score: 4/5Safe to merge after addressing the non-null assertion on One P1 finding: src/components/workspace-canvas/WorkspaceGrid.tsx (non-null assertion + dead interface props), src/app/api/workspaces/autogen/route.ts (leftover AUTOGEN_LAYOUTS usage) Important Files Changed
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| @@ -42,713 +17,89 @@ interface WorkspaceGridProps { | |||
| workspaceName: string; | |||
| workspaceIcon?: string | null; | |||
| workspaceColor?: string | null; | |||
| onMoveItem?: (itemId: string, folderId: string | null) => void; // Callback to move item to folder | |||
| onMoveItems?: (itemIds: string[], folderId: string | null) => void; // Callback to move multiple items to folder (bulk move) | |||
| onOpenFolder?: (folderId: string) => void; // Callback when folder is clicked | |||
| onDeleteFolderWithContents?: (folderId: string) => void; // Callback to delete folder and all items inside | |||
| onMoveItem?: (itemId: string, folderId: string | null) => void; | |||
| onMoveItems?: (itemIds: string[], folderId: string | null) => void; | |||
| onOpenFolder?: (folderId: string) => void; | |||
| onDeleteFolderWithContents?: (folderId: string) => void; | |||
There was a problem hiding this comment.
WorkspaceGridProps
Five props are declared in the interface and passed from WorkspaceContent but never destructured or used by WorkspaceGridComponent: isFiltered, isTemporaryFilter, onUpdateAllItems, onGridDragStateChange, and onMoveItems. Since drag/resize is gone, these can be removed from both the interface and every call site to keep the surface clean.
| interface WorkspaceGridProps { | |
| items: Item[]; | |
| allItems: Item[]; | |
| onUpdateItem: (itemId: string, updates: Partial<Item>) => void; | |
| onDeleteItem: (itemId: string) => void; | |
| onOpenModal: (itemId: string) => void; | |
| workspaceName: string; | |
| workspaceIcon?: string | null; | |
| workspaceColor?: string | null; | |
| onMoveItem?: (itemId: string, folderId: string | null) => void; | |
| onOpenFolder?: (folderId: string) => void; | |
| onDeleteFolderWithContents?: (folderId: string) => void; | |
| } |
| workspaceName={workspaceName} | ||
| workspaceIcon={workspaceIcon} | ||
| workspaceColor={workspaceColor} | ||
| onOpenFolder={onOpenFolder!} |
There was a problem hiding this comment.
onOpenFolder is typed as optional in WorkspaceGridProps, so it can be undefined. The ! operator only suppresses the TypeScript error — at runtime, if onOpenFolder is undefined and a user clicks a folder card, FolderCard will throw when it tries to invoke the handler. Since WorkspaceContent always provides it today, this silently works, but the type contract is broken.
| onOpenFolder={onOpenFolder!} | |
| onOpenFolder={onOpenFolder ?? (() => {})} |
Or make onOpenFolder required in the interface since folder-type items require it.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/workspace-canvas/WorkspaceGrid.tsx (1)
7-24: 🛠️ Refactor suggestion | 🟠 MajorRemove unused props from interface.
Several props are declared in
WorkspaceGridPropsbut never used:
onUpdateAllItems(line 14)onGridDragStateChange(line 16)onMoveItems(line 21)isFiltered(line 10)isTemporaryFilter(line 11)These are relics of the removed drag/resize functionality. Keeping them creates confusion and requires parent components to pass unnecessary props.
♻️ Clean up interface
interface WorkspaceGridProps { items: Item[]; allItems: Item[]; - isFiltered: boolean; - isTemporaryFilter?: boolean; onUpdateItem: (itemId: string, updates: Partial<Item>) => void; onDeleteItem: (itemId: string) => void; - onUpdateAllItems: (items: Item[]) => void; onOpenModal: (itemId: string) => void; - onGridDragStateChange?: (isDragging: boolean) => void; workspaceName: string; workspaceIcon?: string | null; workspaceColor?: string | null; onMoveItem?: (itemId: string, folderId: string | null) => void; - onMoveItems?: (itemIds: string[], folderId: string | null) => void; onOpenFolder?: (folderId: string) => void; onDeleteFolderWithContents?: (folderId: string) => void; }Also update
WorkspaceContent.tsxandWorkspaceSection.tsxto stop passing these unused props.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/workspace-canvas/WorkspaceGrid.tsx` around lines 7 - 24, Remove the stale drag/resize props from the WorkspaceGridProps interface: delete isFiltered, isTemporaryFilter, onUpdateAllItems, onGridDragStateChange, and onMoveItems from the WorkspaceGridProps declaration in WorkspaceGrid.tsx; then update callers (components WorkspaceContent and WorkspaceSection) to stop passing those props when rendering <WorkspaceGrid /> and remove any related prop destructuring or forwarding there so parents no longer require or pass these unused properties. Ensure you only remove those identifiers and keep all remaining props and handler names intact (onUpdateItem, onDeleteItem, onOpenModal, onMoveItem, onOpenFolder, onDeleteFolderWithContents, workspaceName, workspaceIcon, workspaceColor, items, allItems).
🧹 Nitpick comments (1)
src/hooks/workspace/use-workspace-operations.ts (1)
343-343: Unused parameter:initialLayoutis no longer used.The
initialLayoutparameter is accepted but never used in the function body. Consider removing it from the signature to avoid confusion, or mark it as deprecated if external callers depend on it.♻️ Optional cleanup
const createItem = useCallback( ( type: CardType, name?: string, initialData?: Partial<Item["data"]>, - initialLayout?: { w: number; h: number }, ) => {Note: Also update the
WorkspaceOperationsinterface andcreateItemssignature.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/hooks/workspace/use-workspace-operations.ts` at line 343, The parameter initialLayout in the useWorkspaceOperations function signature is unused; remove it from the function signature and any internal references, and update the related types: remove initialLayout from the WorkspaceOperations interface and from the createItems(...) signature so types stay consistent; if external callers still rely on that param, instead mark it deprecated in the interface (or keep an optional overload) and forward-compatibility-comment its removal, but prefer deleting the unused parameter across useWorkspaceOperations, WorkspaceOperations, and createItems to eliminate the dead parameter.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/workspace-canvas/WorkspaceGrid.tsx`:
- Line 69: The code uses a non-null assertion on the optional prop onOpenFolder
in WorkspaceGrid (onOpenFolder!) which can throw at runtime if the caller omits
it; either make onOpenFolder required in the component props interface, or
remove the "!" and guard where it's used (e.g., call it conditionally or provide
a default no-op handler) so that usages like onOpenFolder are safe when the prop
is undefined; update the Props/interface declaration or the call sites in
WorkspaceGrid.tsx accordingly to ensure no runtime assertion is required.
---
Outside diff comments:
In `@src/components/workspace-canvas/WorkspaceGrid.tsx`:
- Around line 7-24: Remove the stale drag/resize props from the
WorkspaceGridProps interface: delete isFiltered, isTemporaryFilter,
onUpdateAllItems, onGridDragStateChange, and onMoveItems from the
WorkspaceGridProps declaration in WorkspaceGrid.tsx; then update callers
(components WorkspaceContent and WorkspaceSection) to stop passing those props
when rendering <WorkspaceGrid /> and remove any related prop destructuring or
forwarding there so parents no longer require or pass these unused properties.
Ensure you only remove those identifiers and keep all remaining props and
handler names intact (onUpdateItem, onDeleteItem, onOpenModal, onMoveItem,
onOpenFolder, onDeleteFolderWithContents, workspaceName, workspaceIcon,
workspaceColor, items, allItems).
---
Nitpick comments:
In `@src/hooks/workspace/use-workspace-operations.ts`:
- Line 343: The parameter initialLayout in the useWorkspaceOperations function
signature is unused; remove it from the function signature and any internal
references, and update the related types: remove initialLayout from the
WorkspaceOperations interface and from the createItems(...) signature so types
stay consistent; if external callers still rely on that param, instead mark it
deprecated in the interface (or keep an optional overload) and
forward-compatibility-comment its removal, but prefer deleting the unused
parameter across useWorkspaceOperations, WorkspaceOperations, and createItems to
eliminate the dead parameter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f0624dfa-1dc8-4fb3-be1d-d12222123269
📒 Files selected for processing (17)
next.config.tspackage.jsonsrc/app/api/workspaces/autogen/route.tssrc/app/globals.csssrc/components/workspace-canvas/MarqueeSelector.tsxsrc/components/workspace-canvas/WorkspaceCanvasDropzone.tsxsrc/components/workspace-canvas/WorkspaceCard.tsxsrc/components/workspace-canvas/WorkspaceContent.tsxsrc/components/workspace-canvas/WorkspaceGrid.tsxsrc/components/workspace-canvas/WorkspaceHeader.tsxsrc/components/workspace-canvas/WorkspaceSection.tsxsrc/hooks/ui/use-auto-scroll.tssrc/hooks/workspace/use-workspace-operations.tssrc/lib/workspace-state/grid-layout-helpers.tssrc/lib/workspace-state/types.tssrc/lib/workspace/import-validation.tssrc/lib/workspace/templates.ts
💤 Files with no reviewable changes (9)
- package.json
- next.config.ts
- src/components/workspace-canvas/WorkspaceContent.tsx
- src/components/workspace-canvas/WorkspaceSection.tsx
- src/lib/workspace/templates.ts
- src/app/api/workspaces/autogen/route.ts
- src/lib/workspace/import-validation.ts
- src/hooks/ui/use-auto-scroll.ts
- src/lib/workspace-state/grid-layout-helpers.ts
| workspaceName={workspaceName} | ||
| workspaceIcon={workspaceIcon} | ||
| workspaceColor={workspaceColor} | ||
| onOpenFolder={onOpenFolder!} |
There was a problem hiding this comment.
Avoid non-null assertion on optional prop.
onOpenFolder! uses a non-null assertion but onOpenFolder is declared as optional in the interface (line 22). If a caller doesn't provide this prop, this will throw at runtime.
🐛 Safer handling
<FolderCard
item={item}
itemCount={folderItemCounts.get(item.id) || 0}
allItems={allItems}
workspaceName={workspaceName}
workspaceIcon={workspaceIcon}
workspaceColor={workspaceColor}
- onOpenFolder={onOpenFolder!}
+ onOpenFolder={onOpenFolder ?? (() => {})}
onUpdateItem={onUpdateItem}Alternatively, make onOpenFolder required in the interface if it's always expected.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onOpenFolder={onOpenFolder!} | |
| <FolderCard | |
| item={item} | |
| itemCount={folderItemCounts.get(item.id) || 0} | |
| allItems={allItems} | |
| workspaceName={workspaceName} | |
| workspaceIcon={workspaceIcon} | |
| workspaceColor={workspaceColor} | |
| onOpenFolder={onOpenFolder ?? (() => {})} | |
| onUpdateItem={onUpdateItem} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/workspace-canvas/WorkspaceGrid.tsx` at line 69, The code uses
a non-null assertion on the optional prop onOpenFolder in WorkspaceGrid
(onOpenFolder!) which can throw at runtime if the caller omits it; either make
onOpenFolder required in the component props interface, or remove the "!" and
guard where it's used (e.g., call it conditionally or provide a default no-op
handler) so that usages like onOpenFolder are safe when the prop is undefined;
update the Props/interface declaration or the call sites in WorkspaceGrid.tsx
accordingly to ensure no runtime assertion is required.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
1 participant
This PR removes the
react-grid-layoutdependency entirely and replaces the workspace grid with a plain CSS grid layout usinggrid-auto-flow: denseand uniform 200x200 cards. All RGL-specific CSS overrides (390 lines), grid layout helpers, and the auto-scroll hook have been deleted.WorkspaceGridnow renders without drag/resize wiring, cards use layout-independent preview logic (disabled), and workspace operations no longer emit layout diffs. Legacy layout types remain for backwards compatibility.react-grid-layoutdependencytranspilePackages: ["react-grid-layout"].flip-card-contentisolation rulegridTemplateColumns: repeat(auto-fill, minmax(200px, 1fr))and neutraldata-workspace-cardwrappersonDragStart/onDragStoppropsgetLayoutForBreakpoint; preview now alwaysfalse; removed layout comparison in memoization.react-grid-itemto[data-workspace-card]findNextAvailablePositionusage; items no longer receive layout; layout diff extraction deleted fromupdateAllItemsfindNextAvailablePositionimport and position assignment for PDF/image items@deprecatedcomment tolayoutfieldlayoutproperties from template itemsDEFAULT_CARD_DIMENSIONSusageDEFAULT_CARD_DIMENSIONSusageDEFAULT_CARD_DIMENSIONSusageDeleted:
Summary by CodeRabbit
Release Notes