feat: Pre-select first host in rercording (#616)

Author: cristianoventura

src/store/generator/slices/recording.utils.ts

@@ -6,6 +6,36 @@ export function extractUniqueHosts(requests: ProxyData[]) {
   return uniq(requests.map((request) => request.request.host).filter(Boolean))
 }
 
+export function groupHostsByParty(hosts: string[]) {
+  return hosts.reduce(
+    (acc, host) => {
+      const key = isHostThirdParty(host) ? 'thirdParty' : 'firstParty'
+      return {
+        ...acc,
+        [key]: [...acc[key], host],
+      }
+    },
+    { firstParty: [], thirdParty: [] }
+  )
+}
+
+export function isHostThirdParty(host: string) {
+  const hostPatterns = [
+    '.google.com',
+    '.googleapis.com',
+    '.gstatic.com',
+    '.googleusercontent.com',
+    '.googleadservices.com',
+    '.doubleclick.net',
+    '.google-analytics.com',
+    '.googletagmanager.com',
+    '.googlesyndication.com',
+    '.googletagservices.com',
+    '.recaptcha.net',
+  ]
+  return hostPatterns.some((pattern) => host.includes(pattern))
+}
+
 export function shouldResetAllowList({
   requests,
   allowList,

src/views/Generator/Allowlist/Allowlist.tsx

@@ -1,10 +1,13 @@
 import { GlobeIcon } from '@radix-ui/react-icons'
 import { Button, Dialog, Flex } from '@radix-ui/themes'
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { PopoverDialog } from '@/components/PopoverDialogs'
 import { useGeneratorStore } from '@/store/generator'
-import { extractUniqueHosts } from '@/store/generator/slices/recording.utils'
+import {
+  extractUniqueHosts,
+  groupHostsByParty,
+} from '@/store/generator/slices/recording.utils'
 
 import { AllowlistDialog } from './AllowlistDialog'
 
@@ -30,7 +33,19 @@ export function Allowlist() {
     (store) => store.setIncludeStaticAssets
   )
 
-  const hosts = extractUniqueHosts(requests)
+  const { firstParty, thirdParty } = useMemo(() => {
+    const uniqueHosts = extractUniqueHosts(requests)
+    return groupHostsByParty(uniqueHosts)
+  }, [requests])
+
+  useEffect(() => {
+    // Using allowlist.length would require adding it as a dependency of useEffect.
+    // This causes an unintended behavior of automatically selecting the first item when the user unselects all checkboxes. (making it impossible to make allowlist empty).
+    const allowlistCount = useGeneratorStore.getState().allowlist.length
+    if (firstParty[0] !== undefined && allowlistCount === 0) {
+      setAllowlist([firstParty[0]])
+    }
+  }, [firstParty, setAllowlist])
 
   function handleOpenChange(open: boolean) {
     if (!open) {
@@ -43,6 +58,8 @@ export function Allowlist() {
   // Show dialog as popover when triggered from the button
   const Wrapper = openAsPopover ? PopoverWrapper : DialogWrapper
 
+  const allHosts = [...firstParty, ...thirdParty]
+
   const trigger = (
     <Button
       size="1"
@@ -51,7 +68,7 @@ export function Allowlist() {
       onClick={() => setOpenAsPopover(true)}
     >
       <GlobeIcon />
-      Allowed hosts [{allowlist.length}/{hosts.length}]
+      Allowed hosts [{allowlist.length}/{allHosts.length}]
     </Button>
   )
 
@@ -62,7 +79,8 @@ export function Allowlist() {
       onOpenChange={handleOpenChange}
     >
       <AllowlistDialog
-        hosts={hosts}
+        firstPartyHosts={firstParty}
+        thirdPartyHosts={thirdParty}
         allowlist={allowlist}
         requests={requests}
         includeStaticAssets={includeStaticAssets}

src/views/Generator/Allowlist/AllowlistCheckGroup.tsx

@@ -0,0 +1,31 @@
+import { CheckboxGroup, Flex, Text } from '@radix-ui/themes'
+
+type AllowlistCheckGroupProps = {
+  hosts: string[]
+  allowlist: string[]
+  onValueChange: (allowlist: string[]) => void
+}
+
+export default function AllowlistCheckGroup({
+  hosts,
+  allowlist,
+  onValueChange,
+}: AllowlistCheckGroupProps) {
+  return (
+    <Flex p="2" pr="4" asChild overflow="hidden">
+      <CheckboxGroup.Root
+        size="2"
+        value={allowlist}
+        onValueChange={onValueChange}
+      >
+        {hosts.map((host) => (
+          <Text as="label" size="2" key={host}>
+            <Flex gap="2" align="center">
+              <CheckboxGroup.Item value={host} /> <Text truncate>{host}</Text>
+            </Flex>
+          </Text>
+        ))}
+      </CheckboxGroup.Root>
+    </Flex>
+  )
+}

src/views/Generator/Allowlist/AllowlistDialog.tsx

@@ -1,32 +1,42 @@
-import { Cross2Icon, MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { css } from '@emotion/react'
+import {
+  Cross2Icon,
+  InfoCircledIcon,
+  MagnifyingGlassIcon,
+} from '@radix-ui/react-icons'
 import {
   Button,
   Checkbox,
-  CheckboxGroup,
   Flex,
   IconButton,
   ScrollArea,
   TextField,
   Text,
   Card,
   Inset,
+  Separator,
+  Tooltip,
 } from '@radix-ui/themes'
-import { isEqual } from 'lodash-es'
+import { every, includes } from 'lodash'
 import { useMemo, useState } from 'react'
 
 import { Label } from '@/components/Label'
 import { ProxyData } from '@/types'
 import { isNonStaticAssetResponse } from '@/utils/staticAssets'
 
+import AllowlistCheckGroup from './AllowlistCheckGroup'
+
 export function AllowlistDialog({
-  hosts,
+  firstPartyHosts,
+  thirdPartyHosts,
   allowlist,
   requests,
   includeStaticAssets,
   setAllowlist,
   setIncludeStaticAssets,
 }: {
-  hosts: string[]
+  firstPartyHosts: string[]
+  thirdPartyHosts: string[]
   allowlist: string[]
   includeStaticAssets: boolean
   requests: ProxyData[]
@@ -35,9 +45,14 @@ export function AllowlistDialog({
 }) {
   const [filter, setFilter] = useState('')
 
-  const filteredHosts = useMemo(
-    () => hosts.filter((host) => host.includes(filter)),
-    [hosts, filter]
+  const firstPartyFilteredHosts = useMemo(
+    () => firstPartyHosts.filter((host) => host.includes(filter)),
+    [firstPartyHosts, filter]
+  )
+
+  const thirdPartyFilteredHosts = useMemo(
+    () => thirdPartyHosts.filter((host) => host.includes(filter)),
+    [thirdPartyHosts, filter]
   )
 
   const staticAssetCount = useMemo(() => {
@@ -51,7 +66,7 @@ export function AllowlistDialog({
   }, [requests, allowlist])
 
   function handleSelectAll() {
-    setAllowlist(filteredHosts)
+    setAllowlist([...allowlist, ...firstPartyFilteredHosts])
   }
 
   function handleSelectNone() {
@@ -66,6 +81,11 @@ export function AllowlistDialog({
     setIncludeStaticAssets(checked && staticAssetCount > 0)
   }
 
+  const isSelectAllDisabled = useMemo(
+    () => every(firstPartyFilteredHosts, (host) => includes(allowlist, host)),
+    [firstPartyFilteredHosts, allowlist]
+  )
+
   return (
     <>
       <Text size="2" as="p" mb="2">
@@ -99,7 +119,7 @@ export function AllowlistDialog({
           <Button
             size="1"
             onClick={handleSelectAll}
-            disabled={isEqual(filteredHosts, allowlist)}
+            disabled={isSelectAllDisabled}
           >
             Select all
           </Button>
@@ -117,21 +137,28 @@ export function AllowlistDialog({
       <Card size="1" mb="2">
         <Inset css={{ height: '210px' }}>
           <ScrollArea scrollbars="vertical" type="always">
-            <Flex p="2" pr="4" asChild overflow="hidden">
-              <CheckboxGroup.Root
-                size="2"
-                value={allowlist}
+            <Flex direction="column" pt="2">
+              {firstPartyFilteredHosts.length > 0 && (
+                <AllowlistSeparator text="Hosts" />
+              )}
+              <AllowlistCheckGroup
+                allowlist={allowlist}
                 onValueChange={handleChangeHosts}
-              >
-                {filteredHosts.map((host) => (
-                  <Text as="label" size="2" key={host}>
-                    <Flex gap="2">
-                      <CheckboxGroup.Item value={host} />{' '}
-                      <Text truncate>{host}</Text>
-                    </Flex>
-                  </Text>
-                ))}
-              </CheckboxGroup.Root>
+                hosts={firstPartyFilteredHosts}
+              />
+              {thirdPartyFilteredHosts.length > 0 && (
+                <>
+                  <AllowlistSeparator
+                    text="3rd party hosts"
+                    tooltip="Selecting third-party hosts may include irrelevant or sensitive data outside your control. It is recommended that only hosts directly related to your app are selected."
+                  />
+                  <AllowlistCheckGroup
+                    allowlist={allowlist}
+                    onValueChange={handleChangeHosts}
+                    hosts={thirdPartyFilteredHosts}
+                  />
+                </>
+              )}
             </Flex>
           </ScrollArea>
         </Inset>
@@ -150,3 +177,34 @@ export function AllowlistDialog({
     </>
   )
 }
+
+function AllowlistSeparator({
+  text,
+  tooltip,
+}: {
+  text: string
+  tooltip?: string
+}) {
+  return (
+    <Flex align="center" px="2">
+      <Text size="1" color="gray">
+        {text}
+      </Text>
+      {tooltip && (
+        <Tooltip content={tooltip}>
+          <InfoCircledIcon
+            css={css`
+              margin-left: var(--space-1);
+            `}
+          />
+        </Tooltip>
+      )}
+      <Separator
+        ml="2"
+        css={css`
+          flex-grow: 1;
+        `}
+      />
+    </Flex>
+  )
+}