Session List (#3132)

Added a sessions pane in the left sidebar.

Whenever a new query tab is created, a new entry will be added to the list of sessions. When the tab is closed, the session entry will remain. When the session is clicked, it will either activate the associated tab if it exists, or it will restore that tab, along with it's history. You can right click a session to delete it. Deleting it will destroy the associated tab and history.

The display name of the tab is text of the most recent query in that sessions history.

apps/zui/jest.config.js

@@ -7,11 +7,21 @@ const moduleNameMapper = pathsToModuleNameMapper(config.compilerOptions.paths, {
   prefix: "<rootDir>/../../",
 })
 
+const esModules = [
+  "bullet",
+  "@reduxjs/toolkit",
+  "immer",
+  "redux",
+  "lodash-es",
+].join("|")
+// https://github.com/gravitational/teleport/issues/33810
+
 module.exports = {
   transform: {
     "^.+\\.(t|j)sx?$": ["@swc/jest"],
     ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform",
   },
+  transformIgnorePatterns: [`/node_modules/(?!${esModules})`],
   setupFiles: ["./src/test/unit/setup/before-env.ts"],
   setupFilesAfterEnv: ["./src/test/unit/setup/after-env.ts"],
   testEnvironmentOptions: {

apps/zui/package.json

@@ -74,6 +74,7 @@
     "ajv": "^6.9.1",
     "animejs": "^3.2.0",
     "brimcap": "brimdata/brimcap#0c3a564771dd204e9ce93e4600de2dbcf97bd446",
+    "bullet": "^0.0.2",
     "chalk": "^4.1.0",
     "chevrotain": "^10.5.0",
     "chrono-node": "^2.5.0",

apps/zui/src/components/drag-anchor.tsx

@@ -142,7 +142,6 @@ export default class DragAnchor extends React.Component<Props> {
         className={classNames(
           `align-${this.props.position}`,
           this.props.className,
-
           {
             debug: this.props.debug,
             showOnHover: this.props.showOnHover,

apps/zui/src/components/icon/index.tsx

@@ -23,7 +23,7 @@ export function Icon(props: Props) {
 
   return (
     <svg
-      className={classNames("icon", styles.icon)}
+      className={classNames("icon", styles.icon, props.className)}
       fill={props.fill || "currentColor"}
       style={style}
     >

apps/zui/src/css/_utilities.scss

@@ -265,3 +265,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.list-none {
+  list-style-type: none;
+}

apps/zui/src/css/blocks/_sidebar-item.scss

@@ -1,4 +1,5 @@
 .sidebar-item {
+  list-style-type: none;
   border-radius: 6px;
   width: 100%;
   cursor: default;
@@ -15,14 +16,13 @@
   --selected-border: var(--primary-color-dark);
 }
 
-.sidebar-item:hover {
-  background-color: inherit;
-  filter: var(--hover-filter);
+.sidebar-item:hover,
+.sidebar-item:active {
+  background-color: var(--emphasis-bg-less);
 }
 
 .sidebar-item:active {
-  background-color: inherit;
-  filter: var(--active-filter);
+  transform: scale(0.995);
 }
 
 .sidebar-item[aria-selected="true"] {
@@ -35,5 +35,5 @@
 .white-selection {
   --selected-bg: white;
   --selected-color: var(--fg-color);
-  --selected-border: var(--border-color);
+  --selected-border: transparent;
 }

apps/zui/src/css/compositions/_gutter.scss

@@ -13,3 +13,7 @@
 .gutter-inline-end {
   padding-inline-end: var(--gutter);
 }
+
+.gutter-inline-start {
+  padding-inline-start: var(--gutter);
+}

apps/zui/src/css/utilities/_flex.scss

@@ -14,7 +14,7 @@
   align-items: center;
 }
 
-.flex-shrink-0 {
+.shrink-0 {
   flex-shrink: 0;
 }
 

apps/zui/src/js/initializers/init-domain-models.ts

@@ -1,6 +1,8 @@
 import {DomainModel} from "src/core/domain-model"
 import {Store} from "../state/types"
+import {Entity} from "bullet"
 
 export function initDomainModels(args: {store: Store}) {
   DomainModel.store = args.store
+  Entity.store = args.store
 }

apps/zui/src/js/state/Appearance/types.ts

@@ -1,3 +1,3 @@
 export type HistoryView = "tree" | "linear"
-export type SectionName = "pools" | "queries" | "history"
+export type SectionName = "pools" | "queries" | "sessions"
 export type OpenMap = {[id: string]: boolean}

apps/zui/src/js/state/QueryVersions/reducer.ts

@@ -3,12 +3,13 @@ import {
   createNestedEntitySlice,
   initialState,
 } from "../entity-slice/create-entity-slice"
-import {actions as tabs} from "../Tabs/reducer"
 import {State} from "../types"
 import {QueryVersion} from "./types"
 
 type VersionMeta = {queryId: string}
 
+const initial = initialState()
+
 export const versionSlice = createNestedEntitySlice<
   QueryVersion,
   {queryId: string},
@@ -19,8 +20,8 @@ export const versionSlice = createNestedEntitySlice<
   sort: (a, b) => (a.ts > b.ts ? 1 : -1),
   meta: (queryId) => ({queryId}),
   select: (state: State, meta) => {
-    if (!state.queryVersions) return initialState()
-    return state.queryVersions[meta.queryId] ?? initialState()
+    if (!state.queryVersions) return initial
+    return state.queryVersions[meta.queryId] ?? initial
   },
 })
 
@@ -33,11 +34,4 @@ export const reducer = createReducer({}, (builder) => {
       if (!state[id].ids.length) delete state[id]
     }
   )
-
-  builder.addMatcher(
-    ({type}) => type == tabs.remove.toString(),
-    (s, a: PayloadAction<string>) => {
-      delete s[a.payload]
-    }
-  )
 })

apps/zui/src/js/state/SessionHistories/reducer.ts

@@ -1,9 +1,8 @@
 import {createSlice, PayloadAction} from "@reduxjs/toolkit"
 import {SessionHistoriesState, SessionHistoryEntry} from "./types"
-import {actions as tabs} from "../Tabs/reducer"
 
 const slice = createSlice({
-  name: "sessionHistories",
+  name: "$sessionHistories",
   initialState: {} as SessionHistoriesState,
   reducers: {
     replaceById(
@@ -33,11 +32,6 @@ const slice = createSlice({
       }
     },
   },
-  extraReducers: (builder) => {
-    builder.addCase(tabs.remove, (s, a: ReturnType<typeof tabs.remove>) => {
-      delete s[a.payload]
-    })
-  },
 })
 
 export const reducer = slice.reducer

apps/zui/src/js/state/SessionQueries/reducer.ts

@@ -1,5 +1,4 @@
 import {createSlice} from "@reduxjs/toolkit"
-import {actions as tabs} from "../Tabs/reducer"
 
 const slice = createSlice({
   name: "$sessionQueries",
@@ -9,11 +8,6 @@ const slice = createSlice({
       s[a.payload.id] = a.payload
     },
   },
-  extraReducers: (builder) => {
-    builder.addCase(tabs.remove, (s, a: ReturnType<typeof tabs.remove>) => {
-      delete s[a.payload]
-    })
-  },
 })
 
 export const reducer = slice.reducer

apps/zui/src/js/state/TabHistories/index.ts

@@ -1,5 +1,4 @@
 import {createEntityAdapter, createSlice} from "@reduxjs/toolkit"
-import {actions as tabs} from "../Tabs/reducer"
 import {State} from "../types"
 import {SerializedHistory} from "./types"
 
@@ -11,15 +10,6 @@ const slice = createSlice({
   reducers: {
     save: adapter.setAll,
   },
-  extraReducers: (builder) => {
-    builder.addCase(
-      tabs.remove,
-      (state, action: ReturnType<typeof tabs.remove>) => {
-        global.tabHistories.delete(action.payload)
-        return state
-      }
-    )
-  },
 })
 
 export default {

apps/zui/src/js/state/Tabs/flows.ts

@@ -5,24 +5,34 @@ import {Thunk} from "../types"
 import Tabs from "./"
 import {findTabById, findTabByUrl} from "./find"
 import {invoke} from "src/core/invoke"
+import {QuerySession} from "src/models/query-session"
 
 export const create =
   (url = "/", id = nanoid()): Thunk<string> =>
   (dispatch) => {
     dispatch(SessionQueries.init(id))
     dispatch(Tabs.add(id))
-    global.tabHistories.create(id, [{pathname: url}], 0)
+    // move to tabHistories.restore(id, url)
+    const history = global.tabHistories.get(id)
+    if (history) {
+      if (history.location.pathname !== url) history.push(url)
+    } else {
+      global.tabHistories.create(id, [{pathname: url}], 0)
+    }
+    // end
     dispatch(Tabs.activate(id))
     return id
   }
 
 export const createQuerySession =
   (): Thunk<string> =>
   (dispatch, getState, {api}) => {
-    const sessionId = nanoid()
+    const session = QuerySession.create()
+    const sessionId = session.id
     const version = "0"
     api.queries.createEditorSnapshot(sessionId, {version, value: "", pins: []})
     const url = queryPath(sessionId, version)
+
     return dispatch(create(url, sessionId))
   }
 

apps/zui/src/js/state/Tabs/history.test.ts

@@ -6,42 +6,46 @@ import tabHistory from "src/app/router/tab-history"
 import initTestStore from "src/test/unit/helpers/initTestStore"
 import Current from "../Current"
 import Tabs from "./"
+import Histories from "src/modules/histories"
 
 let store
 beforeEach(async () => {
+  global.tabHistories = new Histories()
   store = await initTestStore()
-  store.dispatch(Tabs.closeActive())
 })
 
 const currentPathnames = () =>
   Current.getHistory(store.getState(), "search").entries.map((e) => e.pathname)
 
 test("creating a tab creates a history entry", () => {
-  expect(global.tabHistories.count()).toBe(0)
-  store.dispatch(Tabs.create("/url"))
   expect(global.tabHistories.count()).toBe(1)
+  store.dispatch(Tabs.create("/url"))
+  expect(global.tabHistories.count()).toBe(2)
 })
 
 test("activate sets the global.tabHistory", () => {
-  expect(global.tabHistories.count()).toBe(0)
+  expect(global.tabHistories.count()).toBe(1)
   store.dispatch(tabHistory.push("/url-for-tab-1"))
-  expect(currentPathnames()).toEqual(["/", "/url-for-tab-1"])
+  expect(currentPathnames()).toEqual(["/welcome", "/url-for-tab-1"])
 
   store.dispatch(Tabs.add("2"))
-  expect(currentPathnames()).toEqual(["/", "/url-for-tab-1"])
+  expect(currentPathnames()).toEqual(["/welcome", "/url-for-tab-1"])
 
   store.dispatch(Tabs.activate("2"))
   store.dispatch(tabHistory.push("/url-for-tab-2"))
   expect(currentPathnames()).toEqual(["/", "/url-for-tab-2"])
   expect(global.tabHistories.count()).toBe(2)
 })
 
-test("removing a tab removes the history too", () => {
+test("removing the tab does not removes the history too", () => {
+  expect(global.tabHistories.count()).toBe(1)
   store.dispatch(tabHistory.push("/url-for-tab-1"))
   store.dispatch(Tabs.add("2"))
   store.dispatch(Tabs.activate("2"))
-  store.dispatch(Tabs.remove("2"))
+  store.dispatch(tabHistory.push("/url-for-tab-2"))
+  expect(global.tabHistories.count()).toBe(2)
 
-  expect(global.tabHistories.count()).toBe(1)
-  expect(currentPathnames()).toEqual(["/", "/url-for-tab-1"])
+  store.dispatch(Tabs.remove("2"))
+  expect(global.tabHistories.count()).toBe(2)
+  expect(currentPathnames()).toEqual(["/welcome", "/url-for-tab-1"])
 })

apps/zui/src/js/state/Tabs/reducer.ts

@@ -28,6 +28,7 @@ const slice = createSlice({
     remove(s, a: PayloadAction<string>) {
       const id = a.payload
       const index = findTabIndex(s, id)
+      if (index === -1) return
       const isLast = index === s.data.length - 1
       s.data.splice(index, 1)
       if (id === s.active) {

apps/zui/src/js/state/Tabs/test.ts

@@ -38,6 +38,11 @@ test("remove tab", () => {
   expect(Tabs.getCount(state)).toBe(0)
 })
 
+test("remove the id of a tab that doesn't exist", () => {
+  const state = dispatchAll(store, [Tabs.add("1"), Tabs.remove("999999")])
+  expect(Tabs.getCount(state)).toBe(1)
+})
+
 test("remove last, active tab", () => {
   const state = dispatchAll(store, [
     Tabs.add("1"),

apps/zui/src/js/state/migrations/202407221450_populateSessions.test.ts

@@ -0,0 +1,64 @@
+import {migrate} from "src/test/unit/helpers/migrate"
+import {getAllStates} from "./utils/getTestState"
+
+test("migrating 202407221450_populateSessions", async () => {
+  const next = await migrate({state: "v1.17.0", to: "202407221450"})
+
+  const sessions = {
+    entities: {
+      KbZNe9FuSHnKKfB398B0Z: {
+        id: "KbZNe9FuSHnKKfB398B0Z",
+        name: null,
+        createdAt: expect.any(String),
+        updatedAt: expect.any(String),
+      },
+      Zf8vsxTZ4mqT7IK1OtvRf: {
+        id: "Zf8vsxTZ4mqT7IK1OtvRf",
+        name: null,
+        createdAt: expect.any(String),
+        updatedAt: expect.any(String),
+      },
+      sIpManYfhNgo6gWdu10bA: {
+        id: "sIpManYfhNgo6gWdu10bA",
+        name: null,
+        createdAt: expect.any(String),
+        updatedAt: expect.any(String),
+      },
+    },
+    ids: [
+      "KbZNe9FuSHnKKfB398B0Z",
+      "sIpManYfhNgo6gWdu10bA",
+      "Zf8vsxTZ4mqT7IK1OtvRf",
+    ],
+  }
+
+  const histories = {
+    KbZNe9FuSHnKKfB398B0Z: [
+      {
+        queryId: "KbZNe9FuSHnKKfB398B0Z",
+        version: "mDbO6knM4vakcKQ0u4CLv",
+      },
+    ],
+    Zf8vsxTZ4mqT7IK1OtvRf: [
+      {
+        queryId: "Zf8vsxTZ4mqT7IK1OtvRf",
+        version: "88LzM379511XaOMGPKkHB",
+      },
+      {
+        queryId: "Zf8vsxTZ4mqT7IK1OtvRf",
+        version: "YXX7LtHVgCJRgJPNR-USP",
+      },
+    ],
+    sIpManYfhNgo6gWdu10bA: [
+      {
+        queryId: "sIpManYfhNgo6gWdu10bA",
+        version: "BQS4GdEC5JcgV1fankooP",
+      },
+    ],
+  }
+
+  for (const state of getAllStates(next)) {
+    expect(state.querySessions).toEqual(sessions)
+    expect(state.sessionHistories).toEqual(histories)
+  }
+})