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 51885dd18..a002010e8 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 69a68c2fb..61526a42e 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 699fb380b..fb6457cf1 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 d15615fc1..c2d5fc1ef 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 02bd504bb..ed5c71341 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 502199e04..4d4dc8d45 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 e6541f611..0c093d5ec 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 e1e04d5d5..b10a1de71 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 7ef589cc4..2aa04d320 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' ? (