Fix: Changed file and component names (#1934)

Changed file and component names

front/src/modules/ui/data-table/components/DataTable.tsx

@@ -17,8 +17,8 @@ import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
 import { TableHeader } from '../table-header/components/TableHeader';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
-import { EntityTableBody } from './EntityTableBody';
-import { EntityTableHeader } from './EntityTableHeader';
+import { DataTableBody } from './DataTableBody';
+import { DataTableHeader } from './DataTableHeader';
 
 const StyledTable = styled.table`
   border-collapse: collapse;
@@ -86,7 +86,7 @@ type OwnProps = {
   updateEntityMutation: (params: any) => void;
 };
 
-export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
+export const DataTable = ({ updateEntityMutation }: OwnProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
   const setRowSelectedState = useSetRowSelectedState();
@@ -127,8 +127,8 @@ export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
           <ScrollWrapper>
             <div>
               <StyledTable className="entity-table-cell">
-                <EntityTableHeader />
-                <EntityTableBody />
+                <DataTableHeader />
+                <DataTableBody />
               </StyledTable>
             </div>
           </ScrollWrapper>

front/src/modules/ui/data-table/components/DataTableBody.tsx

@@ -7,10 +7,10 @@ import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScroll
 
 import { RowIdContext } from '../contexts/RowIdContext';
 import { RowIndexContext } from '../contexts/RowIndexContext';
-import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState';
+import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
 import { tableRowIdsState } from '../states/tableRowIdsState';
 
-import { EntityTableRow } from './EntityTableRow';
+import { DataTableRow } from './DataTableRow';
 
 type SpaceProps = {
   top?: number;
@@ -22,15 +22,13 @@ const StyledSpace = styled.td<SpaceProps>`
   ${({ bottom }) => bottom && `padding-bottom: ${bottom}px;`}
 `;
 
-export const EntityTableBody = () => {
+export const DataTableBody = () => {
   const scrollWrapperRef = useScrollWrapperScopedRef();
 
   const tableRowIds = useRecoilValue(tableRowIdsState);
 
   const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState);
-  const isFetchingEntityTableData = useRecoilValue(
-    isFetchingEntityTableDataState,
-  );
+  const isFetchingDataTableData = useRecoilValue(isFetchingDataTableDataState);
 
   const rowVirtualizer = useVirtual({
     size: tableRowIds.length,
@@ -45,7 +43,7 @@ export const EntityTableBody = () => {
       ? rowVirtualizer.totalSize - items[items.length - 1].end
       : 0;
 
-  if (isFetchingEntityTableData || isNavbarSwitchingSize) {
+  if (isFetchingDataTableData || isNavbarSwitchingSize) {
     return null;
   }
 
@@ -62,7 +60,7 @@ export const EntityTableBody = () => {
         return (
           <RowIdContext.Provider value={rowId} key={rowId}>
             <RowIndexContext.Provider value={virtualItem.index}>
-              <EntityTableRow
+              <DataTableRow
                 key={virtualItem.index}
                 ref={virtualItem.measureRef}
                 rowId={rowId}

front/src/modules/ui/data-table/components/DataTableCell.tsx

@@ -16,7 +16,7 @@ import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
 import { TableCell } from '../table-cell/components/TableCell';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
-export const EntityTableCell = ({ cellIndex }: { cellIndex: number }) => {
+export const DataTableCell = ({ cellIndex }: { cellIndex: number }) => {
   const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
   const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
   const currentRowId = useContext(RowIdContext);

front/src/modules/ui/data-table/components/DataTableEffect.tsx

@@ -14,10 +14,10 @@ import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition';
 import { SortDefinition } from '@/ui/view-bar/types/SortDefinition';
 import { SortOrder } from '~/generated/graphql';
 
-import { useSetEntityTableData } from '../hooks/useSetEntityTableData';
+import { useSetDataTableData } from '../hooks/useSetDataTableData';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 
-export const EntityTableEffect = ({
+export const DataTableEffect = ({
   useGetRequest,
   getRequestResultKey,
   getRequestOptimisticEffectDefinition,
@@ -45,7 +45,7 @@ export const EntityTableEffect = ({
   setActionBarEntries?: () => void;
   setContextMenuEntries?: () => void;
 }) => {
-  const setEntityTableData = useSetEntityTableData();
+  const setDataTableData = useSetDataTableData();
   const { registerOptimisticEffect } = useOptimisticEffect();
 
   useGetRequest({
@@ -53,7 +53,7 @@ export const EntityTableEffect = ({
     onCompleted: (data: any) => {
       const entities = data[getRequestResultKey] ?? [];
 
-      setEntityTableData(entities, filterDefinitionArray, sortDefinitionArray);
+      setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
 
       registerOptimisticEffect({
         variables: { orderBy, where: whereFilters },

front/src/modules/ui/data-table/components/DataTableHeader.tsx

@@ -18,7 +18,7 @@ import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTa
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 
 import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
-import { EntityTableColumnMenu } from './EntityTableColumnMenu';
+import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
 
 const COLUMN_MIN_WIDTH = 75;
@@ -65,7 +65,7 @@ const StyledAddIconButtonWrapper = styled.div`
   position: relative;
 `;
 
-const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)`
+const StyledDataTableColumnMenu = styled(DataTableHeaderPlusButton)`
   position: absolute;
   right: 0;
   top: 100%;
@@ -81,7 +81,7 @@ const StyledColumnHeadContainer = styled.div`
   z-index: 1;
 `;
 
-export const EntityTableHeader = () => {
+export const DataTableHeader = () => {
   const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
     resizeFieldOffsetState,
   );
@@ -219,7 +219,7 @@ export const EntityTableHeader = () => {
                 position="middle"
               />
               {isColumnMenuOpen && (
-                <StyledEntityTableColumnMenu
+                <StyledDataTableColumnMenu
                   onAddColumn={toggleColumnMenu}
                   onClickOutside={toggleColumnMenu}
                 />

front/src/modules/ui/data-table/components/DataTableHeaderPlusButton.tsx

@@ -14,20 +14,20 @@ import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRe
 import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-const StyledColumnMenu = styled(StyledDropdownMenu)`
+const StyledHeaderPlusButton = styled(StyledDropdownMenu)`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
-type EntityTableColumnMenuProps = {
+type DataTableHeaderPlusButtonProps = {
   onAddColumn?: () => void;
   onClickOutside?: () => void;
 } & ComponentProps<'div'>;
 
-export const EntityTableColumnMenu = ({
+export const DataTableHeaderPlusButton = ({
   onAddColumn,
   onClickOutside = () => undefined,
   ...props
-}: EntityTableColumnMenuProps) => {
+}: DataTableHeaderPlusButtonProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const hiddenTableColumns = useRecoilScopedValue(
@@ -52,7 +52,7 @@ export const EntityTableColumnMenu = ({
 
   return (
     // eslint-disable-next-line twenty/no-spread-props
-    <StyledColumnMenu {...props} ref={ref}>
+    <StyledHeaderPlusButton {...props} ref={ref}>
       <StyledDropdownMenuItemsContainer>
         {hiddenTableColumns.map((column) => (
           <MenuItem
@@ -68,6 +68,6 @@ export const EntityTableColumnMenu = ({
           />
         ))}
       </StyledDropdownMenuItemsContainer>
-    </StyledColumnMenu>
+    </StyledHeaderPlusButton>
   );
 };

front/src/modules/ui/data-table/components/DataTableRow.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+
+import { ColumnContext } from '../contexts/ColumnContext';
+import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
+import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
+
+import { CheckboxCell } from './CheckboxCell';
+import { DataTableCell } from './DataTableCell';
+
+const StyledRow = styled.tr<{ selected: boolean }>`
+  background: ${(props) =>
+    props.selected ? props.theme.accent.quaternary : 'none'};
+`;
+
+type DataTableRowProps = {
+  rowId: string;
+};
+
+export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps>(
+  ({ rowId }, ref) => {
+    const visibleTableColumns = useRecoilScopedValue(
+      visibleTableColumnsScopedSelector,
+      TableRecoilScopeContext,
+    );
+    const { currentRowSelected } = useCurrentRowSelected();
+
+    return (
+      <StyledRow
+        ref={ref}
+        data-testid={`row-id-${rowId}`}
+        selected={currentRowSelected}
+        data-selectable-id={rowId}
+      >
+        <td>
+          <CheckboxCell />
+        </td>
+        {visibleTableColumns.map((column, columnIndex) => {
+          return (
+            <ColumnContext.Provider value={column} key={column.key}>
+              <DataTableCell cellIndex={columnIndex} />
+            </ColumnContext.Provider>
+          );
+        })}
+        <td></td>
+      </StyledRow>
+    );
+  },
+);

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

@@ -1,53 +0,0 @@
-import { forwardRef } from 'react';
-import styled from '@emotion/styled';
-
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-
-import { ColumnContext } from '../contexts/ColumnContext';
-import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
-import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
-import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
-
-import { CheckboxCell } from './CheckboxCell';
-import { EntityTableCell } from './EntityTableCell';
-
-const StyledRow = styled.tr<{ selected: boolean }>`
-  background: ${(props) =>
-    props.selected ? props.theme.accent.quaternary : 'none'};
-`;
-
-type EntityTableRowProps = {
-  rowId: string;
-};
-
-export const EntityTableRow = forwardRef<
-  HTMLTableRowElement,
-  EntityTableRowProps
->(({ rowId }, ref) => {
-  const visibleTableColumns = useRecoilScopedValue(
-    visibleTableColumnsScopedSelector,
-    TableRecoilScopeContext,
-  );
-  const { currentRowSelected } = useCurrentRowSelected();
-
-  return (
-    <StyledRow
-      ref={ref}
-      data-testid={`row-id-${rowId}`}
-      selected={currentRowSelected}
-      data-selectable-id={rowId}
-    >
-      <td>
-        <CheckboxCell />
-      </td>
-      {visibleTableColumns.map((column, columnIndex) => {
-        return (
-          <ColumnContext.Provider value={column} key={column.key}>
-            <EntityTableCell cellIndex={columnIndex} />
-          </ColumnContext.Provider>
-        );
-      })}
-      <td></td>
-    </StyledRow>
-  );
-});

front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx

@@ -9,7 +9,7 @@ import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export type EntityTableHeaderOptionsProps = {
+export type DataTableHeaderOptionsProps = {
   column: ColumnDefinition<FieldMetadata>;
   isFirstColumn: boolean;
   isLastColumn: boolean;
@@ -21,7 +21,7 @@ export const TableColumnDropdownMenu = ({
   isFirstColumn,
   isLastColumn,
   primaryColumnKey,
-}: EntityTableHeaderOptionsProps) => {
+}: DataTableHeaderOptionsProps) => {
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();