✨ (googleSheets) Advanced get filtering

Allows you to select rows based on advanced conditions / comparisons

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx

@@ -4,6 +4,9 @@ import { useTypebot } from '@/features/editor'
 import {
   Cell,
   CredentialsType,
+  defaultGoogleSheetsGetOptions,
+  defaultGoogleSheetsInsertOptions,
+  defaultGoogleSheetsUpdateOptions,
   ExtractingCell,
   GoogleSheetsAction,
   GoogleSheetsGetOptions,
@@ -22,6 +25,7 @@ import { TableListItemProps, TableList } from '@/components/TableList'
 import { CredentialsDropdown } from '@/features/credentials'
 import { useSheets } from '../../hooks/useSheets'
 import { Sheet } from '../../types'
+import { RowsFilterTableList } from './RowsFilterTableList'
 
 type Props = {
   options: GoogleSheetsOptions
@@ -56,24 +60,21 @@ export const GoogleSheetsSettingsBody = ({
       case GoogleSheetsAction.GET: {
         const newOptions: GoogleSheetsGetOptions = {
           ...options,
-          action,
-          cellsToExtract: [],
+          ...defaultGoogleSheetsGetOptions,
         }
         return onOptionsChange({ ...newOptions })
       }
       case GoogleSheetsAction.INSERT_ROW: {
         const newOptions: GoogleSheetsInsertRowOptions = {
           ...options,
-          action,
-          cellsToInsert: [],
+          ...defaultGoogleSheetsInsertOptions,
         }
         return onOptionsChange({ ...newOptions })
       }
       case GoogleSheetsAction.UPDATE_ROW: {
         const newOptions: GoogleSheetsUpdateRowOptions = {
           ...options,
-          action,
-          cellsToUpsert: [],
+          ...defaultGoogleSheetsUpdateOptions,
         }
         return onOptionsChange({ ...newOptions })
       }
@@ -161,6 +162,10 @@ const ActionOptions = ({
   const handleExtractingCellsChange = (cellsToExtract: ExtractingCell[]) =>
     onOptionsChange({ ...options, cellsToExtract } as GoogleSheetsOptions)
 
+  const handleFilterChange = (
+    filter: NonNullable<GoogleSheetsGetOptions['filter']>
+  ) => onOptionsChange({ ...options, filter } as GoogleSheetsOptions)
+
   const UpdatingCellItem = useMemo(
     () =>
       function Component(props: TableListItemProps<Cell>) {
@@ -210,12 +215,26 @@ const ActionOptions = ({
     case GoogleSheetsAction.GET:
       return (
         <Stack>
-          <Text>Row to select</Text>
-          <CellWithValueStack
-            columns={sheet?.columns ?? []}
-            item={options.referenceCell ?? { id: 'reference' }}
-            onItemChange={handleReferenceCellChange}
-          />
+          {options.referenceCell ? (
+            <>
+              <Text>Row to select</Text>
+              <CellWithValueStack
+                columns={sheet?.columns ?? []}
+                item={options.referenceCell ?? { id: 'reference' }}
+                onItemChange={handleReferenceCellChange}
+              />
+            </>
+          ) : (
+            <>
+              <Text>Filter</Text>
+              <RowsFilterTableList
+                columns={sheet?.columns ?? []}
+                filter={options.filter}
+                onFilterChange={handleFilterChange}
+              />
+            </>
+          )}
+
           <Text>Cells to extract</Text>
           <TableList<ExtractingCell>
             initialItems={options.cellsToExtract}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/RowsFilterComparisonItem.tsx

@@ -0,0 +1,53 @@
+import { DropdownList } from '@/components/DropdownList'
+import { Input } from '@/components/inputs'
+import { TableListItemProps } from '@/components/TableList'
+import { Stack } from '@chakra-ui/react'
+import { ComparisonOperators, RowsFilterComparison } from 'models'
+import React from 'react'
+
+export const RowsFilterComparisonItem = ({
+  item,
+  columns,
+  onItemChange,
+}: TableListItemProps<RowsFilterComparison> & { columns: string[] }) => {
+  const handleColumnSelect = (column: string) => {
+    if (column === item.column) return
+    onItemChange({ ...item, column })
+  }
+
+  const handleSelectComparisonOperator = (
+    comparisonOperator: ComparisonOperators
+  ) => {
+    if (comparisonOperator === item.comparisonOperator) return
+    onItemChange({ ...item, comparisonOperator })
+  }
+
+  const handleChangeValue = (value: string) => {
+    if (value === item.value) return
+    onItemChange({ ...item, value })
+  }
+
+  return (
+    <Stack p="4" rounded="md" flex="1" borderWidth="1px">
+      <DropdownList<string>
+        currentItem={item.column}
+        onItemSelect={handleColumnSelect}
+        items={columns}
+        placeholder="Select a column"
+      />
+      <DropdownList<ComparisonOperators>
+        currentItem={item.comparisonOperator}
+        onItemSelect={handleSelectComparisonOperator}
+        items={Object.values(ComparisonOperators)}
+        placeholder="Select an operator"
+      />
+      {item.comparisonOperator !== ComparisonOperators.IS_SET && (
+        <Input
+          defaultValue={item.value ?? ''}
+          onChange={handleChangeValue}
+          placeholder="Type a value..."
+        />
+      )}
+    </Stack>
+  )
+}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/RowsFilterTableList.tsx

@@ -0,0 +1,55 @@
+import { DropdownList } from '@/components/DropdownList'
+import { TableList, TableListItemProps } from '@/components/TableList'
+import { Flex } from '@chakra-ui/react'
+import {
+  GoogleSheetsGetOptions,
+  LogicalOperator,
+  RowsFilterComparison,
+} from 'models'
+import React, { useCallback } from 'react'
+import { RowsFilterComparisonItem } from './RowsFilterComparisonItem'
+
+type Props = {
+  filter: NonNullable<GoogleSheetsGetOptions['filter']>
+  columns: string[]
+  onFilterChange: (
+    filter: NonNullable<GoogleSheetsGetOptions['filter']>
+  ) => void
+}
+
+export const RowsFilterTableList = ({
+  filter,
+  columns,
+  onFilterChange,
+}: Props) => {
+  const handleComparisonsChange = (comparisons: RowsFilterComparison[]) =>
+    onFilterChange({ ...filter, comparisons })
+
+  const handleLogicalOperatorChange = (logicalOperator: LogicalOperator) =>
+    onFilterChange({ ...filter, logicalOperator })
+
+  const createRowsFilterComparisonItem = useCallback(
+    (props: TableListItemProps<RowsFilterComparison>) => (
+      <RowsFilterComparisonItem {...props} columns={columns} />
+    ),
+    [columns]
+  )
+
+  return (
+    <TableList<RowsFilterComparison>
+      initialItems={filter?.comparisons}
+      onItemsChange={handleComparisonsChange}
+      Item={createRowsFilterComparisonItem}
+      ComponentBetweenItems={() => (
+        <Flex justify="center">
+          <DropdownList<LogicalOperator>
+            currentItem={filter?.logicalOperator}
+            onItemSelect={handleLogicalOperatorChange}
+            items={Object.values(LogicalOperator)}
+          />
+        </Flex>
+      )}
+      addLabel="Add filter rule"
+    />
+  )
+}

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/RowsFilterTableList/index.ts

@@ -0,0 +1,2 @@
+export * from './RowsFilterComparisonItem'
+export * from './RowsFilterTableList'

apps/builder/src/features/blocks/integrations/googleSheets/googleSheets.spec.ts

@@ -95,7 +95,7 @@ test.describe.parallel('Google sheets integration', () => {
               '/api/integrations/google-sheets/spreadsheets/1k_pIDw3YHl9tlZusbBVSBRY0PeRPd2H6t4Nj7rwnOtM/sheets/0'
             ) &&
           resp.status() === 200 &&
-          resp.request().method() === 'PATCH'
+          resp.request().method() === 'POST'
       ),
       typebotViewer(page)
         .locator('input[placeholder="Type your email..."]')
@@ -118,10 +118,21 @@ test.describe.parallel('Google sheets integration', () => {
 
     await page.click('text=Select a column')
     await page.click('button >> text="Email"')
+    await page.getByRole('button', { name: 'Select an operator' }).click()
+    await page.getByRole('menuitem', { name: 'Equal to' }).click()
     await page.click('[aria-label="Insert a variable"]')
     await page.click('button >> text="Email" >> nth=1')
 
-    await page.click('text=Add a value')
+    await page.getByRole('button', { name: 'Add filter rule' }).click()
+    await page.getByRole('button', { name: 'AND', exact: true }).click()
+    await page.getByRole('menuitem', { name: 'OR' }).click()
+
+    await page.click('text=Select a column')
+    await page.getByRole('menuitem', { name: 'Email' }).click()
+    await page.getByRole('button', { name: 'Select an operator' }).click()
+    await page.getByRole('menuitem', { name: 'Equal to' }).click()
+    await page.getByPlaceholder('Type a value...').nth(-1).fill('test@test.com')
+
     await page.click('text=Select a column')
     await page.click('text="First name"')
     await createNewVar(page, 'First name')
@@ -138,9 +149,9 @@ test.describe.parallel('Google sheets integration', () => {
     await typebotViewer(page)
       .locator('input[placeholder="Type your email..."]')
       .press('Enter')
-    await expect(
-      typebotViewer(page).locator('text=Your name is: John Smith')
-    ).toBeVisible({ timeout: 30000 })
+    await expect(typebotViewer(page).locator('text=Your name is:')).toHaveText(
+      /John|Fred|Georges/
+    )
   })
 })