blsmedia/bot
2
0
Fork 0
Code Activity

🐛 (results) Fix bug preventing user from seeing linked typebots results

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-11-06 09:57:08 +01:00
parent 63845effaf
commit 6dd7bd9562
18 changed files with 234 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/builder/components/results/ResultModal.tsx
View File

@ -11,8 +11,8 @@ import {
} from '@chakra-ui/react'
import { useResults } from 'contexts/ResultsProvider'
import React from 'react'
import { HeaderIcon } from 'services/typebots/results'
import { isDefined } from 'utils'
import { HeaderIcon } from './ResultsTable/ResultsTable'
type Props = {
resultIdx: number | null

2
apps/builder/components/results/ResultsContent.tsx
View File

@ -27,7 +27,7 @@ export const ResultsContent = () => {
const handleResultModalClose = () => setExpandedResultIndex(null)
const handleLogOpenIndex = (index: number) => () => {
if (!results) return
if (!results[index]) return
setInspectingLogsResultId(results[index].id)
}

2
apps/builder/components/results/ResultsTable/ColumnsSettingsButton.tsx
View File

@ -15,7 +15,6 @@ import { ToolIcon, EyeIcon, EyeOffIcon, GripIcon } from 'assets/icons'
import { ResultHeaderCell } from 'models'
import React, { forwardRef, useState } from 'react'
import { isNotDefined } from 'utils'
import { HeaderIcon } from './ResultsTable'
import {
DndContext,
closestCenter,
@ -35,6 +34,7 @@ import {
useSortable,
arrayMove,
} from '@dnd-kit/sortable'
import { HeaderIcon } from 'services/typebots/results'
type Props = {
resultHeader: ResultHeaderCell[]

39
apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx
View File

@ -93,18 +93,39 @@ export const ResultsActionButtons = ({
: tableData.filter((data) =>
selectedResultsId.includes(data.id.plainText)
)
const fields = typebot?.resultsTablePreferences?.columnsOrder
? typebot.resultsTablePreferences.columnsOrder.reduce<string[]>(
(currentHeaderLabels, columnId) => {
if (
typebot.resultsTablePreferences?.columnsVisibility[columnId] ===
false
)
return currentHeaderLabels
const columnLabel = resultHeader.find(
(headerCell) => headerCell.id === columnId
)?.label
if (!columnLabel) return currentHeaderLabels
return [...currentHeaderLabels, columnLabel]
},
[]
)
: resultHeader.map((headerCell) => headerCell.label)
const data = dataToUnparse.map<{ [key: string]: string }>((data) => {
const newObject: { [key: string]: string } = {}
fields?.forEach((field) => {
console.log(data[field])
newObject[field] = data[field]?.plainText
})
return newObject
})
const csvData = new Blob(
[
unparse({
data: dataToUnparse.map<{ [key: string]: string }>((data) => {
const newObject: { [key: string]: string } = {}
Object.keys(data).forEach((key) => {
newObject[key] = (data[key] as { plainText: string })
.plainText as string
})
return newObject
}),
fields: resultHeader.map((h) => h.label),
data,
fields,
}),
],
{

19
apps/builder/components/results/ResultsTable/ResultsTable.tsx
View File

@ -8,7 +8,7 @@ import {
Stack,
Text,
} from '@chakra-ui/react'
import { AlignLeftTextIcon, CalendarIcon, CodeIcon } from 'assets/icons'
import { AlignLeftTextIcon } from 'assets/icons'
import { ResultHeaderCell, ResultsTablePreferences } from 'models'
import React, { useEffect, useRef, useState } from 'react'
import { LoadingRows } from './LoadingRows'
@ -18,14 +18,13 @@ import {
ColumnOrderState,
ColumnDef,
} from '@tanstack/react-table'
import { BlockIcon } from 'components/editor/BlocksSideBar/BlockIcon'
import { ColumnSettingsButton } from './ColumnsSettingsButton'
import { useTypebot } from 'contexts/TypebotContext'
import { useDebounce } from 'use-debounce'
import { ResultsActionButtons } from './ResultsActionButtons'
import { Row } from './Row'
import { HeaderRow } from './HeaderRow'
import { CellValueType, TableData } from 'services/typebots/results'
import { CellValueType, HeaderIcon, TableData } from 'services/typebots/results'
type ResultsTableProps = {
resultHeader: ResultHeaderCell[]
@ -112,7 +111,7 @@ export const ResultsTable = ({
...resultHeader.map<ColumnDef<TableData>>((header) => ({
id: header.id,
accessorKey: header.label,
size: header.isLong ? 400 : 200,
size: 200,
header: () => (
<HStack overflow="hidden" data-testid={`${header.label} header`}>
<HeaderIcon header={header} />
@ -147,8 +146,7 @@ export const ResultsTable = ({
),
},
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[resultHeader]
[onLogOpenIndex, resultHeader]
)
const instance = useReactTable({
@ -258,12 +256,3 @@ const IndeterminateCheckbox = React.forwardRef(
)
}
)
export const HeaderIcon = ({ header }: { header: ResultHeaderCell }) =>
header.blockType ? (
<BlockIcon type={header.blockType} />
) : header.variableId ? (
<CodeIcon />
) : (
<CalendarIcon />
)

5
apps/builder/components/share/EditableUrl.tsx
View File

@ -29,12 +29,11 @@ export const EditableUrl = ({
const [value, setValue] = useState(pathname)
const handleSubmit = (newPathname: string) => {
if (/^[a-z]+(-[a-z]+)*$/.test(newPathname))
return onPathnameChange(newPathname)
if (/^[a-z0-9-]*$/.test(newPathname)) return onPathnameChange(newPathname)
setValue(pathname)
showToast({
title: 'Invalid ID',
description: 'Should contain only contain letters and dashes.',
description: 'Should contain only contain letters, numbers and dashes.',
})
}

25
apps/builder/contexts/ResultsProvider.tsx
View File

@ -6,7 +6,7 @@ import {
useResults as useFetchResults,
} from 'services/typebots/results'
import { KeyedMutator } from 'swr'
import { isDefined, parseResultHeader } from 'utils'
import { parseResultHeader } from 'utils'
import { useTypebot } from './TypebotContext'
const resultsContext = createContext<{
@ -46,19 +46,17 @@ export const ResultsProvider = ({
typebotId,
})
console.log(data?.flatMap((d) => d.results) ?? [])
const fetchMore = () => setSize((state) => state + 1)
const groupsAndVariables = {
groups: [
...(publishedTypebot?.groups ?? []),
...(linkedTypebots?.flatMap((t) => t.groups) ?? []),
].filter(isDefined),
variables: [
...(publishedTypebot?.variables ?? []),
...(linkedTypebots?.flatMap((t) => t.variables) ?? []),
].filter(isDefined),
}
const resultHeader = parseResultHeader(groupsAndVariables)
const resultHeader = useMemo(
() =>
publishedTypebot
? parseResultHeader(publishedTypebot, linkedTypebots)
: [],
[linkedTypebots, publishedTypebot]
)
const tableData = useMemo(
() =>
@ -68,8 +66,7 @@ export const ResultsProvider = ({
resultHeader
)
: [],
// eslint-disable-next-line react-hooks/exhaustive-deps
[publishedTypebot?.id, resultHeader.length, data]
[publishedTypebot, data, resultHeader]
)
return (

2
apps/builder/pages/api/typebots.ts
View File

@ -45,7 +45,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
],
},
orderBy: { createdAt: 'desc' },
select: { name: true, id: true, groups: true },
select: { name: true, id: true, groups: true, variables: true },
})
return res.send({ typebots })
}

2
apps/builder/playwright/tests/billing.spec.ts
View File

@ -228,7 +228,7 @@ test('should display invoices', async ({ page }) => {
await page.click('text=Billing & Usage')
await expect(page.locator('text="Invoices"')).toBeVisible()
await expect(page.locator('tr')).toHaveCount(3)
await expect(page.locator('text="€39.00"')).toBeVisible()
await expect(page.locator('text="$39.00"')).toBeVisible()
})
test('custom plans should work', async ({ page }) => {

10
apps/builder/playwright/tests/results.spec.ts
View File

@ -21,7 +21,7 @@ test.beforeEach(async () => {
await injectFakeResults({ typebotId, count: 200, isChronological: true })
})
test('Results', async ({ page }) => {
test('table features should work', async ({ page }) => {
await page.goto(`/typebots/${typebotId}/results`)
await test.step('Check header format', async () => {
@ -147,14 +147,14 @@ test('Results', async ({ page }) => {
const validateExportSelection = (data: unknown[]) => {
expect(data).toHaveLength(3)
expect((data[1] as unknown[])[3]).toBe('content199')
expect((data[2] as unknown[])[3]).toBe('content198')
expect((data[1] as unknown[])[0]).toBe('content199')
expect((data[2] as unknown[])[0]).toBe('content198')
}
const validateExportAll = (data: unknown[]) => {
expect(data).toHaveLength(201)
expect((data[1] as unknown[])[3]).toBe('content199')
expect((data[200] as unknown[])[3]).toBe('content0')
expect((data[1] as unknown[])[0]).toBe('content199')
expect((data[200] as unknown[])[0]).toBe('content0')
}
const scrollToBottom = (page: Page) =>

2
apps/builder/services/api/dbRules.ts
View File

@ -73,7 +73,7 @@ export const canPublishFileInput = async ({
return false
}
if (workspace?.plan === Plan.FREE) {
forbidden(res, 'You need to upgrade your plan to use this feature')
forbidden(res, 'You need to upgrade your plan to use file input blocks')
return false
}
return true

20
apps/builder/services/typebots/results.tsx
View File

@ -136,7 +136,7 @@ export const parseSubmissionsColumns = (
): HeaderCell[] =>
resultHeader.map((header) => ({
Header: (
<HStack minW={header.isLong ? '400px' : '150px'} maxW="500px">
<HStack minW="150px" maxW="500px">
<HeaderIcon header={header} />
<Text>{header.label}</Text>
</HStack>
@ -144,10 +144,10 @@ export const parseSubmissionsColumns = (
accessor: header.label,
}))
const HeaderIcon = ({ header }: { header: ResultHeaderCell }) =>
export const HeaderIcon = ({ header }: { header: ResultHeaderCell }) =>
header.blockType ? (
<BlockIcon type={header.blockType} />
) : header.variableId ? (
) : header.variableIds ? (
<CodeIcon />
) : (
<CalendarIcon />
@ -174,9 +174,13 @@ export const convertResultsToTableData = (
if ('groupId' in answerOrVariable) {
const answer = answerOrVariable as Answer
const header = answer.variableId
? headerCells.find((h) => h.variableId === answer.variableId)
: headerCells.find((h) => h.blockId === answer.blockId)
if (!header || !header.blockId || !header.blockType) return o
? headerCells.find((headerCell) =>
headerCell.variableIds?.includes(answer.variableId as string)
)
: headerCells.find((headerCell) =>
headerCell.blocks?.some((block) => block.id === answer.blockId)
)
if (!header || !header.blocks || !header.blockType) return o
return {
...o,
[header.label]: {
@ -186,7 +190,9 @@ export const convertResultsToTableData = (
}
}
const variable = answerOrVariable as VariableWithValue
const key = headerCells.find((h) => h.variableId === variable.id)?.label
const key = headerCells.find((headerCell) =>
headerCell.variableIds?.includes(variable.id)
)?.label
if (!key) return o
if (isDefined(o[key])) return o
return {

11
apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/executeWebhook.ts
View File

@ -203,16 +203,7 @@ const getBodyContent =
return body === '{{state}}'
? JSON.stringify(
resultValues
? parseAnswers({
groups: [
...typebot.groups,
...linkedTypebots.flatMap((t) => t.groups),
],
variables: [
...typebot.variables,
...linkedTypebots.flatMap((t) => t.variables),
],
})(resultValues)
? parseAnswers(typebot, linkedTypebots)(resultValues)
: await parseSampleResult(typebot, linkedTypebots)(groupId)
)
: body

8
apps/viewer/pages/api/typebots/[typebotId]/integrations/email.tsx
View File

@ -180,13 +180,7 @@ const getEmailBody = async ({
})) as unknown as PublicTypebot
if (!typebot) return
const linkedTypebots = await getLinkedTypebots(typebot)
const answers = parseAnswers({
groups: [...typebot.groups, ...linkedTypebots.flatMap((t) => t.groups)],
variables: [
...typebot.variables,
...linkedTypebots.flatMap((t) => t.variables),
],
})(resultValues)
const answers = parseAnswers(typebot, linkedTypebots)(resultValues)
return {
html: render(
<DefaultBotNotificationEmail

4
apps/viewer/playwright/tests/api.spec.ts
View File

@ -26,8 +26,8 @@ test('can list typebots', async ({ request }) => {
const response = await request.get(`/api/typebots`, {
headers: { Authorization: `Bearer ${apiToken}` },
})
const { typebots } = await response.json()
expect(typebots).toHaveLength(1)
const { typebots } = (await response.json()) as { typebots: unknown[] }
expect(typebots.length).toBeGreaterThanOrEqual(1)
expect(typebots[0]).toMatchObject({
id: typebotId,
publishedTypebotId: null,

30
apps/viewer/services/api/webhooks.ts
View File

@ -18,13 +18,7 @@ export const parseSampleResult =
async (
currentGroupId: string
): Promise<Record<string, string | boolean | undefined>> => {
const header = parseResultHeader({
groups: [...typebot.groups, ...linkedTypebots.flatMap((t) => t.groups)],
variables: [
...typebot.variables,
...linkedTypebots.flatMap((t) => t.variables),
],
})
const header = parseResultHeader(typebot, linkedTypebots)
const linkedInputBlocks = await extractLinkedInputBlocks(
typebot,
linkedTypebots
@ -33,7 +27,7 @@ export const parseSampleResult =
return {
message: 'This is a sample result, it has been generated ⬇️',
'Submitted at': new Date().toISOString(),
...parseGroupsResultSample(linkedInputBlocks, header),
...parseResultSample(linkedInputBlocks, header),
}
}
@ -81,24 +75,26 @@ const extractLinkedInputBlocks =
).concat(linkedBotInputs.flatMap((l) => l))
}
const parseGroupsResultSample = (
const parseResultSample = (
inputBlocks: InputBlock[],
header: ResultHeaderCell[]
headerCells: ResultHeaderCell[]
) =>
header.reduce<Record<string, string | boolean | undefined>>(
(blocks, cell) => {
const inputBlock = inputBlocks.find((block) => block.id === cell.blockId)
headerCells.reduce<Record<string, string | boolean | undefined>>(
(resultSample, cell) => {
const inputBlock = inputBlocks.find((inputBlock) =>
cell.blocks?.some((block) => block.id === inputBlock.id)
)
if (isNotDefined(inputBlock)) {
if (cell.variableId)
if (cell.variableIds)
return {
...blocks,
...resultSample,
[cell.label]: 'content',
}
return blocks
return resultSample
}
const value = getSampleValue(inputBlock)
return {
...blocks,
...resultSample,
[cell.label]: value,
}
},

8
packages/models/result.ts
View File

@ -17,8 +17,10 @@ export type ResultValues = Pick<
export type ResultHeaderCell = {
id: string
label: string
blockId?: string
blocks?: {
id: string
groupId: string
}[]
blockType?: InputBlockType
isLong?: boolean
variableId?: string
variableIds?: string[]
}

194
packages/utils/results.ts
View File

@ -6,90 +6,173 @@ import {
ResultWithAnswers,
Answer,
VariableWithValue,
Typebot,
} from 'models'
import { isInputBlock, isDefined, byId } from './utils'
export const parseResultHeader = ({
groups,
variables,
}: {
groups: Group[]
variables: Variable[]
}): ResultHeaderCell[] => {
const parsedGroups = parseInputsResultHeader({ groups, variables })
export const parseResultHeader = (
typebot: Pick<Typebot, 'groups' | 'variables'>,
linkedTypebots: Pick<Typebot, 'groups' | 'variables'>[] | undefined
): ResultHeaderCell[] => {
const parsedGroups = [
...typebot.groups,
...(linkedTypebots ?? []).flatMap((linkedTypebot) => linkedTypebot.groups),
]
const parsedVariables = [
...typebot.variables,
...(linkedTypebots ?? []).flatMap(
(linkedTypebot) => linkedTypebot.variables
),
]
const inputsResultHeader = parseInputsResultHeader({
groups: parsedGroups,
variables: parsedVariables,
})
return [
{ label: 'Submitted at', id: 'date' },
...parsedGroups,
...parseVariablesHeaders(variables, parsedGroups),
...inputsResultHeader,
...parseVariablesHeaders(parsedVariables, inputsResultHeader),
]
}
type ResultHeaderCellWithBlock = Omit<ResultHeaderCell, 'blocks'> & {
blocks: NonNullable<ResultHeaderCell['blocks']>
}
const parseInputsResultHeader = ({
groups,
variables,
}: {
groups: Group[]
variables: Variable[]
}): ResultHeaderCell[] =>
}): ResultHeaderCellWithBlock[] =>
(
groups
.flatMap((g) =>
g.blocks.map((s) => ({
...s,
blockTitle: g.title,
.flatMap((group) =>
group.blocks.map((block) => ({
...block,
groupTitle: group.title,
}))
)
.filter((block) => isInputBlock(block)) as (InputBlock & {
blockTitle: string
groupTitle: string
})[]
).reduce<ResultHeaderCell[]>((headers, inputBlock) => {
).reduce<ResultHeaderCellWithBlock[]>((existingHeaders, inputBlock) => {
if (
headers.find(
(h) =>
isDefined(h.variableId) &&
h.variableId ===
variables.find(byId(inputBlock.options.variableId))?.id
existingHeaders.some(
(existingHeader) =>
inputBlock.options.variableId &&
existingHeader.variableIds?.includes(inputBlock.options.variableId)
)
)
return headers
return existingHeaders
const matchedVariableName =
inputBlock.options.variableId &&
variables.find(byId(inputBlock.options.variableId))?.name
let label = matchedVariableName ?? inputBlock.blockTitle
const totalPrevious = headers.filter((h) => h.label.includes(label)).length
if (totalPrevious > 0) label = label + ` (${totalPrevious})`
return [
...headers,
{
id: inputBlock.id,
blockType: inputBlock.type,
blockId: inputBlock.id,
variableId: inputBlock.options.variableId,
label,
isLong: 'isLong' in inputBlock.options && inputBlock.options.isLong,
},
]
let label = matchedVariableName ?? inputBlock.groupTitle
const existingHeader = existingHeaders.find((h) => h.label === label)
if (existingHeader) {
if (
existingHeader.blocks?.some(
(block) => block.groupId === inputBlock.groupId
)
) {
const totalPrevious = existingHeaders.filter((h) =>
h.label.includes(label)
).length
const newHeaderCell: ResultHeaderCellWithBlock = {
id: inputBlock.id,
label: label + ` (${totalPrevious})`,
blocks: [
{
id: inputBlock.id,
groupId: inputBlock.groupId,
},
],
blockType: inputBlock.type,
variableIds: inputBlock.options.variableId
? [inputBlock.options.variableId]
: undefined,
}
return [...existingHeaders, newHeaderCell]
}
const updatedHeaderCell: ResultHeaderCellWithBlock = {
...existingHeader,
variableIds:
existingHeader.variableIds && inputBlock.options.variableId
? existingHeader.variableIds.concat([inputBlock.options.variableId])
: undefined,
blocks: existingHeader.blocks.concat({
id: inputBlock.id,
groupId: inputBlock.groupId,
}),
}
return [
...existingHeaders.filter(
(existingHeader) => existingHeader.label !== label
),
updatedHeaderCell,
]
}
const newHeaderCell: ResultHeaderCellWithBlock = {
id: inputBlock.id,
label,
blocks: [
{
id: inputBlock.id,
groupId: inputBlock.groupId,
},
],
blockType: inputBlock.type,
variableIds: inputBlock.options.variableId
? [inputBlock.options.variableId]
: undefined,
}
return [...existingHeaders, newHeaderCell]
}, [])
const parseVariablesHeaders = (
variables: Variable[],
blockResultHeader: ResultHeaderCell[]
existingInputResultHeaders: ResultHeaderCell[]
) =>
variables.reduce<ResultHeaderCell[]>((headers, v) => {
if (blockResultHeader.find((h) => h.variableId === v.id)) return headers
return [
...headers,
{
id: v.id,
label: v.name,
variableId: v.id,
},
]
variables.reduce<ResultHeaderCell[]>((existingHeaders, variable) => {
if (
existingInputResultHeaders.some((existingInputResultHeader) =>
existingInputResultHeader.variableIds?.includes(variable.id)
)
)
return existingHeaders
const headerCellWithSameLabel = existingHeaders.find(
(existingHeader) => existingHeader.label === variable.name
)
if (headerCellWithSameLabel) {
const updatedHeaderCell: ResultHeaderCell = {
...headerCellWithSameLabel,
variableIds: headerCellWithSameLabel.variableIds?.concat([variable.id]),
}
return [
...existingHeaders.filter((h) => h.label !== variable.name),
updatedHeaderCell,
]
}
const newHeaderCell: ResultHeaderCell = {
id: variable.id,
label: variable.name,
variableIds: [variable.id],
}
return [...existingHeaders, newHeaderCell]
}, [])
export const parseAnswers =
({ groups, variables }: { groups: Group[]; variables: Variable[] }) =>
(
typebot: Pick<Typebot, 'groups' | 'variables'>,
linkedTypebots: Pick<Typebot, 'groups' | 'variables'>[] | undefined
) =>
({
createdAt,
answers,
@ -97,7 +180,7 @@ export const parseAnswers =
}: Pick<ResultWithAnswers, 'createdAt' | 'answers' | 'variables'>): {
[key: string]: string
} => {
const header = parseResultHeader({ groups, variables })
const header = parseResultHeader(typebot, linkedTypebots)
return {
submittedAt: createdAt,
...[...answers, ...resultVariables].reduce<{
@ -106,9 +189,14 @@ export const parseAnswers =
if ('blockId' in answerOrVariable) {
const answer = answerOrVariable as Answer
const key = answer.variableId
? header.find((cell) => cell.variableId === answer.variableId)
?.label
: header.find((cell) => cell.blockId === answer.blockId)?.label
? header.find(
(cell) =>
answer.variableId &&
cell.variableIds?.includes(answer.variableId)
)?.label
: header.find((cell) =>
cell.blocks?.some((block) => block.id === answer.blockId)
)?.label
if (!key) return o
return {
...o,