Merge branch 'main' into fix-minor-ui

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx

@@ -5,6 +5,7 @@ import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIn
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -39,7 +40,7 @@ export const RecordIndexActionMenuBar = () => {
 
   return (
     <BottomBar
-      bottomBarId={`action-bar-${actionMenuId}`}
+      bottomBarId={getActionBarIdFromActionMenuId(actionMenuId)}
       bottomBarHotkeyScopeFromParent={{
         scope: ActionBarHotkeyScope.ActionBar,
       }}

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -7,6 +7,7 @@ import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionM
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
 import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDropdownHotKeyScope';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
@@ -47,14 +48,10 @@ export const RecordIndexActionMenuDropdown = () => {
   const actionMenuDropdownPosition = useRecoilValue(
     extractComponentState(
       recordIndexActionMenuDropdownPositionComponentState,
-      `action-menu-dropdown-${actionMenuId}`,
+      getActionMenuDropdownIdFromActionMenuId(actionMenuId),
     ),
   );
 
-  if (actionMenuEntries.length === 0) {
-    return null;
-  }
-
   //TODO: remove this
   const width = actionMenuEntries.some(
     (actionMenuEntry) => actionMenuEntry.label === 'Remove from favorites',
@@ -68,7 +65,7 @@ export const RecordIndexActionMenuDropdown = () => {
       className="action-menu-dropdown"
     >
       <Dropdown
-        dropdownId={`action-menu-dropdown-${actionMenuId}`}
+        dropdownId={getActionMenuDropdownIdFromActionMenuId(actionMenuId)}
         dropdownHotkeyScope={{
           scope: ActionMenuDropdownHotkeyScope.ActionMenuDropdown,
         }}

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuEffect.tsx

@@ -1,5 +1,7 @@
 import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
@@ -27,13 +29,13 @@ export const RecordIndexActionMenuEffect = () => {
   // previous hotkey scope, and we don't want that here.
   const setIsBottomBarOpened = useSetRecoilComponentStateV2(
     isBottomBarOpenedComponentState,
-    `action-bar-${actionMenuId}`,
+    getActionBarIdFromActionMenuId(actionMenuId),
   );
 
   const isDropdownOpen = useRecoilValue(
     extractComponentState(
       isDropdownOpenComponentState,
-      `action-menu-dropdown-${actionMenuId}`,
+      getActionMenuDropdownIdFromActionMenuId(actionMenuId),
     ),
   );
   const { isRightDrawerOpen } = useRightDrawer();

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx

@@ -6,6 +6,7 @@ import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexAc
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
@@ -64,7 +65,7 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
 
             set(
               isBottomBarOpenedComponentState.atomFamily({
-                instanceId: 'action-bar-story-action-menu',
+                instanceId: getActionBarIdFromActionMenuId('story-action-menu'),
               }),
               true,
             );

packages/twenty-front/src/modules/action-menu/hooks/__tests__/useActionMenu.test.ts

@@ -1,3 +1,5 @@
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 import { useActionMenu } from '../useActionMenu';
@@ -23,6 +25,9 @@ jest.mock('@/ui/layout/dropdown/hooks/useDropdownV2', () => ({
 
 describe('useActionMenu', () => {
   const actionMenuId = 'test-action-menu';
+  const actionBarId = getActionBarIdFromActionMenuId(actionMenuId);
+  const actionMenuDropdownId =
+    getActionMenuDropdownIdFromActionMenuId(actionMenuId);
 
   it('should return the correct functions', () => {
     const { result } = renderHook(() => useActionMenu(actionMenuId));
@@ -40,10 +45,8 @@ describe('useActionMenu', () => {
       result.current.openActionMenuDropdown();
     });
 
-    expect(closeBottomBar).toHaveBeenCalledWith(`action-bar-${actionMenuId}`);
-    expect(openDropdown).toHaveBeenCalledWith(
-      `action-menu-dropdown-${actionMenuId}`,
-    );
+    expect(closeBottomBar).toHaveBeenCalledWith(actionBarId);
+    expect(openDropdown).toHaveBeenCalledWith(actionMenuDropdownId);
   });
 
   it('should call the correct functions when opening action bar', () => {
@@ -53,10 +56,8 @@ describe('useActionMenu', () => {
       result.current.openActionBar();
     });
 
-    expect(closeDropdown).toHaveBeenCalledWith(
-      `action-menu-dropdown-${actionMenuId}`,
-    );
-    expect(openBottomBar).toHaveBeenCalledWith(`action-bar-${actionMenuId}`);
+    expect(closeDropdown).toHaveBeenCalledWith(actionMenuDropdownId);
+    expect(openBottomBar).toHaveBeenCalledWith(actionBarId);
   });
 
   it('should call the correct function when closing action menu dropdown', () => {
@@ -66,9 +67,7 @@ describe('useActionMenu', () => {
       result.current.closeActionMenuDropdown();
     });
 
-    expect(closeDropdown).toHaveBeenCalledWith(
-      `action-menu-dropdown-${actionMenuId}`,
-    );
+    expect(closeDropdown).toHaveBeenCalledWith(actionMenuDropdownId);
   });
 
   it('should call the correct function when closing action bar', () => {
@@ -78,6 +77,6 @@ describe('useActionMenu', () => {
       result.current.closeActionBar();
     });
 
-    expect(closeBottomBar).toHaveBeenCalledWith(`action-bar-${actionMenuId}`);
+    expect(closeBottomBar).toHaveBeenCalledWith(actionBarId);
   });
 });

packages/twenty-front/src/modules/action-menu/hooks/useActionMenu.ts

@@ -1,26 +1,32 @@
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { useBottomBar } from '@/ui/layout/bottom-bar/hooks/useBottomBar';
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 
 export const useActionMenu = (actionMenuId: string) => {
   const { openDropdown, closeDropdown } = useDropdownV2();
   const { openBottomBar, closeBottomBar } = useBottomBar();
 
+  const actionBarId = getActionBarIdFromActionMenuId(actionMenuId);
+  const actionMenuDropdownId =
+    getActionMenuDropdownIdFromActionMenuId(actionMenuId);
+
   const openActionMenuDropdown = () => {
-    closeBottomBar(`action-bar-${actionMenuId}`);
-    openDropdown(`action-menu-dropdown-${actionMenuId}`);
+    closeBottomBar(actionBarId);
+    openDropdown(actionMenuDropdownId);
   };
 
   const openActionBar = () => {
-    closeDropdown(`action-menu-dropdown-${actionMenuId}`);
-    openBottomBar(`action-bar-${actionMenuId}`);
+    closeDropdown(actionMenuDropdownId);
+    openBottomBar(actionBarId);
   };
 
   const closeActionMenuDropdown = () => {
-    closeDropdown(`action-menu-dropdown-${actionMenuId}`);
+    closeDropdown(actionMenuDropdownId);
   };
 
   const closeActionBar = () => {
-    closeBottomBar(`action-bar-${actionMenuId}`);
+    closeBottomBar(actionBarId);
   };
 
   return {

packages/twenty-front/src/modules/action-menu/utils/__tests__/getActionBarIdFromActionMenuId.test.ts

@@ -0,0 +1,9 @@
+import { getActionBarIdFromActionMenuId } from '@/action-menu/utils/getActionBarIdFromActionMenuId';
+
+describe('getActionBarIdFromActionMenuId', () => {
+  it('should return the correct action bar id', () => {
+    expect(getActionBarIdFromActionMenuId('action-menu-id')).toBe(
+      'action-bar-action-menu-id',
+    );
+  });
+});

packages/twenty-front/src/modules/action-menu/utils/__tests__/getActionMenuDropdownIdFromActionMenuId.test.ts

@@ -0,0 +1,9 @@
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
+
+describe('getActionMenuDropdownIdFromActionMenuId', () => {
+  it('should return the correct action menu dropdown id', () => {
+    expect(getActionMenuDropdownIdFromActionMenuId('action-menu-id')).toBe(
+      'action-menu-dropdown-action-menu-id',
+    );
+  });
+});

packages/twenty-front/src/modules/action-menu/utils/__tests__/getActionMenuIdFromRecordIndexId.test.ts

@@ -0,0 +1,9 @@
+import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
+
+describe('getActionMenuIdFromRecordIndexId', () => {
+  it('should return the correct action menu id', () => {
+    expect(getActionMenuIdFromRecordIndexId('record-index-id')).toBe(
+      'action-menu-record-index-record-index-id',
+    );
+  });
+});

packages/twenty-front/src/modules/action-menu/utils/getActionBarIdFromActionMenuId.ts

@@ -0,0 +1,3 @@
+export const getActionBarIdFromActionMenuId = (actionMenuId: string) => {
+  return `action-bar-${actionMenuId}`;
+};

packages/twenty-front/src/modules/action-menu/utils/getActionMenuDropdownIdFromActionMenuId.ts

@@ -0,0 +1,5 @@
+export const getActionMenuDropdownIdFromActionMenuId = (
+  actionMenuId: string,
+) => {
+  return `action-menu-dropdown-${actionMenuId}`;
+};

packages/twenty-front/src/modules/action-menu/utils/getActionMenuIdFromRecordIndexId.ts

@@ -0,0 +1,3 @@
+export const getActionMenuIdFromRecordIndexId = (recordIndexId: string) => {
+  return `action-menu-record-index-${recordIndexId}`;
+};

packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx

@@ -38,6 +38,10 @@ const StyledYear = styled.span`
   color: ${({ theme }) => theme.font.color.light};
 `;
 
+const StyledTitleContainer = styled.div`
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
 export const Calendar = ({
   targetableObject,
 }: {
@@ -131,14 +135,16 @@ export const Calendar = ({
 
           return (
             <Section key={monthTime}>
-              <H3Title
-                title={
-                  <>
-                    {monthLabel}
-                    {isLastMonthOfYear && <StyledYear> {year}</StyledYear>}
-                  </>
-                }
-              />
+              <StyledTitleContainer>
+                <H3Title
+                  title={
+                    <>
+                      {monthLabel}
+                      {isLastMonthOfYear && <StyledYear> {year}</StyledYear>}
+                    </>
+                  }
+                />
+              </StyledTitleContainer>
               <CalendarMonthCard dayTimes={monthDayTimes} />
             </Section>
           );

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -143,12 +143,6 @@ const SettingsDevelopers = lazy(() =>
   })),
 );
 
-const SettingsObjectEdit = lazy(() =>
-  import('~/pages/settings/data-model/SettingsObjectEdit').then((module) => ({
-    default: module.SettingsObjectEdit,
-  })),
-);
-
 const SettingsIntegrations = lazy(() =>
   import('~/pages/settings/integrations/SettingsIntegrations').then(
     (module) => ({
@@ -292,7 +286,6 @@ export const SettingsRoutes = ({
         path={SettingsPath.ObjectDetail}
         element={<SettingsObjectDetailPage />}
       />
-      <Route path={SettingsPath.ObjectEdit} element={<SettingsObjectEdit />} />
       <Route path={SettingsPath.NewObject} element={<SettingsNewObject />} />
       <Route path={SettingsPath.Developers} element={<SettingsDevelopers />} />
       {isCRMMigrationEnabled && (

packages/twenty-front/src/modules/object-metadata/hooks/useUpdateOneObjectMetadataItem.ts

@@ -16,7 +16,7 @@ import { useApolloMetadataClient } from './useApolloMetadataClient';
 export const useUpdateOneObjectMetadataItem = () => {
   const apolloClientMetadata = useApolloMetadataClient();
 
-  const [mutate] = useMutation<
+  const [mutate, { loading }] = useMutation<
     UpdateOneObjectMetadataItemMutation,
     UpdateOneObjectMetadataItemMutationVariables
   >(UPDATE_ONE_OBJECT_METADATA_ITEM, {
@@ -42,5 +42,6 @@ export const useUpdateOneObjectMetadataItem = () => {
 
   return {
     updateOneObjectMetadataItem,
+    loading,
   };
 };

packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardSelection.ts

@@ -1,5 +1,7 @@
 import { useRecoilCallback } from 'recoil';
 
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
+import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
 import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@@ -8,14 +10,16 @@ export const useRecordBoardSelection = (recordBoardId: string) => {
   const { selectedRecordIdsSelector, isRecordBoardCardSelectedFamilyState } =
     useRecordBoardStates(recordBoardId);
 
+  const isActionMenuDropdownOpenState = extractComponentState(
+    isDropdownOpenComponentState,
+    getActionMenuDropdownIdFromActionMenuId(
+      getActionMenuIdFromRecordIndexId(recordBoardId),
+    ),
+  );
+
   const resetRecordSelection = useRecoilCallback(
     ({ snapshot, set }) =>
       () => {
-        const isActionMenuDropdownOpenState = extractComponentState(
-          isDropdownOpenComponentState,
-          `action-menu-dropdown-${recordBoardId}`,
-        );
-
         set(isActionMenuDropdownOpenState, false);
 
         const recordIds = snapshot
@@ -27,7 +31,7 @@ export const useRecordBoardSelection = (recordBoardId: string) => {
         }
       },
     [
-      recordBoardId,
+      isActionMenuDropdownOpenState,
       selectedRecordIdsSelector,
       isRecordBoardCardSelectedFamilyState,
     ],

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -1,5 +1,7 @@
 import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
+import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
+import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
 import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
 import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
@@ -183,14 +185,19 @@ export const RecordBoardCard = ({
     RecordBoardScopeInternalContext,
   );
 
+  const actionMenuId = getActionMenuIdFromRecordIndexId(recordBoardId);
+
+  const actionMenuDropdownId =
+    getActionMenuDropdownIdFromActionMenuId(actionMenuId);
+
   const setActionMenuDropdownPosition = useSetRecoilState(
     extractComponentState(
       recordIndexActionMenuDropdownPositionComponentState,
-      `action-menu-dropdown-${recordBoardId}`,
+      actionMenuDropdownId,
     ),
   );
 
-  const { openActionMenuDropdown } = useActionMenu(recordBoardId);
+  const { openActionMenuDropdown } = useActionMenu(actionMenuId);
 
   const handleActionMenuDropdown = (event: React.MouseEvent) => {
     event.preventDefault();

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx

@@ -64,9 +64,14 @@ export const MultiItemFieldInput = <T,>({
     onCancel?.();
   };
 
+  const handleDropdownCloseOutside = (event: MouseEvent | TouchEvent) => {
+    onCancel?.();
+    event.stopImmediatePropagation();
+  };
+
   useListenClickOutside({
     refs: [containerRef],
-    callback: handleDropdownClose,
+    callback: handleDropdownCloseOutside,
   });
 
   useScopedHotkeys(Key.Escape, handleDropdownClose, hotkeyScope);