From 825ed2f1ecab3a5cad7659172df38791a6cf2a24 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 9 May 2023 10:43:08 -0400
Subject: [PATCH] :children_crossing: Add floating menu for block settings

Closes #396
---
 .../nodes/block/SettingsHoverBar.tsx          | 50 +++++++++++++++++++
 .../nodes/block/SettingsPopoverContent.tsx    | 37 ++++++++------
 .../getHelpDocUrl.ts}                         | 27 +---------
 3 files changed, 74 insertions(+), 40 deletions(-)
 create mode 100644 apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
 rename apps/builder/src/features/graph/{components/nodes/block/HelpDocButton.tsx => helpers/getHelpDocUrl.ts} (83%)

diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
new file mode 100644
index 0000000000..a1f1342304
--- /dev/null
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsHoverBar.tsx
@@ -0,0 +1,50 @@
+import { BuoyIcon, ExpandIcon } from '@/components/icons'
+import {
+  Button,
+  HStack,
+  IconButton,
+  Link,
+  useColorModeValue,
+} from '@chakra-ui/react'
+import { BlockWithOptions } from '@typebot.io/schemas'
+import { getHelpDocUrl } from '@/features/graph/helpers/getHelpDocUrl'
+
+type Props = {
+  blockType: BlockWithOptions['type']
+  onExpandClick: () => void
+}
+
+export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
+  const helpDocUrl = getHelpDocUrl(blockType)
+  return (
+    <HStack
+      rounded="md"
+      spacing={0}
+      borderWidth="1px"
+      bgColor={useColorModeValue('white', 'gray.800')}
+      shadow="md"
+    >
+      <IconButton
+        icon={<ExpandIcon />}
+        borderRightWidth="1px"
+        borderRightRadius="none"
+        borderLeftRadius="none"
+        aria-label={'Duplicate group'}
+        variant="ghost"
+        onClick={onExpandClick}
+        size="xs"
+      />
+      <Button
+        as={Link}
+        leftIcon={<BuoyIcon />}
+        borderLeftRadius="none"
+        size="xs"
+        variant="ghost"
+        href={helpDocUrl}
+        isExternal
+      >
+        Help
+      </Button>
+    </HStack>
+  )
+}
diff --git a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
index 292124a6ab..04e3bdbe20 100644
--- a/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
+++ b/apps/builder/src/features/graph/components/nodes/block/SettingsPopoverContent.tsx
@@ -4,12 +4,11 @@ import {
   PopoverBody,
   useEventListener,
   Portal,
-  IconButton,
-  HStack,
   Stack,
   useColorModeValue,
+  SlideFade,
+  Flex,
 } from '@chakra-ui/react'
-import { ExpandIcon } from '@/components/icons'
 import {
   InputBlockType,
   IntegrationBlockType,
@@ -18,8 +17,7 @@ import {
   BlockOptions,
   BlockWithOptions,
 } from '@typebot.io/schemas'
-import { useRef } from 'react'
-import { HelpDocButton } from './HelpDocButton'
+import { useRef, useState } from 'react'
 import { WaitSettings } from '@/features/blocks/logic/wait/components/WaitSettings'
 import { ScriptSettings } from '@/features/blocks/logic/script/components/ScriptSettings'
 import { JumpSettings } from '@/features/blocks/logic/jump/components/JumpSettings'
@@ -47,6 +45,7 @@ import { GoogleSheetsSettings } from '@/features/blocks/integrations/googleSheet
 import { ChatwootSettings } from '@/features/blocks/integrations/chatwoot/components/ChatwootSettings'
 import { AbTestSettings } from '@/features/blocks/logic/abTest/components/AbTestSettings'
 import { PictureChoiceSettings } from '@/features/blocks/inputs/pictureChoice/components/PictureChoiceSettings'
+import { SettingsHoverBar } from './SettingsHoverBar'
 
 type Props = {
   block: BlockWithOptions
@@ -55,6 +54,7 @@ type Props = {
 }
 
 export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
+  const [isHovering, setIsHovering] = useState(false)
   const arrowColor = useColorModeValue('white', 'gray.800')
   const ref = useRef<HTMLDivElement | null>(null)
   const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
@@ -74,17 +74,26 @@ export const SettingsPopoverContent = ({ onExpandClick, ...props }: Props) => {
           maxH="400px"
           ref={ref}
           shadow="lg"
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
         >
           <Stack spacing={3}>
-            <HStack justifyContent="flex-end">
-              <HelpDocButton blockType={props.block.type} />
-              <IconButton
-                aria-label="expand"
-                icon={<ExpandIcon />}
-                size="xs"
-                onClick={onExpandClick}
-              />
-            </HStack>
+            <Flex
+              w="full"
+              pos="absolute"
+              top="-56px"
+              height="64px"
+              right={0}
+              justifyContent="flex-end"
+              align="center"
+            >
+              <SlideFade in={isHovering} unmountOnExit>
+                <SettingsHoverBar
+                  onExpandClick={onExpandClick}
+                  blockType={props.block.type}
+                />
+              </SlideFade>
+            </Flex>
             <BlockSettings {...props} />
           </Stack>
         </PopoverBody>
diff --git a/apps/builder/src/features/graph/components/nodes/block/HelpDocButton.tsx b/apps/builder/src/features/graph/helpers/getHelpDocUrl.ts
similarity index 83%
rename from apps/builder/src/features/graph/components/nodes/block/HelpDocButton.tsx
rename to apps/builder/src/features/graph/helpers/getHelpDocUrl.ts
index 2ef9015b47..83532e84b5 100644
--- a/apps/builder/src/features/graph/components/nodes/block/HelpDocButton.tsx
+++ b/apps/builder/src/features/graph/helpers/getHelpDocUrl.ts
@@ -1,36 +1,11 @@
-import { BuoyIcon } from '@/components/icons'
-import { Button, Link } from '@chakra-ui/react'
 import {
   BlockWithOptions,
   InputBlockType,
   IntegrationBlockType,
   LogicBlockType,
 } from '@typebot.io/schemas'
-import React from 'react'
 
-type HelpDocButtonProps = {
-  blockType: BlockWithOptions['type']
-}
-
-export const HelpDocButton = ({ blockType }: HelpDocButtonProps) => {
-  const helpDocUrl = getHelpDocUrl(blockType)
-
-  if (helpDocUrl === null) return null
-
-  return (
-    <Button
-      as={Link}
-      leftIcon={<BuoyIcon />}
-      size="xs"
-      href={helpDocUrl}
-      isExternal
-    >
-      Help
-    </Button>
-  )
-}
-
-const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
+export const getHelpDocUrl = (blockType: BlockWithOptions['type']): string => {
   switch (blockType) {
     case LogicBlockType.TYPEBOT_LINK:
       return 'https://docs.typebot.io/editor/blocks/logic/typebot-link'