Merge branch 'main' into feat/record-group-add-new

twentyhq · Dec 11, 2024 · 8a97d73 · 8a97d73
2 parents 51cc744 + 2c4a77a
commit 8a97d73
Show file tree

Hide file tree

Showing 54 changed files with 605 additions and 194 deletions.
diff --git a/...c/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx b/...c/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx
@@ -5,16 +5,26 @@ import { WorkflowRunRecordActionMenuEntrySetterEffect } from '@/action-menu/acti
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
 export const RecordActionMenuEntriesSetter = () => {
   const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
     contextStoreCurrentObjectMetadataIdComponentState,
   );
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
 
-  if (!isDefined(contextStoreCurrentObjectMetadataId)) {
+  const objectMetadataItem = objectMetadataItems.find(
+    (item) => item.id === contextStoreCurrentObjectMetadataId,
+  );
+
+  if (
+    !isDefined(contextStoreCurrentObjectMetadataId) ||
+    !isDefined(objectMetadataItem)
+  ) {
     return null;
   }
 

diff --git a/...n-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts b/...n-menu/actions/record-actions/single-record/hooks/useManageFavoritesSingleRecordAction.ts
@@ -8,6 +8,7 @@ import { useDeleteFavorite } from '@/favorites/hooks/useDeleteFavorite';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
 import { IconHeart, IconHeartOff, isDefined } from 'twenty-ui';
 
@@ -34,6 +35,10 @@ export const useManageFavoritesSingleRecordAction = ({
 
   const isFavorite = !!foundFavorite;
 
+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
   const registerManageFavoritesSingleRecordAction = ({
     position,
   }: {
@@ -47,6 +52,7 @@ export const useManageFavoritesSingleRecordAction = ({
       type: ActionMenuEntryType.Standard,
       scope: ActionMenuEntryScope.RecordSelection,
       key: 'manage-favorites-single-record',
+      isPinned: isPageHeaderV2Enabled,
       label: isFavorite ? 'Remove from favorites' : 'Add to favorites',
       position,
       Icon: isFavorite ? IconHeartOff : IconHeart,

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
@@ -2,13 +2,15 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-acti
 import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
+import { RecordIndexActionMenuButtons } from '@/action-menu/components/RecordIndexActionMenuButtons';
 import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
 import { RecordIndexActionMenuEffect } from '@/action-menu/components/RecordIndexActionMenuEffect';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 
 export const RecordIndexActionMenu = () => {
   const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
@@ -17,6 +19,12 @@ export const RecordIndexActionMenu = () => {
 
   const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
 
+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
+  const isMobile = useIsMobile();
+
   return (
     <>
       {contextStoreCurrentObjectMetadataId && (
@@ -26,7 +34,11 @@ export const RecordIndexActionMenu = () => {
             onActionExecutedCallback: () => {},
           }}
         >
-          <RecordIndexActionMenuBar />
+          {isPageHeaderV2Enabled ? (
+            <>{!isMobile && <RecordIndexActionMenuButtons />}</>
+          ) : (
+            <RecordIndexActionMenuBar />
+          )}
           <RecordIndexActionMenuDropdown />
           <ActionMenuConfirmationModals />
           <RecordIndexActionMenuEffect />

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBar.tsx
@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import { RecordIndexActionMenuBarAllActionsButton } from '@/action-menu/components/RecordIndexActionMenuBarAllActionsButton';
 import { RecordIndexActionMenuBarEntry } from '@/action-menu/components/RecordIndexActionMenuBarEntry';
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
@@ -10,6 +8,7 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
 
 const StyledLabel = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -33,7 +32,6 @@ export const RecordIndexActionMenuBar = () => {
   );
 
   const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
-
   if (contextStoreNumberOfSelectedRecords === 0) {
     return null;
   }

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarEntry.tsx
@@ -1,8 +1,7 @@
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
-
 type RecordIndexActionMenuBarEntryProps = {
   entry: ActionMenuEntry;
 };
@@ -13,11 +12,9 @@ const StyledButton = styled.div`
   cursor: pointer;
   display: flex;
   justify-content: center;
-
   padding: ${({ theme }) => theme.spacing(2)};
   transition: background ${({ theme }) => theme.animation.duration.fast} ease;
   user-select: none;
-
   &:hover {
     background: ${({ theme }) => theme.background.tertiary};
   }
@@ -32,6 +29,7 @@ export const RecordIndexActionMenuBarEntry = ({
   entry,
 }: RecordIndexActionMenuBarEntryProps) => {
   const theme = useTheme();
+
   return (
     <StyledButton onClick={() => entry.onClick?.()}>
       {entry.Icon && <entry.Icon size={theme.icon.size.md} />}

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx
@@ -0,0 +1,37 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { Button } from 'twenty-ui';
+
+export const RecordIndexActionMenuButtons = () => {
+  const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
+  );
+
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+
+  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+
+  if (contextStoreNumberOfSelectedRecords === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {pinnedEntries.map((entry, index) => (
+        <Button
+          key={index}
+          Icon={entry.Icon}
+          size="small"
+          variant="secondary"
+          accent="default"
+          title={entry.label}
+          onClick={() => entry.onClick?.()}
+          ariaLabel={entry.label}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
@@ -1,6 +1,7 @@
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
 import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
+import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
@@ -29,6 +30,10 @@ export const RecordShowActionMenu = ({
 
   const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
 
+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
   // TODO: refactor RecordShowPageBaseHeader to use the context store
 
   return (
@@ -40,15 +45,19 @@ export const RecordShowActionMenu = ({
             onActionExecutedCallback: () => {},
           }}
         >
-          <RecordShowPageBaseHeader
-            {...{
-              isFavorite,
-              record,
-              objectMetadataItem,
-              objectNameSingular,
-              handleFavoriteButtonClick,
-            }}
-          />
+          {isPageHeaderV2Enabled ? (
+            <RecordShowActionMenuButtons />
+          ) : (
+            <RecordShowPageBaseHeader
+              {...{
+                isFavorite,
+                record,
+                objectMetadataItem,
+                objectNameSingular,
+                handleFavoriteButtonClick,
+              }}
+            />
+          )}
           <ActionMenuConfirmationModals />
           <RecordActionMenuEntriesSetter />
           {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}

diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx
@@ -0,0 +1,33 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { Button, useIsMobile } from 'twenty-ui';
+
+export const RecordShowActionMenuButtons = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+
+  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+
+  const isMobile = useIsMobile();
+
+  return (
+    <>
+      {!isMobile &&
+        pinnedEntries.map((entry, index) => (
+          <Button
+            key={index}
+            Icon={entry.Icon}
+            size="small"
+            variant="secondary"
+            accent="default"
+            title={entry.label}
+            onClick={() => entry.onClick?.()}
+            ariaLabel={entry.label}
+          />
+        ))}
+      <PageHeaderOpenCommandMenuButton key="more" />
+    </>
+  );
+};
diff --git a/...front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx b/...front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx
@@ -1,7 +1,3 @@
-import { expect, jest } from '@storybook/jest';
-import { Meta, StoryObj } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
-
 import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
@@ -11,11 +7,14 @@ import {
   ActionMenuEntryType,
 } 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';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
+import { expect, jest } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/test';
+import { RecoilRoot } from 'recoil';
 import { IconTrash, RouterDecorator } from 'twenty-ui';
 
 const deleteMock = jest.fn();
@@ -40,16 +39,13 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
                 selectedRecordIds: ['1', '2', '3'],
               },
             );
-
             set(
               contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
                 instanceId: 'story-action-menu',
               }),
               3,
             );
-
             const map = new Map<string, ActionMenuEntry>();
-
             map.set('delete', {
               isPinned: true,
               scope: ActionMenuEntryScope.RecordSelection,
@@ -60,14 +56,12 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
               Icon: IconTrash,
               onClick: deleteMock,
             });
-
             set(
               actionMenuEntriesComponentState.atomFamily({
                 instanceId: 'story-action-menu',
               }),
               map,
             );
-
             set(
               isBottomBarOpenedComponentState.atomFamily({
                 instanceId: getActionBarIdFromActionMenuId('story-action-menu'),
@@ -117,10 +111,8 @@ export const WithButtonClicks: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-
     const deleteButton = await canvas.findByText('Delete');
     await userEvent.click(deleteButton);
-
     await waitFor(() => {
       expect(deleteMock).toHaveBeenCalled();
     });

diff --git a/.../src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx b/.../src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx
@@ -6,15 +6,13 @@ import {
 import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-
 import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui';
 
 const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
   title: 'Modules/ActionMenu/RecordIndexActionMenuBarEntry',
   component: RecordIndexActionMenuBarEntry,
   decorators: [ComponentDecorator],
 };
-
 export default meta;
 
 type Story = StoryObj<typeof RecordIndexActionMenuBarEntry>;

diff --git a/packages/twenty-front/src/modules/auth/components/Logo.tsx b/packages/twenty-front/src/modules/auth/components/Logo.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { getImageAbsoluteURI, isDefined } from 'twenty-ui';
+import { isNonEmptyString } from '@sniptt/guards';
+import { getImageAbsoluteURI } from 'twenty-ui';
 
 type LogoProps = {
   primaryLogo?: string | null;
@@ -48,7 +49,7 @@ export const Logo = (props: LogoProps) => {
   const primaryLogoUrl = getImageAbsoluteURI(
     props.primaryLogo ?? defaultPrimaryLogoUrl,
   );
-  const secondaryLogoUrl = isDefined(props.secondaryLogo)
+  const secondaryLogoUrl = isNonEmptyString(props.secondaryLogo)
     ? getImageAbsoluteURI(props.secondaryLogo)
     : null;
 

diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@@ -42,9 +42,9 @@ import { getTimeFormatFromWorkspaceTimeFormat } from '@/localization/utils/getTi
 import { currentUserState } from '../states/currentUserState';
 import { tokenPairState } from '../states/tokenPairState';
 
-import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { useIsCurrentLocationOnAWorkspaceSubdomain } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspaceSubdomain';
+import { useLastAuthenticatedWorkspaceDomain } from '@/domain-manager/hooks/useLastAuthenticatedWorkspaceDomain';
 import { useReadWorkspaceSubdomainFromCurrentLocation } from '@/domain-manager/hooks/useReadWorkspaceSubdomainFromCurrentLocation';
 import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';