feat: Embed widget loading workspace settings (#2068)

Fixes #1964. Also removed a bunch of unnecessary code in `AppInit` where
we were using the redux `connect` API with a functional component
instead of just using the redux hooks

Note that even though this moves a bunch of files to `app-utils`, I
don't consider it breaking since they are being moved out of
`code-studio`. They wouldn't be consumed by anything else since
`code-studio` is published as a bundle.

Due to local storage requiring a port match, this can only be tested w/
the local server in 2 steps (this should be fine in prod since the app
and embed-widget run on the same port there).

1. Start the dev server and go to the app
2. Run some code to create a table.
3. Change user formatting settings (e.g. show timezones and have a
timestamp column)
4. Stop the dev server.
5. Run `PORT=4000 npm run start:embed-widget`. This will let us access
the saved workspace from the app
6. Go to `localhost:4000/?name=<your-variable-name>`
7. The formatting settings should be applied

packages/app-utils/package.json

@@ -35,6 +35,7 @@
     "@deephaven/console": "file:../console",
     "@deephaven/dashboard": "file:../dashboard",
     "@deephaven/dashboard-core-plugins": "file:../dashboard-core-plugins",
+    "@deephaven/file-explorer": "file:../file-explorer",
     "@deephaven/golden-layout": "file:../golden-layout",
     "@deephaven/icons": "file:../icons",
     "@deephaven/iris-grid": "file:../iris-grid",
@@ -46,12 +47,15 @@
     "@deephaven/plugin": "file:../plugin",
     "@deephaven/react-hooks": "file:../react-hooks",
     "@deephaven/redux": "file:../redux",
+    "@deephaven/storage": "file:../storage",
     "@deephaven/utils": "file:../utils",
     "@fontsource/fira-mono": "5.0.13",
     "@fontsource/fira-sans": "5.0.20",
     "@paciolan/remote-component": "2.13.0",
     "@paciolan/remote-module-loader": "^3.0.2",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

packages/app-utils/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './plugins';
+export * from './storage';
 export * from './utils';

packages/code-studio/src/storage/LocalWorkspaceStorage.ts → packages/app-utils/src/storage/LocalWorkspaceStorage.ts

@@ -12,7 +12,7 @@ import {
   DecimalColumnFormatter,
   IntegerColumnFormatter,
 } from '@deephaven/jsapi-utils';
-import UserLayoutUtils from '../main/UserLayoutUtils';
+import UserLayoutUtils from './UserLayoutUtils';
 import LayoutStorage from './LayoutStorage';
 
 const log = Log.module('LocalWorkspaceStorage');

packages/code-studio/src/main/UserLayoutUtils.test.ts → packages/app-utils/src/storage/UserLayoutUtils.test.ts

@@ -4,7 +4,7 @@ import LayoutStorage, {
   ExportedLayout,
   ExportedLayoutV1,
   ExportedLayoutV2,
-} from '../storage/LayoutStorage';
+} from './LayoutStorage';
 import UserLayoutUtils, {
   DEFAULT_LAYOUT_CONFIG,
   DEFAULT_LAYOUT_CONFIG_NO_CONSOLE,

packages/code-studio/src/main/UserLayoutUtils.ts → packages/app-utils/src/storage/UserLayoutUtils.ts

@@ -11,7 +11,7 @@ import LayoutStorage, {
   ExportedLayoutV2,
   isLayoutV1,
   isLayoutV2,
-} from '../storage/LayoutStorage';
+} from './LayoutStorage';
 
 const log = Log.module('UserLayoutUtils');
 

packages/code-studio/src/storage/grpc/GrpcFileStorage.ts → packages/app-utils/src/storage/grpc/GrpcFileStorage.ts

@@ -1,5 +1,3 @@
-/* eslint-disable class-methods-use-this */
-
 import throttle from 'lodash.throttle';
 import {
   FileNotFoundError,
@@ -19,6 +17,8 @@ const log = Log.module('GrpcFileStorage');
 export class GrpcFileStorage implements FileStorage {
   private static readonly REFRESH_THROTTLE = 150;
 
+  private dh: typeof DhType;
+
   private readonly storageService: DhType.storage.StorageService;
 
   private tables = [] as GrpcFileStorageTable[];
@@ -30,7 +30,12 @@ export class GrpcFileStorage implements FileStorage {
    * @param storageService Storage service to use
    * @param root Root path for this instance. Should not contain trailing slash.
    */
-  constructor(storageService: DhType.storage.StorageService, root = '') {
+  constructor(
+    dh: typeof DhType,
+    storageService: DhType.storage.StorageService,
+    root = ''
+  ) {
+    this.dh = dh;
     this.storageService = storageService;
     this.root = root;
   }
@@ -61,7 +66,7 @@ export class GrpcFileStorage implements FileStorage {
   }
 
   async saveFile(file: File): Promise<File> {
-    const fileContents = dh.storage.FileContents.text(file.content);
+    const fileContents = this.dh.storage.FileContents.text(file.content);
     await this.storageService.saveFile(
       this.addRoot(file.filename),
       fileContents,

packages/code-studio/src/storage/grpc/GrpcFileStorageTable.test.ts → packages/app-utils/src/storage/grpc/GrpcFileStorageTable.test.ts

@@ -1,20 +1,22 @@
 import { FileUtils } from '@deephaven/file-explorer';
-import type { ItemDetails, StorageService } from '@deephaven/jsapi-types';
+import type { dh } from '@deephaven/jsapi-types';
 import GrpcFileStorageTable from './GrpcFileStorageTable';
 
-let storageService: StorageService;
+let storageService: dh.storage.StorageService;
 function makeTable(baseRoot = '', root = ''): GrpcFileStorageTable {
   return new GrpcFileStorageTable(storageService, baseRoot, root);
 }
 
-function makeStorageService(): StorageService {
+function makeStorageService(): dh.storage.StorageService {
   return {
     listItems: jest.fn(async () => []),
     loadFile: jest.fn(async () => {
       throw new Error('No file loaded');
     }),
     deleteItem: jest.fn(async () => undefined),
-    saveFile: jest.fn(async () => undefined),
+    saveFile: jest.fn(
+      async () => undefined as unknown as dh.storage.FileContents
+    ),
     moveItem: jest.fn(async () => undefined),
     createDirectory: jest.fn(async () => undefined),
   };
@@ -38,7 +40,7 @@ it('Does not get contents until a viewport is set', () => {
 });
 
 describe('directory expansion tests', () => {
-  function makeFile(name: string, path = ''): ItemDetails {
+  function makeFile(name: string, path = ''): dh.storage.ItemDetails {
     return {
       basename: name,
       filename: `${path}/${name}`,
@@ -49,7 +51,7 @@ describe('directory expansion tests', () => {
     };
   }
 
-  function makeDirectory(name: string, path = ''): ItemDetails {
+  function makeDirectory(name: string, path = ''): dh.storage.ItemDetails {
     const file = makeFile(name, path);
     file.type = 'directory';
     return file;
@@ -59,8 +61,8 @@ describe('directory expansion tests', () => {
     path = '/',
     numDirs = 3,
     numFiles = 2
-  ): Array<ItemDetails> {
-    const results = [] as ItemDetails[];
+  ): Array<dh.storage.ItemDetails> {
+    const results = [] as dh.storage.ItemDetails[];
 
     for (let i = 0; i < numDirs; i += 1) {
       const name = `dir${i}`;
@@ -75,7 +77,7 @@ describe('directory expansion tests', () => {
     return results;
   }
 
-  function expectItem(itemDetails: ItemDetails) {
+  function expectItem(itemDetails: dh.storage.ItemDetails) {
     return expect.objectContaining({
       basename: itemDetails.basename,
       filename: itemDetails.filename,

packages/app-utils/src/storage/grpc/index.ts

@@ -0,0 +1,3 @@
+export * from './GrpcFileStorage';
+export * from './GrpcFileStorageTable';
+export * from './GrpcLayoutStorage';

packages/app-utils/src/storage/index.ts

@@ -0,0 +1,5 @@
+export * from './grpc';
+export * from './LayoutStorage';
+export * from './LocalWorkspaceStorage';
+export * from './UserLayoutUtils';
+export { default as UserLayoutUtils } from './UserLayoutUtils';