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

Fixed dropdown bugs on 0.34 (#9000)

Browse Source 
- New task dropdown wasn't using the proper dropdown id
- Action menu triggered by context menu (right click) on table cell was
listening in edit mode.
This commit is contained in:
Lucas Bordeau
2024-12-10 16:01:03 +01:00
committed by GitHub
parent b0595e452a
commit 013eda4a32
11 changed files with 62 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx
View File

@ -7,7 +7,6 @@ import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'
import { CellHotkeyScopeContext } from '@/object-record/record-table/contexts/CellHotkeyScopeContext';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import {
DEFAULT_CELL_SCOPE,
useOpenRecordTableCellFromCell,
@ -44,7 +43,6 @@ export const RecordTableCellBaseContainer = ({
const { setIsFocused } = useFieldFocus();
const { openTableCell } = useOpenRecordTableCellFromCell();
const { theme } = useContext(ThemeContext);
const { recordId } = useContext(RecordTableRowContext);
const { hasSoftFocus, cellPosition } = useContext(RecordTableCellContext);
@ -71,12 +69,6 @@ export const RecordTableCellBaseContainer = ({
}
};
const { onActionMenuDropdownOpened } = useContext(RecordTableContext);
const handleActionMenuDropdown = (event: React.MouseEvent) => {
onActionMenuDropdownOpened(event, recordId);
};
const { hotkeyScope } = useContext(FieldContext);
const editHotkeyScope = { scope: hotkeyScope ?? DEFAULT_CELL_SCOPE };
@ -87,7 +79,6 @@ export const RecordTableCellBaseContainer = ({
onMouseLeave={handleContainerMouseLeave}
onMouseMove={handleContainerMouseMove}
onClick={handleContainerClick}
onContextMenu={handleActionMenuDropdown}
backgroundColorTransparentSecondary={
theme.background.transparent.secondary
}

3
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
View File

@ -26,6 +26,7 @@ export type EditableCellDisplayContainerProps = {
onClick?: () => void;
scrollRef?: Ref<HTMLDivElement>;
isHovered?: boolean;
onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
};
export const RecordTableCellDisplayContainer = ({
@ -33,6 +34,7 @@ export const RecordTableCellDisplayContainer = ({
softFocus,
onClick,
scrollRef,
onContextMenu,
}: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
<StyledOuterContainer
data-testid={
@ -41,6 +43,7 @@ export const RecordTableCellDisplayContainer = ({
onClick={onClick}
ref={scrollRef}
hasSoftFocus={softFocus}
onContextMenu={onContextMenu}
>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledOuterContainer>

19
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx
View File

@ -1,19 +1,24 @@
import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { useContext } from 'react';
import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
export const RecordTableCellDisplayMode = ({
children,
softFocus,
}: React.PropsWithChildren<{ softFocus?: boolean }>) => {
const isEmpty = useIsFieldEmpty();
const { onActionMenuDropdownOpened } = useContext(RecordTableContext);
const { recordId } = useContext(FieldContext);
if (isEmpty) {
return <></>;
}
const handleActionMenuDropdown = (event: React.MouseEvent) => {
onActionMenuDropdownOpened(event, recordId);
};
return (
<RecordTableCellDisplayContainer softFocus={softFocus}>
<RecordTableCellDisplayContainer
softFocus={softFocus}
onContextMenu={handleActionMenuDropdown}
>
{children}
</RecordTableCellDisplayContainer>
);

10
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
View File

@ -19,7 +19,9 @@ import { isDefined } from '~/utils/isDefined';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableCellDisplayContainer } from './RecordTableCellDisplayContainer';
type RecordTableCellSoftFocusModeProps = {
@ -32,6 +34,7 @@ export const RecordTableCellSoftFocusMode = ({
nonEditModeContent,
}: RecordTableCellSoftFocusModeProps) => {
const { columnIndex } = useContext(RecordTableCellContext);
const { recordId } = useContext(FieldContext);
const isFieldReadOnly = useIsFieldValueReadOnly();
@ -132,6 +135,12 @@ export const RecordTableCellSoftFocusMode = ({
*/
};
const { onActionMenuDropdownOpened } = useContext(RecordTableContext);
const handleActionMenuDropdown = (event: React.MouseEvent) => {
onActionMenuDropdownOpened(event, recordId);
};
const isFirstColumn = columnIndex === 0;
const customButtonIcon = useGetButtonIcon();
const buttonIcon = isFirstColumn
@ -152,6 +161,7 @@ export const RecordTableCellSoftFocusMode = ({
onClick={handleClick}
scrollRef={scrollRef}
softFocus
onContextMenu={handleActionMenuDropdown}
>
{dontShowContent ? (
<></>

11
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
View File

@ -6,6 +6,7 @@ import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBar
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@ -40,6 +41,9 @@ export const useTriggerActionMenuDropdown = ({
instanceId: getActionBarIdFromActionMenuId(actionMenuInstanceId),
});
const { setActiveDropdownFocusIdAndMemorizePrevious } =
useSetActiveDropdownFocusIdAndMemorizePrevious();
const triggerActionMenuDropdown = useRecoilCallback(
({ set, snapshot }) =>
(event: React.MouseEvent, recordId: string) => {
@ -61,12 +65,19 @@ export const useTriggerActionMenuDropdown = ({
set(isActionBarOpenState, false);
set(isActionMenuDropdownOpenState, true);
const actionMenuDropdownId =
getActionMenuDropdownIdFromActionMenuId(actionMenuInstanceId);
setActiveDropdownFocusIdAndMemorizePrevious(actionMenuDropdownId);
},
[
isActionBarOpenState,
isActionMenuDropdownOpenState,
isRowSelectedFamilyState,
recordIndexActionMenuDropdownPositionState,
setActiveDropdownFocusIdAndMemorizePrevious,
actionMenuInstanceId,
],
);

1
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
View File

@ -47,7 +47,6 @@ export const RecordTableColumnHeadWithDropdown = ({
clickableComponent={<RecordTableColumnHead column={column} />}
dropdownComponents={<RecordTableColumnHeadDropdownMenu column={column} />}
dropdownOffset={{ x: -1 }}
usePortal
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }}
/>