feat(editor): ✨ Start preview from any block

apps/builder/playwright/fixtures/typebots/editor/previewFromGroup.json

@@ -0,0 +1 @@
+{"id":"cl3wo63la1004801amwsqzbof","createdAt":"2022-06-02T07:01:46.030Z","updatedAt":"2022-06-02T07:34:02.336Z","icon":null,"name":"My typebot","publishedTypebotId":null,"folderId":null,"blocks":[{"id":"cl3wo63l80000801ae4lxgvad","steps":[{"id":"cl3wo63l80001801a8u9g96sp","type":"start","label":"Start","blockId":"cl3wo63l80000801ae4lxgvad","outgoingEdgeId":"cl3wo83ha000j2e6gdrk1crro"}],"title":"Start","graphCoordinates":{"x":0,"y":0}},{"id":"cl3wo7ucc000g2e6gdus80qeb","graphCoordinates":{"x":355,"y":-13},"title":"Group #1","steps":[{"id":"cl3wo7uce000h2e6gr9r3b11k","blockId":"cl3wo7ucc000g2e6gdus80qeb","type":"text","content":{"html":"<div>Hello this is group 1</div>","richText":[{"type":"p","children":[{"text":"Hello this is group 1"}]}],"plainText":"Hello this is group 1"}},{"id":"cl3wo8047000i2e6glma69ddz","blockId":"cl3wo7ucc000g2e6gdus80qeb","type":"text","content":{"html":"<div>What&#x27;s your name?</div>","richText":[{"type":"p","children":[{"text":"What's your name?"}]}],"plainText":"What's your name?"}},{"id":"cl3wo85e8000k2e6gdb8qk860","blockId":"cl3wo7ucc000g2e6gdus80qeb","type":"text input","options":{"isLong":false,"labels":{"button":"Send","placeholder":"Type your answer..."}}}]},{"id":"cl3wo87et000l2e6ga64ipat6","graphCoordinates":{"x":22,"y":260},"title":"Group #1 copy","steps":[{"id":"cl3wo87eu000m2e6g5h90qs9u","blockId":"cl3wo87et000l2e6ga64ipat6","type":"text","content":{"html":"<div>Hello this is group 2</div>","richText":[{"type":"p","children":[{"text":"Hello this is group 2"}]}],"plainText":"Hello this is group 2"}},{"id":"cl3wo87ev000n2e6gp7vn2z62","blockId":"cl3wo87et000l2e6ga64ipat6","type":"text","content":{"html":"<div>What&#x27;s your name?</div>","richText":[{"type":"p","children":[{"text":"What's your name?"}]}],"plainText":"What's your name?"}},{"id":"cl3wo87ev000o2e6g71r3hvor","blockId":"cl3wo87et000l2e6ga64ipat6","type":"text input","options":{"isLong":false,"labels":{"button":"Send","placeholder":"Type your answer..."}}}]},{"id":"cl3wo8kfl000p2e6gszlvkub0","graphCoordinates":{"x":367,"y":294},"title":"Group #1 copy copy","steps":[{"id":"cl3wo8kfl000q2e6gci1itvj3","blockId":"cl3wo8kfl000p2e6gszlvkub0","type":"text","content":{"html":"<div>Hello this is group 3</div>","richText":[{"type":"p","children":[{"text":"Hello this is group 3"}]}],"plainText":"Hello this is group 3"}},{"id":"cl3wo8kfl000r2e6gx0lxwitf","blockId":"cl3wo8kfl000p2e6gszlvkub0","type":"text","content":{"html":"<div>What&#x27;s your name?</div>","richText":[{"type":"p","children":[{"text":"What's your name?"}]}],"plainText":"What's your name?"}},{"id":"cl3wo8kfl000s2e6g6ckc9om4","blockId":"cl3wo8kfl000p2e6gszlvkub0","type":"text input","options":{"isLong":false,"labels":{"button":"Send","placeholder":"Type your answer..."}}}]}],"variables":[],"edges":[{"from":{"blockId":"cl3wo63l80000801ae4lxgvad","stepId":"cl3wo63l80001801a8u9g96sp"},"to":{"blockId":"cl3wo7ucc000g2e6gdus80qeb"},"id":"cl3wo83ha000j2e6gdrk1crro"}],"theme":{"chat":{"inputs":{"color":"#303235","backgroundColor":"#FFFFFF","placeholderColor":"#9095A0"},"buttons":{"color":"#FFFFFF","backgroundColor":"#0042DA"},"hostAvatar":{"url":"https://avatars.githubusercontent.com/u/16015833?v=4","isEnabled":true},"hostBubbles":{"color":"#303235","backgroundColor":"#F7F8FF"},"guestBubbles":{"color":"#FFFFFF","backgroundColor":"#FF8E21"}},"general":{"font":"Open Sans","background":{"type":"None"}}},"settings":{"general":{"isBrandingEnabled":true,"isInputPrefillEnabled":true,"isHideQueryParamsEnabled":true,"isNewResultOnRefreshEnabled":false},"metadata":{"description":"Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."},"typingEmulation":{"speed":300,"enabled":true,"maxDelay":1.5}},"publicId":null,"customDomain":null,"workspaceId":"cl3ncues300081a1as58wmkxz"}

apps/builder/playwright/freeUser.json

@@ -11,7 +11,8 @@
         {
           "name": "typebot-20-modal",
           "value": "hide"
-        }
+        },
+        { "name": "workspaceId", "value": "freeWorkspace" }
       ]
     }
   ]

apps/builder/playwright/services/database.ts

@@ -87,7 +87,7 @@ export const createUsers = async () => {
           role: WorkspaceRole.ADMIN,
           workspace: {
             create: {
-              id: freeWorkspaceId,
+              id: 'free',
               name: "Free user's workspace",
               plan: Plan.FREE,
             },
@@ -98,12 +98,15 @@ export const createUsers = async () => {
   })
   await prisma.workspace.create({
     data: {
-      id: 'free',
-      name: 'Free workspace',
+      id: freeWorkspaceId,
+      name: 'Free Shared Workspace',
       plan: Plan.FREE,
       members: {
         createMany: {
-          data: [{ role: WorkspaceRole.ADMIN, userId: 'proUser' }],
+          data: [
+            { role: WorkspaceRole.MEMBER, userId: 'proUser' },
+            { role: WorkspaceRole.ADMIN, userId: 'freeUser' },
+          ],
         },
       },
     },

apps/builder/playwright/tests/editor.spec.ts

@@ -7,6 +7,7 @@ import {
 import { defaultTextInputOptions, InputStepType } from 'models'
 import path from 'path'
 import cuid from 'cuid'
+import { typebotViewer } from '../services/selectorUtils'
 
 test.describe.parallel('Editor', () => {
   test('Edges connection should work', async ({ page }) => {
@@ -151,4 +152,29 @@ test.describe.parallel('Editor', () => {
     await expect(page.locator('text="😍"')).toBeVisible()
     await expect(page.locator('text="My superb typebot"')).toBeVisible()
   })
+
+  test('Preview from group should work', async ({ page }) => {
+    const typebotId = cuid()
+    await importTypebotInDatabase(
+      path.join(__dirname, '../fixtures/typebots/editor/previewFromGroup.json'),
+      {
+        id: typebotId,
+      }
+    )
+
+    await page.goto(`/typebots/${typebotId}/edit`)
+    await page.click('[aria-label="Preview bot from this group"] >> nth=1')
+    await expect(
+      typebotViewer(page).locator('text="Hello this is group 1"')
+    ).toBeVisible()
+    await page.click('[aria-label="Preview bot from this group"] >> nth=2')
+    await expect(
+      typebotViewer(page).locator('text="Hello this is group 2"')
+    ).toBeVisible()
+    await page.click('[aria-label="Close"]')
+    await page.click('text="Preview"')
+    await expect(
+      typebotViewer(page).locator('text="Hello this is group 1"')
+    ).toBeVisible()
+  })
 })

apps/builder/playwright/tests/workspaces.spec.ts

@@ -35,7 +35,7 @@ test('can switch between workspaces and access typebot', async ({ page }) => {
   await page.goto('/typebots')
   await expect(page.locator('text="Pro typebot"')).toBeVisible()
   await page.click("text=Pro user's workspace")
-  await page.click('text=Shared workspace')
+  await page.click('text="Shared workspace"')
   await expect(page.locator('text="Pro typebot"')).toBeHidden()
   await page.click('text="Shared typebot"')
   await expect(page.locator('text="Hey there"')).toBeVisible()
@@ -135,7 +135,7 @@ test('can manage members', async ({ page }) => {
 test("can't edit workspace as a member", async ({ page }) => {
   await page.goto('/typebots')
   await page.click("text=Pro user's workspace")
-  await page.click('text=Shared workspace')
+  await page.click('text="Shared workspace"')
   await page.click('text=Settings & Members')
   await expect(page.locator('text="Settings"')).toBeHidden()
   await page.click('text="Members"')