admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Removing Prisma and Grapql-nestjs-prisma resolvers (#2574)

Browse Source 
* Some cleaning

* Fix seeds

* Fix all sign in, sign up flow and apiKey optimistic rendering

* Fix
This commit is contained in:
Charles Bochet
2023-11-19 18:25:47 +01:00
committed by GitHub
parent 18dac1a2b6
commit f5e1d7825a
616 changed files with 2220 additions and 23073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/modules/ui/object/record-table/components/ColumnHead.tsx
View File

@ -1,6 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
@ -38,11 +39,14 @@ const StyledText = styled.span`
export const ColumnHead = ({ column }: ColumnHeadProps) => {
const theme = useTheme();
const { icons, isLoadingIcons } = useLazyLoadIcons();
const Icon = icons[column.iconName];
return (
<>
<StyledTitle>
<StyledIcon>
{column.Icon && <column.Icon size={theme.icon.size.md} />}
{!isLoadingIcons && <Icon size={theme.icon.size.md} />}
</StyledIcon>
<StyledText>{column.label}</StyledText>
</StyledTitle>

32
front/src/modules/ui/object/record-table/components/RecordTableBodyV1.tsx
View File

@ -1,32 +0,0 @@
import { useRecoilValue } from 'recoil';
import { RowIdContext } from '../contexts/RowIdContext';
import { RowIndexContext } from '../contexts/RowIndexContext';
import { isFetchingRecordTableDataState } from '../states/isFetchingRecordTableDataState';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { RecordTableRow } from './RecordTableRow';
export const RecordTableBodyV1 = () => {
const tableRowIds = useRecoilValue(tableRowIdsState);
const isFetchingRecordTableData = useRecoilValue(
isFetchingRecordTableDataState,
);
if (isFetchingRecordTableData) {
return <></>;
}
return (
<tbody>
{tableRowIds.map((rowId, rowIndex) => (
<RowIdContext.Provider value={rowId} key={rowId}>
<RowIndexContext.Provider value={rowIndex}>
<RecordTableRow key={rowId} rowId={rowId} />
</RowIndexContext.Provider>
</RowIdContext.Provider>
))}
</tbody>
);
};

73
front/src/modules/ui/object/record-table/components/RecordTableEffect.tsx
View File

@ -1,73 +0,0 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import defaults from 'lodash/defaults';
import { useRecoilValue } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
import {
SortOrder,
useGetCompaniesQuery,
useGetPeopleQuery,
} from '~/generated/graphql';
import { FilterDefinition } from '../../object-filter-dropdown/types/FilterDefinition';
import { SortDefinition } from '../../object-sort-dropdown/types/SortDefinition';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '../hooks/useRecordTable';
export const RecordTableEffect = ({
useGetRequest,
getRequestResultKey,
getRequestOptimisticEffectDefinition,
setActionBarEntries,
setContextMenuEntries,
}: {
useGetRequest: typeof useGetCompaniesQuery | typeof useGetPeopleQuery;
getRequestResultKey: string;
getRequestOptimisticEffectDefinition: OptimisticEffectDefinition;
filterDefinitionArray: FilterDefinition[];
sortDefinitionArray: SortDefinition[];
setActionBarEntries?: () => void;
setContextMenuEntries?: () => void;
}) => {
const { setRecordTableData } = useRecordTable();
const { tableSortsOrderBySelector, tableFiltersWhereSelector } =
useRecordTableScopedStates();
const { registerOptimisticEffect } = useOptimisticEffect({
objectNameSingular: 'companyV2',
});
const tableSortsOrderBy = useRecoilValue(tableSortsOrderBySelector);
const sortsOrderBy = defaults(tableSortsOrderBy, [
{
createdAt: SortOrder.Desc,
},
]);
const tableFiltersWhere = useRecoilValue(tableFiltersWhereSelector);
useGetRequest({
variables: { orderBy: sortsOrderBy, where: tableFiltersWhere },
onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? [];
setRecordTableData(entities);
registerOptimisticEffect({
variables: { orderBy: sortsOrderBy, where: tableFiltersWhere },
definition: getRequestOptimisticEffectDefinition,
});
},
});
const [searchParams] = useSearchParams();
useEffect(() => {
setActionBarEntries?.();
setContextMenuEntries?.();
}, [searchParams, setActionBarEntries, setContextMenuEntries]);
return <></>;
};

5
front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -2,6 +2,7 @@ import { useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
@ -18,6 +19,8 @@ export const RecordTableHeaderPlusButtonContent = () => {
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const { icons } = useLazyLoadIcons();
const { handleColumnVisibilityChange } = useTableColumns();
const handleAddColumn = useCallback(
@ -39,7 +42,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
onClick: () => handleAddColumn(column),
},
]}
LeftIcon={column.Icon}
LeftIcon={icons[column.iconName]}
text={column.label}
/>
))}

146
front/src/modules/ui/object/record-table/components/RecordTableV1.tsx
View File

@ -1,146 +0,0 @@
import { useRef } from 'react';
import styled from '@emotion/styled';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import {
useListenClickOutside,
useListenClickOutsideByClassName,
} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { useRecordTable } from '../hooks/useRecordTable';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { RecordTableBodyV1 } from './RecordTableBodyV1';
import { RecordTableHeader } from './RecordTableHeader';
const StyledTable = styled.table`
border-collapse: collapse;
border-radius: ${({ theme }) => theme.border.radius.sm};
border-spacing: 0;
margin-left: ${({ theme }) => theme.table.horizontalCellMargin};
margin-right: ${({ theme }) => theme.table.horizontalCellMargin};
table-layout: fixed;
width: calc(100% - ${({ theme }) => theme.table.horizontalCellMargin} * 2);
th {
border: 1px solid ${({ theme }) => theme.border.color.light};
border-collapse: collapse;
color: ${({ theme }) => theme.font.color.tertiary};
padding: 0;
text-align: left;
:last-child {
border-right-color: transparent;
}
:first-of-type {
border-left-color: transparent;
border-right-color: transparent;
}
:last-of-type {
width: 100%;
}
}
td {
border: 1px solid ${({ theme }) => theme.border.color.light};
border-collapse: collapse;
color: ${({ theme }) => theme.font.color.primary};
padding: 0;
text-align: left;
:last-child {
border-right-color: transparent;
}
:first-of-type {
border-left-color: transparent;
border-right-color: transparent;
}
}
`;
const StyledTableWithHeader = styled.div`
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
`;
const StyledTableContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
position: relative;
`;
type RecordTableV1Props = {
updateEntityMutation: (params: any) => void;
};
export const RecordTableV1 = ({ updateEntityMutation }: RecordTableV1Props) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const {
leaveTableFocus,
setRowSelectedState,
resetTableRowSelection,
useMapKeyboardToSoftFocus,
getIsSomeCellInEditMode,
} = useRecordTable();
useMapKeyboardToSoftFocus();
useListenClickOutside({
refs: [tableBodyRef],
callback: () => {
leaveTableFocus();
},
});
useScopedHotkeys(
'escape',
() => {
resetTableRowSelection();
},
TableHotkeyScope.Table,
);
useListenClickOutsideByClassName({
classNames: ['entity-table-cell'],
excludeClassNames: ['action-bar', 'context-menu'],
callback: () => {
resetTableRowSelection();
},
});
const handleMouseLeave = () => {
const isSomeCellInEditMode = getIsSomeCellInEditMode();
if (isSomeCellInEditMode) return;
leaveTableFocus();
};
return (
<EntityUpdateMutationContext.Provider value={updateEntityMutation}>
<StyledTableWithHeader>
<StyledTableContainer>
<div ref={tableBodyRef} onMouseLeave={handleMouseLeave}>
<StyledTable className="entity-table-cell">
<RecordTableHeader />
<RecordTableBodyV1 />
</StyledTable>
<DragSelect
dragSelectable={tableBodyRef}
onDragSelectionStart={resetTableRowSelection}
onDragSelectionChange={setRowSelectedState}
/>
</div>
</StyledTableContainer>
</StyledTableWithHeader>
</EntityUpdateMutationContext.Provider>
);
};

4
front/src/modules/ui/object/record-table/hooks/internal/useRecordTableScopedStates.ts
View File

@ -17,8 +17,6 @@ export const useRecordTableScopedStates = (args?: {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
@ -34,8 +32,6 @@ export const useRecordTableScopedStates = (args?: {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,

3
front/src/modules/ui/object/record-table/hooks/useRecordTable.ts
View File

@ -43,6 +43,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
tableFiltersState,
tableSortsState,
tableColumnsState,
onEntityCountChangeState,
} = useRecordTableScopedStates({
customRecordTableScopeId: scopeId,
});
@ -51,6 +52,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
availableTableColumnsState,
);
const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
const setTableFilters = useSetRecoilState(tableFiltersState);
const setTableSorts = useSetRecoilState(tableSortsState);
@ -299,6 +301,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
setAvailableTableColumns,
setTableFilters,
setTableSorts,
setOnEntityCountChange,
setRecordTableData,
setTableColumns,
leaveTableFocus,

8
front/src/modules/ui/object/record-table/scopes/RecordTableScope.tsx
View File

@ -10,27 +10,21 @@ type RecordTableScopeProps = {
children: ReactNode;
recordTableScopeId: string;
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange: (entityCount: number) => void;
};
export const RecordTableScope = ({
children,
recordTableScopeId,
onColumnsChange,
onEntityCountChange,
}: RecordTableScopeProps) => {
return (
<RecordTableScopeInternalContext.Provider
value={{
scopeId: recordTableScopeId,
onColumnsChange,
onEntityCountChange,
}}
>
<RecordTableScopeInitEffect
onColumnsChange={onColumnsChange}
onEntityCountChange={onEntityCountChange}
/>
<RecordTableScopeInitEffect onColumnsChange={onColumnsChange} />
{children}
</RecordTableScopeInternalContext.Provider>
);

13
front/src/modules/ui/object/record-table/scopes/RecordTableScopeInitEffect.tsx
View File

@ -12,23 +12,14 @@ type RecordTableScopeInitEffectProps = {
export const RecordTableScopeInitEffect = ({
onColumnsChange,
onEntityCountChange,
}: RecordTableScopeInitEffectProps) => {
const { onColumnsChangeState, onEntityCountChangeState } =
useRecordTableScopedStates();
const { onColumnsChangeState } = useRecordTableScopedStates();
const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
useEffect(() => {
setOnEntityCountChange(() => onEntityCountChange);
setOnColumnsChange(() => onColumnsChange);
}, [
onColumnsChange,
onEntityCountChange,
setOnColumnsChange,
setOnEntityCountChange,
]);
}, [onColumnsChange, setOnColumnsChange]);
return <></>;
};

1
front/src/modules/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts
View File

@ -6,7 +6,6 @@ import { ColumnDefinition } from '../../types/ColumnDefinition';
type RecordTableScopeInternalContextProps = ScopedStateKey & {
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange: (entityCount: number) => void;
};
export const RecordTableScopeInternalContext =

18
front/src/modules/ui/object/record-table/states/selectors/tableSortsOrderByScopedSelector.ts
View File

@ -1,18 +0,0 @@
import { selectorFamily } from 'recoil';
import { reduceSortsToOrderBy } from '@/ui/object/object-sort-dropdown/utils/helpers';
import { SortOrder } from '~/generated/graphql';
import { tableSortsScopedState } from '../tableSortsScopedState';
export const tableSortsOrderByScopedSelector = selectorFamily({
key: 'tableSortsOrderByScopedSelector',
get:
(scopeId: string) =>
({ get }) => {
const orderBy = reduceSortsToOrderBy(
get(tableSortsScopedState({ scopeId })),
);
return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
},
});

15
front/src/modules/ui/object/record-table/states/selectors/tablefiltersWhereScopedSelector.ts
View File

@ -1,15 +0,0 @@
import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../../object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { tableFiltersScopedState } from '../tableFiltersScopedState';
export const tableFiltersWhereScopedSelector = selectorFamily({
key: 'tablefiltersWhereScopedSelector',
get:
(scopeId: string) =>
({ get }) => ({
AND: get(tableFiltersScopedState({ scopeId })).map(
turnFilterIntoWhereClause,
),
}),
});

10
front/src/modules/ui/object/record-table/utils/getRecordTableScopedStates.ts
View File

@ -4,8 +4,6 @@ import { availableTableColumnsScopedState } from '../states/availableTableColumn
import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { tableFiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { tableFiltersScopedState } from '../states/tableFiltersScopedState';
@ -33,12 +31,6 @@ export const getRecordTableScopedStates = ({
recordTableScopeId,
);
const tableSortsOrderBySelector =
tableSortsOrderByScopedSelector(recordTableScopeId);
const tableFiltersWhereSelector =
tableFiltersWhereScopedSelector(recordTableScopeId);
const tableColumnsState = getScopedState(
tableColumnsScopedState,
recordTableScopeId,
@ -67,8 +59,6 @@ export const getRecordTableScopedStates = ({
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,