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>

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>

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 && (

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>

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>