refactor: Move Panel into @deephaven/dashboard (#2304)

- Move Panel into @deephaven/dashboard, removing functionality depending
on core plugins and keeping in CorePanel in the dashboard-core-plugins
package
- Renamed Panel to BasePanel - kept an alias of Panel to make it non-breaking
- Should be no breaking changes, as dashboard-core-plugins re-exports
the components that were removed
- Allows plugins (such as deephaven.ui) to simply use the `Panel`
component without having to depend on other core plugins
- Tests pass, ran a smoke test with latest version of deephaven.ui to
ensure functionality still worked
- Tested from Enterprise as well against the latest G+, was able to open
table panels and deephaven.ui panels without any changes to Enterprise
code.

Author: mofojed

package-lock.json

@@ -1,5 +1,5 @@
 import { type ValueOf } from '@deephaven/utils';
-import type TabEvent from './TabEvent';
+import { type TabEvent } from '@deephaven/dashboard';
 
 export type TabEventType = ValueOf<typeof TabEvent>;
 

packages/dashboard-core-plugins/src/events/TabEventMap.ts

@@ -1,8 +1,14 @@
+import { TabEvent as DashboardTabEvent } from '@deephaven/dashboard';
+
 export { default as ChartEvent } from './ChartEvent';
 export { default as ConsoleEvent } from './ConsoleEvent';
 export { default as InputFilterEvent } from './InputFilterEvent';
 export { default as IrisGridEvent } from './IrisGridEvent';
 export { default as MarkdownEvent } from './MarkdownEvent';
 export { default as NotebookEvent } from './NotebookEvent';
 export { default as PandasEvent } from './PandasEvent';
-export { default as TabEvent } from './TabEvent';
+
+/**
+ * @deprecated Use TabEvent from @deephaven/dashboard
+ */
+export const TabEvent = DashboardTabEvent;

packages/dashboard-core-plugins/src/events/index.ts

@@ -15,7 +15,7 @@ import { assertNotNull, Pending } from '@deephaven/utils';
 import type { dh } from '@deephaven/jsapi-types';
 import { ConsoleEvent, NotebookEvent } from '../events';
 import './CommandHistoryPanel.scss';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { getDashboardSessionWrapper } from '../redux';
 
 const log = Log.module('CommandHistoryPanel');

packages/dashboard-core-plugins/src/panels/CommandHistoryPanel.tsx

@@ -38,7 +38,7 @@ import {
 } from '@deephaven/plugin';
 import type { JSZipObject } from 'jszip';
 import { ConsoleEvent } from '../events';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { getDashboardSessionWrapper } from '../redux';
 import './ConsolePanel.scss';
 

packages/dashboard-core-plugins/src/panels/ConsolePanel.tsx

@@ -0,0 +1,78 @@
+import React, { PureComponent, type ReactElement } from 'react';
+import { createXComponent } from '@deephaven/components';
+import { type BasePanelProps, BasePanel } from '@deephaven/dashboard';
+import type { dh } from '@deephaven/jsapi-types';
+import { ConsoleEvent, InputFilterEvent } from '../events';
+
+export type CorePanelProps = BasePanelProps & {
+  onClearAllFilters?: (...args: unknown[]) => void;
+  onSessionClose?: (session: dh.IdeSession) => void;
+  onSessionOpen?: (
+    session: dh.IdeSession,
+    { language, sessionId }: { language: string; sessionId: string }
+  ) => void;
+};
+
+/**
+ * Extends the base panel component to handle Session events and input filter events.
+ */
+class CorePanel extends PureComponent<CorePanelProps> {
+  constructor(props: CorePanelProps) {
+    super(props);
+
+    this.handleClearAllFilters = this.handleClearAllFilters.bind(this);
+    this.handleSessionClosed = this.handleSessionClosed.bind(this);
+    this.handleSessionOpened = this.handleSessionOpened.bind(this);
+  }
+
+  componentDidMount(): void {
+    const { glEventHub } = this.props;
+
+    glEventHub.on(ConsoleEvent.SESSION_CLOSED, this.handleSessionClosed);
+    glEventHub.on(ConsoleEvent.SESSION_OPENED, this.handleSessionOpened);
+    glEventHub.on(
+      InputFilterEvent.CLEAR_ALL_FILTERS,
+      this.handleClearAllFilters
+    );
+  }
+
+  componentWillUnmount(): void {
+    const { glEventHub } = this.props;
+
+    glEventHub.off(ConsoleEvent.SESSION_CLOSED, this.handleSessionClosed);
+    glEventHub.off(ConsoleEvent.SESSION_OPENED, this.handleSessionOpened);
+    glEventHub.off(
+      InputFilterEvent.CLEAR_ALL_FILTERS,
+      this.handleClearAllFilters
+    );
+  }
+
+  handleClearAllFilters(...args: unknown[]): void {
+    const { onClearAllFilters } = this.props;
+    onClearAllFilters?.(...args);
+  }
+
+  handleSessionClosed(session: dh.IdeSession): void {
+    const { onSessionClose } = this.props;
+    onSessionClose?.(session);
+  }
+
+  handleSessionOpened(
+    session: dh.IdeSession,
+    params: { language: string; sessionId: string }
+  ): void {
+    const { onSessionOpen } = this.props;
+    onSessionOpen?.(session, params);
+  }
+
+  render(): ReactElement {
+    const { children, ...otherProps } = this.props;
+
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <BasePanel {...otherProps}>{children}</BasePanel>;
+  }
+}
+
+const XCorePanel = createXComponent(CorePanel);
+
+export default XCorePanel;

packages/dashboard-core-plugins/src/panels/CorePanel.tsx

@@ -12,7 +12,7 @@ import FileExplorer, {
 import React, { type ReactNode } from 'react';
 import { connect, type ConnectedProps } from 'react-redux';
 import type { dh } from '@deephaven/jsapi-types';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { NotebookEvent } from '../events';
 import './FileExplorerPanel.scss';
 import { getDashboardSessionWrapper } from '../redux';

packages/dashboard-core-plugins/src/panels/FileExplorerPanel.tsx

@@ -22,7 +22,7 @@ import {
   getTableMapForDashboard,
   setDashboardFilterSets as setDashboardFilterSetsAction,
 } from '../redux';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import FilterSetManager, {
   type ChangeHandlerArgs,
   type FilterSet,

packages/dashboard-core-plugins/src/panels/FilterSetManagerPanel.tsx

@@ -5,7 +5,7 @@ import type { Container, EventEmitter } from '@deephaven/golden-layout';
 import { type RootState } from '@deephaven/redux';
 import { LayoutUtils } from '@deephaven/dashboard';
 import { assertNotNull } from '@deephaven/utils';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import InputFilter, {
   type InputFilterColumn,
 } from '../controls/input-filter/InputFilter';

packages/dashboard-core-plugins/src/panels/InputFilterPanel.tsx

@@ -8,7 +8,7 @@ import { type DashboardPanelProps } from '@deephaven/dashboard';
 import Log from '@deephaven/log';
 import { type RootState } from '@deephaven/redux';
 import './LogPanel.scss';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import { getDashboardSessionWrapper } from '../redux';
 
 const log = Log.module('LogPanel');