From 90e5ab335dce3ce051d2bc03820832f3bb1dca0f Mon Sep 17 00:00:00 2001 From: ktang520 Date: Fri, 17 May 2024 20:32:18 -0700 Subject: [PATCH 01/14] Changed record chip functionality from onClick to anchor tag --- .../display/chip/components/EntityChip.tsx | 60 ++++++++++++++----- 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx index 740875fe5ad5..4f422f0da60b 100644 --- a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx @@ -1,5 +1,3 @@ -import * as React from 'react'; -import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; @@ -21,12 +19,14 @@ export type EntityChipProps = { maxWidth?: number; }; +type InnerEntityChipProps = EntityChipProps; + export enum EntityChipVariant { Regular = 'regular', Transparent = 'transparent', } -export const EntityChip = ({ +const InnerEntityChip = ({ linkToEntity, entityId, name, @@ -36,18 +36,9 @@ export const EntityChip = ({ LeftIcon, className, maxWidth, -}: EntityChipProps) => { - const navigate = useNavigate(); +}: InnerEntityChipProps) => { const theme = useTheme(); - const handleLinkClick = (event: React.MouseEvent) => { - if (isNonEmptyString(linkToEntity)) { - event.preventDefault(); - event.stopPropagation(); - navigate(linkToEntity); - } - }; - return ( ); }; + +export const EntityChip = ({ + linkToEntity, + entityId, + name, + avatarUrl, + avatarType = 'rounded', + variant = EntityChipVariant.Regular, + LeftIcon, + className, + maxWidth, +}: EntityChipProps) => { + if (isNonEmptyString(linkToEntity)) { + return ( + + + + ); + } else { + return ( + + ); + } +}; \ No newline at end of file From 568a6b157025f074a82b0974268178feb5dc7e04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sat, 18 May 2024 10:38:16 +0200 Subject: [PATCH 02/14] Revert "Changed record chip functionality from onClick to anchor tag" This reverts commit 90e5ab335dce3ce051d2bc03820832f3bb1dca0f. --- .../display/chip/components/EntityChip.tsx | 60 +++++-------------- 1 file changed, 14 insertions(+), 46 deletions(-) diff --git a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx index 4f422f0da60b..740875fe5ad5 100644 --- a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; @@ -19,14 +21,12 @@ export type EntityChipProps = { maxWidth?: number; }; -type InnerEntityChipProps = EntityChipProps; - export enum EntityChipVariant { Regular = 'regular', Transparent = 'transparent', } -const InnerEntityChip = ({ +export const EntityChip = ({ linkToEntity, entityId, name, @@ -36,9 +36,18 @@ const InnerEntityChip = ({ LeftIcon, className, maxWidth, -}: InnerEntityChipProps) => { +}: EntityChipProps) => { + const navigate = useNavigate(); const theme = useTheme(); + const handleLinkClick = (event: React.MouseEvent) => { + if (isNonEmptyString(linkToEntity)) { + event.preventDefault(); + event.stopPropagation(); + navigate(linkToEntity); + } + }; + return ( ); }; - -export const EntityChip = ({ - linkToEntity, - entityId, - name, - avatarUrl, - avatarType = 'rounded', - variant = EntityChipVariant.Regular, - LeftIcon, - className, - maxWidth, -}: EntityChipProps) => { - if (isNonEmptyString(linkToEntity)) { - return ( - - - - ); - } else { - return ( - - ); - } -}; \ No newline at end of file From dcafacbd88a070891822dc48fe49b8bc6589c624 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sun, 19 May 2024 10:24:44 +0200 Subject: [PATCH 03/14] Implement at Chip level --- .../src/display/chip/components/Chip.tsx | 48 +++++++++++-------- .../display/chip/components/EntityChip.tsx | 5 +- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 271d0ff02424..535c9d92e442 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -1,4 +1,5 @@ import { MouseEvent, ReactNode } from 'react'; +import { Link } from 'react-router-dom'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -33,17 +34,19 @@ type ChipProps = { rightComponent?: ReactNode; className?: string; onClick?: (event: MouseEvent) => void; + to?: string; }; const StyledContainer = styled.div< Pick< ChipProps, - 'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant' + 'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant' | 'to' > >` --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)}; --chip-vertical-padding: ${({ theme }) => theme.spacing(1)}; + text-decoration: none; align-items: center; border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${({ theme, disabled }) => @@ -158,22 +161,27 @@ export const Chip = ({ maxWidth, className, onClick, -}: ChipProps) => ( - - {leftComponent} - - - - {rightComponent} - -); + to, +}: ChipProps) => { + return ( + + {leftComponent} + + + + {rightComponent} + + ); +}; diff --git a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx index 740875fe5ad5..399c23a966a3 100644 --- a/packages/twenty-ui/src/display/chip/components/EntityChip.tsx +++ b/packages/twenty-ui/src/display/chip/components/EntityChip.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; @@ -37,14 +36,11 @@ export const EntityChip = ({ className, maxWidth, }: EntityChipProps) => { - const navigate = useNavigate(); const theme = useTheme(); const handleLinkClick = (event: React.MouseEvent) => { if (isNonEmptyString(linkToEntity)) { - event.preventDefault(); event.stopPropagation(); - navigate(linkToEntity); } }; @@ -75,6 +71,7 @@ export const EntityChip = ({ onClick={handleLinkClick} className={className} maxWidth={maxWidth} + to={linkToEntity} /> ); }; From 9e82859e3d52c255b8d349767da46cea7f9032e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sun, 19 May 2024 11:27:28 +0200 Subject: [PATCH 04/14] Left side menu --- .../navigation-drawer/components/NavigationDrawerItem.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index f1364db207b3..a0706b1c9f6a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; @@ -29,6 +29,7 @@ type StyledItemProps = { danger?: boolean; level: 1 | 2; soon?: boolean; + to?: string; }; const StyledItem = styled.div` @@ -37,6 +38,7 @@ const StyledItem = styled.div` props.active ? props.theme.background.transparent.light : 'inherit'}; border: none; border-radius: ${({ theme }) => theme.border.radius.sm}; + text-decoration: none; color: ${(props) => { if (props.active === true) { return props.theme.font.color.primary; @@ -153,6 +155,8 @@ export const NavigationDrawerItem = ({ aria-selected={active} danger={danger} soon={soon} + as={to ? Link : 'div'} + to={to ? to : undefined} > {Icon && } {label} From 170eb95d6ef6f87bbc64f5773eea6c99a00df1bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sun, 19 May 2024 14:11:24 +0200 Subject: [PATCH 05/14] Settings field (begin) --- .../components/SettingsObjectItemTableRow.tsx | 6 ++-- .../SettingsApiKeysFieldItemTableRow.tsx | 6 ++-- .../components/SettingsApiKeysTable.tsx | 4 +-- .../SettingsDevelopersWebhookTableRow.tsx | 6 ++-- .../components/SettingsWebhooksTable.tsx | 6 +--- .../ui/layout/table/components/TableRow.tsx | 34 ++++++++++++++++--- .../settings/data-model/SettingsObjects.tsx | 10 ++---- 7 files changed, 44 insertions(+), 28 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 02bd504bb25d..ed5c7134162d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -13,7 +13,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow'; type SettingsObjectItemTableRowProps = { action: ReactNode; objectItem: ObjectMetadataItem; - onClick?: () => void; + to?: string; }; export const StyledObjectTableRow = styled(TableRow)` @@ -33,7 +33,7 @@ const StyledActionTableCell = styled(TableCell)` export const SettingsObjectItemTableRow = ({ action, objectItem, - onClick, + to, }: SettingsObjectItemTableRowProps) => { const theme = useTheme(); @@ -45,7 +45,7 @@ export const SettingsObjectItemTableRow = ({ const objectTypeLabel = getObjectTypeLabel(objectItem); return ( - + {!!Icon && ( diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx index 502199e04e4d..4d4dc8d45e6f 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx @@ -26,15 +26,15 @@ const StyledIconChevronRight = styled(IconChevronRight)` export const SettingsApiKeysFieldItemTableRow = ({ fieldItem, - onClick, + to, }: { fieldItem: ApiFieldItem; - onClick: () => void; + to: string; }) => { const theme = useTheme(); return ( - onClick()}> + {fieldItem.name} { { - navigate(`/settings/developers/api-keys/${fieldItem.id}`); - }} + to={`/settings/developers/api-keys/${fieldItem.id}`} /> ))} diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx index e6541f6115b8..0c093d5ecbd2 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx @@ -28,15 +28,15 @@ const StyledIconChevronRight = styled(IconChevronRight)` export const SettingsDevelopersWebhookTableRow = ({ fieldItem, - onClick, + to, }: { fieldItem: Webhook; - onClick: () => void; + to: string; }) => { const theme = useTheme(); return ( - + {fieldItem.targetUrl} { { - navigate( - `/settings/developers/webhooks/${webhookFieldItem.id}`, - ); - }} + to={`/settings/developers/webhooks/${webhookFieldItem.id}`} /> ))} diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx index a66291a12738..1b324db88c1c 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx +++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx @@ -1,8 +1,10 @@ +import { Link } from 'react-router-dom'; import styled from '@emotion/styled'; const StyledTableRow = styled.div<{ isSelected?: boolean; onClick?: () => void; + to?: string; }>` background-color: ${({ isSelected, theme }) => isSelected ? theme.accent.quaternary : 'transparent'}; @@ -13,12 +15,36 @@ const StyledTableRow = styled.div<{ transition: background-color ${({ theme }) => theme.animation.duration.normal}s; width: 100%; + text-decoration: none; &:hover { - background-color: ${({ onClick, theme }) => - onClick ? theme.background.transparent.light : 'transparent'}; - cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')}; + background-color: ${({ onClick, to, theme }) => + onClick || to ? theme.background.transparent.light : 'transparent'}; + cursor: ${({ onClick, to }) => (onClick || to ? 'pointer' : 'default')}; } `; -export { StyledTableRow as TableRow }; +type TableRowProps = { + isSelected?: boolean; + onClick?: () => void; + to?: string; + className?: string; +}; + +export const TableRow = ({ + isSelected, + onClick, + to, + className, + children, +}: React.PropsWithChildren) => ( + + {children} + +); diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx index 450727be2069..d5460ec7313a 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx @@ -82,13 +82,9 @@ export const SettingsObjects = () => { stroke={theme.icon.stroke.sm} /> } - onClick={() => - navigate( - `/settings/objects/${getObjectSlug( - activeObjectMetadataItem, - )}`, - ) - } + to={`/settings/objects/${getObjectSlug( + activeObjectMetadataItem, + )}`} /> ))} From 1c6fd2e6929c5246dae51d80a901a714bef58b8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Sun, 19 May 2024 15:05:07 +0200 Subject: [PATCH 06/14] Settings page --- .../components/SettingsObjectFieldDataType.tsx | 17 +++++++++++------ .../SettingsObjectFieldItemTableRow.tsx | 13 +++++-------- .../data-model/SettingsObjectDetail.tsx | 1 + 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index 699fb380be50..fb6457cf1466 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx @@ -1,3 +1,4 @@ +import { Link } from 'react-router-dom'; import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconComponent, IconTwentyStar } from 'twenty-ui'; @@ -7,13 +8,16 @@ import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSetti import { FieldMetadataType } from '~/generated-metadata/graphql'; type SettingsObjectFieldDataTypeProps = { - onClick?: () => void; + to?: string; Icon?: IconComponent; label?: string; value: SettingsSupportedFieldType; }; -const StyledDataType = styled.div<{ value: SettingsSupportedFieldType }>` +const StyledDataType = styled.div<{ + value: SettingsSupportedFieldType; + to?: string; +}>` align-items: center; border: 1px solid transparent; border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -23,9 +27,10 @@ const StyledDataType = styled.div<{ value: SettingsSupportedFieldType }>` height: 20px; overflow: hidden; padding: 0 ${({ theme }) => theme.spacing(2)}; + text-decoration: none; - ${({ onClick }) => - onClick + ${({ to }) => + to ? css` cursor: pointer; ` @@ -47,7 +52,7 @@ const StyledLabelContainer = styled.div` `; export const SettingsObjectFieldDataType = ({ - onClick, + to, value, Icon: IconFromProps, label: labelFromProps, @@ -64,7 +69,7 @@ export const SettingsObjectFieldDataType = ({ `; return ( - + {label} diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index d15615fc11f1..ad67ed6fd7c6 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -22,6 +22,7 @@ type SettingsObjectFieldItemTableRowProps = { identifierType?: Nullable; variant?: 'field-type' | 'identifier'; isRemoteObjectField?: boolean; + to?: string; }; export const StyledObjectFieldTableRow = styled(TableRow)` @@ -44,6 +45,7 @@ export const SettingsObjectFieldItemTableRow = ({ identifierType, variant = 'field-type', isRemoteObjectField, + to, }: SettingsObjectFieldItemTableRowProps) => { const theme = useTheme(); const { getIcon } = useIcons(); @@ -68,7 +70,7 @@ export const SettingsObjectFieldItemTableRow = ({ : undefined; return ( - + {!!Icon && ( @@ -90,15 +92,10 @@ export const SettingsObjectFieldItemTableRow = ({ - navigate( - `/settings/objects/${getObjectSlug( - relationObjectMetadataItem, - )}`, - ) + ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}` : undefined } value={fieldType} diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx index 452e550c87ab..f442e4391c0e 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx @@ -156,6 +156,7 @@ export const SettingsObjectDetail = () => { } fieldMetadataItem={activeMetadataField} isRemoteObjectField={activeObjectMetadataItem.isRemote} + // to={`./${getFieldSlug(activeMetadataField)}`} ActionIcon={ Date: Sun, 19 May 2024 15:10:19 +0200 Subject: [PATCH 07/14] Remove unused navigate --- .../components/SettingsObjectFieldItemTableRow.tsx | 2 -- .../settings/developers/components/SettingsApiKeysTable.tsx | 3 --- .../settings/developers/components/SettingsWebhooksTable.tsx | 3 --- 3 files changed, 8 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index ad67ed6fd7c6..c2d5fc1ef92f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -1,5 +1,4 @@ import { ReactNode, useMemo } from 'react'; -import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Nullable, useIcons } from 'twenty-ui'; @@ -50,7 +49,6 @@ export const SettingsObjectFieldItemTableRow = ({ const theme = useTheme(); const { getIcon } = useIcons(); const Icon = getIcon(fieldMetadataItem.icon); - const navigate = useNavigate(); const getRelationMetadata = useGetRelationMetadata(); diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx index db8e441de6d8..f5d86e6a3b3d 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx @@ -1,4 +1,3 @@ -import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; @@ -21,8 +20,6 @@ const StyledTableRow = styled(TableRow)` `; export const SettingsApiKeysTable = () => { - const navigate = useNavigate(); - const { records: apiKeys } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.ApiKey, filter: { revokedAt: { is: 'NULL' } }, diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx index 849aac0f0a2a..b10a1de71377 100644 --- a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx +++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx @@ -1,4 +1,3 @@ -import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; @@ -19,8 +18,6 @@ const StyledTableRow = styled(TableRow)` `; export const SettingsWebhooksTable = () => { - const navigate = useNavigate(); - const { records: webhooks } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.Webhook, }); From 5caa6d82098ec5bccecaf9a02432918d96d2cfca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 20 May 2024 08:30:26 +0200 Subject: [PATCH 08/14] Fix JS errors --- .../navigation/components/MainNavigationDrawerItems.tsx | 5 ++--- .../object-metadata/components/ObjectMetadataNavItems.tsx | 6 +----- .../navigation-drawer/components/NavigationDrawerItem.tsx | 6 +++++- packages/twenty-ui/src/display/chip/components/Chip.tsx | 6 +++++- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index 51885dd1814f..a002010e8b9f 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -1,4 +1,4 @@ -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { IconCheckbox, IconSearch, IconSettings } from 'twenty-ui'; @@ -20,7 +20,6 @@ export const MainNavigationDrawerItems = () => { const { toggleCommandMenu } = useCommandMenu(); const isTasksPage = useIsTasksPage(); const currentUserDueTaskCount = useRecoilValue(currentUserDueTaskCountState); - const navigate = useNavigate(); const location = useLocation(); const setNavigationMemorizedUrl = useSetRecoilState( navigationMemorizedUrlState, @@ -38,9 +37,9 @@ export const MainNavigationDrawerItems = () => { /> { setNavigationMemorizedUrl(location.pathname + location.search); - navigate('/settings/profile'); }} Icon={IconSettings} /> diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx index 69a68c2fb422..61526a42e208 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx @@ -1,4 +1,4 @@ -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { useIcons } from 'twenty-ui'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; @@ -10,7 +10,6 @@ import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemV export const ObjectMetadataNavItems = () => { const { activeObjectMetadataItems } = useFilteredObjectMetadataItems(); - const navigate = useNavigate(); const { getIcon } = useIcons(); const currentPath = useLocation().pathname; @@ -63,9 +62,6 @@ export const ObjectMetadataNavItems = () => { to={navigationPath} active={currentPath === `/objects/${objectMetadataItem.namePlural}`} Icon={getIcon(objectMetadataItem.icon)} - onClick={() => { - navigate(navigationPath); - }} /> ); })} diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index a0706b1c9f6a..7d09a6d774be 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -1,4 +1,5 @@ import { Link, useNavigate } from 'react-router-dom'; +import isPropValid from '@emotion/is-prop-valid'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; @@ -32,7 +33,10 @@ type StyledItemProps = { to?: string; }; -const StyledItem = styled.div` +const StyledItem = styled('div', { + shouldForwardProp: (prop) => + !['active', 'danger', 'soon'].includes(prop) && isPropValid(prop), +})` align-items: center; background: ${(props) => props.active ? props.theme.background.transparent.light : 'inherit'}; diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index 535c9d92e442..e44740377acb 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -1,5 +1,6 @@ import { MouseEvent, ReactNode } from 'react'; import { Link } from 'react-router-dom'; +import isPropValid from '@emotion/is-prop-valid'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -37,7 +38,10 @@ type ChipProps = { to?: string; }; -const StyledContainer = styled.div< +const StyledContainer = styled('div', { + shouldForwardProp: (prop) => + !['clickable', 'maxWidth'].includes(prop) && isPropValid(prop), +})< Pick< ChipProps, 'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant' | 'to' From aedad8b966eef18dc9344d66a6761201320e1682 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 20 May 2024 10:23:44 +0200 Subject: [PATCH 09/14] Integrations page --- .../components/SettingsIntegrationComponent.tsx | 8 +++++--- .../components/SettingsIntegrationGroup.tsx | 8 ++++++-- .../ui/input/button/components/Button.tsx | 17 ++++++++++++++++- 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx index 7ef589cc4e00..59b30fdb4d2d 100644 --- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx @@ -86,21 +86,23 @@ export const SettingsIntegrationComponent = ({ ) : integration.type === 'Add' ? ( ); }; diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx index 59b30fdb4d2d..ef875021cbc1 100644 --- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx @@ -60,7 +60,6 @@ export const SettingsIntegrationComponent = ({ const navigate = useNavigate(); const navigateToIntegrationPage = () => navigate(integration.link); - const openExternalLink = () => window.open(integration.link); return ( { - const navigate = useNavigate(); - return ( @@ -41,9 +38,7 @@ export const SettingsDevelopers = () => { title="Create API key" size="small" variant="secondary" - onClick={() => { - navigate('/settings/developers/api-keys/new'); - }} + to={'/settings/developers/api-keys/new'} /> @@ -59,9 +54,7 @@ export const SettingsDevelopers = () => { title="Create Webhook" size="small" variant="secondary" - onClick={() => { - navigate('/settings/developers/webhooks/new'); - }} + to={'/settings/developers/webhooks/new'} /> From ce994d592817ad952f39d69bd2fb7cc3fa0e5899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 20 May 2024 10:33:19 +0200 Subject: [PATCH 11/14] Change API key default expiration --- .../src/modules/ui/layout/table/components/TableRow.tsx | 6 +++++- .../developers/api-keys/SettingsDevelopersApiKeysNew.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx index 1b324db88c1c..486dafaa03f2 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx +++ b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx @@ -1,7 +1,11 @@ import { Link } from 'react-router-dom'; +import isPropValid from '@emotion/is-prop-valid'; import styled from '@emotion/styled'; -const StyledTableRow = styled.div<{ +const StyledTableRow = styled('div', { + shouldForwardProp: (prop) => + !['isSelected'].includes(prop) && isPropValid(prop), +})<{ isSelected?: boolean; onClick?: () => void; to?: string; diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx index 93a34043e09a..37c3e5d2fa89 100644 --- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx +++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx @@ -28,7 +28,7 @@ export const SettingsDevelopersApiKeysNew = () => { name: string; expirationDate: number | null; }>({ - expirationDate: EXPIRATION_DATES[0].value, + expirationDate: EXPIRATION_DATES[5].value, name: '', }); From adeb9ed520bfcd75ae4d6194f73a8780ad388288 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 20 May 2024 11:22:46 +0200 Subject: [PATCH 12/14] Object settings --- .../SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx index ddd4528e9f76..96ec28cc0f4a 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx @@ -184,9 +184,7 @@ export const SettingsObjectNewFieldStep1 = () => { title="Add Custom Field" size="small" variant="secondary" - onClick={() => - navigate(`/settings/objects/${objectSlug}/new-field/step-2`) - } + to={`/settings/objects/${objectSlug}/new-field/step-2`} /> From 63e3973cb0f977e03c7a672b0526b4a2c0a896b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 20 May 2024 11:30:57 +0200 Subject: [PATCH 13/14] More integration --- .../SettingsIntegrationComponent.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx index ef875021cbc1..2aa04d320e38 100644 --- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx +++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { IconArrowUpRight, IconBolt, IconPlus, Pill } from 'twenty-ui'; @@ -12,7 +12,7 @@ interface SettingsIntegrationComponentProps { integration: SettingsIntegration; } -const StyledContainer = styled.div` +const StyledContainer = styled.div<{ to?: string }>` align-items: center; background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; @@ -22,9 +22,11 @@ const StyledContainer = styled.div` flex-direction: row; justify-content: space-between; padding: ${({ theme }) => theme.spacing(3)}; + text-decoration: none; + color: ${({ theme }) => theme.font.color.primary}; - ${({ onClick }) => - isDefined(onClick) && + ${({ to }) => + isDefined(to) && css` cursor: pointer; `} @@ -57,15 +59,10 @@ const StyledLogo = styled.img` export const SettingsIntegrationComponent = ({ integration, }: SettingsIntegrationComponentProps) => { - const navigate = useNavigate(); - - const navigateToIntegrationPage = () => navigate(integration.link); - return ( From 67780b0d770ac1300418eb57f5b9708d0ddd96d3 Mon Sep 17 00:00:00 2001 From: Shyesta Date: Fri, 24 May 2024 16:50:28 -0700 Subject: [PATCH 14/14] Updated Calendar event title from tertiary font to primary font --- .../activities/calendar/components/CalendarEventRow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx index faddcb77021b..78781a277ca6 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx @@ -48,7 +48,7 @@ const StyledAttendanceIndicator = styled.div<{ active?: boolean }>` const StyledLabels = styled.div` align-items: center; display: flex; - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${({ theme }) => theme.font.color.primary}; gap: ${({ theme }) => theme.spacing(2)}; flex: 1 0 auto; `; @@ -56,6 +56,7 @@ const StyledLabels = styled.div` const StyledTime = styled.div` align-items: center; display: flex; + color: ${({ theme }) => theme.font.color.tertiary}; gap: ${({ theme }) => theme.spacing(1)}; width: ${({ theme }) => theme.spacing(26)}; `;