From fdb2011a96c07fff38bc9feefbd8b4b3a36aaf1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tha=C3=AFs?= <guigon.thais@gmail.com>
Date: Tue, 18 Jul 2023 18:33:37 +0200
Subject: [PATCH] feat: add back button in company details top bar (#729)

* feat: add back button in company details top bar

Closes #636

* Add back button on person page

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../layout/components/WithTopBarContainer.tsx |  9 ++++++-
 .../ui/layout/top-bar/components/TopBar.tsx   | 26 ++++++++++++++++---
 front/src/pages/companies/CompanyShow.tsx     |  1 +
 front/src/pages/people/PersonShow.tsx         |  1 +
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx b/front/src/modules/ui/layout/components/WithTopBarContainer.tsx
index 7a75827f8..3f75eb58e 100644
--- a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx
+++ b/front/src/modules/ui/layout/components/WithTopBarContainer.tsx
@@ -9,6 +9,7 @@ import { RightDrawerContainer } from './RightDrawerContainer';
 type OwnProps = {
   children: JSX.Element | JSX.Element[];
   title: string;
+  hasBackButton?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
 };
@@ -22,13 +23,19 @@ const StyledContainer = styled.div`
 export function WithTopBarContainer({
   children,
   title,
+  hasBackButton,
   icon,
   onAddButtonClick,
 }: OwnProps) {
   return (
     <StyledContainer>
       <TopBarHotkeys onAddButtonClick={onAddButtonClick} />
-      <TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
+      <TopBar
+        title={title}
+        hasBackButton={hasBackButton}
+        icon={icon}
+        onAddButtonClick={onAddButtonClick}
+      />
       <RightDrawerContainer topMargin={TOP_BAR_MIN_HEIGHT + 16 + 16}>
         {children}
       </RightDrawerContainer>
diff --git a/front/src/modules/ui/layout/top-bar/components/TopBar.tsx b/front/src/modules/ui/layout/top-bar/components/TopBar.tsx
index cbb49736b..301f05af1 100644
--- a/front/src/modules/ui/layout/top-bar/components/TopBar.tsx
+++ b/front/src/modules/ui/layout/top-bar/components/TopBar.tsx
@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
+import { ReactNode, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 import { IconButton } from '@/ui/button/components/IconButton';
-import { IconPlus } from '@/ui/icon/index';
+import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
 import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
 
 export const TOP_BAR_MIN_HEIGHT = 40;
@@ -27,17 +28,36 @@ const TitleContainer = styled.div`
   width: 100%;
 `;
 
+const BackIconButton = styled(IconButton)`
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 type OwnProps = {
   title: string;
+  hasBackButton?: boolean;
   icon: ReactNode;
   onAddButtonClick?: () => void;
 };
 
-export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
+export function TopBar({
+  title,
+  hasBackButton,
+  icon,
+  onAddButtonClick,
+}: OwnProps) {
+  const navigate = useNavigate();
+  const navigateBack = useCallback(() => navigate(-1), [navigate]);
+
   return (
     <>
       <TopBarContainer>
         <NavCollapseButton hideIfOpen={true} />
+        {hasBackButton && (
+          <BackIconButton
+            icon={<IconChevronLeft size={16} />}
+            onClick={navigateBack}
+          />
+        )}
         {icon}
         <TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
         {onAddButtonClick && (
diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx
index d5b9d5444..69138a93e 100644
--- a/front/src/pages/companies/CompanyShow.tsx
+++ b/front/src/pages/companies/CompanyShow.tsx
@@ -30,6 +30,7 @@ export function CompanyShow() {
   return (
     <WithTopBarContainer
       title={company?.name ?? ''}
+      hasBackButton
       icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
     >
       <ShowPageLeftContainer>
diff --git a/front/src/pages/people/PersonShow.tsx b/front/src/pages/people/PersonShow.tsx
index c73a3d37a..989975eff 100644
--- a/front/src/pages/people/PersonShow.tsx
+++ b/front/src/pages/people/PersonShow.tsx
@@ -24,6 +24,7 @@ export function PersonShow() {
     <WithTopBarContainer
       title={person?.firstName ?? ''}
       icon={<IconUser size={theme.icon.size.md} />}
+      hasBackButton
     >
       <>
         <ShowPageLeftContainer>