From a1a2309140d36d452ff4334be8e0a817c1e5af83 Mon Sep 17 00:00:00 2001 From: Ayush Agrawal <54364088+AyushAgrawal-A2@users.noreply.github.com> Date: Wed, 18 Oct 2023 02:12:57 +0530 Subject: [PATCH] Chore: Edit button on cells should be guessed by the field's type (#1952) * created custom hook to get Icon Component as per field type * Fix conflicts --------- Co-authored-by: Charles Bochet --- .../companies/components/CompanyBoardCard.tsx | 1 - .../companiesAvailableColumnDefinitions.tsx | 8 ------- .../peopleAvailableColumnDefinitions.tsx | 7 ------ .../pipelineAvailableFieldDefinitions.tsx | 2 -- .../table-cell/components/TableCell.tsx | 10 ++++++--- .../ui/data/field/hooks/useGetButtonIcon.ts | 22 +++++++++++++++++++ .../ui/data/field/types/FieldDefinition.ts | 1 - .../inline-cell/components/InlineCell.tsx | 19 +++++++++------- .../constants/companyShowFieldDefinition.tsx | 3 --- .../constants/personShowFieldDefinition.tsx | 5 ----- 10 files changed, 40 insertions(+), 38 deletions(-) create mode 100644 front/src/modules/ui/data/field/hooks/useGetButtonIcon.ts diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index 1cad5cb72..f5f721375 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -169,7 +169,6 @@ export const CompanyBoardCard = () => { Icon: viewField.Icon, type: viewField.type, metadata: viewField.metadata, - buttonIcon: viewField.buttonIcon, entityChipDisplayMapper: viewField.entityChipDisplayMapper, }, useUpdateEntityMutation: useUpdateOnePipelineProgressMutation, diff --git a/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx b/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx index ef4127668..d034fb6aa 100644 --- a/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx +++ b/front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx @@ -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, @@ -59,7 +56,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition, @@ -125,7 +121,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition, { @@ -182,7 +177,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition, ]; @@ -201,7 +195,6 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition, @@ -217,7 +210,6 @@ export const suppliersAvailableColumnDefinitions: ColumnDefinition, diff --git a/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx b/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx index badd2fb8b..03288e5c6 100644 --- a/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx +++ b/front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx @@ -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[] avatarUrlFieldName: 'avatarUrl', entityType: Entity.Person, }, - buttonIcon: IconArrowUpRight, infoTooltipContent: 'Contact’s first and last name.', basePathToShowPage: '/person/', } satisfies ColumnDefinition, @@ -58,7 +55,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition[] fieldName: 'email', placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field }, - buttonIcon: IconPencil, infoTooltipContent: 'Contact’s Email.', } satisfies ColumnDefinition, { @@ -92,7 +88,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition[] 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, { @@ -144,7 +139,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition[] fieldName: 'linkedinUrl', placeHolder: 'LinkedIn', }, - buttonIcon: IconPencil, infoTooltipContent: 'Contact’s Linkedin account.', } satisfies ColumnDefinition, { @@ -158,7 +152,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition[] fieldName: 'xUrl', placeHolder: 'X', }, - buttonIcon: IconPencil, infoTooltipContent: 'Contact’s Twitter account.', } satisfies ColumnDefinition, ]; diff --git a/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx b/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx index bfea0f2de..26987be8d 100644 --- a/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx +++ b/front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx @@ -8,7 +8,6 @@ import { import { IconCalendarEvent, IconCurrencyDollar, - IconPencil, IconProgressCheck, IconUser, } from '@/ui/display/icon'; @@ -69,7 +68,6 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition { return { diff --git a/front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx b/front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx index 7d43417d7..58a32ffa1 100644 --- a/front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx +++ b/front/src/modules/ui/data/data-table/table-cell/components/TableCell.tsx @@ -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={} - buttonIcon={fieldDefinition.buttonIcon} + buttonIcon={isFirstColumn ? IconArrowUpRight : buttonIcon} > ); }; diff --git a/front/src/modules/ui/data/field/hooks/useGetButtonIcon.ts b/front/src/modules/ui/data/field/hooks/useGetButtonIcon.ts new file mode 100644 index 000000000..6e7d009ec --- /dev/null +++ b/front/src/modules/ui/data/field/hooks/useGetButtonIcon.ts @@ -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; + } +}; diff --git a/front/src/modules/ui/data/field/types/FieldDefinition.ts b/front/src/modules/ui/data/field/types/FieldDefinition.ts index 196386583..d3e6b90af 100644 --- a/front/src/modules/ui/data/field/types/FieldDefinition.ts +++ b/front/src/modules/ui/data/field/types/FieldDefinition.ts @@ -10,7 +10,6 @@ export type FieldDefinition = { Icon?: IconComponent; type: FieldType; metadata: T; - buttonIcon?: IconComponent; basePathToShowPage?: string; infoTooltipContent?: string; entityChipDisplayMapper?: (dataObject: any) => { diff --git a/front/src/modules/ui/data/inline-cell/components/InlineCell.tsx b/front/src/modules/ui/data/inline-cell/components/InlineCell.tsx index 89343616d..54dff8f85 100644 --- a/front/src/modules/ui/data/inline-cell/components/InlineCell.tsx +++ b/front/src/modules/ui/data/inline-cell/components/InlineCell.tsx @@ -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 ( [] = [ fieldName: 'domainName', placeHolder: 'URL', }, - buttonIcon: IconPencil, } satisfies FieldDefinition, { key: 'accountOwner', @@ -88,7 +86,6 @@ export const companyShowFieldDefinition: FieldDefinition[] = [ fieldName: 'xUrl', placeHolder: 'X', }, - buttonIcon: IconPencil, } satisfies FieldDefinition, { key: 'createdAt', diff --git a/front/src/pages/people/constants/personShowFieldDefinition.tsx b/front/src/pages/people/constants/personShowFieldDefinition.tsx index e6f1a52db..18db548fc 100644 --- a/front/src/pages/people/constants/personShowFieldDefinition.tsx +++ b/front/src/pages/people/constants/personShowFieldDefinition.tsx @@ -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[] = [ name: 'Company', Icon: IconBuildingSkyscraper, type: 'relation', - buttonIcon: IconPencil, metadata: { fieldName: 'company', relationType: Entity.Company, @@ -60,7 +58,6 @@ export const personShowFieldDefinition: FieldDefinition[] = [ fieldName: 'phone', placeHolder: 'Phone', }, - buttonIcon: IconPencil, } satisfies FieldDefinition, { key: 'jobTitle', @@ -91,7 +88,6 @@ export const personShowFieldDefinition: FieldDefinition[] = [ fieldName: 'linkedinUrl', placeHolder: 'Linkedin URL', }, - buttonIcon: IconPencil, } satisfies FieldDefinition, { key: 'xUrl', @@ -102,7 +98,6 @@ export const personShowFieldDefinition: FieldDefinition[] = [ fieldName: 'xUrl', placeHolder: 'X URL', }, - buttonIcon: IconPencil, } satisfies FieldDefinition, { key: 'createdAt',