From 8f3988b8d98fecc154845bcef76ec1f53c146264 Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Wed, 17 Jul 2024 16:56:34 +0200
Subject: [PATCH] feat(frontend): back button (#2876)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 .../BrainManagementTabs.module.scss           | 21 +++++++++++++++
 .../BrainManagementTabs.tsx                   | 27 ++++++++++++++-----
 2 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.module.scss

diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.module.scss
new file mode 100644
index 000000000..4a9b5eae6
--- /dev/null
+++ b/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.module.scss
@@ -0,0 +1,21 @@
+@use "styles/Spacings.module.scss";
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.header_wrapper {
+  display: flex;
+  width: 100%;
+  margin-left: -(Spacings.$spacing05 + Spacings.$spacing03);
+  gap: Spacings.$spacing03;
+  align-items: center;
+
+  .tabs {
+    width: 100%;
+  }
+}
diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.tsx b/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.tsx
index ca1e7d7a3..d8ab28de1 100644
--- a/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.tsx
+++ b/frontend/app/studio/[brainId]/BrainManagementTabs/BrainManagementTabs.tsx
@@ -1,11 +1,14 @@
 /* eslint-disable max-lines */
 
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import Spinner from "@/lib/components/ui/Spinner";
+import Icon from "@/lib/components/ui/Icon/Icon";
+import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
 import { Tabs } from "@/lib/components/ui/Tabs/Tabs";
 import { Tab } from "@/lib/types/Tab";
 
+import styles from "./BrainManagementTabs.module.scss";
 import { KnowledgeTab } from "./components/KnowledgeTab/KnowledgeTab";
 import { useAddedKnowledge } from "./components/KnowledgeTab/hooks/useAddedKnowledge";
 import { PeopleTab } from "./components/PeopleTab/PeopleTab";
@@ -17,6 +20,7 @@ export const BrainManagementTabs = (): JSX.Element => {
   const [selectedTab, setSelectedTab] = useState("Knowledge");
   const { brainId, hasEditRights } = useBrainManagementTabs();
   const { allKnowledge } = useAddedKnowledge({ brainId: brainId ?? undefined });
+  const router = useRouter();
 
   const { brain, isLoading } = useBrainFetcher({
     brainId,
@@ -65,15 +69,26 @@ export const BrainManagementTabs = (): JSX.Element => {
 
   if (isLoading) {
     return (
-      <div className="flex w-full h-full justify-center items-center">
-        <Spinner />
+      <div className={styles.loader}>
+        <LoaderIcon size="big" color="primary" />
       </div>
     );
   }
 
   return (
-    <>
-      <Tabs tabList={brainManagementTabs} />
+    <div>
+      <div className={styles.header_wrapper}>
+        <Icon
+          name="chevronLeft"
+          size="normal"
+          color="black"
+          handleHover={true}
+          onClick={() => router.push("/studio")}
+        />
+        <div className={styles.tabs}>
+          <Tabs tabList={brainManagementTabs} />
+        </div>
+      </div>
       {selectedTab === "Settings" && <SettingsTab brainId={brainId} />}
       {selectedTab === "People" && <PeopleTab brainId={brainId} />}
       {selectedTab === "Knowledge" && (
@@ -83,6 +98,6 @@ export const BrainManagementTabs = (): JSX.Element => {
           allKnowledge={allKnowledge}
         />
       )}
-    </>
+    </div>
   );
 };