Merge branch 'main' into fast-follows-0.34

twentyhq · Dec 12, 2024 · 9c1aec2 · 9c1aec2
2 parents ecf9fef + 05cd0d1
commit 9c1aec2
Show file tree

Hide file tree

Showing 120 changed files with 2,581 additions and 952 deletions.
diff --git a/packages/twenty-e2e-testing/.env.example b/packages/twenty-e2e-testing/.env.example
@@ -1,5 +1,5 @@
 # Note that provide always without trailing forward slash to have expected behaviour
-FRONTEND_BASE_URL=http://localhost:3001
+FRONTEND_BASE_URL=http://app.localhost:3001
 CI_DEFAULT_BASE_URL=https://demo.twenty.com
 DEFAULT_LOGIN=[email protected]
 NEW_WORKSPACE_LOGIN=[email protected]

diff --git a/packages/twenty-e2e-testing/lib/pom/loginPage.ts b/packages/twenty-e2e-testing/lib/pom/loginPage.ts
@@ -10,7 +10,7 @@ export class LoginPage {
   private readonly forgotPasswordButton: Locator;
   private readonly passwordField: Locator;
   private readonly revealPasswordButton: Locator;
-  private readonly signInButton: Locator;
+  readonly signInButton: Locator;
   private readonly signUpButton: Locator;
   private readonly previewImageButton: Locator;
   private readonly uploadImageButton: Locator;

diff --git a/packages/twenty-e2e-testing/playwright.config.ts b/packages/twenty-e2e-testing/playwright.config.ts
@@ -16,12 +16,12 @@ export default defineConfig({
   fullyParallel: true, // false only for specific tests, overwritten in specific projects or global setups of projects
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined, // undefined = amount of projects * amount of tests
+  workers: 1, // 1 worker = 1 test at the time, tests can't be parallelized
   timeout: 30 * 1000, // timeout can be changed
   use: {
     baseURL: process.env.CI
       ? process.env.CI_DEFAULT_BASE_URL
-      : (process.env.FRONTEND_BASE_URL ?? 'http://localhost:3001'),
+      : (process.env.FRONTEND_BASE_URL ?? 'http://app.localhost:3001'),
     trace: 'retain-on-failure', // trace takes EVERYTHING from page source, records every single step, should be used only when normal debugging won't work
     screenshot: 'on', // either 'on' here or in different method in modules, if 'on' all screenshots are overwritten each time the test is run
     headless: true, // instead of changing it to false, run 'yarn test:e2e:debug' or 'yarn test:e2e:ui'
@@ -56,6 +56,10 @@ export default defineConfig({
       },
       dependencies: ['Login setup'],
     },
+    {
+      name: 'Authentication',
+      testMatch: /authentication\/.*\.spec\.ts/,
+    },
 
     //{
     //  name: 'webkit',

diff --git a/packages/twenty-e2e-testing/tests/authentication/login.spec.ts b/packages/twenty-e2e-testing/tests/authentication/login.spec.ts
@@ -0,0 +1,17 @@
+import { test as base, expect } from '../../lib/fixtures/screenshot';
+import { LoginPage } from '../../lib/pom/loginPage';
+
+// fixture
+const test = base.extend<{ loginPage: LoginPage }>({
+  loginPage: async ({ page }, use) => {
+    await use(new LoginPage(page));
+  },
+});
+
+test('Check login with email', async ({ loginPage }) => {
+  await loginPage.typeEmail(process.env.DEFAULT_LOGIN);
+  await loginPage.clickContinueButton();
+  await loginPage.typePassword(process.env.DEFAULT_PASSWORD);
+  await loginPage.clickSignInButton();
+  await expect(loginPage.signInButton).not.toBeVisible();
+});
diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -9,7 +9,7 @@ import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdow
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -20,7 +20,6 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
@@ -57,7 +56,7 @@ type ObjectFilterDropdownFilterSelectProps = {
 export const ObjectFilterDropdownFilterSelect = ({
   isAdvancedFilterButtonVisible,
 }: ObjectFilterDropdownFilterSelectProps) => {
-  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+  const { recordIndexId } = useRecordIndexContextOrThrow();
 
   const {
     setObjectFilterDropdownSearchInput,

diff --git a/...d/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx b/...d/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
@@ -1,9 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
@@ -19,13 +22,17 @@ import { FieldMetadataType } from '~/generated/graphql';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 
 const meta: Meta<typeof MultipleFiltersDropdownButton> = {
   title:
     'Modules/ObjectRecord/ObjectFilterDropdown/MultipleFiltersDropdownButton',
   component: MultipleFiltersDropdownButton,
   decorators: [
     (Story) => {
+      const companyObjectMetadataItem = generatedMockObjectMetadataItems.find(
+        (item) => item.nameSingular === CoreObjectNameSingular.Company,
+      )!;
       const instanceId = 'entity-tasks-filter-scope';
       const setAvailableFilterDefinitions = useSetRecoilComponentStateV2(
         availableFilterDefinitionsComponentState,
@@ -91,19 +98,30 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
         },
       ]);
       return (
-        <ObjectFilterDropdownComponentInstanceContext.Provider
-          value={{ instanceId }}
+        <RecordIndexContextProvider
+          value={{
+            indexIdentifierUrl: () => '',
+            onIndexRecordsLoaded: () => {},
+            objectNamePlural: CoreObjectNamePlural.Company,
+            objectNameSingular: CoreObjectNameSingular.Company,
+            objectMetadataItem: companyObjectMetadataItem,
+            recordIndexId: instanceId,
+          }}
         >
-          <RecordTableComponentInstanceContext.Provider
-            value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+          <ObjectFilterDropdownComponentInstanceContext.Provider
+            value={{ instanceId }}
           >
-            <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-              <ObjectFilterDropdownScope filterScopeId={instanceId}>
-                <Story />
-              </ObjectFilterDropdownScope>
-            </ViewComponentInstanceContext.Provider>
-          </RecordTableComponentInstanceContext.Provider>
-        </ObjectFilterDropdownComponentInstanceContext.Provider>
+            <RecordTableComponentInstanceContext.Provider
+              value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+            >
+              <ViewComponentInstanceContext.Provider value={{ instanceId }}>
+                <ObjectFilterDropdownScope filterScopeId={instanceId}>
+                  <Story />
+                </ObjectFilterDropdownScope>
+              </ViewComponentInstanceContext.Provider>
+            </RecordTableComponentInstanceContext.Provider>
+          </ObjectFilterDropdownComponentInstanceContext.Provider>
+        </RecordIndexContextProvider>
       );
     },
     ObjectMetadataItemsDecorator,

diff --git a/...record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx b/...record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx
@@ -4,7 +4,7 @@ import {
   IconHandMove,
   IconSortAZ,
   IconSortZA,
-  MenuItem,
+  MenuItemSelect,
 } from 'twenty-ui';
 
 import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
@@ -13,8 +13,8 @@ import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupS
 import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
 export const ObjectOptionsDropdownRecordGroupSortContent = () => {
   const { currentContentId, onContentChange, closeDropdown } =
@@ -24,7 +24,7 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
     hiddenRecordGroupIdsComponentSelector,
   );
 
-  const setRecordGroupSort = useSetRecoilComponentStateV2(
+  const [recordGroupSort, setRecordGroupSort] = useRecoilComponentStateV2(
     recordIndexRecordGroupSortComponentState,
   );
 
@@ -51,24 +51,27 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
         Sort
       </DropdownMenuHeader>
       <DropdownMenuItemsContainer>
-        <MenuItem
+        <MenuItemSelect
           onClick={() => handleRecordGroupSortChange(RecordGroupSort.Manual)}
           LeftIcon={IconHandMove}
           text={RecordGroupSort.Manual}
+          selected={recordGroupSort === RecordGroupSort.Manual}
         />
-        <MenuItem
+        <MenuItemSelect
           onClick={() =>
             handleRecordGroupSortChange(RecordGroupSort.Alphabetical)
           }
           LeftIcon={IconSortAZ}
           text={RecordGroupSort.Alphabetical}
+          selected={recordGroupSort === RecordGroupSort.Alphabetical}
         />
-        <MenuItem
+        <MenuItemSelect
           onClick={() =>
             handleRecordGroupSortChange(RecordGroupSort.ReverseAlphabetical)
           }
           LeftIcon={IconSortZA}
           text={RecordGroupSort.ReverseAlphabetical}
+          selected={recordGroupSort === RecordGroupSort.ReverseAlphabetical}
         />
       </DropdownMenuItemsContainer>
     </>

diff --git a/...d/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx b/...d/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx
@@ -7,7 +7,7 @@ import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dro
 import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId';
 import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext';
 import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/types/ObjectOptionsContentId';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
@@ -76,11 +76,10 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
       )!;
 
       return (
-        <RecordIndexRootPropsContext.Provider
+        <RecordIndexContextProvider
           value={{
             indexIdentifierUrl: () => '',
             onIndexRecordsLoaded: () => {},
-            onCreateRecord: () => {},
             objectNamePlural: 'companies',
             objectNameSingular: 'company',
             objectMetadataItem: companyObjectMetadataItem,
@@ -102,7 +101,7 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
               <Story />
             </DropdownMenu>
           </ObjectOptionsDropdownContext.Provider>
-        </RecordIndexRootPropsContext.Provider>
+        </RecordIndexContextProvider>
       );
     },
   ],

diff --git a/.../object-record/object-options-dropdown/hooks/__tests__/useSearchRecordGroupField.test.tsx b/.../object-record/object-options-dropdown/hooks/__tests__/useSearchRecordGroupField.test.tsx
@@ -1,5 +1,5 @@
 import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
@@ -11,13 +11,13 @@ describe('useSearchRecordGroupField', () => {
     renderHook(() => useSearchRecordGroupField(), {
       wrapper: ({ children }) => (
         <RecoilRoot>
-          <RecordIndexRootPropsContext.Provider value={contextValue}>
+          <RecordIndexContextProvider value={contextValue}>
             <ViewComponentInstanceContext.Provider
               value={{ instanceId: 'myViewInstanceId' }}
             >
               {children}
             </ViewComponentInstanceContext.Provider>
-          </RecordIndexRootPropsContext.Provider>
+          </RecordIndexContextProvider>
         </RecoilRoot>
       ),
     });

diff --git a/...ront/src/modules/object-record/object-options-dropdown/hooks/useSearchRecordGroupField.ts b/...ront/src/modules/object-record/object-options-dropdown/hooks/useSearchRecordGroupField.ts
@@ -1,11 +1,11 @@
 import { objectOptionsDropdownSearchInputComponentState } from '@/object-record/object-options-dropdown/states/objectOptionsDropdownSearchInputComponentState';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const useSearchRecordGroupField = () => {
-  const { objectMetadataItem } = useContext(RecordIndexRootPropsContext);
+  const { objectMetadataItem } = useRecordIndexContextOrThrow();
 
   const [recordGroupFieldSearchInput, setRecordGroupFieldSearchInput] =
     useRecoilComponentStateV2(objectOptionsDropdownSearchInputComponentState);

diff --git a/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -5,7 +5,7 @@ import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui';
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -16,7 +16,6 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useContext } from 'react';
 import { SORT_DIRECTIONS } from '../types/SortDirection';
 
 export const StyledInput = styled.input`
@@ -77,7 +76,7 @@ export const ObjectSortDropdownButton = ({
     resetSearchInput,
   } = useObjectSortDropdown();
 
-  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+  const { recordIndexId } = useRecordIndexContextOrThrow();
 
   const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
 

diff --git a/...-record/record-board/record-board-column/hooks/useAggregateRecordsForRecordBoardColumn.ts b/...-record/record-board/record-board-column/hooks/useAggregateRecordsForRecordBoardColumn.ts
@@ -1,7 +1,7 @@
 import { useAggregateRecords } from '@/object-record/hooks/useAggregateRecords';
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { buildRecordGqlFieldsAggregate } from '@/object-record/record-board/record-board-column/utils/buildRecordGqlFieldsAggregate';
+import { buildRecordGqlFieldsAggregateForRecordBoard } from '@/object-record/record-board/record-board-column/utils/buildRecordGqlFieldsAggregateForRecordBoard';
 import { computeAggregateValueAndLabel } from '@/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
@@ -42,7 +42,7 @@ export const useAggregateRecordsForRecordBoardColumn = () => {
     );
   }
 
-  const recordGqlFieldsAggregate = buildRecordGqlFieldsAggregate({
+  const recordGqlFieldsAggregate = buildRecordGqlFieldsAggregateForRecordBoard({
     objectMetadataItem: objectMetadataItem,
     recordIndexKanbanAggregateOperation: recordIndexKanbanAggregateOperation,
     kanbanFieldName: kanbanFieldName,
@@ -74,12 +74,13 @@ export const useAggregateRecordsForRecordBoardColumn = () => {
     skip: !isAggregateQueryEnabled,
   });
 
-  const { value, label } = computeAggregateValueAndLabel(
+  const { value, label } = computeAggregateValueAndLabel({
     data,
     objectMetadataItem,
-    recordIndexKanbanAggregateOperation,
-    kanbanFieldName,
-  );
+    fieldMetadataId: recordIndexKanbanAggregateOperation?.fieldMetadataId,
+    aggregateOperation: recordIndexKanbanAggregateOperation?.operation,
+    fallbackFieldName: kanbanFieldName,
+  });
 
   return {
     aggregateValue: isAggregateQueryEnabled ? value : recordCount,