From ef849d316f1df7eaee610b161e73e3c1d6fd35ed Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 8 Jul 2024 12:00:00 +0200
Subject: [PATCH] Small fixes on accounts settings (#6157)

- Add keys in components map
---
 .../components/SettingsAccountsCalendarChannelsContainer.tsx | 5 +++--
 .../components/SettingsAccountsMessageChannelsContainer.tsx  | 5 +++--
 .../components/SettingsAccountsRadioSettingsCard.tsx         | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

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 49beddbac..e31bfd530 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@@ -11,6 +11,7 @@ import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/componen
 import { SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import React from 'react';
 
 export const SettingsAccountsCalendarChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
@@ -59,13 +60,13 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
         tabs={tabs}
       />
       {calendarChannels.map((calendarChannel) => (
-        <>
+        <React.Fragment key={calendarChannel.id}>
           {calendarChannel.id === activeTabId && (
             <SettingsAccountsCalendarChannelDetails
               calendarChannel={calendarChannel}
             />
           )}
-        </>
+        </React.Fragment>
       ))}
       {false && activeTabId === 'general' && (
         <SettingsAccountsCalendarChannelsGeneral />
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 95f462e06..35768ddcc 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsContainer.tsx
@@ -10,6 +10,7 @@ import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/compo
 import { SETTINGS_ACCOUNT_MESSAGE_CHANNELS_TAB_LIST_COMPONENT_ID } from '@/settings/accounts/constants/SettingsAccountMessageChannelsTabListComponentId';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
+import React from 'react';
 
 export const SettingsAccountsMessageChannelsContainer = () => {
   const { activeTabIdState } = useTabList(
@@ -58,13 +59,13 @@ export const SettingsAccountsMessageChannelsContainer = () => {
         tabs={tabs}
       />
       {messageChannels.map((messageChannel) => (
-        <>
+        <React.Fragment key={messageChannel.id}>
           {messageChannel.id === activeTabId && (
             <SettingsAccountsMessageChannelDetails
               messageChannel={messageChannel}
             />
           )}
-        </>
+        </React.Fragment>
       ))}
     </>
   );
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
index 4592b42b4..350bf71de 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
 import { Radio } from '@/ui/input/components/Radio';
 import { Card } from '@/ui/layout/card/components/Card';