Zui with No Tabs Open

CODE.md

@@ -2,19 +2,33 @@
 
 This is here to document the design patterns chosen by the developers. It documents structures, abstractions, and philosophy in this repo.
 
+## Dependencies
+
+**All dependencies should be installed as development.** This app is unlike traditional web or node apps. All dependencies should be development dependencies unless esbuild cannot bundle it. The reason: before we package the app, we bundle all the code into a single file. The bundled JavaScript has no need to look into node_modules because all dependencies are already included in the bundle. When we package the app, it will include all the production dependencies in the app package. So, since we bundle most ourselves, there's no need to have duplicate packages in the packaged app's node_modules.
+
 ## FAQs
 
-How do I add a main process initializer?
+### How do I add a main process initializer?
 
 1. Create a new file in `src/electron/initializers/`.
-2. Add the following line to `src/electron/initializers/index.ts`.
+2. Export a function called _initialize_(main) that takes the main object as its only argument.
+3. Add the following line to `src/electron/initializers/index.ts`.
 
 ```
 export * as myNewInitializer from "./my-new-initializer"
 ```
 
 Export all symbols as a camel cased alias of the file name. This will now run automatically when the app starts.
 
+### How do I write a state migration?
+
+1. Run `bin/gen migration my_migration_name`.
+2. Edit the files it produced to perform your migration.
+3. Use the getAllTabs and getAllStates helpers as needed.
+4. Remember that the states are either the main process state or the window states.
+5. Add that file to the src/js/state/migrations/index.ts following the pattern there.
+6. Create a sample state, if needed, by running the app at the latest released version, getting it into the state you want, then copying run/appState.json into src/test/unit/states/v0.0.0.json using the version as the file name.
+
 ## Folders
 
 Documentation for where code should go.
@@ -66,3 +80,29 @@ The plugin api runs in the Node main process and is given to plugin authors to e
 _Main Process Initializers_
 
 Code that needs to be run one time before the app starts up can be put in an initializer. An initializer is a file that lives in the folder `src/electron/initializers/`. It must export a function named _initialize(main)_ that takes the Main Object as its only argument. See the FAQ for an example of creating a new initializer.
+
+_Query_
+
+A query in the app is like a container object. It holds the name and id of the query. It does not contain the zed code. Those are stored in a QueryVersion. Each Query has many QueryVersions, showing the history of that query.
+
+_Session Query_
+
+A session query is like an unnamed Query. Each session (tab) has exactly one SessionQuery associated with it. The SessionQuery has many QueryVersions associated with it.
+
+_Store_
+
+The store contains the state for the whole application. Parts of the store apply to the whole app (main process and all windows), like the list of lakes, the list of the pools, the list of queries, and the configurations. Then state only relevant to one window, then state that's only relative to the tab.
+
+**State Hierarchy**
+
+1. Application Level
+2. Window Level
+3. Tab Level
+
+Application level state has a `$` prefix to the action names. Actions dispatched with the `$` prefix get dispatched to the main process and all windows.
+
+Window level state is everything that's not in the `tabReducer`, but doesn't have a `$` prefix.
+
+Tabs state is found in the `tabReducer` function.
+
+The tabs are grouped by lakeId within the window state. Each window has a different group of tabs per lakeId. When a user switches lakes, the tabs from the previous lake will be hidden and the tabs from the current lake shown. When switching back, the old tabs will be restored.

package.json

@@ -5,7 +5,7 @@
   "description": "Zed User Interface",
   "repository": "https://github.com/brimdata/zui",
   "license": "BSD-3-Clause",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "dist/main.js",
   "author": "Brim Data <support@brimdata.io> (http://www.brimdata.io)",
   "workspaces": [
@@ -83,8 +83,8 @@
     "@types/sprintf-js": "^1.1.2",
     "@types/styled-components": "^5.1.3",
     "@types/tmp": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "5.60.1",
-    "@typescript-eslint/parser": "5.60.1",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
     "abort-controller": "^3.0.0",
     "acorn": "^7.4.1",
     "ajv": "^6.9.1",
@@ -111,7 +111,7 @@
     "esbuild": "^0.17.18",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.1.2",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "event-source-polyfill": "^1.0.25",

pages/detail.tsx

@@ -7,13 +7,15 @@ import {Modals} from "src/js/components/Modals"
 import Tooltip from "src/js/components/Tooltip"
 import initialize from "src/js/initializers/initialize"
 import TabHistories from "src/js/state/TabHistories"
+import Tabs from "src/js/state/Tabs"
 import {getPersistedWindowState} from "src/js/state/stores/get-persistable"
 
 export default function DetailPage() {
   const [app, setApp] = useState(null)
 
   useEffect(() => {
     initialize().then((vars) => {
+      vars.store.dispatch(Tabs.create()) // Make a "tab" so that selectors work
       window.onbeforeunload = () => {
         vars.api.abortables.abortAll()
         vars.store.dispatch(TabHistories.save(global.tabHistories.serialize()))

src/app/commands/new-pool.ts

@@ -2,6 +2,6 @@ import Tabs from "src/js/state/Tabs"
 import {newPoolPath} from "../router/utils/paths"
 import {createCommand} from "./command"
 
-export const newPool = createCommand({id: "newPool"}, ({api, dispatch}) => {
-  dispatch(Tabs.activateUrl(newPoolPath(api.current.lakeId)))
+export const newPool = createCommand({id: "newPool"}, ({dispatch}) => {
+  dispatch(Tabs.activateUrl(newPoolPath()))
 })

src/app/commands/pins.ts

@@ -8,6 +8,7 @@ import submitSearch from "../query-home/flows/submit-search"
 import {createCommand} from "./command"
 import Current from "src/js/state/Current"
 import PoolSettings from "src/js/state/PoolSettings"
+import Tabs from "src/js/state/Tabs"
 
 export const createFromEditor = createCommand(
   "pins.createFromEditor",
@@ -40,9 +41,13 @@ export const createFrom = createCommand<[value?: string]>(
 
 export const updateFrom = createCommand(
   "pins.updateFrom",
-  ({dispatch}, value: string) => {
-    dispatch(Editor.setFrom(value))
-    dispatch(submitSearch())
+  ({dispatch, getState, api}, value: string) => {
+    if (Tabs.none(getState())) {
+      api.queries.open({pins: [{type: "from", value}], value: ""})
+    } else {
+      dispatch(Editor.setFrom(value))
+      dispatch(submitSearch())
+    }
   }
 )
 

src/app/commands/pools.ts

@@ -3,7 +3,6 @@ import errors from "src/js/errors"
 import {ErrorData} from "src/js/errors/types"
 import ErrorFactory from "src/js/models/ErrorFactory"
 import {PoolName} from "../features/sidebar/pools-section/pool-name"
-import {lakePoolPath} from "../router/utils/paths"
 import {createCommand} from "./command"
 import {deletePools} from "./delete-pools"
 import {invoke} from "src/core/invoke"
@@ -61,13 +60,13 @@ export const rename = createCommand(
 export const deleteGroup = createCommand(
   "pools.deleteGroup",
   ({api}, group: string[]) => {
-    const decendentIds = api.pools.all
+    const descendantIds = api.pools.all
       .filter((pool) => {
         return new PoolName(pool.name, api.pools.nameDelimiter).isIn(group)
       })
       .map((pool) => pool.id)
 
-    return deletePools.run(decendentIds)
+    return deletePools.run(descendantIds)
   }
 )
 
@@ -79,8 +78,6 @@ export const createAndLoadFiles = createCommand(
     opts: {name?: string; format?: LoadFormat} & Partial<CreatePoolOpts> = {}
   ) => {
     let poolId: string | null = null
-    const lakeId = api.current.lakeId
-    const tabId = api.current.tabId
     const poolNames = api.pools.all.map((p) => p.name)
     if (!opts.name && files.length === 0) {
       api.toast("No pool name and no files provided.")
@@ -101,14 +98,14 @@ export const createAndLoadFiles = createCommand(
           error: "Load error",
         })
         await promise
+        return poolId
       }
-
-      api.url.push(lakePoolPath(poolId, lakeId), {tabId})
     } catch (e) {
       console.error(e)
       if (poolId) await api.pools.delete(poolId)
       api.notice.error(parseError(e))
       api.pools.syncAll()
+      throw e
     }
   }
 )

src/app/core/models/zed-ast.ts

@@ -14,7 +14,7 @@ export class ZedAst {
     if (!from) return null
     const trunk = from.trunks.find((t) => t.source.kind === "Pool")
     if (!trunk) return null
-    const name = trunk.source.spec.pool.text
+    const name = trunk.source.spec.pool?.text
     if (!name) return null
     return name
   }

src/app/detail/NoSelection.tsx

@@ -1,15 +1,8 @@
 import React from "react"
+import {EmptyText} from "../features/right-pane/common"
 
 const NoSelection = () => (
-  <div className="empty-message-wrapper">
-    <div className="empty-message">
-      <h3>No Log Selected</h3>
-      <p>Click a log line to view details.</p>
-      <p>
-        Toggle this pane with <code>Cmd + ]</code>.
-      </p>
-    </div>
-  </div>
+  <EmptyText>Select a value in the results to view details.</EmptyText>
 )
 
 export default NoSelection

src/app/features/right-pane/common.tsx

@@ -30,7 +30,11 @@ export const PaneHeader = styled.header`
 
 export const EmptyText = styled.p`
   padding: 24px;
-  margin-top: 33%;
   opacity: 0.5;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 `

src/app/features/right-pane/history/timeline.tsx

@@ -31,7 +31,7 @@ const Circle = styled.div<{color: string}>`
 const Line = styled.div`
   width: 2px;
   flex: 1;
-  background: #f6f6f7;
+  background: var(--border-color);
 
   &:first-child {
     border-radius: 0 0 1px 1px;

src/app/features/right-pane/index.tsx

@@ -12,12 +12,13 @@ import {HistorySection} from "./history/section"
 import {SectionTabs} from "src/components/section-tabs"
 import {PaneName} from "src/js/state/Layout/types"
 import {ColumnsPane} from "src/panes/columns-pane/columns-pane"
+import Appearance from "src/js/state/Appearance"
 
 const Pane = styled(DraggablePane)`
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--border-color);
-  background: white;
+  background: var(--chrome-color);
 `
 
 const PaneContentSwitch = ({paneName}) => {
@@ -43,19 +44,19 @@ const BG = styled.div`
   padding: 0 8px;
 `
 
-export function Menu() {
+export function Menu(props: {paneName: string}) {
   const dispatch = useDispatch()
-  const currentPaneName = useSelector(Layout.getCurrentPaneName)
+
   const onChange = (name: string) => {
-    if (name === currentPaneName) return
+    if (name === props.paneName) return
     dispatch(Layout.setCurrentPaneName(name as PaneName))
   }
 
   function makeOption(label: string, value: string) {
     return {
       label,
       click: () => onChange(value),
-      checked: currentPaneName === value,
+      checked: props.paneName === value,
     }
   }
 
@@ -74,14 +75,14 @@ export function Menu() {
 }
 
 function Container({children}) {
-  const width = useSelector(Layout.getDetailPaneWidth)
   const dispatch = useDispatch()
-  const isOpen = useSelector(Layout.getDetailPaneIsOpen)
+  const width = useSelector(Appearance.secondarySidebarWidth)
+  const isOpen = useSelector(Appearance.secondarySidebarIsOpen)
 
   const onDrag = (e: React.MouseEvent) => {
     const width = window.innerWidth - e.clientX
     const max = window.innerWidth
-    dispatch(Layout.setDetailPaneWidth(Math.min(width, max)))
+    dispatch(Appearance.resizeSecondarySidebar(Math.min(width, max)))
   }
 
   if (!isOpen) return null
@@ -99,7 +100,7 @@ const RightPane = () => {
 
   return (
     <Container>
-      <Menu />
+      <Menu paneName={currentPaneName} />
       <AppErrorBoundary>
         <PaneContentSwitch paneName={currentPaneName} />
       </AppErrorBoundary>

src/app/features/right-pane/versions-section.test.tsx

@@ -34,7 +34,7 @@ beforeEach(async () => {
   system.store.dispatch(Queries.addItem({id: testQueryId, name: "test query"}))
   system.store.dispatch(QueryVersions.at(testQueryId).create(testVersion1))
   system.store.dispatch(QueryVersions.at(testQueryId).create(testVersion2))
-  system.navTo(lakeQueryPath(testQueryId, "testLakeId", testVersion2.version))
+  system.navTo(lakeQueryPath(testQueryId, testVersion2.version))
   system.render(<VersionsSection />)
   await screen.findAllByText(/test value/i)
 })

src/app/features/sidebar/index.tsx

@@ -34,10 +34,10 @@ const PaneSwitch = ({name}) => {
 
 const Pane = styled(DraggablePane)`
   height: 100%;
+  width: 100%;
   background: var(--sidebar-background);
   overflow-x: unset;
   grid-area: sidebar;
-  border-right: 1px solid var(--border-color-dark);
   display: flex;
   flex-direction: column;
 `
@@ -58,7 +58,6 @@ export function Sidebar() {
   const isOpen = useSelector(Appearance.sidebarIsOpen)
   const currentSectionName = useSelector(Appearance.getCurrentSectionName)
   const l = useSelector(Current.getLake)
-
   const id = get(l, ["id"], "")
   function onDragPane(e: MouseEvent) {
     const width = e.clientX

src/app/features/sidebar/lake-picker.tsx

@@ -1,7 +1,5 @@
 import React from "react"
 import useLakeId from "src/app/router/hooks/use-lake-id"
-import tabHistory from "src/app/router/tab-history"
-import {newPoolPath} from "src/app/router/utils/paths"
 import {MenuItemConstructorOptions} from "electron"
 import {useDispatch, useSelector} from "react-redux"
 import styled from "styled-components"
@@ -13,6 +11,7 @@ import {AppDispatch} from "src/js/state/types"
 import Lakes from "src/js/state/Lakes"
 import {Lake} from "src/js/state/Lakes/types"
 import lake from "src/js/models/lake"
+import Window from "src/js/state/Window"
 
 const LakeNameGroup = styled.div`
   display: flex;
@@ -82,7 +81,7 @@ const showLakeSelectMenu = () => (dispatch, getState) => {
       checked: isCurrent,
       click: () => {
         if (isCurrent) return
-        dispatch(tabHistory.push(newPoolPath(l.id)))
+        dispatch(Window.setLakeId(l.id))
       },
     })
   })

src/app/features/sidebar/pools-section/index.tsx

@@ -8,16 +8,18 @@ import {useFilesDrop} from "src/util/hooks/use-files-drop"
 import {createAndLoadFiles} from "src/app/commands/pools"
 import {useDispatch} from "src/app/core/state"
 import Tabs from "src/js/state/Tabs"
-import {useZuiApi} from "src/app/core/context"
-import {lakePath} from "src/app/router/utils/paths"
+import {lakePoolPath} from "src/app/router/utils/paths"
 
 const PoolsSection = () => {
   const dispatch = useDispatch()
-  const api = useZuiApi()
   const [{isOver}, drop] = useFilesDrop({
-    onDrop: (files) => {
-      dispatch(Tabs.activateUrl(lakePath(api.current.lakeId)))
-      createAndLoadFiles.run(files.map((f) => f.path))
+    onDrop: async (files) => {
+      try {
+        const poolId = await createAndLoadFiles.run(files.map((f) => f.path))
+        dispatch(Tabs.activateUrl(lakePoolPath(poolId)))
+      } catch (e) {
+        // Handled
+      }
     },
   })
   const [searchTerm, setSearchTerm] = useState("")