chore(editor-3000): extract datavizlogic

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

@@ -175,7 +175,7 @@
 .Sidebar3000 {
     --sidebar-slider-padding: 0.125rem;
     --sidebar-horizontal-padding: 0.5rem;
-    --sidebar-row-height: 2rem;
+    --sidebar-row-height: 2.5rem;
     --sidebar-background: var(--bg-3000);
 
     position: relative;
@@ -451,7 +451,8 @@
         }
 
         // Accommodate menu button by moving stuff out of the way
-        &.SidebarListItem--has-menu:not(.SidebarListItem--extended) .SidebarListItem__link {
+        &.SidebarListItem--has-menu:not(.SidebarListItem--extended) .SidebarListItem__link,
+        &.SidebarListItem--has-menu:not(.SidebarListItem--extended) .SidebarListItem__button {
             padding-right: calc(var(--sidebar-horizontal-padding) + 1.25rem);
         }
 
@@ -523,6 +524,7 @@
     }
 }
 
+.SidebarListItem__button,
 .SidebarListItem__link,
 .SidebarListItem__rename {
     --sidebar-list-item-inset: calc(
@@ -555,6 +557,17 @@
     }
 }
 
+.SidebarListItem__button {
+    row-gap: 1px;
+    padding: 0 var(--sidebar-horizontal-padding) 0 var(--sidebar-list-item-inset);
+    color: inherit !important; // Disable link color
+    cursor: pointer;
+
+    &:hover {
+        background: var(--border-3000);
+    }
+}
+
 .SidebarListItem__rename {
     // Pseudo-elements don't work on inputs, so we use a wrapper div
     background: var(--bg-light);

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

@@ -27,7 +27,7 @@ export function Navbar(): JSX.Element {
     const { isAccountPopoverOpen, systemStatusHealthy } = useValues(navigationLogic)
     const { closeAccountPopover, toggleAccountPopover } = useActions(navigationLogic)
     const { isNavShown, isSidebarShown, activeNavbarItemId, navbarItems, mobileLayout } = useValues(navigation3000Logic)
-    const { showSidebar, hideSidebar, toggleNavCollapsed, hideNavOnMobile } = useActions(navigation3000Logic)
+    const { toggleNavCollapsed, hideNavOnMobile, showSidebar, hideSidebar } = useActions(navigation3000Logic)
     const { featureFlags } = useValues(featureFlagLogic)
     const { toggleSearchBar } = useActions(commandBarLogic)
 

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

@@ -19,8 +19,16 @@ const SEARCH_DEBOUNCE_MS = 300
 
 interface SidebarProps {
     navbarItem: SidebarNavbarItem // Sidebar can only be rendered if there's an active sidebar navbar item
+    sidebarOverlay?: React.ReactNode
+    sidebarOverlayProps?: SidebarOverlayProps
 }
-export function Sidebar({ navbarItem }: SidebarProps): JSX.Element {
+
+interface SidebarOverlayProps {
+    className?: string
+    isOpen?: boolean
+}
+
+export function Sidebar({ navbarItem, sidebarOverlay, sidebarOverlayProps }: SidebarProps): JSX.Element {
     const inputElementRef = useRef<HTMLInputElement>(null)
 
     const {
@@ -81,6 +89,11 @@ export function Sidebar({ navbarItem }: SidebarProps): JSX.Element {
                     }
                 }}
             />
+            {sidebarOverlay && (
+                <SidebarOverlay {...sidebarOverlayProps} isOpen={isShown && sidebarOverlayProps?.isOpen} width={width}>
+                    {sidebarOverlay}
+                </SidebarOverlay>
+            )}
         </div>
     )
 }
@@ -199,3 +212,24 @@ function SidebarKeyboardShortcut(): JSX.Element {
         </div>
     )
 }
+
+function SidebarOverlay({
+    className,
+    isOpen = false,
+    children,
+    width,
+}: SidebarOverlayProps & { children: React.ReactNode; width: number }): JSX.Element | null {
+    if (!isOpen) {
+        return null
+    }
+
+    return (
+        <div
+            className={clsx('absolute top-0 left-0 h-full bg-bg-3000', className)}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ width: `${width}px` }}
+        >
+            {children}
+        </div>
+    )
+}

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

@@ -13,7 +13,14 @@ import { InfiniteLoader } from 'react-virtualized/dist/es/InfiniteLoader'
 import { List, ListProps } from 'react-virtualized/dist/es/List'
 
 import { ITEM_KEY_PART_SEPARATOR, navigation3000Logic } from '../navigationLogic'
-import { BasicListItem, ExtendedListItem, ExtraListItemContext, SidebarCategory, TentativeListItem } from '../types'
+import {
+    BasicListItem,
+    ButtonListItem,
+    ExtendedListItem,
+    ExtraListItemContext,
+    SidebarCategory,
+    TentativeListItem,
+} from '../types'
 import { KeyboardShortcut } from './KeyboardShortcut'
 
 export function SidebarList({ category }: { category: SidebarCategory }): JSX.Element {
@@ -122,7 +129,7 @@ export function SidebarList({ category }: { category: SidebarCategory }): JSX.El
 }
 
 interface SidebarListItemProps {
-    item: BasicListItem | ExtendedListItem | TentativeListItem
+    item: BasicListItem | ExtendedListItem | TentativeListItem | ButtonListItem
     validateName?: SidebarCategory['validateName']
     active?: boolean
     style: React.CSSProperties
@@ -132,6 +139,10 @@ function isItemTentative(item: SidebarListItemProps['item']): item is TentativeL
     return 'onSave' in item
 }
 
+function isItemClickable(item: SidebarListItemProps['item']): item is ButtonListItem {
+    return 'onClick' in item
+}
+
 function SidebarListItem({ item, validateName, active, style }: SidebarListItemProps): JSX.Element {
     const [isMenuOpen, setIsMenuOpen] = useState(false)
     const [newName, setNewName] = useState<null | string>(null)
@@ -218,7 +229,13 @@ function SidebarListItem({ item, validateName, active, style }: SidebarListItemP
     }) // Intentionally run on every render so that ref value changes are picked up
 
     let content: JSX.Element
-    if (!save || (!isItemTentative(item) && newName === null)) {
+    if (isItemClickable(item)) {
+        content = (
+            <li className="SidebarListItem__button" onClick={item.onClick}>
+                <h5>{item.name}</h5>
+            </li>
+        )
+    } else if (!save || (!isItemTentative(item) && newName === null)) {
         if (isItemTentative(item)) {
             throw new Error('Tentative items should not be rendered in read mode')
         }

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -31,6 +31,7 @@ import { LemonMenuOverlay } from 'lib/lemon-ui/LemonMenu/LemonMenu'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { isNotNil } from 'lib/utils'
 import React from 'react'
+import { editorSidebarLogic } from 'scenes/data-warehouse/editor/editorSidebarLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { Scene } from 'scenes/sceneTypes'
 import { teamLogic } from 'scenes/teamLogic'
@@ -103,9 +104,6 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
     reducers({
         isSidebarShown: [
             true,
-            {
-                persist: true,
-            },
             {
                 hideSidebar: () => false,
                 showSidebar: () => true,
@@ -514,9 +512,10 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                         featureFlags[FEATURE_FLAGS.SQL_EDITOR]
                             ? {
                                   identifier: Scene.SQLEditor,
-                                  label: 'SQL editor',
+                                  label: 'Data warehouse',
                                   icon: <IconServer />,
-                                  to: isUsingSidebar ? undefined : urls.sqlEditor(),
+                                  to: urls.sqlEditor(),
+                                  logic: editorSidebarLogic,
                               }
                             : null,
                         featureFlags[FEATURE_FLAGS.DATA_MODELING] && hasOnboardedAnyProduct
@@ -598,6 +597,9 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
         activeNavbarItemId: [
             (s) => [s.activeNavbarItemIdRaw, featureFlagLogic.selectors.featureFlags],
             (activeNavbarItemIdRaw, featureFlags): string | null => {
+                if (featureFlags[FEATURE_FLAGS.SQL_EDITOR] && activeNavbarItemIdRaw === Scene.SQLEditor) {
+                    return Scene.SQLEditor
+                }
                 if (!featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV]) {
                     return null
                 }

frontend/src/layout/navigation-3000/types.ts

@@ -104,6 +104,7 @@ export interface BasicListItem {
      * URL within the app. In specific cases this can be null - such items are italicized.
      */
     url: string | null
+    onClick?: () => void
     /** An optional marker to highlight item state. */
     marker?: {
         /** A marker of type `fold` is a small triangle in the top left, `ribbon` is a narrow ribbon to the left. */
@@ -146,3 +147,8 @@ export interface TentativeListItem {
     adding: boolean
     ref?: BasicListItem['ref']
 }
+
+export interface ButtonListItem extends BasicListItem {
+    key: '__button__'
+    onClick: () => void
+}

frontend/src/lib/api.ts

@@ -2206,7 +2206,7 @@ const api = {
         },
         async update(
             viewId: DataWarehouseSavedQuery['id'],
-            data: Pick<DataWarehouseSavedQuery, 'name' | 'query'>
+            data: Partial<DataWarehouseSavedQuery>
         ): Promise<DataWarehouseSavedQuery> {
             return await new ApiRequest().dataWarehouseSavedQuery(viewId).update({ data })
         },

frontend/src/lib/lemon-ui/LemonDialog/LemonDialog.tsx

@@ -12,6 +12,7 @@ export type LemonFormDialogProps = LemonDialogFormPropsType &
     Omit<LemonDialogProps, 'primaryButton' | 'secondaryButton' | 'tertiaryButton'> & {
         initialValues: Record<string, any>
         onSubmit: (values: Record<string, any>) => void | Promise<void>
+        shouldAwaitSubmit?: boolean
     }
 
 export type LemonDialogProps = Pick<
@@ -26,6 +27,7 @@ export type LemonDialogProps = Pick<
     onClose?: () => void
     onAfterClose?: () => void
     closeOnNavigate?: boolean
+    shouldAwaitSubmit?: boolean
 }
 
 export function LemonDialog({
@@ -37,12 +39,14 @@ export function LemonDialog({
     content,
     initialFormValues,
     closeOnNavigate = true,
+    shouldAwaitSubmit = false,
     footer,
     ...props
 }: LemonDialogProps): JSX.Element {
     const [isOpen, setIsOpen] = useState(true)
     const { currentLocation } = useValues(router)
     const lastLocation = useRef(currentLocation.pathname)
+    const [isLoading, setIsLoading] = useState(false)
 
     primaryButton =
         primaryButton ||
@@ -63,8 +67,20 @@ export function LemonDialog({
             <LemonButton
                 type="secondary"
                 {...button}
-                onClick={(e) => {
-                    button.onClick?.(e)
+                loading={button === primaryButton && shouldAwaitSubmit ? isLoading : undefined}
+                // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                onClick={async (e) => {
+                    if (button === primaryButton && shouldAwaitSubmit) {
+                        setIsLoading(true)
+                        try {
+                            // eslint-disable-next-line @typescript-eslint/await-thenable
+                            await button.onClick?.(e)
+                        } finally {
+                            setIsLoading(false)
+                        }
+                    } else {
+                        button.onClick?.(e)
+                    }
                     setIsOpen(false)
                 }}
             />
@@ -117,7 +133,8 @@ export const LemonFormDialog = ({
         type: 'primary',
         children: 'Submit',
         htmlType: 'submit',
-        onClick: () => void onSubmit(form),
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        onClick: props.shouldAwaitSubmit ? async () => await onSubmit(form) : undefined,
         disabledReason: !isFormValid ? firstError : undefined,
     }
 

frontend/src/queries/nodes/DataVisualization/Components/Variables/variablesLogic.ts

@@ -37,7 +37,7 @@ export const variablesLogic = kea<variablesLogicType>([
         actions: [dataVisualizationLogic, ['setQuery', 'loadData'], variableDataLogic, ['getVariables']],
         values: [
             dataVisualizationLogic,
-            ['query', 'insightLogicProps'],
+            ['query', 'dashboardId'],
             variableDataLogic,
             ['variables', 'variablesLoading'],
             featureFlagLogic,
@@ -124,9 +124,9 @@ export const variablesLogic = kea<variablesLogicType>([
             },
         ],
         showVariablesBar: [
-            (state) => [state.insightLogicProps],
-            (insightLogicProps) => {
-                return !insightLogicProps.dashboardId
+            (state) => [state.dashboardId],
+            (dashboardId) => {
+                return !dashboardId
             },
         ],
     }),