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

Use side panel sub-pages for add-to-folder flow (#18872)

Browse Source 
https://github.com/user-attachments/assets/a31b8523-2d0a-4a02-bcd9-5548c906b7cc

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Abdul Rahman
2026-03-25 03:58:40 +05:30
committed by GitHub
parent 01af7bc7fb
commit 4a099ed097
41 changed files with 289 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/layout-customization/hooks/useExitLayoutCustomizationMode.ts
+5 -5
View File
@@ -1,7 +1,7 @@
import { activeCustomizationPageLayoutIdsState } from '@/layout-customization/states/activeCustomizationPageLayoutIdsState';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
@@ -15,8 +15,8 @@ export const useExitLayoutCustomizationMode = () => {
const setNavigationMenuItemsDraft = useSetAtomState(
navigationMenuItemsDraftState,
);
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState(
selectedNavigationMenuItemIdInEditModeState,
);
const setIsLayoutCustomizationModeEnabled = useSetAtomState(
isLayoutCustomizationModeEnabledState,
@@ -24,7 +24,7 @@ export const useExitLayoutCustomizationMode = () => {
const exitLayoutCustomizationMode = useCallback(() => {
setNavigationMenuItemsDraft(null);
setSelectedNavigationMenuItemInEditMode(null);
setSelectedNavigationMenuItemIdInEditMode(null);
store.set(currentPageLayoutIdState.atom, null);
store.set(activeCustomizationPageLayoutIdsState.atom, []);
@@ -32,7 +32,7 @@ export const useExitLayoutCustomizationMode = () => {
closeSidePanelMenu();
}, [
setNavigationMenuItemsDraft,
setSelectedNavigationMenuItemInEditMode,
setSelectedNavigationMenuItemIdInEditMode,
setIsLayoutCustomizationModeEnabled,
closeSidePanelMenu,
store,
packages/twenty-front/src/modules/navigation-menu-item/common/states/addMenuItemInsertionContextState.ts
-9
View File
@@ -1,9 +0,0 @@
import type { AddMenuItemInsertionContext } from '@/navigation-menu-item/common/types/AddMenuItemInsertionContext';
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
export const addMenuItemInsertionContextState =
createAtomState<AddMenuItemInsertionContext | null>({
key: 'addMenuItemInsertionContextState',
defaultValue: null,
});
packages/twenty-front/src/modules/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState.ts
+9
View File
@@ -0,0 +1,9 @@
import type { PendingInsertionNavigationMenuItem } from '@/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem';
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
export const pendingInsertionNavigationMenuItemState =
createAtomState<PendingInsertionNavigationMenuItem | null>({
key: 'pendingInsertionNavigationMenuItemState',
defaultValue: null,
});
packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState.ts → packages/twenty-front/src/modules/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState.ts
+2 -2
View File
@@ -1,8 +1,8 @@
import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
export const selectedNavigationMenuItemInEditModeState = createAtomState<
export const selectedNavigationMenuItemIdInEditModeState = createAtomState<
string | null
>({
key: 'selectedNavigationMenuItemInEditModeState',
key: 'selectedNavigationMenuItemIdInEditModeState',
defaultValue: null,
});
packages/twenty-front/src/modules/navigation-menu-item/common/types/AddMenuItemInsertionContext.ts
-5
View File
@@ -1,5 +0,0 @@
export type AddMenuItemInsertionContext = {
targetFolderId: string | null;
targetIndex: number;
disableDrag?: boolean;
};
packages/twenty-front/src/modules/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem.ts
+4
View File
@@ -0,0 +1,4 @@
export type PendingInsertionNavigationMenuItem = {
folderId: string | null;
position: number;
};
packages/twenty-front/src/modules/navigation-menu-item/display/components/NavigationMenuItemDisplay.tsx
-4
View File
@@ -14,7 +14,6 @@ export const NavigationMenuItemDisplay = ({
folderChildrenById,
folderCount,
rightOptions,
selectedNavigationMenuItemId,
onNavigationMenuItemClick,
onActiveObjectMetadataItemClick,
readOnly,
@@ -30,7 +29,6 @@ export const NavigationMenuItemDisplay = ({
isDragging={isDragging}
folderChildrenById={folderChildrenById}
folderCount={folderCount}
selectedNavigationMenuItemId={selectedNavigationMenuItemId}
onNavigationMenuItemClick={onNavigationMenuItemClick}
readOnly={readOnly}
orphanIndex={orphanIndex}
@@ -46,7 +44,6 @@ export const NavigationMenuItemDisplay = ({
folderChildrenById={folderChildrenById}
folderCount={folderCount}
rightOptions={rightOptions}
selectedNavigationMenuItemId={selectedNavigationMenuItemId}
onNavigationMenuItemClick={onNavigationMenuItemClick}
onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
readOnly={readOnly}
@@ -62,7 +59,6 @@ export const NavigationMenuItemDisplay = ({
folderChildrenById={folderChildrenById}
folderCount={folderCount}
rightOptions={rightOptions}
selectedNavigationMenuItemId={selectedNavigationMenuItemId}
onNavigationMenuItemClick={onNavigationMenuItemClick}
onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
readOnly={readOnly}
packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolder.tsx
-3
View File
@@ -27,7 +27,6 @@ type NavigationMenuItemFolderProps = Pick<
| 'isDragging'
| 'folderChildrenById'
| 'folderCount'
| 'selectedNavigationMenuItemId'
| 'onNavigationMenuItemClick'
| 'readOnly'
| 'orphanIndex'
@@ -40,7 +39,6 @@ export const NavigationMenuItemFolder = ({
isDragging,
folderChildrenById,
folderCount,
selectedNavigationMenuItemId,
onNavigationMenuItemClick,
readOnly = false,
orphanIndex,
@@ -88,7 +86,6 @@ export const NavigationMenuItemFolder = ({
isEditInPlace={isEditInPlace}
editModeProps={editModeProps}
isDragging={isDragging}
selectedNavigationMenuItemId={selectedNavigationMenuItemId}
onNavigationMenuItemClick={onNavigationMenuItemClick}
orphanIndex={orphanIndex}
/>
packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderDnd.tsx
+12 -21
View File
@@ -2,7 +2,6 @@ import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import React, { Fragment, useCallback, useContext } from 'react';
import { createPortal } from 'react-dom';
import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import {
IconChevronDown,
@@ -17,6 +16,7 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { useIsMobile } from 'twenty-ui/utilities';
import { type NavigationMenuItem } from '~/generated-metadata/graphql';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/FolderIconDefault';
import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/common/constants/NavigationMenuItemDefaultColorFolder';
import { NAVIGATION_MENU_ITEM_SECTION_DROPPABLE_CONFIG } from '@/navigation-menu-item/common/constants/NavigationMenuItemSectionDroppableConfig';
@@ -25,8 +25,6 @@ import { NavigationDropTargetContext } from '@/navigation-menu-item/common/conte
import { NavigationMenuItemDragContext } from '@/navigation-menu-item/common/contexts/NavigationMenuItemDragContext';
import { SortableDropTargetRefContext } from '@/navigation-menu-item/common/contexts/SortableDropTargetRefContext';
import { useDeleteManyNavigationMenuItems } from '@/navigation-menu-item/common/hooks/useDeleteManyNavigationMenuItems';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import type { NavigationMenuItemSection } from '@/navigation-menu-item/common/types/NavigationMenuItemSection';
import { getDndKitDropTargetId } from '@/navigation-menu-item/common/utils/getDndKitDropTargetId';
import { NavigationItemDropTarget } from '@/navigation-menu-item/display/dnd/components/NavigationItemDropTarget';
@@ -42,10 +40,11 @@ import { NavigationMenuItemFolderNavigationDrawerItemDropdown } from '@/navigati
import { NavigationMenuItemFolderSubItem } from '@/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem';
import { useNavigationMenuItemFolderOpenState } from '@/navigation-menu-item/display/folder/hooks/useNavigationMenuItemFolderOpenState';
import type { NavigationMenuItemClickParams } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage';
import { useIsNavigationMenuItemEditHighlighted } from '@/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted';
import { useFavoritesFolderEdit } from '@/navigation-menu-item/edit/folder/hooks/useFavoritesFolderEdit';
import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage';
import type { EditModeProps } from '@/object-metadata/components/EditModeProps';
import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
import { NavigationDrawerInput } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerInput';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
@@ -87,7 +86,6 @@ type NavigationMenuItemFolderDndProps = {
isEditInPlace: boolean;
editModeProps?: EditModeProps;
isDragging: boolean;
selectedNavigationMenuItemId?: string | null;
onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
orphanIndex?: number;
};
@@ -102,7 +100,6 @@ export const NavigationMenuItemFolderDnd = ({
isEditInPlace,
editModeProps,
isDragging: isDraggingProp,
selectedNavigationMenuItemId,
onNavigationMenuItemClick,
orphanIndex,
}: NavigationMenuItemFolderDndProps) => {
@@ -144,10 +141,10 @@ export const NavigationMenuItemFolderDnd = ({
isLayoutCustomizationModeEnabledState,
);
const { openAddItemToFolderPage } = useOpenAddItemToFolderPage();
const sidePanelPage = useAtomStateValue(sidePanelPageState);
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const isFolderEditHighlighted = useIsNavigationMenuItemEditHighlighted({
id: folderId,
folderId: null,
});
const config = NAVIGATION_MENU_ITEM_SECTION_DROPPABLE_CONFIG[section];
const folderHeaderDroppableId = `${config.folderHeaderPrefix}${folderId}`;
@@ -284,8 +281,8 @@ export const NavigationMenuItemFolderDnd = ({
const handleAddMenuItemToFolder = useCallback(() => {
openAddItemToFolderPage({
targetFolderId: folderId,
targetIndex: navigationMenuItems.length,
folderId,
position: navigationMenuItems.length,
resetNavigationStack: true,
});
}, [folderId, navigationMenuItems.length, openAddItemToFolderPage]);
@@ -315,7 +312,7 @@ export const NavigationMenuItemFolderDnd = ({
return (
<>
<StyledFolderContainer
$isSelectedInEditMode={isWorkspace && isSelectedInEditMode}
$isSelectedInEditMode={isWorkspace && isFolderEditHighlighted}
data-drag-over-header={isDragOverFolderHeader ? 'true' : undefined}
data-forbidden-drop-target={isForbiddenDropTarget ? 'true' : undefined}
>
@@ -372,9 +369,6 @@ export const NavigationMenuItemFolderDnd = ({
onNavigationMenuItemClick={
isWorkspace ? onNavigationMenuItemClick : undefined
}
selectedNavigationMenuItemId={
isWorkspace ? selectedNavigationMenuItemId : undefined
}
/>
</NavigationMenuItemSortableItem>
</Fragment>
@@ -401,10 +395,7 @@ export const NavigationMenuItemFolderDnd = ({
onClick={handleAddMenuItemToFolder}
triggerEvent="CLICK"
variant="tertiary"
isSelectedInEditMode={
sidePanelPage === SidePanelPages.NavigationMenuAddItem &&
addMenuItemInsertionContext?.targetFolderId === folderId
}
isSelectedInEditMode={false}
subItemState={getNavigationSubItemLeftAdornment({
index: navigationMenuItems.length,
arrayLength: folderContentLength,
packages/twenty-front/src/modules/navigation-menu-item/display/folder/components/NavigationMenuItemFolderSubItem.tsx
+4 -5
View File
@@ -10,6 +10,7 @@ import { getObjectMetadataForNavigationMenuItem } from '@/navigation-menu-item/d
import { getNavigationMenuItemObjectNameSingular } from '@/navigation-menu-item/display/object/utils/getNavigationMenuItemObjectNameSingular';
import { getObjectNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/display/object/utils/getObjectNavigationMenuItemSecondaryLabel';
import { getNavigationMenuItemComputedLink } from '@/navigation-menu-item/display/utils/getNavigationMenuItemComputedLink';
import { useIsNavigationMenuItemEditHighlighted } from '@/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted';
import { getNavigationMenuItemLabel } from '@/navigation-menu-item/display/utils/getNavigationMenuItemLabel';
import { objectMetadataItemsSelector } from '@/object-metadata/states/objectMetadataItemsSelector';
import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
@@ -30,7 +31,6 @@ type NavigationMenuItemFolderSubItemProps = {
item: NavigationMenuItem;
objectMetadataItem?: EnrichedObjectMetadataItem;
}) => void;
selectedNavigationMenuItemId?: string | null;
};
export const NavigationMenuItemFolderSubItem = ({
@@ -42,8 +42,9 @@ export const NavigationMenuItemFolderSubItem = ({
rightOptions,
onClick,
onNavigationMenuItemClick,
selectedNavigationMenuItemId,
}: NavigationMenuItemFolderSubItemProps) => {
const isEditHighlightedInNavigationMenu =
useIsNavigationMenuItemEditHighlighted(navigationMenuItem);
const objectMetadataItems = useAtomStateValue(objectMetadataItemsSelector);
const views = useAtomStateValue(viewsSelector);
@@ -112,9 +113,7 @@ export const NavigationMenuItemFolderSubItem = ({
to={isDragging || handleClick ? undefined : computedLink}
onClick={handleClick}
active={index === selectedNavigationMenuItemIndex}
isSelectedInEditMode={
selectedNavigationMenuItemId === navigationMenuItem.id
}
isSelectedInEditMode={isEditHighlightedInNavigationMenu}
subItemState={getNavigationSubItemLeftAdornment({
index,
arrayLength,
packages/twenty-front/src/modules/navigation-menu-item/display/hooks/useIsNavigationMenuItemEditHighlighted.ts
+29
View File
@@ -0,0 +1,29 @@
import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { type NavigationMenuItem } from '~/generated-metadata/graphql';
export const useIsNavigationMenuItemEditHighlighted = (
navigationMenuItem: Pick<NavigationMenuItem, 'id' | 'folderId'>,
): boolean => {
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const pendingInsertionNavigationMenuItem = useAtomStateValue(
pendingInsertionNavigationMenuItemState,
);
const sidePanelPage = useAtomStateValue(sidePanelPageState);
const isSelectedById =
selectedNavigationMenuItemIdInEditMode === navigationMenuItem.id;
const isPendingInsertionMatch =
isDefined(pendingInsertionNavigationMenuItem) &&
pendingInsertionNavigationMenuItem.folderId === navigationMenuItem.id &&
(sidePanelPage === SidePanelPages.NavigationMenuAddItem ||
sidePanelPage === SidePanelPages.NavigationMenuItemEdit);
return isSelectedById || isPendingInsertionMatch;
};
packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionContentProps.ts
-1
View File
@@ -14,7 +14,6 @@ export type NavigationMenuItemSectionContentProps = {
folderChildrenById: Map<string, NavigationMenuItem[]>;
folderCount: number;
rightOptions?: ReactNode;
selectedNavigationMenuItemId?: string | null;
onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
onActiveObjectMetadataItemClick?: (
objectMetadataItem: EnrichedObjectMetadataItem,
packages/twenty-front/src/modules/navigation-menu-item/display/sections/types/NavigationMenuItemSectionListDndKitProps.ts
-1
View File
@@ -8,7 +8,6 @@ export type NavigationMenuItemSectionListDndKitProps = {
filteredItems: NavigationMenuItem[];
getEditModeProps: (item: NavigationMenuItem) => EditModeProps;
folderChildrenById: Map<string, NavigationMenuItem[]>;
selectedNavigationMenuItemId: string | null;
onNavigationMenuItemClick?: (params: NavigationMenuItemClickParams) => void;
onActiveObjectMetadataItemClick?: (
objectMetadataItem: EnrichedObjectMetadataItem,
packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSection.tsx
+7 -7
View File
@@ -16,7 +16,7 @@ import { useEnterLayoutCustomizationMode } from '@/layout-customization/hooks/us
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/FolderIconDefault';
import { openNavigationMenuItemFolderIdsState } from '@/navigation-menu-item/common/states/openNavigationMenuItemFolderIdsState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { preloadNavigationMenuItemDndKit } from '@/navigation-menu-item/display/dnd/preloadNavigationMenuItemDndKit';
import {
type NavigationMenuItemClickParams,
@@ -52,9 +52,9 @@ export const WorkspaceSection = () => {
isLayoutCustomizationModeEnabledState,
);
const [
selectedNavigationMenuItemInEditMode,
setSelectedNavigationMenuItemInEditMode,
] = useAtomState(selectedNavigationMenuItemInEditModeState);
selectedNavigationMenuItemIdInEditMode,
setSelectedNavigationMenuItemIdInEditMode,
] = useAtomState(selectedNavigationMenuItemIdInEditModeState);
const setOpenNavigationMenuItemFolderIds = useSetAtomState(
openNavigationMenuItemFolderIdsState,
);
@@ -133,7 +133,7 @@ export const WorkspaceSection = () => {
params: NavigationMenuItemClickParams,
) => {
const { item, objectMetadataItem } = params;
setSelectedNavigationMenuItemInEditMode(item.id);
setSelectedNavigationMenuItemIdInEditMode(item.id);
switch (item.type) {
case NavigationMenuItemType.FOLDER:
@@ -155,7 +155,7 @@ export const WorkspaceSection = () => {
navigationMenuItemId: string,
) => {
enterLayoutCustomizationMode();
setSelectedNavigationMenuItemInEditMode(navigationMenuItemId);
setSelectedNavigationMenuItemIdInEditMode(navigationMenuItemId);
openNavigationMenuItemInSidePanel({
pageTitle: objectMetadataItem.labelSingular,
pageIcon: getIcon(objectMetadataItem.icon),
@@ -197,7 +197,7 @@ export const WorkspaceSection = () => {
)}
</StyledRightIconsContainer>
}
selectedNavigationMenuItemId={selectedNavigationMenuItemInEditMode}
selectedNavigationMenuItemId={selectedNavigationMenuItemIdInEditMode}
onNavigationMenuItemClick={
isLayoutCustomizationModeEnabled
? handleNavigationMenuItemClick
packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionContainer.tsx
-1
View File
@@ -169,7 +169,6 @@ export const WorkspaceSectionContainer = ({
filteredItems={filteredItems}
getEditModeProps={getEditModeProps}
folderChildrenById={folderChildrenById}
selectedNavigationMenuItemId={selectedNavigationMenuItemId}
onNavigationMenuItemClick={onNavigationMenuItemClick}
onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
/>
packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListDndKit.tsx
-2
View File
@@ -35,7 +35,6 @@ export const WorkspaceSectionListDndKit = ({
filteredItems,
getEditModeProps,
folderChildrenById,
selectedNavigationMenuItemId,
onNavigationMenuItemClick,
onActiveObjectMetadataItemClick,
}: WorkspaceSectionListDndKitProps) => {
@@ -72,7 +71,6 @@ export const WorkspaceSectionListDndKit = ({
isDragging={isDragging}
folderChildrenById={folderChildrenById}
folderCount={folderCount}
selectedNavigationMenuItemId={selectedNavigationMenuItemId}
onNavigationMenuItemClick={onNavigationMenuItemClick}
onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
orphanIndex={index}
packages/twenty-front/src/modules/navigation-menu-item/display/sections/workspace/components/WorkspaceSectionListReadOnly.tsx
-1
View File
@@ -42,7 +42,6 @@ export const WorkspaceSectionListReadOnly = ({
isDragging={false}
folderChildrenById={folderChildrenById}
folderCount={folderCount}
selectedNavigationMenuItemId={null}
onActiveObjectMetadataItemClick={onActiveObjectMetadataItemClick}
readOnly
/>
packages/twenty-front/src/modules/navigation-menu-item/edit/components/WorkspaceSectionAddMenuItemButton.tsx
+12 -13
View File
@@ -3,11 +3,12 @@ import React from 'react';
import { SidePanelPages } from 'twenty-shared/types';
import { IconColumnInsertRight, IconPlus } from 'twenty-ui/display';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
@@ -15,21 +16,19 @@ export const WorkspaceSectionAddMenuItemButton = () => {
const { t } = useLingui();
const { navigateSidePanel } = useNavigateSidePanel();
const sidePanelPage = useAtomStateValue(sidePanelPageState);
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState(
selectedNavigationMenuItemIdInEditModeState,
);
const handleClick = (event?: React.MouseEvent) => {
event?.stopPropagation();
setAddMenuItemInsertionContext(null);
setSelectedNavigationMenuItemInEditMode(null);
setPendingInsertionNavigationMenuItem(null);
setSelectedNavigationMenuItemIdInEditMode(null);
navigateSidePanel({
page: SidePanelPages.NavigationMenuAddItem,
pageTitle: t`New menu item`,
@@ -40,7 +39,7 @@ export const WorkspaceSectionAddMenuItemButton = () => {
const isSelected =
sidePanelPage === SidePanelPages.NavigationMenuAddItem &&
addMenuItemInsertionContext === null;
pendingInsertionNavigationMenuItem === null;
return (
<NavigationDrawerItem
packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage.ts
+15 -17
View File
@@ -1,37 +1,35 @@
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useLingui } from '@lingui/react/macro';
import { SidePanelPages } from 'twenty-shared/types';
import { IconColumnInsertRight } from 'twenty-ui/display';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
type OpenAddItemToFolderPageParams = {
targetFolderId: string;
targetIndex: number;
folderId: string;
position: number;
resetNavigationStack?: boolean;
};
export const useOpenAddItemToFolderPage = () => {
const { t } = useLingui();
const { navigateSidePanel } = useNavigateSidePanel();
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
const setPendingInsertionNavigationMenuItem = useSetAtomState(
pendingInsertionNavigationMenuItemState,
);
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState(
selectedNavigationMenuItemIdInEditModeState,
);
const openAddItemToFolderPage = ({
targetFolderId,
targetIndex,
folderId,
position,
resetNavigationStack = true,
}: OpenAddItemToFolderPageParams) => {
setSelectedNavigationMenuItemInEditMode(null);
setAddMenuItemInsertionContext({
targetFolderId,
targetIndex,
});
setPendingInsertionNavigationMenuItem({ folderId, position });
setSelectedNavigationMenuItemIdInEditMode(null);
navigateSidePanel({
page: SidePanelPages.NavigationMenuAddItem,
pageTitle: t`New menu item`,
packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel.ts
+9 -4
View File
@@ -1,4 +1,5 @@
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { SidePanelPages } from 'twenty-shared/types';
@@ -7,8 +8,11 @@ import type { IconComponent } from 'twenty-ui/display';
export const useOpenNavigationMenuItemInSidePanel = () => {
const { navigateSidePanel } = useNavigateSidePanel();
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState(
selectedNavigationMenuItemIdInEditModeState,
);
const setPendingInsertionNavigationMenuItem = useSetAtomState(
pendingInsertionNavigationMenuItemState,
);
const openNavigationMenuItemInSidePanel = ({
@@ -23,8 +27,9 @@ export const useOpenNavigationMenuItemInSidePanel = () => {
focusTitleInput?: boolean;
}) => {
if (isDefined(itemId)) {
setSelectedNavigationMenuItemInEditMode(itemId);
setSelectedNavigationMenuItemIdInEditMode(itemId);
}
setPendingInsertionNavigationMenuItem(null);
navigateSidePanel({
page: SidePanelPages.NavigationMenuItemEdit,
pageTitle,
packages/twenty-front/src/modules/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem.ts
+5 -5
View File
@@ -1,15 +1,15 @@
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
export const useSelectedNavigationMenuItemEditItem = () => {
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
const selectedItem = selectedNavigationMenuItemInEditMode
? items.find((item) => item.id === selectedNavigationMenuItemInEditMode)
const selectedItem = selectedNavigationMenuItemIdInEditMode
? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode)
: undefined;
return { selectedItem };
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage.tsx
+14 -10
View File
@@ -1,11 +1,12 @@
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
import { NavigationMenuItemType } from 'twenty-shared/types';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/edit/hooks/useOpenAddItemToFolderPage';
import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem';
import { useSelectedNavigationMenuItemEditItemLabel } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItemLabel';
import { useUpdateLinkInDraft } from '@/navigation-menu-item/edit/link/hooks/useUpdateLinkInDraft';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { parseThemeColor } from '@/navigation-menu-item/common/utils/parseThemeColor';
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { SidePanelList } from '@/side-panel/components/SidePanelList';
@@ -20,6 +21,7 @@ import { getOrganizeActionsSelectableItemIds } from '@/navigation-menu-item/edit
import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
@@ -40,8 +42,8 @@ const StyledSidePanelPageContainer = styled.div`
export const SidePanelNavigationMenuItemEditPage = () => {
const { t } = useLingui();
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const { selectedItemLabel } = useSelectedNavigationMenuItemEditItemLabel();
const { selectedItem } = useSelectedNavigationMenuItemEditItem();
@@ -62,8 +64,10 @@ export const SidePanelNavigationMenuItemEditPage = () => {
} = useNavigationMenuItemEditOrganizeActions();
const { updateLinkInDraft } = useUpdateLinkInDraft();
const { openAddItemToFolderPage } = useOpenAddItemToFolderPage();
const { workspaceNavigationMenuItems } = useNavigationMenuItemsDraftState();
const setPendingInsertionNavigationMenuItem = useSetAtomState(
pendingInsertionNavigationMenuItemState,
);
const handleAddItemToFolder = () => {
if (!selectedItem || selectedItem.type !== NavigationMenuItemType.FOLDER) {
@@ -72,14 +76,14 @@ export const SidePanelNavigationMenuItemEditPage = () => {
const folderItemCount = workspaceNavigationMenuItems.filter(
(item) => (item.folderId ?? null) === selectedItem.id,
).length;
openAddItemToFolderPage({
targetFolderId: selectedItem.id,
targetIndex: folderItemCount,
resetNavigationStack: false,
setPendingInsertionNavigationMenuItem({
folderId: selectedItem.id,
position: folderItemCount,
});
navigateToSidePanelSubPage(SidePanelSubPages.NewSidebarItemMainMenu);
};
if (!selectedNavigationMenuItemInEditMode || !selectedItemLabel) {
if (!selectedNavigationMenuItemIdInEditMode || !selectedItemLabel) {
return (
<StyledSidePanelPageContainer>
<StyledSidePanelPlaceholder>
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemMainMenu.tsx
+6 -9
View File
@@ -12,7 +12,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemStyleIcon';
import { NavigationMenuItemType } from 'twenty-shared/types';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { SidePanelAddToNavigationDroppable } from '@/side-panel/components/SidePanelAddToNavigationDroppable';
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag';
@@ -42,16 +42,15 @@ export const SidePanelNewSidebarItemMainMenu = ({
onSelectRecord,
}: SidePanelNewSidebarItemMainMenuProps) => {
const { t } = useLingui();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
const pendingInsertionNavigationMenuItem = useAtomStateValue(
pendingInsertionNavigationMenuItemState,
);
const { handleAddFolder } = useAddFolderToNavigationMenu();
const { handleAddLink } = useAddLinkToNavigationMenu();
const isAddingToFolder = isDefined(
addMenuItemInsertionContext?.targetFolderId,
pendingInsertionNavigationMenuItem?.folderId,
);
const isDragDisabled = addMenuItemInsertionContext?.disableDrag === true;
const selectableItemIds = isAddingToFolder
? MAIN_MENU_ITEM_TYPES.filter(
(type) => type !== NavigationMenuItemType.FOLDER,
@@ -128,14 +127,13 @@ export const SidePanelNewSidebarItemMainMenu = ({
label={t`Folder`}
id={NavigationMenuItemType.FOLDER}
onClick={handleAddFolder}
dragIndex={isDragDisabled ? undefined : 3}
dragIndex={3}
payload={{
type: NavigationMenuItemType.FOLDER,
folderId: 'new',
name: t`New folder`,
}}
disabled={isAddingToFolder}
disableDrag={isDragDisabled}
/>
</SelectableListItem>
<SelectableListItem
@@ -147,14 +145,13 @@ export const SidePanelNewSidebarItemMainMenu = ({
label={t`Link`}
id={NavigationMenuItemType.LINK}
onClick={handleAddLink}
dragIndex={isDragDisabled ? undefined : 4}
dragIndex={4}
payload={{
type: NavigationMenuItemType.LINK,
linkId: 'new',
name: t`Link label`,
link: 'https://www.example.com',
}}
disableDrag={isDragDisabled}
/>
</SelectableListItem>
</SidePanelGroup>
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage.tsx
+9 -15
View File
@@ -4,7 +4,7 @@ import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/edit/o
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems';
import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/edit/hooks/useNavigationMenuObjectMetadataFromDraft';
import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -13,8 +13,7 @@ import { useSidePanelSubPageHistory } from '@/side-panel/hooks/useSidePanelSubPa
import { SidePanelObjectPickerSubView } from '@/navigation-menu-item/edit/side-panel/components/SidePanelObjectPickerSubView';
import { getAvailableObjectMetadataForNewSidebarItem } from '@/navigation-menu-item/edit/side-panel/utils/getAvailableObjectMetadataForNewSidebarItem';
import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { ViewKey } from '@/views/types/ViewKey';
import { useIcons } from 'twenty-ui/display';
@@ -30,12 +29,10 @@ export const SidePanelNewSidebarItemObjectSubPage = () => {
useOpenNavigationMenuItemInSidePanel();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const {
views,
objectMetadataIdsWithIndexView,
@@ -65,11 +62,11 @@ export const SidePanelNewSidebarItemObjectSubPage = () => {
const itemId = addObjectToDraft(
objectMetadataItem.id,
currentDraft,
addMenuItemInsertionContext?.targetFolderId,
addMenuItemInsertionContext?.targetIndex,
pendingInsertionNavigationMenuItem?.folderId,
pendingInsertionNavigationMenuItem?.position,
getStandardObjectIconColor(objectMetadataItem.nameSingular),
);
setAddMenuItemInsertionContext(null);
setPendingInsertionNavigationMenuItem(null);
openNavigationMenuItemInSidePanel({
itemId,
pageTitle: objectMetadataItem.labelSingular,
@@ -77,8 +74,6 @@ export const SidePanelNewSidebarItemObjectSubPage = () => {
});
};
const disableDrag = addMenuItemInsertionContext?.disableDrag === true;
return (
<SidePanelObjectPickerSubView
objects={availableObjectMetadataItems}
@@ -92,7 +87,6 @@ export const SidePanelNewSidebarItemObjectSubPage = () => {
isViewItem={false}
onChangeObject={handleSelectObject}
objectMenuItemVariant="add"
disableDrag={disableDrag}
/>
);
};
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage.tsx
+9 -15
View File
@@ -4,15 +4,14 @@ import { useAddObjectToNavigationMenuDraft } from '@/navigation-menu-item/edit/o
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems';
import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/edit/hooks/useNavigationMenuObjectMetadataFromDraft';
import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
import { SidePanelSystemObjectPickerSubView } from '@/navigation-menu-item/edit/side-panel/components/SidePanelSystemObjectPickerSubView';
import { getAvailableObjectMetadataForNewSidebarItem } from '@/navigation-menu-item/edit/side-panel/utils/getAvailableObjectMetadataForNewSidebarItem';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { ViewKey } from '@/views/types/ViewKey';
import { useState } from 'react';
import { useIcons } from 'twenty-ui/display';
@@ -29,12 +28,10 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => {
useOpenNavigationMenuItemInSidePanel();
const { activeNonSystemObjectMetadataItems } =
useFilteredObjectMetadataItems();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const {
views,
objectMetadataIdsWithIndexView,
@@ -64,11 +61,11 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => {
const itemId = addObjectToDraft(
objectMetadataItem.id,
currentDraft,
addMenuItemInsertionContext?.targetFolderId,
addMenuItemInsertionContext?.targetIndex,
pendingInsertionNavigationMenuItem?.folderId,
pendingInsertionNavigationMenuItem?.position,
getStandardObjectIconColor(objectMetadataItem.nameSingular),
);
setAddMenuItemInsertionContext(null);
setPendingInsertionNavigationMenuItem(null);
openNavigationMenuItemInSidePanel({
itemId,
pageTitle: objectMetadataItem.labelSingular,
@@ -76,8 +73,6 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => {
});
};
const disableDrag = addMenuItemInsertionContext?.disableDrag === true;
return (
<SidePanelSystemObjectPickerSubView
systemObjects={availableSystemObjectMetadataItems}
@@ -87,7 +82,6 @@ export const SidePanelNewSidebarItemObjectSystemPickerSubPage = () => {
onChangeObject={handleSelectObject}
objectMenuItemVariant="add"
emptyNoResultsText={t`All system objects are already in the sidebar`}
disableDrag={disableDrag}
/>
);
};
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem.tsx
+9 -15
View File
@@ -3,13 +3,12 @@ import { Avatar, IconFolder, useIcons } from 'twenty-ui/display';
import { useAddRecordToNavigationMenuDraft } from '@/navigation-menu-item/edit/record/hooks/useAddRecordToNavigationMenuDraft';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems';
import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import type { AddToNavigationDragPayload } from '@/navigation-menu-item/common/types/add-to-navigation-drag-payload';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { SidePanelItemWithAddToNavigationDrag } from '@/side-panel/components/SidePanelItemWithAddToNavigationDrag';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import {
CoreObjectNameSingular,
NavigationMenuItemType,
@@ -25,23 +24,19 @@ type SearchRecord = {
type SidePanelNewSidebarItemRecordItemProps = {
record: SearchRecord;
dragIndex?: number;
disableDrag?: boolean;
};
export const SidePanelNewSidebarItemRecordItem = ({
record,
dragIndex,
disableDrag = false,
}: SidePanelNewSidebarItemRecordItemProps) => {
const { getIcon } = useIcons();
const { addRecordToDraft } = useAddRecordToNavigationMenuDraft();
const { currentDraft } = useDraftNavigationMenuItems();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const { openNavigationMenuItemInSidePanel } =
useOpenNavigationMenuItemInSidePanel();
const { objectMetadataItems } = useObjectMetadataItems();
@@ -66,10 +61,10 @@ export const SidePanelNewSidebarItemRecordItem = ({
imageUrl: record.imageUrl,
},
currentDraft,
addMenuItemInsertionContext?.targetFolderId ?? null,
addMenuItemInsertionContext?.targetIndex,
pendingInsertionNavigationMenuItem?.folderId ?? null,
pendingInsertionNavigationMenuItem?.position,
);
setAddMenuItemInsertionContext(null);
setPendingInsertionNavigationMenuItem(null);
openNavigationMenuItemInSidePanel({
itemId,
pageTitle: record.label,
@@ -101,7 +96,6 @@ export const SidePanelNewSidebarItemRecordItem = ({
id={record.recordId}
onClick={handleSelectRecord}
dragIndex={dragIndex}
disableDrag={disableDrag}
payload={recordPayload}
/>
</SelectableListItem>
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage.tsx
+1 -8
View File
@@ -5,7 +5,6 @@ import { useDebounce } from 'use-debounce';
import { MAX_SEARCH_RESULTS } from '@/command-menu/constants/MaxSearchResults';
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
@@ -15,7 +14,6 @@ import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { SidePanelList } from '@/side-panel/components/SidePanelList';
import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch';
import { SidePanelNewSidebarItemRecordItem } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordItem';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useQuery } from '@apollo/client/react';
import { SearchDocument } from '~/generated/graphql';
@@ -28,10 +26,6 @@ type SearchRecordBase = {
export const SidePanelNewSidebarItemRecordSubPage = () => {
const { t } = useLingui();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const disableDrag = addMenuItemInsertionContext?.disableDrag === true;
const { currentDraft } = useDraftNavigationMenuItems();
const { objectMetadataItems } = useObjectMetadataItems();
const [recordSearchInput, setRecordSearchInput] = useState('');
@@ -107,8 +101,7 @@ export const SidePanelNewSidebarItemRecordSubPage = () => {
<SidePanelNewSidebarItemRecordItem
key={record.recordId}
record={record}
dragIndex={disableDrag ? undefined : index}
disableDrag={disableDrag}
dragIndex={index}
/>
))}
</SidePanelGroup>
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemViewPickerSubView.tsx
+10 -16
View File
@@ -4,7 +4,7 @@ import { useAddViewToNavigationMenuDraft } from '@/navigation-menu-item/edit/vie
import { useDraftNavigationMenuItems } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItems';
import { useNavigationMenuObjectMetadataFromDraft } from '@/navigation-menu-item/edit/hooks/useNavigationMenuObjectMetadataFromDraft';
import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { getStandardObjectIconColor } from '@/navigation-menu-item/common/utils/getStandardObjectIconColor';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { SidePanelAddToNavigationDroppable } from '@/side-panel/components/SidePanelAddToNavigationDroppable';
@@ -14,8 +14,7 @@ import { SidePanelList } from '@/side-panel/components/SidePanelList';
import { SidePanelSubViewWithSearch } from '@/side-panel/components/SidePanelSubViewWithSearch';
import { useSidePanelFilteredPickerItems } from '@/side-panel/hooks/useSidePanelFilteredPickerItems';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { type View } from '@/views/types/View';
import { ViewKey } from '@/views/types/ViewKey';
import { ViewType } from '@/views/types/ViewType';
@@ -37,12 +36,10 @@ export const SidePanelNewSidebarItemViewPickerSubView = ({
const [searchValue, setSearchValue] = useState('');
const { addViewToDraft } = useAddViewToNavigationMenuDraft();
const { currentDraft } = useDraftNavigationMenuItems();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const { openNavigationMenuItemInSidePanel } =
useOpenNavigationMenuItemInSidePanel();
const { objectMetadataItems } = useObjectMetadataItems();
@@ -76,19 +73,17 @@ export const SidePanelNewSidebarItemViewPickerSubView = ({
? t`No results found`
: t`No custom views available`;
const isDragDisabled = addMenuItemInsertionContext?.disableDrag === true;
const handleSelectView = (view: View) => {
const itemId = addViewToDraft(
view.id,
currentDraft,
addMenuItemInsertionContext?.targetFolderId ?? null,
addMenuItemInsertionContext?.targetIndex,
pendingInsertionNavigationMenuItem?.folderId ?? null,
pendingInsertionNavigationMenuItem?.position,
isDefined(selectedObjectMetadataItem)
? getStandardObjectIconColor(selectedObjectMetadataItem.nameSingular)
: undefined,
);
setAddMenuItemInsertionContext(null);
setPendingInsertionNavigationMenuItem(null);
openNavigationMenuItemInSidePanel({
itemId,
pageTitle: view.name,
@@ -141,8 +136,7 @@ export const SidePanelNewSidebarItemViewPickerSubView = ({
label={view.name}
id={view.id}
onClick={() => handleSelectView(view)}
dragIndex={isDragDisabled ? undefined : index}
disableDrag={isDragDisabled}
dragIndex={index}
payload={{
type: NavigationMenuItemType.VIEW,
viewId: view.id,
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddFolderToNavigationMenu.ts
+9 -14
View File
@@ -5,10 +5,10 @@ import { IconFolder } from 'twenty-ui/display';
import { useAddFolderToNavigationMenuDraft } from '@/navigation-menu-item/edit/folder/hooks/useAddFolderToNavigationMenuDraft';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
export const useAddFolderToNavigationMenu = () => {
const { t } = useLingui();
@@ -19,29 +19,24 @@ export const useAddFolderToNavigationMenu = () => {
);
const { openNavigationMenuItemInSidePanel } =
useOpenNavigationMenuItemInSidePanel();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const currentDraft = isDefined(navigationMenuItemsDraft)
? navigationMenuItemsDraft
: workspaceNavigationMenuItems;
const handleAddFolder = () => {
const targetFolderId = addMenuItemInsertionContext?.targetFolderId ?? null;
const targetIndex = addMenuItemInsertionContext?.targetIndex;
const itemId = addFolderToDraft(
t`New folder`,
currentDraft,
targetFolderId,
targetIndex,
pendingInsertionNavigationMenuItem?.folderId ?? null,
pendingInsertionNavigationMenuItem?.position,
);
setAddMenuItemInsertionContext(null);
setPendingInsertionNavigationMenuItem(null);
openNavigationMenuItemInSidePanel({
itemId,
pageTitle: t`Edit folder`,
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useAddLinkToNavigationMenu.ts
+9 -14
View File
@@ -5,10 +5,10 @@ import { IconLink } from 'twenty-ui/display';
import { useAddLinkToNavigationMenuDraft } from '@/navigation-menu-item/edit/link/hooks/useAddLinkToNavigationMenuDraft';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
import { useOpenNavigationMenuItemInSidePanel } from '@/navigation-menu-item/edit/hooks/useOpenNavigationMenuItemInSidePanel';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/states/navigationMenuItemsDraftState';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
export const useAddLinkToNavigationMenu = () => {
const { t } = useLingui();
@@ -19,30 +19,25 @@ export const useAddLinkToNavigationMenu = () => {
);
const { openNavigationMenuItemInSidePanel } =
useOpenNavigationMenuItemInSidePanel();
const addMenuItemInsertionContext = useAtomStateValue(
addMenuItemInsertionContextState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
);
const [
pendingInsertionNavigationMenuItem,
setPendingInsertionNavigationMenuItem,
] = useAtomState(pendingInsertionNavigationMenuItemState);
const currentDraft = isDefined(navigationMenuItemsDraft)
? navigationMenuItemsDraft
: workspaceNavigationMenuItems;
const handleAddLink = () => {
const targetFolderId = addMenuItemInsertionContext?.targetFolderId ?? null;
const targetIndex = addMenuItemInsertionContext?.targetIndex;
const itemId = addLinkToDraft(
t`Link label`,
'www.example.com',
currentDraft,
targetFolderId,
targetIndex,
pendingInsertionNavigationMenuItem?.folderId ?? null,
pendingInsertionNavigationMenuItem?.position,
);
setAddMenuItemInsertionContext(null);
setPendingInsertionNavigationMenuItem(null);
openNavigationMenuItemInSidePanel({
itemId,
pageTitle: t`Edit link`,
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useFolderPickerSelectionData.ts
+6 -6
View File
@@ -5,7 +5,7 @@ import { useDraftNavigationMenuItemsAllFolders } from '@/navigation-menu-item/ed
import { useDraftNavigationMenuItemsWorkspaceFolders } from '@/navigation-menu-item/edit/hooks/useDraftNavigationMenuItemsWorkspaceFolders';
import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemMoveRemove';
import { useSelectedNavigationMenuItemEditItem } from '@/navigation-menu-item/edit/hooks/useSelectedNavigationMenuItemEditItem';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -41,8 +41,8 @@ const excludeCurrentFolder = <T extends { id: string }>(
export const useFolderPickerSelectionData = () => {
const { closeSidePanelMenu } = useSidePanelMenu();
const { moveToFolder } = useNavigationMenuItemMoveRemove();
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const { selectedItem } = useSelectedNavigationMenuItemEditItem();
const selectedItemType = selectedItem?.type ?? null;
@@ -51,7 +51,7 @@ export const useFolderPickerSelectionData = () => {
const selectedFolderId =
selectedItemType === NavigationMenuItemType.FOLDER
? selectedNavigationMenuItemInEditMode
? selectedNavigationMenuItemIdInEditMode
: null;
const currentFolderId =
selectedItemType === NavigationMenuItemType.FOLDER
@@ -86,8 +86,8 @@ export const useFolderPickerSelectionData = () => {
: excludeCurrentFolder(workspaceFolders, currentFolderId);
const handleSelectFolder = (folderId: string | null) => {
if (isDefined(selectedNavigationMenuItemInEditMode)) {
moveToFolder(selectedNavigationMenuItemInEditMode, folderId);
if (isDefined(selectedNavigationMenuItemIdInEditMode)) {
moveToFolder(selectedNavigationMenuItemIdInEditMode, folderId);
closeSidePanelMenu();
}
};
packages/twenty-front/src/modules/navigation-menu-item/edit/side-panel/hooks/useNavigationMenuItemEditOrganizeActions.ts
+40 -40
View File
@@ -1,31 +1,30 @@
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconColumnInsertRight } from 'twenty-ui/display';
import { addMenuItemInsertionContextState } from '@/navigation-menu-item/common/states/addMenuItemInsertionContextState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { type AddMenuItemInsertionContext } from '@/navigation-menu-item/common/types/AddMenuItemInsertionContext';
import { pendingInsertionNavigationMenuItemState } from '@/navigation-menu-item/common/states/pendingInsertionNavigationMenuItemState';
import { type PendingInsertionNavigationMenuItem } from '@/navigation-menu-item/common/types/PendingInsertionNavigationMenuItem';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { useNavigationMenuItemMoveRemove } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemMoveRemove';
import { useNavigationMenuItemsDraftState } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemsDraftState';
import { type OrganizeActionsProps } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditOrganizeActions';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { useSidePanelSubPageHistory } from '@/side-panel/hooks/useSidePanelSubPageHistory';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { SidePanelPages } from 'twenty-shared/types';
import { type NavigationMenuItem } from '~/generated-metadata/graphql';
const getAddMenuItemInsertionContext = (
const computeInsertionPosition = (
selectedItem: { id: string; folderId?: string | null },
workspaceNavigationMenuItems: NavigationMenuItem[],
offset: 0 | 1,
): AddMenuItemInsertionContext | null => {
const targetFolderId = selectedItem.folderId ?? null;
): PendingInsertionNavigationMenuItem | null => {
const folderId = selectedItem.folderId ?? null;
const itemsInFolderSorted = workspaceNavigationMenuItems
.filter(
(item) =>
(item.folderId ?? null) === targetFolderId &&
(item.folderId ?? null) === folderId &&
!isDefined(item.userWorkspaceId),
)
.sort((a, b) => a.position - b.position);
@@ -38,9 +37,8 @@ const getAddMenuItemInsertionContext = (
}
return {
targetFolderId,
targetIndex: selectedIndexSorted + offset,
disableDrag: true,
folderId,
position: selectedIndexSorted + offset,
};
};
@@ -48,22 +46,22 @@ export const useNavigationMenuItemEditOrganizeActions =
(): OrganizeActionsProps => {
const { t } = useLingui();
const { closeSidePanelMenu } = useSidePanelMenu();
const { navigateSidePanel } = useNavigateSidePanel();
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const { navigateToSidePanelSubPage } = useSidePanelSubPageHistory();
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const setSelectedNavigationMenuItemInEditMode = useSetAtomState(
selectedNavigationMenuItemInEditModeState,
const setSelectedNavigationMenuItemIdInEditMode = useSetAtomState(
selectedNavigationMenuItemIdInEditModeState,
);
const setAddMenuItemInsertionContext = useSetAtomState(
addMenuItemInsertionContextState,
const setPendingInsertionNavigationMenuItem = useSetAtomState(
pendingInsertionNavigationMenuItemState,
);
const { workspaceNavigationMenuItems } = useNavigationMenuItemsDraftState();
const items = useNavigationMenuItemSectionItems();
const { moveUp, moveDown, remove } = useNavigationMenuItemMoveRemove();
const selectedItem = selectedNavigationMenuItemInEditMode
? items.find((item) => item.id === selectedNavigationMenuItemInEditMode)
const selectedItem = selectedNavigationMenuItemIdInEditMode
? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode)
: undefined;
const folderId = selectedItem?.folderId ?? null;
@@ -80,48 +78,50 @@ export const useNavigationMenuItemEditOrganizeActions =
const canMoveUp =
selectedIndexInSiblings > 0 &&
selectedItem != null &&
isDefined(selectedNavigationMenuItemInEditMode);
isDefined(selectedNavigationMenuItemIdInEditMode);
const canMoveDown =
selectedIndexInSiblings >= 0 &&
selectedIndexInSiblings < siblings.length - 1 &&
selectedItem != null &&
isDefined(selectedNavigationMenuItemInEditMode);
isDefined(selectedNavigationMenuItemIdInEditMode);
const handleMoveUp = () => {
if (canMoveUp && isDefined(selectedNavigationMenuItemInEditMode)) {
moveUp(selectedNavigationMenuItemInEditMode);
if (canMoveUp && isDefined(selectedNavigationMenuItemIdInEditMode)) {
moveUp(selectedNavigationMenuItemIdInEditMode);
}
};
const handleMoveDown = () => {
if (canMoveDown && isDefined(selectedNavigationMenuItemInEditMode)) {
moveDown(selectedNavigationMenuItemInEditMode);
if (canMoveDown && isDefined(selectedNavigationMenuItemIdInEditMode)) {
moveDown(selectedNavigationMenuItemIdInEditMode);
}
};
const handleRemove = () => {
if (isDefined(selectedNavigationMenuItemInEditMode)) {
remove(selectedNavigationMenuItemInEditMode);
setSelectedNavigationMenuItemInEditMode(null);
if (isDefined(selectedNavigationMenuItemIdInEditMode)) {
remove(selectedNavigationMenuItemIdInEditMode);
setSelectedNavigationMenuItemIdInEditMode(null);
closeSidePanelMenu();
}
};
const handleAddAtOffset = (offset: 0 | 1) => {
if (!isDefined(selectedItem)) return;
const context = getAddMenuItemInsertionContext(
const insertion = computeInsertionPosition(
selectedItem,
workspaceNavigationMenuItems,
offset,
);
if (!context) return;
setAddMenuItemInsertionContext(context);
navigateSidePanel({
page: SidePanelPages.NavigationMenuAddItem,
pageTitle: t`New menu item`,
pageIcon: IconColumnInsertRight,
resetNavigationStack: true,
});
if (!insertion) return;
const title =
offset === 0 ? t`Add menu item before` : t`Add menu item after`;
setPendingInsertionNavigationMenuItem(insertion);
navigateToSidePanelSubPage(
SidePanelSubPages.NewSidebarItemMainMenu,
title,
);
};
const handleAddBefore = () => handleAddAtOffset(0);
packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx
+5 -5
View File
@@ -10,7 +10,7 @@ import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/Fol
import { NavigationMenuItemType } from 'twenty-shared/types';
import { useUpdateFolderInDraft } from '@/navigation-menu-item/edit/folder/hooks/useUpdateFolderInDraft';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TitleInput } from '@/ui/input/components/TitleInput';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
@@ -29,8 +29,8 @@ export const SidePanelFolderInfo = () => {
sidePanelShouldFocusTitleInputComponentState,
sidePanelPageInfo.instanceId,
);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
const { updateFolderInDraft } = useUpdateFolderInDraft();
@@ -38,11 +38,11 @@ export const SidePanelFolderInfo = () => {
const defaultLabel = t`New folder`;
const placeholder = t`Folder name`;
const selectedItem = selectedNavigationMenuItemInEditMode
const selectedItem = selectedNavigationMenuItemIdInEditMode
? items.find(
(item) =>
item.type === NavigationMenuItemType.FOLDER &&
item.id === selectedNavigationMenuItemInEditMode,
item.id === selectedNavigationMenuItemIdInEditMode,
)
: undefined;
packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx
+5 -5
View File
@@ -5,7 +5,7 @@ import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/display/link/com
import { NavigationMenuItemType } from 'twenty-shared/types';
import { useUpdateLinkInDraft } from '@/navigation-menu-item/edit/link/hooks/useUpdateLinkInDraft';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
import { sidePanelShouldFocusTitleInputComponentState } from '@/side-panel/states/sidePanelShouldFocusTitleInputComponentState';
@@ -21,8 +21,8 @@ export const SidePanelLinkInfo = () => {
sidePanelShouldFocusTitleInputComponentState,
sidePanelPageInfo.instanceId,
);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
const { updateLinkInDraft } = useUpdateLinkInDraft();
@@ -30,11 +30,11 @@ export const SidePanelLinkInfo = () => {
const defaultLabel = t`Link label`;
const placeholder = t`Link label`;
const selectedItem = selectedNavigationMenuItemInEditMode
const selectedItem = selectedNavigationMenuItemIdInEditMode
? items.find(
(item) =>
item.type === NavigationMenuItemType.LINK &&
item.id === selectedNavigationMenuItemInEditMode,
item.id === selectedNavigationMenuItemIdInEditMode,
)
: undefined;
packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ import {
import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types';
import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { SidePanelAskAIInfo } from '@/side-panel/components/SidePanelAskAIInfo';
import { SidePanelFolderInfo } from '@/side-panel/components/SidePanelFolderInfo';
import { SidePanelLinkInfo } from '@/side-panel/components/SidePanelLinkInfo';
@@ -34,8 +34,8 @@ type SidePanelPageInfoProps = {
export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => {
const { theme } = useContext(ThemeContext);
const selectedNavigationMenuItemInEditMode = useAtomStateValue(
selectedNavigationMenuItemInEditModeState,
const selectedNavigationMenuItemIdInEditMode = useAtomStateValue(
selectedNavigationMenuItemIdInEditModeState,
);
const items = useNavigationMenuItemSectionItems();
@@ -46,7 +46,7 @@ export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => {
const isNavigationMenuItemEditPage =
pageChip.page?.page === SidePanelPages.NavigationMenuItemEdit;
const selectedNavItem = isNavigationMenuItemEditPage
? items.find((item) => item.id === selectedNavigationMenuItemInEditMode)
? items.find((item) => item.id === selectedNavigationMenuItemIdInEditMode)
: undefined;
if (isNavigationMenuItemEditPage && isDefined(selectedNavItem)) {
packages/twenty-front/src/modules/side-panel/constants/SidePanelNewSidebarItemFlowSubPages.ts
+11
View File
@@ -0,0 +1,11 @@
import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages';
export const NEW_SIDEBAR_ITEM_FLOW_SIDE_PANEL_SUB_PAGES: SidePanelSubPages[] = [
SidePanelSubPages.NewSidebarItemMainMenu,
SidePanelSubPages.NewSidebarItemViewObjectPicker,
SidePanelSubPages.NewSidebarItemViewPicker,
SidePanelSubPages.NewSidebarItemViewSystemPicker,
SidePanelSubPages.NewSidebarItemObjectPicker,
SidePanelSubPages.NewSidebarItemObjectSystemPicker,
SidePanelSubPages.NewSidebarItemRecord,
];
packages/twenty-front/src/modules/side-panel/constants/SidePanelSubPagesConfig.tsx
+2
View File
@@ -1,4 +1,5 @@
import { SidePanelEditFolderPickerSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelEditFolderPickerSubPage';
import { SidePanelNewSidebarItemPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemPage';
import { SidePanelNewSidebarItemObjectSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSubPage';
import { SidePanelNewSidebarItemObjectSystemPickerSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemObjectSystemPickerSubPage';
import { SidePanelNewSidebarItemRecordSubPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemRecordSubPage';
@@ -18,6 +19,7 @@ export const SIDE_PANEL_SUB_PAGES_CONFIG = new Map<
>([
[SidePanelSubPages.PageLayoutGraphFilter, <SidePanelChartFilterSubPage />],
[SidePanelSubPages.PageLayoutFieldsLayout, <SidePanelFieldsLayoutSubPage />],
[SidePanelSubPages.NewSidebarItemMainMenu, <SidePanelNewSidebarItemPage />],
[
SidePanelSubPages.PageLayoutRecordTableFilter,
<SidePanelRecordTableFilterSubPage />,
packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { addToNavPayloadRegistryState } from '@/navigation-menu-item/common/states/addToNavPayloadRegistryState';
import { selectedNavigationMenuItemInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemInEditModeState';
import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
import { SIDE_PANEL_FOCUS_ID } from '@/side-panel/constants/SidePanelFocusId';
import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
import { isSidePanelClosingState } from '@/side-panel/states/isSidePanelClosingState';
@@ -45,7 +45,7 @@ export const useSidePanelMenu = () => {
isLayoutCustomizationModeEnabledState.atom,
);
const selectedNavigationItemId = store.get(
selectedNavigationMenuItemInEditModeState.atom,
selectedNavigationMenuItemIdInEditModeState.atom,
);
if (
isLayoutCustomizationModeEnabled &&
packages/twenty-front/src/modules/side-panel/states/sidePanelSubPageStackForActiveSidePanelPageSelector.ts
+22
View File
@@ -0,0 +1,22 @@
import { isNonEmptyString } from '@sniptt/guards';
import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
import { sidePanelSubPageStackComponentState } from '@/side-panel/states/sidePanelSubPageStackComponentState';
import { type SidePanelSubPageEntry } from '@/side-panel/types/SidePanelSubPageEntry';
import { createAtomSelector } from '@/ui/utilities/state/jotai/utils/createAtomSelector';
export const sidePanelSubPageStackForActiveSidePanelPageSelector =
createAtomSelector<SidePanelSubPageEntry[]>({
key: 'sidePanelSubPageStackForActiveSidePanelPage',
get: ({ get }) => {
const pageInfo = get(sidePanelPageInfoState);
if (!isNonEmptyString(pageInfo.instanceId)) {
return [];
}
return get(sidePanelSubPageStackComponentState, {
instanceId: pageInfo.instanceId,
});
},
});
packages/twenty-front/src/modules/side-panel/types/SidePanelSubPages.ts
+1
View File
@@ -3,6 +3,7 @@ export enum SidePanelSubPages {
PageLayoutFieldsLayout = 'page-layout-fields-layout',
PageLayoutRecordTableFilter = 'page-layout-record-table-filter',
PageLayoutRecordTableSort = 'page-layout-record-table-sort',
NewSidebarItemMainMenu = 'new-sidebar-item-main-menu',
NewSidebarItemViewObjectPicker = 'new-sidebar-item-view-object-picker',
NewSidebarItemViewPicker = 'new-sidebar-item-view-picker',
NewSidebarItemViewSystemPicker = 'new-sidebar-item-view-system-picker',
packages/twenty-front/src/modules/side-panel/utils/getSidePanelSubPageTitle.ts
+2
View File
@@ -14,6 +14,8 @@ export const getSidePanelSubPageTitle = (
return t`Filters`;
case SidePanelSubPages.PageLayoutRecordTableSort:
return t`Sorts`;
case SidePanelSubPages.NewSidebarItemMainMenu:
return t`Add menu item`;
case SidePanelSubPages.NewSidebarItemViewObjectPicker:
return t`Pick an object`;
case SidePanelSubPages.NewSidebarItemViewPicker: