feat: De-globalize utils, formatters, linker (#1278)

- De-globalize JSAPI in the `jsapi-utils` package. Update all dependent packages. BREAKING CHANGE: - Class `Formatter` requires the JSAPI instance as the first argument. - Classes `DateTimeColumnFormatter`, `DecimalColumnFormatter`, `IntegerColumnFormatter`, `TableColumnFormatter`: static method `isValid` and constructor require the JSAPI instance in the first argument. - Component `Chart` requires the JSAPI instance passed in the new prop `dh`. - `WidgetUtils`: methods `createChartModel`, `createGridModel` methods require the JSAPI instance passed in the first argument. - Components `DateTimeOptions`, `TableInput`, `useViewportData` have to be wrapped in `ApiContext.Provider` passing the JSAPI instance. - `SettingsUtils`: methods `isValidFormat` and `isFormatRuleValidForSave` require the JSAPI instance passed in the first argument. - `SessionUtils`: methods `createConnection`, `createCoreClient` require the JSAPI instance passed in the first argument. - `TableUtils` static methods `applyCustomColumns`, `applyFilter`, `applyNeverFilter`, `applySort` converted to instance methods. - Components `DropdownFilterPanel`, `Linker` now get the JSAPI instance from redux store. - `DecimalFormatContextMenu.getOptions`, `IntegerFormatContextMenu.getOptions` now require the JSAPI instance in the first argument.
deephaven · May 10, 2023 · cb0e9ba · cb0e9ba
1 parent ce1fe2c
commit cb0e9ba
Show file tree

Hide file tree

Showing 54 changed files with 426 additions and 242 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/chart/README.md b/packages/chart/README.md
@@ -14,5 +14,5 @@ Then, import and use the component from the package:
 import { Chart } from '@deephaven/chart';
 
 // In your render function
-<Chart model={model} />
+<Chart dh={dh} model={model} />
 ```
diff --git a/packages/chart/src/Chart.tsx b/packages/chart/src/Chart.tsx
@@ -7,6 +7,7 @@ import {
   dhWarningFilled,
   IconDefinition,
 } from '@deephaven/icons';
+import type { dh as DhType } from '@deephaven/jsapi-types';
 import {
   Formatter,
   FormatterUtils,
@@ -35,6 +36,7 @@ type FormatterSettings = ColumnFormatSettings &
   };
 
 interface ChartProps {
+  dh: DhType;
   model: ChartModel;
   settings: FormatterSettings;
   isActive: boolean;
@@ -505,7 +507,9 @@ export class Chart extends Component<ChartProps, ChartState> {
   }
 
   updateFormatter(): void {
+    const { dh } = this.props;
     const formatter = new Formatter(
+      dh,
       this.columnFormats,
       this.dateTimeFormatterOptions,
       this.decimalFormatOptions,

diff --git a/packages/chart/src/ChartUtils.test.ts b/packages/chart/src/ChartUtils.test.ts
@@ -8,7 +8,7 @@ import ChartTheme from './ChartTheme';
 const chartUtils = new ChartUtils(dh);
 
 function makeFormatter() {
-  return new Formatter();
+  return new Formatter(dh);
 }
 
 it('groups the axes by type properly', () => {

diff --git a/packages/code-studio/src/main/AppInit.tsx b/packages/code-studio/src/main/AppInit.tsx
@@ -20,8 +20,8 @@ import {
   ToolType,
 } from '@deephaven/dashboard-core-plugins';
 import { FileStorage } from '@deephaven/file-explorer';
-import { useClient } from '@deephaven/jsapi-bootstrap';
-import type { IdeConnection } from '@deephaven/jsapi-types';
+import { useApi, useClient } from '@deephaven/jsapi-bootstrap';
+import type { dh as DhType, IdeConnection } from '@deephaven/jsapi-types';
 import {
   DecimalColumnFormatter,
   getSessionDetails,
@@ -36,6 +36,7 @@ import {
   getWorkspaceStorage,
   RootState,
   setActiveTool as setActiveToolAction,
+  setApi as setApiAction,
   setCommandHistoryStorage as setCommandHistoryStorageAction,
   setFileStorage as setFileStorageAction,
   setPlugins as setPluginsAction,
@@ -64,6 +65,7 @@ interface AppInitProps {
   workspaceStorage: WorkspaceStorage;
 
   setActiveTool: (type: typeof ToolType[keyof typeof ToolType]) => void;
+  setApi: (api: DhType) => void;
   setCommandHistoryStorage: (storage: PouchCommandHistoryStorage) => void;
   setDashboardData: (
     id: string,
@@ -87,6 +89,7 @@ function AppInit(props: AppInitProps) {
   const {
     workspace,
     setActiveTool,
+    setApi,
     setCommandHistoryStorage,
     setDashboardData,
     setFileStorage,
@@ -100,6 +103,7 @@ function AppInit(props: AppInitProps) {
     setServerConfigValues,
   } = props;
 
+  const api = useApi();
   const client = useClient();
   const connection = useConnection();
   const plugins = usePlugins();
@@ -212,7 +216,7 @@ function AppInit(props: AppInitProps) {
               ...userPermissionsOverrides,
             },
           };
-
+          setApi(api);
           setActiveTool(ToolType.DEFAULT);
           setServerConfigValues(serverConfig);
           setCommandHistoryStorage(commandHistoryStorage);
@@ -234,9 +238,11 @@ function AppInit(props: AppInitProps) {
       loadApp();
     },
     [
+      api,
       client,
       connection,
       setActiveTool,
+      setApi,
       setCommandHistoryStorage,
       setDashboardData,
       setFileStorage,
@@ -297,6 +303,7 @@ const mapStateToProps = (state: RootState) => ({
 
 const ConnectedAppInit = connect(mapStateToProps, {
   setActiveTool: setActiveToolAction,
+  setApi: setApiAction,
   setCommandHistoryStorage: setCommandHistoryStorageAction,
   setDashboardData: setDashboardDataAction,
   setFileStorage: setFileStorageAction,

diff --git a/packages/code-studio/src/main/WidgetUtils.ts b/packages/code-studio/src/main/WidgetUtils.ts
@@ -1,5 +1,5 @@
 import { ChartModel, ChartModelFactory } from '@deephaven/chart';
-import {
+import type {
   dh as DhType,
   Table,
   VariableTypeUnion,

diff --git a/packages/code-studio/src/settings/ColumnSpecificSectionContent.test.tsx b/packages/code-studio/src/settings/ColumnSpecificSectionContent.test.tsx
@@ -7,7 +7,8 @@ import { WorkspaceSettings } from '@deephaven/redux';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Formatter } from '@deephaven/jsapi-utils';
-
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import dh from '@deephaven/jsapi-shim';
 import {
   ColumnSpecificSectionContent,
   ColumnSpecificSectionContentProps,
@@ -34,19 +35,22 @@ function renderContent({
   },
 }: Partial<ColumnSpecificSectionContentProps> = {}) {
   return render(
-    <ColumnSpecificSectionContent
-      formatter={formatter}
-      defaultDateTimeFormat={defaultDateTimeFormat}
-      showTimeZone={showTimeZone}
-      showTSeparator={showTSeparator}
-      timeZone={timeZone}
-      truncateNumbersWithPound={truncateNumbersWithPound}
-      settings={settings}
-      saveSettings={saveSettings}
-      scrollTo={scrollTo}
-      defaultDecimalFormatOptions={defaultDecimalFormatOptions}
-      defaultIntegerFormatOptions={defaultIntegerFormatOptions}
-    />
+    <ApiContext.Provider value={dh}>
+      <ColumnSpecificSectionContent
+        dh={dh}
+        formatter={formatter}
+        defaultDateTimeFormat={defaultDateTimeFormat}
+        showTimeZone={showTimeZone}
+        showTSeparator={showTSeparator}
+        timeZone={timeZone}
+        truncateNumbersWithPound={truncateNumbersWithPound}
+        settings={settings}
+        saveSettings={saveSettings}
+        scrollTo={scrollTo}
+        defaultDecimalFormatOptions={defaultDecimalFormatOptions}
+        defaultIntegerFormatOptions={defaultIntegerFormatOptions}
+      />
+    </ApiContext.Provider>
   );
 }
 

diff --git a/packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx b/packages/code-studio/src/settings/ColumnSpecificSectionContent.tsx
@@ -19,7 +19,9 @@ import {
   TableColumnFormat,
   FormattingRule,
 } from '@deephaven/jsapi-utils';
+import { dh as DhType } from '@deephaven/jsapi-types';
 import {
+  getApi,
   getDefaultDateTimeFormat,
   getDefaultDecimalFormatOptions,
   getDefaultIntegerFormatOptions,
@@ -42,12 +44,14 @@ import {
   isValidFormat,
   removeFormatRuleExtraProps,
   isFormatRuleValidForSave,
+  ValidFormatterItem,
 } from './SettingsUtils';
 import type { FormatterItem, FormatOption } from './SettingsUtils';
 import ColumnTypeOptions from './ColumnTypeOptions';
 import DateTimeOptions from './DateTimeOptions';
 
 export interface ColumnSpecificSectionContentProps {
+  dh: DhType;
   formatter: FormatterItem[];
   defaultDateTimeFormat: string;
   showTimeZone: boolean;
@@ -288,10 +292,13 @@ export class ColumnSpecificSectionContent extends PureComponent<
       defaultIntegerFormatOptions,
       truncateNumbersWithPound,
     } = this.state;
+    const { dh } = this.props;
 
     const formatter =
       formatSettings
-        .filter(isFormatRuleValidForSave)
+        .filter((format): format is ValidFormatterItem =>
+          isFormatRuleValidForSave(dh, format)
+        )
         .map(removeFormatRuleExtraProps) ?? [];
 
     const { settings, saveSettings } = this.props;
@@ -306,6 +313,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     };
     if (
       isValidFormat(
+        dh,
         TableUtils.dataType.DECIMAL,
         DecimalColumnFormatter.makeCustomFormat(
           defaultDecimalFormatOptions.defaultFormatString
@@ -316,6 +324,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     }
     if (
       isValidFormat(
+        dh,
         TableUtils.dataType.INT,
         IntegerColumnFormatter.makeCustomFormat(
           defaultIntegerFormatOptions.defaultFormatString
@@ -339,6 +348,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
   getRuleError(
     rule: FormatterItem
   ): { hasColumnNameError: boolean; hasFormatError: boolean; message: string } {
+    const { dh } = this.props;
     const error = {
       hasColumnNameError: false,
       hasFormatError: false,
@@ -369,7 +379,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     ) {
       error.hasFormatError = true;
       errorMessages.push('Empty formatting rule.');
-    } else if (!isValidFormat(rule.columnType, rule.format)) {
+    } else if (!isValidFormat(dh, rule.columnType, rule.format)) {
       error.hasFormatError = true;
       errorMessages.push('Invalid formatting rule.');
     }
@@ -637,6 +647,7 @@ const mapStateToProps = (state: RootState) => ({
   defaultDateTimeFormat: getDefaultDateTimeFormat(state),
   defaultDecimalFormatOptions: getDefaultDecimalFormatOptions(state),
   defaultIntegerFormatOptions: getDefaultIntegerFormatOptions(state),
+  dh: getApi(state),
   showTimeZone: getShowTimeZone(state),
   showTSeparator: getShowTSeparator(state),
   truncateNumbersWithPound: getTruncateNumbersWithPound(state),

diff --git a/packages/code-studio/src/settings/DateTimeOptions.tsx b/packages/code-studio/src/settings/DateTimeOptions.tsx
@@ -1,9 +1,10 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 import {
   Formatter,
   DateTimeColumnFormatter,
   TableUtils,
 } from '@deephaven/jsapi-utils';
+import { useApi } from '@deephaven/jsapi-bootstrap';
 
 interface DateTimeOptionProps {
   timestamp: Date;
@@ -26,11 +27,17 @@ export default function DateTimeOptions(
     legacyGlobalFormat,
   } = props;
 
-  const formatter = new Formatter([], {
-    timeZone,
-    showTimeZone,
-    showTSeparator,
-  });
+  const dh = useApi();
+
+  const formatter = useMemo(
+    () =>
+      new Formatter(dh, [], {
+        timeZone,
+        showTimeZone,
+        showTSeparator,
+      }),
+    [dh, showTimeZone, showTSeparator, timeZone]
+  );
   const formats = isGlobalOptions
     ? DateTimeColumnFormatter.getGlobalFormats(showTimeZone, showTSeparator)
     : DateTimeColumnFormatter.getFormats(showTimeZone, showTSeparator);

diff --git a/packages/code-studio/src/settings/FormattingSectionContent.test.tsx b/packages/code-studio/src/settings/FormattingSectionContent.test.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import dh from '@deephaven/jsapi-shim';
 import { DateTimeColumnFormatter } from '@deephaven/jsapi-utils';
 import { WorkspaceSettings } from '@deephaven/redux';
 import { assertNotNull } from '@deephaven/utils';
@@ -45,20 +47,23 @@ function renderSectionContent({
   truncateNumbersWithPound = false,
 } = {}) {
   return render(
-    <FormattingSectionContent
-      settings={settings as WorkspaceSettings}
-      formatter={formatter}
-      showTimeZone={showTimeZone}
-      showTSeparator={showTSeparator}
-      timeZone={timeZone}
-      defaultDateTimeFormat={defaultDateTimeFormat}
-      truncateNumbersWithPound={truncateNumbersWithPound}
-      saveSettings={saveSettings}
-      scrollTo={scrollTo}
-      defaultDecimalFormatOptions={defaultDecimalFormatOptions}
-      defaultIntegerFormatOptions={defaultIntegerFormatOptions}
-      defaults={defaults}
-    />
+    <ApiContext.Provider value={dh}>
+      <FormattingSectionContent
+        dh={dh}
+        settings={settings as WorkspaceSettings}
+        formatter={formatter}
+        showTimeZone={showTimeZone}
+        showTSeparator={showTSeparator}
+        timeZone={timeZone}
+        defaultDateTimeFormat={defaultDateTimeFormat}
+        truncateNumbersWithPound={truncateNumbersWithPound}
+        saveSettings={saveSettings}
+        scrollTo={scrollTo}
+        defaultDecimalFormatOptions={defaultDecimalFormatOptions}
+        defaultIntegerFormatOptions={defaultIntegerFormatOptions}
+        defaults={defaults}
+      />
+    </ApiContext.Provider>
   );
 }