feat: 🔥 Remove save button

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx

@@ -37,7 +37,7 @@ export const GoogleSheetsSettingsBody = ({
   onOptionsChange,
   stepId,
 }: Props) => {
-  const { save, hasUnsavedChanges } = useTypebot()
+  const { save } = useTypebot()
   const { sheets, isLoading } = useSheets({
     credentialsId: options?.credentialsId,
     spreadsheetId: options?.spreadsheetId,
@@ -83,10 +83,7 @@ export const GoogleSheetsSettingsBody = ({
   }
 
   const handleCreateNewClick = async () => {
-    if (hasUnsavedChanges) {
-      const errorToastId = await save()
-      if (errorToastId) return
-    }
+    await save()
     const linkElement = document.createElement('a')
     linkElement.href = getGoogleSheetsConsentScreenUrl(
       window.location.href,

apps/builder/components/shared/TypebotHeader/SaveButton.tsx

@@ -1,33 +0,0 @@
-import { IconButton, Text, Tooltip } from '@chakra-ui/react'
-import { CheckIcon, SaveIcon } from 'assets/icons'
-import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import React from 'react'
-
-export const SaveButton = () => {
-  const { save, isSavingLoading, hasUnsavedChanges } = useTypebot()
-
-  const handleSaveClick = async () => {
-    await save()
-  }
-
-  return (
-    <>
-      {hasUnsavedChanges && (
-        <Text fontSize="sm" color="gray.500">
-          Unsaved changes
-        </Text>
-      )}
-      <Tooltip label="Save changes">
-        <IconButton
-          isDisabled={!hasUnsavedChanges}
-          onClick={handleSaveClick}
-          isLoading={isSavingLoading}
-          icon={
-            hasUnsavedChanges ? <SaveIcon /> : <CheckIcon color="green.400" />
-          }
-          aria-label={hasUnsavedChanges ? 'Save' : 'Saved'}
-        />
-      </Tooltip>
-    </>
-  )
-}

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -1,4 +1,12 @@
-import { Flex, HStack, Button, IconButton, Tooltip } from '@chakra-ui/react'
+import {
+  Flex,
+  HStack,
+  Button,
+  IconButton,
+  Tooltip,
+  Spinner,
+  Text,
+} from '@chakra-ui/react'
 import { ChevronLeftIcon, RedoIcon, UndoIcon } from 'assets/icons'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
@@ -7,7 +15,6 @@ import { useRouter } from 'next/router'
 import React from 'react'
 import { PublishButton } from '../buttons/PublishButton'
 import { EditableTypebotName } from './EditableTypebotName'
-import { SaveButton } from './SaveButton'
 
 export const headerHeight = 56
 
@@ -21,7 +28,7 @@ export const TypebotHeader = () => {
     redo,
     canUndo,
     canRedo,
-    publishedTypebot,
+    isSavingLoading,
   } = useTypebot()
   const { setRightPanel } = useEditor()
 
@@ -96,7 +103,13 @@ export const TypebotHeader = () => {
           </Button>
         )}
       </HStack>
-      <Flex pos="absolute" left="1rem" justify="center" align="center">
+      <HStack
+        pos="absolute"
+        left="1rem"
+        justify="center"
+        align="center"
+        spacing="6"
+      >
         <HStack alignItems="center">
           <IconButton
             aria-label="Back"
@@ -129,10 +142,17 @@ export const TypebotHeader = () => {
             />
           </Tooltip>
         </HStack>
-      </Flex>
+        {isSavingLoading && (
+          <HStack>
+            <Spinner speed="0.7s" size="sm" color="gray.400" />
+            <Text fontSize="sm" color="gray.400">
+              Saving...
+            </Text>
+          </HStack>
+        )}
+      </HStack>
 
       <HStack right="40px" pos="absolute">
-        <SaveButton />
         <Button onClick={handlePreviewClick}>Preview</Button>
         <PublishButton />
       </HStack>