upgrade react to v18 and other packages

.vscode/settings.json

@@ -1,22 +1,6 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "files.exclude": {
+  
-    ".vs": true,
-    ".vscode/**": true,
-    "*.trx": true,
-    "**/.DS_Store": true,
-    "**/.git": true,
-    "**/.hg": true,
-    "**/.svn": true,
-    "built/**": true,
-    "coverage/**": true,
-    "libs/**": true,
-    "node_modules/**": true,
-    "package-lock.json": true,
-    "quickstart/**": true,
-    "test/out/**": true,
-    "workers/libs/**": true
-  },
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
@@ -24,5 +8,8 @@
     "source.organizeImports": "explicit"
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

package.json

@@ -4,200 +4,270 @@
   "description": "Cosmos Explorer",
   "main": "index.js",
   "dependencies": {
-    "@azure/arm-cosmosdb": "9.1.0",
+    "@azure/arm-cosmosdb": "16.3.0",
     "@azure/cosmos": "4.5.0",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "4.5.0",
+    "@azure/identity": "4.10.1",
-    "@azure/msal-browser": "2.14.2",
+    "@azure/msal-browser": "4.24.0",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
+    "@babel/plugin-transform-class-properties": "^7.24.7",
-    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@babel/plugin-proposal-decorators": "7.28.0",
-    "@fluentui/react": "8.119.0",
+    "@fluentui/react": "8.123.6",
-    "@fluentui/react-components": "9.54.2",
+    "@fluentui/react-components": "9.70.0",
-    "@jupyterlab/services": "6.0.2",
+    "@jupyterlab/services": "7.4.9",
-    "@jupyterlab/terminal": "3.0.3",
+    "@jupyterlab/terminal": "4.4.9",
-    "@microsoft/applicationinsights-web": "2.6.1",
+    "@microsoft/applicationinsights-web": "3.3.10",
     "@nteract/commutable": "7.5.1",
-    "@nteract/connected-components": "6.8.2",
+    "@nteract/connected-components": "6.9.0",
     "@nteract/core": "15.1.9",
-    "@nteract/data-explorer": "8.0.3",
+    "@nteract/data-explorer": "8.2.12",
-    "@nteract/directory-listing": "2.0.6",
+    "@nteract/directory-listing": "2.1.0",
-    "@nteract/dropdown-menu": "1.0.1",
+    "@nteract/dropdown-menu": "1.1.9",
     "@nteract/editor": "10.1.12",
-    "@nteract/fixtures": "2.3.0",
+    "@nteract/fixtures": "2.3.19",
     "@nteract/iron-icons": "1.0.0",
-    "@nteract/jupyter-widgets": "2.0.0",
+    "@nteract/jupyter-widgets": "4.1.19",
     "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.6.0",
+    "@nteract/markdown": "4.6.2",
     "@nteract/monaco-editor": "3.2.2",
     "@nteract/octicons": "2.0.0",
-    "@nteract/outputs": "3.0.9",
+    "@nteract/outputs": "5.1.14",
-    "@nteract/presentational-components": "3.0.7",
+    "@nteract/presentational-components": "3.4.12",
-    "@nteract/stateful-components": "1.7.0",
+    "@nteract/stateful-components": "1.7.15",
-    "@nteract/styles": "2.0.2",
+    "@nteract/styles": "2.2.11",
-    "@nteract/transform-geojson": "5.1.8",
+    "@nteract/transform-geojson": "5.1.13",
     "@nteract/transform-model-debug": "5.0.1",
-    "@nteract/transform-plotly": "6.1.6",
+    "@nteract/transform-plotly": "7.0.1",
-    "@nteract/transform-vdom": "4.0.11",
+    "@nteract/transform-vdom": "4.0.15",
     "@nteract/transform-vega": "7.0.6",
-    "@octokit/rest": "17.9.2",
+    "@octokit/rest": "21.1.1",
     "@phosphor/widgets": "1.9.3",
-    "@testing-library/jest-dom": "6.4.6",
+    "@testing-library/jest-dom": "6.8.0",
-    "@types/lodash": "4.14.171",
+    "@types/lodash": "4.17.20",
-    "@types/mkdirp": "1.0.1",
+    "@types/mkdirp": "1.0.2",
-    "@types/node-fetch": "2.5.7",
+    "@types/node-fetch": "2.6.13",
-    "@xmldom/xmldom": "0.7.13",
+    "@xmldom/xmldom": "0.9.8",
     "@xterm/xterm": "5.5.0",
     "@xterm/addon-fit": "0.10.0",
-    "allotment": "1.20.2",
+    "allotment": "1.20.4",
-    "applicationinsights": "1.8.0",
+    "applicationinsights": "3.12.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.11.2",
+    "canvas": "3.2.0",
     "clean-webpack-plugin": "4.0.0",
     "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "13.0.1",
     "crossroads": "0.12.2",
-    "css-element-queries": "1.1.1",
+    "css-element-queries": "1.2.3",
-    "d3": "7.8.5",
+    "d3": "7.9.0",
-    "datatables.net-colreorder-dt": "1.7.0",
+    "datatables.net-colreorder-dt": "2.1.1",
-    "datatables.net-dt": "1.13.8",
+    "datatables.net-dt": "2.3.4",
-    "date-fns": "1.29.0",
+    "date-fns": "4.1.0",
-    "dayjs": "1.8.19",
+    "dayjs": "1.11.18",
     "dom-to-image": "2.6.0",
-    "dotenv": "8.2.0",
+    "dotenv": "17.2.3",
-    "eslint-plugin-jest": "27.4.2",
+    "eslint-plugin-jest": "28.14.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.37.5",
     "hasher": "1.2.0",
-    "html2canvas": "1.0.0-rc.5",
+    "html2canvas": "1.4.1",
-    "i18next": "23.11.5",
+    "i18next": "25.5.2",
-    "i18next-browser-languagedetector": "6.0.1",
+    "i18next-browser-languagedetector": "8.2.0",
-    "i18next-http-backend": "1.0.23",
+    "i18next-http-backend": "3.0.2",
-    "iframe-resizer-react": "1.1.0",
+    "iframe-resizer-react": "5.1.5",
-    "immer": "9.0.6",
+    "immer": "10.1.3",
     "immutable": "4.0.0-rc.12",
-    "is-ci": "2.0.0",
+    "is-ci": "4.1.0",
     "jquery": "3.7.1",
     "jquery-typeahead": "2.11.1",
-    "jquery-ui-dist": "1.13.2",
+    "jquery-ui-dist": "1.13.3",
     "knockout": "3.5.1",
-    "loader-utils": "2.0.3",
+    "loader-utils": "3.3.1",
-    "mkdirp": "1.0.4",
+    "mkdirp": "3.0.1",
-    "monaco-editor": "0.44.0",
+    "monaco-editor": "0.53.0",
     "ms": "2.1.3",
     "p-retry": "6.2.1",
-    "patch-package": "8.0.0",
+    "patch-package": "8.0.1",
-    "plotly.js-cartesian-dist-min": "1.52.3",
+    "plotly.js-cartesian-dist-min": "3.1.1",
     "post-robot": "10.0.42",
-    "q": "1.5.1",
+    "q": "2.0.3",
-    "react": "16.14.0",
+    "react": "18.2.0",
-    "react-animate-height": "2.0.8",
+    "react-animate-height": "3.2.3",
-    "react-dnd": "14.0.2",
+    "react-dnd": "16.0.1",
-    "react-dnd-html5-backend": "14.0.0",
+    "react-dnd-html5-backend": "16.0.1",
-    "react-dom": "16.14.0",
+    "react-dom": "18.2.0",
     "react-hotkeys": "2.0.0",
-    "react-i18next": "14.1.2",
+    "react-i18next": "16.0.0",
     "react-notification-system": "0.2.17",
-    "react-redux": "7.1.3",
+    "react-redux": "7.2.9",
     "react-splitter-layout": "4.0.0",
-    "react-string-format": "1.0.1",
+    "react-string-format": "1.2.0",
     "react-window": "1.8.10",
-    "react-youtube": "9.0.1",
+    "react-youtube": "10.1.0",
-    "reflect-metadata": "0.1.13",
+    "reflect-metadata": "0.2.2",
-    "rx-jupyter": "5.5.12",
+    "rx-jupyter": "5.5.21",
-    "sanitize-html": "2.3.3",
+    "sanitize-html": "2.17.0",
-    "shell-quote": "1.7.3",
+    "shell-quote": "1.8.3",
-    "styled-components": "5.0.1",
+    "styled-components": "6.1.19",
-    "swr": "0.4.0",
+    "swr": "2.3.6",
-    "terser-webpack-plugin": "5.3.9",
+    "terser-webpack-plugin": "5.3.14",
-    "tinykeys": "2.1.0",
+    "tinykeys": "3.0.0",
-    "underscore": "1.12.1",
+    "underscore": "1.13.7",
-    "utility-types": "3.10.0",
+    "utility-types": "3.11.0",
-    "zustand": "3.5.0"
+    "zustand": "5.0.8"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.28.4",
-    "@babel/preset-env": "7.24.7",
+    "@babel/preset-env": "7.28.3",
-    "@babel/preset-react": "7.24.7",
+    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.24.7",
+    "@babel/preset-typescript": "7.27.1",
-    "@playwright/test": "1.49.1",
+    "@playwright/test": "1.55.1",
-    "@testing-library/react": "11.2.3",
+    "@testing-library/react": "16.3.0",
-    "@types/applicationinsights-js": "1.0.7",
+    "@types/applicationinsights-js": "1.0.9",
-    "@types/codemirror": "0.0.56",
+    "@types/codemirror": "5.60.16",
-    "@types/crossroads": "0.0.30",
+    "@types/crossroads": "0.0.33",
-    "@types/d3": "5.9.2",
+    "@types/d3": "7.4.3",
     "@types/datatables.net": "1.10.28",
     "@types/datatables.net-colreorder": "1.4.5",
-    "@types/dom-to-image": "2.6.2",
+    "@types/dom-to-image": "2.6.7",
-    "@types/enzyme": "3.10.12",
+    "@types/enzyme": "3.10.19",
     "@types/enzyme-adapter-react-16": "1.0.9",
-    "@types/hasher": "0.0.31",
+    "@types/hasher": "0.0.35",
-    "@types/jest": "29.5.12",
+    "@types/jest": "30.0.0",
-    "@types/jquery": "3.5.29",
+    "@types/jquery": "3.5.33",
-    "@types/node": "12.11.1",
+    "@types/node": "24.6.0",
-    "@types/post-robot": "10.0.1",
+    "@types/post-robot": "10.0.6",
-    "@types/q": "1.5.1",
+    "@types/q": "1.5.8",
-    "@types/react": "17.0.44",
+    "@types/react": "18.3.7",
-    "@types/react-dom": "17.0.15",
+    "@types/react-dom": "18.3.7",
-    "@types/react-notification-system": "0.2.39",
+    "@types/react-notification-system": "0.2.46",
-    "@types/react-redux": "7.1.7",
+    "@types/react-redux": "7.1.34",
-    "@types/react-splitter-layout": "3.0.1",
+    "@types/react-splitter-layout": "4.0.0",
     "@types/react-window": "1.8.8",
-    "@types/sanitize-html": "1.27.2",
+    "@types/sanitize-html": "2.16.0",
-    "@types/sinon": "2.3.3",
+    "@types/sinon": "17.0.4",
-    "@types/styled-components": "5.1.1",
+    "@types/styled-components": "5.1.34",
-    "@types/underscore": "1.7.36",
+    "@types/underscore": "1.13.0",
-    "@types/youtube-player": "5.5.6",
+    "@types/youtube-player": "5.5.11",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/eslint-plugin": "8.45.0",
-    "@typescript-eslint/parser": "6.7.4",
+    "@typescript-eslint/parser": "8.45.0",
-    "@webpack-cli/serve": "2.0.5",
+    "@webpack-cli/serve": "3.0.1",
-    "babel-jest": "29.7.0",
+    "babel-jest": "30.2.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "10.0.0",
-    "buffer": "5.1.0",
+    "buffer": "6.0.3",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
     "create-file-webpack": "1.0.2",
-    "css-loader": "6.8.1",
+    "css-loader": "7.1.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.8",
     "enzyme-to-json": "3.6.2",
-    "eslint": "8.50.0",
+    "eslint": "9.36.0",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "5.2.0",
-    "fast-glob": "3.2.5",
+    "fast-glob": "3.3.3",
-    "fs-extra": "7.0.0",
+    "fs-extra": "11.3.2",
     "html-inline-css-webpack-plugin": "1.11.2",
-    "html-loader": "5.0.0",
+    "html-loader": "5.1.0",
-    "html-webpack-plugin": "5.5.3",
+    "html-webpack-plugin": "5.6.4",
-    "jest": "29.7.0",
+    "jest": "30.2.0",
     "jest-canvas-mock": "2.5.2",
-    "jest-circus": "29.7.0",
+    "jest-circus": "30.2.0",
-    "jest-environment-jsdom": "29.7.0",
+    "jest-environment-jsdom": "30.2.0",
     "jest-html-loader": "1.0.0",
     "jest-react-hooks-shallow": "1.5.1",
     "jest-trx-results-processor": "3.0.2",
-    "less": "3.8.1",
+    "less": "4.4.1",
-    "less-loader": "11.1.3",
+    "less-loader": "12.3.0",
     "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "2.1.0",
+    "mini-css-extract-plugin": "2.9.4",
     "monaco-editor-webpack-plugin": "7.1.0",
-    "node-fetch": "2.6.7",
+    "node-fetch": "3.3.2",
-    "prettier": "3.0.3",
+    "prettier": "3.6.2",
     "process": "0.11.10",
     "querystring-es3": "0.2.1",
-    "raw-loader": "0.5.1",
+    "raw-loader": "4.0.2",
     "react-dev-utils": "12.0.1",
-    "rimraf": "3.0.0",
+    "rimraf": "5.0.10",
-    "sinon": "3.2.1",
+    "sinon": "21.0.0",
-    "style-loader": "0.23.0",
+    "style-loader": "4.0.0",
-    "ts-loader": "9.2.4",
+    "ts-loader": "9.5.4",
-    "typedoc": "0.26.2",
+    "typedoc": "0.28.13",
-    "typescript": "4.9.5",
+    "typescript": "5.9.2",
     "url-loader": "4.1.1",
-    "wait-on": "4.0.2",
+    "wait-on": "8.0.5",
-    "webpack": "5.88.2",
+    "webpack": "5.102.0",
-    "webpack-bundle-analyzer": "4.9.1",
+    "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "5.1.4",
+    "webpack-cli": "6.0.1",
-    "webpack-dev-server": "4.15.2"
+    "webpack-dev-server": "5.2.2"
+  },
+  "overrides": {
+    "@nteract/connected-components": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/core": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/data-explorer": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/dropdown-menu": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/editor": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/iron-icons": {
+      "react": "18.2.0"
+    },
+    "@nteract/jupyter-widgets": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/logos": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/markdown": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/monaco-editor": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/octicons": {
+      "react": "18.2.0"
+    },
+    "@nteract/outputs": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/presentational-components": {
+      "react": "18.2.0"
+    },
+    "@nteract/stateful-components": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    },
+    "@nteract/transform-geojson": {
+      "react": "18.2.0"
+    },
+    "@nteract/transform-model-debug": {
+      "react": "18.2.0"
+    },
+    "@nteract/transform-plotly": {
+      "react": "18.2.0"
+    },
+    "@nteract/transform-vdom": {
+      "react": "18.2.0"
+    },
+    "@nteract/transform-vega": {
+      "react": "18.2.0"
+    }
   },
   "scripts": {
     "postinstall": "patch-package",

patches/datatables.net-colreorder+2.1.1.patch

@@ -6,8 +6,8 @@ index e5dc283..1930c2b 100644
  
  /// <reference types="jquery" />
  
--import DataTables, {Api} from 'datatables.net';
+-import DataTables, {Api, ColumnSelector} from 'datatables.net';
-+import DataTables, { Api } from 'datatables.net';
++import DataTables, { Api, ColumnSelector } from 'datatables.net';
 
  export default DataTables;
  
@@ -17,6 +17,6 @@ index e5dc283..1930c2b 100644
  			 */
 +      // Ignore this error: error TS7013: Construct signature, which lacks return-type annotation, implicitly has an 'any' return type.
 +      // @ts-ignore
- 			new (dt: Api<any>, settings: boolean | ConfigColReorder);
+ 			new (dt: Api<any>, settings: boolean | ConfigColReorder): DataTablesStatic['ColReorder'];
  
  			/**

src/Explorer/Controls/Dialog.tsx

@@ -16,7 +16,7 @@ import {
   TextField,
 } from "@fluentui/react";
 import React, { FC, useEffect } from "react";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 export interface DialogState {
   visible: boolean;
@@ -38,7 +38,7 @@ export interface DialogState {
   showOkModalDialog: (title: string, subText: string, linkProps?: LinkProps) => void;
 }
 
-export const useDialog: UseStore<DialogState> = create((set, get) => ({
+export const useDialog = create<DialogState>((set, get) => ({
   visible: false,
   openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
   closeDialog: () =>

src/Explorer/Explorer.tsx

@@ -23,7 +23,7 @@ import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
-import shallow from "zustand/shallow";
+import { shallow } from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
@@ -112,8 +112,8 @@ export default class Explorer {
 
     this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
     useNotebook.subscribe(
-      () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount,
+      () => this.refreshCommandBarButtons(),
     );
 
     this.queriesClient = new QueriesClient(this);
@@ -136,13 +136,13 @@ export default class Explorer {
     });
 
     useTabs.subscribe(
+      (state) => state.openedTabs,
       (openedTabs: TabsBase[]) => {
         if (openedTabs.length === 0) {
           useSelectedNode.getState().setSelectedNode(undefined);
           useCommandBar.getState().setContextButtons([]);
         }
-      },
+      }
-      (state) => state.openedTabs,
     );
 
     this.isTabsContentExpanded = ko.observable(false);
@@ -170,9 +170,9 @@ export default class Explorer {
     );
 
     useNotebook.subscribe(
-      async () => this.initiateAndRefreshNotebookList(),
       (state) => [state.isNotebookEnabled, state.isRefreshed],
-      shallow,
+      async () => this.initiateAndRefreshNotebookList(),
+      { equalityFn: shallow },
     );
 
     this.resourceTree = new ResourceTreeAdapter(this);

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -10,7 +10,7 @@ import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { isFabric } from "Platform/Fabric/FabricUtil";
 import { userContext } from "UserContext";
 import * as React from "react";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/StyleConstants";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
@@ -30,7 +30,7 @@ export interface CommandBarStore {
   setIsHidden: (isHidden: boolean) => void;
 }
 
-export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
+export const useCommandBar = create<CommandBarStore>((set) => ({
   contextButtons: [] as CommandButtonComponentProps[],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
   isHidden: false,

src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx

@@ -1,5 +1,5 @@
 import { AppState, ContentRef, selectors } from "@nteract/core";
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import React from "react";
 import { connect } from "react-redux";
 import styled from "styled-components";
@@ -59,7 +59,7 @@ export class StatusBar extends React.Component<Props> {
         <Bar data-test="notebookStatusBar">
           <RightStatus>
             {this.props.lastSaved ? (
-              <p data-test="saveStatus"> Last saved {distanceInWordsToNow(this.props.lastSaved)} </p>
+              <p data-test="saveStatus"> Last saved {formatDistanceToNow(this.props.lastSaved)} ago </p>
             ) : (
               <p> Not saved yet </p>
             )}

src/Explorer/Notebook/useNotebook.ts

@@ -1,7 +1,8 @@
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { PhoenixClient } from "Phoenix/PhoenixClient";
 import { cloneDeep } from "lodash";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from 'zustand/middleware';
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
 import { ConnectionStatusType, HttpStatusCodes } from "../../Common/Constants";
@@ -66,40 +67,42 @@ interface NotebookState {
   setIsPhoenixFeatures: (isPhoenixFeatures: boolean) => void;
 }
 
-export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
+export const useNotebook = create<NotebookState>()(
+  subscribeWithSelector(
+    (set, get) => ({
       isNotebookEnabled: false,
       isNotebooksEnabledForAccount: false,
       notebookServerInfo: {
-    notebookServerEndpoint: undefined,
+        notebookServerEndpoint: "",
-    authToken: undefined,
+        authToken: "",
-    forwardingId: undefined,
+        forwardingId: "",
       },
       sparkClusterConnectionInfo: {
-    userName: undefined,
+        userName: "",
-    password: undefined,
+        password: "",
-    endpoints: [],
+        endpoints: [] as DataModels.SparkClusterEndpoint[],
       },
       isSynapseLinkUpdating: false,
-  memoryUsageInfo: undefined,
+      memoryUsageInfo: undefined as DataModels.MemoryUsageInfo,
       isShellEnabled: false,
       notebookBasePath: Constants.Notebook.defaultBasePath,
       isInitializingNotebooks: false,
-  myNotebooksContentRoot: undefined,
+      myNotebooksContentRoot: undefined as NotebookContentItem,
-  gitHubNotebooksContentRoot: undefined,
+      gitHubNotebooksContentRoot: undefined as NotebookContentItem,
-  galleryContentRoot: undefined,
+      galleryContentRoot: undefined as NotebookContentItem,
       connectionInfo: {
         status: ConnectionStatusType.Connect,
       },
-  notebookFolderName: undefined,
+      notebookFolderName: "",
       isAllocating: false,
       isRefreshed: false,
       containerStatus: {
         status: undefined,
         durationLeftInMinutes: undefined,
         phoenixServerInfo: undefined,
-  },
+      } as ContainerInfo,
-  isPhoenixNotebooks: undefined,
+      isPhoenixNotebooks: undefined as boolean,
-  isPhoenixFeatures: undefined,
+      isPhoenixFeatures: undefined as boolean,
       setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
       setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
       setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -332,4 +335,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       },
       setIsPhoenixNotebooks: (isPhoenixNotebooks: boolean) => set({ isPhoenixNotebooks: isPhoenixNotebooks }),
       setIsPhoenixFeatures: (isPhoenixFeatures: boolean) => set({ isPhoenixFeatures: isPhoenixFeatures }),
-}));
+    })
+  )
+);

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -51,7 +51,7 @@ import { useClientWriteEnabled } from "hooks/useClientWriteEnabled";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 import Explorer from "../../Explorer";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
@@ -65,8 +65,6 @@ export interface DataPlaneRbacState {
   setAadDataPlaneUpdated: (aadTokenUpdated: boolean) => void;
 }
 
-type DataPlaneRbacStore = UseStore<Partial<DataPlaneRbacState>>;
-
 const useStyles = makeStyles({
   bulletList: {
     listStyleType: "disc",
@@ -100,7 +98,7 @@ const useStyles = makeStyles({
   },
 });
 
-export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
+export const useDataPlaneRbac = create<Partial<DataPlaneRbacState>>(() => ({
   dataPlaneRbacEnabled: false,
 }));
 

src/Explorer/QueryCopilot/QueryCopilotContext.tsx

@@ -1,12 +1,14 @@
 import { MinimalQueryIterator } from "Common/IteratorUtilities";
 import QueryError from "Common/QueryError";
+import * as DataModels from "Contracts/DataModels";
 import { QueryResults } from "Contracts/ViewModels";
 import { CopilotMessage } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { guid } from "Explorer/Tables/Utilities";
 import { QueryCopilotState } from "hooks/useQueryCopilot";
 
 import React, { createContext, useContext, useState } from "react";
-import create from "zustand";
+import { create } from "zustand";
+
 const context = createContext(null);
 const useCopilotStore = (): Partial<QueryCopilotState> => useContext(context);
 
@@ -24,12 +26,12 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       isGeneratingQuery: false,
       isGeneratingExplanation: false,
       isExecuting: false,
-      dislikeQuery: undefined,
+      dislikeQuery: undefined as boolean,
       showCallout: false,
       showSamplePrompts: false,
-      queryIterator: undefined,
+      queryIterator: undefined as MinimalQueryIterator,
-      queryResults: undefined,
+      queryResults: undefined as QueryResults,
-      errors: [],
+      errors: [] as QueryError[],
       isSamplePromptsOpen: false,
       showPromptTeachingBubble: true,
       showDeletePopup: false,
@@ -41,7 +43,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       wasCopilotUsed: false,
       showWelcomeSidebar: true,
       showCopilotSidebar: false,
-      chatMessages: [],
+      chatMessages: [] as CopilotMessage[],
       shouldIncludeInMessages: true,
       showExplanationBubble: false,
       isAllocatingContainer: false,
@@ -86,7 +88,7 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
       },
 
       resetQueryCopilotStates: () => {
-        set((state) => ({
+        set((state: QueryCopilotState) => ({
           ...state,
           generatedQuery: "",
           likeQuery: false,
@@ -99,11 +101,11 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
           isGeneratingQuery: false,
           isGeneratingExplanation: false,
           isExecuting: false,
-          dislikeQuery: undefined,
+          dislikeQuery: undefined as boolean,
           showCallout: false,
           showSamplePrompts: false,
-          queryIterator: undefined,
+          queryIterator: undefined as MinimalQueryIterator,
-          queryResults: undefined,
+          queryResults: undefined as QueryResults,
           errorMessage: "",
           isSamplePromptsOpen: false,
           showPromptTeachingBubble: true,
@@ -115,19 +117,19 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
           generatedQueryComments: "",
           wasCopilotUsed: false,
           showCopilotSidebar: false,
-          chatMessages: [],
+          chatMessages: [] as CopilotMessage[],
           shouldIncludeInMessages: true,
           showExplanationBubble: false,
           notebookServerInfo: {
             notebookServerEndpoint: undefined,
             authToken: undefined,
             forwardingId: undefined,
-          },
+          } as DataModels.NotebookWorkspaceConnectionInfo,
           containerStatus: {
             status: undefined,
             durationLeftInMinutes: undefined,
             phoenixServerInfo: undefined,
-          },
+          } as DataModels.ContainerInfo,
           isAllocatingContainer: false,
         }));
       },
@@ -137,3 +139,4 @@ const CopilotProvider = ({ children }: { children: React.ReactNode }): JSX.Eleme
 };
 
 export { CopilotProvider, useCopilotStore };
+

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -77,39 +77,39 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     this.subscriptions.push(
       {
         dispose: useNotebook.subscribe(
-          () => this.setState({}),
           (state) => state.isNotebookEnabled,
+          () => this.setState({}),
         ),
       },
       { dispose: useSelectedNode.subscribe(() => this.setState({})) },
       {
         dispose: useCarousel.subscribe(
-          () => this.setState({}),
           (state) => state.showCoachMark,
+          () => this.setState({}),
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => this.setState({}),
           (state) => state.showPostgreTeachingBubble,
+          () => this.setState({}),
         ),
       },
       {
         dispose: usePostgres.subscribe(
-          () => this.setState({}),
           (state) => state.showResetPasswordBubble,
+          () => this.setState({}),
         ),
       },
       {
         dispose: useDatabases.subscribe(
-          () => this.setState({}),
           (state) => state.sampleDataResourceTokenCollection,
+          () => this.setState({}),
         ),
       },
       {
         dispose: useQueryCopilot.subscribe(
-          () => this.setState({}),
           (state) => state.copilotEnabled,
+          () => this.setState({}),
         ),
       },
     );

src/Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent.tsx

@@ -1,7 +1,7 @@
 import { FitAddon } from "@xterm/addon-fit";
 import { Terminal } from "@xterm/xterm";
+import "@xterm/xterm/css/xterm.css";
 import React, { useEffect, useRef } from "react";
-import "xterm/css/xterm.css";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 import { TerminalKind } from "../../../Contracts/ViewModels";
 import { startCloudShellTerminal } from "./CloudShellTerminalCore";

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -44,8 +44,8 @@ export default class NotebookTabV2 extends NotebookTabBase {
     this.container = options.container;
     this.notebookPath = ko.observable(options.notebookContentItem.path);
     useNotebook.subscribe(
-      () => logConsoleInfo("New notebook server info received."),
       (state) => state.notebookServerInfo,
+      () => logConsoleInfo("New notebook server info received."),
     );
     this.notebookComponentAdapter = new NotebookComponentAdapter({
       contentItem: options.notebookContentItem,
@@ -165,7 +165,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       {
         iconSrc: null,
         iconAlt: kernelLabel,
-        onCommandClick: () => {},
+        onCommandClick: () => { },
         commandButtonLabel: null,
         hasPopup: false,
         disabled: availableKernels.length < 1,
@@ -276,7 +276,7 @@ export default class NotebookTabV2 extends NotebookTabBase {
       {
         iconSrc: null,
         iconAlt: null,
-        onCommandClick: () => {},
+        onCommandClick: () => { },
         commandButtonLabel: null,
         ariaLabel: cellTypeLabel,
         hasPopup: false,

src/Explorer/Tree/ResourceTree.tsx

@@ -16,7 +16,6 @@ import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import { useEffect, useMemo } from "react";
-import shallow from "zustand/shallow";
 import Explorer from "../Explorer";
 import { useNotebook } from "../Notebook/useNotebook";
 
@@ -38,12 +37,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ explorer }: Resource
   const [openItems, setOpenItems] = React.useState<TreeItemValue[]>([]);
   const treeStyles = useTreeStyles();
 
-  const { isNotebookEnabled } = useNotebook(
+  const isNotebookEnabled = useNotebook((state) => state.isNotebookEnabled)
-    (state) => ({
-      isNotebookEnabled: state.isNotebookEnabled,
-    }),
-    shallow,
-  );
   
   // We intentionally avoid using a state selector here because we want to re-render the tree if the active tab changes.
   const { refreshActiveTab } = useTabs();

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -14,7 +14,6 @@ import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { IPinnedRepo } from "../../Juno/JunoClient";
@@ -58,12 +57,12 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
     useSelectedNode.subscribe(() => this.triggerRender());
     useTabs.subscribe(
-      () => this.triggerRender(),
       (state) => state.activeTab,
+      () => this.triggerRender(),
     );
     useNotebook.subscribe(
-      () => this.triggerRender(),
       (state) => state.isNotebookEnabled,
+      () => this.triggerRender(),
     );
 
     useDatabases.subscribe(() => this.triggerRender());

src/Explorer/useDatabases.ts

@@ -1,5 +1,6 @@
 import _ from "underscore";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import * as Constants from "../Common/Constants";
 import * as ViewModels from "../Contracts/ViewModels";
 import { userContext } from "../UserContext";
@@ -26,10 +27,12 @@ interface DatabasesState {
   validateCollectionId: (databaseId: string, collectionId: string) => Promise<boolean>;
 }
 
-export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
+export const useDatabases = create<DatabasesState>()(
-  databases: [],
+  subscribeWithSelector(
-  resourceTokenCollection: undefined,
+    (set, get) => ({
-  sampleDataResourceTokenCollection: undefined,
+      databases: [] as ViewModels.Database[],
+      resourceTokenCollection: undefined as ViewModels.CollectionBase,
+      sampleDataResourceTokenCollection: undefined as ViewModels.CollectionBase,
       updateDatabase: (updatedDatabase: ViewModels.Database) =>
         set((state) => {
           const updatedDatabases = state.databases.map((database: ViewModels.Database) => {
@@ -165,4 +168,6 @@ export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
         await database.loadCollections();
         return !database.collections().some((collection) => collection.id() === collectionId);
       },
-}));
+    })
+  )
+);

src/Explorer/useSelectedNode.ts

@@ -1,6 +1,6 @@
 import { ConnectionStatusType, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 import * as ViewModels from "../Contracts/ViewModels";
 import { useTabs } from "../hooks/useTabs";
 export interface SelectedNodeState {
@@ -17,7 +17,7 @@ export interface SelectedNodeState {
   isQueryCopilotCollectionSelected: () => boolean;
 }
 
-export const useSelectedNode: UseStore<SelectedNodeState> = create((set, get) => ({
+export const useSelectedNode = create<SelectedNodeState>((set, get) => ({
   selectedNode: undefined,
   setSelectedNode: (node: ViewModels.TreeNode) => set({ selectedNode: node }),
   isDatabaseNodeOrNoneSelected: (): boolean => {

src/KeyboardShortcuts.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { PropsWithChildren, useEffect } from "react";
 import { KeyBindingMap, tinykeys } from "tinykeys";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 /**
  * Represents a keyboard shortcut handler.
@@ -126,7 +126,7 @@ export const clearKeyboardActionGroup = (group: KeyboardActionGroup) => {
   useKeyboardActionHandlers.getState().setHandlers(group, {});
 };
 
-const useKeyboardActionHandlers: UseStore<KeyboardShortcutState> = create((set, get) => ({
+const useKeyboardActionHandlers = create<KeyboardShortcutState>((set, get) => ({
   allHandlers: {},
   groups: {},
   setHandlers: (group: KeyboardActionGroup, handlers: KeyboardHandlerMap) => {

src/hooks/useCarousel.ts

@@ -1,4 +1,5 @@
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 
 interface CarouselState {
   shouldOpen: boolean;
@@ -9,11 +10,15 @@ interface CarouselState {
   setShowCopilotCarousel: (showCopilotCarousel: boolean) => void;
 }
 
-export const useCarousel: UseStore<CarouselState> = create((set) => ({
+export const useCarousel = create<CarouselState>()(
+  subscribeWithSelector(
+    (set) => ({
       shouldOpen: false,
       showCoachMark: false,
       showCopilotCarousel: false,
       setShouldOpen: (shouldOpen: boolean) => set({ shouldOpen }),
       setShowCoachMark: (showCoachMark: boolean) => set({ showCoachMark }),
       setShowCopilotCarousel: (showCopilotCarousel: boolean) => set({ showCopilotCarousel }),
-}));
+    })
+  )
+);

src/hooks/useClientWriteEnabled.ts

@@ -1,10 +1,10 @@
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 interface ClientWriteEnabledState {
   clientWriteEnabled: boolean;
   setClientWriteEnabled: (writeEnabled: boolean) => void;
 }
 
-export const useClientWriteEnabled: UseStore<ClientWriteEnabledState> = create((set) => ({
+export const useClientWriteEnabled = create<ClientWriteEnabledState>((set) => ({
   clientWriteEnabled: true,
   setClientWriteEnabled: (clientWriteEnabled: boolean) => set({ clientWriteEnabled }),
 }));

src/hooks/useDataTransferJobs.tsx

@@ -1,6 +1,6 @@
 import { getDataTransferJobs } from "Common/dataAccess/dataTransfers";
 import { DataTransferJobGetResults } from "Utils/arm/generatedClients/dataTransferService/types";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 export interface DataTransferJobsState {
   dataTransferJobs: DataTransferJobGetResults[];
@@ -9,9 +9,7 @@ export interface DataTransferJobsState {
   setPollingDataTransferJobs: (pollingDataTransferJobs: Set<string>) => void;
 }
 
-type DataTransferJobStore = UseStore<DataTransferJobsState>;
+export const useDataTransferJobs = create<DataTransferJobsState>((set) => ({
-
-export const useDataTransferJobs: DataTransferJobStore = create((set) => ({
   dataTransferJobs: [],
   pollingDataTransferJobs: new Set<string>(),
   setDataTransferJobs: (dataTransferJobs: DataTransferJobGetResults[]) => set({ dataTransferJobs }),

src/hooks/useNotebookSnapshotStore.ts

@@ -1,4 +1,4 @@
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 export interface NotebookSnapshotHooks {
   snapshot?: string;
@@ -7,7 +7,7 @@ export interface NotebookSnapshotHooks {
   setError: (error: string) => void;
 }
 
-export const useNotebookSnapshotStore: UseStore<NotebookSnapshotHooks> = create((set) => ({
+export const useNotebookSnapshotStore = create<NotebookSnapshotHooks>((set) => ({
   snapshot: undefined,
   error: undefined,
   setSnapshot: (imageSrc: string) => set((state) => ({ ...state, snapshot: imageSrc })),

src/hooks/useNotificationConsole.ts

@@ -1,4 +1,4 @@
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 
 export interface NotificationConsoleState {
@@ -15,7 +15,7 @@ export interface NotificationConsoleState {
   setConsoleAnimationFinished: (consoleAnimationFinished: boolean) => void;
 }
 
-export const useNotificationConsole: UseStore<NotificationConsoleState> = create((set) => ({
+export const useNotificationConsole = create<NotificationConsoleState>((set) => ({
   isExpanded: false,
   consoleData: undefined,
   inProgressConsoleDataIdToBeDeleted: "",

src/hooks/usePostgres.ts

@@ -1,4 +1,5 @@
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 
 interface TeachingBubbleState {
   showPostgreTeachingBubble: boolean;
@@ -7,9 +8,13 @@ interface TeachingBubbleState {
   setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => void;
 }
 
-export const usePostgres: UseStore<TeachingBubbleState> = create((set) => ({
+export const usePostgres = create<TeachingBubbleState>()(
+  subscribeWithSelector(
+    (set) => ({
       showPostgreTeachingBubble: false,
       showResetPasswordBubble: false,
       setShowPostgreTeachingBubble: (showPostgreTeachingBubble: boolean) => set({ showPostgreTeachingBubble }),
       setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => set({ showResetPasswordBubble }),
-}));
+    })
+  )
+);

src/hooks/useQueryCopilot.ts

@@ -4,7 +4,8 @@ import { QueryResults } from "Contracts/ViewModels";
 import { CopilotMessage, CopilotSchemaAllocationInfo } from "Explorer/QueryCopilot/Shared/QueryCopilotInterfaces";
 import { guid } from "Explorer/Tables/Utilities";
 import { useTabs } from "hooks/useTabs";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import * as DataModels from "../Contracts/DataModels";
 import { ContainerInfo } from "../Contracts/DataModels";
 
@@ -96,9 +97,9 @@ export interface QueryCopilotState {
   resetQueryCopilotStates: () => void;
 }
 
-type QueryCopilotStore = UseStore<Partial<QueryCopilotState>>;
+export const useQueryCopilot = create<Partial<QueryCopilotState>>()(
-
+  subscribeWithSelector(
-export const useQueryCopilot: QueryCopilotStore = create((set) => ({
+    (set) => ({
       copilotEnabled: false,
       copilotUserDBEnabled: false,
       copilotSampleDBEnabled: false,
@@ -110,15 +111,15 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
       correlationId: "",
       query: "SELECT * FROM c",
       selectedQuery: "",
-  isGeneratingQuery: null,
+      isGeneratingQuery: null as boolean,
       isGeneratingExplanation: false,
       isExecuting: false,
-  dislikeQuery: undefined,
+      dislikeQuery: undefined as (boolean | undefined),
       showCallout: false,
       showSamplePrompts: false,
-  queryIterator: undefined,
+      queryIterator: undefined as MinimalQueryIterator | undefined,
-  queryResults: undefined,
+      queryResults: undefined as QueryResults | undefined,
-  errors: [],
+      errors: [] as QueryError[],
       isSamplePromptsOpen: false,
       showDeletePopup: false,
       showFeedbackBar: false,
@@ -129,23 +130,23 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
       wasCopilotUsed: false,
       showWelcomeSidebar: true,
       showCopilotSidebar: false,
-  chatMessages: [],
+      chatMessages: [] as CopilotMessage[],
       shouldIncludeInMessages: true,
       showExplanationBubble: false,
       notebookServerInfo: {
         notebookServerEndpoint: undefined,
         authToken: undefined,
         forwardingId: undefined,
-  },
+      } as DataModels.NotebookWorkspaceConnectionInfo,
       containerStatus: {
         status: undefined,
         durationLeftInMinutes: undefined,
         phoenixServerInfo: undefined,
-  },
+      } as ContainerInfo,
       schemaAllocationInfo: {
         databaseId: undefined,
         containerId: undefined,
-  },
+      } as CopilotSchemaAllocationInfo,
       isAllocatingContainer: false,
       copilotEnabledforExecution: false,
 
@@ -256,4 +257,6 @@ export const useQueryCopilot: QueryCopilotStore = create((set) => ({
           isAllocatingContainer: false,
         }));
       },
-}));
+    })
+  )
+);

src/hooks/useSidePanel.ts

@@ -1,4 +1,4 @@
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 export interface SidePanelState {
   isOpen: boolean;
@@ -9,7 +9,7 @@ export interface SidePanelState {
   closeSidePanel: () => void;
   getRef?: React.RefObject<HTMLElement>; // Optional ref for focusing the last element.
 }
-export const useSidePanel: UseStore<SidePanelState> = create((set) => ({
+export const useSidePanel = create<SidePanelState>((set) => ({
   isOpen: false,
   panelWidth: "440px",
   openSidePanel: (headerText, panelContent, panelWidth = "440px") =>

src/hooks/useTabs.ts

@@ -7,7 +7,8 @@ import {
   OPEN_TABS_SUBCOMPONENT_NAME,
   saveSubComponentState,
 } from "Shared/AppStatePersistenceUtility";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import * as ViewModels from "../Contracts/ViewModels";
 import { CollectionTabKind } from "../Contracts/ViewModels";
 import NotebookTabV2 from "../Explorer/Tabs/NotebookV2Tab";
@@ -51,7 +52,9 @@ export enum ReactTabKind {
   QueryCopilot,
 }
 
-export const useTabs: UseStore<TabsState> = create((set, get) => ({
+export const useTabs = create<TabsState>()(
+  subscribeWithSelector(
+    (set, get) => ({
       openedTabs: [] as TabsBase[],
       openedReactTabs: [ReactTabKind.Home],
       activeTab: undefined as TabsBase,
@@ -241,4 +244,6 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
           openTabsStates,
         );
       },
-}));
+    })
+  )
+);

src/hooks/useTeachingBubble.ts

@@ -1,5 +1,5 @@
 import { Collection } from "Contracts/ViewModels";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 interface TeachingBubbleState {
   step: number;
@@ -12,7 +12,7 @@ interface TeachingBubbleState {
   setSampleCollection: (sampleCollection: Collection) => void;
 }
 
-export const useTeachingBubble: UseStore<TeachingBubbleState> = create((set) => ({
+export const useTeachingBubble = create<TeachingBubbleState>((set) => ({
   step: 1,
   isSampleDBExpanded: false,
   isDocumentsTabOpened: false,

src/hooks/useTerminal.ts

@@ -1,5 +1,5 @@
 import postRobot from "post-robot";
-import create, { UseStore } from "zustand";
+import { create } from "zustand";
 
 interface TerminalState {
   terminalWindow: Window;
@@ -7,7 +7,7 @@ interface TerminalState {
   sendMessage: (message: string) => void;
 }
 
-export const useTerminal: UseStore<TerminalState> = create((set, get) => ({
+export const useTerminal = create<TerminalState>((set, get) => ({
   terminalWindow: undefined,
   setTerminal: (terminalWindow: Window) => {
     set({ terminalWindow });