1ceeb68da8
[#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 <felix.malfait@gmail.com>
66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { useIcons } from 'twenty-ui';
|
|
|
|
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
|
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
|
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
|
|
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
|
|
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
|
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
|
|
|
type SettingsObjectItemTableRowProps = {
|
|
action: ReactNode;
|
|
objectItem: ObjectMetadataItem;
|
|
to?: string;
|
|
};
|
|
|
|
export const StyledObjectTableRow = styled(TableRow)`
|
|
grid-template-columns: 180px 98.7px 98.7px 98.7px 36px;
|
|
`;
|
|
|
|
const StyledNameTableCell = styled(TableCell)`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledActionTableCell = styled(TableCell)`
|
|
justify-content: center;
|
|
padding-right: ${({ theme }) => theme.spacing(1)};
|
|
`;
|
|
|
|
export const SettingsObjectItemTableRow = ({
|
|
action,
|
|
objectItem,
|
|
to,
|
|
}: SettingsObjectItemTableRowProps) => {
|
|
const theme = useTheme();
|
|
|
|
const { totalCount } = useFindManyRecords({
|
|
objectNameSingular: objectItem.nameSingular,
|
|
});
|
|
const { getIcon } = useIcons();
|
|
const Icon = getIcon(objectItem.icon);
|
|
const objectTypeLabel = getObjectTypeLabel(objectItem);
|
|
|
|
return (
|
|
<StyledObjectTableRow key={objectItem.namePlural} to={to}>
|
|
<StyledNameTableCell>
|
|
{!!Icon && (
|
|
<Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
|
|
)}
|
|
{objectItem.labelPlural}
|
|
</StyledNameTableCell>
|
|
<TableCell>
|
|
<SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
{objectItem.fields.filter((field) => !field.isSystem).length}
|
|
</TableCell>
|
|
<TableCell align="right">{totalCount}</TableCell>
|
|
<StyledActionTableCell>{action}</StyledActionTableCell>
|
|
</StyledObjectTableRow>
|
|
);
|
|
};
|