refactor: index ViewField by viewId and key (#1416)

* refactor: index ViewField by viewId and key

Closes #1413

* refactor: rename ViewField properties

front/src/generated/graphql.tsx

@@ -2458,34 +2458,34 @@ export type ViewCreateNestedOneWithoutFieldsInput = {
 
 export type ViewField = {
   __typename?: 'ViewField';
-  fieldName: Scalars['String'];
-  id: Scalars['ID'];
   index: Scalars['Int'];
   isVisible: Scalars['Boolean'];
-  objectName: Scalars['String'];
+  key: Scalars['String'];
-  sizeInPx: Scalars['Int'];
+  name: Scalars['String'];
-  view?: Maybe<View>;
+  objectId: Scalars['String'];
-  viewId?: Maybe<Scalars['String']>;
+  size: Scalars['Int'];
+  view: View;
+  viewId: Scalars['String'];
 };
 
 export type ViewFieldCreateInput = {
-  fieldName: Scalars['String'];
-  id?: InputMaybe<Scalars['String']>;
   index: Scalars['Int'];
   isVisible: Scalars['Boolean'];
-  objectName: Scalars['String'];
+  key: Scalars['String'];
-  sizeInPx: Scalars['Int'];
+  name: Scalars['String'];
-  view?: InputMaybe<ViewCreateNestedOneWithoutFieldsInput>;
+  objectId: Scalars['String'];
+  size: Scalars['Int'];
+  view: ViewCreateNestedOneWithoutFieldsInput;
 };
 
 export type ViewFieldCreateManyInput = {
-  fieldName: Scalars['String'];
-  id?: InputMaybe<Scalars['String']>;
   index: Scalars['Int'];
   isVisible: Scalars['Boolean'];
-  objectName: Scalars['String'];
+  key: Scalars['String'];
-  sizeInPx: Scalars['Int'];
+  name: Scalars['String'];
-  viewId?: InputMaybe<Scalars['String']>;
+  objectId: Scalars['String'];
+  size: Scalars['Int'];
+  viewId: Scalars['String'];
 };
 
 export type ViewFieldCreateNestedManyWithoutViewInput = {
@@ -2503,35 +2503,35 @@ export type ViewFieldOrderByRelationAggregateInput = {
 };
 
 export type ViewFieldOrderByWithRelationInput = {
-  fieldName?: InputMaybe<SortOrder>;
-  id?: InputMaybe<SortOrder>;
   index?: InputMaybe<SortOrder>;
   isVisible?: InputMaybe<SortOrder>;
-  objectName?: InputMaybe<SortOrder>;
+  key?: InputMaybe<SortOrder>;
-  sizeInPx?: InputMaybe<SortOrder>;
+  name?: InputMaybe<SortOrder>;
+  objectId?: InputMaybe<SortOrder>;
+  size?: InputMaybe<SortOrder>;
   view?: InputMaybe<ViewOrderByWithRelationInput>;
   viewId?: InputMaybe<SortOrder>;
 };
 
 export enum ViewFieldScalarFieldEnum {
-  FieldName = 'fieldName',
-  Id = 'id',
   Index = 'index',
   IsVisible = 'isVisible',
-  ObjectName = 'objectName',
+  Key = 'key',
-  SizeInPx = 'sizeInPx',
+  Name = 'name',
+  ObjectId = 'objectId',
+  Size = 'size',
   ViewId = 'viewId',
   WorkspaceId = 'workspaceId'
 }
 
 export type ViewFieldUpdateInput = {
-  fieldName?: InputMaybe<Scalars['String']>;
-  id?: InputMaybe<Scalars['String']>;
   index?: InputMaybe<Scalars['Int']>;
   isVisible?: InputMaybe<Scalars['Boolean']>;
-  objectName?: InputMaybe<Scalars['String']>;
+  key?: InputMaybe<Scalars['String']>;
-  sizeInPx?: InputMaybe<Scalars['Int']>;
+  name?: InputMaybe<Scalars['String']>;
-  view?: InputMaybe<ViewUpdateOneWithoutFieldsNestedInput>;
+  objectId?: InputMaybe<Scalars['String']>;
+  size?: InputMaybe<Scalars['Int']>;
+  view?: InputMaybe<ViewUpdateOneRequiredWithoutFieldsNestedInput>;
 };
 
 export type ViewFieldUpdateManyWithoutViewNestedInput = {
@@ -2546,29 +2546,27 @@ export type ViewFieldUpdateManyWithoutWorkspaceNestedInput = {
   set?: InputMaybe<Array<ViewFieldWhereUniqueInput>>;
 };
 
+export type ViewFieldViewIdKeyCompoundUniqueInput = {
+  key: Scalars['String'];
+  viewId: Scalars['String'];
+};
+
 export type ViewFieldWhereInput = {
   AND?: InputMaybe<Array<ViewFieldWhereInput>>;
   NOT?: InputMaybe<Array<ViewFieldWhereInput>>;
   OR?: InputMaybe<Array<ViewFieldWhereInput>>;
-  fieldName?: InputMaybe<StringFilter>;
-  id?: InputMaybe<StringFilter>;
   index?: InputMaybe<IntFilter>;
   isVisible?: InputMaybe<BoolFilter>;
-  objectName?: InputMaybe<StringFilter>;
+  key?: InputMaybe<StringFilter>;
-  sizeInPx?: InputMaybe<IntFilter>;
+  name?: InputMaybe<StringFilter>;
+  objectId?: InputMaybe<StringFilter>;
+  size?: InputMaybe<IntFilter>;
   view?: InputMaybe<ViewRelationFilter>;
-  viewId?: InputMaybe<StringNullableFilter>;
+  viewId?: InputMaybe<StringFilter>;
 };
 
 export type ViewFieldWhereUniqueInput = {
-  id?: InputMaybe<Scalars['String']>;
+  viewId_key?: InputMaybe<ViewFieldViewIdKeyCompoundUniqueInput>;
-  workspaceId_viewId_objectName_fieldName?: InputMaybe<ViewFieldWorkspaceIdViewIdObjectNameFieldNameCompoundUniqueInput>;
-};
-
-export type ViewFieldWorkspaceIdViewIdObjectNameFieldNameCompoundUniqueInput = {
-  fieldName: Scalars['String'];
-  objectName: Scalars['String'];
-  viewId: Scalars['String'];
 };
 
 export type ViewFilter = {
@@ -2811,6 +2809,10 @@ export type ViewUpdateManyWithoutWorkspaceNestedInput = {
   set?: InputMaybe<Array<ViewWhereUniqueInput>>;
 };
 
+export type ViewUpdateOneRequiredWithoutFieldsNestedInput = {
+  connect?: InputMaybe<ViewWhereUniqueInput>;
+};
+
 export type ViewUpdateOneRequiredWithoutFiltersNestedInput = {
   connect?: InputMaybe<ViewWhereUniqueInput>;
 };
@@ -2819,11 +2821,6 @@ export type ViewUpdateOneRequiredWithoutSortsNestedInput = {
   connect?: InputMaybe<ViewWhereUniqueInput>;
 };
 
-export type ViewUpdateOneWithoutFieldsNestedInput = {
-  connect?: InputMaybe<ViewWhereUniqueInput>;
-  disconnect?: InputMaybe<Scalars['Boolean']>;
-};
-
 export type ViewWhereInput = {
   AND?: InputMaybe<Array<ViewWhereInput>>;
   NOT?: InputMaybe<Array<ViewWhereInput>>;
@@ -3477,7 +3474,7 @@ export type UpdateViewFieldMutationVariables = Exact<{
 }>;
 
 
-export type UpdateViewFieldMutation = { __typename?: 'Mutation', updateOneViewField: { __typename?: 'ViewField', id: string, fieldName: string, isVisible: boolean, sizeInPx: number, index: number } };
+export type UpdateViewFieldMutation = { __typename?: 'Mutation', updateOneViewField: { __typename?: 'ViewField', index: number, isVisible: boolean, key: string, name: string, size: number } };
 
 export type UpdateViewFilterMutationVariables = Exact<{
   data: ViewFilterUpdateInput;
@@ -3501,7 +3498,7 @@ export type GetViewFieldsQueryVariables = Exact<{
 }>;
 
 
-export type GetViewFieldsQuery = { __typename?: 'Query', viewFields: Array<{ __typename?: 'ViewField', id: string, fieldName: string, isVisible: boolean, sizeInPx: number, index: number }> };
+export type GetViewFieldsQuery = { __typename?: 'Query', viewFields: Array<{ __typename?: 'ViewField', index: number, isVisible: boolean, key: string, name: string, size: number }> };
 
 export type GetViewFiltersQueryVariables = Exact<{
   where?: InputMaybe<ViewFilterWhereInput>;
@@ -6413,11 +6410,11 @@ export type UpdateViewMutationOptions = Apollo.BaseMutationOptions<UpdateViewMut
 export const UpdateViewFieldDocument = gql`
     mutation UpdateViewField($data: ViewFieldUpdateInput!, $where: ViewFieldWhereUniqueInput!) {
   updateOneViewField(data: $data, where: $where) {
-    id
-    fieldName
-    isVisible
-    sizeInPx
     index
+    isVisible
+    key
+    name
+    size
   }
 }
     `;
@@ -6525,11 +6522,11 @@ export type UpdateViewSortMutationOptions = Apollo.BaseMutationOptions<UpdateVie
 export const GetViewFieldsDocument = gql`
     query GetViewFields($where: ViewFieldWhereInput, $orderBy: [ViewFieldOrderByWithRelationInput!]) {
   viewFields: findManyViewField(where: $where, orderBy: $orderBy) {
-    id
-    fieldName
-    isVisible
-    sizeInPx
     index
+    isVisible
+    key
+    name
+    size
   }
 }
     `;

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -162,11 +162,11 @@ export function CompanyBoardCard() {
             <EditableFieldEntityIdContext.Provider value={boardCardId}>
               {viewFieldsDefinitions.map((viewField) => {
                 return (
-                  <PreventSelectOnClickContainer key={viewField.id}>
+                  <PreventSelectOnClickContainer key={viewField.key}>
                     <EditableFieldDefinitionContext.Provider
                       value={{
-                        id: viewField.id,
+                        key: viewField.key,
-                        label: viewField.label,
+                        name: viewField.name,
                         icon: viewField.icon,
                         type: viewField.metadata.type,
                         metadata: viewField.metadata,

front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx

@@ -27,11 +27,11 @@ import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadata>[] =
   [
     {
-      id: 'name',
+      key: 'name',
-      label: 'Name',
+      name: 'Name',
       icon: <IconBuildingSkyscraper />,
       size: 180,
-      order: 1,
+      index: 0,
       metadata: {
         type: 'chip',
         urlFieldName: 'domainName',
@@ -41,11 +41,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } as ColumnDefinition<ViewFieldChipMetadata>,
     {
-      id: 'domainName',
+      key: 'domainName',
-      label: 'URL',
+      name: 'URL',
       icon: <IconLink />,
       size: 100,
-      order: 2,
+      index: 1,
       metadata: {
         type: 'url',
         fieldName: 'domainName',
@@ -54,11 +54,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } as ColumnDefinition<ViewFieldURLMetadata>,
     {
-      id: 'accountOwner',
+      key: 'accountOwner',
-      label: 'Account Owner',
+      name: 'Account Owner',
       icon: <IconUserCircle />,
       size: 150,
-      order: 3,
+      index: 2,
       metadata: {
         type: 'relation',
         fieldName: 'accountOwner',
@@ -67,11 +67,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } satisfies ColumnDefinition<ViewFieldRelationMetadata>,
     {
-      id: 'createdAt',
+      key: 'createdAt',
-      label: 'Creation',
+      name: 'Creation',
       icon: <IconCalendarEvent />,
       size: 150,
-      order: 4,
+      index: 3,
       metadata: {
         type: 'date',
         fieldName: 'createdAt',
@@ -79,11 +79,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } satisfies ColumnDefinition<ViewFieldDateMetadata>,
     {
-      id: 'employees',
+      key: 'employees',
-      label: 'Employees',
+      name: 'Employees',
       icon: <IconUsers />,
       size: 150,
-      order: 5,
+      index: 4,
       metadata: {
         type: 'number',
         fieldName: 'employees',
@@ -92,11 +92,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } satisfies ColumnDefinition<ViewFieldNumberMetadata>,
     {
-      id: 'linkedin',
+      key: 'linkedin',
-      label: 'LinkedIn',
+      name: 'LinkedIn',
       icon: <IconBrandLinkedin />,
       size: 170,
-      order: 6,
+      index: 5,
       metadata: {
         type: 'url',
         fieldName: 'linkedinUrl',
@@ -105,11 +105,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } satisfies ColumnDefinition<ViewFieldURLMetadata>,
     {
-      id: 'address',
+      key: 'address',
-      label: 'Address',
+      name: 'Address',
       icon: <IconMap />,
       size: 170,
-      order: 7,
+      index: 6,
       metadata: {
         type: 'text',
         fieldName: 'address',
@@ -118,11 +118,11 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: true,
     } satisfies ColumnDefinition<ViewFieldTextMetadata>,
     {
-      id: 'idealCustomerProfile',
+      key: 'idealCustomerProfile',
-      label: 'ICP',
+      name: 'ICP',
       icon: <IconTarget />,
       size: 150,
-      order: 8,
+      index: 7,
       metadata: {
         type: 'boolean',
         fieldName: 'idealCustomerProfile',
@@ -130,22 +130,22 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
       isVisible: false,
     } satisfies ColumnDefinition<ViewFieldBooleanMetadata>,
     {
-      id: 'annualRecurringRevenue',
+      key: 'annualRecurringRevenue',
-      label: 'ARR',
+      name: 'ARR',
       icon: <IconMoneybag />,
       size: 150,
-      order: 8,
+      index: 8,
       metadata: {
         type: 'moneyAmount',
         fieldName: 'annualRecurringRevenue',
       },
     } satisfies ColumnDefinition<ViewFieldMoneyMetadata>,
     {
-      id: 'xUrl',
+      key: 'xUrl',
-      label: 'Twitter',
+      name: 'Twitter',
       icon: <IconBrandX />,
       size: 150,
-      order: 8,
+      index: 9,
       metadata: {
         type: 'url',
         fieldName: 'xUrl',

front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx

@@ -25,11 +25,11 @@ import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadata>[] =
   [
     {
-      id: 'displayName',
+      key: 'displayName',
-      label: 'People',
+      name: 'People',
       icon: <IconUser />,
       size: 210,
-      order: 1,
+      index: 0,
       metadata: {
         type: 'double-text-chip',
         firstValueFieldName: 'firstName',
@@ -41,11 +41,11 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldDoubleTextChipMetadata>,
     {
-      id: 'email',
+      key: 'email',
-      label: 'Email',
+      name: 'Email',
       icon: <IconMail />,
       size: 150,
-      order: 2,
+      index: 1,
       metadata: {
         type: 'email',
         fieldName: 'email',
@@ -53,11 +53,11 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldEmailMetadata>,
     {
-      id: 'company',
+      key: 'company',
-      label: 'Company',
+      name: 'Company',
       icon: <IconBuildingSkyscraper />,
       size: 150,
-      order: 3,
+      index: 2,
       metadata: {
         type: 'relation',
         fieldName: 'company',
@@ -65,11 +65,11 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldRelationMetadata>,
     {
-      id: 'phone',
+      key: 'phone',
-      label: 'Phone',
+      name: 'Phone',
       icon: <IconPhone />,
       size: 150,
-      order: 4,
+      index: 3,
       metadata: {
         type: 'phone',
         fieldName: 'phone',
@@ -77,22 +77,22 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldPhoneMetadata>,
     {
-      id: 'createdAt',
+      key: 'createdAt',
-      label: 'Creation',
+      name: 'Creation',
       icon: <IconCalendarEvent />,
       size: 150,
-      order: 5,
+      index: 4,
       metadata: {
         type: 'date',
         fieldName: 'createdAt',
       },
     } satisfies ColumnDefinition<ViewFieldDateMetadata>,
     {
-      id: 'city',
+      key: 'city',
-      label: 'City',
+      name: 'City',
       icon: <IconMap />,
       size: 150,
-      order: 6,
+      index: 5,
       metadata: {
         type: 'text',
         fieldName: 'city',
@@ -100,11 +100,11 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldTextMetadata>,
     {
-      id: 'jobTitle',
+      key: 'jobTitle',
-      label: 'Job title',
+      name: 'Job title',
       icon: <IconBriefcase />,
       size: 150,
-      order: 7,
+      index: 6,
       metadata: {
         type: 'text',
         fieldName: 'jobTitle',
@@ -112,11 +112,11 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldTextMetadata>,
     {
-      id: 'linkedin',
+      key: 'linkedin',
-      label: 'LinkedIn',
+      name: 'LinkedIn',
       icon: <IconBrandLinkedin />,
       size: 150,
-      order: 8,
+      index: 7,
       metadata: {
         type: 'url',
         fieldName: 'linkedinUrl',
@@ -124,11 +124,11 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<ViewFieldMetadat
       },
     } satisfies ColumnDefinition<ViewFieldURLMetadata>,
     {
-      id: 'x',
+      key: 'x',
-      label: 'Twitter',
+      name: 'Twitter',
       icon: <IconBrandX />,
       size: 150,
-      order: 9,
+      index: 8,
       metadata: {
         type: 'url',
         fieldName: 'xUrl',

front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx

@@ -17,8 +17,8 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[] =
   [
     {
-      id: 'closeDate',
+      key: 'closeDate',
-      label: 'Close Date',
+      name: 'Close Date',
       icon: <IconCalendarEvent />,
       metadata: {
         type: 'date',
@@ -27,8 +27,8 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       isVisible: true,
     } satisfies ViewFieldDefinition<ViewFieldDateMetadata>,
     {
-      id: 'amount',
+      key: 'amount',
-      label: 'Amount',
+      name: 'Amount',
       icon: <IconCurrencyDollar />,
       metadata: {
         type: 'number',
@@ -37,8 +37,8 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       isVisible: true,
     } satisfies ViewFieldDefinition<ViewFieldNumberMetadata>,
     {
-      id: 'probability',
+      key: 'probability',
-      label: 'Probability',
+      name: 'Probability',
       icon: <IconProgressCheck />,
       metadata: {
         type: 'probability',
@@ -47,8 +47,8 @@ export const pipelineAvailableFieldDefinitions: ViewFieldDefinition<ViewFieldMet
       isVisible: true,
     } satisfies ViewFieldDefinition<ViewFieldProbabilityMetadata>,
     {
-      id: 'pointOfContact',
+      key: 'pointOfContact',
-      label: 'Point of Contact',
+      name: 'Point of Contact',
       icon: <IconUser />,
       metadata: {
         type: 'relation',

front/src/modules/ui/editable-field/types/FieldDefinition.ts

@@ -1,8 +1,8 @@
 import { FieldMetadata, FieldType } from './FieldMetadata';
 
 export type FieldDefinition<T extends FieldMetadata | unknown> = {
-  id: string;
+  key: string;
-  label: string;
+  name: string;
   icon?: JSX.Element;
   type: FieldType;
   metadata: T;

front/src/modules/ui/editable-field/types/ViewField.ts

@@ -116,8 +116,8 @@ export type ViewFieldMetadata = { type: ViewFieldType } & (
 );
 
 export type ViewFieldDefinition<T extends ViewFieldMetadata | unknown> = {
-  id: string;
+  key: string;
-  label: string;
+  name: string;
   icon?: JSX.Element;
   isVisible?: boolean;
   metadata: T;

front/src/modules/ui/table/components/EntityTableColumnMenu.tsx

@@ -58,10 +58,10 @@ export const EntityTableColumnMenu = ({
       <StyledDropdownMenuItemsContainer>
         {hiddenColumns.map((column) => (
           <DropdownMenuItem
-            key={column.id}
+            key={column.key}
             actions={[
               <IconButton
-                key={`add-${column.id}`}
+                key={`add-${column.key}`}
                 icon={<IconPlus size={theme.icon.size.sm} />}
                 onClick={() => handleAddColumn(column)}
               />,
@@ -71,7 +71,7 @@ export const EntityTableColumnMenu = ({
               cloneElement(column.icon, {
                 size: theme.icon.size.md,
               })}
-            {column.label}
+            {column.name}
           </DropdownMenuItem>
         ))}
       </StyledDropdownMenuItemsContainer>

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -11,7 +11,7 @@ import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
 import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
-import { tableColumnsByIdScopedSelector } from '../states/selectors/tableColumnsByIdScopedSelector';
+import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
 import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 
@@ -76,8 +76,8 @@ export function EntityTableHeader() {
     tableColumnsScopedState,
     TableRecoilScopeContext,
   );
-  const columnsById = useRecoilScopedValue(
+  const columnsByKey = useRecoilScopedValue(
-    tableColumnsByIdScopedSelector,
+    tableColumnsByKeyScopedSelector,
     TableRecoilScopeContext,
   );
   const hiddenColumns = useRecoilScopedValue(
@@ -92,7 +92,7 @@ export function EntityTableHeader() {
   const [initialPointerPositionX, setInitialPointerPositionX] = useState<
     number | null
   >(null);
-  const [resizedFieldId, setResizedFieldId] = useState<string | null>(null);
+  const [resizedFieldKey, setResizedFieldKey] = useState<string | null>(null);
   const [isColumnMenuOpen, setIsColumnMenuOpen] = useState(false);
 
   const handleResizeHandlerStart = useCallback((positionX: number) => {
@@ -110,19 +110,19 @@ export function EntityTableHeader() {
   const handleResizeHandlerEnd = useRecoilCallback(
     ({ snapshot, set }) =>
       () => {
-        if (!resizedFieldId) return;
+        if (!resizedFieldKey) return;
 
         const nextWidth = Math.round(
           Math.max(
-            columnsById[resizedFieldId].size +
+            columnsByKey[resizedFieldKey].size +
               snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(),
             COLUMN_MIN_WIDTH,
           ),
         );
 
-        if (nextWidth !== columnsById[resizedFieldId].size) {
+        if (nextWidth !== columnsByKey[resizedFieldKey].size) {
           const nextColumns = columns.map((column) =>
-            column.id === resizedFieldId
+            column.key === resizedFieldKey
               ? { ...column, size: nextWidth }
               : column,
           );
@@ -132,13 +132,13 @@ export function EntityTableHeader() {
 
         set(resizeFieldOffsetState, 0);
         setInitialPointerPositionX(null);
-        setResizedFieldId(null);
+        setResizedFieldKey(null);
       },
-    [resizedFieldId, columnsById, columns, setColumns],
+    [resizedFieldKey, columnsByKey, columns, setColumns],
   );
 
   useTrackPointer({
-    shouldTrackPointer: resizedFieldId !== null,
+    shouldTrackPointer: resizedFieldKey !== null,
     onMouseDown: handleResizeHandlerStart,
     onMouseMove: handleResizeHandlerMove,
     onMouseUp: handleResizeHandlerEnd,
@@ -163,20 +163,20 @@ export function EntityTableHeader() {
 
         {visibleColumns.map((column) => (
           <StyledColumnHeaderCell
-            key={column.id}
+            key={column.key}
-            isResizing={resizedFieldId === column.id}
+            isResizing={resizedFieldKey === column.key}
             columnWidth={Math.max(
-              columnsById[column.id].size +
+              columnsByKey[column.key].size +
-                (resizedFieldId === column.id ? offset : 0),
+                (resizedFieldKey === column.key ? offset : 0),
               COLUMN_MIN_WIDTH,
             )}
           >
-            <ColumnHead viewName={column.label} viewIcon={column.icon} />
+            <ColumnHead viewName={column.name} viewIcon={column.icon} />
             <StyledResizeHandler
               className="cursor-col-resize"
               role="separator"
               onPointerDown={() => {
-                setResizedFieldId(column.id);
+                setResizedFieldKey(column.key);
               }}
             />
           </StyledColumnHeaderCell>

front/src/modules/ui/table/components/EntityTableRow.tsx

@@ -33,7 +33,7 @@ export function EntityTableRow({ rowId }: { rowId: string }) {
       </td>
       {columns.map((column, columnIndex) => {
         return (
-          <ColumnContext.Provider value={column} key={column.id}>
+          <ColumnContext.Provider value={column} key={column.key}>
             <EntityTableCell cellIndex={columnIndex} />
           </ColumnContext.Provider>
         );

front/src/modules/ui/table/hooks/useTableColumns.ts

@@ -5,7 +5,7 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { tableColumnsByIdScopedSelector } from '../states/selectors/tableColumnsByIdScopedSelector';
+import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 import type { ColumnDefinition } from '../types/ColumnDefinition';
 
@@ -14,26 +14,26 @@ export const useTableColumns = () => {
     tableColumnsScopedState,
     TableRecoilScopeContext,
   );
-  const tableColumnsById = useRecoilScopedValue(
+  const tableColumnsByKey = useRecoilScopedValue(
-    tableColumnsByIdScopedSelector,
+    tableColumnsByKeyScopedSelector,
     TableRecoilScopeContext,
   );
 
   const handleColumnVisibilityChange = useCallback(
     (column: ColumnDefinition<ViewFieldMetadata>) => {
-      const nextColumns = tableColumnsById[column.id]
+      const nextColumns = tableColumnsByKey[column.key]
         ? tableColumns.map((previousColumn) =>
-            previousColumn.id === column.id
+            previousColumn.key === column.key
               ? { ...previousColumn, isVisible: !column.isVisible }
               : previousColumn,
           )
         : [...tableColumns, { ...column, isVisible: true }].sort(
-            (columnA, columnB) => columnA.order - columnB.order,
+            (columnA, columnB) => columnA.index - columnB.index,
           );
 
       setTableColumns(nextColumns);
     },
-    [setTableColumns, tableColumns, tableColumnsById],
+    [setTableColumns, tableColumns, tableColumnsByKey],
   );
 
   return { handleColumnVisibilityChange };

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -95,7 +95,7 @@ export function TableOptionsDropdownContent({
       !column.isVisible || visibleColumns.length > 1
         ? [
             <IconButton
-              key={`action-${column.id}`}
+              key={`action-${column.key}`}
               icon={
                 column.isVisible ? (
                   <IconMinus size={theme.icon.size.sm} />

front/src/modules/ui/table/options/components/TableOptionsDropdownSection.tsx

@@ -31,12 +31,12 @@ export function TableOptionsDropdownSection({
       <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
       <StyledDropdownMenuItemsContainer>
         {columns.map((column) => (
-          <DropdownMenuItem key={column.id} actions={renderActions(column)}>
+          <DropdownMenuItem key={column.key} actions={renderActions(column)}>
             {column.icon &&
               cloneElement(column.icon, {
                 size: theme.icon.size.md,
               })}
-            {column.label}
+            {column.name}
           </DropdownMenuItem>
         ))}
       </StyledDropdownMenuItemsContainer>

front/src/modules/ui/table/states/selectors/hiddenTableColumnsScopedSelector.ts

@@ -9,10 +9,10 @@ export const hiddenTableColumnsScopedSelector = selectorFamily({
     (scopeId: string) =>
     ({ get }) => {
       const columns = get(tableColumnsScopedState(scopeId));
-      const columnLabels = columns.map(({ label }) => label);
+      const columnKeys = columns.map(({ key }) => key);
       const otherAvailableColumns = get(
         availableTableColumnsScopedState(scopeId),
-      ).filter(({ label }) => !columnLabels.includes(label));
+      ).filter(({ key }) => !columnKeys.includes(key));
 
       return [
         ...columns.filter((column) => !column.isVisible),

front/src/modules/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector.ts

@@ -5,12 +5,12 @@ import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import type { ColumnDefinition } from '../../types/ColumnDefinition';
 import { savedTableColumnsScopedState } from '../savedTableColumnsScopedState';
 
-export const savedTableColumnsByIdScopedSelector = selectorFamily({
+export const savedTableColumnsByKeyScopedSelector = selectorFamily({
-  key: 'savedTableColumnsByIdScopedSelector',
+  key: 'savedTableColumnsByKeyScopedSelector',
   get:
     (viewId: string | undefined) =>
     ({ get }) =>
       get(savedTableColumnsScopedState(viewId)).reduce<
         Record<string, ColumnDefinition<ViewFieldMetadata>>
-      >((result, column) => ({ ...result, [column.id]: column }), {}),
+      >((result, column) => ({ ...result, [column.key]: column }), {}),
 });

front/src/modules/ui/table/states/selectors/tableColumnsByKeyScopedSelector.ts

@@ -5,12 +5,12 @@ import type { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import type { ColumnDefinition } from '../../types/ColumnDefinition';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
-export const tableColumnsByIdScopedSelector = selectorFamily({
+export const tableColumnsByKeyScopedSelector = selectorFamily({
-  key: 'tableColumnsByIdScopedSelector',
+  key: 'tableColumnsByKeyScopedSelector',
   get:
     (scopeId: string) =>
     ({ get }) =>
       get(tableColumnsScopedState(scopeId)).reduce<
         Record<string, ColumnDefinition<ViewFieldMetadata>>
-      >((result, column) => ({ ...result, [column.id]: column }), {}),
+      >((result, column) => ({ ...result, [column.key]: column }), {}),
 });

front/src/modules/ui/table/types/ColumnDefinition.ts

@@ -6,5 +6,5 @@ import type {
 export type ColumnDefinition<T extends ViewFieldMetadata | unknown> =
   ViewFieldDefinition<T> & {
     size: number;
-    order: number;
+    index: number;
   };

front/src/modules/views/graphql/mutations/updateViewField.ts

@@ -6,11 +6,11 @@ export const UPDATE_VIEW_FIELD = gql`
     $where: ViewFieldWhereUniqueInput!
   ) {
     updateOneViewField(data: $data, where: $where) {
-      id
-      fieldName
-      isVisible
-      sizeInPx
       index
+      isVisible
+      key
+      name
+      size
     }
   }
 `;

front/src/modules/views/graphql/queries/getViewFields.ts

@@ -6,11 +6,11 @@ export const GET_VIEW_FIELDS = gql`
     $orderBy: [ViewFieldOrderByWithRelationInput!]
   ) {
     viewFields: findManyViewField(where: $where, orderBy: $orderBy) {
-      id
-      fieldName
-      isVisible
-      sizeInPx
       index
+      isVisible
+      key
+      name
+      size
     }
   }
 `;

front/src/modules/views/hooks/useTableViewFields.ts

@@ -8,7 +8,7 @@ import type {
 import { availableTableColumnsScopedState } from '@/ui/table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
-import { savedTableColumnsByIdScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByIdScopedSelector';
+import { savedTableColumnsByKeyScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
 import { currentTableViewIdState } from '@/ui/table/states/tableViewsState';
 import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
@@ -29,21 +29,22 @@ const DEFAULT_VIEW_FIELD_METADATA: ViewFieldTextMetadata = {
 };
 
 const toViewFieldInput = (
-  objectName: 'company' | 'person',
+  objectId: 'company' | 'person',
   fieldDefinition: ColumnDefinition<ViewFieldMetadata>,
 ) => ({
-  fieldName: fieldDefinition.label,
+  key: fieldDefinition.key,
-  index: fieldDefinition.order,
+  name: fieldDefinition.name,
+  index: fieldDefinition.index,
   isVisible: fieldDefinition.isVisible ?? true,
-  objectName,
+  objectId,
-  sizeInPx: fieldDefinition.size,
+  size: fieldDefinition.size,
 });
 
 export const useTableViewFields = ({
-  objectName,
+  objectId,
   columnDefinitions,
 }: {
-  objectName: 'company' | 'person';
+  objectId: 'company' | 'person';
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
 }) => {
   const currentTableViewId = useRecoilScopedValue(
@@ -62,8 +63,8 @@ export const useTableViewFields = ({
   const setSavedTableColumns = useSetRecoilState(
     savedTableColumnsScopedState(currentTableViewId),
   );
-  const savedTableColumnsById = useRecoilValue(
+  const savedTableColumnsByKey = useRecoilValue(
-    savedTableColumnsByIdScopedSelector(currentTableViewId),
+    savedTableColumnsByKeyScopedSelector(currentTableViewId),
   );
 
   const [createViewFieldsMutation] = useCreateViewFieldsMutation();
@@ -79,13 +80,13 @@ export const useTableViewFields = ({
       return createViewFieldsMutation({
         variables: {
           data: columns.map((column) => ({
-            ...toViewFieldInput(objectName, column),
+            ...toViewFieldInput(objectId, column),
             viewId,
           })),
         },
       });
     },
-    [createViewFieldsMutation, currentTableViewId, objectName],
+    [createViewFieldsMutation, currentTableViewId, objectId],
   );
 
   const updateViewFields = useCallback(
@@ -98,9 +99,11 @@ export const useTableViewFields = ({
             variables: {
               data: {
                 isVisible: column.isVisible,
-                sizeInPx: column.size,
+                size: column.size,
+              },
+              where: {
+                viewId_key: { key: column.key, viewId: currentTableViewId },
               },
-              where: { id: column.id },
             },
           }),
         ),
@@ -114,8 +117,8 @@ export const useTableViewFields = ({
     variables: {
       orderBy: { index: SortOrder.Asc },
       where: {
-        objectName: { equals: objectName },
+        objectId: { equals: objectId },
-        viewId: { equals: currentTableViewId ?? null },
+        viewId: { equals: currentTableViewId },
       },
     },
     onCompleted: async (data) => {
@@ -128,13 +131,13 @@ export const useTableViewFields = ({
       const nextColumns = data.viewFields.map<
         ColumnDefinition<ViewFieldMetadata>
       >((viewField) => ({
-        ...(columnDefinitions.find(
+        ...(columnDefinitions.find(({ key }) => viewField.key === key) || {
-          ({ label: columnLabel }) => viewField.fieldName === columnLabel,
+          metadata: DEFAULT_VIEW_FIELD_METADATA,
-        ) || { metadata: DEFAULT_VIEW_FIELD_METADATA }),
+        }),
-        id: viewField.id,
+        key: viewField.key,
-        label: viewField.fieldName,
+        name: viewField.name,
-        order: viewField.index,
+        index: viewField.index,
-        size: viewField.sizeInPx,
+        size: viewField.size,
         isVisible: viewField.isVisible,
       }));
 
@@ -153,15 +156,15 @@ export const useTableViewFields = ({
     if (!currentTableViewId) return;
 
     const viewFieldsToCreate = tableColumns.filter(
-      (column) => !savedTableColumnsById[column.id],
+      (column) => !savedTableColumnsByKey[column.key],
     );
     await createViewFields(viewFieldsToCreate);
 
     const viewFieldsToUpdate = tableColumns.filter(
       (column) =>
-        savedTableColumnsById[column.id] &&
+        savedTableColumnsByKey[column.key] &&
-        (savedTableColumnsById[column.id].size !== column.size ||
+        (savedTableColumnsByKey[column.key].size !== column.size ||
-          savedTableColumnsById[column.id].isVisible !== column.isVisible),
+          savedTableColumnsByKey[column.key].isVisible !== column.isVisible),
     );
     await updateViewFields(viewFieldsToUpdate);
 
@@ -170,7 +173,7 @@ export const useTableViewFields = ({
     createViewFields,
     currentTableViewId,
     refetch,
-    savedTableColumnsById,
+    savedTableColumnsByKey,
     tableColumns,
     updateViewFields,
   ]);

front/src/modules/views/hooks/useTableViews.ts

@@ -45,7 +45,7 @@ export const useTableViews = <Entity, SortField>({
   );
 
   const { createViewFields, persistColumns } = useTableViewFields({
-    objectName: objectId,
+    objectId,
     columnDefinitions,
   });
   const { createViewFilters, persistFilters } = useViewFilters({

front/src/pages/companies/CompanyShow.tsx

@@ -95,7 +95,7 @@ export function CompanyShow() {
                       return (
                         <EditableFieldDefinitionContext.Provider
                           value={fieldDefinition}
-                          key={fieldDefinition.id}
+                          key={fieldDefinition.key}
                         >
                           <GenericEditableField />
                         </EditableFieldDefinitionContext.Provider>

front/src/pages/companies/constants/companyShowFieldDefinition.tsx

@@ -21,8 +21,8 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 
 export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
   {
-    id: 'domainName',
+    key: 'domainName',
-    label: 'Domain name',
+    name: 'Domain name',
     icon: <IconLink />,
     type: 'url',
     metadata: {
@@ -31,8 +31,8 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
-    id: 'accountOwner',
+    key: 'accountOwner',
-    label: 'Account owner',
+    name: 'Account owner',
     icon: <IconUserCircle />,
     type: 'relation',
     metadata: {
@@ -41,8 +41,8 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldRelationMetadata>,
   {
-    id: 'employees',
+    key: 'employees',
-    label: 'Employees',
+    name: 'Employees',
     icon: <IconUsers />,
     type: 'number',
     metadata: {
@@ -51,8 +51,8 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldNumberMetadata>,
   {
-    id: 'address',
+    key: 'address',
-    label: 'Address',
+    name: 'Address',
     icon: <IconMap />,
     type: 'text',
     metadata: {
@@ -61,8 +61,8 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldTextMetadata>,
   {
-    id: 'createdAt',
+    key: 'createdAt',
-    label: 'Created at',
+    name: 'Created at',
     icon: <IconCalendar />,
     type: 'date',
     metadata: {
@@ -70,8 +70,8 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldDateMetadata>,
   {
-    id: 'idealCustomerProfile',
+    key: 'idealCustomerProfile',
-    label: 'ICP',
+    name: 'ICP',
     icon: <IconTarget />,
     type: 'boolean',
     metadata: {
@@ -79,8 +79,8 @@ export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldBooleanMetadata>,
   {
-    id: 'xUrl',
+    key: 'xUrl',
-    label: 'Twitter',
+    name: 'Twitter',
     icon: <IconBrandX />,
     type: 'url',
     metadata: {

front/src/pages/people/PersonShow.tsx

@@ -116,7 +116,7 @@ export function PersonShow() {
                       return (
                         <EditableFieldDefinitionContext.Provider
                           value={fieldDefinition}
-                          key={fieldDefinition.id}
+                          key={fieldDefinition.key}
                         >
                           <GenericEditableField />
                         </EditableFieldDefinitionContext.Provider>

front/src/pages/people/constants/personShowFieldDefinition.tsx

@@ -21,8 +21,8 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 
 export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
   {
-    id: 'email',
+    key: 'email',
-    label: 'Email',
+    name: 'Email',
     icon: <IconMail />,
     type: 'text',
     metadata: {
@@ -31,8 +31,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldTextMetadata>,
   {
-    id: 'company',
+    key: 'company',
-    label: 'Company',
+    name: 'Company',
     icon: <IconBuildingSkyscraper />,
     type: 'relation',
     metadata: {
@@ -42,8 +42,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldRelationMetadata>,
   {
-    id: 'phone',
+    key: 'phone',
-    label: 'Phone',
+    name: 'Phone',
     icon: <IconPhone />,
     type: 'phone',
     metadata: {
@@ -52,8 +52,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldPhoneMetadata>,
   {
-    id: 'createdAt',
+    key: 'createdAt',
-    label: 'Created at',
+    name: 'Created at',
     icon: <IconCalendar />,
     type: 'date',
     metadata: {
@@ -61,8 +61,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldDateMetadata>,
   {
-    id: 'city',
+    key: 'city',
-    label: 'City',
+    name: 'City',
     icon: <IconMap />,
     type: 'text',
     metadata: {
@@ -71,8 +71,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldTextMetadata>,
   {
-    id: 'jobTitle',
+    key: 'jobTitle',
-    label: 'Job Title',
+    name: 'Job Title',
     icon: <IconBriefcase />,
     type: 'text',
     metadata: {
@@ -81,8 +81,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldTextMetadata>,
   {
-    id: 'linkedinUrl',
+    key: 'linkedinUrl',
-    label: 'Linkedin URL',
+    name: 'Linkedin URL',
     icon: <IconBrandLinkedin />,
     type: 'url',
     metadata: {
@@ -91,8 +91,8 @@ export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
     },
   } satisfies FieldDefinition<FieldURLMetadata>,
   {
-    id: 'xUrl',
+    key: 'xUrl',
-    label: 'X URL',
+    name: 'X URL',
     icon: <IconBrandX />,
     type: 'url',
     metadata: {

front/src/testing/graphqlMocks.ts

@@ -32,12 +32,16 @@ import { mockedActivities, mockedTasks } from './mock-data/activities';
 import {
   mockedCompaniesData,
   mockedCompanyViewFields,
+  mockedCompanyViews,
 } from './mock-data/companies';
-import { mockedPeopleData, mockedPersonViewFields } from './mock-data/people';
+import {
+  mockedPeopleData,
+  mockedPersonViewFields,
+  mockedPersonViews,
+} from './mock-data/people';
 import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
 import { mockedPipelinesData } from './mock-data/pipelines';
 import { mockedUsersData } from './mock-data/users';
-import { mockedViews } from './mock-data/views';
 import {
   fetchOneFromData,
   filterAndSortData,
@@ -229,17 +233,30 @@ export const graphqlMocks = [
       }),
     );
   }),
+  graphql.query(getOperationName(GET_VIEWS) ?? '', (req, res, ctx) => {
+    const {
+      where: {
+        objectId: { equals: objectId },
+      },
+    } = req.variables;
+
+    return res(
+      ctx.data({
+        views: objectId === 'company' ? mockedCompanyViews : mockedPersonViews,
+      }),
+    );
+  }),
   graphql.query(getOperationName(GET_VIEW_FIELDS) ?? '', (req, res, ctx) => {
     const {
       where: {
-        objectName: { equals: objectName },
+        objectId: { equals: objectId },
       },
     } = req.variables;
 
     return res(
       ctx.data({
         viewFields:
-          objectName === 'company'
+          objectId === 'company'
             ? mockedCompanyViewFields
             : mockedPersonViewFields,
       }),
@@ -255,11 +272,4 @@ export const graphqlMocks = [
       );
     },
   ),
-  graphql.query(getOperationName(GET_VIEWS) ?? '', (req, res, ctx) => {
-    return res(
-      ctx.data({
-        views: mockedViews,
-      }),
-    );
-  }),
 ];

front/src/testing/mock-data/companies.ts

@@ -1,5 +1,5 @@
 import { companiesAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
-import { Company, User, ViewField } from '~/generated/graphql';
+import { Company, User, View, ViewField, ViewType } from '~/generated/graphql';
 
 type MockedCompany = Pick<
   Company,
@@ -144,13 +144,25 @@ export const mockedCompaniesData: Array<MockedCompany> = [
   },
 ];
 
-export const mockedCompanyViewFields =
+export const mockedCompanyViews: View[] = [
-  companiesAvailableColumnDefinitions.map<ViewField>((viewFieldDefinition) => ({
+  {
-    __typename: 'ViewField',
+    __typename: 'View',
-    fieldName: viewFieldDefinition.label,
+    id: 'e6a2232d-ca6c-42df-b78e-ca0343f545a9',
-    id: viewFieldDefinition.id,
+    name: 'All companies',
-    index: viewFieldDefinition.order,
+    objectId: 'company',
-    isVisible: true,
+    type: ViewType.Table,
-    objectName: 'company',
+  },
-    sizeInPx: viewFieldDefinition.size,
+];
-  }));
+
+export const mockedCompanyViewFields = companiesAvailableColumnDefinitions.map<
+  Omit<ViewField, 'view'>
+>((viewFieldDefinition) => ({
+  __typename: 'ViewField',
+  name: viewFieldDefinition.name,
+  index: viewFieldDefinition.index,
+  isVisible: true,
+  key: viewFieldDefinition.key,
+  objectId: 'company',
+  size: viewFieldDefinition.size,
+  viewId: 'e6a2232d-ca6c-42df-b78e-ca0343f545a9',
+}));

front/src/testing/mock-data/people.ts

@@ -1,5 +1,11 @@
 import { peopleAvailableColumnDefinitions } from '@/people/constants/peopleAvailableColumnDefinitions';
-import { Company, Person, ViewField } from '~/generated/graphql';
+import {
+  Company,
+  Person,
+  View,
+  ViewField,
+  ViewType,
+} from '~/generated/graphql';
 
 type RequiredAndNotNull<T> = {
   [P in keyof T]-?: Exclude<T[P], null | undefined>;
@@ -123,13 +129,32 @@ export const mockedPeopleData: MockedPerson[] = [
   },
 ];
 
-export const mockedPersonViewFields =
+export const mockedPersonViews: View[] = [
-  peopleAvailableColumnDefinitions.map<ViewField>((viewFieldDefinition) => ({
+  {
-    __typename: 'ViewField',
+    __typename: 'View',
-    fieldName: viewFieldDefinition.label,
+    id: 'afd7737a-bf1d-41a3-8863-c277b56a657b',
-    id: viewFieldDefinition.id,
+    name: 'All people',
-    index: viewFieldDefinition.order,
+    objectId: 'person',
-    isVisible: true,
+    type: ViewType.Table,
-    objectName: 'person',
+  },
-    sizeInPx: viewFieldDefinition.size,
+  {
-  }));
+    __typename: 'View',
+    id: '89bb825c-171e-4bcc-9cf7-43448d6fb230a',
+    name: 'View example 1',
+    objectId: 'person',
+    type: ViewType.Table,
+  },
+];
+
+export const mockedPersonViewFields = peopleAvailableColumnDefinitions.map<
+  Omit<ViewField, 'view'>
+>((viewFieldDefinition) => ({
+  __typename: 'ViewField',
+  name: viewFieldDefinition.name,
+  index: viewFieldDefinition.index,
+  isVisible: true,
+  key: viewFieldDefinition.key,
+  objectId: 'person',
+  size: viewFieldDefinition.size,
+  viewId: 'afd7737a-bf1d-41a3-8863-c277b56a657b',
+}));

front/src/testing/mock-data/views.ts

@@ -1,14 +0,0 @@
-import { View } from '~/generated/graphql';
-
-type MockedView = Pick<View, 'id' | 'name'>;
-
-export const mockedViews: Array<MockedView> = [
-  {
-    id: '89bb825c-171e-4bcc-9cf7-43448d6fb230a',
-    name: 'All',
-  },
-  {
-    id: '89bb825c-171e-4bcc-9cf7-43448d6fb230a',
-    name: 'View example 1',
-  },
-];

server/src/core/view/seed-data/views.json

@@ -5,54 +5,44 @@
     "type": "Table",
     "fields": [
       {
-        "fieldName": "Name",
+        "key": "name",
-        "sizeInPx": 180,
+        "name": "Name",
-        "isVisible": true
+        "size": 180
       },
       {
-        "fieldName": "URL",
+        "key": "domainName",
-        "sizeInPx": 100,
+        "name": "URL",
-        "isVisible": true
+        "size": 100
       },
       {
-        "fieldName": "Account Owner",
+        "key": "accountOwner",
-        "sizeInPx": 150,
+        "name": "Account Owner",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Creation",
+        "key": "createdAt",
-        "sizeInPx": 150,
+        "name": "Creation",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Employees",
+        "key": "employees",
-        "sizeInPx": 150,
+        "name": "Employees",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "LinkedIn",
+        "key": "linkedin",
-        "sizeInPx": 170,
+        "name": "LinkedIn",
-        "isVisible": true
+        "size": 170
       },
       {
-        "fieldName": "Address",
+        "key": "address",
-        "sizeInPx": 170,
+        "name": "Address",
-        "isVisible": true
+        "size": 170
       },
       {
-        "fieldName": "ICP",
+        "key": "annualRecurringRevenue",
-        "sizeInPx": 150,
+        "name": "ARR",
-        "isVisible": false
+        "size": 150
-      },
-      {
-        "fieldName": "ARR",
-        "sizeInPx": 150,
-        "isVisible": true
-      },
-      {
-        "fieldName": "Twitter",
-        "sizeInPx": 150,
-        "isVisible": false
       }
     ]
   },
@@ -62,50 +52,50 @@
     "type": "Table",
     "fields": [
       {
-        "fieldName": "People",
+        "key": "displayName",
-        "sizeInPx": 210,
+        "name": "People",
-        "isVisible": true
+        "size": 210
       },
       {
-        "fieldName": "Email",
+        "key": "email",
-        "sizeInPx": 150,
+        "name": "Email",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Company",
+        "key": "company",
-        "sizeInPx": 150,
+        "name": "Company",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Phone",
+        "key": "phone",
-        "sizeInPx": 150,
+        "name": "Phone",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Creation",
+        "key": "createdAt",
-        "sizeInPx": 150,
+        "name": "Creation",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "City",
+        "key": "city",
-        "sizeInPx": 150,
+        "name": "City",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Job title",
+        "key": "jobTitle",
-        "sizeInPx": 150,
+        "name": "Job title",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "LinkedIn",
+        "key": "linkedin",
-        "sizeInPx": 150,
+        "name": "LinkedIn",
-        "isVisible": true
+        "size": 150
       },
       {
-        "fieldName": "Twitter",
+        "key": "x",
-        "sizeInPx": 150,
+        "name": "Twitter",
-        "isVisible": true
+        "size": 150
       }
     ]
   }
-]
+]

server/src/core/view/services/view.service.ts

@@ -55,8 +55,9 @@ export class ViewService {
         await this.prismaService.client.viewField.createMany({
           data: fields.map((viewField, index) => ({
             ...viewField,
-            objectName: view.objectId,
+            index,
-            index: index + 1,
+            isVisible: true,
+            objectId: view.objectId,
             viewId: view.id,
             workspaceId,
           })),

server/src/database/migrations/20230901150707_index_view_field_by_view_id_and_key/migration.sql

@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - The primary key for the `viewFields` table will be changed. If it partially fails, the table could be left without primary key constraint.
+  - You are about to drop the column `id` on the `viewFields` table. All the data in the column will be lost.
+  - Added the required column `key` to the `viewFields` table without a default value. This is not possible if the table is not empty.
+  - Made the column `viewId` on table `viewFields` required. This step will fail if there are existing NULL values in that column.
+
+*/
+-- DropIndex
+DROP INDEX "viewFields_workspaceId_viewId_objectName_fieldName_key";
+
+-- AlterTable
+ALTER TABLE "viewFields" DROP CONSTRAINT "viewFields_pkey",
+DROP COLUMN "id",
+ADD COLUMN     "key" TEXT NOT NULL,
+ALTER COLUMN "viewId" SET NOT NULL,
+ADD CONSTRAINT "viewFields_pkey" PRIMARY KEY ("viewId", "key");

server/src/database/migrations/20230901163822_rename_view_field_properties/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "viewFields" RENAME COLUMN "fieldName" TO "name";
+ALTER TABLE "viewFields" RENAME COLUMN "objectName" TO "objectId";
+ALTER TABLE "viewFields" RENAME COLUMN "sizeInPx" TO "size";

server/src/database/schema.prisma

@@ -657,24 +657,21 @@ model ViewSort {
 }
 
 model ViewField {
-  /// @Validator.IsString()
+  index     Int
-  /// @Validator.IsOptional()
+  isVisible Boolean
-  id String @id @default(uuid())
+  key       String
+  name      String
+  objectId  String
+  size      Int
 
-  fieldName  String
+  view   View   @relation(fields: [viewId], references: [id], onDelete: Cascade)
-  index      Int
+  viewId String
-  isVisible  Boolean
-  objectName String
-  sizeInPx   Int
-
-  view   View?   @relation(fields: [viewId], references: [id], onDelete: Cascade)
-  viewId String?
 
   /// @TypeGraphQL.omit(input: true, output: true)
   workspace   Workspace @relation(fields: [workspaceId], references: [id])
   /// @TypeGraphQL.omit(input: true, output: true)
   workspaceId String
 
-  @@unique([workspaceId, viewId, objectName, fieldName])
+  @@id([viewId, key])
   @@map("viewFields")
 }

server/src/database/seeds/views.ts

@@ -20,73 +20,54 @@ export const seedViews = async (prisma: PrismaClient) => {
   await Promise.all(
     [
       {
-        id: 'twenty-388833ba-1343-49d7-9092-065f92e0e5fa',
+        key: 'name',
-        fieldName: 'Name',
+        name: 'Name',
-        sizeInPx: 180,
+        size: 180,
-        isVisible: true,
       },
       {
-        id: 'twenty-fdbb7a60-18ac-4d52-83b8-399eb6055ec6',
+        key: 'domainName',
-        fieldName: 'URL',
+        name: 'URL',
-        sizeInPx: 100,
+        size: 100,
-        isVisible: true,
       },
       {
-        id: 'twenty-cc77beef-af99-4cd2-86dd-0230f8565ed5',
+        key: 'accountOwner',
-        fieldName: 'Account Owner',
+        name: 'Account Owner',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-28537b67-8b78-4885-903d-f749f34883b1',
+        key: 'createdAt',
-        fieldName: 'Creation',
+        name: 'Creation',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-59e6624d-9a4d-492d-a0f2-52f51f69d004',
+        key: 'employees',
-        fieldName: 'Employees',
+        name: 'Employees',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-2c4ee8b9-aacd-42dd-b422-22eca03aab5a',
+        key: 'linkedin',
-        fieldName: 'LinkedIn',
+        name: 'LinkedIn',
-        sizeInPx: 170,
+        size: 170,
-        isVisible: true,
       },
       {
-        id: 'twenty-b83e299f-7098-4748-a39e-431cca2907ab',
+        key: 'address',
-        fieldName: 'Address',
+        name: 'Address',
-        sizeInPx: 170,
+        size: 170,
-        isVisible: true,
       },
       {
-        id: 'twenty-acef1246-8461-4e34-96b9-f326d598d655',
+        key: 'annualRecurringRevenue',
-        fieldName: 'ICP',
+        name: 'ARR',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: false,
-      },
-      {
-        id: 'twenty-971828c5-8167-4997-ae13-3b7895faa6f2',
-        fieldName: 'ARR',
-        sizeInPx: 150,
-        isVisible: true,
-      },
-      {
-        id: 'twenty-90977d8a-328d-4f69-98e8-8c69723c5a18',
-        fieldName: 'Twitter',
-        sizeInPx: 150,
-        isVisible: false,
       },
     ].map((viewField, index) =>
       prisma.viewField.upsert({
-        where: { id: viewField.id },
+        where: { viewId_key: { key: viewField.key, viewId: companyViewId } },
         update: {},
         create: {
           ...viewField,
-          index: index + 1,
+          index,
-          objectName: 'company',
+          isVisible: true,
+          objectId: 'company',
           viewId: companyViewId,
           workspaceId,
         },
@@ -109,67 +90,59 @@ export const seedViews = async (prisma: PrismaClient) => {
   await Promise.all(
     [
       {
-        id: 'twenty-fc3461b4-661d-492e-8907-61004a41cca6',
+        key: 'displayName',
-        fieldName: 'People',
+        name: 'People',
-        sizeInPx: 210,
+        size: 210,
-        isVisible: true,
       },
       {
-        id: 'twenty-4724d413-4343-4528-b8c4-4431910722f8',
+        key: 'email',
-        fieldName: 'Email',
+        name: 'Email',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-fbb16b08-5a58-4a69-8bd0-a6d267994042',
+        key: 'company',
-        fieldName: 'Company',
+        name: 'Company',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-1bad57bb-6627-40f8-8c75-bb5902892273',
+        key: 'phone',
-        fieldName: 'Phone',
+        name: 'Phone',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-3544d797-740b-4e0b-8226-134bf38da256',
+        key: 'createdAt',
-        fieldName: 'Creation',
+        name: 'Creation',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-4b6d48fb-17e2-4071-8565-d512f84656d5',
+        key: 'city',
-        fieldName: 'City',
+        name: 'City',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-418849cc-aa5c-4835-822b-c0dfb076106b',
+        key: 'jobTitle',
-        fieldName: 'Job title',
+        name: 'Job title',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-7591af5d-e081-4afa-94bb-09bd0e517850',
+        key: 'linkedin',
-        fieldName: 'LinkedIn',
+        name: 'LinkedIn',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
       {
-        id: 'twenty-e7baeb3d-8ef3-4e61-89d6-60f64b1d52c5',
+        key: 'x',
-        fieldName: 'Twitter',
+        name: 'Twitter',
-        sizeInPx: 150,
+        size: 150,
-        isVisible: true,
       },
     ].map((viewField, index) =>
       prisma.viewField.upsert({
-        where: { id: viewField.id },
+        where: { viewId_key: { key: viewField.key, viewId: personViewId } },
         update: {},
         create: {
           ...viewField,
-          index: index + 1,
+          index,
-          objectName: 'person',
+          isVisible: true,
+          objectId: 'person',
           viewId: personViewId,
           workspaceId,
         },