feat: add Display calendar settings (#4164)

* feat: add Color calendar setting

Closes #4067

* fix: fix wrong imports

* feat: add Display calendar settings

Closes #4068

* feat: add 12h/24h in Format option labels

* fix tests

* Fix

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs 2024-02-24 08:50:32 -03:00 committed by GitHub
parent a993155fb0
commit 3d809d5317
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 926 additions and 82 deletions

View File

@ -73,6 +73,7 @@
"danger-plugin-todos": "^1.3.1",
"dataloader": "^2.2.2",
"date-fns": "^2.30.0",
"date-fns-tz": "^2.0.0",
"debounce": "^2.0.0",
"deep-equal": "^2.2.2",
"docusaurus-node-polyfills": "^1.0.0",

View File

@ -10,9 +10,7 @@ import { SettingsAccountsListCard } from '@/settings/accounts/components/Setting
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Section } from '@/ui/layout/section/components/Section';
import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
const StyledRowRightContainer = styled.div`
@ -21,7 +19,7 @@ const StyledRowRightContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsCalendarSettingsSection = () => {
export const SettingsAccountsCalendarAccountsListCard = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const navigate = useNavigate();
@ -35,25 +33,19 @@ export const SettingsAccountsCalendarSettingsSection = () => {
});
return (
<Section>
<H2Title
title="Calendar settings"
description="Sync your calendars and set your preferences"
/>
<SettingsAccountsListCard
accounts={mockedConnectedAccounts}
isLoading={loading}
onRowClick={(account) =>
navigate(`/settings/accounts/calendars/${account.id}`)
}
RowIcon={IconGoogleCalendar}
RowRightComponent={({ account: _account }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus synced />
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
</Section>
<SettingsAccountsListCard
accounts={mockedConnectedAccounts}
isLoading={loading}
onRowClick={(account) =>
navigate(`/settings/accounts/calendars/${account.id}`)
}
RowIcon={IconGoogleCalendar}
RowRightComponent={({ account: _account }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus synced />
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
);
};

View File

@ -0,0 +1,47 @@
import { useState } from 'react';
import styled from '@emotion/styled';
import { formatInTimeZone } from 'date-fns-tz';
import { SettingsAccountsCalendarTimeZoneSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect';
import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
import { Select } from '@/ui/input/components/Select';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(4)};
`;
export const SettingsAccountsCalendarDisplaySettings = () => {
// TODO: use the user's saved time zone. If undefined, default it with the user's detected time zone.
const [timeZone, setTimeZone] = useState(detectTimeZone());
// TODO: use the user's saved time format.
const [timeFormat, setTimeFormat] = useState<12 | 24>(24);
return (
<StyledContainer>
<SettingsAccountsCalendarTimeZoneSelect
value={timeZone}
onChange={setTimeZone}
/>
<Select
dropdownId="settings-accounts-calendar-time-format"
label="Format"
fullWidth
value={timeFormat}
options={[
{
label: `24h (${formatInTimeZone(Date.now(), timeZone, 'HH:mm')})`,
value: 24,
},
{
label: `12h (${formatInTimeZone(Date.now(), timeZone, 'h:mm aa')})`,
value: 12,
},
]}
onChange={setTimeFormat}
/>
</StyledContainer>
);
};

View File

@ -0,0 +1,25 @@
import { availableTimeZoneOptions } from '@/settings/accounts/constants/timeZoneSelectOptions';
import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
import { findAvailableTimeZoneOption } from '@/settings/accounts/utils/findAvailableTimeZoneOption';
import { Select } from '@/ui/input/components/Select';
type SettingsAccountsCalendarTimeZoneSelectProps = {
value?: string;
onChange: (nextValue: string) => void;
};
export const SettingsAccountsCalendarTimeZoneSelect = ({
value = detectTimeZone(),
onChange,
}: SettingsAccountsCalendarTimeZoneSelectProps) => (
<Select
dropdownId="settings-accounts-calendar-time-zone"
dropdownWidth={416}
label="Time zone"
fullWidth
value={findAvailableTimeZoneOption(value)?.value}
options={availableTimeZoneOptions}
onChange={onChange}
withSearchInput
/>
);

View File

@ -12,8 +12,6 @@ import { SettingsAccountsListCard } from '@/settings/accounts/components/Setting
import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { IconChevronRight } from '@/ui/display/icon';
import { IconGmail } from '@/ui/display/icon/components/IconGmail';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
const StyledRowRightContainer = styled.div`
align-items: center;
@ -21,7 +19,7 @@ const StyledRowRightContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
export const SettingsAccountsEmailsSyncSection = () => {
export const SettingsAccountsEmailsAccountsListCard = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const navigate = useNavigate();
@ -53,27 +51,21 @@ export const SettingsAccountsEmailsSyncSection = () => {
);
return (
<Section>
<H2Title
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
<SettingsAccountsListCard
accounts={messageChannelsWithSyncedEmails}
isLoading={accountsLoading || messageChannelsLoading}
onRowClick={(messageChannel) =>
navigate(`/settings/accounts/emails/${messageChannel.id}`)
}
RowIcon={IconGmail}
RowRightComponent={({ account: messageChannel }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus
synced={messageChannel.isSynced}
/>
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
</Section>
<SettingsAccountsListCard
accounts={messageChannelsWithSyncedEmails}
isLoading={accountsLoading || messageChannelsLoading}
onRowClick={(messageChannel) =>
navigate(`/settings/accounts/emails/${messageChannel.id}`)
}
RowIcon={IconGmail}
RowRightComponent={({ account: messageChannel }) => (
<StyledRowRightContainer>
<SettingsAccountsSynchronizationStatus
synced={messageChannel.isSynced}
/>
<LightIconButton Icon={IconChevronRight} accent="tertiary" />
</StyledRowRightContainer>
)}
/>
);
};

View File

@ -0,0 +1,601 @@
/**
* Standard IANA time zones.
* @see https://www.iana.org/time-zones
*/
export const ianaTimeZones = [
'Africa/Abidjan',
'Africa/Accra',
'Africa/Addis_Ababa',
'Africa/Algiers',
'Africa/Asmara',
'Africa/Asmera',
'Africa/Bamako',
'Africa/Bangui',
'Africa/Banjul',
'Africa/Bissau',
'Africa/Blantyre',
'Africa/Brazzaville',
'Africa/Bujumbura',
'Africa/Cairo',
'Africa/Casablanca',
'Africa/Ceuta',
'Africa/Conakry',
'Africa/Dakar',
'Africa/Dar_es_Salaam',
'Africa/Djibouti',
'Africa/Douala',
'Africa/El_Aaiun',
'Africa/Freetown',
'Africa/Gaborone',
'Africa/Harare',
'Africa/Johannesburg',
'Africa/Juba',
'Africa/Kampala',
'Africa/Khartoum',
'Africa/Kigali',
'Africa/Kinshasa',
'Africa/Lagos',
'Africa/Libreville',
'Africa/Lome',
'Africa/Luanda',
'Africa/Lubumbashi',
'Africa/Lusaka',
'Africa/Malabo',
'Africa/Maputo',
'Africa/Maseru',
'Africa/Mbabane',
'Africa/Mogadishu',
'Africa/Monrovia',
'Africa/Nairobi',
'Africa/Ndjamena',
'Africa/Niamey',
'Africa/Nouakchott',
'Africa/Ouagadougou',
'Africa/Porto-Novo',
'Africa/Sao_Tome',
'Africa/Timbuktu',
'Africa/Tripoli',
'Africa/Tunis',
'Africa/Windhoek',
'America/Adak',
'America/Anchorage',
'America/Anguilla',
'America/Antigua',
'America/Araguaina',
'America/Argentina/Buenos_Aires',
'America/Argentina/Catamarca',
'America/Argentina/ComodRivadavia',
'America/Argentina/Cordoba',
'America/Argentina/Jujuy',
'America/Argentina/La_Rioja',
'America/Argentina/Mendoza',
'America/Argentina/Rio_Gallegos',
'America/Argentina/Salta',
'America/Argentina/San_Juan',
'America/Argentina/San_Luis',
'America/Argentina/Tucuman',
'America/Argentina/Ushuaia',
'America/Aruba',
'America/Asuncion',
'America/Atikokan',
'America/Atka',
'America/Bahia',
'America/Bahia_Banderas',
'America/Barbados',
'America/Belem',
'America/Belize',
'America/Blanc-Sablon',
'America/Boa_Vista',
'America/Bogota',
'America/Boise',
'America/Buenos_Aires',
'America/Cambridge_Bay',
'America/Campo_Grande',
'America/Cancun',
'America/Caracas',
'America/Catamarca',
'America/Cayenne',
'America/Cayman',
'America/Chicago',
'America/Chihuahua',
'America/Coral_Harbour',
'America/Cordoba',
'America/Costa_Rica',
'America/Creston',
'America/Cuiaba',
'America/Curacao',
'America/Danmarkshavn',
'America/Dawson',
'America/Dawson_Creek',
'America/Denver',
'America/Detroit',
'America/Dominica',
'America/Edmonton',
'America/Eirunepe',
'America/El_Salvador',
'America/Ensenada',
'America/Fort_Nelson',
'America/Fort_Wayne',
'America/Fortaleza',
'America/Glace_Bay',
'America/Godthab',
'America/Goose_Bay',
'America/Grand_Turk',
'America/Grenada',
'America/Guadeloupe',
'America/Guatemala',
'America/Guayaquil',
'America/Guyana',
'America/Halifax',
'America/Havana',
'America/Hermosillo',
'America/Indiana/Indianapolis',
'America/Indiana/Knox',
'America/Indiana/Marengo',
'America/Indiana/Petersburg',
'America/Indiana/Tell_City',
'America/Indiana/Vevay',
'America/Indiana/Vincennes',
'America/Indiana/Winamac',
'America/Indianapolis',
'America/Inuvik',
'America/Iqaluit',
'America/Jamaica',
'America/Jujuy',
'America/Juneau',
'America/Kentucky/Louisville',
'America/Kentucky/Monticello',
'America/Knox_IN',
'America/Kralendijk',
'America/La_Paz',
'America/Lima',
'America/Los_Angeles',
'America/Louisville',
'America/Lower_Princes',
'America/Maceio',
'America/Managua',
'America/Manaus',
'America/Marigot',
'America/Martinique',
'America/Matamoros',
'America/Mazatlan',
'America/Mendoza',
'America/Menominee',
'America/Merida',
'America/Metlakatla',
'America/Mexico_City',
'America/Miquelon',
'America/Moncton',
'America/Monterrey',
'America/Montevideo',
'America/Montreal',
'America/Montserrat',
'America/Nassau',
'America/New_York',
'America/Nipigon',
'America/Nome',
'America/Noronha',
'America/North_Dakota/Beulah',
'America/North_Dakota/Center',
'America/North_Dakota/New_Salem',
'America/Nuuk',
'America/Ojinaga',
'America/Panama',
'America/Pangnirtung',
'America/Paramaribo',
'America/Phoenix',
'America/Port_of_Spain',
'America/Port-au-Prince',
'America/Porto_Acre',
'America/Porto_Velho',
'America/Puerto_Rico',
'America/Punta_Arenas',
'America/Rainy_River',
'America/Rankin_Inlet',
'America/Recife',
'America/Regina',
'America/Resolute',
'America/Rio_Branco',
'America/Rosario',
'America/Santa_Isabel',
'America/Santarem',
'America/Santiago',
'America/Santo_Domingo',
'America/Sao_Paulo',
'America/Scoresbysund',
'America/Shiprock',
'America/Sitka',
'America/St_Barthelemy',
'America/St_Johns',
'America/St_Kitts',
'America/St_Lucia',
'America/St_Thomas',
'America/St_Vincent',
'America/Swift_Current',
'America/Tegucigalpa',
'America/Thule',
'America/Thunder_Bay',
'America/Tijuana',
'America/Toronto',
'America/Tortola',
'America/Vancouver',
'America/Virgin',
'America/Whitehorse',
'America/Winnipeg',
'America/Yakutat',
'America/Yellowknife',
'Antarctica/Casey',
'Antarctica/Davis',
'Antarctica/DumontDUrville',
'Antarctica/Macquarie',
'Antarctica/Mawson',
'Antarctica/McMurdo',
'Antarctica/Palmer',
'Antarctica/Rothera',
'Antarctica/South_Pole',
'Antarctica/Syowa',
'Antarctica/Troll',
'Antarctica/Vostok',
'Arctic/Longyearbyen',
'Asia/Aden',
'Asia/Almaty',
'Asia/Amman',
'Asia/Anadyr',
'Asia/Aqtau',
'Asia/Aqtobe',
'Asia/Ashgabat',
'Asia/Ashkhabad',
'Asia/Atyrau',
'Asia/Baghdad',
'Asia/Bahrain',
'Asia/Baku',
'Asia/Bangkok',
'Asia/Barnaul',
'Asia/Beirut',
'Asia/Bishkek',
'Asia/Brunei',
'Asia/Calcutta',
'Asia/Chita',
'Asia/Choibalsan',
'Asia/Chongqing',
'Asia/Chungking',
'Asia/Colombo',
'Asia/Dacca',
'Asia/Damascus',
'Asia/Dhaka',
'Asia/Dili',
'Asia/Dubai',
'Asia/Dushanbe',
'Asia/Famagusta',
'Asia/Gaza',
'Asia/Harbin',
'Asia/Hebron',
'Asia/Ho_Chi_Minh',
'Asia/Hong_Kong',
'Asia/Hovd',
'Asia/Irkutsk',
'Asia/Istanbul',
'Asia/Jakarta',
'Asia/Jayapura',
'Asia/Jerusalem',
'Asia/Kabul',
'Asia/Kamchatka',
'Asia/Karachi',
'Asia/Kashgar',
'Asia/Kathmandu',
'Asia/Katmandu',
'Asia/Khandyga',
'Asia/Kolkata',
'Asia/Krasnoyarsk',
'Asia/Kuala_Lumpur',
'Asia/Kuching',
'Asia/Kuwait',
'Asia/Macao',
'Asia/Macau',
'Asia/Magadan',
'Asia/Makassar',
'Asia/Manila',
'Asia/Muscat',
'Asia/Nicosia',
'Asia/Novokuznetsk',
'Asia/Novosibirsk',
'Asia/Omsk',
'Asia/Oral',
'Asia/Phnom_Penh',
'Asia/Pontianak',
'Asia/Pyongyang',
'Asia/Qatar',
'Asia/Qostanay',
'Asia/Qyzylorda',
'Asia/Rangoon',
'Asia/Riyadh',
'Asia/Saigon',
'Asia/Sakhalin',
'Asia/Samarkand',
'Asia/Seoul',
'Asia/Shanghai',
'Asia/Singapore',
'Asia/Srednekolymsk',
'Asia/Taipei',
'Asia/Tashkent',
'Asia/Tbilisi',
'Asia/Tehran',
'Asia/Tel_Aviv',
'Asia/Thimbu',
'Asia/Thimphu',
'Asia/Tokyo',
'Asia/Tomsk',
'Asia/Ujung_Pandang',
'Asia/Ulaanbaatar',
'Asia/Ulan_Bator',
'Asia/Urumqi',
'Asia/Ust-Nera',
'Asia/Vientiane',
'Asia/Vladivostok',
'Asia/Yakutsk',
'Asia/Yangon',
'Asia/Yekaterinburg',
'Asia/Yerevan',
'Atlantic/Azores',
'Atlantic/Bermuda',
'Atlantic/Canary',
'Atlantic/Cape_Verde',
'Atlantic/Faeroe',
'Atlantic/Faroe',
'Atlantic/Jan_Mayen',
'Atlantic/Madeira',
'Atlantic/Reykjavik',
'Atlantic/South_Georgia',
'Atlantic/St_Helena',
'Atlantic/Stanley',
'Australia/ACT',
'Australia/Adelaide',
'Australia/Brisbane',
'Australia/Broken_Hill',
'Australia/Canberra',
'Australia/Currie',
'Australia/Darwin',
'Australia/Eucla',
'Australia/Hobart',
'Australia/LHI',
'Australia/Lindeman',
'Australia/Lord_Howe',
'Australia/Melbourne',
'Australia/North',
'Australia/NSW',
'Australia/Perth',
'Australia/Queensland',
'Australia/South',
'Australia/Sydney',
'Australia/Tasmania',
'Australia/Victoria',
'Australia/West',
'Australia/Yancowinna',
'Brazil/Acre',
'Brazil/DeNoronha',
'Brazil/East',
'Brazil/West',
'Canada/Atlantic',
'Canada/Central',
'Canada/Eastern',
'Canada/Mountain',
'Canada/Newfoundland',
'Canada/Pacific',
'Canada/Saskatchewan',
'Canada/Yukon',
'CET',
'Chile/Continental',
'Chile/EasterIsland',
'CST6CDT',
'Cuba',
'EET',
'Egypt',
'Eire',
'EST',
'EST5EDT',
'Etc/GMT',
'Etc/GMT-0',
'Etc/GMT-1',
'Etc/GMT-10',
'Etc/GMT-11',
'Etc/GMT-12',
'Etc/GMT-13',
'Etc/GMT-14',
'Etc/GMT-2',
'Etc/GMT-3',
'Etc/GMT-4',
'Etc/GMT-5',
'Etc/GMT-6',
'Etc/GMT-7',
'Etc/GMT-8',
'Etc/GMT-9',
'Etc/GMT+0',
'Etc/GMT+1',
'Etc/GMT+10',
'Etc/GMT+11',
'Etc/GMT+12',
'Etc/GMT+2',
'Etc/GMT+3',
'Etc/GMT+4',
'Etc/GMT+5',
'Etc/GMT+6',
'Etc/GMT+7',
'Etc/GMT+8',
'Etc/GMT+9',
'Etc/GMT0',
'Etc/Greenwich',
'Etc/UCT',
'Etc/Universal',
'Etc/UTC',
'Etc/Zulu',
'Europe/Amsterdam',
'Europe/Andorra',
'Europe/Astrakhan',
'Europe/Athens',
'Europe/Belfast',
'Europe/Belgrade',
'Europe/Berlin',
'Europe/Bratislava',
'Europe/Brussels',
'Europe/Bucharest',
'Europe/Budapest',
'Europe/Busingen',
'Europe/Chisinau',
'Europe/Copenhagen',
'Europe/Dublin',
'Europe/Gibraltar',
'Europe/Guernsey',
'Europe/Helsinki',
'Europe/Isle_of_Man',
'Europe/Istanbul',
'Europe/Jersey',
'Europe/Kaliningrad',
'Europe/Kiev',
'Europe/Kirov',
'Europe/Kyiv',
'Europe/Lisbon',
'Europe/Ljubljana',
'Europe/London',
'Europe/Luxembourg',
'Europe/Madrid',
'Europe/Malta',
'Europe/Mariehamn',
'Europe/Minsk',
'Europe/Monaco',
'Europe/Moscow',
'Europe/Nicosia',
'Europe/Oslo',
'Europe/Paris',
'Europe/Podgorica',
'Europe/Prague',
'Europe/Riga',
'Europe/Rome',
'Europe/Samara',
'Europe/San_Marino',
'Europe/Sarajevo',
'Europe/Saratov',
'Europe/Simferopol',
'Europe/Skopje',
'Europe/Sofia',
'Europe/Stockholm',
'Europe/Tallinn',
'Europe/Tirane',
'Europe/Tiraspol',
'Europe/Ulyanovsk',
'Europe/Uzhgorod',
'Europe/Vaduz',
'Europe/Vatican',
'Europe/Vienna',
'Europe/Vilnius',
'Europe/Volgograd',
'Europe/Warsaw',
'Europe/Zagreb',
'Europe/Zaporozhye',
'Europe/Zurich',
'GB',
'GB-Eire',
'GMT',
'GMT-0',
'GMT+0',
'GMT0',
'Greenwich',
'Hongkong',
'HST',
'Iceland',
'Indian/Antananarivo',
'Indian/Chagos',
'Indian/Christmas',
'Indian/Cocos',
'Indian/Comoro',
'Indian/Kerguelen',
'Indian/Mahe',
'Indian/Maldives',
'Indian/Mauritius',
'Indian/Mayotte',
'Indian/Reunion',
'Iran',
'Israel',
'Jamaica',
'Japan',
'Kwajalein',
'Libya',
'MET',
'Mexico/BajaNorte',
'Mexico/BajaSur',
'Mexico/General',
'MST',
'MST7MDT',
'Navajo',
'NZ',
'NZ-CHAT',
'Pacific/Apia',
'Pacific/Auckland',
'Pacific/Bougainville',
'Pacific/Chatham',
'Pacific/Chuuk',
'Pacific/Easter',
'Pacific/Efate',
'Pacific/Enderbury',
'Pacific/Fakaofo',
'Pacific/Fiji',
'Pacific/Funafuti',
'Pacific/Galapagos',
'Pacific/Gambier',
'Pacific/Guadalcanal',
'Pacific/Guam',
'Pacific/Honolulu',
'Pacific/Johnston',
'Pacific/Kanton',
'Pacific/Kiritimati',
'Pacific/Kosrae',
'Pacific/Kwajalein',
'Pacific/Majuro',
'Pacific/Marquesas',
'Pacific/Midway',
'Pacific/Nauru',
'Pacific/Niue',
'Pacific/Norfolk',
'Pacific/Noumea',
'Pacific/Pago_Pago',
'Pacific/Palau',
'Pacific/Pitcairn',
'Pacific/Pohnpei',
'Pacific/Ponape',
'Pacific/Port_Moresby',
'Pacific/Rarotonga',
'Pacific/Saipan',
'Pacific/Samoa',
'Pacific/Tahiti',
'Pacific/Tarawa',
'Pacific/Tongatapu',
'Pacific/Truk',
'Pacific/Wake',
'Pacific/Wallis',
'Pacific/Yap',
'Poland',
'Portugal',
'PRC',
'PST8PDT',
'ROC',
'ROK',
'Singapore',
'Turkey',
'UCT',
'Universal',
'US/Alaska',
'US/Aleutian',
'US/Arizona',
'US/Central',
'US/East-Indiana',
'US/Eastern',
'US/Hawaii',
'US/Indiana-Starke',
'US/Michigan',
'US/Mountain',
'US/Pacific',
'US/Samoa',
'UTC',
'W-SU',
'WET',
'Zulu',
];

View File

@ -0,0 +1,43 @@
import { getTimezoneOffset } from 'date-fns-tz';
import { ianaTimeZones } from '@/settings/accounts/constants/ianaTimeZones';
import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
import { SelectOption } from '@/ui/input/components/Select';
export const availableTimeZoneOptionsByLabel = ianaTimeZones.reduce<
Record<string, SelectOption<string>>
>((result, ianaTimeZone) => {
const timeZoneLabel = formatTimeZoneLabel(ianaTimeZone);
// Remove the '(GMT±00:00) ' prefix from the label.
const timeZoneName = timeZoneLabel.slice(11);
// Skip time zones with GMT, UTC, or UCT in their name,
// and duplicates.
if (
timeZoneName.includes('GMT') ||
timeZoneName.includes('UTC') ||
timeZoneName.includes('UCT') ||
timeZoneLabel in result
) {
return result;
}
return {
...result,
[timeZoneLabel]: { label: timeZoneLabel, value: ianaTimeZone },
};
}, {});
export const availableTimeZoneOptions = Object.values(
availableTimeZoneOptionsByLabel,
).sort((optionA, optionB) => {
const difference =
getTimezoneOffset(optionA.value) - getTimezoneOffset(optionB.value);
return difference === 0
? // Sort alphabetically if the time zone offsets are the same.
optionA.label.localeCompare(optionB.label)
: // Sort by time zone offset if different.
difference;
});

View File

@ -0,0 +1,6 @@
/**
* Detects the user's time zone.
* @returns a IANA time zone
*/
export const detectTimeZone = () =>
Intl.DateTimeFormat().resolvedOptions().timeZone;

View File

@ -0,0 +1,10 @@
import { availableTimeZoneOptionsByLabel } from '@/settings/accounts/constants/timeZoneSelectOptions';
import { formatTimeZoneLabel } from '@/settings/accounts/utils/formatTimeZoneLabel';
/**
* Finds the matching available IANA time zone select option from a given IANA time zone.
* @param value the IANA time zone to match
* @returns the matching available IANA time zone select option or undefined
*/
export const findAvailableTimeZoneOption = (value: string) =>
availableTimeZoneOptionsByLabel[formatTimeZoneLabel(value)];

View File

@ -0,0 +1,29 @@
import defaultLocale from 'date-fns/locale/en-US';
import { formatInTimeZone } from 'date-fns-tz';
/**
* Formats a IANA time zone to a select option label.
* @param ianaTimeZone IANA time zone
* @returns Formatted label
* @example 'Europe/Paris' => '(GMT+01:00) Central European Time - Paris'
*/
export const formatTimeZoneLabel = (ianaTimeZone: string) => {
const timeZoneWithGmtOffset = formatInTimeZone(
Date.now(),
ianaTimeZone,
`(OOOO) zzzz`,
{ locale: defaultLocale },
);
const ianaTimeZoneParts = ianaTimeZone.split('/');
const location =
ianaTimeZoneParts.length > 1
? ianaTimeZoneParts.slice(-1)[0].replaceAll('_', ' ')
: undefined;
const timeZoneLabel =
!location || timeZoneWithGmtOffset.includes(location)
? timeZoneWithGmtOffset
: [timeZoneWithGmtOffset, location].join(' - ');
return timeZoneLabel;
};

View File

@ -1,3 +1,4 @@
import { useMemo, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
@ -5,20 +6,30 @@ import { IconChevronDown } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
export type SelectOption<Value extends string | number | null> = {
value: Value;
label: string;
Icon?: IconComponent;
};
export type SelectProps<Value extends string | number | null> = {
className?: string;
disabled?: boolean;
dropdownId: string;
dropdownWidth?: `${string}px` | 'auto' | number;
fullWidth?: boolean;
label?: string;
onChange?: (value: Value) => void;
options: { value: Value; label: string; Icon?: IconComponent }[];
options: SelectOption<Value>[];
value?: Value;
withSearchInput?: boolean;
};
const StyledControlContainer = styled.div<{
@ -63,15 +74,28 @@ export const Select = <Value extends string | number | null>({
className,
disabled,
dropdownId,
dropdownWidth = 176,
fullWidth,
label,
onChange,
options,
value,
withSearchInput,
}: SelectProps<Value>) => {
const theme = useTheme();
const [searchInputValue, setSearchInputValue] = useState('');
const selectedOption =
options.find(({ value: key }) => key === value) || options[0];
const filteredOptions = useMemo(
() =>
searchInputValue
? options.filter(({ label }) =>
label.toLowerCase().includes(searchInputValue.toLowerCase()),
)
: options,
[options, searchInputValue],
);
const { closeDropdown } = useDropdown(dropdownId);
@ -101,23 +125,37 @@ export const Select = <Value extends string | number | null>({
{!!label && <StyledLabel>{label}</StyledLabel>}
<Dropdown
dropdownId={dropdownId}
dropdownMenuWidth={176}
dropdownMenuWidth={dropdownWidth}
dropdownPlacement="bottom-start"
clickableComponent={selectControl}
dropdownComponents={
<DropdownMenuItemsContainer>
{options.map((option) => (
<MenuItem
key={option.value}
LeftIcon={option.Icon}
text={option.label}
onClick={() => {
onChange?.(option.value);
closeDropdown();
}}
<>
{!!withSearchInput && (
<DropdownMenuSearchInput
autoFocus
value={searchInputValue}
onChange={(event) => setSearchInputValue(event.target.value)}
/>
))}
</DropdownMenuItemsContainer>
)}
{!!withSearchInput && !!filteredOptions.length && (
<DropdownMenuSeparator />
)}
{!!filteredOptions.length && (
<DropdownMenuItemsContainer hasMaxHeight>
{filteredOptions.map((option) => (
<MenuItem
key={option.value}
LeftIcon={option.Icon}
text={option.label}
onClick={() => {
onChange?.(option.value);
closeDropdown();
}}
/>
))}
</DropdownMenuItemsContainer>
)}
</>
}
dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
/>

View File

@ -53,3 +53,7 @@ export const Open: Story = {
export const Disabled: Story = {
args: { disabled: true },
};
export const WithSearch: Story = {
args: { withSearchInput: true },
};

View File

@ -32,7 +32,7 @@ type DropdownProps = {
dropdownHotkeyScope: HotkeyScope;
dropdownId: string;
dropdownPlacement?: Placement;
dropdownMenuWidth?: number;
dropdownMenuWidth?: `${string}px` | 'auto' | number;
dropdownOffset?: { x?: number; y?: number };
onClickOutside?: () => void;
onClose?: () => void;

View File

@ -1,24 +1,62 @@
import { SettingsAccountsCalendarSettingsSection } from '@/settings/accounts/components/SettingsAccountsCalendarSettingsSection';
import { useRecoilValue } from 'recoil';
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 { SettingsAccountsCalendarAccountsListCard } from '@/settings/accounts/components/SettingsAccountsCalendarAccountsListCard';
import { SettingsAccountsCalendarDisplaySettings } from '@/settings/accounts/components/SettingsAccountsCalendarDisplaySettings';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
export const SettingsAccountsCalendars = () => (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{
children: 'Accounts',
href: getSettingsPagePath(SettingsPath.Accounts),
},
{ children: 'Calendars' },
]}
/>
<SettingsAccountsCalendarSettingsSection />
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
export const SettingsAccountsCalendars = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { records: _accounts } = useFindManyRecords<ConnectedAccount>({
objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
},
});
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{
children: 'Accounts',
href: getSettingsPagePath(SettingsPath.Accounts),
},
{ children: 'Calendars' },
]}
/>
<Section>
<H2Title
title="Calendar settings"
description="Sync your calendars and set your preferences"
/>
<SettingsAccountsCalendarAccountsListCard />
</Section>
{/* TODO: retrieve connected accounts data from back-end when the Calendar feature is ready. */}
{!!mockedConnectedAccounts.length && (
<Section>
<H2Title
title="Display"
description="Configure how we should display your events in your calendar"
/>
<SettingsAccountsCalendarDisplaySettings />
</Section>
)}
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

View File

@ -1,7 +1,9 @@
import { SettingsAccountsEmailsSyncSection } from '@/settings/accounts/components/SettingsAccountsEmailsSyncSection';
import { SettingsAccountsEmailsAccountsListCard } from '@/settings/accounts/components/SettingsAccountsEmailsAccountsListCard';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
export const SettingsAccountsEmails = () => (
@ -13,7 +15,13 @@ export const SettingsAccountsEmails = () => (
{ children: 'Emails' },
]}
/>
<SettingsAccountsEmailsSyncSection />
<Section>
<H2Title
title="Emails sync"
description="Sync your inboxes and set your privacy settings"
/>
<SettingsAccountsEmailsAccountsListCard />
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

View File

@ -22702,6 +22702,15 @@ __metadata:
languageName: node
linkType: hard
"date-fns-tz@npm:^2.0.0":
version: 2.0.0
resolution: "date-fns-tz@npm:2.0.0"
peerDependencies:
date-fns: ">=2.0.0"
checksum: 31cacb83c675ef8c2cf31d21c298ab6d74c5e975412dd804664d031ac0f2f03ed5bfb2a950fa15a321bbbcb90b833c300823fbceba0133680065a71894cc1170
languageName: node
linkType: hard
"date-fns@npm:^2.0.1, date-fns@npm:^2.30.0":
version: 2.30.0
resolution: "date-fns@npm:2.30.0"
@ -44303,6 +44312,7 @@ __metadata:
danger-plugin-todos: "npm:^1.3.1"
dataloader: "npm:^2.2.2"
date-fns: "npm:^2.30.0"
date-fns-tz: "npm:^2.0.0"
debounce: "npm:^2.0.0"
deep-equal: "npm:^2.2.2"
docusaurus-node-polyfills: "npm:^1.0.0"