Merge branch 'main' into feature-1151-table-rendering-support-for-databars

Author: emilyhuxng

package-lock.json

@@ -11,6 +11,7 @@ import {
   setDashboardData as setDashboardDataAction,
 } from '@deephaven/dashboard';
 import {
+  SessionDetails,
   SessionWrapper,
   setDashboardConnection as setDashboardConnectionAction,
   setDashboardSessionWrapper as setDashboardSessionWrapperAction,
@@ -52,6 +53,7 @@ import {
   createSessionWrapper,
   getAuthType,
   getLoginOptions,
+  getSessionDetails,
 } from './SessionUtils';
 import { PluginUtils } from '../plugins';
 import LayoutStorage from '../storage/LayoutStorage';
@@ -98,11 +100,12 @@ async function loadPlugins(): Promise<DeephavenPluginModuleMap> {
 }
 
 async function loadSessionWrapper(
-  connection: IdeConnection
+  connection: IdeConnection,
+  sessionDetails: SessionDetails
 ): Promise<SessionWrapper | undefined> {
   let sessionWrapper: SessionWrapper | undefined;
   try {
-    sessionWrapper = await createSessionWrapper(connection);
+    sessionWrapper = await createSessionWrapper(connection, sessionDetails);
   } catch (e) {
     // Consoles may be disabled on the server, but we should still be able to start up and open existing objects
     if (!isNoConsolesError(e)) {
@@ -170,7 +173,11 @@ function AppInit(props: AppInitProps) {
       const coreClient = createCoreClient();
       const authType = getAuthType();
       log.info(`Login using auth type ${authType}...`);
-      await coreClient.login(await getLoginOptions(authType));
+      const [loginOptions, sessionDetails] = await Promise.all([
+        getLoginOptions(authType),
+        getSessionDetails(authType),
+      ]);
+      await coreClient.login(loginOptions);
 
       const newPlugins = await loadPlugins();
       const connection = await (authType === AUTH_TYPE.ANONYMOUS &&
@@ -185,7 +192,10 @@ function AppInit(props: AppInitProps) {
         setDisconnectError(null);
       });
 
-      const sessionWrapper = await loadSessionWrapper(connection);
+      const sessionWrapper = await loadSessionWrapper(
+        connection,
+        sessionDetails
+      );
       const name = 'user';
 
       const storageService = coreClient.getStorageService();

packages/code-studio/src/main/AppInit.tsx

@@ -1,9 +1,17 @@
-import { SessionWrapper } from '@deephaven/dashboard-core-plugins';
+import {
+  SessionDetails,
+  SessionWrapper,
+} from '@deephaven/dashboard-core-plugins';
 import dh, {
   CoreClient,
   IdeConnection,
   LoginOptions,
 } from '@deephaven/jsapi-shim';
+import {
+  LOGIN_OPTIONS_REQUEST,
+  requestParentResponse,
+  SESSION_DETAILS_REQUEST,
+} from '@deephaven/jsapi-utils';
 import Log from '@deephaven/log';
 import shortid from 'shortid';
 import NoConsolesError from './NoConsolesError';
@@ -50,7 +58,8 @@ export function createConnection(): IdeConnection {
  * @returns A session and config that is ready to use
  */
 export async function createSessionWrapper(
-  connection: IdeConnection
+  connection: IdeConnection,
+  details: SessionDetails
 ): Promise<SessionWrapper> {
   log.info('Getting console types...');
 
@@ -72,7 +81,12 @@ export async function createSessionWrapper(
 
   log.info('Console session established', config);
 
-  return { session, config, connection };
+  return {
+    session,
+    config,
+    connection,
+    details,
+  };
 }
 
 export function createCoreClient(): CoreClient {
@@ -83,29 +97,12 @@ export function createCoreClient(): CoreClient {
   return new dh.CoreClient(websocketUrl);
 }
 
-export async function requestParentLoginOptions(): Promise<LoginOptions> {
-  if (window.opener == null) {
-    throw new Error('window.opener is null, unable to send auth request.');
-  }
-  return new Promise(resolve => {
-    const listener = (
-      event: MessageEvent<{
-        message: string;
-        payload: LoginOptions;
-      }>
-    ) => {
-      const { data } = event;
-      log.debug('Received message', data);
-      if (data?.message !== 'loginOptions') {
-        log.debug('Ignore received message', data);
-        return;
-      }
-      window.removeEventListener('message', listener);
-      resolve(data.payload);
-    };
-    window.addEventListener('message', listener);
-    window.opener.postMessage('requestLoginOptionsFromParent', '*');
-  });
+async function requestParentLoginOptions(): Promise<LoginOptions> {
+  return requestParentResponse<LoginOptions>(LOGIN_OPTIONS_REQUEST);
+}
+
+async function requestParentSessionDetails(): Promise<SessionDetails> {
+  return requestParentResponse<SessionDetails>(SESSION_DETAILS_REQUEST);
 }
 
 export async function getLoginOptions(
@@ -121,4 +118,17 @@ export async function getLoginOptions(
   }
 }
 
+export async function getSessionDetails(
+  authType: AUTH_TYPE
+): Promise<SessionDetails> {
+  switch (authType) {
+    case AUTH_TYPE.PARENT:
+      return requestParentSessionDetails();
+    case AUTH_TYPE.ANONYMOUS:
+      return {};
+    default:
+      throw new Error(`Unknown auth type: ${authType}`);
+  }
+}
+
 export default { createSessionWrapper };

packages/code-studio/src/main/SessionUtils.ts

@@ -320,7 +320,8 @@ export class ConsolePanel extends PureComponent<
       unzip,
     } = this.props;
     const { consoleSettings, error, objectMap } = this.state;
-    const { config, session, connection } = sessionWrapper;
+    const { config, session, connection, details = {} } = sessionWrapper;
+    const { workerName, processInfoId } = details;
     const { id: sessionId, type: language } = config;
 
     return (
@@ -349,6 +350,19 @@ export class ConsolePanel extends PureComponent<
               <>
                 <div>&nbsp;</div>
                 <div>{ConsoleConstants.LANGUAGE_MAP.get(language)}</div>
+                {workerName != null && (
+                  <>
+                    <div>&nbsp;•&nbsp;</div>
+                    {workerName}
+                  </>
+                )}
+                {processInfoId != null && (
+                  <>
+                    <div>&nbsp;•&nbsp;</div>
+                    {processInfoId}
+                    <div>&nbsp;•</div>
+                  </>
+                )}
                 <div>&nbsp;</div>
                 <div>
                   <HeapUsage

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

@@ -14,10 +14,16 @@ export interface SessionConfig {
   id: string;
 }
 
+export interface SessionDetails {
+  workerName?: string;
+  processInfoId?: string;
+}
+
 export interface SessionWrapper {
   session: IdeSession;
   connection: IdeConnection;
   config: SessionConfig;
+  details?: SessionDetails;
 }
 
 /**

packages/dashboard-core-plugins/src/redux/actions.ts

@@ -1,4 +1,10 @@
-import { Component, ComponentType } from 'react';
+import {
+  Component,
+  ComponentType,
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+} from 'react';
 import { ConnectedComponent } from 'react-redux';
 import GoldenLayout from '@deephaven/golden-layout';
 import type {
@@ -8,6 +14,34 @@ import type {
 } from '@deephaven/golden-layout';
 import PanelManager from './PanelManager';
 
+/**
+ * Alias for the return type of React.forwardRef()
+ */
+export type ForwardRefComponentType<P, R> = ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<R>
+>;
+
+/**
+ * Panel components can provide static props that provide meta data about the
+ * panel.
+ */
+export interface PanelStaticMetaData {
+  /**
+   * Should be set to the same name as the component type.
+   * @deprecated Use `displayName` instead.
+   */
+  COMPONENT?: string;
+
+  /** Title of the panel. */
+  TITLE?: string;
+}
+
+/**
+ * Panels defined as functional components have to use React.forwardRef.
+ */
+export type PanelFunctionComponentType<P, R> = ForwardRefComponentType<P, R> &
+  PanelStaticMetaData;
+
 export type WrappedComponentType<
   P extends PanelProps,
   C extends ComponentType<P>
@@ -16,7 +50,12 @@ export type WrappedComponentType<
 export type PanelComponentType<
   P extends PanelProps = PanelProps,
   C extends ComponentType<P> = ComponentType<P>
-> = ComponentType<P> | WrappedComponentType<P, C>;
+> = (
+  | ComponentType<P>
+  | WrappedComponentType<P, C>
+  | PanelFunctionComponentType<P, unknown>
+) &
+  PanelStaticMetaData;
 
 export function isWrappedComponent<
   P extends PanelProps,

packages/dashboard/src/DashboardPlugin.ts

@@ -3,3 +3,4 @@ export { default as LayoutUtils } from './LayoutUtils';
 export { default as GLPropTypes } from './GLPropTypes';
 
 export * from './hooks';
+export { default as usePanelRegistration } from './usePanelRegistration';

packages/dashboard/src/layout/index.ts

@@ -0,0 +1,87 @@
+/* eslint-disable max-classes-per-file */
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import usePanelRegistration from './usePanelRegistration';
+import { PanelProps } from '../DashboardPlugin';
+
+/* eslint-disable react/prefer-stateless-function */
+class ClassCOMPONENT extends React.Component<PanelProps> {
+  static COMPONENT = 'ClassCOMPONENT';
+}
+class ClassDisplayName extends React.Component<PanelProps> {
+  static displayName = 'ClassDisplayName';
+}
+class ClassNoName extends React.Component<PanelProps> {}
+/* eslint-enable react/prefer-stateless-function */
+
+function FnCOMPONENT() {
+  return null;
+}
+FnCOMPONENT.COMPONENT = 'FnCOMPONENT';
+function FnDisplayName() {
+  return null;
+}
+FnDisplayName.displayName = 'FnDisplayName';
+function FnNoName() {
+  return null;
+}
+
+const deregister = jest.fn();
+const registerComponent = jest.fn();
+const hydrate = jest.fn();
+const dehydrate = jest.fn();
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  registerComponent.mockReturnValue(deregister);
+});
+
+it.each([
+  [ClassCOMPONENT.COMPONENT, ClassCOMPONENT],
+  [ClassDisplayName.displayName, ClassDisplayName],
+  [FnCOMPONENT.COMPONENT, FnCOMPONENT],
+  [FnDisplayName.displayName, FnDisplayName],
+])(
+  'should register components with COMPONENT or displayName attributes and deregister on unmount: "%s"',
+  (_label, ComponentType) => {
+    const { unmount } = renderHook(() =>
+      usePanelRegistration(registerComponent, ComponentType, hydrate, dehydrate)
+    );
+
+    const name =
+      'COMPONENT' in ComponentType
+        ? ComponentType.COMPONENT
+        : ComponentType.displayName;
+
+    expect(registerComponent).toHaveBeenCalledWith(
+      name,
+      ComponentType,
+      hydrate,
+      dehydrate
+    );
+
+    expect(deregister).not.toHaveBeenCalled();
+
+    unmount();
+
+    expect(deregister).toHaveBeenCalled();
+  }
+);
+
+it.each([
+  ['MockClassNoName', ClassNoName],
+  ['MockFnNoName', FnNoName],
+])(
+  'should throw an error if no COMPONENT or displayName attribute exists: "%s"',
+  (_label, ComponentType) => {
+    const { result } = renderHook(() =>
+      usePanelRegistration(registerComponent, ComponentType, hydrate, dehydrate)
+    );
+
+    expect(result.error).toEqual(
+      new Error(
+        'ComponentType must have a `COMPONENT` or `displayName` attribute.'
+      )
+    );
+  }
+);