refactor: add ColumnDefinition type (#1357)

* refactor: add ColumnDefinition type

Closes #1193

* refactor: code review - rename things

* fix: fix wrong import and lint

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

@@ -5,8 +5,8 @@ import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOp
 import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
+import { ColumnContext } from '../contexts/ColumnContext';
 import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
-import { ViewFieldContext } from '../contexts/ViewFieldContext';
 import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 
@@ -26,9 +26,9 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
     setContextMenuOpenState(true);
   }
 
-  const viewField = useContext(ViewFieldContext);
+  const columnDefinition = useContext(ColumnContext);
 
-  if (!viewField) {
+  if (!columnDefinition) {
     return null;
   }
 
@@ -36,7 +36,7 @@ export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
     <RecoilScope>
       <ColumnIndexContext.Provider value={cellIndex}>
         <td onContextMenu={(event) => handleContextMenu(event)}>
-          <GenericEditableCell viewField={viewField} />
+          <GenericEditableCell columnDefinition={columnDefinition} />
         </td>
       </ColumnIndexContext.Provider>
     </RecoilScope>

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

@@ -53,11 +53,11 @@ export const EntityTableColumnMenu = ({
               />,
             ]}
           >
-            {column.columnIcon &&
-              cloneElement(column.columnIcon, {
+            {column.icon &&
+              cloneElement(column.icon, {
                 size: theme.icon.size.md,
               })}
-            {column.columnLabel}
+            {column.label}
           </DropdownMenuItem>
         ))}
       </StyledDropdownMenuItemsContainer>

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

@@ -114,16 +114,16 @@ export function EntityTableHeader() {
 
         const nextWidth = Math.round(
           Math.max(
-            columnsById[resizedFieldId].columnSize +
+            columnsById[resizedFieldId].size +
               snapshot.getLoadable(resizeFieldOffsetState).valueOrThrow(),
             COLUMN_MIN_WIDTH,
           ),
         );
 
-        if (nextWidth !== columnsById[resizedFieldId].columnSize) {
+        if (nextWidth !== columnsById[resizedFieldId].size) {
           const nextColumns = columns.map((column) =>
             column.id === resizedFieldId
-              ? { ...column, columnSize: nextWidth }
+              ? { ...column, size: nextWidth }
               : column,
           );
 
@@ -179,15 +179,12 @@ export function EntityTableHeader() {
             key={column.id}
             isResizing={resizedFieldId === column.id}
             columnWidth={Math.max(
-              columnsById[column.id].columnSize +
+              columnsById[column.id].size +
                 (resizedFieldId === column.id ? offset : 0),
               COLUMN_MIN_WIDTH,
             )}
           >
-            <ColumnHead
-              viewName={column.columnLabel}
-              viewIcon={column.columnIcon}
-            />
+            <ColumnHead viewName={column.label} viewIcon={column.icon} />
             <StyledResizeHandler
               className="cursor-col-resize"
               role="separator"

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

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
-import { ViewFieldContext } from '../contexts/ViewFieldContext';
+import { ColumnContext } from '../contexts/ColumnContext';
 import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
@@ -33,9 +33,9 @@ export function EntityTableRow({ rowId }: { rowId: string }) {
       </td>
       {columns.map((column, columnIndex) => {
         return (
-          <ViewFieldContext.Provider value={column} key={column.id}>
+          <ColumnContext.Provider value={column} key={column.id}>
             <EntityTableCell cellIndex={columnIndex} />
-          </ViewFieldContext.Provider>
+          </ColumnContext.Provider>
         );
       })}
       <td></td>