chore: clean up

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ on:
 env:
   # Playwright headless browsers running in CI get low confidence scores, causing flaky e2e tests. Lower the confidence score threshold for CI testing.
   MIN_CONFIDENCE_SCORE: 0
-  # Staging Cloudflare credential for e2e tests
+  # Staging Cloudflare credentials and IDs for e2e tests
   CLOUDFLARE_API_TOKEN: '${{ secrets.CLOUDFLARE_API_TOKEN }}'
   CLOUDFLARE_ZONE_ID: '${{ secrets.CLOUDFLARE_ZONE_ID }}'
   CLOUDFLARE_RULESET_ID: '${{ secrets.CLOUDFLARE_RULESET_ID }}'

e2e/bot-firewall.spec.ts

@@ -5,8 +5,7 @@ import { BOT_FIREWALL_COPY } from '../src/client/bot-firewall/botFirewallCopy';
 
 /**
  * CHROME_ONLY flag tells the GitHub action to run this test only using Chrome.
- * Since this test relies on a single common Cloudflare ruleset we need to prevent it from running in multiple browsers in parallel,
- * they would trip over each other and fail.
+ * This test relies on a single common Cloudflare ruleset, we we cannot run multiple instances of it at the same time.
  */
 test.describe('Bot Firewall Demo CHROME_ONLY', () => {
   test.beforeEach(async ({ page }) => {
@@ -27,12 +26,13 @@ test.describe('Bot Firewall Demo CHROME_ONLY', () => {
 
     /**
      * Try to visit web-scraping page, should be blocked by Cloudflare
-     * Checking the response code here as parsing the actual page if flaky for some reason
+     * Checking the response code here as parsing the actual page if flaky for some reason.
+     * Using a separate tab also seems to help with flakiness.
      */
-    const secondPage = await context.newPage();
-    const responsePromise = secondPage.waitForResponse('https://staging.fingerprinthub.com/web-scraping');
-    await secondPage.goto('https://staging.fingerprinthub.com/web-scraping');
-    expect((await responsePromise).status()).toBe(403);
+    const secondTab = await context.newPage();
+    await secondTab.goto('https://staging.fingerprinthub.com/web-scraping');
+    await secondTab.reload();
+    await secondTab.getByRole('heading', { name: 'Sorry, you have been blocked' }).waitFor();
 
     // Unblock IP
     await page.goto('/bot-firewall');
@@ -41,8 +41,8 @@ test.describe('Bot Firewall Demo CHROME_ONLY', () => {
     await page.waitForTimeout(3000);
 
     // Try to visit web-scraping page, should be allowed again
-    await secondPage.goto('https://staging.fingerprinthub.com/web-scraping');
-    await secondPage.reload();
-    await expect(secondPage.getByTestId(TEST_IDS.common.alert)).toContainText('Malicious bot detected');
+    await secondTab.goto('https://staging.fingerprinthub.com/web-scraping');
+    await secondTab.reload();
+    await expect(secondTab.getByTestId(TEST_IDS.common.alert)).toContainText('Malicious bot detected');
   });
 });

src/client/components/common/content.tsx

@@ -28,6 +28,7 @@ export type UseCase = {
     title: string;
     url: string;
   }[];
+  hiddenInNavigation?: boolean;
 };
 
 export const USE_CASES = {
@@ -466,9 +467,14 @@ export const PLAYGROUND_METADATA: Pick<
   descriptionMeta: 'Analyze your browser with Fingerprint Pro and see all the available signals.',
 };
 
-export const USE_CASES_ARRAY = Object.values(USE_CASES);
+export const USE_CASES_ARRAY = Object.values(USE_CASES)
+  // TODO: Remove this when ready the final of bot firewall demo is ready
+  .filter((useCase) => useCase.url !== USE_CASES.botFirewall.url);
 
-export const USE_CASES_NAVIGATION = USE_CASES_ARRAY.map((useCase) => ({ title: useCase.title, url: useCase.url }));
+export const USE_CASES_NAVIGATION = USE_CASES_ARRAY.map((useCase) => ({
+  title: useCase.title,
+  url: useCase.url,
+}));
 export const PLATFORM_NAVIGATION = [PLAYGROUND_METADATA];
 
 type HomePageCard = Pick<UseCase, 'title' | 'url' | 'iconSvg' | 'descriptionHomepage'>;

src/server/botd-firewall/cloudflareApiHelper.ts

@@ -47,16 +47,13 @@ export const syncFirewallRuleset = async () => {
 async function getCustomRulesetId() {
   const zoneId = process.env.CLOUDFLARE_ZONE_ID ?? '';
   const apiToken = process.env.CLOUDFLARE_API_TOKEN ?? '';
-
-  const url = `https://api.cloudflare.com/client/v4/zones/${zoneId}/rulesets`;
-
-  const options = {
-    method: 'GET',
-    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiToken}` },
-  };
-
   try {
-    const rulesets = await (await fetch(url, options)).json();
+    const rulesets = await (
+      await fetch(`https://api.cloudflare.com/client/v4/zones/${zoneId}/rulesets`, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiToken}` },
+      })
+    ).json();
 
     const customRuleset = rulesets.result.find((item: { phase: string }) => {
       return item.phase === 'http_request_firewall_custom';