From 1ceeb68da8625e6545ac8451acc8afcbc81dec95 Mon Sep 17 00:00:00 2001 From: ktang520 <155670906+ktang520@users.noreply.github.com> Date: Mon, 20 May 2024 02:31:39 -0700 Subject: [PATCH] Changed record chip functionality from onClick to anchor tag (#5462) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#4422](https://github.com/twentyhq/twenty/issues/4422) Demo: https://github.com/twentyhq/twenty/assets/155670906/f8027ab2-c579-45f7-9f08-f4441a346ae7 Within the demo, we show the various areas in which the Command/CTRL + Click functionality works. The table cells within the People and Companies tab open within both the current tab and new tab due to unchanged functionality within RecordTableCell. We did this to ensure we could get a PR within by the end of the week. In this commit, we ONLY edited EntityChip.tsx. We did this by: - Removing useNavigate() and handleLinkClick/onClick functionality - Wrapping InnerEntityChip in an anchor tag This allowed for Command/CTRL + Click functionality to work. Clickable left cells on tables, left side menu, and data model navigation files/areas DID NOT get updated. --------- Co-authored-by: Félix Malfait --- .../components/MainNavigationDrawerItems.tsx | 5 +- .../components/ObjectMetadataNavItems.tsx | 6 +-- .../SettingsObjectFieldDataType.tsx | 17 +++--- .../SettingsObjectFieldItemTableRow.tsx | 15 ++---- .../components/SettingsObjectItemTableRow.tsx | 6 +-- .../SettingsApiKeysFieldItemTableRow.tsx | 6 +-- .../components/SettingsApiKeysTable.tsx | 7 +-- .../SettingsDevelopersWebhookTableRow.tsx | 6 +-- .../SettingsReadDocumentationButton.tsx | 5 +- .../components/SettingsWebhooksTable.tsx | 9 +--- .../SettingsIntegrationComponent.tsx | 28 +++++----- .../components/SettingsIntegrationGroup.tsx | 8 ++- .../ui/input/button/components/Button.tsx | 17 +++++- .../ui/layout/table/components/TableRow.tsx | 40 ++++++++++++-- .../components/NavigationDrawerItem.tsx | 12 ++++- .../data-model/SettingsObjectDetail.tsx | 1 + .../SettingsObjectNewFieldStep1.tsx | 4 +- .../settings/data-model/SettingsObjects.tsx | 10 ++-- .../developers/SettingsDevelopers.tsx | 11 +--- .../api-keys/SettingsDevelopersApiKeysNew.tsx | 2 +- .../src/display/chip/components/Chip.tsx | 54 +++++++++++-------- .../display/chip/components/EntityChip.tsx | 5 +- 22 files changed, 154 insertions(+), 120 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index 51885dd181..a002010e8b 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 69a68c2fb4..61526a42e2 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/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index 699fb380be..fb6457cf14 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 d15615fc11..c2d5fc1ef9 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'; @@ -22,6 +21,7 @@ type SettingsObjectFieldItemTableRowProps = { identifierType?: Nullable; variant?: 'field-type' | 'identifier'; isRemoteObjectField?: boolean; + to?: string; }; export const StyledObjectFieldTableRow = styled(TableRow)` @@ -44,11 +44,11 @@ export const SettingsObjectFieldItemTableRow = ({ identifierType, variant = 'field-type', isRemoteObjectField, + to, }: SettingsObjectFieldItemTableRowProps) => { const theme = useTheme(); const { getIcon } = useIcons(); const Icon = getIcon(fieldMetadataItem.icon); - const navigate = useNavigate(); const getRelationMetadata = useGetRelationMetadata(); @@ -68,7 +68,7 @@ export const SettingsObjectFieldItemTableRow = ({ : undefined; return ( - + {!!Icon && ( @@ -90,15 +90,10 @@ export const SettingsObjectFieldItemTableRow = ({ - navigate( - `/settings/objects/${getObjectSlug( - relationObjectMetadataItem, - )}`, - ) + ? `/settings/objects/${getObjectSlug(relationObjectMetadataItem)}` : undefined } value={fieldType} 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 02bd504bb2..ed5c713416 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 502199e04e..4d4dc8d45e 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} { - const navigate = useNavigate(); - const { records: apiKeys } = useFindManyRecords({ objectNameSingular: CoreObjectNameSingular.ApiKey, filter: { revokedAt: { is: 'NULL' } }, @@ -41,9 +38,7 @@ export const SettingsApiKeysTable = () => { { - 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 e6541f6115..0c093d5ecb 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} { accent="default" size="small" Icon={IconBook2} - onClick={() => { - window.open('https://docs.twenty.com'); - }} + to={'https://docs.twenty.com'} + target="_blank" > ); }; 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 e1e04d5d5e..b10a1de713 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, }); @@ -37,11 +34,7 @@ export const SettingsWebhooksTable = () => { { - navigate( - `/settings/developers/webhooks/${webhookFieldItem.id}`, - ); - }} + to={`/settings/developers/webhooks/${webhookFieldItem.id}`} /> ))} 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 7ef589cc4e..2aa04d320e 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,16 +59,10 @@ const StyledLogo = styled.img` export const SettingsIntegrationComponent = ({ integration, }: SettingsIntegrationComponentProps) => { - const navigate = useNavigate(); - - const navigateToIntegrationPage = () => navigate(integration.link); - const openExternalLink = () => window.open(integration.link); - return ( @@ -86,21 +82,23 @@ export const SettingsIntegrationComponent = ({ ) : integration.type === 'Add' ? (