refactor: Move Panel into @deephaven/dashboard

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

@@ -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/index.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/panels/CommandHistoryPanel.tsx

@@ -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/ConsolePanel.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/CorePanel.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/FileExplorerPanel.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/FilterSetManagerPanel.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/InputFilterPanel.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/LogPanel.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');

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

@@ -21,7 +21,7 @@ import type * as monaco from 'monaco-editor';
 import { assertNotNull } from '@deephaven/utils';
 import { type RootState } from '@deephaven/redux';
 import { LoadingOverlay } from '@deephaven/components';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import MarkdownContainer from '../controls/markdown/MarkdownContainer';
 import MarkdownStartPage from '../controls/markdown/MarkdownStartPage';
 import './MarkdownPanel.scss';

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

@@ -58,7 +58,7 @@ import type { Tab, CloseOptions } from '@deephaven/golden-layout';
 import type { dh } from '@deephaven/jsapi-types';
 import { ConsoleEvent, NotebookEvent } from '../events';
 import { getDashboardSessionWrapper } from '../redux';
-import Panel from './Panel';
+import Panel from './CorePanel';
 import './NotebookPanel.scss';
 
 const MarkdownNotebook = lazy(() => import('./MarkdownNotebook'));

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

@@ -8,7 +8,7 @@ import {
 } from '@deephaven/components';
 import type { dh } from '@deephaven/jsapi-types';
 import { copyToClipboard, EMPTY_ARRAY } from '@deephaven/utils';
-import Panel, { type CorePanelProps } from './Panel';
+import Panel, { type CorePanelProps } from './CorePanel';
 import WidgetPanelTooltip from './WidgetPanelTooltip';
 import './WidgetPanel.scss';
 import { type WidgetPanelDescriptor } from './WidgetPanelTypes';

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

@@ -1,3 +1,5 @@
+import CorePanelImport from './CorePanel';
+
 export { default as ChartPanel } from './ChartPanel';
 export * from './ChartPanel';
 export * from './ChartPanelUtils';
@@ -17,8 +19,13 @@ export { default as MarkdownPanel } from './MarkdownPanel';
 export { default as NotebookPanel } from './NotebookPanel';
 export { default as PandasPanel } from './PandasPanel';
 export * from './PandasPanel';
-export { default as Panel } from './Panel';
 export * from './WidgetPanelTypes';
 export { default as WidgetPanel, type WidgetPanelProps } from './WidgetPanel';
 export { default as WidgetPanelTooltip } from './WidgetPanelTooltip';
 export { default as MockFileStorage } from './MockFileStorage';
+export const CorePanel = CorePanelImport;
+
+/**
+ * @deprecated Use CorePanel instead.
+ */
+export const Panel = CorePanelImport;

packages/dashboard/package.json

@@ -28,9 +28,11 @@
     "@deephaven/react-hooks": "file:../react-hooks",
     "@deephaven/redux": "file:../redux",
     "@deephaven/utils": "file:../utils",
+    "classnames": "^2.3.1",
     "fast-deep-equal": "^3.1.3",
     "lodash.ismatch": "^4.1.1",
     "lodash.throttle": "^4.1.1",
+    "memoize-one": "^5.1.1",
     "nanoid": "^5.0.7",
     "prop-types": "^15.7.2"
   },

packages/dashboard-core-plugins/src/panels/Panel.test.tsx → packages/dashboard/src/BasePanel.test.tsx

@@ -4,7 +4,7 @@
 import React, { Component } from 'react';
 import { render } from '@testing-library/react';
 import type { Container } from '@deephaven/golden-layout';
-import Panel from './Panel';
+import BasePanel from './BasePanel';
 
 class TestComponentPanel extends Component {}
 
@@ -39,7 +39,7 @@ function renderPanel({
   onTabClicked = jest.fn(),
 } = {}) {
   return render(
-    <Panel
+    <BasePanel
       componentPanel={componentPanel}
       glContainer={glContainer as unknown as Container}
       glEventHub={glEventHub}
@@ -51,7 +51,7 @@ function renderPanel({
       onTabClicked={onTabClicked}
     >
       {children}
-    </Panel>
+    </BasePanel>
   );
 }