feat(editor): ✨ Restore published version button

Had to migrate webhooks into a standalone table
2022-03-01 07:13:09 +01:00
parent 0df719d531
commit e17a1a0869
46 changed files with 578 additions and 348 deletions
--- a/apps/viewer/package.json
+++ b/apps/viewer/package.json
@@ -7,8 +7,8 @@
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "test": "dotenv -e ./playwright/.env -e .env.local -- yarn playwright test",
-    "test:open": "dotenv -e ./playwright/.env -e .env.local -v PWDEBUG=1 -- yarn playwright test"
+    "test": "yarn playwright test",
+    "test:open": "PWDEBUG=1 yarn playwright test"
  },
  "dependencies": {
    "@sentry/nextjs": "^6.17.8",
--- a/apps/viewer/pages/[[...publicId]].tsx
+++ b/apps/viewer/pages/[[...publicId]].tsx
@@ -1,13 +1,14 @@
 import { NotFoundPage } from 'layouts/NotFoundPage'
 import { PublicTypebot } from 'models'
 import { GetServerSideProps, GetServerSidePropsContext } from 'next'
+import { isDefined, isNotDefined, omit } from 'utils'
 import { TypebotPage, TypebotPageProps } from '../layouts/TypebotPage'
 import prisma from '../libs/prisma'

 export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
 ) => {
-  let typebot: PublicTypebot | null
+  let typebot: Omit<PublicTypebot, 'createdAt' | 'updatedAt'> | null
  const isIE = /MSIE|Trident/.test(context.req.headers['user-agent'] ?? '')
  const pathname = context.resolvedUrl.split('?')[0]
  try {
@@ -42,17 +43,23 @@ const getTypebotFromPublicId = async (publicId?: string) => {
  const typebot = await prisma.publicTypebot.findUnique({
    where: { publicId },
  })
-  return (typebot as unknown as PublicTypebot) ?? null
+  if (isNotDefined(typebot)) return null
+  return omit(typebot as PublicTypebot, 'createdAt', 'updatedAt')
 }

 const getTypebotFromCustomDomain = async (customDomain: string) => {
  const typebot = await prisma.publicTypebot.findUnique({
    where: { customDomain },
  })
-  return (typebot as unknown as PublicTypebot) ?? null
+  if (isNotDefined(typebot)) return null
+  return omit(typebot as PublicTypebot, 'createdAt', 'updatedAt')
 }

 const App = ({ typebot, ...props }: TypebotPageProps) =>
-  typebot ? <TypebotPage typebot={typebot} {...props} /> : <NotFoundPage />
+  isDefined(typebot) ? (
+    <TypebotPage typebot={typebot} {...props} />
+  ) : (
+    <NotFoundPage />
+  )

 export default App
--- a/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/executeWebhook.ts
+++ b/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/executeWebhook.ts
@@ -7,6 +7,7 @@ import {
  Variable,
  Webhook,
  WebhookResponse,
+  WebhookStep,
 } from 'models'
 import { parseVariables } from 'bot-engine'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -32,14 +33,16 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    }
    const typebot = (await prisma.typebot.findUnique({
      where: { id: typebotId },
-    })) as unknown as Typebot
+      include: { webhooks: true },
+    })) as unknown as Typebot & { webhooks: Webhook[] }
    const step = typebot.blocks.find(byId(blockId))?.steps.find(byId(stepId))
-    if (!step || !('webhook' in step))
+    const webhook = typebot.webhooks.find(byId((step as WebhookStep).webhookId))
+    if (!webhook)
      return res
        .status(404)
        .send({ statusCode: 404, data: { message: `Couldn't find webhook` } })
    const result = await executeWebhook(typebot)(
-      step.webhook,
+      webhook,
      variables,
      blockId,
      resultValues
@@ -133,7 +136,7 @@ const getBodyContent =
    resultValues,
    blockId,
  }: {
-    body?: string
+    body?: string | null
    resultValues?: ResultValues
    blockId: string
  }): string | undefined => {
--- a/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/subscribeWebhook.ts
+++ b/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/subscribeWebhook.ts
@@ -1,10 +1,9 @@
 import { withSentry } from '@sentry/nextjs'
-import { Prisma } from 'db'
 import prisma from 'libs/prisma'
-import { HttpMethod, Typebot } from 'models'
+import { Typebot, WebhookStep } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { authenticateUser } from 'services/api/utils'
-import { isWebhookStep, methodNotAllowed } from 'utils'
+import { byId, methodNotAllowed } from 'utils'

 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
@@ -15,17 +14,18 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
      return res.status(403).send({ message: 'url is missing in body' })
    const { url } = body
    const typebotId = req.query.typebotId.toString()
+    const blockId = req.query.blockId.toString()
    const stepId = req.query.stepId.toString()
    const typebot = (await prisma.typebot.findUnique({
      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
    })) as unknown as Typebot | undefined
    if (!typebot) return res.status(400).send({ message: 'Typebot not found' })
    try {
-      const updatedTypebot = addUrlToWebhookStep(url, typebot, stepId)
-      await prisma.typebot.update({
-        where: { id_ownerId: { id: typebotId, ownerId: user.id } },
-        data: { blocks: updatedTypebot.blocks as Prisma.JsonArray },
-      })
+      const { webhookId } = typebot.blocks
+        .find(byId(blockId))
+        ?.steps.find(byId(stepId)) as WebhookStep
+      await prisma.webhook.update({ where: { id: webhookId }, data: { url } })
+
      return res.send({ message: 'success' })
    } catch (err) {
      return res
@@ -36,30 +36,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  return methodNotAllowed(res)
 }

-const addUrlToWebhookStep = (
-  url: string,
-  typebot: Typebot,
-  stepId: string
-): Typebot => ({
-  ...typebot,
-  blocks: typebot.blocks.map((b) => ({
-    ...b,
-    steps: b.steps.map((s) => {
-      if (s.id === stepId) {
-        if (!isWebhookStep(s)) throw new Error()
-        return {
-          ...s,
-          webhook: {
-            ...s.webhook,
-            url,
-            method: HttpMethod.POST,
-            body: '{{state}}',
-          },
-        }
-      }
-      return s
-    }),
-  })),
-})
-
 export default withSentry(handler)
--- a/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/unsubscribeWebhook.ts
+++ b/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/unsubscribeWebhook.ts
@@ -1,30 +1,30 @@
 import { withSentry } from '@sentry/nextjs'
-import { Prisma } from 'db'
 import prisma from 'libs/prisma'
-import { Typebot } from 'models'
+import { Typebot, WebhookStep } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { authenticateUser } from 'services/api/utils'
-import { omit } from 'services/utils'
-import { isWebhookStep, methodNotAllowed } from 'utils'
+import { byId, methodNotAllowed } from 'utils'

 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
    const user = await authenticateUser(req)
    if (!user) return res.status(401).json({ message: 'Not authenticated' })
    const typebotId = req.query.typebotId.toString()
+    const blockId = req.query.blockId.toString()
    const stepId = req.query.stepId.toString()
    const typebot = (await prisma.typebot.findUnique({
      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
    })) as unknown as Typebot | undefined
    if (!typebot) return res.status(400).send({ message: 'Typebot not found' })
    try {
-      const updatedTypebot = removeUrlFromWebhookStep(typebot, stepId)
-      await prisma.typebot.update({
-        where: { id_ownerId: { id: typebotId, ownerId: user.id } },
-        data: {
-          blocks: updatedTypebot.blocks as Prisma.JsonArray,
-        },
+      const { webhookId } = typebot.blocks
+        .find(byId(blockId))
+        ?.steps.find(byId(stepId)) as WebhookStep
+      await prisma.webhook.update({
+        where: { id: webhookId },
+        data: { url: null },
      })
+
      return res.send({ message: 'success' })
    } catch (err) {
      return res
@@ -35,21 +35,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  return methodNotAllowed(res)
 }

-const removeUrlFromWebhookStep = (
-  typebot: Typebot,
-  stepId: string
-): Typebot => ({
-  ...typebot,
-  blocks: typebot.blocks.map((b) => ({
-    ...b,
-    steps: b.steps.map((s) => {
-      if (s.id === stepId) {
-        if (!isWebhookStep(s)) throw new Error()
-        return { ...s, webhook: omit(s.webhook, 'url') }
-      }
-      return s
-    }),
-  })),
-})
-
 export default withSentry(handler)
--- a/apps/viewer/pages/api/typebots/[typebotId]/webhookSteps.ts
+++ b/apps/viewer/pages/api/typebots/[typebotId]/webhookSteps.ts
@@ -3,7 +3,7 @@ import prisma from 'libs/prisma'
 import { Block } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { authenticateUser } from 'services/api/utils'
-import { isWebhookStep, methodNotAllowed } from 'utils'
+import { byId, isNotDefined, isWebhookStep, methodNotAllowed } from 'utils'

 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'GET') {
@@ -12,13 +12,15 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const typebotId = req.query.typebotId.toString()
    const typebot = await prisma.typebot.findUnique({
      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
-      select: { blocks: true },
+      select: { blocks: true, webhooks: true },
    })
    const emptyWebhookSteps = (typebot?.blocks as Block[]).reduce<
      { blockId: string; id: string; name: string }[]
    >((emptyWebhookSteps, block) => {
      const steps = block.steps.filter(
-        (step) => isWebhookStep(step) && !step.webhook.url
+        (step) =>
+          isWebhookStep(step) &&
+          isNotDefined(typebot?.webhooks.find(byId(step.webhookId))?.url)
      )
      return [
        ...emptyWebhookSteps,
--- a/apps/viewer/playwright.config.ts
+++ b/apps/viewer/playwright.config.ts
@@ -1,6 +1,9 @@
 import { devices, PlaywrightTestConfig } from '@playwright/test'
 import path from 'path'

+// eslint-disable-next-line @typescript-eslint/no-var-requires
+require('dotenv').config({ path: path.join(__dirname, '.env.local') })
+
 const config: PlaywrightTestConfig = {
  globalSetup: require.resolve(path.join(__dirname, 'playwright/global-setup')),
  testDir: path.join(__dirname, 'playwright/tests'),
--- a/apps/viewer/playwright/fixtures/typebots/api.json
+++ b/apps/viewer/playwright/fixtures/typebots/api.json
@@ -284,12 +284,7 @@
          "blockId": "webhookBlock",
          "type": "Webhook",
          "options": { "responseVariableMapping": [], "variablesForTest": [] },
-          "webhook": {
-            "id": "3zZp4961n6CeorWR43jdV9",
-            "method": "GET",
-            "headers": [],
-            "queryParams": []
-          }
+          "webhookId": "webhook1"
        }
      ]
    }
--- a/apps/viewer/playwright/global-setup.ts
+++ b/apps/viewer/playwright/global-setup.ts
@@ -1,9 +1,6 @@
 import { FullConfig } from '@playwright/test'
 import { setupDatabase, teardownDatabase } from './services/database'

-// eslint-disable-next-line @typescript-eslint/no-var-requires
-require('dotenv').config({ path: '.env' })
-
 async function globalSetup(config: FullConfig) {
  const { baseURL } = config.projects[0].use
  if (!baseURL) throw new Error('baseURL is missing')
--- a/apps/viewer/playwright/services/database.ts
+++ b/apps/viewer/playwright/services/database.ts
@@ -1,8 +1,6 @@
 import {
-  Block,
  defaultSettings,
  defaultTheme,
-  PublicBlock,
  PublicTypebot,
  Step,
  Typebot,
@@ -12,12 +10,13 @@ import { readFileSync } from 'fs'

 const prisma = new PrismaClient()

-export const teardownDatabase = () => {
+export const teardownDatabase = async () => {
  try {
-    return prisma.user.delete({
+    await prisma.user.delete({
      where: { id: 'user' },
    })
  } catch {}
+  return
 }

 export const setupDatabase = () => createUser()
@@ -32,6 +31,15 @@ export const createUser = () =>
    },
  })

+export const createWebhook = (typebotId: string) =>
+  prisma.webhook.create({
+    data: {
+      id: 'webhook1',
+      typebotId: typebotId,
+      method: 'GET',
+    },
+  })
+
 export const createTypebots = async (partialTypebots: Partial<Typebot>[]) => {
  await prisma.typebot.createMany({
    data: partialTypebots.map(parseTestTypebot) as any[],
@@ -49,7 +57,7 @@ const parseTypebotToPublicTypebot = (
 ): PublicTypebot => ({
  id,
  name: typebot.name,
-  blocks: parseBlocksToPublicBlocks(typebot.blocks),
+  blocks: typebot.blocks,
  typebotId: typebot.id,
  theme: typebot.theme,
  settings: typebot.settings,
@@ -57,16 +65,10 @@ const parseTypebotToPublicTypebot = (
  variables: typebot.variables,
  edges: typebot.edges,
  customDomain: null,
+  createdAt: typebot.createdAt,
+  updatedAt: typebot.updatedAt,
 })

-const parseBlocksToPublicBlocks = (blocks: Block[]): PublicBlock[] =>
-  blocks.map((b) => ({
-    ...b,
-    steps: b.steps.map((s) =>
-      'webhook' in s ? { ...s, webhook: s.webhook.id } : s
-    ),
-  }))
-
 const parseTestTypebot = (partialTypebot: Partial<Typebot>): Typebot => ({
  id: partialTypebot.id ?? 'typebot',
  folderId: null,
--- a/apps/viewer/playwright/tests/api.spec.ts
+++ b/apps/viewer/playwright/tests/api.spec.ts
@@ -1,5 +1,9 @@
 import test, { expect } from '@playwright/test'
-import { createResults, importTypebotInDatabase } from '../services/database'
+import {
+  createResults,
+  createWebhook,
+  importTypebotInDatabase,
+} from '../services/database'
 import path from 'path'

 const typebotId = 'webhook-flow'
@@ -9,6 +13,7 @@ test.beforeAll(async () => {
      path.join(__dirname, '../fixtures/typebots/api.json'),
      { id: typebotId }
    )
+    await createWebhook(typebotId)
    await createResults({ typebotId })
  } catch (err) {}
 })
@@ -49,13 +54,13 @@ test('can get webhook steps', async ({ request }) => {
 test('can subscribe webhook', async ({ request }) => {
  expect(
    (
-      await request.patch(
+      await request.post(
        `/api/typebots/${typebotId}/blocks/webhookBlock/steps/webhookStep/subscribeWebhook`,
        { data: { url: 'https://test.com' } }
      )
    ).status()
  ).toBe(401)
-  const response = await request.patch(
+  const response = await request.post(
    `/api/typebots/${typebotId}/blocks/webhookBlock/steps/webhookStep/subscribeWebhook`,
    {
      headers: {
@@ -73,12 +78,12 @@ test('can subscribe webhook', async ({ request }) => {
 test('can unsubscribe webhook', async ({ request }) => {
  expect(
    (
-      await request.delete(
+      await request.post(
        `/api/typebots/${typebotId}/blocks/webhookBlock/steps/webhookStep/unsubscribeWebhook`
      )
    ).status()
  ).toBe(401)
-  const response = await request.delete(
+  const response = await request.post(
    `/api/typebots/${typebotId}/blocks/webhookBlock/steps/webhookStep/unsubscribeWebhook`,
    {
      headers: { Authorization: 'Bearer userToken' },
--- a/apps/viewer/services/utils.ts
+++ b/apps/viewer/services/utils.ts
@@ -1,19 +0,0 @@
-interface Omit {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  <T extends object, K extends [...(keyof T)[]]>(obj: T, ...keys: K): {
-    [K2 in Exclude<keyof T, K[number]>]: T[K2]
-  }
-}
-
-export const omit: Omit = (obj, ...keys) => {
-  const ret = {} as {
-    [K in keyof typeof obj]: typeof obj[K]
-  }
-  let key: keyof typeof obj
-  for (key in obj) {
-    if (!keys.includes(key)) {
-      ret[key] = obj[key]
-    }
-  }
-  return ret
-}