starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-24 01:38:26 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Folder-based drag-n-drop complete!

Browse Source
This commit is contained in:
Gregory Schier
2023-11-03 16:29:21 -07:00
parent bb9025ab07
commit 00718df49e
3 changed files with 206 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-web/components/DropMarker.tsx
View File

@@ -3,14 +3,16 @@ import React, { memo } from 'react';
interface Props { interface Props {
className?: string; className?: string;
depth: number;
} }
export const DropMarker = memo( export const DropMarker = memo(
function DropMarker({ className }: Props) { function DropMarker({ className, depth }: Props) {
return ( return (
<div <div
className={classNames( className={classNames(
className, className,
depth > 0 ? 'ml-5' : 'ml-0',
'relative w-full h-0 overflow-visible pointer-events-none', 'relative w-full h-0 overflow-visible pointer-events-none',
)} )}
> >

317
src-web/components/Sidebar.tsx
View File

@@ -1,5 +1,5 @@
import classNames from 'classnames'; import classNames from 'classnames';
import type { ForwardedRef } from 'react'; import type { ForwardedRef, ReactNode } from 'react';
import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react'; import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import type { XYCoord } from 'react-dnd'; import type { XYCoord } from 'react-dnd';
import { useDrag, useDrop } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd';
@@ -51,7 +51,8 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const activeWorkspace = useActiveWorkspace(); const activeWorkspace = useActiveWorkspace();
const routes = useAppRoutes(); const routes = useAppRoutes();
const [hasFocus, setHasFocus] = useState<boolean>(false); const [hasFocus, setHasFocus] = useState<boolean>(false);
const [selectedIndex, setSelectedIndex] = useState<number>(); const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
const [selectedTree, setSelectedTree] = useState<TreeNode | null>(null);
const { tree, treeParentMap } = useMemo<{ const { tree, treeParentMap } = useMemo<{
tree: TreeNode | null; tree: TreeNode | null;
@@ -85,36 +86,53 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
useListenToTauriEvent('new_request', async () => createRequest.mutate({})); useListenToTauriEvent('new_request', async () => createRequest.mutate({}));
const focusActiveRequest = useCallback( const focusActiveRequest = useCallback(
(forcedIndex?: number) => { (forced?: { index: number; tree: TreeNode }) => {
// TODO: Use tree to find index const tree = forced?.tree ?? treeParentMap[activeRequestId ?? 'n/a'] ?? null;
const index = forcedIndex ?? requests.findIndex((r) => r.id === activeRequestId); const children = tree?.children ?? [];
if (index < 0) return; const index = forced?.index ?? children.findIndex((m) => m.item.id === activeRequestId);
setSelectedIndex(index >= 0 ? index : undefined); if (index < 0) {
return;
}
setSelectedIndex(index >= 0 ? index : null);
setSelectedTree(tree);
setHasFocus(true); setHasFocus(true);
sidebarRef.current?.focus(); sidebarRef.current?.focus();
}, },
[activeRequestId, requests], [activeRequestId, treeParentMap],
); );
const handleSelect = useCallback( const handleSelect = useCallback(
(requestId: string) => { (id: string) => {
// TODO: Use tree to find index const tree = treeParentMap[id ?? 'n/a'] ?? null;
const index = requests.findIndex((r) => r.id === requestId); const children = tree?.children ?? [];
const request = requests[index]; const index = children.findIndex((m) => m.item.id === id) ?? -99;
if (!request) return; const node = children[index] ?? null;
routes.navigate('request', { if (node == null || tree == null || node.item.model === 'workspace') {
requestId, return;
workspaceId: request.workspaceId, }
environmentId: activeEnvironmentId ?? undefined,
}); const { item } = node;
// setSelectedIndex(index);
// focusActiveRequest(index); if (item.model === 'folder') {
setCollapsed((c) => ({ ...c, [item.id]: !c[item.id] }));
} else {
routes.navigate('request', {
requestId: id,
workspaceId: item.workspaceId,
environmentId: activeEnvironmentId ?? undefined,
});
setSelectedIndex(index);
setSelectedTree(tree);
focusActiveRequest({ index, tree });
}
}, },
[requests, routes, activeEnvironmentId], [treeParentMap, routes, activeEnvironmentId, focusActiveRequest],
); );
const handleClearSelected = useCallback(() => { const handleClearSelected = useCallback(() => {
setSelectedIndex(undefined); setSelectedIndex(null);
setSelectedTree(null);
}, [setSelectedIndex]); }, [setSelectedIndex]);
const handleFocus = useCallback(() => { const handleFocus = useCallback(() => {
@@ -144,7 +162,11 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
() => { () => {
if (hidden || hasFocus) return; if (hidden || hasFocus) return;
// Select 0 index on focus if none selected // Select 0 index on focus if none selected
focusActiveRequest(selectedIndex ?? 0); focusActiveRequest(
selectedTree != null && selectedIndex != null
? { index: selectedIndex ?? 0, tree: selectedTree }
: undefined,
);
}, },
[focusActiveRequest, hidden, activeRequestId], [focusActiveRequest, hidden, activeRequestId],
); );
@@ -191,36 +213,45 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const updateAnyRequest = useUpdateAnyRequest(); const updateAnyRequest = useUpdateAnyRequest();
const updateAnyFolder = useUpdateAnyFolder(); const updateAnyFolder = useUpdateAnyFolder();
const [hoveredId, setHoveredId] = useState<string | null>(null); const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
const [draggingId, setDraggingId] = useState<string | null>(null);
const [hoveredTree, setHoveredTree] = useState<TreeNode | null>(null);
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
const handleMove = useCallback<DraggableSidebarItemProps['onMove']>( const handleMove = useCallback<DraggableSidebarItemProps['onMove']>(
(id, side) => { (id, side) => {
const hoveredTree = treeParentMap[id]; const hoveredTree = treeParentMap[id] ?? null;
const dragIndex = hoveredTree?.children.findIndex((n) => n.item.id === id) ?? -99; const dragIndex = hoveredTree?.children.findIndex((n) => n.item.id === id) ?? -99;
const target = hoveredTree?.children[dragIndex + (side === 'above' ? 0 : 1)]?.item; const hoveredIndex = dragIndex + (side === 'above' ? 0 : 1);
setHoveredId(target?.id ?? null); setHoveredTree(hoveredTree);
setHoveredIndex(hoveredIndex);
}, },
[treeParentMap, setHoveredId], [treeParentMap],
); );
const handleDragStart = useCallback<DraggableSidebarItemProps['onDragStart']>((id: string) => {
setDraggingId(id);
}, []);
const handleEnd = useCallback<DraggableSidebarItemProps['onEnd']>( const handleEnd = useCallback<DraggableSidebarItemProps['onEnd']>(
(itemId) => { async (itemId) => {
if (hoveredId === null) return; setHoveredTree(null);
setHoveredId(null);
handleClearSelected(); handleClearSelected();
const targetTree = treeParentMap[hoveredId] ?? null; if (hoveredTree == null || hoveredIndex == null) {
if (targetTree == null) {
return; return;
} }
const parentTree = treeParentMap[itemId] ?? null; const parentTree = treeParentMap[itemId] ?? null;
const index = parentTree?.children.findIndex((n) => n.item.id === itemId) ?? -1; const index = parentTree?.children.findIndex((n) => n.item.id === itemId) ?? -1;
const child = parentTree?.children[index ?? -1]; const child = parentTree?.children[index ?? -1];
if (child === undefined || parentTree == null) return; if (child == null || parentTree == null) return;
const newChildren = targetTree.children.filter((c) => c.item.id !== itemId); const movedToDifferentTree = hoveredTree.item.id !== parentTree.item.id;
const hoveredIndex = newChildren.findIndex((c) => c.item.id === hoveredId) ?? null; const movedUpInSameTree = !movedToDifferentTree && hoveredIndex < index;
if (hoveredIndex < index || targetTree.item.id !== parentTree.item.id) {
const newChildren = hoveredTree.children.filter((c) => c.item.id !== itemId);
if (movedToDifferentTree || movedUpInSameTree) {
// Moving up or into a new tree is simply inserting before the hovered item // Moving up or into a new tree is simply inserting before the hovered item
newChildren.splice(hoveredIndex, 0, child); newChildren.splice(hoveredIndex, 0, child);
} else { } else {
@@ -233,32 +264,42 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const beforePriority = prev == null || prev.model === 'workspace' ? 0 : prev.sortPriority; const beforePriority = prev == null || prev.model === 'workspace' ? 0 : prev.sortPriority;
const afterPriority = next == null || next.model === 'workspace' ? 0 : next.sortPriority; const afterPriority = next == null || next.model === 'workspace' ? 0 : next.sortPriority;
const folderId = targetTree.item.model === 'folder' ? targetTree.item.id : null; const folderId = hoveredTree.item.model === 'folder' ? hoveredTree.item.id : null;
const shouldUpdateAll = afterPriority - beforePriority < 1; const shouldUpdateAll = afterPriority - beforePriority < 1;
if (shouldUpdateAll) { if (shouldUpdateAll) {
newChildren.forEach((child, i) => { await Promise.all(
const sortPriority = i * 1000; newChildren.map((child, i) => {
if (child.item.model === 'folder') { const sortPriority = i * 1000;
const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId }); if (child.item.model === 'folder') {
updateAnyFolder.mutate({ id: child.item.id, update: updateFolder }); const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
} else if (child.item.model === 'http_request') { return updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId }); } else if (child.item.model === 'http_request') {
updateAnyRequest.mutate({ id: child.item.id, update: updateRequest }); const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
} return updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
}); }
}),
);
} else { } else {
const sortPriority = afterPriority - (afterPriority - beforePriority) / 2; const sortPriority = afterPriority - (afterPriority - beforePriority) / 2;
if (child.item.model === 'folder') { if (child.item.model === 'folder') {
const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId }); const updateFolder = (f: Folder) => ({ ...f, sortPriority, folderId });
updateAnyFolder.mutate({ id: child.item.id, update: updateFolder }); await updateAnyFolder.mutateAsync({ id: child.item.id, update: updateFolder });
} else if (child.item.model === 'http_request') { } else if (child.item.model === 'http_request') {
const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId }); const updateRequest = (r: HttpRequest) => ({ ...r, sortPriority, folderId });
updateAnyRequest.mutate({ id: child.item.id, update: updateRequest }); await updateAnyRequest.mutateAsync({ id: child.item.id, update: updateRequest });
} }
} }
setDraggingId(null);
}, },
[hoveredId, handleClearSelected, treeParentMap, updateAnyFolder, updateAnyRequest], [
hoveredIndex,
hoveredTree,
handleClearSelected,
treeParentMap,
updateAnyFolder,
updateAnyRequest,
],
); );
if (tree == null) { if (tree == null) {
@@ -280,12 +321,17 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
<SidebarItems <SidebarItems
treeParentMap={treeParentMap} treeParentMap={treeParentMap}
selectedIndex={selectedIndex} selectedIndex={selectedIndex}
selectedTree={selectedTree}
collapsed={collapsed}
tree={tree} tree={tree}
focused={hasFocus} focused={hasFocus}
draggingId={draggingId}
onSelect={handleSelect} onSelect={handleSelect}
hoveredId={hoveredId} hoveredIndex={hoveredIndex}
hoveredTree={hoveredTree}
handleMove={handleMove} handleMove={handleMove}
handleEnd={handleEnd} handleEnd={handleEnd}
handleDragStart={handleDragStart}
/> />
</aside> </aside>
</div> </div>
@@ -295,55 +341,78 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
interface SidebarItemsProps { interface SidebarItemsProps {
tree: TreeNode; tree: TreeNode;
focused: boolean; focused: boolean;
selectedIndex?: number; draggingId: string | null;
selectedIndex: number | null;
selectedTree: TreeNode | null;
treeParentMap: Record<string, TreeNode>; treeParentMap: Record<string, TreeNode>;
hoveredId: string | null; hoveredTree: TreeNode | null;
hoveredIndex: number | null;
handleMove: (id: string, side: 'above' | 'below') => void; handleMove: (id: string, side: 'above' | 'below') => void;
handleEnd: (id: string) => void; handleEnd: (id: string) => void;
handleDragStart: (id: string) => void;
onSelect: (requestId: string) => void; onSelect: (requestId: string) => void;
collapsed: Record<string, boolean>;
} }
function SidebarItems({ function SidebarItems({
tree, tree,
focused, focused,
selectedIndex, selectedIndex,
selectedTree,
draggingId,
onSelect, onSelect,
treeParentMap, treeParentMap,
hoveredId, collapsed,
hoveredTree,
hoveredIndex,
handleEnd, handleEnd,
handleMove, handleMove,
handleDragStart,
}: SidebarItemsProps) { }: SidebarItemsProps) {
return ( return (
<VStack as="ul" role="menu" aria-orientation="vertical" dir="ltr"> <VStack as="ul" role="menu" aria-orientation="vertical" dir="ltr">
{tree.children.map((child, i) => ( {tree.children.map((child, i) => (
<Fragment key={child.item.id}> <Fragment key={child.item.id}>
{hoveredId === child.item.id && <DropMarker />} {hoveredIndex === i && hoveredTree?.item.id === tree.item.id && (
<DropMarker depth={tree.depth} />
)}
<DraggableSidebarItem <DraggableSidebarItem
selected={selectedIndex === i} selected={selectedIndex === i && selectedTree?.item.id === tree.item.id}
itemId={child.item.id} itemId={child.item.id}
itemName={child.item.name} itemName={child.item.name}
itemModel={child.item.model} itemModel={child.item.model}
onMove={handleMove} onMove={handleMove}
onEnd={handleEnd} onEnd={handleEnd}
useProminentStyles={focused}
onSelect={onSelect} onSelect={onSelect}
onDragStart={handleDragStart}
useProminentStyles={focused}
className={classNames(tree.depth > 0 && 'border-l border-highlight ml-5')} className={classNames(tree.depth > 0 && 'border-l border-highlight ml-5')}
/> >
{child.item.model === 'folder' && ( {child.item.model === 'folder' &&
<SidebarItems !collapsed[child.item.id] &&
treeParentMap={treeParentMap} draggingId !== child.item.id && (
tree={child} <SidebarItems
focused={focused} treeParentMap={treeParentMap}
selectedIndex={selectedIndex} tree={child}
onSelect={onSelect} collapsed={collapsed}
handleMove={handleMove} draggingId={draggingId}
handleEnd={handleEnd} hoveredTree={hoveredTree}
hoveredId={hoveredId} hoveredIndex={hoveredIndex}
/> focused={focused}
)} selectedIndex={selectedIndex}
selectedTree={selectedTree}
onSelect={onSelect}
handleMove={handleMove}
handleEnd={handleEnd}
handleDragStart={handleDragStart}
/>
)}
</DraggableSidebarItem>
</Fragment> </Fragment>
))} ))}
{hoveredId === tree.children[tree.children.length - 1]?.item.id && <DropMarker />} {hoveredIndex === tree.children.length && hoveredTree?.item.id === tree.item.id && (
<DropMarker depth={tree.depth} />
)}
</VStack> </VStack>
); );
} }
@@ -355,12 +424,21 @@ type SidebarItemProps = {
itemModel: string; itemModel: string;
useProminentStyles?: boolean; useProminentStyles?: boolean;
selected?: boolean; selected?: boolean;
onSelect: (requestId: string) => void; onSelect: (id: string) => void;
draggable?: boolean; draggable?: boolean;
children?: ReactNode;
}; };
const _SidebarItem = forwardRef(function SidebarItem( const _SidebarItem = forwardRef(function SidebarItem(
{ className, itemName, itemId, useProminentStyles, selected, onSelect }: SidebarItemProps, {
children,
className,
itemName,
itemId,
useProminentStyles,
selected,
onSelect,
}: SidebarItemProps,
ref: ForwardedRef<HTMLLIElement>, ref: ForwardedRef<HTMLLIElement>,
) { ) {
const latestResponse = useLatestResponse(itemId); const latestResponse = useLatestResponse(itemId);
@@ -413,45 +491,49 @@ const _SidebarItem = forwardRef(function SidebarItem(
}, [onSelect, itemId]); }, [onSelect, itemId]);
return ( return (
<li ref={ref} className={classNames(className, 'block group/item px-2 pb-0.5')}> <li ref={ref}>
<button <div className={classNames(className, 'block group/item px-2 pb-0.5')}>
// tabIndex={-1} // Will prevent drag-n-drop <button
onClick={handleSelect} // tabIndex={-1} // Will prevent drag-n-drop
disabled={editing} onClick={handleSelect}
onDoubleClick={handleStartEditing} disabled={editing}
data-active={isActive} onDoubleClick={handleStartEditing}
data-selected={selected} data-active={isActive}
className={classNames( data-selected={selected}
'w-full flex items-center text-sm h-xs px-2 rounded-md transition-colors', className={classNames(
editing && 'ring-1 focus-within:ring-focus', 'w-full flex items-center text-sm h-xs px-2 rounded-md transition-colors',
isActive && 'bg-highlight text-gray-800', editing && 'ring-1 focus-within:ring-focus',
!isActive && 'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary', isActive && 'bg-highlight text-gray-800',
selected && useProminentStyles && '!bg-violet-500/20 text-gray-900', !isActive &&
)} 'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
> selected && useProminentStyles && '!bg-violet-500/20 text-gray-900',
{editing ? ( )}
<input >
ref={handleFocus} {editing ? (
defaultValue={itemName} <input
className="bg-transparent outline-none w-full" ref={handleFocus}
onBlur={handleBlur} defaultValue={itemName}
onKeyDown={handleInputKeyDown} className="bg-transparent outline-none w-full"
/> onBlur={handleBlur}
) : ( onKeyDown={handleInputKeyDown}
<span className={classNames('truncate', !itemName && 'text-gray-400 italic')}> />
{itemName || 'New Request'} ) : (
</span> <span className={classNames('truncate', !itemName && 'text-gray-400 italic')}>
)} {itemName || 'New Request'}
{latestResponse && ( </span>
<div className="ml-auto"> )}
{isResponseLoading(latestResponse) ? ( {latestResponse && (
<Icon spin size="sm" icon="update" /> <div className="ml-auto">
) : ( {isResponseLoading(latestResponse) ? (
<StatusTag className="text-2xs dark:opacity-80" response={latestResponse} /> <Icon spin size="sm" icon="update" />
)} ) : (
</div> <StatusTag className="text-2xs dark:opacity-80" response={latestResponse} />
)} )}
</button> </div>
)}
</button>
</div>
{children}
</li> </li>
); );
}); });
@@ -461,6 +543,8 @@ const SidebarItem = memo(_SidebarItem);
type DraggableSidebarItemProps = SidebarItemProps & { type DraggableSidebarItemProps = SidebarItemProps & {
onMove: (id: string, side: 'above' | 'below') => void; onMove: (id: string, side: 'above' | 'below') => void;
onEnd: (id: string) => void; onEnd: (id: string) => void;
onDragStart: (id: string) => void;
children?: ReactNode;
}; };
type DragItem = { type DragItem = {
@@ -474,6 +558,7 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
itemModel, itemModel,
onMove, onMove,
onEnd, onEnd,
onDragStart,
...props ...props
}: DraggableSidebarItemProps) { }: DraggableSidebarItemProps) {
const ref = useRef<HTMLLIElement>(null); const ref = useRef<HTMLLIElement>(null);
@@ -487,7 +572,6 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
const clientOffset = monitor.getClientOffset(); const clientOffset = monitor.getClientOffset();
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top; const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
if (!monitor.isOver()) return;
onMove(itemId, hoverClientY < hoverMiddleY ? 'above' : 'below'); onMove(itemId, hoverClientY < hoverMiddleY ? 'above' : 'below');
}, },
}, },
@@ -497,7 +581,10 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
const [{ isDragging }, connectDrag] = useDrag<DragItem, unknown, { isDragging: boolean }>( const [{ isDragging }, connectDrag] = useDrag<DragItem, unknown, { isDragging: boolean }>(
() => ({ () => ({
type: ItemTypes.REQUEST, type: ItemTypes.REQUEST,
item: () => ({ id: itemId, itemName }), item: () => {
onDragStart(itemId);
return { id: itemId, itemName };
},
collect: (m) => ({ isDragging: m.isDragging() }), collect: (m) => ({ isDragging: m.isDragging() }),
options: { dropEffect: 'move' }, options: { dropEffect: 'move' },
end: () => onEnd(itemId), end: () => onEnd(itemId),

2
src-web/hooks/useUpdateAnyFolder.ts
View File

@@ -15,7 +15,7 @@ export function useUpdateAnyFolder() {
throw new Error("Can't update a null folder"); throw new Error("Can't update a null folder");
} }
await invoke('update_folder', { request: update(folder) }); await invoke('update_folder', { folder: update(folder) });
}, },
onMutate: async ({ id, update }) => { onMutate: async ({ id, update }) => {
const folder = await getFolder(id); const folder = await getFolder(id);