From 59cf993146df484d95a1e6e31bb9f22e472bdfc4 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 7 Mar 2024 14:10:03 +0100
Subject: [PATCH] :bug: Fix back button refreshing the page when typebot in
 folder

Closes #1297
---
 .../editor/components/TypebotHeader.tsx        | 18 ++++++++++++------
 .../src/features/folders/api/createFolder.ts   |  2 +-
 .../folders/components/FolderButton.tsx        |  5 ++++-
 .../folders/components/FolderContent.tsx       |  3 ++-
 .../src/features/typebot/api/importTypebot.ts  | 13 +++++++++----
 .../src/features/typebot/helpers/sanitizers.ts | 17 +++++++++++++++++
 packages/forge/blocks/openRouter/logo.tsx      |  2 +-
 7 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/apps/builder/src/features/editor/components/TypebotHeader.tsx b/apps/builder/src/features/editor/components/TypebotHeader.tsx
index 17228d81e..054e2c723 100644
--- a/apps/builder/src/features/editor/components/TypebotHeader.tsx
+++ b/apps/builder/src/features/editor/components/TypebotHeader.tsx
@@ -82,7 +82,10 @@ export const TypebotHeader = () => {
   )
 }
 
-const LeftElements = (props: StackProps & { onHelpClick: () => void }) => {
+const LeftElements = ({
+  onHelpClick,
+  ...props
+}: StackProps & { onHelpClick: () => void }) => {
   const { t } = useTranslate()
   const router = useRouter()
   const {
@@ -144,10 +147,10 @@ const LeftElements = (props: StackProps & { onHelpClick: () => void }) => {
             pathname: router.query.parentId
               ? '/typebots/[typebotId]/edit'
               : typebot?.folderId
-              ? '/typebots/folders/[folderId]'
+              ? '/typebots/folders/[id]'
               : '/typebots',
             query: {
-              folderId: typebot?.folderId ?? [],
+              id: typebot?.folderId ?? [],
               parentId: Array.isArray(router.query.parentId)
                 ? router.query.parentId.slice(0, -1)
                 : [],
@@ -222,7 +225,7 @@ const LeftElements = (props: StackProps & { onHelpClick: () => void }) => {
         )}
         <Button
           leftIcon={<BuoyIcon />}
-          onClick={props.onHelpClick}
+          onClick={onHelpClick}
           size="sm"
           iconSpacing={{ base: 0, xl: 2 }}
         >
@@ -243,7 +246,10 @@ const LeftElements = (props: StackProps & { onHelpClick: () => void }) => {
   )
 }
 
-const RightElements = (props: StackProps & { isResultsDisplayed: boolean }) => {
+const RightElements = ({
+  isResultsDisplayed,
+  ...props
+}: StackProps & { isResultsDisplayed: boolean }) => {
   const router = useRouter()
   const { t } = useTranslate()
   const { typebot, currentUserMode, save } = useTypebot()
@@ -266,7 +272,7 @@ const RightElements = (props: StackProps & { isResultsDisplayed: boolean }) => {
       <TypebotNav
         display={{ base: 'none', md: 'flex', xl: 'none' }}
         typebotId={typebot?.id}
-        isResultsDisplayed={props.isResultsDisplayed}
+        isResultsDisplayed={isResultsDisplayed}
       />
       <Flex pos="relative">
         <ShareTypebotButton isLoading={isNotDefined(typebot)} />
diff --git a/apps/builder/src/features/folders/api/createFolder.ts b/apps/builder/src/features/folders/api/createFolder.ts
index 1f6d1321e..ab78c321d 100644
--- a/apps/builder/src/features/folders/api/createFolder.ts
+++ b/apps/builder/src/features/folders/api/createFolder.ts
@@ -20,7 +20,7 @@ export const createFolder = authenticatedProcedure
   .input(
     z.object({
       workspaceId: z.string(),
-      folderName: z.string().default('New folder'),
+      folderName: z.string().default(''),
       parentFolderId: z.string().optional(),
     })
   )
diff --git a/apps/builder/src/features/folders/components/FolderButton.tsx b/apps/builder/src/features/folders/components/FolderButton.tsx
index 59b37f05f..48c95b47c 100644
--- a/apps/builder/src/features/folders/components/FolderButton.tsx
+++ b/apps/builder/src/features/folders/components/FolderButton.tsx
@@ -28,10 +28,12 @@ import { trpc } from '@/lib/trpc'
 
 export const FolderButton = ({
   folder,
+  index,
   onFolderDeleted,
   onFolderRenamed,
 }: {
   folder: DashboardFolder
+  index: number
   onFolderDeleted: () => void
   onFolderRenamed: () => void
 }) => {
@@ -124,10 +126,11 @@ export const FolderButton = ({
           color={useColorModeValue('blue.500', 'blue.400')}
         />
         <Editable
-          defaultValue={folder.name}
+          defaultValue={folder.name === '' ? 'New folder' : folder.name}
           fontSize="18"
           onClick={(e) => e.stopPropagation()}
           onSubmit={onRenameSubmit}
+          startWithEditView={index === 0 && folder.name === ''}
         >
           <EditablePreview
             _hover={{
diff --git a/apps/builder/src/features/folders/components/FolderContent.tsx b/apps/builder/src/features/folders/components/FolderContent.tsx
index 930ccbffa..39d8f7b2e 100644
--- a/apps/builder/src/features/folders/components/FolderContent.tsx
+++ b/apps/builder/src/features/folders/components/FolderContent.tsx
@@ -181,9 +181,10 @@ export const FolderContent = ({ folder }: Props) => {
             )}
             {isFolderLoading && <ButtonSkeleton />}
             {folders &&
-              folders.map((folder) => (
+              folders.map((folder, index) => (
                 <FolderButton
                   key={folder.id.toString()}
+                  index={index}
                   folder={folder}
                   onFolderDeleted={refetchFolders}
                   onFolderRenamed={() => refetchFolders()}
diff --git a/apps/builder/src/features/typebot/api/importTypebot.ts b/apps/builder/src/features/typebot/api/importTypebot.ts
index 8db7cf2cb..7c55ab84f 100644
--- a/apps/builder/src/features/typebot/api/importTypebot.ts
+++ b/apps/builder/src/features/typebot/api/importTypebot.ts
@@ -11,7 +11,11 @@ import {
 } from '@typebot.io/schemas'
 import { z } from 'zod'
 import { getUserRoleInWorkspace } from '@/features/workspace/helpers/getUserRoleInWorkspace'
-import { sanitizeGroups, sanitizeSettings } from '../helpers/sanitizers'
+import {
+  sanitizeFolderId,
+  sanitizeGroups,
+  sanitizeSettings,
+} from '../helpers/sanitizers'
 import { preprocessTypebot } from '@typebot.io/schemas/features/typebot/helpers/preprocessTypebot'
 import { migrateTypebot } from '@typebot.io/lib/migrations/migrateTypebot'
 import { trackEvents } from '@typebot.io/lib/telemetry/trackEvents'
@@ -29,7 +33,6 @@ const omittedProps = {
   resultsTablePreferencesSchema: true,
   selectedThemeTemplateId: true,
   publicId: true,
-  folderId: true,
 } as const
 
 const importingTypebotSchema = z.preprocess(
@@ -74,7 +77,6 @@ const migrateImportingTypebot = (
     isArchived: false,
     whatsAppCredentialsId: null,
     publicId: null,
-    folderId: null,
     riskLevel: null,
   } satisfies Typebot
   return migrateTypebot(fullTypebot)
@@ -141,7 +143,10 @@ export const importTypebot = authenticatedProcedure
               },
             }
           : {},
-        folderId: migratedTypebot.folderId,
+        folderId: await sanitizeFolderId({
+          folderId: migratedTypebot.folderId,
+          workspaceId: workspace.id,
+        }),
         variables: migratedTypebot.variables ?? [],
         edges: migratedTypebot.edges ?? [],
         resultsTablePreferences:
diff --git a/apps/builder/src/features/typebot/helpers/sanitizers.ts b/apps/builder/src/features/typebot/helpers/sanitizers.ts
index 9098cdb73..44484f6e9 100644
--- a/apps/builder/src/features/typebot/helpers/sanitizers.ts
+++ b/apps/builder/src/features/typebot/helpers/sanitizers.ts
@@ -146,3 +146,20 @@ export const isCustomDomainNotAvailable = async ({
 
   return typebotWithSameDomainCount > 0
 }
+
+export const sanitizeFolderId = async ({
+  folderId,
+  workspaceId,
+}: {
+  folderId: string | null
+  workspaceId: string
+}) => {
+  if (!folderId) return
+  const folderCount = await prisma.dashboardFolder.count({
+    where: {
+      id: folderId,
+      workspaceId,
+    },
+  })
+  return folderCount !== 0 ? folderId : undefined
+}
diff --git a/packages/forge/blocks/openRouter/logo.tsx b/packages/forge/blocks/openRouter/logo.tsx
index 64044ed2f..a76649a9f 100644
--- a/packages/forge/blocks/openRouter/logo.tsx
+++ b/packages/forge/blocks/openRouter/logo.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 export const OpenRouterLogo = (props: React.SVGProps<SVGSVGElement>) => (
   <svg viewBox="0 0 512 512" fill="#71717A" stroke="#71717A" {...props}>
-    <g clip-path="url(#clip0_205_3)">
+    <g clipPath="url(#clip0_205_3)">
       <path
         d="M3 248.945C18 248.945 76 236 106 219C136 202 136 202 198 158C276.497 102.293 332 120.945 423 120.945"
         strokeWidth="90"