Update Redux Toolkit (#3129)

jameskerr · web-flow · commit e52d0cb88fd9 · 2024-07-12T15:20:22.000-07:00
diff --git a/apps/zui/package.json b/apps/zui/package.json
@@ -42,7 +42,7 @@
     "@brimdata/zed-node": "workspace:*",
     "@js-joda/core": "^3.2.0",
     "@monaco-editor/react": "^4.5.1",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^2.2.5",
     "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.144",
     "@swc/jest": "^0.2.17",
diff --git a/apps/zui/src/app/routes/app-wrapper/main-area.tsx b/apps/zui/src/app/routes/app-wrapper/main-area.tsx
@@ -18,7 +18,7 @@ const BG = styled.main`
   margin: 10px;
   margin-top: 0;
   border-radius: 6px;
-  box-shadow: var(--shadow-s);
+  box-shadow: var(--shadow-m);
   border: 1px solid var(--border-color);
 
   @media (prefers-color-scheme: light) {
diff --git a/apps/zui/src/components/icon-button.tsx b/apps/zui/src/components/icon-button.tsx
@@ -33,15 +33,13 @@ const BG = styled.button`
   &:hover:not(:disabled) {
     background: var(--emphasis-bg);
     svg {
-      transform: scale(1.1);
+      transform: scale(1.03);
     }
   }
 
   &:active:not(:disabled) {
-    background: var(--emphasis-bg-more);
-    svg {
-      transform: scale(1.05);
-    }
+    background: var(--emphasis-bg);
+    transform: scale(0.99);
   }
 
   &.icon-label {
diff --git a/apps/zui/src/components/icon/icon-names.ts b/apps/zui/src/components/icon/icon-names.ts
@@ -5,6 +5,7 @@ export type IconMapping = {[name: string]: MingCuteIconName}
 export type IconName = keyof typeof iconNames | keyof typeof customIconNames
 
 export const iconNames = {
+  session: "layout_top",
   chevron_down: "down",
   chevron_left: "left",
   chevron_right: "right",
diff --git a/apps/zui/src/core/state/create-crud-slice.ts b/apps/zui/src/core/state/create-crud-slice.ts
@@ -9,7 +9,7 @@ import {
 
 export function createCrudSlice<T>(opts: {
   name: string
-  adapter: EntityAdapter<T>
+  adapter: EntityAdapter<T, string>
 }) {
   const {name, adapter} = opts
 
@@ -21,41 +21,50 @@ export function createCrudSlice<T>(opts: {
 
   return createSlice({
     name,
-    initialState: {ids: [], entities: {}} as EntityState<T>,
+    initialState: {ids: [], entities: {}} as EntityState<T, string>,
     reducers: {
       sync: (state, action: PayloadAction<T[]>) => {
-        adapter.setAll(state as EntityState<T>, action.payload)
+        adapter.setAll(state as EntityState<T, string>, action.payload)
       },
       create: (state, action: PayloadAction<T | T[]>) => {
         if (Array.isArray(action.payload)) {
-          adapter.addMany(state as EntityState<T>, action.payload)
+          adapter.addMany(state as EntityState<T, string>, action.payload)
         } else {
-          adapter.addOne(state as EntityState<T>, action.payload)
+          adapter.addOne(state as EntityState<T, string>, action.payload)
         }
       },
-      update: (state, action: PayloadAction<Update<T> | Update<T>[]>) => {
+      update: (
+        state,
+        action: PayloadAction<Update<T, string> | Update<T, string>[]>
+      ) => {
         if (Array.isArray(action.payload)) {
-          adapter.updateMany(state as EntityState<T>, action.payload)
+          adapter.updateMany(state as EntityState<T, string>, action.payload)
         } else {
-          adapter.updateOne(state as EntityState<T>, action.payload)
+          adapter.updateOne(state as EntityState<T, string>, action.payload)
         }
       },
       upsert: (state, action: PayloadAction<T | T[]>) => {
         if (Array.isArray(action.payload)) {
-          adapter.upsertMany(state as EntityState<T>, action.payload)
+          adapter.upsertMany(state as EntityState<T, string>, action.payload)
         } else {
-          adapter.upsertOne(state as EntityState<T>, action.payload)
+          adapter.upsertOne(state as EntityState<T, string>, action.payload)
         }
       },
       delete: (state, action: PayloadAction<string | string[] | T | T[]>) => {
         if (Array.isArray(action.payload)) {
-          adapter.removeMany(state as EntityState<T>, action.payload.map(getId))
+          adapter.removeMany(
+            state as EntityState<T, string>,
+            action.payload.map(getId) as any
+          )
         } else {
-          adapter.removeOne(state as EntityState<T>, getId(action.payload))
+          adapter.removeOne(
+            state as EntityState<T, string>,
+            getId(action.payload) as any
+          )
         }
       },
       deleteAll: (state) => {
-        adapter.removeAll(state as EntityState<T>)
+        adapter.removeAll(state as EntityState<T, string>)
       },
     },
   })
diff --git a/apps/zui/src/css/_utilities.scss b/apps/zui/src/css/_utilities.scss
@@ -259,3 +259,9 @@
 .debug-blue {
   outline: 1px dashed blue;
 }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/apps/zui/src/css/blocks/_section-tabs.scss b/apps/zui/src/css/blocks/_section-tabs.scss
@@ -5,17 +5,23 @@
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;
   color: var(--fg-color-less);
+  transition: all var(--hover-duration);
 
   &[aria-pressed="true"] {
     opacity: 1;
     color: var(--text-active);
     border-bottom: 2px solid var(--primary-color);
   }
 
-  &:hover {
+  &:hover,
+  &:active {
     background: var(--emphasis-bg-less);
   }
 
+  &:active {
+    transform: scale(0.985);
+  }
+
   span {
     padding: 0 var(--half-gutter);
     display: block;
diff --git a/apps/zui/src/css/compositions/_box.scss b/apps/zui/src/css/compositions/_box.scss
@@ -1,19 +1,3 @@
 .box {
   padding: var(--gutter-space);
 }
-
-.gutter {
-  padding-inline: var(--gutter-space);
-}
-
-.gutter-block {
-  padding-block: var(--gutter-space);
-}
-
-.half-gutter {
-  --gutter-space: var(--half-gutter);
-}
-
-.gutter-inline-end {
-  padding-inline-end: var(--gutter);
-}
diff --git a/apps/zui/src/css/compositions/_flex-center.scss b/apps/zui/src/css/compositions/_flex-center.scss
@@ -3,3 +3,13 @@
   align-items: center;
   justify-content: center;
 }
+
+.center-y {
+  display: flex;
+  align-items: center;
+}
+
+.center-x {
+  display: flex;
+  justify-content: center;
+}
diff --git a/apps/zui/src/css/compositions/_gutter.scss b/apps/zui/src/css/compositions/_gutter.scss
@@ -0,0 +1,15 @@
+.gutter {
+  padding-inline: var(--gutter-space);
+}
+
+.gutter-block {
+  padding-block: var(--gutter-space);
+}
+
+.half-gutter {
+  --gutter-space: var(--half-gutter);
+}
+
+.gutter-inline-end {
+  padding-inline-end: var(--gutter);
+}
diff --git a/apps/zui/src/css/main.scss b/apps/zui/src/css/main.scss
@@ -27,6 +27,7 @@
 
 @import "layouts";
 @import "compositions/flow";
+@import "compositions/gutter";
 @import "compositions/box";
 @import "compositions/sidebar";
 @import "compositions/region";
@@ -109,3 +110,4 @@
 @import "utilities/flex";
 @import "utilities/surfaces";
 @import "utilities/radius";
+@import "utilities/sizing";
diff --git a/apps/zui/src/css/settings/_colors.scss b/apps/zui/src/css/settings/_colors.scss
@@ -201,8 +201,8 @@
  * Shadows
  */
 :root {
-  --shadow-s: 0px 0px 3px 0px rgb(0 0 0 / 30%);
-  --shadow-m: 0px 3px 3px 6px rgb(0 0 0 / 30%);
+  --shadow-s: 0px 0px 1px 0px rgb(0 0 0 / 30%);
+  --shadow-m: 0px 0px 3px 0px rgb(0 0 0 / 30%);
   --shadow-l: 12px 12px 48px rgba(0, 0, 0, 0.45);
 }
 
diff --git a/apps/zui/src/css/utilities/_sizing.scss b/apps/zui/src/css/utilities/_sizing.scss
@@ -0,0 +1,7 @@
+$font-sizes: "-2", "-1", "0", "1", "2", "3", "4", "5";
+
+@each $size in $font-sizes {
+  .step-#{$size} {
+    font-size: var(--step-#{$size});
+  }
+}
diff --git a/apps/zui/src/domain/pools/operations.ts b/apps/zui/src/domain/pools/operations.ts
@@ -58,7 +58,7 @@ export const createSettings = createOperation(
 
 export const updateSettings = createOperation(
   "pools.updateSettings",
-  async ({main}, update: Update<PoolSetting>) => {
+  async ({main}, update: Update<PoolSetting, string>) => {
     main.store.dispatch(PoolSettings.update(update))
   }
 )
diff --git a/apps/zui/src/js/state/LakeStatuses/reducer.ts b/apps/zui/src/js/state/LakeStatuses/reducer.ts
@@ -1,4 +1,4 @@
-import produce from "immer"
+import {produce} from "immer"
 import {LakeStatusesAction, LakeStatusesState} from "./types"
 
 const init = (): LakeStatusesState => {
diff --git a/apps/zui/src/js/state/Loads/types.ts b/apps/zui/src/js/state/Loads/types.ts
@@ -12,4 +12,4 @@ export type LoadReference = {
   errors: string[]
 }
 
-export type LoadsState = EntityState<LoadReference>
+export type LoadsState = EntityState<LoadReference, string>
diff --git a/apps/zui/src/js/state/Modal/reducer.ts b/apps/zui/src/js/state/Modal/reducer.ts
@@ -1,5 +1,5 @@
 import {ModalAction, ModalState} from "./types"
-import produce from "immer"
+import {produce} from "immer"
 
 const init = (): ModalState => ({
   name: "",
diff --git a/apps/zui/src/js/state/Queries/actions.ts b/apps/zui/src/js/state/Queries/actions.ts
@@ -26,7 +26,7 @@ export default {
     type: "$QUERIES_REMOVE_ITEMS",
     itemIds,
   }),
-  editItem: (args: Update<Item>): QUERIES_EDIT_ITEM => ({
+  editItem: (args: Update<Item, string>): QUERIES_EDIT_ITEM => ({
     type: "$QUERIES_EDIT_ITEM",
     item: args.changes,
     itemId: args.id.toString(),
diff --git a/apps/zui/src/js/state/Queries/reducer.ts b/apps/zui/src/js/state/Queries/reducer.ts
@@ -1,5 +1,5 @@
 import {QueriesAction, QueriesState, Item} from "./types"
-import produce from "immer"
+import {produce} from "immer"
 import TreeModel from "tree-model"
 
 const itemToNode = (item: Item): TreeModel.Node<Item> =>
diff --git a/apps/zui/src/js/state/QueryVersions/reducer.ts b/apps/zui/src/js/state/QueryVersions/reducer.ts
@@ -36,7 +36,7 @@ export const reducer = createReducer({}, (builder) => {
 
   builder.addMatcher(
     ({type}) => type == tabs.remove.toString(),
-    (s, a) => {
+    (s, a: PayloadAction<string>) => {
       delete s[a.payload]
     }
   )
diff --git a/apps/zui/src/js/state/QueryVersions/types.ts b/apps/zui/src/js/state/QueryVersions/types.ts
@@ -1,7 +1,7 @@
 import {EntityState} from "@reduxjs/toolkit"
 import {QueryPin} from "../Editor/types"
 
-export type VersionsState = EntityState<QueryVersion>
+export type VersionsState = EntityState<QueryVersion, string>
 export type QueryVersionsState = {
   [queryId: string]: VersionsState
 }
diff --git a/apps/zui/src/js/state/SessionQueries/flows.ts b/apps/zui/src/js/state/SessionQueries/flows.ts
@@ -1,39 +1,4 @@
-import {nanoid} from "@reduxjs/toolkit"
-import {Query} from "src/js/state/Queries/types"
-import {Thunk} from "src/js/state/types"
-import QueryVersions from "src/js/state/QueryVersions"
-import {QueryVersion} from "src/js/state/QueryVersions/types"
-import {QueryModel} from "src/js/models/query-model"
 import SessionQueries from "."
-import {getNextCount} from "../Queries/helpers"
-import Current from "../Current"
-
-export const create =
-  (attrs: Partial<QueryVersion> = {}): Thunk<QueryModel> =>
-  (dispatch, getState) => {
-    const queryId = Current.getTabId(getState())
-    const queries = Object.values(SessionQueries.raw(getState()))
-    const query: Query = {
-      id: queryId,
-      name: `Session #${getNextCount(queries, "Session")}`,
-    }
-    const version: QueryVersion = {
-      value: "",
-      ...attrs,
-      ts: new Date().toISOString(),
-      version: nanoid(),
-      pins: [],
-    }
-
-    const exists = queries.find((q) => q.id === queryId)
-    !exists && dispatch(SessionQueries.set(query))
-
-    const Versions = QueryVersions.at(query.id)
-    dispatch(Versions.create(version))
-    const versions = Versions.all(getState())
-
-    return new QueryModel(query, versions, "session")
-  }
 
 export const init = (id: string) => (dispatch) => {
   dispatch(SessionQueries.set({id, name: "Query Session"}))
diff --git a/apps/zui/src/js/state/TabHistories/types.ts b/apps/zui/src/js/state/TabHistories/types.ts
@@ -5,4 +5,4 @@ export interface SerializedHistory {
   entries: string[]
 }
 
-export type TabHistoriesState = EntityState<SerializedHistory>
+export type TabHistoriesState = EntityState<SerializedHistory, string>
diff --git a/apps/zui/src/js/state/Tabs/reducer.ts b/apps/zui/src/js/state/Tabs/reducer.ts
@@ -66,7 +66,7 @@ const slice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addMatcher(isTabAction, (s, a) => {
+    builder.addMatcher(isTabAction, (s, a: any) => {
       const id = a.tabId || a.payload?.tabId || s.active
       if (!findTab(s, id)) return
 
diff --git a/apps/zui/src/js/state/entity-slice/create-entity-slice.test.ts b/apps/zui/src/js/state/entity-slice/create-entity-slice.test.ts
@@ -8,7 +8,7 @@ type StuffType = {
 
 const Stuff = createEntitySlice<StuffType>({
   name: "stuff",
-  select: (state: EntityState<StuffType>) => state,
+  select: (state: EntityState<StuffType, string>) => state,
   id: (stuff) => stuff.name,
   sort: (a, b) => (a.name > b.name ? 1 : -1),
 })
diff --git a/apps/zui/src/js/state/entity-slice/create-entity-slice.ts b/apps/zui/src/js/state/entity-slice/create-entity-slice.ts
diff --git a/apps/zui/src/js/state/entity-slice/create-nested-entity-slice.test.ts b/apps/zui/src/js/state/entity-slice/create-nested-entity-slice.test.ts
diff --git a/apps/zui/src/js/state/stores/create-main-store.ts b/apps/zui/src/js/state/stores/create-main-store.ts
diff --git a/apps/zui/src/js/state/stores/create-window-store.ts b/apps/zui/src/js/state/stores/create-window-store.ts
diff --git a/apps/zui/src/js/state/stores/ipc-redux-middleware.ts b/apps/zui/src/js/state/stores/ipc-redux-middleware.ts
diff --git a/apps/zui/src/js/state/stores/root-reducer.ts b/apps/zui/src/js/state/stores/root-reducer.ts
diff --git a/apps/zui/src/js/state/types.ts b/apps/zui/src/js/state/types.ts
diff --git a/apps/zui/src/views/right-pane/history/history-item.tsx b/apps/zui/src/views/right-pane/history/history-item.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
@@ -33,15 +33,13 @@ const BG = styled.button`
`33`	`33`	`&:hover:not(:disabled) {`
`34`	`34`	`background: var(--emphasis-bg);`
`35`	`35`	`svg {`
`36`		`- transform: scale(1.1);`
	`36`	`+ transform: scale(1.03);`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`&:active:not(:disabled) {`
`41`		`- background: var(--emphasis-bg-more);`
`42`		`- svg {`
`43`		`- transform: scale(1.05);`
`44`		`- }`
	`41`	`+ background: var(--emphasis-bg);`
	`42`	`+ transform: scale(0.99);`
`45`	`43`	`}`
`46`	`44`
`47`	`45`	`&.icon-label {`