Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update project tree scroll to current ID context menu, top bar #29427

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

chore: update project tree scroll to current ID context menu, top bar #29427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6f57995
changes
adamleithp Mar 3, 2025
2c0a077
added missing package
adamleithp Mar 3, 2025
15b84c2
fix merge
adamleithp Mar 3, 2025
4373197
Update frontend/src/lib/ui/ContextMenu/ContextMenu.tsx
adamleithp Mar 3, 2025
8de81a4
Update frontend/src/layout/navigation-3000/components/ProjectTree/Pro…
adamleithp Mar 3, 2025
d7c2f0a
spelling is hard
adamleithp Mar 3, 2025
d8bcb24
new lockfile
adamleithp Mar 3, 2025
3a13c2a
Update UI snapshots for `chromium` (3)
github-actions[bot] Mar 3, 2025
63e140a
Update UI snapshots for `chromium` (1)
github-actions[bot] Mar 3, 2025
08510a3
Update UI snapshots for `chromium` (2)
github-actions[bot] Mar 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified frontend/__snapshots__/lemon-ui-lemon-tree--default--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/__snapshots__/lemon-ui-lemon-tree--default--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-colors--brand-accent-colors--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-colors--brand-accent-colors--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-colors--primitive-colors--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-colors--primitive-colors--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-colors--semantic-colors--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-colors--semantic-colors--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-context-menu--default--dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/__snapshots__/ui-context-menu--default--light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@
"@posthog/rrweb-plugin-console-record": "0.0.8",
"@posthog/rrweb-types": "0.0.8",
"@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-context-menu": "^2.2.6",
"@radix-ui/react-slot": "^1.1.2",
"@react-hook/size": "^2.1.2",
"@sentry/react": "7.112.1",
"@stripe/react-stripe-js": "^2.8.0",
Expand Down
189 changes: 162 additions & 27 deletions frontend/src/layout/navigation-3000/components/ProjectTree/ProjectTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { IconPlusSmall } from '@posthog/icons'
import { LemonBanner, LemonButton } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
import { Resizer } from 'lib/components/Resizer/Resizer'
import { More } from 'lib/lemon-ui/LemonButton/More'
import { LemonTree } from 'lib/lemon-ui/LemonTree/LemonTree'
import { ContextMenuGroup, ContextMenuItem } from 'lib/ui/ContextMenu/ContextMenu'
import { useRef } from 'react'

import { themeLogic } from '~/layout/navigation-3000/themeLogic'
import { FileSystemEntry } from '~/queries/schema/schema-general'

import { navigation3000Logic } from '../../navigationLogic'
import { KeyboardShortcut } from '../KeyboardShortcut'
import { NavbarBottom } from '../NavbarBottom'
import { projectTreeLogic } from './projectTreeLogic'
import { joinPath, splitPath } from './utils'
Expand All @@ -19,30 +20,36 @@ export function ProjectTree({ contentRef }: { contentRef: React.RefObject<HTMLEl
const { theme } = useValues(themeLogic)
const { isNavShown, mobileLayout } = useValues(navigation3000Logic)
const { toggleNavCollapsed, hideNavOnMobile } = useActions(navigation3000Logic)
const { treeData, loadingPaths, expandedFolders, lastViewedPath, viableItems, helpNoticeVisible } =
useValues(projectTreeLogic)
const {
treeData,
loadingPaths,
expandedFolders,
lastViewedId,
viableItems,
helpNoticeVisible,
dragAndDropEnabled,
pendingActionsCount,
pendingLoaderLoading,
} = useValues(projectTreeLogic)

const {
addFolder,
deleteItem,
moveItem,
toggleFolder,
updateSelectedFolder,
updateLastViewedPath,
toggleFolderOpen,
updateLastViewedId,
updateExpandedFolders,
updateHelpNoticeVisibility,
toggleDragAndDrop,
applyPendingActions,
cancelPendingActions,
} = useActions(projectTreeLogic)
const containerRef = useRef<HTMLDivElement | null>(null)

// Items that should not be draggable or droppable, or have a side action
// TODO: sync with projectTreeLogic
const specialItemsIds: string[] = [
'project',
'project/Explore',
'project/Create new',
'__separator__',
'__apply_pending_actions__',
]
const notDraggableIds: string[] = ['project', 'project/Explore', 'project/Create new', 'project/Unfiled']
const notDroppableIds: string[] = ['project', 'project/Explore', 'project/Create new']

return (
<>
Expand All @@ -52,30 +59,91 @@ export function ProjectTree({ contentRef }: { contentRef: React.RefObject<HTMLEl
// eslint-disable-next-line react/forbid-dom-props
style={theme?.sidebarStyle}
>
<div className="flex gap-1 p-1 items-center justify-between">
<h2 className="text-base font-bold m-0 pl-1">Files</h2>
<div className="flex gap-1 items-center">
{pendingActionsCount > 0 ? (
<span>
{pendingActionsCount} <span>{pendingActionsCount > 1 ? 'changes' : 'change'}</span>
</span>
) : null}
<LemonButton
onClick={() => {
cancelPendingActions()
toggleDragAndDrop(!dragAndDropEnabled)
}}
type="secondary"
size="small"
tooltip={
dragAndDropEnabled
? 'Click to cancel editing and changes'
: 'Click to editing and drag and drop'
}
>
{dragAndDropEnabled ? `Cancel` : 'Edit'}
</LemonButton>
<LemonButton
size="small"
type="secondary"
disabledReason={pendingActionsCount === 0 ? 'Nothing to save' : undefined}
className={pendingActionsCount === 0 ? 'opacity-30' : ''}
loading={pendingLoaderLoading}
tooltip={pendingActionsCount === 0 ? undefined : 'Save recent actions'}
onClick={
!pendingLoaderLoading
? () => {
applyPendingActions()
toggleDragAndDrop(!dragAndDropEnabled)
}
: undefined
}
>
Save
</LemonButton>
<LemonButton
size="small"
type="secondary"
tooltip="Create new root folder"
onClick={() => {
const folder = prompt('Create a new folder:')
if (folder) {
addFolder(folder)
}
}}
icon={<IconPlusSmall />}
/>
</div>
</div>

<div className="border-b border-primary h-px" />

<LemonTree
contentRef={contentRef}
className="px-0 py-1"
data={treeData}
expandedItemIds={expandedFolders}
isFinishedBuildingTreeData={Object.keys(loadingPaths).length === 0}
defaultSelectedFolderOrNodeId={lastViewedPath || undefined}
defaultSelectedFolderOrNodeId={lastViewedId || undefined}
onNodeClick={(node) => {
if (node?.record?.type === 'project' || node?.record?.type === 'folder') {
updateLastViewedPath(node.record?.path)
if (node?.record?.path) {
updateLastViewedId(node?.id || '')
}
}}
onFolderClick={(folder, isExpanded) => {
if (folder) {
updateSelectedFolder(folder.record?.path || '')
toggleFolder(folder.record?.path || '', isExpanded)
toggleFolderOpen(folder?.id || '', isExpanded)
}
}}
onSetExpandedItemIds={updateExpandedFolders}
enableDragAndDrop={true}
enableDragAndDrop={dragAndDropEnabled}
onDragEnd={(dragEvent) => {
const oldPath = dragEvent.active.id as string
const folder = dragEvent.over?.id

if (oldPath === folder) {
return false
}

if (folder === '') {
const oldSplit = splitPath(oldPath)
const oldFile = oldSplit.pop()
Expand All @@ -100,14 +168,15 @@ export function ProjectTree({ contentRef }: { contentRef: React.RefObject<HTMLEl
return (
item.record?.type !== 'project' &&
item.record?.path &&
!specialItemsIds.includes(item.id || '')
!notDraggableIds.includes(item.id || '') &&
dragAndDropEnabled
)
}}
isItemDroppable={(item) => {
const path = item.record?.path || ''

// disable dropping for special items
if (specialItemsIds.includes(item.id || '')) {
// disable dropping for these IDS
if (notDroppableIds.includes(item.id || '')) {
return false
}

Expand All @@ -121,8 +190,76 @@ export function ProjectTree({ contentRef }: { contentRef: React.RefObject<HTMLEl
}
return false
}}
itemContextMenu={(item) => {
if (notDraggableIds.includes(item.id || '')) {
return undefined
}
return (
<ContextMenuGroup>
{item.record?.type === 'folder' || item.record?.type === 'project' ? (
<ContextMenuItem
onClick={(e) => {
e.stopPropagation()
const folder = prompt(
item.record?.path
? `Create a folder under "${item.record?.path}":`
: 'Create a new folder:',
''
)
if (folder) {
addFolder(
item.record?.path ? `${item.record?.path}/${folder}` : folder
)
}
}}
>
New Folder
</ContextMenuItem>
) : null}
{item.record?.path ? (
<ContextMenuItem
onClick={() => {
const oldPath = item.record?.path
const splits = splitPath(oldPath)
if (splits.length > 0) {
const folder = prompt('New name?', splits[splits.length - 1])
if (folder) {
moveItem(oldPath, joinPath([...splits.slice(0, -1), folder]))
}
}
}}
>
Rename
</ContextMenuItem>
) : null}
{item.record?.path ? (
<ContextMenuItem
onClick={(e) => {
e.stopPropagation()
if (item.record?.path) {
void navigator.clipboard.writeText(item.record?.path)
}
}}
>
Copy Path
</ContextMenuItem>
) : null}
{item.record?.created_at ? (
<ContextMenuItem
onClick={(e) => {
e.stopPropagation()
deleteItem(item.record as unknown as FileSystemEntry)
}}
>
Delete
</ContextMenuItem>
) : null}
{/* Add more menu items as needed */}
</ContextMenuGroup>
)
}}
itemSideAction={(item) => {
if (specialItemsIds.includes(item.id || '')) {
if (notDraggableIds.includes(item.id || '')) {
return undefined
}
return {
Expand All @@ -145,7 +282,7 @@ export function ProjectTree({ contentRef }: { contentRef: React.RefObject<HTMLEl
if (folder) {
addFolder(
item.record?.path
? joinPath([item.record?.path, folder])
? `${item.record?.path}/${folder}`
: folder
)
}
Expand Down Expand Up @@ -229,9 +366,7 @@ export function ProjectTree({ contentRef }: { contentRef: React.RefObject<HTMLEl
All your files are still here, open 'unfiled' to see them, and organize them
the way you'd like.
</li>
<li>
Hold down <KeyboardShortcut command /> to enable drag and drop.
</li>
<li>Right click on tree item for more options.</li>
</ul>
</LemonBanner>
</div>
Expand Down
Loading
Loading