From a8dfff3a6d8c2b999ba23441149ea980a0ce8815 Mon Sep 17 00:00:00 2001
From: Adithya Thejas S <adithyathejass.1997@gmail.com>
Date: Tue, 16 Jul 2024 17:21:08 +0530
Subject: [PATCH] fix: conditionally rendered Tablist only if there are
 multiple accounts. (#6274)

issue - 6267

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../SettingsAccountsCalendarChannelDetails.tsx  |  1 -
 ...ettingsAccountsCalendarChannelsContainer.tsx | 17 +++++++++++++----
 .../SettingsAccountsMessageChannelDetails.tsx   |  1 -
 ...SettingsAccountsMessageChannelsContainer.tsx | 17 +++++++++++++----
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
index 6cd442b61027..3955904289ab 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
@@ -12,7 +12,6 @@ const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
-  padding-top: ${({ theme }) => theme.spacing(6)};
 `;
 
 type SettingsAccountsCalendarChannelDetailsProps = {
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
index e31bfd530904..10e7017d501d 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { CalendarChannel } from '@/accounts/types/CalendarChannel';
@@ -13,6 +14,10 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import React from 'react';
 
+const StyledCalenderContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const SettingsAccountsCalendarChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
     SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID,
@@ -55,10 +60,14 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
 
   return (
     <>
-      <TabList
-        tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
-        tabs={tabs}
-      />
+      {tabs.length > 1 && (
+        <StyledCalenderContainer>
+          <TabList
+            tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabs={tabs}
+          />
+        </StyledCalenderContainer>
+      )}
       {calendarChannels.map((calendarChannel) => (
         <React.Fragment key={calendarChannel.id}>
           {calendarChannel.id === activeTabId && (
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
index 0f1a331b6b42..930d749abd39 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
@@ -29,7 +29,6 @@ const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(6)};
-  padding-top: ${({ theme }) => theme.spacing(6)};
 `;
 
 export const SettingsAccountsMessageChannelDetails = ({
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
index 35768ddccbb5..24a5f62fa1b0 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@@ -12,6 +13,10 @@ import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import React from 'react';
 
+const StyledMessageContainer = styled.div`
+  padding-bottom: ${({ theme }) => theme.spacing(6)};
+`;
+
 export const SettingsAccountsMessageChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
     SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID,
@@ -54,10 +59,14 @@ export const SettingsAccountsMessageChannelsContainer = () => {
 
   return (
     <>
-      <TabList
-        tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
-        tabs={tabs}
-      />
+      {tabs.length > 1 && (
+        <StyledMessageContainer>
+          <TabList
+            tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
+            tabs={tabs}
+          />
+        </StyledMessageContainer>
+      )}
       {messageChannels.map((messageChannel) => (
         <React.Fragment key={messageChannel.id}>
           {messageChannel.id === activeTabId && (