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

refactor!: rename Command Menu page/navigation layer to Side Panel (#18393)

Browse Source
This commit is contained in:
nitin
2026-03-05 20:16:31 +05:30
committed by GitHub
parent 38ad0820c0
commit 5853891b02
675 changed files with 4894 additions and 4964 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx
+1 -1
View File
@@ -8,4 +8,4 @@ const StyledColumn = styled.div`
gap: ${themeCssVariables.spacing[1]};
`;
export const AdvancedFilterCommandMenuColumn = StyledColumn;
export const AdvancedFilterSidePanelColumn = StyledColumn;
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelContainer.tsx
+9 -9
View File
@@ -1,7 +1,7 @@
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { AdvancedFilterCommandMenuCreateRootFilterButton } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuCreateRootFilterButton';
import { AdvancedFilterCommandMenuRecordFilterColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn';
import { AdvancedFilterCommandMenuRecordFilterGroupColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupColumn';
import { AdvancedFilterSidePanelCreateRootFilterButton } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelCreateRootFilterButton';
import { AdvancedFilterSidePanelRecordFilterColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn';
import { AdvancedFilterSidePanelRecordFilterGroupColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn';
import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
@@ -27,7 +27,7 @@ const StyledChildContainer = styled.div`
width: 100%;
`;
export type AdvancedFilterCommandMenuContainerProps = {
export type AdvancedFilterSidePanelContainerProps = {
readonly?: boolean;
onUpdate?: () => void;
objectMetadataItem: ObjectMetadataItem;
@@ -35,13 +35,13 @@ export type AdvancedFilterCommandMenuContainerProps = {
isWorkflowFindRecords?: boolean;
};
export const AdvancedFilterCommandMenuContainer = ({
export const AdvancedFilterSidePanelContainer = ({
readonly,
onUpdate,
objectMetadataItem,
VariablePicker,
isWorkflowFindRecords,
}: AdvancedFilterCommandMenuContainerProps) => {
}: AdvancedFilterSidePanelContainerProps) => {
const rootRecordFilterGroup = useAtomComponentSelectorValue(
rootLevelRecordFilterGroupComponentSelector,
);
@@ -69,14 +69,14 @@ export const AdvancedFilterCommandMenuContainer = ({
isRecordFilterGroupChildARecordFilterGroup(
recordFilterGroupChild,
) ? (
<AdvancedFilterCommandMenuRecordFilterGroupColumn
<AdvancedFilterSidePanelRecordFilterGroupColumn
key={recordFilterGroupChild.id}
parentRecordFilterGroup={rootRecordFilterGroup}
recordFilterGroup={recordFilterGroupChild}
recordFilterGroupIndex={recordFilterGroupChildIndex}
/>
) : (
<AdvancedFilterCommandMenuRecordFilterColumn
<AdvancedFilterSidePanelRecordFilterColumn
key={recordFilterGroupChild.id}
recordFilterGroup={rootRecordFilterGroup}
recordFilter={recordFilterGroupChild}
@@ -92,7 +92,7 @@ export const AdvancedFilterCommandMenuContainer = ({
)}
</StyledContainer>
) : (
<AdvancedFilterCommandMenuCreateRootFilterButton
<AdvancedFilterSidePanelCreateRootFilterButton
objectMetadataItem={objectMetadataItem}
/>
)}
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuCreateRootFilterButton.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelCreateRootFilterButton.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ import { IconFilter } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { v4 } from 'uuid';
export const AdvancedFilterCommandMenuCreateRootFilterButton = ({
export const AdvancedFilterSidePanelCreateRootFilterButton = ({
objectMetadataItem,
}: {
objectMetadataItem: ObjectMetadataItem;
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuFieldSelectDisabled.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelFieldSelectDisabled.tsx
+3 -3
View File
@@ -1,13 +1,13 @@
import { useRecordFilterField } from '@/object-record/advanced-filter/hooks/useRecordFilterField';
import { SelectControl } from '@/ui/input/components/SelectControl';
type AdvancedFilterCommandMenuFieldSelectDisabledProps = {
type AdvancedFilterSidePanelFieldSelectDisabledProps = {
recordFilterId: string;
};
export const AdvancedFilterCommandMenuFieldSelectDisabled = ({
export const AdvancedFilterSidePanelFieldSelectDisabled = ({
recordFilterId,
}: AdvancedFilterCommandMenuFieldSelectDisabledProps) => {
}: AdvancedFilterSidePanelFieldSelectDisabledProps) => {
const { label, icon } = useRecordFilterField(recordFilterId);
return (
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx
+3 -3
View File
@@ -26,15 +26,15 @@ const StyledContainer = styled.div`
color: ${themeCssVariables.font.color.tertiary};
`;
type AdvancedFilterCommandMenuLogicalOperatorCellProps = {
type AdvancedFilterSidePanelLogicalOperatorCellProps = {
index: number;
recordFilterGroup: RecordFilterGroup;
};
export const AdvancedFilterCommandMenuLogicalOperatorCell = ({
export const AdvancedFilterSidePanelLogicalOperatorCell = ({
index,
recordFilterGroup,
}: AdvancedFilterCommandMenuLogicalOperatorCellProps) => {
}: AdvancedFilterSidePanelLogicalOperatorCellProps) => {
const { readonly } = useContext(AdvancedFilterContext);
return (
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx
+14 -14
View File
@@ -1,9 +1,9 @@
import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn';
import { AdvancedFilterCommandMenuFieldSelectDisabled } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuFieldSelectDisabled';
import { AdvancedFilterCommandMenuLogicalOperatorCell } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell';
import { AdvancedFilterSidePanelColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn';
import { AdvancedFilterSidePanelFieldSelectDisabled } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelFieldSelectDisabled';
import { AdvancedFilterSidePanelLogicalOperatorCell } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell';
import { AdvancedFilterCommandMenuRecordFilterOperandSelect } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect';
import { AdvancedFilterCommandMenuValueFormInput } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormInput';
import { AdvancedFilterSidePanelRecordFilterOperandSelect } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterOperandSelect';
import { AdvancedFilterSidePanelValueFormInput } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelValueFormInput';
import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advanced-filter/components/AdvancedFilterFieldSelectDropdownButton';
import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
@@ -22,17 +22,17 @@ const StyledContainer = styled.div`
gap: ${themeCssVariables.spacing[1]};
`;
type AdvancedFilterCommandMenuRecordFilterColumnProps = {
type AdvancedFilterSidePanelRecordFilterColumnProps = {
recordFilterGroup: RecordFilterGroup;
recordFilter: RecordFilter;
recordFilterIndex: number;
};
export const AdvancedFilterCommandMenuRecordFilterColumn = ({
export const AdvancedFilterSidePanelRecordFilterColumn = ({
recordFilterGroup,
recordFilter,
recordFilterIndex,
}: AdvancedFilterCommandMenuRecordFilterColumnProps) => {
}: AdvancedFilterSidePanelRecordFilterColumnProps) => {
const { readonly } = useContext(AdvancedFilterContext);
return (
@@ -43,9 +43,9 @@ export const AdvancedFilterCommandMenuRecordFilterColumn = ({
),
}}
>
<AdvancedFilterCommandMenuColumn>
<AdvancedFilterSidePanelColumn>
<StyledContainer>
<AdvancedFilterCommandMenuLogicalOperatorCell
<AdvancedFilterSidePanelLogicalOperatorCell
index={recordFilterIndex}
recordFilterGroup={recordFilterGroup}
/>
@@ -56,7 +56,7 @@ export const AdvancedFilterCommandMenuRecordFilterColumn = ({
)}
</StyledContainer>
{readonly ? (
<AdvancedFilterCommandMenuFieldSelectDisabled
<AdvancedFilterSidePanelFieldSelectDisabled
recordFilterId={recordFilter.id}
/>
) : (
@@ -64,13 +64,13 @@ export const AdvancedFilterCommandMenuRecordFilterColumn = ({
recordFilterId={recordFilter.id}
/>
)}
<AdvancedFilterCommandMenuRecordFilterOperandSelect
<AdvancedFilterSidePanelRecordFilterOperandSelect
recordFilterId={recordFilter.id}
/>
<AdvancedFilterCommandMenuValueFormInput
<AdvancedFilterSidePanelValueFormInput
recordFilterId={recordFilter.id}
/>
</AdvancedFilterCommandMenuColumn>
</AdvancedFilterSidePanelColumn>
</ObjectFilterDropdownComponentInstanceContext.Provider>
);
};
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupChildren.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupChildren.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
import { AdvancedFilterCommandMenuRecordFilterColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterColumn';
import { AdvancedFilterSidePanelRecordFilterColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn';
import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
@@ -23,13 +23,13 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
padding: ${themeCssVariables.spacing[2]};
`;
type AdvancedFilterCommandMenuRecordFilterGroupChildrenProps = {
type AdvancedFilterSidePanelRecordFilterGroupChildrenProps = {
recordFilterGroupId: string;
};
export const AdvancedFilterCommandMenuRecordFilterGroupChildren = ({
export const AdvancedFilterSidePanelRecordFilterGroupChildren = ({
recordFilterGroupId,
}: AdvancedFilterCommandMenuRecordFilterGroupChildrenProps) => {
}: AdvancedFilterSidePanelRecordFilterGroupChildrenProps) => {
const { readonly } = useContext(AdvancedFilterContext);
const { currentRecordFilterGroup, childRecordFilters } =
useChildRecordFiltersAndRecordFilterGroups({
@@ -47,7 +47,7 @@ export const AdvancedFilterCommandMenuRecordFilterGroupChildren = ({
return (
<StyledContainer isGrayBackground={hasParentRecordFilterGroup}>
{childRecordFilters.map((childRecordFilter, childRecordFilterIndex) => (
<AdvancedFilterCommandMenuRecordFilterColumn
<AdvancedFilterSidePanelRecordFilterColumn
key={childRecordFilter.id}
recordFilter={childRecordFilter}
recordFilterIndex={childRecordFilterIndex}
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupColumn.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn';
import { AdvancedFilterCommandMenuLogicalOperatorCell } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuLogicalOperatorCell';
import { AdvancedFilterCommandMenuRecordFilterGroupChildren } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterGroupChildren';
import { AdvancedFilterSidePanelColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn';
import { AdvancedFilterSidePanelLogicalOperatorCell } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell';
import { AdvancedFilterSidePanelRecordFilterGroupChildren } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupChildren';
import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { type RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
@@ -16,7 +16,7 @@ const StyledContainer = styled.div`
gap: ${themeCssVariables.spacing[1]};
`;
export const AdvancedFilterCommandMenuRecordFilterGroupColumn = ({
export const AdvancedFilterSidePanelRecordFilterGroupColumn = ({
parentRecordFilterGroup,
recordFilterGroup,
recordFilterGroupIndex,
@@ -28,9 +28,9 @@ export const AdvancedFilterCommandMenuRecordFilterGroupColumn = ({
const { readonly } = useContext(AdvancedFilterContext);
return (
<AdvancedFilterCommandMenuColumn>
<AdvancedFilterSidePanelColumn>
<StyledContainer>
<AdvancedFilterCommandMenuLogicalOperatorCell
<AdvancedFilterSidePanelLogicalOperatorCell
index={recordFilterGroupIndex}
recordFilterGroup={parentRecordFilterGroup}
/>
@@ -40,9 +40,9 @@ export const AdvancedFilterCommandMenuRecordFilterGroupColumn = ({
/>
)}
</StyledContainer>
<AdvancedFilterCommandMenuRecordFilterGroupChildren
<AdvancedFilterSidePanelRecordFilterGroupChildren
recordFilterGroupId={recordFilterGroup.id}
/>
</AdvancedFilterCommandMenuColumn>
</AdvancedFilterSidePanelColumn>
);
};
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuRecordFilterOperandSelect.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterOperandSelect.tsx
+3 -3
View File
@@ -9,13 +9,13 @@ import { t } from '@lingui/core/macro';
import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
type AdvancedFilterCommandMenuRecordFilterOperandSelectProps = {
type AdvancedFilterSidePanelRecordFilterOperandSelectProps = {
recordFilterId: string;
};
export const AdvancedFilterCommandMenuRecordFilterOperandSelect = ({
export const AdvancedFilterSidePanelRecordFilterOperandSelect = ({
recordFilterId,
}: AdvancedFilterCommandMenuRecordFilterOperandSelectProps) => {
}: AdvancedFilterSidePanelRecordFilterOperandSelectProps) => {
const { readonly, isWorkflowFindRecords } = useContext(AdvancedFilterContext);
const currentRecordFilters = useAtomComponentStateValue(
currentRecordFiltersComponentState,
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormCompositeFieldInput.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelValueFormCompositeFieldInput.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const ACTOR_SOURCE_OPTIONS: SelectOption[] = Object.values(
value: source,
}));
export const AdvancedFilterCommandMenuValueFormCompositeFieldInput = ({
export const AdvancedFilterSidePanelValueFormCompositeFieldInput = ({
recordFilter,
onChange,
onClear,
packages/twenty-front/src/modules/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormInput.tsx → packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelValueFormInput.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { formatFieldMetadataItemAsFieldDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
import { AdvancedFilterCommandMenuValueFormCompositeFieldInput } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuValueFormCompositeFieldInput';
import { AdvancedFilterSidePanelValueFormCompositeFieldInput } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelValueFormCompositeFieldInput';
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
import { shouldShowFilterTextInput } from '@/object-record/advanced-filter/utils/shouldShowFilterTextInput';
@@ -31,7 +31,7 @@ import { isDefined, type RelativeDateFilter } from 'twenty-shared/utils';
import { parseBooleanFromStringValue } from 'twenty-shared/workflow';
import { type JsonValue } from 'type-fest';
export const AdvancedFilterCommandMenuValueFormInput = ({
export const AdvancedFilterSidePanelValueFormInput = ({
recordFilterId,
}: {
recordFilterId: string;
@@ -152,7 +152,7 @@ export const AdvancedFilterCommandMenuValueFormInput = ({
if (isDefined(subFieldNameUsedInDropdown)) {
return (
<AdvancedFilterCommandMenuValueFormCompositeFieldInput
<AdvancedFilterSidePanelValueFormCompositeFieldInput
recordFilter={recordFilter}
onChange={handleChange}
onClear={handleClear}
packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithCommandMenu.tsx → packages/twenty-front/src/modules/object-record/components/MainContainerLayoutWithSidePanel.tsx
+5 -5
View File
@@ -1,5 +1,5 @@
import { CommandMenuForMobile } from '@/command-menu/components/CommandMenuForMobile';
import { CommandMenuSidePanelForDesktop } from '@/command-menu/components/CommandMenuSidePanelForDesktop';
import { SidePanelForDesktop } from '@/side-panel/components/SidePanelForDesktop';
import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
import { PageBody } from '@/ui/layout/page/components/PageBody';
import { styled } from '@linaria/react';
@@ -7,7 +7,7 @@ import { type ReactNode } from 'react';
import { useIsMobile } from 'twenty-ui/utilities';
import { themeCssVariables } from 'twenty-ui/theme-constants';
type MainContainerLayoutWithCommandMenuProps = {
type MainContainerLayoutWithSidePanelProps = {
children: ReactNode;
};
@@ -41,9 +41,9 @@ const StyledPageBodyForMobile = styled(PageBody)`
padding-right: ${themeCssVariables.spacing['1.5']};
`;
export const MainContainerLayoutWithCommandMenu = ({
export const MainContainerLayoutWithSidePanel = ({
children,
}: MainContainerLayoutWithCommandMenuProps) => {
}: MainContainerLayoutWithSidePanelProps) => {
const isMobile = useIsMobile();
useCommandMenuHotKeys();
@@ -60,7 +60,7 @@ export const MainContainerLayoutWithCommandMenu = ({
return (
<StyledMainContainerLayoutForDesktop>
<StyledPageBodyForDesktop>{children}</StyledPageBodyForDesktop>
<CommandMenuSidePanelForDesktop />
<SidePanelForDesktop />
</StyledMainContainerLayoutForDesktop>
);
};
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
@@ -55,7 +55,7 @@ export const RecordChip = ({
record,
});
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const recordIndexOpenRecordIn = useAtomStateValue(
recordIndexOpenRecordInState,
@@ -70,7 +70,7 @@ export const RecordChip = ({
? onClick
: isSidePanelViewOpenRecordInType
? (_event: MouseEvent<HTMLElement>) => {
openRecordInCommandMenu({
openRecordInSidePanel({
recordId: record.id,
objectNameSingular,
});
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardHotkeys.ts
+6 -6
View File
@@ -1,4 +1,4 @@
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
import { useFocusedRecordBoardCard } from '@/object-record/record-board/hooks/useFocusedRecordBoardCard';
@@ -20,7 +20,7 @@ export const useRecordBoardCardHotkeys = (focusId: string) => {
RecordBoardCardContext,
);
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const { activateBoardCard } = useActiveRecordBoardCard();
const { setRecordAsSelected } = useRecordBoardSelection();
@@ -43,8 +43,8 @@ export const useRecordBoardCardHotkeys = (focusId: string) => {
setRecordAsSelected(recordId, !isRecordBoardCardSelected);
};
const handleOpenRecordInCommandMenu = () => {
openRecordInCommandMenu({
const handleOpenRecordInSidePanel = () => {
openRecordInSidePanel({
recordId,
objectNameSingular: objectMetadataItem.nameSingular,
isNewRecord: false,
@@ -77,9 +77,9 @@ export const useRecordBoardCardHotkeys = (focusId: string) => {
`${Key.Control}+${Key.Enter}`,
`${Key.Meta}+${Key.Enter}`,
],
callback: handleOpenRecordInCommandMenu,
callback: handleOpenRecordInSidePanel,
focusId,
dependencies: [handleOpenRecordInCommandMenu],
dependencies: [handleOpenRecordInSidePanel],
});
useHotkeysOnFocusedElement({
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardDeactivateBoardCardEffect.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
import { useListenToSidePanelClosing } from '@/ui/layout/side-panel/hooks/useListenToSidePanelClosing';
import { useContext } from 'react';
export const RecordBoardDeactivateBoardCardEffect = () => {
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/duplicate/components/RecordDetailDuplicatesSection.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { useOpenMergeRecordsPageInCommandMenu } from '@/command-menu/hooks/useOpenMergeRecordsPageInCommandMenu';
import { useOpenMergeRecordsPageInSidePanel } from '@/side-panel/hooks/useOpenMergeRecordsPageInSidePanel';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { RecordChip } from '@/object-record/components/RecordChip';
import { useFindDuplicateRecords } from '@/object-record/hooks/useFindDuplicateRecords';
@@ -34,8 +34,8 @@ export const RecordDetailDuplicatesSection = ({
objectRecordId,
];
const { openMergeRecordsPageInCommandMenu } =
useOpenMergeRecordsPageInCommandMenu({
const { openMergeRecordsPageInSidePanel } =
useOpenMergeRecordsPageInSidePanel({
objectNameSingular,
objectRecordIds: duplicateRecordIds,
});
@@ -51,7 +51,7 @@ export const RecordDetailDuplicatesSection = ({
className="displayOnHover"
Icon={IconArrowMerge}
accent="tertiary"
onClick={openMergeRecordsPageInCommandMenu}
onClick={openMergeRecordsPageInSidePanel}
/>
}
>
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/duplicate/components/__stories__/RecordDetailDuplicatesSection.stories.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const meta: Meta<typeof RecordDetailDuplicatesSection> = {
targetObjectNameSingular: 'company',
},
layoutType: PageLayoutType.RECORD_PAGE,
isInRightDrawer: false,
isInSidePanel: false,
}}
>
<Story />
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/relation/components/RecordDetailRelationSectionDropdownToMany.tsx
+11 -12
View File
@@ -5,7 +5,7 @@ import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadat
import { getFieldMetadataItemById } from '@/object-metadata/utils/getFieldMetadataItemById';
import { useRecordFieldsScopeContextOrThrow } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { useAddNewRecordAndOpenSidePanel } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenSidePanel';
import { useUpdateRelationOneToManyFieldInput } from '@/object-record/record-field/ui/meta-types/input/hooks/useUpdateRelationOneToManyFieldInput';
import { type FieldRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
@@ -118,15 +118,14 @@ export const RecordDetailRelationSectionDropdownToMany = ({
const { updateRelation } = useUpdateRelationOneToManyFieldInput();
const { createNewRecordAndOpenRightDrawer } =
useAddNewRecordAndOpenRightDrawer({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const { createNewRecordAndOpenSidePanel } = useAddNewRecordAndOpenSidePanel({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const handleOpenRelationPickerDropdown = () => {
setMultipleRecordPickerSearchableObjectMetadataItems([
@@ -160,7 +159,7 @@ export const RecordDetailRelationSectionDropdownToMany = ({
const handleCreateNew = (searchString?: string) => {
closeDropdown(dropdownId);
createNewRecordAndOpenRightDrawer?.(searchString);
createNewRecordAndOpenSidePanel?.(searchString);
};
return (
@@ -183,7 +182,7 @@ export const RecordDetailRelationSectionDropdownToMany = ({
focusId={dropdownId}
componentInstanceId={dropdownId}
onCreate={
isDefined(createNewRecordAndOpenRightDrawer)
isDefined(createNewRecordAndOpenSidePanel)
? handleCreateNew
: undefined
}
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/relation/components/RecordDetailRelationSectionDropdownToOne.tsx
+10 -11
View File
@@ -5,7 +5,7 @@ import { CoreObjectNameSingular, FieldMetadataType } from 'twenty-shared/types';
import { useRecordFieldsScopeContextOrThrow } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
import { FieldInputEventContext } from '@/object-record/record-field/ui/contexts/FieldInputEventContext';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { useAddNewRecordAndOpenSidePanel } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenSidePanel';
import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker';
import { useSingleRecordPickerOpen } from '@/object-record/record-picker/single-record-picker/hooks/useSingleRecordPickerOpen';
import { singleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSearchFilterComponentState';
@@ -128,15 +128,14 @@ export const RecordDetailRelationSectionDropdownToOne = ({
onSubmit?.({ newValue: { id: selectedMorphItem.recordId } });
};
const { createNewRecordAndOpenRightDrawer } =
useAddNewRecordAndOpenRightDrawer({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const { createNewRecordAndOpenSidePanel } = useAddNewRecordAndOpenSidePanel({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const { openSingleRecordPicker } = useSingleRecordPickerOpen();
@@ -152,7 +151,7 @@ export const RecordDetailRelationSectionDropdownToOne = ({
const handleCreateNew = (searchString?: string) => {
closeDropdown(dropdownId);
createNewRecordAndOpenRightDrawer?.(searchString);
createNewRecordAndOpenSidePanel?.(searchString);
};
const shouldAllowCreateNew =
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/relation/components/__stories__/RecordDetailRelationSection.stories.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ import { RecordDetailRelationSection } from '@/object-record/record-field-list/r
import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
import { ComponentDecorator } from 'twenty-ui/testing';
import { PageLayoutType } from '~/generated-metadata/graphql';
import { RightDrawerDecorator } from '~/testing/decorators/RightDrawerDecorator';
import { SidePanelDecorator } from '~/testing/decorators/SidePanelDecorator';
import { mockedCompanyRecords } from '~/testing/mock-data/generated/data/companies/mock-companies-data';
import { getRecordFromRecordNode } from '@/object-record/cache/utils/getRecordFromRecordNode';
import { mockedPersonRecords } from '~/testing/mock-data/generated/data/people/mock-people-data';
@@ -40,7 +40,7 @@ const meta: Meta<typeof RecordDetailRelationSection> = {
targetObjectNameSingular: 'company',
},
layoutType: PageLayoutType.RECORD_PAGE,
isInRightDrawer: false,
isInSidePanel: false,
}}
>
<ContextStoreComponentInstanceContext.Provider
@@ -68,7 +68,7 @@ const meta: Meta<typeof RecordDetailRelationSection> = {
</ContextStoreComponentInstanceContext.Provider>
</LayoutRenderingProvider>
),
RightDrawerDecorator,
SidePanelDecorator,
ComponentDecorator,
ObjectMetadataItemsDecorator,
SnackBarDecorator,
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RelationManyToOneFieldInput.tsx
+12 -15
View File
@@ -4,7 +4,7 @@ import { useRelationField } from '@/object-record/record-field/ui/meta-types/hoo
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { getFieldMetadataItemById } from '@/object-metadata/utils/getFieldMetadataItemById';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { useAddNewRecordAndOpenSidePanel } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenSidePanel';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/record-field/ui/states/recordFieldInputLayoutDirectionComponentState';
import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/ui/states/recordFieldInputLayoutDirectionLoadingComponentState';
@@ -66,16 +66,15 @@ export const RelationManyToOneFieldInput = () => {
);
}
const { createNewRecordAndOpenRightDrawer } =
useAddNewRecordAndOpenRightDrawer({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular:
fieldDefinition.metadata.relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const { createNewRecordAndOpenSidePanel } = useAddNewRecordAndOpenSidePanel({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular:
fieldDefinition.metadata.relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const recordFieldInputLayoutDirection = useAtomComponentStateValue(
recordFieldInputLayoutDirectionComponentState,
@@ -92,7 +91,7 @@ export const RelationManyToOneFieldInput = () => {
);
const handleCreateNew = async (searchInput?: string) => {
const newRecordId = await createNewRecordAndOpenRightDrawer?.(searchInput);
const newRecordId = await createNewRecordAndOpenSidePanel?.(searchInput);
if (isDefined(newRecordId)) {
setSingleRecordPickerSelectedId(newRecordId);
@@ -112,9 +111,7 @@ export const RelationManyToOneFieldInput = () => {
emptyLabel={t`No ${fieldLabel}`}
onCancel={onCancel}
onCreate={
isDefined(createNewRecordAndOpenRightDrawer)
? handleCreateNew
: undefined
isDefined(createNewRecordAndOpenSidePanel) ? handleCreateNew : undefined
}
onMorphItemSelected={handleMorphItemSelected}
objectNameSingulars={[
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RelationOneToManyFieldInput.tsx
+12 -14
View File
@@ -16,7 +16,7 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
import { FieldInputEventContext } from '@/object-record/record-field/ui/contexts/FieldInputEventContext';
import { useUpdateJunctionRelationFromCell } from '@/object-record/record-field/ui/hooks/useUpdateJunctionRelationFromCell';
import { useRelationField } from '@/object-record/record-field/ui/meta-types/hooks/useRelationField';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
import { useAddNewRecordAndOpenSidePanel } from '@/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenSidePanel';
import { useUpdateRelationOneToManyFieldInput } from '@/object-record/record-field/ui/meta-types/input/hooks/useUpdateRelationOneToManyFieldInput';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/record-field/ui/states/recordFieldInputLayoutDirectionComponentState';
@@ -136,16 +136,15 @@ export const RelationOneToManyFieldInput = () => {
);
}
const { createNewRecordAndOpenRightDrawer } =
useAddNewRecordAndOpenRightDrawer({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular:
relationFieldDefinition.metadata.relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const { createNewRecordAndOpenSidePanel } = useAddNewRecordAndOpenSidePanel({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular:
relationFieldDefinition.metadata.relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
});
const { createOneRecord: createTargetRecord } = useCreateOneRecord({
objectNameSingular:
@@ -267,8 +266,7 @@ export const RelationOneToManyFieldInput = () => {
return;
}
const newRecordId =
await createNewRecordAndOpenRightDrawer?.(searchInput);
const newRecordId = await createNewRecordAndOpenSidePanel?.(searchInput);
if (isDefined(newRecordId)) {
updatePickerState(newRecordId, relationObjectMetadataItem.id, [
@@ -277,7 +275,7 @@ export const RelationOneToManyFieldInput = () => {
}
},
[
createNewRecordAndOpenRightDrawer,
createNewRecordAndOpenSidePanel,
createTargetRecord,
createJunctionRecord,
fieldName,
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { useRichTextCommandMenu } from '@/command-menu/hooks/useRichTextCommandMenu';
import { useOpenRichTextInSidePanel } from '@/side-panel/hooks/useOpenRichTextInSidePanel';
import { type CoreObjectNameSingular } from 'twenty-shared/types';
import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
@@ -66,7 +66,7 @@ export const RichTextFieldInput = () => {
| CoreObjectNameSingular.Task,
};
const { editRichText } = useRichTextCommandMenu();
const { openRichTextInSidePanel } = useOpenRichTextInSidePanel();
const containerRef = useRef<HTMLDivElement>(null);
const instanceId = useAvailableComponentInstanceIdOrThrow(
RecordFieldComponentInstanceContext,
@@ -104,7 +104,7 @@ export const RichTextFieldInput = () => {
size="small"
onClick={() => {
onEscape?.({ skipPersist: true });
editRichText(
openRichTextInSidePanel(
targetableObject.id,
targetableObject.targetObjectNameSingular,
);
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer.ts → packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/hooks/useAddNewRecordAndOpenSidePanel.ts
+10 -10
View File
@@ -1,22 +1,22 @@
import { v4 } from 'uuid';
import { SEARCH_QUERY } from '@/command-menu/graphql/queries/search';
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
import { viewableRecordIdState } from '@/object-record/record-side-panel/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-side-panel/states/viewableRecordNameSingularState';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { buildRecordLabelPayload } from '@/object-record/utils/buildRecordLabelPayload';
import { getOperationName } from '@apollo/client/utilities';
import { computeMorphRelationFieldName, isDefined } from 'twenty-shared/utils';
import { FieldMetadataType, RelationType } from '~/generated-metadata/graphql';
type useAddNewRecordAndOpenRightDrawerProps = {
type useAddNewRecordAndOpenSidePanelProps = {
fieldMetadataItem: FieldMetadataItem;
objectMetadataItem: ObjectMetadataItem;
relationObjectMetadataNameSingular: string;
@@ -25,14 +25,14 @@ type useAddNewRecordAndOpenRightDrawerProps = {
recordId: string;
};
export const useAddNewRecordAndOpenRightDrawer = ({
export const useAddNewRecordAndOpenSidePanel = ({
fieldMetadataItem,
objectMetadataItem,
relationObjectMetadataNameSingular,
relationObjectMetadataItem,
relationFieldMetadataItem,
recordId,
}: useAddNewRecordAndOpenRightDrawerProps) => {
}: useAddNewRecordAndOpenSidePanelProps) => {
const setViewableRecordId = useSetAtomState(viewableRecordIdState);
const setViewableRecordNameSingular = useSetAtomState(
viewableRecordNameSingularState,
@@ -44,7 +44,7 @@ export const useAddNewRecordAndOpenRightDrawer = ({
const { updateOneRecord } = useUpdateOneRecord();
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const apolloCoreClient = useApolloCoreClient();
@@ -53,14 +53,14 @@ export const useAddNewRecordAndOpenRightDrawer = ({
!isDefined(objectMetadataItem.nameSingular)
) {
return {
createNewRecordAndOpenRightDrawer: undefined,
createNewRecordAndOpenSidePanel: undefined,
};
}
const relationFieldMetadataItemRelationType =
relationFieldMetadataItem.settings?.relationType;
return {
createNewRecordAndOpenRightDrawer: async (searchInput?: string) => {
createNewRecordAndOpenSidePanel: async (searchInput?: string) => {
const newRecordId = v4();
const createRecordPayload = buildRecordLabelPayload({
@@ -104,7 +104,7 @@ export const useAddNewRecordAndOpenRightDrawer = ({
include: [getOperationName(SEARCH_QUERY) ?? ''],
});
openRecordInCommandMenu({
openRecordInSidePanel({
recordId: newRecordId,
objectNameSingular: relationObjectMetadataNameSingular,
});
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainerGater.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { RecordIndexContextProvider } from '@/object-record/record-index/context
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
import { getObjectPermissionsForObject } from '@/object-metadata/utils/getObjectPermissionsForObject';
import { MainContainerLayoutWithCommandMenu } from '@/object-record/components/MainContainerLayoutWithCommandMenu';
import { MainContainerLayoutWithSidePanel } from '@/object-record/components/MainContainerLayoutWithSidePanel';
import { RecordComponentInstanceContextsWrapper } from '@/object-record/components/RecordComponentInstanceContextsWrapper';
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
import { lastShowPageRecordIdState } from '@/object-record/record-field/ui/states/lastShowPageRecordId';
@@ -95,14 +95,14 @@ export const RecordIndexContainerGater = () => {
>
<PageTitle title={objectMetadataItem.labelPlural} />
<RecordIndexPageHeader />
<MainContainerLayoutWithCommandMenu>
<MainContainerLayoutWithSidePanel>
<StyledIndexContainer
className={RECORD_INDEX_DRAG_SELECT_BOUNDARY_CLASS}
>
<RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
<RecordIndexContainer />
</StyledIndexContainer>
</MainContainerLayoutWithCommandMenu>
</MainContainerLayoutWithSidePanel>
</ActionMenuComponentInstanceContext.Provider>
</RecordComponentInstanceContextsWrapper>
<RecordIndexLoadBaseOnContextStoreEffect />
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { RecordIndexPageHeaderIcon } from '@/object-record/record-index/components/RecordIndexPageHeaderIcon';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
import { PageHeaderToggleSidePanelButton } from '@/ui/layout/page-header/components/PageHeaderToggleSidePanelButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { styled } from '@linaria/react';
@@ -72,7 +72,7 @@ export const RecordIndexPageHeader = () => {
{isDefined(contextStoreCurrentViewId) && (
<>
<RecordIndexActionMenu />
<PageHeaderToggleCommandMenuButton />
<PageHeaderToggleSidePanelButton />
</>
)}
</PageHeader>
packages/twenty-front/src/modules/object-record/record-index/hooks/useOpenRecordFromIndexView.ts
+8 -8
View File
@@ -1,5 +1,5 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
import { contextStoreRecordShowParentViewComponentState } from '@/context-store/states/contextStoreRecordShowParentViewComponentState';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
@@ -22,7 +22,7 @@ export const useOpenRecordFromIndexView = () => {
const { objectNameSingular } = useRecordIndexContextOrThrow();
const navigate = useNavigateApp();
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const isMobile = useIsMobile();
@@ -41,7 +41,7 @@ export const useOpenRecordFromIndexView = () => {
recordIndexId,
);
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const store = useStore();
@@ -75,13 +75,13 @@ export const useOpenRecordFromIndexView = () => {
recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL &&
canOpenObjectInSidePanel(objectNameSingular)
) {
openRecordInCommandMenu({
openRecordInSidePanel({
recordId,
objectNameSingular,
resetNavigationStack: true,
});
} else {
closeCommandMenu();
closeSidePanelMenu();
navigate(AppPath.RecordShowPage, {
objectNameSingular,
objectRecordId: recordId,
@@ -95,9 +95,9 @@ export const useOpenRecordFromIndexView = () => {
recordIndexId,
objectNameSingular,
navigate,
openRecordInCommandMenu,
openRecordInSidePanel,
isMobile,
closeCommandMenu,
closeSidePanelMenu,
store,
],
);
packages/twenty-front/src/modules/object-record/record-index/hooks/useResetFocusStackToRecordIndex.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { PageFocusId } from '@/types/PageFocusId';
import { useResetFocusStackToFocusItem } from '@/ui/utilities/focus/hooks/useResetFocusStackToFocusItem';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -10,9 +10,9 @@ export const useResetFocusStackToRecordIndex = () => {
const store = useStore();
const resetFocusStackToRecordIndex = () => {
const isCommandMenuOpen = store.get(isCommandMenuOpenedState.atom);
const isSidePanelOpen = store.get(isSidePanelOpenedState.atom);
const shouldEnableGlobalHotkeys = !isCommandMenuOpen;
const shouldEnableGlobalHotkeys = !isSidePanelOpen;
resetFocusStackToFocusItem({
focusStackItem: {
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellAnchoredPortal.tsx
+2 -2
View File
@@ -14,7 +14,7 @@ import { FieldFocusContextProvider } from '@/object-record/record-field/ui/conte
import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
import { isJunctionRelationForbidden } from '@/object-record/record-field/ui/utils/junction/isJunctionRelationForbidden';
import { RecordInlineCellAnchoredPortalContext } from '@/object-record/record-inline-cell/components/RecordInlineCellAnchoredPortalContext';
import { RecordInlineCellCloseOnCommandMenuOpeningEffect } from '@/object-record/record-inline-cell/components/RecordInlineCellCloseOnCommandMenuOpeningEffect';
import { RecordInlineCellCloseOnSidePanelOpeningEffect } from '@/object-record/record-inline-cell/components/RecordInlineCellCloseOnSidePanelOpeningEffect';
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { createPortal } from 'react-dom';
import { isDefined } from 'twenty-shared/utils';
@@ -123,7 +123,7 @@ export const RecordInlineCellAnchoredPortal = ({
<RecordInlineCellAnchoredPortalContext>
{children}
<RecordInlineCellCloseOnCommandMenuOpeningEffect />
<RecordInlineCellCloseOnSidePanelOpeningEffect />
</RecordInlineCellAnchoredPortalContext>
</RecordFieldComponentInstanceContext.Provider>,
anchorElement,
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellCloseOnCommandMenuOpeningEffect.tsx → packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellCloseOnSidePanelOpeningEffect.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { useListenToSidePanelOpening } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelOpening';
import { useListenToSidePanelOpening } from '@/ui/layout/side-panel/hooks/useListenToSidePanelOpening';
// TODO: This is a temporary solution to close the inline cell when the command menu is opened.
// TODO: This is a temporary solution to close the inline cell when the side panel is opened.
// This is because the useInlineCell hook doesn't work correctly for field inputs when used outside of the field context.
// We should refactor field inputs, and remove this listener afterwards.
// TODO: create a new hook useCloseAnyOpenedFieldInput which uses the focus stack to close all the field inputs, and call it inside openCommandMenu
export const RecordInlineCellCloseOnCommandMenuOpeningEffect = () => {
// TODO: create a new hook useCloseAnyOpenedFieldInput which uses the focus stack to close all the field inputs, and call it inside openSidePanelMenu
export const RecordInlineCellCloseOnSidePanelOpeningEffect = () => {
const { closeInlineCell } = useInlineCell();
useListenToSidePanelOpening(closeInlineCell);
packages/twenty-front/src/modules/object-record/record-merge/components/MergePreviewTab.tsx
+2 -2
View File
@@ -32,14 +32,14 @@ export const MergePreviewTab = ({
targetObjectNameSingular: objectNameSingular,
},
layoutType: PageLayoutType.RECORD_PAGE,
isInRightDrawer: true,
isInSidePanel: true,
}}
>
<Section>
<SummaryCard
objectNameSingular={objectNameSingular}
objectRecordId={recordId}
isInRightDrawer={true}
isInSidePanel={true}
/>
{getCardComponent(CardType.FieldCard, {
packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordTab.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { Section } from 'twenty-ui/layout';
import { PageLayoutType } from '~/generated-metadata/graphql';
type MergeRecordTabProps = {
isInRightDrawer?: boolean;
isInSidePanel?: boolean;
objectNameSingular: string;
recordId: string;
};
@@ -23,14 +23,14 @@ export const MergeRecordTab = ({
targetObjectNameSingular: objectNameSingular,
},
layoutType: PageLayoutType.RECORD_PAGE,
isInRightDrawer: true,
isInSidePanel: true,
}}
>
<Section>
<SummaryCard
objectNameSingular={objectNameSingular}
objectRecordId={recordId}
isInRightDrawer={true}
isInSidePanel={true}
/>
{getCardComponent(CardType.FieldCard, {
packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx
+5 -5
View File
@@ -2,13 +2,13 @@ import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ShowPageContainer } from '@/ui/layout/page/components/ShowPageContainer';
import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { useMergeRecordsSelectedRecords } from '@/object-record/record-merge/hooks/useMergeRecordsSelectedRecords';
import { MergeRecordsTabId } from '@/object-record/record-merge/types/MergeRecordsTabId';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -51,7 +51,7 @@ export const MergeRecordsContainer = ({
const { tabs } = useMergeRecordsContainerTabs(selectedRecords);
const instanceId = useAvailableComponentInstanceIdOrThrow(
CommandMenuPageComponentInstanceContext,
SidePanelPageComponentInstanceContext,
);
const activeTabId = useAtomComponentStateValue(
activeTabIdComponentState,
@@ -59,7 +59,7 @@ export const MergeRecordsContainer = ({
);
return (
<RightDrawerProvider value={{ isInRightDrawer: true }}>
<SidePanelProvider value={{ isInSidePanel: true }}>
<ShowPageContainer>
<StyledShowPageRightContainer>
<TabListComponentInstanceContext.Provider
@@ -86,6 +86,6 @@ export const MergeRecordsContainer = ({
<MergeRecordsFooter objectNameSingular={objectNameSingular} />
</StyledShowPageRightContainer>
</ShowPageContainer>
</RightDrawerProvider>
</SidePanelProvider>
);
};
packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsFooter.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
import { useMergeRecordsActions } from '@/object-record/record-merge/hooks/useMergeRecordsActions';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { styled } from '@linaria/react';
packages/twenty-front/src/modules/object-record/record-merge/hooks/useMergeRecordsActions.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { useLingui } from '@lingui/react/macro';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useMergeManyRecords } from '@/object-record/hooks/useMergeManyRecords';
import { useMergeRecordsSelectedRecords } from '@/object-record/record-merge/hooks/useMergeRecordsSelectedRecords';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -30,7 +30,7 @@ export const useMergeRecordsActions = ({
const { t } = useLingui();
const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const navigate = useNavigateApp();
const handleMergeRecords = async () => {
@@ -51,7 +51,7 @@ export const useMergeRecordsActions = ({
enqueueSuccessSnackBar({
message: t`Successfully merged ${recordCount} records`,
});
closeCommandMenu();
closeSidePanelMenu();
navigate(AppPath.RecordShowPage, {
objectNameSingular,
packages/twenty-front/src/modules/object-record/record-merge/hooks/useMergeRecordsSelectedRecords.ts
+6 -6
View File
@@ -1,5 +1,5 @@
import { commandMenuNavigationMorphItemsByPageState } from '@/command-menu/states/commandMenuNavigationMorphItemsByPageState';
import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/sidePanelNavigationMorphItemsByPageState';
import { SidePanelPageComponentInstanceContext } from '@/side-panel/states/contexts/SidePanelPageComponentInstanceContext';
import { recordStoreRecordsSelector } from '@/object-record/record-store/states/selectors/recordStoreRecordsSelector';
import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
@@ -7,15 +7,15 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
export const useMergeRecordsSelectedRecords = () => {
const mergeRecordsPageInstanceId = useComponentInstanceStateContext(
CommandMenuPageComponentInstanceContext,
SidePanelPageComponentInstanceContext,
)?.instanceId;
const commandMenuNavigationMorphItemsByPage = useAtomStateValue(
commandMenuNavigationMorphItemsByPageState,
const sidePanelNavigationMorphItemsByPage = useAtomStateValue(
sidePanelNavigationMorphItemsByPageState,
);
const selectedRecordIds =
commandMenuNavigationMorphItemsByPage
sidePanelNavigationMorphItemsByPage
.get(mergeRecordsPageInstanceId ?? '')
?.map((morphItem) => morphItem.recordId) ?? [];
packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx
+2 -2
View File
@@ -10,9 +10,9 @@ type FieldsCardProps = {
export const FieldsCard = ({ configuration }: FieldsCardProps) => {
const targetRecord = useTargetRecord();
const { isInRightDrawer } = useLayoutRenderingContext();
const { isInSidePanel } = useLayoutRenderingContext();
const instanceId = `fields-card-${targetRecord.id}${isInRightDrawer ? '-right-drawer' : ''}`;
const instanceId = `fields-card-${targetRecord.id}${isInSidePanel ? '-side-panel' : ''}`;
return (
<RecordFieldsScopeContextProvider value={{ scopeInstanceId: instanceId }}>
packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx
+14 -14
View File
@@ -1,5 +1,5 @@
import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu';
import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton';
import { RecordShowSidePanelActionMenu } from '@/action-menu/components/RecordShowSidePanelActionMenu';
import { RecordShowSidePanelOpenRecordButton } from '@/action-menu/components/RecordShowSidePanelOpenRecordButton';
import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord';
import { CoreObjectNameSingular } from 'twenty-shared/types';
import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect';
@@ -9,7 +9,7 @@ import { PageLayoutRenderer } from '@/page-layout/components/PageLayoutRenderer'
import { usePageLayoutIdForRecord } from '@/page-layout/hooks/usePageLayoutIdForRecord';
import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier';
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';
import { styled } from '@linaria/react';
import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
import { isDefined } from 'twenty-shared/utils';
@@ -29,20 +29,20 @@ const StyledShowPageRightContainer = styled.div`
overflow: auto;
`;
const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>`
const StyledContentContainer = styled.div<{ isInSidePanel: boolean }>`
flex: 1;
overflow-y: auto;
background: ${themeCssVariables.background.primary};
padding-bottom: ${({ isInRightDrawer }) =>
isInRightDrawer ? themeCssVariables.spacing[16] : 0};
padding-bottom: ${({ isInSidePanel }) =>
isInSidePanel ? themeCssVariables.spacing[16] : 0};
`;
export const PageLayoutRecordPageRenderer = ({
targetRecordIdentifier,
isInRightDrawer,
isInSidePanel,
}: {
targetRecordIdentifier: TargetRecordIdentifier;
isInRightDrawer: boolean;
isInSidePanel: boolean;
}) => {
const recordDeletedAt = useAtomFamilySelectorValue(
recordStoreFamilySelector,
@@ -78,7 +78,7 @@ export const PageLayoutRecordPageRenderer = ({
)}
<StyledShowPageRightContainer>
<StyledContentContainer isInRightDrawer={isInRightDrawer}>
<StyledContentContainer isInSidePanel={isInSidePanel}>
<LayoutRenderingProvider
value={{
targetRecordIdentifier: {
@@ -91,7 +91,7 @@ export const PageLayoutRecordPageRenderer = ({
CoreObjectNameSingular.Dashboard
? PageLayoutType.DASHBOARD
: PageLayoutType.RECORD_PAGE,
isInRightDrawer,
isInSidePanel,
}}
>
{isDefined(pageLayoutId) && (
@@ -100,11 +100,11 @@ export const PageLayoutRecordPageRenderer = ({
</LayoutRenderingProvider>
</StyledContentContainer>
{isInRightDrawer && (
<RightDrawerFooter
{isInSidePanel && (
<SidePanelFooter
actions={[
<RecordShowRightDrawerActionMenu />,
<RecordShowRightDrawerOpenRecordButton
<RecordShowSidePanelActionMenu />,
<RecordShowSidePanelOpenRecordButton
objectNameSingular={
targetRecordIdentifier.targetObjectNameSingular
}
packages/twenty-front/src/modules/object-record/record-show/components/SummaryCard.tsx
+4 -4
View File
@@ -21,14 +21,14 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
type SummaryCardProps = {
objectNameSingular: string;
objectRecordId: string;
isInRightDrawer: boolean;
isInSidePanel: boolean;
};
// TODO: refactor all this hierarchy of right drawer / show page record to avoid drill down
// TODO: refactor all this hierarchy of side panel / show page record to avoid drill down
export const SummaryCard = ({
objectNameSingular,
objectRecordId,
isInRightDrawer,
isInSidePanel,
}: SummaryCardProps) => {
const { recordLoading, isPrefetchLoading } = useRecordShowContainerData({
objectRecordId,
@@ -51,7 +51,7 @@ export const SummaryCard = ({
const { onUploadPicture } = usePersonAvatarUpload(objectRecordId);
const isMobile = useIsMobile() || isInRightDrawer;
const isMobile = useIsMobile() || isInSidePanel;
const recordIdentifier = useAtomFamilySelectorValue(
recordStoreIdentifierFamilySelector,
packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts → packages/twenty-front/src/modules/object-record/record-side-panel/states/viewableRecordIdState.ts
View File
packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts → packages/twenty-front/src/modules/object-record/record-side-panel/states/viewableRecordNameSingularState.ts
View File
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableDeactivateRecordTableRowEffect.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
import { useListenToSidePanelClosing } from '@/ui/layout/side-panel/hooks/useListenToSidePanelClosing';
export const RecordTableDeactivateRecordTableRowEffect = () => {
const { deactivateRecordTableRow } = useActiveRecordTableRow();
packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts
+8 -8
View File
@@ -1,5 +1,5 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { useBuildRecordInputFromRLSPredicates } from '@/object-record/hooks/useBuildRecordInputFromRLSPredicates';
@@ -44,9 +44,9 @@ export const useCreateNewIndexRecord = ({
recordIndexGroupFieldMetadataItemComponentState,
);
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const { createOneRecord } = useCreateOneRecord({
objectNameSingular: objectMetadataItem.nameSingular,
@@ -91,7 +91,7 @@ export const useCreateNewIndexRecord = ({
recordIndexOpenRecordIn === ViewOpenRecordInType.SIDE_PANEL &&
canOpenObjectInSidePanel(objectMetadataItem.nameSingular)
) {
openRecordInCommandMenu({
openRecordInSidePanel({
recordId,
objectNameSingular: objectMetadataItem.nameSingular,
isNewRecord: true,
@@ -100,7 +100,7 @@ export const useCreateNewIndexRecord = ({
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(objectMetadataItem);
closeCommandMenu();
closeSidePanelMenu();
navigate(
AppPath.RecordShowPage,
{
@@ -160,12 +160,12 @@ export const useCreateNewIndexRecord = ({
createOneRecord,
navigate,
objectMetadataItem,
openRecordInCommandMenu,
openRecordInSidePanel,
recordGroupDefinitions,
recordIndexGroupFieldMetadataItem,
recordIndexRecordIdsByGroupCallbackState,
upsertRecordsInStore,
closeCommandMenu,
closeSidePanelMenu,
],
);
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHotkeysEffect.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/c
import { useSelectAllRows } from '@/object-record/record-table/hooks/internal/useSelectAllRows';
import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { useListenToSidePanelOpening } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelOpening';
import { useListenToSidePanelOpening } from '@/ui/layout/side-panel/hooks/useListenToSidePanelOpening';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown.ts
+4 -4
View File
@@ -4,7 +4,7 @@ import { useStore } from 'jotai';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -35,7 +35,7 @@ export const useTriggerActionMenuDropdown = ({
);
const { openDropdown } = useOpenDropdown();
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const store = useStore();
const triggerActionMenuDropdown = useCallback(
@@ -53,7 +53,7 @@ export const useTriggerActionMenuDropdown = ({
store.set(isRowSelectedFamilyState(recordId), true);
}
closeCommandMenu();
closeSidePanelMenu();
openDropdown({
dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
@@ -62,7 +62,7 @@ export const useTriggerActionMenuDropdown = ({
[
recordIndexActionMenuDropdownPositionCallbackState,
isRowSelectedFamilyState,
closeCommandMenu,
closeSidePanelMenu,
openDropdown,
actionMenuDropdownId,
store,
packages/twenty-front/src/modules/object-record/record-table/record-table-row/hooks/useRecordTableRowHotkeys.ts
+6 -6
View File
@@ -1,4 +1,4 @@
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
@@ -23,7 +23,7 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
const { setCurrentRowSelected } = useSetCurrentRowSelected();
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const { activateRecordTableRow } = useActiveRecordTableRow();
@@ -50,8 +50,8 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
});
};
const handleOpenRecordInCommandMenu = () => {
openRecordInCommandMenu({
const handleOpenRecordInSidePanel = () => {
openRecordInSidePanel({
recordId: recordId,
objectNameSingular: objectNameSingular,
isNewRecord: false,
@@ -114,9 +114,9 @@ export const useRecordTableRowHotkeys = (focusId: string) => {
useHotkeysOnFocusedElement({
keys: [`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`],
callback: handleOpenRecordInCommandMenu,
callback: handleOpenRecordInSidePanel,
focusId,
dependencies: [handleOpenRecordInCommandMenu],
dependencies: [handleOpenRecordInSidePanel],
});
useHotkeysOnFocusedElement({
packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer.tsx
+7 -7
View File
@@ -1,10 +1,10 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { UpdateMultipleRecordsFooter } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter';
import { UpdateMultipleRecordsForm } from '@/object-record/record-update-multiple/components/UpdateMultipleRecordsForm';
import { useUpdateMultipleRecordsActions } from '@/object-record/record-update-multiple/hooks/useUpdateMultipleRecordsActions';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { ShowPageContainer } from '@/ui/layout/page/components/ShowPageContainer';
import { RightDrawerProvider } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useState } from 'react';
@@ -43,7 +43,7 @@ export const UpdateMultipleRecordsContainer = ({
const { t } = useLingui();
const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const [fieldUpdates, setFieldUpdates] = useState<UpdateMultipleRecordsState>(
{},
@@ -56,7 +56,7 @@ export const UpdateMultipleRecordsContainer = ({
enqueueSuccessSnackBar({
message: t`Successfully updated ${count} records`,
});
closeCommandMenu();
closeSidePanelMenu();
}
} catch (error) {
enqueueErrorSnackBar({
@@ -70,7 +70,7 @@ export const UpdateMultipleRecordsContainer = ({
const handleCancel = () => {
cancel();
closeCommandMenu();
closeSidePanelMenu();
};
const hasChanges = Object.values(fieldUpdates).some(
@@ -85,7 +85,7 @@ export const UpdateMultipleRecordsContainer = ({
};
return (
<RightDrawerProvider value={{ isInRightDrawer: true }}>
<SidePanelProvider value={{ isInSidePanel: true }}>
<ShowPageContainer>
<StyledShowPageRightContainer>
<StyledContentContainer>
@@ -105,6 +105,6 @@ export const UpdateMultipleRecordsContainer = ({
/>
</StyledShowPageRightContainer>
</ShowPageContainer>
</RightDrawerProvider>
</SidePanelProvider>
);
};
packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { computeProgressText } from '@/action-menu/utils/computeProgressText';
import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
import { type ObjectRecordQueryProgress } from '@/object-record/types/ObjectRecordQueryProgress';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
import { styled } from '@linaria/react';
packages/twenty-front/src/modules/object-record/record-update-multiple/components/__stories__/UpdateMultipleRecordsContainer.stories.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ const meta: Meta<typeof UpdateMultipleRecordsContainer> = {
actions: [],
actionMenuType: 'index-page-action-menu-dropdown',
displayType: 'dropdownItem',
isInRightDrawer: true,
isInSidePanel: true,
}}
>
<Story />