chore: move components into playground

e2e/playground.spec.ts

@@ -1,22 +1,24 @@
 import { Page, expect, test } from '@playwright/test';
-import { PLAYGROUND_TAG } from '../src/client/components/playground/playgroundTags';
 import { isAgentResponse, isServerResponse } from './zodUtils';
 import { blockGoogleTagManager } from './e2eTestUtils';
+import { TEST_IDS } from '../src/client/testIDs';
+
+const TEST_ID = TEST_IDS.playground;
 
 const getAgentResponse = async (page: Page) => {
   const agentResponse =
-    (await (await page.getByTestId(PLAYGROUND_TAG.agentResponseJSON)).textContent()) ?? 'Agent response not found';
+    (await (await page.getByTestId(TEST_ID.agentResponseJSON)).textContent()) ?? 'Agent response not found';
   return JSON.parse(agentResponse);
 };
 
 const getServerResponse = async (page: Page) => {
   const serverResponse =
-    (await (await page.getByTestId(PLAYGROUND_TAG.serverResponseJSON)).textContent()) ?? 'Server response not found';
+    (await (await page.getByTestId(TEST_ID.serverResponseJSON)).textContent()) ?? 'Server response not found';
   return JSON.parse(serverResponse);
 };
 
 const clickPlaygroundRefreshButton = async (page: Page) => {
-  await page.getByTestId(PLAYGROUND_TAG.refreshButton).first().click();
+  await page.getByTestId(TEST_ID.refreshButton).first().click();
   // Artificial wait necessary to make sure you get the updated response every time
   await page.waitForTimeout(3000);
 };
@@ -30,7 +32,7 @@ test.describe('Playground page', () => {
   test('Page renders basic skeleton elements', async ({ page }) => {
     await page.getByText('Fingerprint Pro Playground', { exact: true }).waitFor();
     await page.getByText('Welcome, your visitor ID is').waitFor();
-    await page.getByTestId(PLAYGROUND_TAG.refreshButton).first().waitFor();
+    await page.getByTestId(TEST_ID.refreshButton).first().waitFor();
 
     await page.getByText('Identification', { exact: true }).waitFor();
     await page.getByText('Smart signals', { exact: true }).waitFor();

src/app/playground/Playground.tsx

@@ -6,16 +6,15 @@ import { green, red } from '@mui/material/colors';
 import { lightGreen } from '@mui/material/colors';
 import { blueGrey } from '@mui/material/colors';
 import dynamic from 'next/dynamic';
-import MyTable, { TableCellData } from '../../client/components/playground/MyTable';
-import BotDetectionResult from '../../client/components/playground/BotDetectionResult';
-import Info from '../../client/components/playground/InfoIcon';
-import RefreshButton from '../../client/components/playground/RefreshButton';
-import IpBlocklistResult from '../../client/components/playground/IpBlocklistResult';
-import VpnDetectionResult from '../../client/components/playground/VpnDetectionResult';
-import { FormatIpAddress } from '../../client/components/playground/ipFormatUtils';
-import { usePlaygroundSignals } from '../../client/components/playground/usePlaygroundSignals';
+import MyTable, { TableCellData } from './components/MyTable';
+import BotDetectionResult from './components/BotDetectionResult';
+import Info from './components/InfoIcon';
+import RefreshButton from './components/RefreshButton';
+import IpBlocklistResult from './components/IpBlocklistResult';
+import VpnDetectionResult from './components/VpnDetectionResult';
+import { FormatIpAddress } from './components/ipFormatUtils';
+import { usePlaygroundSignals } from './hooks/usePlaygroundSignals';
 import { getLocationName } from '../../shared/utils/locationUtils';
-import { PLAYGROUND_TAG } from '../../client/components/playground/playgroundTags';
 import { FP_LOAD_OPTIONS } from '../../pages/_app';
 import Link from 'next/link';
 import externalLinkArrow from '../../client/img/externalLinkArrow.svg';
@@ -26,6 +25,7 @@ import { Alert } from '../../client/components/common/Alert/Alert';
 import { timeAgoLabel } from '../../shared/timeUtils';
 import { FpjsProvider } from '@fingerprintjs/fingerprintjs-pro-react';
 import Container from '../../client/components/common/Container';
+import { TEST_IDS } from '../../client/testIDs';
 
 const PLAYGROUND_COPY = {
   androidOnly: 'Applicable only to Android devices',
@@ -50,7 +50,7 @@ const DocsLink: FunctionComponent<{ children: ReactNode; href: string; style?: R
 };
 
 // Map cannot be server-side rendered
-const Map = dynamic(() => import('../../client/components/playground/Map'), { ssr: false });
+const Map = dynamic(() => import('./components/Map'), { ssr: false });
 
 function Playground() {
   const {
@@ -435,14 +435,14 @@ function Playground() {
             <div>
               <h4 className={styles.jsonTitle}>JavaScript Agent Response {isLoadingAgentResponse && <Spinner />}</h4>
 
-              <CodeSnippet language='json' dataTestId={PLAYGROUND_TAG.agentResponseJSON}>
+              <CodeSnippet language='json' dataTestId={TEST_IDS.playground.agentResponseJSON}>
                 {JSON.stringify(agentResponse, null, 2)}
               </CodeSnippet>
             </div>
             <div>
               <h4 className={styles.jsonTitle}>Server API Response {isLoadingServerResponse && <Spinner />}</h4>
 
-              <CodeSnippet language='json' dataTestId={PLAYGROUND_TAG.serverResponseJSON}>
+              <CodeSnippet language='json' dataTestId={TEST_IDS.playground.serverResponseJSON}>
                 {JSON.stringify(usedIdentificationEvent, null, 2)}
               </CodeSnippet>
             </div>

src/app/playground/components/MyTable.tsx

@@ -0,0 +1,26 @@
+import { Theme } from '@emotion/react';
+import { SxProps } from '@mui/material';
+import { ReactNode, FunctionComponent } from 'react';
+
+export type TableCellData = {
+  content: ReactNode | ReactNode[];
+  cellStyle?: SxProps<Theme>;
+};
+
+const MyTable: FunctionComponent<{ data: TableCellData[][] }> = ({ data }) => {
+  return (
+    <table>
+      <tbody>
+        {data.map((row, i) => (
+          <tr key={i}>
+            {row.map((cell, j) => (
+              <td key={j}>{cell.content}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default MyTable;

src/client/components/playground/RefreshButton.tsx → src/app/playground/components/RefreshButton.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
-import { PLAYGROUND_TAG } from './playgroundTags';
-import Button from '../common/Button/Button';
-import { Spinner } from '../common/Spinner/Spinner';
+import Button from '../../../client/components/common/Button/Button';
+import { Spinner } from '../../../client/components/common/Spinner/Spinner';
 import styles from './RefreshButton.module.scss';
 import classnames from 'classnames';
+import { TEST_IDS } from '../../../client/testIDs';
 
 const RefreshButton: FunctionComponent<{ loading: boolean; getAgentData: () => void; className?: string }> = ({
   loading,
@@ -17,7 +17,7 @@ const RefreshButton: FunctionComponent<{ loading: boolean; getAgentData: () => v
       size='medium'
       onClick={() => getAgentData()}
       disabled={loading}
-      data-testid={PLAYGROUND_TAG.refreshButton}
+      data-testid={TEST_IDS.playground.refreshButton}
       className={classnames(styles.refreshButton, className)}
     >
       {loading ? (

src/client/testIDs.ts

@@ -84,6 +84,11 @@ export const TEST_IDS = {
     callout: 'callout',
     activateRegionalPricing: 'activateRegionalPricing',
   },
+  playground: {
+    agentResponseJSON: 'agentResponseJSON',
+    serverResponseJSON: 'serverResponseJSON',
+    refreshButton: 'refreshButton',
+  },
 } as const;
 
 export const TEST_ATTRIBUTES = {