Merge branch 'main' into fix#5960

oss-gg/twenty-side-quest/1-quote-tweet-20-oss-gg-launch.md

@@ -1,6 +1,6 @@
-**Side Quest**: Meme Magic - Craft a meme where a brick plays a role. Tweet it, and tag us @papermarkio to submit.
-**Points**: 150 Points
-**Proof**: Add a screenshot of meme to the PR description. Add a link to your tweet in the list below.
+**Side Quest**: Like & Re-Tweet oss.gg Launch Tweet. Quote-tweet it tagging @twentycrm to say you’ll be contributing.
+**Points**: 50 Points
+**Proof**: Add a screenshot of the retweet to the PR description. Add a link to your retweet in the list below.
 
 Please follow the following schema:
 

oss-gg/twenty-side-quest/2-tweet-about-fav-twenty-feature.md

@@ -1,6 +1,6 @@
-**Side Quest**: Meme Magic - Craft a meme where a brick plays a role. Tweet it, and tag us @papermarkio to submit.
-**Points**: 150 Points
-**Proof**: Add a screenshot of meme to the PR description. Add a link to your tweet in the list below.
+**Side Quest**: Share a tweet about your favorite feature in Twenty. Tweet about your favorite feature in Twenty and mention @twentycrm.
+**Points**: 50 Points
+**Proof**: Add a screenshot of the tweet to the PR description. Add a link to your tweet in the list below.
 
 Please follow the following schema:
 

oss-gg/twenty-side-quest/3-bug-report.md

@@ -0,0 +1,23 @@
+**Side Quest**: Create a bug report. Use the Twenty bug issue template to report a bug in detail, including steps to reproduce it.
+**Points**: 50-150 Points
+**Proof**: Add a link to your bug report in the list below.
+
+Please follow the following schema:
+
+---
+
+» 05-April-2024 by YOUR NAME
+» Link to bug report: https://github.com/twentyhq/twenty/issues/...
+
+---
+
+////////////////////////////
+
+Your turn 👇
+
+////////////////////////////
+
+» 10-October-2024 by Devansh Baghel
+» Link to bug report: https://github.com/twentyhq/twenty/issues/7560
+
+---

oss-gg/twenty-side-quest/3-meme-magic.md → oss-gg/twenty-side-quest/4-meme-magic.md

@@ -1,4 +1,4 @@
-**Side Quest**: Meme Magic - Craft a meme where a brick plays a role. Tweet it, and tag us @papermarkio to submit.
+**Side Quest**: Meme Magic: Craft a meme where the number twenty plays a role. Tweet it, and tag @twentycrm.
 **Points**: 150 Points
 **Proof**: Add a screenshot of meme to the PR description. Add a link to your tweet in the list below.
 

oss-gg/twenty-side-quest/4-gif-magic.md → oss-gg/twenty-side-quest/5-gif-magic.md

@@ -1,4 +1,4 @@
-**Side Quest**: GIF Magic - Craft a GIF where a brick plays a role. Upload it to GIPHY with tags 'open source', 'foss', 'papermarkio'.
+**Side Quest**: Gif Magic: Create a gif related to Twenty. Tweet it, and tag  @twentycrm.
 **Points**: 150 Points
 **Proof**: Add a screenshot of GIF on Giphy to the PR description. Add a link to your GIPHY in the list below.
 
@@ -7,7 +7,7 @@ Please follow the following schema:
 ---
 
 » 05-April-2024 by YOUR NAME
-» Link to Tweet: https://giphy.com/...
+» Link to gif: https://giphy.com/...
 
 ---
 
@@ -18,6 +18,6 @@ Your turn 👇
 ////////////////////////////
 
 » 01-October-2024 by YOUR NAME
-» Link to Tweet: https://x.com/...
+» Link to gif: https://giphy.com/...
 
 ---

oss-gg/twenty-side-quest/5-quest-wizard.md → oss-gg/twenty-side-quest/6-quest-wizard.md

@@ -1,4 +1,4 @@
-**Side Quest**: Complete all papermarkio side quests
+**Side Quest**: Complete all Twenty side quests
 **Points**: 300 Points
 **Proof**: Add screenshots for each side quest to the PR description. Add your name to the list below.
 

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -352,15 +352,12 @@ export enum FieldMetadataType {
   Currency = 'CURRENCY',
   Date = 'DATE',
   DateTime = 'DATE_TIME',
-  Email = 'EMAIL',
   Emails = 'EMAILS',
   FullName = 'FULL_NAME',
-  Link = 'LINK',
   Links = 'LINKS',
   MultiSelect = 'MULTI_SELECT',
   Number = 'NUMBER',
   Numeric = 'NUMERIC',
-  Phone = 'PHONE',
   Phones = 'PHONES',
   Position = 'POSITION',
   Rating = 'RATING',

packages/twenty-front/src/generated/graphql.tsx

@@ -263,15 +263,12 @@ export enum FieldMetadataType {
   Currency = 'CURRENCY',
   Date = 'DATE',
   DateTime = 'DATE_TIME',
-  Email = 'EMAIL',
   Emails = 'EMAILS',
   FullName = 'FULL_NAME',
-  Link = 'LINK',
   Links = 'LINKS',
   MultiSelect = 'MULTI_SELECT',
   Number = 'NUMBER',
   Numeric = 'NUMERIC',
-  Phone = 'PHONE',
   Phones = 'PHONES',
   Position = 'POSITION',
   Rating = 'RATING',

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

@@ -0,0 +1,49 @@
+import styled from '@emotion/styled';
+
+import { ActionMenuBarEntry } from '@/action-menu/components/ActionMenuBarEntry';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+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 { useRecoilValue } from 'recoil';
+
+const StyledLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const ActionMenuBar = () => {
+  const contextStoreTargetedRecordIds = useRecoilValue(
+    contextStoreTargetedRecordIdsState,
+  );
+
+  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
+    ActionMenuComponentInstanceContext,
+  );
+
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentState,
+  );
+
+  return (
+    <BottomBar
+      bottomBarId={`action-bar-${actionMenuId}`}
+      bottomBarHotkeyScopeFromParent={{
+        scope: ActionBarHotkeyScope.ActionBar,
+      }}
+    >
+      <StyledLabel>
+        {contextStoreTargetedRecordIds.length} selected:
+      </StyledLabel>
+      {actionMenuEntries.map((entry, index) => (
+        <ActionMenuBarEntry key={index} entry={entry} />
+      ))}
+    </BottomBar>
+  );
+};

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

@@ -0,0 +1,49 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
+import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
+
+type ActionMenuBarEntryProps = {
+  entry: ActionMenuEntry;
+};
+
+const StyledButton = styled.div<{ accent: MenuItemAccent }>`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) =>
+    props.accent === 'danger'
+      ? props.theme.color.red
+      : props.theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+  transition: background 0.1s ease;
+  user-select: none;
+
+  &:hover {
+    background: ${({ theme, accent }) =>
+      accent === 'danger'
+        ? theme.background.danger
+        : theme.background.tertiary};
+  }
+`;
+
+const StyledButtonLabel = styled.div`
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const ActionMenuBarEntry = ({ entry }: ActionMenuBarEntryProps) => {
+  const theme = useTheme();
+  return (
+    <StyledButton
+      accent={entry.accent ?? 'default'}
+      onClick={() => entry.onClick?.()}
+    >
+      {entry.Icon && <entry.Icon size={theme.icon.size.md} />}
+      <StyledButtonLabel>{entry.label}</StyledButtonLabel>
+    </StyledButton>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+export const ActionMenuConfirmationModals = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentState,
+  );
+
+  return (
+    <div data-select-disable>
+      {actionMenuEntries.map((actionMenuEntry, index) =>
+        actionMenuEntry.ConfirmationModal ? (
+          <div key={index}>{actionMenuEntry.ConfirmationModal}</div>
+        ) : null,
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+
+import { PositionType } from '../types/PositionType';
+
+import { actionMenuDropdownPositionComponentState } from '@/action-menu/states/actionMenuDropdownPositionComponentState';
+import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDropdownHotKeyScope';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+
+type StyledContainerProps = {
+  position: PositionType;
+};
+
+const StyledContainerActionMenuDropdown = styled.div<StyledContainerProps>`
+  align-items: flex-start;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  display: flex;
+  flex-direction: column;
+
+  left: ${(props) => `${props.position.x}px`};
+  position: fixed;
+  top: ${(props) => `${props.position.y}px`};
+
+  transform: translateX(-50%);
+  width: auto;
+`;
+
+export const ActionMenuDropdown = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentState,
+  );
+
+  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
+    ActionMenuComponentInstanceContext,
+  );
+
+  const actionMenuDropdownPosition = useRecoilValue(
+    extractComponentState(
+      actionMenuDropdownPositionComponentState,
+      `action-menu-dropdown-${actionMenuId}`,
+    ),
+  );
+
+  //TODO: remove this
+  const width = actionMenuEntries.some(
+    (actionMenuEntry) => actionMenuEntry.label === 'Remove from favorites',
+  )
+    ? 200
+    : undefined;
+
+  return (
+    <StyledContainerActionMenuDropdown
+      position={actionMenuDropdownPosition}
+      className="context-menu"
+    >
+      <Dropdown
+        dropdownId={`action-menu-dropdown-${actionMenuId}`}
+        dropdownHotkeyScope={{
+          scope: ActionMenuDropdownHotkeyScope.ActionMenuDropdown,
+        }}
+        data-select-disable
+        dropdownMenuWidth={width}
+        dropdownComponents={actionMenuEntries.map((item, index) => (
+          <MenuItem
+            key={index}
+            LeftIcon={item.Icon}
+            onClick={item.onClick}
+            accent={item.accent}
+            text={item.label}
+          />
+        ))}
+      />
+    </StyledContainerActionMenuDropdown>
+  );
+};

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

@@ -0,0 +1,46 @@
+import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { contextStoreTargetedRecordIdsState } from '@/context-store/states/contextStoreTargetedRecordIdsState';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+
+export const ActionMenuEffect = () => {
+  const contextStoreTargetedRecordIds = useRecoilValue(
+    contextStoreTargetedRecordIdsState,
+  );
+
+  const actionMenuId = useAvailableComponentInstanceIdOrThrow(
+    ActionMenuComponentInstanceContext,
+  );
+
+  const { openActionBar, closeActionBar } = useActionMenu(actionMenuId);
+
+  const isDropdownOpen = useRecoilValue(
+    extractComponentState(
+      isDropdownOpenComponentState,
+      `action-menu-dropdown-${actionMenuId}`,
+    ),
+  );
+
+  useEffect(() => {
+    if (contextStoreTargetedRecordIds.length > 0 && !isDropdownOpen) {
+      // We only handle opening the ActionMenuBar here, not the Dropdown.
+      // The Dropdown is already managed by sync handlers for events like
+      // right-click to open and click outside to close.
+      openActionBar();
+    }
+    if (contextStoreTargetedRecordIds.length === 0) {
+      closeActionBar();
+    }
+  }, [
+    contextStoreTargetedRecordIds,
+    openActionBar,
+    closeActionBar,
+    isDropdownOpen,
+  ]);
+
+  return null;
+};

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

@@ -0,0 +1,25 @@
+import { EmptyActionMenuEntriesEffect } from '@/action-menu/components/EmptyActionMenuEntriesEffect';
+import { NonEmptyActionMenuEntriesEffect } from '@/action-menu/components/NonEmptyActionMenuEntriesEffect';
+import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { useRecoilValue } from 'recoil';
+
+export const ActionMenuEntriesProvider = () => {
+  //TODO: Refactor this
+  const contextStoreCurrentObjectMetadataId = useRecoilValue(
+    contextStoreCurrentObjectMetadataIdState,
+  );
+
+  return (
+    <>
+      {contextStoreCurrentObjectMetadataId ? (
+        <NonEmptyActionMenuEntriesEffect
+          contextStoreCurrentObjectMetadataId={
+            contextStoreCurrentObjectMetadataId
+          }
+        />
+      ) : (
+        <EmptyActionMenuEntriesEffect />
+      )}
+    </>
+  );
+};