feat: Added displayName to React contexts (#2512)

bmingles · web-flow · commit 4a9a836a7eb0 · 2025-08-05T13:49:25.000-05:00
Added displayName to React contexts so that they can be identified in React dev tools. Part of DH-19529 ### Testing - Run DH web locally via `npm start` - Open Components tab from React dev tools - Verify that context providers now have names in the component tree
diff --git a/packages/app-utils/src/components/ConnectionContext.ts b/packages/app-utils/src/components/ConnectionContext.ts
@@ -2,5 +2,6 @@ import { createContext } from 'react';
 import type { dh } from '@deephaven/jsapi-types';
 
 export const ConnectionContext = createContext<dh.IdeConnection | null>(null);
+ConnectionContext.displayName = 'ConnectionContext';
 
 export default ConnectionContext;
diff --git a/packages/app-utils/src/components/FontBootstrap.tsx b/packages/app-utils/src/components/FontBootstrap.tsx
@@ -12,6 +12,7 @@ import '@fontsource/fira-sans/700.css';
 import '@fontsource/fira-sans/700-italic.css';
 
 export const FontsLoadedContext = createContext<boolean>(false);
+FontsLoadedContext.displayName = 'FontsLoadedContext';
 
 export type FontBootstrapProps = {
   /**
diff --git a/packages/app-utils/src/components/ServerConfigBootstrap.tsx b/packages/app-utils/src/components/ServerConfigBootstrap.tsx
@@ -6,6 +6,7 @@ import { getErrorMessage } from '@deephaven/utils';
 export const ServerConfigContext = createContext<Map<string, string> | null>(
   null
 );
+ServerConfigContext.displayName = 'ServerConfigContext';
 
 export type ServerConfigBootstrapProps = {
   /**
diff --git a/packages/auth-plugins/src/UserContexts.ts b/packages/auth-plugins/src/UserContexts.ts
@@ -9,5 +9,7 @@ export const UserOverrideContext = createContext<UserOverride>({});
 
 export const UserPermissionsOverrideContext =
   createContext<UserPermissionsOverride>({});
+UserPermissionsOverrideContext.displayName = 'UserPermissionsOverrideContext';
 
 export const UserContext = createContext<User | null>(null);
+UserContext.displayName = 'UserContext';
diff --git a/packages/chart/src/ChartThemeProvider.tsx b/packages/chart/src/ChartThemeProvider.tsx
@@ -7,6 +7,7 @@ export type ChartThemeContextValue = ChartTheme;
 export const ChartThemeContext = createContext<ChartThemeContextValue | null>(
   null
 );
+ChartThemeContext.displayName = 'ChartThemeContext';
 
 export interface ChartThemeProviderProps {
   children: ReactNode;
diff --git a/packages/components/src/XComponentMap.ts b/packages/components/src/XComponentMap.ts
@@ -13,6 +13,7 @@ export const XComponentMapContext = React.createContext(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   new Map<React.ComponentType<any>, React.ComponentType<any>>()
 );
+XComponentMapContext.displayName = 'XComponentMapContext';
 
 export const XComponentMapProvider = XComponentMapContext.Provider;
 
diff --git a/packages/components/src/theme/ThemeProvider.tsx b/packages/components/src/theme/ThemeProvider.tsx
@@ -28,6 +28,7 @@ export interface ThemeContextValue {
 const log = Log.module('ThemeProvider');
 
 export const ThemeContext = createContext<ThemeContextValue | null>(null);
+ThemeContext.displayName = 'ThemeContext';
 
 export interface ThemeProviderProps {
   /*
diff --git a/packages/dashboard/src/layout/LayoutManagerContext.ts b/packages/dashboard/src/layout/LayoutManagerContext.ts
@@ -3,5 +3,6 @@ import type GoldenLayout from '@deephaven/golden-layout';
 
 export const LayoutManagerContext: React.Context<GoldenLayout | undefined> =
   React.createContext<GoldenLayout | undefined>(undefined);
+LayoutManagerContext.displayName = 'LayoutManagerContext';
 
 export default LayoutManagerContext;
diff --git a/packages/dashboard/src/useDashboardId.ts b/packages/dashboard/src/useDashboardId.ts
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 
 export const DashboardIdContext = createContext<string | null>(null);
+DashboardIdContext.displayName = 'DashboardIdContext';
 
 export function useDashboardId(): string {
   const dashboardId = useContext(DashboardIdContext);
diff --git a/packages/dashboard/src/useFiber.tsx b/packages/dashboard/src/useFiber.tsx
@@ -85,6 +85,7 @@ const FiberContext = /* @__PURE__ */ wrapContext(
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   /* @__PURE__ */ React.createContext<Fiber>(null!)
 );
+FiberContext.displayName = 'FiberContext';
 
 /**
  * A react-internal {@link Fiber} provider. This component binds React children to the React Fiber tree. Call its-fine hooks within this.
diff --git a/packages/dashboard/src/usePanelId.ts b/packages/dashboard/src/usePanelId.ts
@@ -4,6 +4,7 @@ import { createContext, useContext } from 'react';
  * Context to provide the golden layout panel ID.
  */
 export const PanelIdContext = createContext<string | null>(null);
+PanelIdContext.displayName = 'PanelIdContext';
 
 /**
  * Gets the current panel ID from the nearest context.
diff --git a/packages/iris-grid/src/IrisGridThemeProvider.tsx b/packages/iris-grid/src/IrisGridThemeProvider.tsx
@@ -16,6 +16,7 @@ export const IrisGridThemeContext = createContext<{
   theme: IrisGridThemeContextValue | null;
   density: 'compact' | 'regular' | 'spacious';
 }>({ theme: null, density: 'regular' });
+IrisGridThemeContext.displayName = 'IrisGridThemeContext';
 
 export interface IrisGridThemeProviderProps {
   children: ReactNode;
diff --git a/packages/jsapi-bootstrap/src/ApiBootstrap.tsx b/packages/jsapi-bootstrap/src/ApiBootstrap.tsx
@@ -11,6 +11,7 @@ import Log from '@deephaven/log';
 const log = Log.module('@deephaven/jsapi-bootstrap.ApiBootstrap');
 
 export const ApiContext = createContext<typeof DhType | null>(null);
+ApiContext.displayName = 'ApiContext';
 
 export type ApiBootstrapProps = {
   /** URL of the API to load */
diff --git a/packages/jsapi-bootstrap/src/ClientBootstrap.tsx b/packages/jsapi-bootstrap/src/ClientBootstrap.tsx
@@ -3,6 +3,7 @@ import type { dh } from '@deephaven/jsapi-types';
 import useCreateClient from './useCreateClient';
 
 export const ClientContext = createContext<dh.CoreClient | null>(null);
+ClientContext.displayName = 'ClientContext';
 
 export type ClientBootstrapProps = {
   /** URL of the server to connect to */
diff --git a/packages/jsapi-bootstrap/src/useDeferredApi.ts b/packages/jsapi-bootstrap/src/useDeferredApi.ts
@@ -17,6 +17,7 @@ export type DeferredApiFetcher = (
 export const DeferredApiContext = createContext<
   typeof DhType | DeferredApiFetcher | null
 >(null);
+DeferredApiContext.displayName = 'DeferredApiContext';
 
 /**
  * Retrieve the API for the current context, given the widget provided.
diff --git a/packages/jsapi-bootstrap/src/useObjectFetch.ts b/packages/jsapi-bootstrap/src/useObjectFetch.ts
@@ -56,6 +56,7 @@ export type ObjectFetchManager = {
 /** Context for tracking an implementation of the ObjectFetchManager. */
 export const ObjectFetchManagerContext =
   createContext<ObjectFetchManager | null>(null);
+ObjectFetchManagerContext.displayName = 'ObjectFetchManagerContext';
 
 /**
  * Retrieve a `fetch` function for the given variable descriptor.
diff --git a/packages/jsapi-bootstrap/src/useObjectFetcher.ts b/packages/jsapi-bootstrap/src/useObjectFetcher.ts
@@ -62,6 +62,7 @@ export type ObjectFetcher = <T = unknown>(
 ) => Promise<T>;
 
 export const ObjectFetcherContext = createContext<ObjectFetcher | null>(null);
+ObjectFetcherContext.displayName = 'ObjectFetcherContext';
 
 /**
  * Gets a descriptor that only has the ID or name set, but not both.
diff --git a/packages/plugin/src/PersistentStateContext.tsx b/packages/plugin/src/PersistentStateContext.tsx
@@ -42,6 +42,7 @@ export type PersistentStateContextType = {
  */
 export const PersistentStateContext =
   createContext<PersistentStateContextType | null>(null);
+PersistentStateContext.displayName = 'PersistentStateContext';
 
 export type PersistentStateProviderProps = React.PropsWithChildren<{
   /**
diff --git a/packages/plugin/src/PluginsContext.ts b/packages/plugin/src/PluginsContext.ts
@@ -2,5 +2,6 @@ import { createContext } from 'react';
 import { type PluginModuleMap } from './PluginTypes';
 
 export const PluginsContext = createContext<PluginModuleMap | null>(null);
+PluginsContext.displayName = 'PluginsContext';
 
 export default PluginsContext;
