Refactor Calendar Settings into tabs (#6153)

This PR migrates Calendar Settings into Tabs: <img width="1512" alt="image" src="https://github.com/twentyhq/twenty/assets/12035771/2531d0f1-ddfd-46c6-8678-bd76d78447b6">
2024-07-08 09:11:47 +02:00
parent 46dac5a0ef
commit 87dc95c594
12 changed files with 456 additions and 423 deletions
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
@ -0,0 +1,118 @@
+import { CalendarChannel } from '@/accounts/types/CalendarChannel';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
+import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
+import { SettingsAccountsCardMedia } from '@/settings/accounts/components/SettingsAccountsCardMedia';
+import { SettingsAccountsToggleSettingCard } from '@/settings/accounts/components/SettingsAccountsToggleSettingCard';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Section } from '@react-email/components';
+import { H2Title, IconRefresh, IconUser } from 'twenty-ui';
+import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
+
+const StyledCardMedia = styled(SettingsAccountsCardMedia)`
+  height: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding-top: ${({ theme }) => theme.spacing(6)};
+`;
+
+type SettingsAccountsCalendarChannelDetailsProps = {
+  calendarChannel: Pick<
+    CalendarChannel,
+    'id' | 'visibility' | 'isContactAutoCreationEnabled' | 'isSyncEnabled'
+  >;
+};
+
+export const SettingsAccountsCalendarChannelDetails = ({
+  calendarChannel,
+}: SettingsAccountsCalendarChannelDetailsProps) => {
+  const theme = useTheme();
+
+  const { updateOneRecord } = useUpdateOneRecord<CalendarChannel>({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+  });
+
+  const handleVisibilityChange = (value: CalendarChannelVisibility) => {
+    updateOneRecord({
+      idToUpdate: calendarChannel.id,
+      updateOneRecordInput: {
+        visibility: value,
+      },
+    });
+  };
+
+  const handleContactAutoCreationToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: calendarChannel.id,
+      updateOneRecordInput: {
+        isContactAutoCreationEnabled: value,
+      },
+    });
+  };
+
+  const handleSyncEventsToggle = (value: boolean) => {
+    updateOneRecord({
+      idToUpdate: calendarChannel.id,
+      updateOneRecordInput: {
+        isSyncEnabled: value,
+      },
+    });
+  };
+  return (
+    <StyledDetailsContainer>
+      <Section>
+        <H2Title
+          title="Event visibility"
+          description="Define what will be visible to other users in your workspace"
+        />
+        <SettingsAccountsEventVisibilitySettingsCard
+          value={calendarChannel.visibility}
+          onChange={handleVisibilityChange}
+        />
+      </Section>
+      <Section>
+        <H2Title
+          title="Contact auto-creation"
+          description="Automatically create contacts for people you've participated in an event with."
+        />
+        <SettingsAccountsToggleSettingCard
+          cardMedia={
+            <StyledCardMedia>
+              <IconUser
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.lg}
+              />
+            </StyledCardMedia>
+          }
+          title="Auto-creation"
+          value={!!calendarChannel.isContactAutoCreationEnabled}
+          onToggle={handleContactAutoCreationToggle}
+        />
+      </Section>
+      <Section>
+        <H2Title
+          title="Synchronization"
+          description="Past and future calendar events will automatically be synced to this workspace"
+        />
+        <SettingsAccountsToggleSettingCard
+          cardMedia={
+            <StyledCardMedia>
+              <IconRefresh
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.lg}
+              />
+            </StyledCardMedia>
+          }
+          title="Sync events"
+          value={!!calendarChannel.isSyncEnabled}
+          onToggle={handleSyncEventsToggle}
+        />
+      </Section>
+    </StyledDetailsContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsContainer.tsx
@ -0,0 +1,75 @@
+import { useRecoilValue } from 'recoil';
+
+import { CalendarChannel } from '@/accounts/types/CalendarChannel';
+import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsAccountsCalendarChannelDetails } from '@/settings/accounts/components/SettingsAccountsCalendarChannelDetails';
+import { SettingsAccountsCalendarChannelsGeneral } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral';
+import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
+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';
+
+export const SettingsAccountsCalendarChannelsContainer = () => {
+  const { activeTabIdState } = useTabList(
+    SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID,
+  );
+  const activeTabId = useRecoilValue(activeTabIdState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const { records: accounts } = useFindManyRecords<ConnectedAccount>({
+    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
+    filter: {
+      accountOwnerId: {
+        eq: currentWorkspaceMember?.id,
+      },
+    },
+  });
+
+  const { records: calendarChannels } = useFindManyRecords<
+    CalendarChannel & {
+      connectedAccount: ConnectedAccount;
+    }
+  >({
+    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
+    filter: {
+      connectedAccountId: {
+        in: accounts.map((account) => account.id),
+      },
+    },
+  });
+
+  const tabs = [
+    ...calendarChannels.map((calendarChannel) => ({
+      id: calendarChannel.id,
+      title: calendarChannel.handle,
+    })),
+  ];
+
+  if (!calendarChannels.length) {
+    return <SettingsAccountsListEmptyStateCard />;
+  }
+
+  return (
+    <>
+      <TabList
+        tabListId={SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID}
+        tabs={tabs}
+      />
+      {calendarChannels.map((calendarChannel) => (
+        <>
+          {calendarChannel.id === activeTabId && (
+            <SettingsAccountsCalendarChannelDetails
+              calendarChannel={calendarChannel}
+            />
+          )}
+        </>
+      ))}
+      {false && activeTabId === 'general' && (
+        <SettingsAccountsCalendarChannelsGeneral />
+      )}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
@ -0,0 +1,93 @@
+import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
+import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
+import styled from '@emotion/styled';
+import { Section } from '@react-email/components';
+import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
+import { useRecoilValue } from 'recoil';
+import { H2Title } from 'twenty-ui';
+import {
+  CalendarChannelVisibility,
+  TimelineCalendarEvent,
+} from '~/generated-metadata/graphql';
+
+const StyledGeneralContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  padding-top: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const SettingsAccountsCalendarChannelsGeneral = () => {
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const exampleStartDate = new Date();
+  const exampleEndDate = min([
+    addMinutes(exampleStartDate, 30),
+    endOfDay(exampleStartDate),
+  ]);
+  const exampleDayTime = startOfDay(exampleStartDate).getTime();
+  const exampleCalendarEvent: TimelineCalendarEvent = {
+    id: '',
+    participants: [
+      {
+        firstName: currentWorkspaceMember?.name.firstName || '',
+        lastName: currentWorkspaceMember?.name.lastName || '',
+        displayName: currentWorkspaceMember
+          ? [
+              currentWorkspaceMember.name.firstName,
+              currentWorkspaceMember.name.lastName,
+            ].join(' ')
+          : '',
+        avatarUrl: currentWorkspaceMember?.avatarUrl || '',
+        handle: '',
+        personId: '',
+        workspaceMemberId: currentWorkspaceMember?.id || '',
+      },
+    ],
+    endsAt: exampleEndDate.toISOString(),
+    isFullDay: false,
+    startsAt: exampleStartDate.toISOString(),
+    conferenceSolution: '',
+    conferenceLink: {
+      label: '',
+      url: '',
+    },
+    description: '',
+    isCanceled: false,
+    location: '',
+    title: 'Onboarding call',
+    visibility: CalendarChannelVisibility.ShareEverything,
+  };
+
+  return (
+    <StyledGeneralContainer>
+      <Section>
+        <H2Title
+          title="Display"
+          description="Configure how we should display your events in your calendar"
+        />
+        <SettingsAccountsCalendarDisplaySettings />
+      </Section>
+      <Section>
+        <H2Title
+          title="Color code"
+          description="Events you participated in are displayed in red."
+        />
+        <CalendarContext.Provider
+          value={{
+            currentCalendarEvent: exampleCalendarEvent,
+            calendarEventsByDayTime: {
+              [exampleDayTime]: [exampleCalendarEvent],
+            },
+            getNextCalendarEvent: () => undefined,
+            updateCurrentCalendarEvent: () => {},
+          }}
+        >
+          <CalendarMonthCard dayTimes={[exampleDayTime]} />
+        </CalendarContext.Provider>
+      </Section>
+    </StyledGeneralContainer>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
@ -1,95 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
-import { IconChevronRight, IconGoogleCalendar } from 'twenty-ui';
-
-import { CalendarChannel } from '@/accounts/types/CalendarChannel';
-import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import {
-  SettingsAccountsSynchronizationStatus,
-  SettingsAccountsSynchronizationStatusProps,
-} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
-import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
-
-const StyledRowRightContainer = styled.div`
-  align-items: center;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
-export const SettingsAccountsCalendarChannelsListCard = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
-  const navigate = useNavigate();
-  const { objectMetadataItem } = useObjectMetadataItem({
-    objectNameSingular: CoreObjectNameSingular.CalendarChannel,
-  });
-
-  const { records: accounts, loading: accountsLoading } =
-    useFindManyRecords<ConnectedAccount>({
-      objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
-      filter: {
-        accountOwnerId: {
-          eq: currentWorkspaceMember?.id,
-        },
-      },
-    });
-
-  const { records: calendarChannels, loading: calendarChannelsLoading } =
-    useFindManyRecords<
-      CalendarChannel & {
-        connectedAccount: ConnectedAccount;
-      }
-    >({
-      objectNameSingular: CoreObjectNameSingular.CalendarChannel,
-      skip: !accounts.length,
-      filter: {
-        connectedAccountId: {
-          in: accounts.map((account) => account.id),
-        },
-      },
-      recordGqlFields: generateDepthOneRecordGqlFields({ objectMetadataItem }),
-    });
-
-  if (!calendarChannels.length) {
-    return <SettingsAccountsListEmptyStateCard />;
-  }
-
-  const calendarChannelsWithSyncStatus: (CalendarChannel & {
-    connectedAccount: ConnectedAccount;
-  } & SettingsAccountsSynchronizationStatusProps)[] = calendarChannels.map(
-    (calendarChannel) => ({
-      ...calendarChannel,
-      syncStatus: calendarChannel.connectedAccount?.authFailedAt
-        ? 'FAILED'
-        : 'SUCCEEDED',
-    }),
-  );
-
-  return (
-    <SettingsListCard
-      items={calendarChannelsWithSyncStatus}
-      getItemLabel={(calendarChannel) => calendarChannel.handle}
-      isLoading={accountsLoading || calendarChannelsLoading}
-      onRowClick={(calendarChannel) =>
-        navigate(`/settings/accounts/calendars/${calendarChannel.id}`)
-      }
-      RowIcon={IconGoogleCalendar}
-      RowRightComponent={({ item: calendarChannel }) => (
-        <StyledRowRightContainer>
-          <SettingsAccountsSynchronizationStatus
-            syncStatus={calendarChannel.syncStatus}
-            isSyncEnabled={calendarChannel.isSyncEnabled}
-          />
-          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
-        </StyledRowRightContainer>
-      )}
-    />
-  );
-};
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsCalendarChannelDetails.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsCalendarChannelDetails.stories.tsx
@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { SettingsAccountsCalendarChannelDetails } from '@/settings/accounts/components/SettingsAccountsCalendarChannelDetails';
+import { CalendarChannelVisibility } from '~/generated/graphql';
+
+const meta: Meta<typeof SettingsAccountsCalendarChannelDetails> = {
+  title:
+    'Modules/Settings/Accounts/CalendarChannels/SettingsAccountsCalendarChannelDetails',
+  component: SettingsAccountsCalendarChannelDetails,
+  decorators: [ComponentDecorator],
+  args: {
+    calendarChannel: {
+      id: '20202020-ef5a-4822-9e08-ce6e6a4dcb6a',
+      isContactAutoCreationEnabled: true,
+      isSyncEnabled: true,
+      visibility: CalendarChannelVisibility.ShareEverything,
+    },
+  },
+  argTypes: {
+    calendarChannel: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsAccountsCalendarChannelDetails>;
+
+export const Default: Story = {
+  play: async () => {},
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsCalendarChannelsGeneral.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/stories/SettingsAccountsCalendarChannelsGeneral.stories.tsx
@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { SettingsAccountsCalendarChannelsGeneral } from '@/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral';
+
+const meta: Meta<typeof SettingsAccountsCalendarChannelsGeneral> = {
+  title:
+    'Modules/Settings/Accounts/CalendarChannels/SettingsAccountsCalendarChannelsGeneral',
+  component: SettingsAccountsCalendarChannelsGeneral,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SettingsAccountsCalendarChannelsGeneral>;
+
+export const Default: Story = {
+  play: async () => {},
+};
--- a/packages/twenty-front/src/modules/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/constants/SettingsAccountCalendarChannelsTabListComponentId.ts
@ -0,0 +1,2 @@
+export const SETTINGS_ACCOUNT_CALENDAR_CHANNELS_TAB_LIST_COMPONENT_ID =
+  'settings-account-calendar-channels-tab-list';