admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: conditionally rendered Tablist only if there are multiple accounts. (#6274)

Browse Source 
issue - 6267

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Adithya Thejas S
2024-07-16 17:21:08 +05:30
committed by GitHub
parent 3566e0bdc2
commit a8dfff3a6d
4 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
View File

@ -12,7 +12,6 @@ const StyledDetailsContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)}; gap: ${({ theme }) => theme.spacing(6)};
padding-top: ${({ theme }) => theme.spacing(6)};
`; `;
type SettingsAccountsCalendarChannelDetailsProps = { type SettingsAccountsCalendarChannelDetailsProps = {

17
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
View File

@ -1,3 +1,4 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { CalendarChannel } from '@/accounts/types/CalendarChannel'; 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 { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import React from 'react'; import React from 'react';
const StyledCalenderContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(6)};
`;
export const SettingsAccountsCalendarChannelsContainer = () => { export const SettingsAccountsCalendarChannelsContainer = () => {
const { activeTabIdState } = useTabList( const { activeTabIdState } = useTabList(
SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID, SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID,
@ -55,10 +60,14 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
return ( return (
<> <>
<TabList {tabs.length > 1 && (
tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID} <StyledCalenderContainer>
tabs={tabs} <TabList
/> tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
tabs={tabs}
/>
</StyledCalenderContainer>
)}
{calendarChannels.map((calendarChannel) => ( {calendarChannels.map((calendarChannel) => (
<React.Fragment key={calendarChannel.id}> <React.Fragment key={calendarChannel.id}>
{calendarChannel.id === activeTabId && ( {calendarChannel.id === activeTabId && (

1
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
View File

@ -29,7 +29,6 @@ const StyledDetailsContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: ${({ theme }) => theme.spacing(6)}; gap: ${({ theme }) => theme.spacing(6)};
padding-top: ${({ theme }) => theme.spacing(6)};
`; `;
export const SettingsAccountsMessageChannelDetails = ({ export const SettingsAccountsMessageChannelDetails = ({

17
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
View File

@ -1,3 +1,4 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; 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 { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import React from 'react'; import React from 'react';
const StyledMessageContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(6)};
`;
export const SettingsAccountsMessageChannelsContainer = () => { export const SettingsAccountsMessageChannelsContainer = () => {
const { activeTabIdState } = useTabList( const { activeTabIdState } = useTabList(
SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID, SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID,
@ -54,10 +59,14 @@ export const SettingsAccountsMessageChannelsContainer = () => {
return ( return (
<> <>
<TabList {tabs.length > 1 && (
tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID} <StyledMessageContainer>
tabs={tabs} <TabList
/> tabListId={SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID}
tabs={tabs}
/>
</StyledMessageContainer>
)}
{messageChannels.map((messageChannel) => ( {messageChannels.map((messageChannel) => (
<React.Fragment key={messageChannel.id}> <React.Fragment key={messageChannel.id}>
{messageChannel.id === activeTabId && ( {messageChannel.id === activeTabId && (