Session List

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)
+  }
+})