admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Chore: Edit button on cells should be guessed by the field's type (#1952)

Browse Source 
* created custom hook to get Icon Component as per field type

* Fix conflicts

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Ayush Agrawal
2023-10-18 02:12:57 +05:30
committed by GitHub
parent 2c1ad1661a
commit a1a2309140
10 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -169,7 +169,6 @@ export const CompanyBoardCard = () => {
Icon: viewField.Icon,
type: viewField.type,
metadata: viewField.metadata,
buttonIcon: viewField.buttonIcon,
entityChipDisplayMapper: viewField.entityChipDisplayMapper,
},
useUpdateEntityMutation: useUpdateOnePipelineProgressMutation,

8
front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx
View File

@ -11,7 +11,6 @@ import {
FieldURLMetadata,
} from '@/ui/data/field/types/FieldMetadata';
import {
IconArrowUpRight,
IconBrandLinkedin,
IconBrandX,
IconBuildingSkyscraper,
@ -19,7 +18,6 @@ import {
IconLink,
IconMap,
IconMoneybag,
IconPencil,
IconTarget,
IconUserCircle,
IconUsers,
@ -43,7 +41,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'Company Name',
},
isVisible: true,
buttonIcon: IconArrowUpRight,
infoTooltipContent: 'The company name.',
basePathToShowPage: '/companies/',
} satisfies ColumnDefinition<FieldChipMetadata>,
@ -59,7 +56,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'example.com',
},
isVisible: true,
buttonIcon: IconPencil,
infoTooltipContent:
'The company website URL. We use this url to fetch the company icon.',
} satisfies ColumnDefinition<FieldURLMetadata>,
@ -125,7 +121,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'LinkedIn URL',
},
isVisible: true,
buttonIcon: IconPencil,
infoTooltipContent: 'The company Linkedin account.',
} satisfies ColumnDefinition<FieldURLMetadata>,
{
@ -182,7 +177,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'X',
},
isVisible: false,
buttonIcon: IconPencil,
infoTooltipContent: 'The company Twitter account.',
} satisfies ColumnDefinition<FieldURLMetadata>,
];
@ -201,7 +195,6 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'Company Name',
},
isVisible: true,
buttonIcon: IconArrowUpRight,
infoTooltipContent: 'The company name.',
basePathToShowPage: '/companies/',
} satisfies ColumnDefinition<FieldTextMetadata>,
@ -217,7 +210,6 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
placeHolder: 'Company Name',
},
isVisible: true,
buttonIcon: IconArrowUpRight,
infoTooltipContent: 'The company name.',
basePathToShowPage: '/companies/',
} satisfies ColumnDefinition<FieldTextMetadata>,

7
front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx
View File

@ -10,7 +10,6 @@ import {
FieldURLMetadata,
} from '@/ui/data/field/types/FieldMetadata';
import {
IconArrowUpRight,
IconBrandLinkedin,
IconBrandX,
IconBriefcase,
@ -18,7 +17,6 @@ import {
IconCalendarEvent,
IconMail,
IconMap,
IconPencil,
IconPhone,
IconUser,
} from '@/ui/display/icon/index';
@ -43,7 +41,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
avatarUrlFieldName: 'avatarUrl',
entityType: Entity.Person,
},
buttonIcon: IconArrowUpRight,
infoTooltipContent: 'Contact’s first and last name.',
basePathToShowPage: '/person/',
} satisfies ColumnDefinition<FieldDoubleTextChipMetadata>,
@ -58,7 +55,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'email',
placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field
},
buttonIcon: IconPencil,
infoTooltipContent: 'Contact’s Email.',
} satisfies ColumnDefinition<FieldEmailMetadata>,
{
@ -92,7 +88,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'phone',
placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field
},
buttonIcon: IconPencil,
infoTooltipContent: 'Contact’s phone number.',
} satisfies ColumnDefinition<FieldPhoneMetadata>,
{
@ -144,7 +139,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'linkedinUrl',
placeHolder: 'LinkedIn',
},
buttonIcon: IconPencil,
infoTooltipContent: 'Contact’s Linkedin account.',
} satisfies ColumnDefinition<FieldURLMetadata>,
{
@ -158,7 +152,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
fieldName: 'xUrl',
placeHolder: 'X',
},
buttonIcon: IconPencil,
infoTooltipContent: 'Contact’s Twitter account.',
} satisfies ColumnDefinition<FieldURLMetadata>,
];

2
front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx
View File

@ -8,7 +8,6 @@ import {
import {
IconCalendarEvent,
IconCurrencyDollar,
IconPencil,
IconProgressCheck,
IconUser,
} from '@/ui/display/icon';
@ -69,7 +68,6 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
useEditButton: true,
},
isVisible: true,
buttonIcon: IconPencil,
infoTooltipContent: 'Primary contact within the company.',
entityChipDisplayMapper: (dataObject: Person) => {
return {

10
front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx
View File

@ -2,10 +2,12 @@ import { useContext } from 'react';
import { FieldDisplay } from '@/ui/data/field/components/FieldDisplay';
import { FieldInput } from '@/ui/data/field/components/FieldInput';
import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
import { useGetButtonIcon } from '@/ui/data/field/hooks/useGetButtonIcon';
import { FieldInputEvent } from '@/ui/data/field/types/FieldInputEvent';
import { IconArrowUpRight } from '@/ui/display/icon';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';
import { useTableCell } from '../hooks/useTableCell';
@ -16,7 +18,9 @@ export const TableCell = ({
}: {
customHotkeyScope: HotkeyScope;
}) => {
const { fieldDefinition } = useContext(FieldContext);
const isFirstColumn = useContext(ColumnIndexContext) === 0;
const buttonIcon = useGetButtonIcon();
const { closeTableCell } = useTableCell();
@ -68,7 +72,7 @@ export const TableCell = ({
/>
}
nonEditModeContent={<FieldDisplay />}
buttonIcon={fieldDefinition.buttonIcon}
buttonIcon={isFirstColumn ? IconArrowUpRight : buttonIcon}
></TableCellContainer>
);
};

22
front/src/modules/ui/data/field/hooks/useGetButtonIcon.ts Normal file
View File

@ -0,0 +1,22 @@
import { useContext } from 'react';
import { IconPencil } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldContext } from '../contexts/FieldContext';
import { isFieldEmail } from '../types/guards/isFieldEmail';
import { isFieldPhone } from '../types/guards/isFieldPhone';
import { isFieldRelation } from '../types/guards/isFieldRelation';
import { isFieldURL } from '../types/guards/isFieldURL';
export const useGetButtonIcon = (): IconComponent | undefined => {
const { fieldDefinition } = useContext(FieldContext);
if (
isFieldURL(fieldDefinition) ||
isFieldEmail(fieldDefinition) ||
isFieldPhone(fieldDefinition) ||
isFieldRelation(fieldDefinition)
) {
return IconPencil;
}
};

1
front/src/modules/ui/data/field/types/FieldDefinition.ts
View File

@ -10,7 +10,6 @@ export type FieldDefinition<T extends FieldMetadata> = {
Icon?: IconComponent;
type: FieldType;
metadata: T;
buttonIcon?: IconComponent;
basePathToShowPage?: string;
infoTooltipContent?: string;
entityChipDisplayMapper?: (dataObject: any) => {

19
front/src/modules/ui/data/inline-cell/components/InlineCell.tsx
View File

@ -1,14 +1,15 @@
import { useContext } from 'react';
import { FieldDisplay } from '@/ui/data/field/components/FieldDisplay';
import { FieldInput } from '@/ui/data/field/components/FieldInput';
import { FieldContext } from '@/ui/data/field/contexts/FieldContext';
import { useIsFieldEmpty } from '@/ui/data/field/hooks/useIsFieldEmpty';
import { useIsFieldInputOnly } from '@/ui/data/field/hooks/useIsFieldInputOnly';
import { FieldInputEvent } from '@/ui/data/field/types/FieldInputEvent';
import { isFieldRelation } from '@/ui/data/field/types/guards/isFieldRelation';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { FieldDisplay } from '../../field/components/FieldDisplay';
import { FieldInput } from '../../field/components/FieldInput';
import { FieldContext } from '../../field/contexts/FieldContext';
import { useGetButtonIcon } from '../../field/hooks/useGetButtonIcon';
import { useIsFieldEmpty } from '../../field/hooks/useIsFieldEmpty';
import { useIsFieldInputOnly } from '../../field/hooks/useIsFieldInputOnly';
import { FieldInputEvent } from '../../field/types/FieldInputEvent';
import { isFieldRelation } from '../../field/types/guards/isFieldRelation';
import { useInlineCell } from '../hooks/useInlineCell';
import { InlineCellContainer } from './InlineCellContainer';
@ -16,6 +17,8 @@ import { InlineCellContainer } from './InlineCellContainer';
export const InlineCell = () => {
const { fieldDefinition } = useContext(FieldContext);
const buttonIcon = useGetButtonIcon();
const isFieldEmpty = useIsFieldEmpty();
const isFieldInputOnly = useIsFieldInputOnly();
@ -57,7 +60,7 @@ export const InlineCell = () => {
return (
<InlineCellContainer
buttonIcon={fieldDefinition.buttonIcon}
buttonIcon={buttonIcon}
customEditHotkeyScope={
isFieldRelation(fieldDefinition)
? {

3
front/src/pages/companies/constants/companyShowFieldDefinition.tsx
View File

@ -13,7 +13,6 @@ import {
IconCalendar,
IconLink,
IconMap,
IconPencil,
IconTarget,
IconUserCircle,
IconUsers,
@ -31,7 +30,6 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'domainName',
placeHolder: 'URL',
},
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'accountOwner',
@ -88,7 +86,6 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'xUrl',
placeHolder: 'X',
},
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'createdAt',

5
front/src/pages/people/constants/personShowFieldDefinition.tsx
View File

@ -15,7 +15,6 @@ import {
IconCalendar,
IconMail,
IconMap,
IconPencil,
IconPhone,
} from '@/ui/display/icon';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
@ -38,7 +37,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
name: 'Company',
Icon: IconBuildingSkyscraper,
type: 'relation',
buttonIcon: IconPencil,
metadata: {
fieldName: 'company',
relationType: Entity.Company,
@ -60,7 +58,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'phone',
placeHolder: 'Phone',
},
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldPhoneMetadata>,
{
key: 'jobTitle',
@ -91,7 +88,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'linkedinUrl',
placeHolder: 'Linkedin URL',
},
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'xUrl',
@ -102,7 +98,6 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
fieldName: 'xUrl',
placeHolder: 'X URL',
},
buttonIcon: IconPencil,
} satisfies FieldDefinition<FieldURLMetadata>,
{
key: 'createdAt',