Use new UI (#8983)

* fixup build

* swap frontends

web-old/src/api/__tests__/index.test.jsx

@@ -0,0 +1,23 @@
+import { h } from 'preact';
+import * as WS from '../ws';
+import { ApiProvider, useApiHost } from '..';
+import { render, screen } from 'testing-library';
+
+describe('useApiHost', () => {
+  beforeEach(() => {
+    vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
+  });
+
+  test('is set from the baseUrl', async () => {
+    function Test() {
+      const apiHost = useApiHost();
+      return <div>{apiHost}</div>;
+    }
+    render(
+      <ApiProvider>
+        <Test />
+      </ApiProvider>
+    );
+    expect(screen.queryByText('http://localhost:3000/')).toBeInTheDocument();
+  });
+});

web-old/src/api/__tests__/ws.test.jsx

@@ -0,0 +1,154 @@
+/* eslint-disable jest/no-disabled-tests */
+import { h } from 'preact';
+import { WS as frigateWS, WsProvider, useWs } from '../ws';
+import { useCallback, useContext } from 'preact/hooks';
+import { fireEvent, render, screen } from 'testing-library';
+import { WS } from 'jest-websocket-mock';
+
+function Test() {
+  const { state } = useContext(frigateWS);
+  return state.__connected ? (
+    <div data-testid="data">
+      {Object.keys(state).map((key) => (
+        <div key={key} data-testid={key}>
+          {JSON.stringify(state[key])}
+        </div>
+      ))}
+    </div>
+  ) : null;
+}
+
+const TEST_URL = 'ws://test-foo:1234/ws';
+
+describe('WsProvider', () => {
+  let wsClient, wsServer;
+  beforeEach(async () => {
+    wsClient = {
+      close: vi.fn(),
+      send: vi.fn(),
+    };
+    wsServer = new WS(TEST_URL);
+  });
+
+  afterEach(() => {
+    WS.clean();
+  });
+
+  test.skip('connects to the ws server', async () => {
+    render(
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
+        <Test />
+      </WsProvider>
+    );
+    await wsServer.connected;
+    await screen.findByTestId('data');
+    expect(wsClient.args).toEqual([TEST_URL]);
+    expect(screen.getByTestId('__connected')).toHaveTextContent('true');
+  });
+
+  test.skip('receives data through useWs', async () => {
+    function Test() {
+      const {
+        value: { payload, retain },
+        connected,
+      } = useWs('tacos');
+      return connected ? (
+        <div>
+          <div data-testid="payload">{JSON.stringify(payload)}</div>
+          <div data-testid="retain">{JSON.stringify(retain)}</div>
+        </div>
+      ) : null;
+    }
+
+    const { rerender } = render(
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
+        <Test />
+      </WsProvider>
+    );
+    await wsServer.connected;
+    await screen.findByTestId('payload');
+    wsClient.onmessage({
+      data: JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false }),
+    });
+    rerender(
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
+        <Test />
+      </WsProvider>
+    );
+    expect(screen.getByTestId('payload')).toHaveTextContent('{"yes":true}');
+    expect(screen.getByTestId('retain')).toHaveTextContent('false');
+  });
+
+  test.skip('can send values through useWs', async () => {
+    function Test() {
+      const { send, connected } = useWs('tacos');
+      const handleClick = useCallback(() => {
+        send({ yes: true });
+      }, [send]);
+      return connected ? <button onClick={handleClick}>click me</button> : null;
+    }
+
+    render(
+      <WsProvider config={mockConfig} wsUrl={TEST_URL}>
+        <Test />
+      </WsProvider>
+    );
+    await wsServer.connected;
+    await screen.findByRole('button');
+    fireEvent.click(screen.getByRole('button'));
+    await expect(wsClient.send).toHaveBeenCalledWith(
+      JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false })
+    );
+  });
+
+  test.skip('prefills the recordings/detect/snapshots state from config', async () => {
+    vi.spyOn(Date, 'now').mockReturnValue(123456);
+    const config = {
+      cameras: {
+        front: {
+          name: 'front',
+          detect: { enabled: true },
+          record: { enabled: false },
+          snapshots: { enabled: true },
+          audio: { enabled: false },
+        },
+        side: {
+          name: 'side',
+          detect: { enabled: false },
+          record: { enabled: false },
+          snapshots: { enabled: false },
+          audio: { enabled: false },
+        },
+      },
+    };
+    render(
+      <WsProvider config={config} wsUrl={TEST_URL}>
+        <Test />
+      </WsProvider>
+    );
+    await wsServer.connected;
+    await screen.findByTestId('data');
+    expect(screen.getByTestId('front/detect/state')).toHaveTextContent(
+      '{"lastUpdate":123456,"payload":"ON","retain":false}'
+    );
+    expect(screen.getByTestId('front/recordings/state')).toHaveTextContent(
+      '{"lastUpdate":123456,"payload":"OFF","retain":false}'
+    );
+    expect(screen.getByTestId('front/snapshots/state')).toHaveTextContent(
+      '{"lastUpdate":123456,"payload":"ON","retain":false}'
+    );
+    expect(screen.getByTestId('side/detect/state')).toHaveTextContent(
+      '{"lastUpdate":123456,"payload":"OFF","retain":false}'
+    );
+    expect(screen.getByTestId('side/recordings/state')).toHaveTextContent(
+      '{"lastUpdate":123456,"payload":"OFF","retain":false}'
+    );
+    expect(screen.getByTestId('side/snapshots/state')).toHaveTextContent(
+      '{"lastUpdate":123456,"payload":"OFF","retain":false}'
+    );
+  });
+});
+
+const mockConfig = {
+  cameras: {},
+};