fix: Update browser title in embed-widget to show widget name (#2559)

Update browser title when widget is opened in embed-widget component

## Summary

Implemented browser title update feature for the embed-widget component
with minimal, focused changes.

**Changes:**
- Added a `useEffect` hook in `App.tsx` that updates `document.title` to
`<widgetName> - Deephaven` when a widget name is provided via the URL
parameter
- Created comprehensive tests in `App.test.tsx` to verify the
functionality works correctly
- Updated tests to use `TestUtils.createMockProxy<typeof DhType>()` for
creating mock API objects (fixed TypeScript types)
- Improved test consistency by using `waitFor` instead of `setTimeout`
in all test cases
- Fixed window.location mocking to use `Object.defineProperty` instead
of type casting with `any`

**Example:**
When accessing the embed-widget with URL `?name=foobar`, the browser
title will be updated to "foobar - Deephaven"

**Files changed:**
- `packages/embed-widget/src/App.tsx` - Added useEffect hook for title
update (10 lines added)
- `packages/embed-widget/src/App.test.tsx` - Added tests for the new
functionality (96 lines, new file)

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> Open a PR to update the title in the browser when using the
embed-widget component. The title should be the name of the opened
widget with "- Deephaven" appended. For example, if I open a widget
named "foobar" in embed-widget, the browser title should be updated to
be "foobar - Deephaven"


</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mofojed <4505624+mofojed@users.noreply.github.com>

Author: Copilot

packages/embed-widget/src/App.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { createMockStore } from '@deephaven/redux';
+import { TestUtils } from '@deephaven/test-utils';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import App from './App';
+
+// Mock the modules that App depends on
+jest.mock('@deephaven/app-utils', () => ({
+  AppDashboards: () => <div>AppDashboards</div>,
+  GrpcLayoutStorage: jest.fn(),
+  LocalWorkspaceStorage: jest.fn(() => ({
+    load: jest.fn().mockResolvedValue({
+      data: { settings: {} },
+    }),
+  })),
+  useConnection: jest.fn(() => ({
+    getObject: jest.fn(),
+    getStorageService: jest.fn(),
+  })),
+  useServerConfig: jest.fn(() => ({})),
+  useUser: jest.fn(() => ({ name: 'test-user' })),
+}));
+
+jest.mock('@deephaven/dashboard', () => ({
+  getAllDashboardsData: jest.fn(() => ({})),
+  setDashboardPluginData: jest.fn(),
+  emitPanelOpen: jest.fn(),
+  useCreateDashboardListener: jest.fn(),
+}));
+
+jest.mock('@deephaven/plugin', () => ({
+  useDashboardPlugins: jest.fn(() => []),
+}));
+
+jest.mock('@deephaven/jsapi-bootstrap', () => ({
+  ...jest.requireActual('@deephaven/jsapi-bootstrap'),
+  getVariableDescriptor: jest.fn(),
+  useApi: jest.fn(() => ({})),
+  useClient: jest.fn(() => ({
+    getStorageService: jest.fn(() => ({})),
+  })),
+}));
+
+jest.mock('@deephaven/jsapi-utils', () => ({
+  fetchVariableDefinition: jest.fn(),
+}));
+
+describe('App', () => {
+  const mockApi = TestUtils.createMockProxy<typeof DhType>();
+  let store: ReturnType<typeof createMockStore>;
+
+  beforeEach(() => {
+    // Create a minimal Redux store
+    store = createMockStore();
+
+    // Reset document.title before each test
+    document.title = 'Deephaven Embedded Widget';
+
+    // Mock window.location.search
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: '?name=testWidget',
+      },
+      writable: true,
+    });
+  });
+
+  it('should update document title with widget name from URL parameter', async () => {
+    render(
+      <Provider store={store}>
+        <ApiContext.Provider value={mockApi}>
+          <App />
+        </ApiContext.Provider>
+      </Provider>
+    );
+
+    await waitFor(() => {
+      expect(document.title).toBe('testWidget - Deephaven');
+    });
+  });
+
+  it('should not update document title when name parameter is missing', async () => {
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: '',
+      },
+      writable: true,
+    });
+
+    render(
+      <Provider store={store}>
+        <ApiContext.Provider value={mockApi}>
+          <App />
+        </ApiContext.Provider>
+      </Provider>
+    );
+
+    await waitFor(() => {
+      expect(document.title).toBe('Deephaven Embedded Widget');
+    });
+  });
+});

packages/embed-widget/src/App.tsx

@@ -75,6 +75,16 @@ function App(): JSX.Element {
   const dispatch = useDispatch();
   const serverConfig = useServerConfig();
 
+  // Update the browser title when the widget name is available
+  useEffect(
+    function updateTitle() {
+      if (name != null) {
+        document.title = `${name} - Deephaven`;
+      }
+    },
+    [name]
+  );
+
   useEffect(
     function initializeApp() {
       async function initApp(): Promise<void> {