Migrate view field to new data model - Part 2 (#2270)

* Migrate view field to new data model * Migrate view fields to new model
2023-10-28 19:13:48 +02:00
parent b591023eb3
commit 685d342170
168 changed files with 960 additions and 4568 deletions
--- a/front/src/modules/ui/data/data-table/components/ColumnHead.tsx
+++ b/front/src/modules/ui/data/data-table/components/ColumnHead.tsx
@ -44,7 +44,7 @@ export const ColumnHead = ({ column }: ColumnHeadProps) => {
        <StyledIcon>
          {column.Icon && <column.Icon size={theme.icon.size.md} />}
        </StyledIcon>
-        <StyledText>{column.name}</StyledText>
+        <StyledText>{column.label}</StyledText>
      </StyledTitle>
    </>
  );
--- a/front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx
+++ b/front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx
@ -21,7 +21,7 @@ export const ColumnHeadWithDropdown = ({
  primaryColumnKey,
 }: ColumnHeadWithDropdownProps) => {
  return (
-    <DropdownScope dropdownScopeId={column.key + '-header'}>
+    <DropdownScope dropdownScopeId={column.fieldId + '-header'}>
      <Dropdown
        clickableComponent={<ColumnHead column={column} />}
        dropdownComponents={
@ -34,7 +34,7 @@ export const ColumnHeadWithDropdown = ({
        }
        dropdownOffset={{ x: -1 }}
        dropdownPlacement="bottom-start"
-        dropdownHotkeyScope={{ scope: column.key + '-header' }}
+        dropdownHotkeyScope={{ scope: column.fieldId + '-header' }}
      />
    </DropdownScope>
  );
--- a/front/src/modules/ui/data/data-table/components/DataTableCell.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableCell.tsx
@ -51,7 +51,7 @@ export const DataTableCell = ({ cellIndex }: { cellIndex: number }) => {
        <td onContextMenu={(event) => handleContextMenu(event)}>
          <FieldContext.Provider
            value={{
-              recoilScopeId: currentRowId + columnDefinition.name,
+              recoilScopeId: currentRowId + columnDefinition.label,
              entityId: currentRowId,
              fieldDefinition: columnDefinition,
              useUpdateEntityMutation: () => [updateEntityMutation, {}],
--- a/front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx
@ -46,7 +46,7 @@ export const DataTableColumnDropdownMenu = ({
    handleColumnVisibilityChange(column);
  };

-  return column.key === primaryColumnKey ? (
+  return column.fieldId === primaryColumnKey ? (
    <></>
  ) : (
    <DropdownMenuItemsContainer>
--- a/front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
@ -6,7 +6,6 @@ import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimis
 import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
 import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { useView } from '@/views/hooks/useView';
 import {
  SortOrder,
  useGetCompaniesQuery,
@ -40,7 +39,6 @@ export const DataTableEffect = ({
 }) => {
  const setDataTableData = useSetDataTableData();
  const { registerOptimisticEffect } = useOptimisticEffect();
-  const { setCurrentViewId } = useView();

  const tableSortsOrderBy = useRecoilScopedValue(
    tableSortsOrderByScopedSelector,
--- a/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
@ -134,7 +134,7 @@ export const DataTableHeader = () => {

        if (nextWidth !== tableColumnsByKey[resizedFieldKey].size) {
          const nextColumns = tableColumns.map((column) =>
-            column.key === resizedFieldKey
+            column.fieldId === resizedFieldKey
              ? { ...column, size: nextWidth }
              : column,
          );
@ -152,7 +152,9 @@ export const DataTableHeader = () => {
    onMouseUp: handleResizeHandlerEnd,
  });

-  const primaryColumn = visibleTableColumns[0];
+  const primaryColumn = visibleTableColumns.find(
+    (column) => column.position === 0,
+  );

  return (
    <StyledTableHead data-select-disable>
@ -167,30 +169,32 @@ export const DataTableHeader = () => {
          <SelectAllCheckbox />
        </th>
        {[...visibleTableColumns]
-          .sort((columnA, columnB) => columnA.index - columnB.index)
-          .map((column, index) => (
+          .sort((columnA, columnB) => columnA.position - columnB.position)
+          .map((column) => (
            <StyledColumnHeaderCell
-              key={column.key}
-              isResizing={resizedFieldKey === column.key}
+              key={column.fieldId}
+              isResizing={resizedFieldKey === column.fieldId}
              columnWidth={Math.max(
-                tableColumnsByKey[column.key].size +
-                  (resizedFieldKey === column.key ? resizeFieldOffset : 0),
+                tableColumnsByKey[column.fieldId].size +
+                  (resizedFieldKey === column.fieldId ? resizeFieldOffset : 0),
                COLUMN_MIN_WIDTH,
              )}
            >
              <StyledColumnHeadContainer>
                <ColumnHeadWithDropdown
                  column={column}
-                  isFirstColumn={index === 1}
-                  isLastColumn={index === visibleTableColumns.length - 1}
-                  primaryColumnKey={primaryColumn.key}
+                  isFirstColumn={column.position === 1}
+                  isLastColumn={
+                    column.position === visibleTableColumns.length - 1
+                  }
+                  primaryColumnKey={primaryColumn?.fieldId || ''}
                />
              </StyledColumnHeadContainer>
              <StyledResizeHandler
                className="cursor-col-resize"
                role="separator"
                onPointerDown={() => {
-                  setResizedFieldKey(column.key);
+                  setResizedFieldKey(column.fieldId);
                }}
              />
            </StyledColumnHeaderCell>
--- a/front/src/modules/ui/data/data-table/components/DataTableHeaderPlusButtonContent.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableHeaderPlusButtonContent.tsx
@ -34,7 +34,7 @@ export const DataTableHeaderPlusButtonContent = () => {
    <DropdownMenuItemsContainer>
      {hiddenTableColumns.map((column) => (
        <MenuItem
-          key={column.key}
+          key={column.fieldId}
          iconButtons={[
            {
              Icon: IconPlus,
@ -42,7 +42,7 @@ export const DataTableHeaderPlusButtonContent = () => {
            },
          ]}
          LeftIcon={column.Icon}
-          text={column.name}
+          text={column.label}
        />
      ))}
    </DropdownMenuItemsContainer>
--- a/front/src/modules/ui/data/data-table/components/DataTableRow.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableRow.tsx
@ -39,10 +39,10 @@ export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps>(
          <CheckboxCell />
        </td>
        {[...visibleTableColumns]
-          .sort((columnA, columnB) => columnA.index - columnB.index)
+          .sort((columnA, columnB) => columnA.position - columnB.position)
          .map((column, columnIndex) => {
            return (
-              <ColumnContext.Provider value={column} key={column.key}>
+              <ColumnContext.Provider value={column} key={column.fieldId}>
                <DataTableCell cellIndex={columnIndex} />
              </ColumnContext.Provider>
            );
--- a/front/src/modules/ui/data/data-table/hooks/useMoveViewColumns.ts
+++ b/front/src/modules/ui/data/data-table/hooks/useMoveViewColumns.ts
@ -1,5 +1,5 @@
 export const useMoveViewColumns = () => {
-  const handleColumnMove = <T extends { index: number }>(
+  const handleColumnMove = <T extends { position: number }>(
    direction: 'left' | 'right',
    currentArrayindex: number,
    targetArray: T[],
@ -19,13 +19,17 @@ export const useMoveViewColumns = () => {

      newArray[currentArrayindex] = {
        ...targetEntity,
-        index: currentEntity.index,
+        index: currentEntity.position,
      };
      newArray[targetArrayIndex] = {
        ...currentEntity,
-        index: targetEntity.index,
+        index: targetEntity.position,
      };
-      return newArray;
+
+      return newArray.map((column, index) => ({
+        ...column,
+        position: index,
+      }));
    }

    return targetArray;
--- a/front/src/modules/ui/data/data-table/hooks/useTableColumns.ts
+++ b/front/src/modules/ui/data/data-table/hooks/useTableColumns.ts
@ -4,13 +4,14 @@ import { useSetRecoilState } from 'recoil';
 import { useMoveViewColumns } from '@/ui/data/data-table/hooks/useMoveViewColumns';
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useView } from '@/views/hooks/useView';
-import { ViewFieldForVisibility } from '@/views/types/ViewFieldForVisibility';

 import { TableContext } from '../contexts/TableContext';
 import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsFamilyState } from '../states/savedTableColumnsFamilyState';
+import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 import { ColumnDefinition } from '../types/ColumnDefinition';

@ -32,6 +33,10 @@ export const useTableColumns = () => {
    TableRecoilScopeContext,
  );

+  const visibleTableColumns = useRecoilScopedValue(
+    visibleTableColumnsScopedSelector,
+    TableRecoilScopeContext,
+  );
  const { handleColumnMove } = useMoveViewColumns();

  const handleColumnsChange = useCallback(
@ -44,27 +49,18 @@ export const useTableColumns = () => {
    [onColumnsChange, setSavedTableColumns, setTableColumns],
  );

-  const handleColumnReorder = useCallback(
-    async (columns: ColumnDefinition<FieldMetadata>[]) => {
-      const updatedColumns = columns.map((column, index) => ({
-        ...column,
-        index,
-      }));
-
-      await handleColumnsChange(updatedColumns);
-    },
-    [handleColumnsChange],
-  );
-
  const handleColumnVisibilityChange = useCallback(
-    async (viewField: ViewFieldForVisibility) => {
+    async (
+      viewField: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
+    ) => {
      const isNewColumn = !tableColumns.some(
-        (tableColumns) => tableColumns.key === viewField.key,
+        (tableColumns) => tableColumns.fieldId === viewField.fieldId,
      );

      if (isNewColumn) {
        const newColumn = availableTableColumns.find(
-          (availableTableColumn) => availableTableColumn.key === viewField.key,
+          (availableTableColumn) =>
+            availableTableColumn.fieldId === viewField.fieldId,
        );
        if (!newColumn) return;

@ -76,7 +72,7 @@ export const useTableColumns = () => {
        await handleColumnsChange(nextColumns);
      } else {
        const nextColumns = tableColumns.map((previousColumn) =>
-          previousColumn.key === viewField.key
+          previousColumn.fieldId === viewField.fieldId
            ? { ...previousColumn, isVisible: !viewField.isVisible }
            : previousColumn,
        );
@ -92,18 +88,31 @@ export const useTableColumns = () => {
      direction: 'left' | 'right',
      column: ColumnDefinition<FieldMetadata>,
    ) => {
-      const currentColumnArrayIndex = tableColumns.findIndex(
-        (tableColumn) => tableColumn.key === column.key,
+      const currentColumnArrayIndex = visibleTableColumns.findIndex(
+        (visibleColumn) => visibleColumn.fieldId === column.fieldId,
      );
+
      const columns = handleColumnMove(
        direction,
        currentColumnArrayIndex,
-        tableColumns,
+        visibleTableColumns,
      );

      await handleColumnsChange(columns);
    },
-    [tableColumns, handleColumnMove, handleColumnsChange],
+    [visibleTableColumns, handleColumnMove, handleColumnsChange],
+  );
+
+  const handleColumnReorder = useCallback(
+    async (columns: ColumnDefinition<FieldMetadata>[]) => {
+      const updatedColumns = columns.map((column, index) => ({
+        ...column,
+        position: index,
+      }));
+
+      await handleColumnsChange(updatedColumns);
+    },
+    [handleColumnsChange],
  );

  return {
--- a/front/src/modules/ui/data/data-table/options/components/TableOptionsDropdownContent.tsx
+++ b/front/src/modules/ui/data/data-table/options/components/TableOptionsDropdownContent.tsx
@ -59,13 +59,17 @@ export const TableOptionsDropdownContent = ({

  const handleReorderField: OnDragEndResponder = useCallback(
    (result) => {
-      if (!result.destination || result.destination.index === 0) {
+      if (
+        !result.destination ||
+        result.destination.index === 1 ||
+        result.source.index === 1
+      ) {
        return;
      }

-      const reorderFields = Array.from(visibleTableColumns);
-      const [removed] = reorderFields.splice(result.source.index, 1);
-      reorderFields.splice(result.destination.index, 0, removed);
+      const reorderFields = [...visibleTableColumns];
+      const [removed] = reorderFields.splice(result.source.index - 1, 1);
+      reorderFields.splice(result.destination.index - 1, 0, removed);

      handleColumnReorder(reorderFields);
    },
--- a/front/src/modules/ui/data/data-table/states/selectors/hiddenTableColumnsScopedSelector.ts
+++ b/front/src/modules/ui/data/data-table/states/selectors/hiddenTableColumnsScopedSelector.ts
@ -9,10 +9,10 @@ export const hiddenTableColumnsScopedSelector = selectorFamily({
    (scopeId: string) =>
    ({ get }) => {
      const columns = get(tableColumnsScopedState(scopeId));
-      const columnKeys = columns.map(({ key }) => key);
+      const columnKeys = columns.map(({ fieldId }) => fieldId);
      const otherAvailableColumns = get(
        availableTableColumnsScopedState(scopeId),
-      ).filter(({ key }) => !columnKeys.includes(key));
+      ).filter(({ fieldId }) => !columnKeys.includes(fieldId));

      return [
        ...columns.filter((column) => !column.isVisible),
--- a/front/src/modules/ui/data/data-table/states/selectors/savedTableColumnsByKeyFamilySelector.ts
+++ b/front/src/modules/ui/data/data-table/states/selectors/savedTableColumnsByKeyFamilySelector.ts
@ -12,5 +12,5 @@ export const savedTableColumnsByKeyFamilySelector = selectorFamily({
    ({ get }) =>
      get(savedTableColumnsFamilyState(viewId)).reduce<
        Record<string, ColumnDefinition<FieldMetadata>>
-      >((result, column) => ({ ...result, [column.key]: column }), {}),
+      >((result, column) => ({ ...result, [column.fieldId]: column }), {}),
 });
--- a/front/src/modules/ui/data/data-table/states/selectors/tableColumnsByKeyScopedSelector.ts
+++ b/front/src/modules/ui/data/data-table/states/selectors/tableColumnsByKeyScopedSelector.ts
@ -12,5 +12,5 @@ export const tableColumnsByKeyScopedSelector = selectorFamily({
    ({ get }) =>
      get(tableColumnsScopedState(scopeId)).reduce<
        Record<string, ColumnDefinition<FieldMetadata>>
-      >((result, column) => ({ ...result, [column.key]: column }), {}),
+      >((result, column) => ({ ...result, [column.fieldId]: column }), {}),
 });
--- a/front/src/modules/ui/data/data-table/states/selectors/visibleTableColumnsScopedSelector.ts
+++ b/front/src/modules/ui/data/data-table/states/selectors/visibleTableColumnsScopedSelector.ts
@ -7,7 +7,9 @@ export const visibleTableColumnsScopedSelector = selectorFamily({
  get:
    (scopeId: string) =>
    ({ get }) =>
-      get(tableColumnsScopedState(scopeId)).filter(
-        (column) => column.isVisible,
-      ),
+      [
+        ...get(tableColumnsScopedState(scopeId)).filter(
+          (column) => column.isVisible,
+        ),
+      ].sort((a, b) => a.position - b.position),
 });
--- a/front/src/modules/ui/data/data-table/types/ColumnDefinition.ts
+++ b/front/src/modules/ui/data/data-table/types/ColumnDefinition.ts
@ -3,6 +3,7 @@ import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';

 export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
  size: number;
-  index: number;
+  position: number;
  isVisible?: boolean;
+  viewFieldId?: string;
 };
--- a/front/src/modules/ui/data/field/hooks/useIsFieldEmpty.ts
+++ b/front/src/modules/ui/data/field/hooks/useIsFieldEmpty.ts
@ -10,8 +10,8 @@ export const useIsFieldEmpty = () => {
  const isFieldEmpty = useRecoilValue(
    isEntityFieldEmptyFamilySelector({
      fieldDefinition: {
-        key: fieldDefinition.key,
-        name: fieldDefinition.name,
+        fieldId: fieldDefinition.fieldId,
+        label: fieldDefinition.label,
        type: fieldDefinition.type,
        metadata: fieldDefinition.metadata,
      },
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/DateFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/DateFieldDisplay.stories.tsx
@ -31,8 +31,8 @@ const DateFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'date',
-        name: 'Date',
+        fieldId: 'date',
+        label: 'Date',
        type: 'date',
        metadata: {
          fieldName: 'Date',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/DoubleTextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/DoubleTextFieldDisplay.stories.tsx
@ -38,8 +38,8 @@ const DoubleTextFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'double-text',
-        name: 'Double-Text',
+        fieldId: 'double-text',
+        label: 'Double-Text',
        type: 'double-text',
        metadata: {
          firstValueFieldName: 'First-text',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/EmailFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/EmailFieldDisplay.stories.tsx
@ -30,8 +30,8 @@ const EmailFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'email',
-        name: 'Email',
+        fieldId: 'email',
+        label: 'Email',
        type: 'email',
        metadata: {
          fieldName: 'Email',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/MoneyFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/MoneyFieldDisplay.stories.tsx
@ -32,8 +32,8 @@ const MoneyFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'money',
-        name: 'Money',
+        fieldId: 'money',
+        label: 'Money',
        type: 'moneyAmount',
        metadata: {
          fieldName: 'Amount',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/NumberFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/NumberFieldDisplay.stories.tsx
@ -32,8 +32,8 @@ const NumberFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'number',
-        name: 'Number',
+        fieldId: 'number',
+        label: 'Number',
        type: 'number',
        metadata: {
          fieldName: 'Number',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
@ -30,8 +30,8 @@ const PhoneFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'phone',
-        name: 'Phone',
+        fieldId: 'phone',
+        label: 'Phone',
        type: 'phone',
        metadata: {
          fieldName: 'Phone',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/TextFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/TextFieldDisplay.stories.tsx
@ -32,8 +32,8 @@ const TextFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'text',
-        name: 'Text',
+        fieldId: 'text',
+        label: 'Text',
        type: 'text',
        metadata: {
          fieldName: 'Text',
--- a/front/src/modules/ui/data/field/meta-types/display/components/stories/URLFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/display/components/stories/URLFieldDisplay.stories.tsx
@ -30,8 +30,8 @@ const URLFieldDisplayWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'URL',
-        name: 'URL',
+        fieldId: 'URL',
+        label: 'URL',
        type: 'url',
        metadata: {
          fieldName: 'URL',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/BooleanFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/BooleanFieldInput.stories.tsx
@ -34,8 +34,8 @@ const BooleanFieldInputWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'boolean',
-        name: 'Boolean',
+        fieldId: 'boolean',
+        label: 'Boolean',
        type: 'boolean',
        metadata: {
          fieldName: 'Boolean',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/ChipFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/ChipFieldInput.stories.tsx
@ -44,8 +44,8 @@ const ChipFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'chip',
-          name: 'Chip',
+          fieldId: 'chip',
+          label: 'Chip',
          type: 'chip',
          metadata: {
            contentFieldName: 'name',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/DateFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/DateFieldInput.stories.tsx
@ -44,8 +44,8 @@ const DateFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'date',
-          name: 'Date',
+          fieldId: 'date',
+          label: 'Date',
          type: 'date',
          metadata: {
            fieldName: 'Date',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextChipFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextChipFieldInput.stories.tsx
@ -57,8 +57,8 @@ const DoubleTextChipFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'double-text-chip',
-          name: 'Double-Text-Chip',
+          fieldId: 'double-text-chip',
+          label: 'Double-Text-Chip',
          type: 'double-text-chip',
          metadata: {
            firstValueFieldName: 'First-text',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/DoubleTextFieldInput.stories.tsx
@ -55,8 +55,8 @@ const DoubleTextFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'double-text',
-          name: 'Double-Text',
+          fieldId: 'double-text',
+          label: 'Double-Text',
          type: 'double-text',
          metadata: {
            firstValueFieldName: 'First-text',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/EmailFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/EmailFieldInput.stories.tsx
@ -43,8 +43,8 @@ const EmailFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'email',
-          name: 'Email',
+          fieldId: 'email',
+          label: 'Email',
          type: 'email',
          metadata: {
            fieldName: 'email',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/MoneyFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/MoneyFieldInput.stories.tsx
@ -43,8 +43,8 @@ const MoneyFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'moneyAmount',
-          name: 'MoneyAmout',
+          fieldId: 'moneyAmount',
+          label: 'MoneyAmout',
          type: 'moneyAmount',
          metadata: {
            fieldName: 'moneyAmount',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/NumberFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/NumberFieldInput.stories.tsx
@ -43,8 +43,8 @@ const NumberFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'number',
-          name: 'Number',
+          fieldId: 'number',
+          label: 'Number',
          type: 'number',
          metadata: {
            fieldName: 'number',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/PhoneFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/PhoneFieldInput.stories.tsx
@ -43,8 +43,8 @@ const PhoneFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'phone',
-          name: 'Phone',
+          fieldId: 'phone',
+          label: 'Phone',
          type: 'phone',
          metadata: {
            fieldName: 'Phone',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/ProbabilityFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/ProbabilityFieldInput.stories.tsx
@ -41,8 +41,8 @@ const ProbabilityFieldInputWithContext = ({
  return (
    <FieldContextProvider
      fieldDefinition={{
-        key: 'probability',
-        name: 'Probability',
+        fieldId: 'probability',
+        label: 'Probability',
        type: 'probability',
        metadata: {
          fieldName: 'Probability',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/RelationFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/RelationFieldInput.stories.tsx
@ -46,8 +46,8 @@ const RelationFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'relation',
-          name: 'Relation',
+          fieldId: 'relation',
+          label: 'Relation',
          type: 'relation',
          metadata: {
            fieldName: 'Relation',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/TextFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/TextFieldInput.stories.tsx
@ -43,8 +43,8 @@ const TextFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'text',
-          name: 'Text',
+          fieldId: 'text',
+          label: 'Text',
          type: 'text',
          metadata: {
            fieldName: 'Text',
--- a/front/src/modules/ui/data/field/meta-types/input/components/stories/URLFieldInput.stories.tsx
+++ b/front/src/modules/ui/data/field/meta-types/input/components/stories/URLFieldInput.stories.tsx
@ -43,8 +43,8 @@ const URLFieldInputWithContext = ({
    <div>
      <FieldContextProvider
        fieldDefinition={{
-          key: 'url',
-          name: 'URL',
+          fieldId: 'url',
+          label: 'URL',
          type: 'url',
          metadata: {
            fieldName: 'URL',
--- a/front/src/modules/ui/data/field/states/selectors/isEntityFieldEmptyFamilySelector.ts
+++ b/front/src/modules/ui/data/field/states/selectors/isEntityFieldEmptyFamilySelector.ts
@ -23,7 +23,7 @@ export const isEntityFieldEmptyFamilySelector = selectorFamily({
  }: {
    fieldDefinition: Pick<
      FieldDefinition<FieldMetadata>,
-      'type' | 'metadata' | 'key' | 'name'
+      'type' | 'metadata' | 'fieldId' | 'label'
    >;
    entityId: string;
  }) => {
--- a/front/src/modules/ui/data/field/types/FieldDefinition.ts
+++ b/front/src/modules/ui/data/field/types/FieldDefinition.ts
@ -5,8 +5,8 @@ import { FieldMetadata } from './FieldMetadata';
 import { FieldType } from './FieldType';

 export type FieldDefinition<T extends FieldMetadata> = {
-  key: string;
-  name: string;
+  fieldId: string;
+  label: string;
  Icon?: IconComponent;
  type: FieldType;
  metadata: T;
--- a/front/src/modules/ui/data/filter/components/FilterDropdownEntitySearchSelect.tsx
+++ b/front/src/modules/ui/data/filter/components/FilterDropdownEntitySearchSelect.tsx
@ -6,7 +6,7 @@ import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/Si
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { useRemoveFilter } from '@/views/hooks/useRemoveFilter';
 import { useUpsertFilter } from '@/views/hooks/useUpsertFilter';
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 import { useFilter } from '../hooks/useFilter';

--- a/front/src/modules/ui/data/filter/components/FilterDropdownOperandSelect.tsx
+++ b/front/src/modules/ui/data/filter/components/FilterDropdownOperandSelect.tsx
@ -1,6 +1,6 @@
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 import { useUpsertFilter } from '../../../../views/hooks/useUpsertFilter';
 import { useFilter } from '../hooks/useFilter';
--- a/front/src/modules/ui/data/filter/components/SingleEntityFilterDropdownButton.tsx
+++ b/front/src/modules/ui/data/filter/components/SingleEntityFilterDropdownButton.tsx
@ -6,7 +6,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 import { useFilter } from '../hooks/useFilter';
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
--- a/front/src/modules/ui/data/filter/states/selectedOperandInDropdownScopedState.ts
+++ b/front/src/modules/ui/data/filter/states/selectedOperandInDropdownScopedState.ts
@ -1,5 +1,5 @@
 import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 export const selectedOperandInDropdownScopedState =
  createScopedState<ViewFilterOperand | null>({
--- a/front/src/modules/ui/data/filter/types/Filter.ts
+++ b/front/src/modules/ui/data/filter/types/Filter.ts
@ -1,4 +1,4 @@
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 import { FilterType } from './FilterType';

--- a/front/src/modules/ui/data/filter/types/FilterOperand.ts
+++ b/front/src/modules/ui/data/filter/types/FilterOperand.ts
@ -1 +1 @@
-export { ViewFilterOperand as FilterOperand } from '~/generated/graphql';
+export { ViewFilterOperand as FilterOperand } from '@/views/types/ViewFilterOperand';
--- a/front/src/modules/ui/data/filter/utils/getOperandLabel.ts
+++ b/front/src/modules/ui/data/filter/utils/getOperandLabel.ts
@ -1,4 +1,4 @@
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 export const getOperandLabel = (
  operand: ViewFilterOperand | null | undefined,
--- a/front/src/modules/ui/data/filter/utils/getOperandsForFilterType.ts
+++ b/front/src/modules/ui/data/filter/utils/getOperandsForFilterType.ts
@ -1,4 +1,4 @@
-import { ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';

 import { FilterType } from '../types/FilterType';

--- a/front/src/modules/ui/data/filter/utils/turnFilterIntoWhereClause.ts
+++ b/front/src/modules/ui/data/filter/utils/turnFilterIntoWhereClause.ts
@ -1,4 +1,5 @@
-import { QueryMode, ViewFilterOperand } from '~/generated/graphql';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { QueryMode } from '~/generated/graphql';

 import { Filter } from '../types/Filter';

--- a/front/src/modules/ui/layout/board/components/BoardOptionsDropdownContent.tsx
+++ b/front/src/modules/ui/layout/board/components/BoardOptionsDropdownContent.tsx
@ -49,7 +49,7 @@ type BoardOptionsMenu = 'fields' | 'stage-creation' | 'stages';
 type ColumnForCreate = {
  id: string;
  colorCode: ThemeColor;
-  index: number;
+  position: number;
  title: string;
 };

@ -93,7 +93,7 @@ export const BoardOptionsDropdownContent = ({
    const columnToCreate: ColumnForCreate = {
      id: v4(),
      colorCode: 'gray',
-      index: boardColumns.length,
+      position: boardColumns.length,
      title: stageInputRef.current.value,
    };

--- a/front/src/modules/ui/layout/board/components/EntityBoard.tsx
+++ b/front/src/modules/ui/layout/board/components/EntityBoard.tsx
@ -132,7 +132,7 @@ export const EntityBoard = ({
  );

  const sortedBoardColumns = [...boardColumns].sort((a, b) => {
-    return a.index - b.index;
+    return a.position - b.position;
  });

  const boardRef = useRef<HTMLDivElement>(null);
@ -155,8 +155,9 @@ export const EntityBoard = ({
                value={{
                  id: column.id,
                  columnDefinition: column,
-                  isFirstColumn: column.index === 0,
-                  isLastColumn: column.index === sortedBoardColumns.length - 1,
+                  isFirstColumn: column.position === 0,
+                  isLastColumn:
+                    column.position === sortedBoardColumns.length - 1,
                }}
              >
                <RecoilScope
--- a/front/src/modules/ui/layout/board/hooks/useBoardCardFields.ts
+++ b/front/src/modules/ui/layout/board/hooks/useBoardCardFields.ts
@ -1,5 +1,6 @@
+import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { ViewFieldForVisibility } from '@/views/types/ViewFieldForVisibility';

 import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';

@ -13,10 +14,12 @@ export const useBoardCardFields = () => {
    BoardRecoilScopeContext,
  );

-  const handleFieldVisibilityChange = (field: ViewFieldForVisibility) => {
+  const handleFieldVisibilityChange = (
+    field: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
+  ) => {
    setBoardCardFields((previousFields) =>
      previousFields.map((previousField) =>
-        previousField.key === field.key
+        previousField.fieldId === field.fieldId
          ? { ...previousField, isVisible: !field.isVisible }
          : previousField,
      ),
--- a/front/src/modules/ui/layout/board/hooks/useBoardColumns.ts
+++ b/front/src/modules/ui/layout/board/hooks/useBoardColumns.ts
@ -21,7 +21,7 @@ export const useBoardColumns = () => {
        updatePipelineStageMutation({
          variables: {
            data: {
-              index: stage.index,
+              position: stage.position,
            },
            id: stage.id,
          },
--- a/front/src/modules/ui/layout/board/states/selectors/boardCardFieldsByKeyScopedSelector.ts
+++ b/front/src/modules/ui/layout/board/states/selectors/boardCardFieldsByKeyScopedSelector.ts
@ -12,5 +12,5 @@ export const boardCardFieldsByKeyScopedSelector = selectorFamily({
    ({ get }) =>
      get(boardCardFieldsScopedState(scopeId)).reduce<
        Record<string, BoardFieldDefinition<FieldMetadata>>
-      >((result, field) => ({ ...result, [field.key]: field }), {}),
+      >((result, field) => ({ ...result, [field.fieldId]: field }), {}),
 });
--- a/front/src/modules/ui/layout/board/states/selectors/hiddenBoardCardFieldsScopedSelector.ts
+++ b/front/src/modules/ui/layout/board/states/selectors/hiddenBoardCardFieldsScopedSelector.ts
@ -9,10 +9,10 @@ export const hiddenBoardCardFieldsScopedSelector = selectorFamily({
    (scopeId: string) =>
    ({ get }) => {
      const fields = get(boardCardFieldsScopedState(scopeId));
-      const fieldKeys = fields.map(({ key }) => key);
+      const fieldKeys = fields.map(({ fieldId }) => fieldId);
      const otherAvailableKeys = get(
        availableBoardCardFieldsScopedState(scopeId),
-      ).filter(({ key }) => !fieldKeys.includes(key));
+      ).filter(({ fieldId }) => !fieldKeys.includes(fieldId));

      return [
        ...fields.filter((field) => !field.isVisible),
--- a/front/src/modules/ui/layout/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector.ts
+++ b/front/src/modules/ui/layout/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector.ts
@ -12,5 +12,5 @@ export const savedBoardCardFieldsByKeyFamilySelector = selectorFamily({
    ({ get }) =>
      get(savedBoardCardFieldsFamilyState(viewId)).reduce<
        Record<string, BoardFieldDefinition<FieldMetadata>>
-      >((result, field) => ({ ...result, [field.key]: field }), {}),
+      >((result, field) => ({ ...result, [field.fieldId]: field }), {}),
 });
--- a/front/src/modules/ui/layout/board/types/BoardColumnDefinition.ts
+++ b/front/src/modules/ui/layout/board/types/BoardColumnDefinition.ts
@ -3,6 +3,6 @@ import { ThemeColor } from '@/ui/theme/constants/colors';
 export type BoardColumnDefinition = {
  id: string;
  title: string;
-  index: number;
+  position: number;
  colorCode?: ThemeColor;
 };
--- a/front/src/modules/ui/layout/board/types/BoardFieldDefinition.ts
+++ b/front/src/modules/ui/layout/board/types/BoardFieldDefinition.ts
@ -3,6 +3,6 @@ import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';

 export type BoardFieldDefinition<T extends FieldMetadata> =
  FieldDefinition<T> & {
-    index: number;
+    position: number;
    isVisible?: boolean;
  };