From 8c86cb8684841f25330aa2b77671e57648d46ca2 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 29 Jun 2022 10:18:37 +0200
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=F0=9F=9A=B8=20Add=20version?=
 =?UTF-8?q?=20number=20in=20settings=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ettingsForm.tsx => EditorSettingsForm.tsx} |   2 +-
 .../WorkspaceSettingsModal.tsx                | 144 ++++++++++--------
 .../components/editor/EditorSettingsModal.tsx |   4 +-
 package.json                                  |   2 +-
 4 files changed, 84 insertions(+), 68 deletions(-)
 rename apps/builder/components/dashboard/WorkspaceSettingsModal/{UserSettingsForm.tsx => EditorSettingsForm.tsx} (98%)

diff --git a/apps/builder/components/dashboard/WorkspaceSettingsModal/UserSettingsForm.tsx b/apps/builder/components/dashboard/WorkspaceSettingsModal/EditorSettingsForm.tsx
similarity index 98%
rename from apps/builder/components/dashboard/WorkspaceSettingsModal/UserSettingsForm.tsx
rename to apps/builder/components/dashboard/WorkspaceSettingsModal/EditorSettingsForm.tsx
index 60020aa43..55f828f1e 100644
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/UserSettingsForm.tsx
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/EditorSettingsForm.tsx
@@ -12,7 +12,7 @@ import { useUser } from 'contexts/UserContext'
 import { GraphNavigation } from 'db'
 import React, { useEffect, useState } from 'react'
 
-export const EditorSettings = () => {
+export const EditorSettingsForm = () => {
   const { user, saveUser } = useUser()
   const [value, setValue] = useState<string>(
     user?.graphNavigation ?? GraphNavigation.TRACKPAD
diff --git a/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx b/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx
index bf930a279..2dd747f2e 100644
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx
@@ -21,7 +21,7 @@ import { useState } from 'react'
 import { BillingForm } from './BillingForm'
 import { MembersList } from './MembersList'
 import { MyAccountForm } from './MyAccountForm'
-import { EditorSettings } from './UserSettingsForm'
+import { EditorSettingsForm } from './EditorSettingsForm'
 import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
 
 type Props = {
@@ -51,86 +51,102 @@ export const WorkspaceSettingsModal = ({
     <Modal isOpen={isOpen} onClose={onClose} size="4xl">
       <ModalOverlay />
       <ModalContent h="600px" flexDir="row">
-        <Stack spacing={8} w="250px" py="6" borderRightWidth={1} h="full">
-          <Stack>
-            <Text pl="4" color="gray.500">
-              {user.email}
-            </Text>
-            <Button
-              variant={selectedTab === 'my-account' ? 'solid' : 'ghost'}
-              onClick={() => setSelectedTab('my-account')}
-              leftIcon={
-                <Avatar
-                  name={user.name ?? undefined}
-                  src={user.image ?? undefined}
-                  boxSize="15px"
-                />
-              }
-              size="sm"
-              justifyContent="flex-start"
-              pl="4"
-            >
-              My account
-            </Button>
-            <Button
-              variant={selectedTab === 'user-settings' ? 'solid' : 'ghost'}
-              onClick={() => setSelectedTab('user-settings')}
-              leftIcon={<SettingsIcon />}
-              size="sm"
-              justifyContent="flex-start"
-              pl="4"
-            >
-              Preferences
-            </Button>
-          </Stack>
-          <Stack>
-            <Text pl="4" color="gray.500">
-              Workspace
-            </Text>
-            {canEdit && (
+        <Stack
+          spacing={8}
+          w="250px"
+          py="6"
+          borderRightWidth={1}
+          h="full"
+          justifyContent="space-between"
+        >
+          <Stack spacing={8}>
+            <Stack>
+              <Text pl="4" color="gray.500">
+                {user.email}
+              </Text>
               <Button
-                variant={
-                  selectedTab === 'workspace-settings' ? 'solid' : 'ghost'
-                }
-                onClick={() => setSelectedTab('workspace-settings')}
+                variant={selectedTab === 'my-account' ? 'solid' : 'ghost'}
+                onClick={() => setSelectedTab('my-account')}
                 leftIcon={
-                  <EmojiOrImageIcon
-                    icon={workspace.icon}
+                  <Avatar
+                    name={user.name ?? undefined}
+                    src={user.image ?? undefined}
                     boxSize="15px"
-                    defaultIcon={HardDriveIcon}
                   />
                 }
                 size="sm"
                 justifyContent="flex-start"
                 pl="4"
               >
-                Settings
+                My account
               </Button>
-            )}
-            <Button
-              variant={selectedTab === 'members' ? 'solid' : 'ghost'}
-              onClick={() => setSelectedTab('members')}
-              leftIcon={<UsersIcon />}
-              size="sm"
-              justifyContent="flex-start"
-              pl="4"
-            >
-              Members
-            </Button>
-            {canEdit && (
               <Button
-                variant={selectedTab === 'billing' ? 'solid' : 'ghost'}
-                onClick={() => setSelectedTab('billing')}
-                leftIcon={<CreditCardIcon />}
+                variant={selectedTab === 'user-settings' ? 'solid' : 'ghost'}
+                onClick={() => setSelectedTab('user-settings')}
+                leftIcon={<SettingsIcon />}
                 size="sm"
                 justifyContent="flex-start"
                 pl="4"
               >
-                Billing
+                Preferences
               </Button>
-            )}
+            </Stack>
+            <Stack>
+              <Text pl="4" color="gray.500">
+                Workspace
+              </Text>
+              {canEdit && (
+                <Button
+                  variant={
+                    selectedTab === 'workspace-settings' ? 'solid' : 'ghost'
+                  }
+                  onClick={() => setSelectedTab('workspace-settings')}
+                  leftIcon={
+                    <EmojiOrImageIcon
+                      icon={workspace.icon}
+                      boxSize="15px"
+                      defaultIcon={HardDriveIcon}
+                    />
+                  }
+                  size="sm"
+                  justifyContent="flex-start"
+                  pl="4"
+                >
+                  Settings
+                </Button>
+              )}
+              <Button
+                variant={selectedTab === 'members' ? 'solid' : 'ghost'}
+                onClick={() => setSelectedTab('members')}
+                leftIcon={<UsersIcon />}
+                size="sm"
+                justifyContent="flex-start"
+                pl="4"
+              >
+                Members
+              </Button>
+              {canEdit && (
+                <Button
+                  variant={selectedTab === 'billing' ? 'solid' : 'ghost'}
+                  onClick={() => setSelectedTab('billing')}
+                  leftIcon={<CreditCardIcon />}
+                  size="sm"
+                  justifyContent="flex-start"
+                  pl="4"
+                >
+                  Billing
+                </Button>
+              )}
+            </Stack>
           </Stack>
+
+          <Flex justify="center" pt="10">
+            <Text color="gray.500" fontSize="xs">
+              Version: 2.5.0
+            </Text>
+          </Flex>
         </Stack>
+
         {isOpen && (
           <Flex flex="1" p="10">
             <SettingsContent tab={selectedTab} onClose={onClose} />
@@ -152,7 +168,7 @@ const SettingsContent = ({
     case 'my-account':
       return <MyAccountForm />
     case 'user-settings':
-      return <EditorSettings />
+      return <EditorSettingsForm />
     case 'workspace-settings':
       return <WorkspaceSettingsForm onClose={onClose} />
     case 'members':
diff --git a/apps/builder/components/editor/EditorSettingsModal.tsx b/apps/builder/components/editor/EditorSettingsModal.tsx
index 014ad07d8..12bfbf8e7 100644
--- a/apps/builder/components/editor/EditorSettingsModal.tsx
+++ b/apps/builder/components/editor/EditorSettingsModal.tsx
@@ -5,7 +5,7 @@ import {
   ModalContent,
   ModalOverlay,
 } from '@chakra-ui/react'
-import { EditorSettings } from 'components/dashboard/WorkspaceSettingsModal/UserSettingsForm'
+import { EditorSettingsForm } from 'components/dashboard/WorkspaceSettingsModal/EditorSettingsForm'
 import React from 'react'
 
 type Props = {
@@ -20,7 +20,7 @@ export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
       <ModalContent>
         <ModalCloseButton />
         <ModalBody pt="12" pb="8" px="8">
-          <EditorSettings />
+          <EditorSettingsForm />
         </ModalBody>
       </ModalContent>
     </Modal>
diff --git a/package.json b/package.json
index 6c727deca..a3b1e9ce8 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
+  "version": "2.5.0",
   "name": "typebot-os",
   "private": true,
   "license": "AGPL-3.0-or-later",