Type fixes and website fix (#13825)

Various fixes
This commit is contained in:
Félix Malfait
2025-08-11 17:36:53 +02:00
committed by GitHub
parent 68ce13a1be
commit 32cdb66802
10 changed files with 133 additions and 124 deletions
@@ -2,6 +2,7 @@ import { RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID } from '@/object-record/reco
import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { type ReactNode } from 'react';
import { createPortal } from 'react-dom';
type RecordGroupReorderConfirmationModalProps = {
@@ -10,19 +11,23 @@ type RecordGroupReorderConfirmationModalProps = {
export const RecordGroupReorderConfirmationModal = ({
onConfirmClick,
}: RecordGroupReorderConfirmationModalProps) => {
}: RecordGroupReorderConfirmationModalProps): ReactNode => {
const recordGroupSort = useRecoilComponentValue(
recordIndexRecordGroupSortComponentState,
);
return createPortal(
<ConfirmationModal
modalId={RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID}
title="Group sorting"
subtitle={`Would you like to remove ${recordGroupSort} group sorting?`}
onConfirmClick={onConfirmClick}
confirmButtonText="Remove"
/>,
document.body,
return (
<>
{createPortal(
<ConfirmationModal
modalId={RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID}
title="Group sorting"
subtitle={`Would you like to remove ${recordGroupSort} group sorting?`}
onConfirmClick={onConfirmClick}
confirmButtonText="Remove"
/>,
document.body,
)}
</>
);
};
@@ -92,17 +92,19 @@ export const RecordInlineCellEditMode = ({
ref={refs.setReference}
data-testid="inline-cell-edit-mode-container"
>
{createPortal(
<OverlayContainer
ref={refs.setFloating}
style={floatingStyles}
borderRadius="sm"
hasDangerBorder={isFieldInError}
>
{children}
</OverlayContainer>,
document.body,
)}
<>
{createPortal(
<OverlayContainer
ref={refs.setFloating}
style={floatingStyles}
borderRadius="sm"
hasDangerBorder={isFieldInError}
>
{children}
</OverlayContainer>,
document.body,
)}
</>
</StyledInlineCellEditModeContainer>
);
};
@@ -8,7 +8,7 @@ import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
import { type TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import ReactDOM from 'react-dom';
import { createPortal } from 'react-dom';
import { isDefined } from 'twenty-shared/utils';
export const RecordTableCellPortalWrapper = ({
@@ -43,32 +43,36 @@ export const RecordTableCellPortalWrapper = ({
return null;
}
return ReactDOM.createPortal(
<RecordTableRowContextProvider
value={{
recordId,
rowIndex: position.row,
isSelected: false,
inView: true,
pathToShowPage:
getBasePathToShowPage({
return (
<>
{createPortal(
<RecordTableRowContextProvider
value={{
recordId,
rowIndex: position.row,
isSelected: false,
inView: true,
pathToShowPage:
getBasePathToShowPage({
objectNameSingular: objectMetadataItem.nameSingular,
}) + recordId,
objectNameSingular: objectMetadataItem.nameSingular,
}) + recordId,
objectNameSingular: objectMetadataItem.nameSingular,
isRecordReadOnly,
}}
>
<RecordTableCellContext.Provider
value={{
columnDefinition: visibleTableColumns[position.column],
cellPosition: position,
}}
>
<RecordTableCellFieldContextWrapper>
{children}
</RecordTableCellFieldContextWrapper>
</RecordTableCellContext.Provider>
</RecordTableRowContextProvider>,
anchorElement,
isRecordReadOnly,
}}
>
<RecordTableCellContext.Provider
value={{
columnDefinition: visibleTableColumns[position.column],
cellPosition: position,
}}
>
<RecordTableCellFieldContextWrapper>
{children}
</RecordTableCellFieldContextWrapper>
</RecordTableCellContext.Provider>
</RecordTableRowContextProvider>,
anchorElement,
)}
</>
);
};