feat(editor-3001): sidebar folders

ee/clickhouse/views/test/funnel/__snapshots__/test_clickhouse_funnel_person.ambr

@@ -56,7 +56,6 @@
                               e."$group_0" as aggregation_target,
                               if(notEmpty(pdi.distinct_id), pdi.person_id, e.person_id) as person_id,
                               person.person_props as person_props,
-                              person.pmat_email as pmat_email,
                               if(event = 'step one', 1, 0) as step_0,
                               if(step_0 = 1, timestamp, null) as latest_0,
                               if(event = 'step two', 1, 0) as step_1,
@@ -80,7 +79,6 @@
                           HAVING argMax(is_deleted, version) = 0) AS pdi ON e.distinct_id = pdi.distinct_id
                        INNER JOIN
                          (SELECT id,
-                                 argMax(pmat_email, version) as pmat_email,
                                  argMax(properties, version) as person_props
                           FROM person
                           WHERE team_id = 99999
@@ -97,7 +95,7 @@
                          AND event IN ['step one', 'step three', 'step two']
                          AND toTimeZone(timestamp, 'UTC') >= toDateTime('2021-05-01 00:00:00', 'UTC')
                          AND toTimeZone(timestamp, 'UTC') <= toDateTime('2021-05-10 23:59:59', 'UTC')
-                         AND (("pmat_email" ILIKE '%g0%'
+                         AND ((replaceRegexpAll(JSONExtractRaw(person_props, 'email'), '^"|"$', '') ILIKE '%g0%'
                                OR replaceRegexpAll(JSONExtractRaw(person_props, 'name'), '^"|"$', '') ILIKE '%g0%'
                                OR replaceRegexpAll(JSONExtractRaw(e.properties, 'distinct_id'), '^"|"$', '') ILIKE '%g0%'
                                OR replaceRegexpAll(JSONExtractRaw(group_properties_0, 'name'), '^"|"$', '') ILIKE '%g0%'

frontend/src/layout/navigation-3000/Navigation.scss

@@ -570,6 +570,19 @@
     &.SidebarListItem--marker-status-completion {
         --sidebar-list-item-status-color: var(--purple);
     }
+
+    &--is-dragging {
+        opacity: 0.4;
+    }
+
+    &--overlay {
+        padding: 0.5rem;
+        cursor: grabbing;
+        background: var(--bg-light);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow-elevation);
+    }
 }
 
 .SidebarListItem__button,
@@ -612,16 +625,17 @@
     align-items: center;
     padding: 0 var(--sidebar-horizontal-padding) 0
         calc(0.25rem + var(--sidebar-horizontal-padding) + 1rem * var(--depth, 0));
-    font-size: 1.125rem; // Make icons bigger
     color: inherit !important; // Disable link color
     cursor: pointer;
+    background: var(--bg-light);
 
     &:hover {
         background: var(--border-3000);
     }
 
     .SidebarListItem__icon {
         flex-shrink: 0;
+        font-size: 1.125rem; // Make icons bigger
     }
 
     .SidebarListItem__name {

frontend/src/layout/navigation-3000/components/SidebarAccordion.tsx

@@ -1,3 +1,6 @@
+import { IconEllipsis } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+import { LemonMenu } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { IconChevronRight } from 'lib/lemon-ui/icons'
 import { Spinner } from 'lib/lemon-ui/Spinner'
@@ -16,7 +19,7 @@ export function SidebarAccordion({ category }: SidebarAccordionProps): JSX.Eleme
     const { accordionCollapseMapping } = useValues(navigation3000Logic)
     const { toggleAccordion } = useActions(navigation3000Logic)
 
-    const { key, items, loading } = category
+    const { key, items, loading, menuItems } = category
 
     const isEmpty = items.length === 0
     const isEmptyDefinitively = !loading && isEmpty
@@ -39,6 +42,16 @@ export function SidebarAccordion({ category }: SidebarAccordionProps): JSX.Eleme
                     )}
                 </h4>
                 <NewItemButton category={category} />
+                {!!menuItems?.length && (
+                    <LemonMenu items={menuItems}>
+                        <LemonButton
+                            size="small"
+                            noPadding
+                            icon={<IconEllipsis />}
+                            onClick={(e) => e.stopPropagation()}
+                        />
+                    </LemonMenu>
+                )}
             </div>
             {isExpanded && <SidebarList category={category} />}
         </section>