Refactor actions (#8761)

Closes #8737 - Refactored actions by creating hooks to add the possibility to register actions programatically. - Small fixes from #8610 review - Fixed shortcuts display inside the command menu - Removed `actionMenuEntriesComponentState` and introduced `actionMenuEntriesComponentSelector`
2024-11-27 15:08:27 +01:00
parent 0d6a6ec678
commit a9cb1e9b0d
40 changed files with 682 additions and 479 deletions
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@ -9,7 +9,7 @@ import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import {
@ -35,6 +35,7 @@ import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
@ -67,6 +68,8 @@ type CommandGroupConfig = {
    to?: string;
    onClick?: () => void;
    key?: string;
+    firstHotKey?: string;
+    secondHotKey?: string;
  };
 };

@ -128,7 +131,6 @@ export const CommandMenu = () => {
    commandMenuSearchState,
  );
  const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300); // 200ms - 500ms
-  const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
  const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();

  const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2(
@ -141,6 +143,10 @@ export const CommandMenu = () => {

  const isMobile = useIsMobile();

+  const commandMenuCommands = useRecoilComponentValueV2(
+    commandMenuCommandsComponentSelector,
+  );
+
  useScopedHotkeys(
    'ctrl+k,meta+k',
    () => {
@ -478,6 +484,8 @@ export const CommandMenu = () => {
        label: command.label,
        to: command.to,
        onClick: command.onCommandClick,
+        firstHotKey: command.firstHotKey,
+        secondHotKey: command.secondHotKey,
      }),
    },
    {
@ -489,6 +497,8 @@ export const CommandMenu = () => {
        label: command.label,
        to: command.to,
        onClick: command.onCommandClick,
+        firstHotKey: command.firstHotKey,
+        secondHotKey: command.secondHotKey,
      }),
    },
    {
@ -506,6 +516,8 @@ export const CommandMenu = () => {
            placeholder={`${person.name.firstName} ${person.name.lastName}`}
          />
        ),
+        firstHotKey: person.firstHotKey,
+        secondHotKey: person.secondHotKey,
      }),
    },
    {
@ -524,6 +536,8 @@ export const CommandMenu = () => {
            )}
          />
        ),
+        firstHotKey: company.firstHotKey,
+        secondHotKey: company.secondHotKey,
      }),
    },
    {
@ -628,6 +642,8 @@ export const CommandMenu = () => {
                              : ''
                          }`}
                          onClick={copilotCommand.onCommandClick}
+                          firstHotKey={copilotCommand.firstHotKey}
+                          secondHotKey={copilotCommand.secondHotKey}
                        />
                      </SelectableItem>
                    </CommandGroup>
@ -646,6 +662,12 @@ export const CommandMenu = () => {
                            onClick={
                              standardActionrecordSelectionCommand.onCommandClick
                            }
+                            firstHotKey={
+                              standardActionrecordSelectionCommand.firstHotKey
+                            }
+                            secondHotKey={
+                              standardActionrecordSelectionCommand.secondHotKey
+                            }
                          />
                        </SelectableItem>
                      ),
@ -663,6 +685,12 @@ export const CommandMenu = () => {
                            onClick={
                              workflowRunRecordSelectionCommand.onCommandClick
                            }
+                            firstHotKey={
+                              workflowRunRecordSelectionCommand.firstHotKey
+                            }
+                            secondHotKey={
+                              workflowRunRecordSelectionCommand.secondHotKey
+                            }
                          />
                        </SelectableItem>
                      ),
@ -683,6 +711,12 @@ export const CommandMenu = () => {
                              onClick={
                                standardActionGlobalCommand.onCommandClick
                              }
+                              firstHotKey={
+                                standardActionGlobalCommand.firstHotKey
+                              }
+                              secondHotKey={
+                                standardActionGlobalCommand.secondHotKey
+                              }
                            />
                          </SelectableItem>
                        ),
@ -702,6 +736,10 @@ export const CommandMenu = () => {
                              label={workflowRunGlobalCommand.label}
                              Icon={workflowRunGlobalCommand.Icon}
                              onClick={workflowRunGlobalCommand.onCommandClick}
+                              firstHotKey={workflowRunGlobalCommand.firstHotKey}
+                              secondHotKey={
+                                workflowRunGlobalCommand.secondHotKey
+                              }
                            />
                          </SelectableItem>
                        ),
@ -713,8 +751,16 @@ export const CommandMenu = () => {
                    items?.length ? (
                      <CommandGroup heading={heading} key={heading}>
                        {items.map((item) => {
-                          const { id, Icon, label, to, onClick, key } =
-                            renderItem(item);
+                          const {
+                            id,
+                            Icon,
+                            label,
+                            to,
+                            onClick,
+                            key,
+                            firstHotKey,
+                            secondHotKey,
+                          } = renderItem(item);
                          return (
                            <SelectableItem itemId={id} key={id}>
                              <CommandMenuItem
@ -724,6 +770,8 @@ export const CommandMenu = () => {
                                label={label}
                                to={to}
                                onClick={onClick}
+                                firstHotKey={firstHotKey}
+                                secondHotKey={secondHotKey}
                              />
                            </SelectableItem>
                          );
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuCommandsEffect.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuCommandsEffect.tsx
@ -1,20 +0,0 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
-import { computeCommandMenuCommands } from '@/command-menu/utils/computeCommandMenuCommands';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-export const CommandMenuCommandsEffect = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
-
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
-
-  useEffect(() => {
-    setCommands(computeCommandMenuCommands(actionMenuEntries));
-  }, [actionMenuEntries, setCommands]);
-
-  return null;
-};
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx
@ -1,15 +1,8 @@
-import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
-import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
+import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
+import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
-import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
 import { capitalize } from '~/utils/string/capitalize';

 const StyledChip = styled.div`
@ -28,70 +21,23 @@ const StyledChip = styled.div`
  color: ${({ theme }) => theme.font.color.primary};
 `;

-const StyledAvatarWrapper = styled.div`
-  background-color: ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(0.5)};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  &:not(:first-of-type) {
-    margin-left: -${({ theme }) => theme.spacing(1)};
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const StyledAvatarContainer = styled.div`
  display: flex;
 `;

-const CommandMenuContextRecordChipAvatars = ({
-  objectMetadataItem,
-  record,
+export const CommandMenuContextRecordChip = ({
+  objectMetadataItemId,
 }: {
-  objectMetadataItem: ObjectMetadataItem;
-  record: ObjectRecord;
+  objectMetadataItemId: string;
 }) => {
-  const { recordChipData } = useRecordChipData({
-    objectNameSingular: objectMetadataItem.nameSingular,
-    record,
-  });
-
-  const { Icon, IconColor } = useGetStandardObjectIcon(
-    objectMetadataItem.nameSingular,
-  );
-
-  const theme = useTheme();
-
-  return (
-    <StyledAvatarWrapper>
-      {Icon ? (
-        <Icon color={IconColor} size={theme.icon.size.sm} />
-      ) : (
-        <Avatar
-          avatarUrl={recordChipData.avatarUrl}
-          placeholderColorSeed={recordChipData.recordId}
-          placeholder={recordChipData.name}
-          type={recordChipData.avatarType}
-          size="sm"
-        />
-      )}
-    </StyledAvatarWrapper>
-  );
-};
-
-export const CommandMenuContextRecordChip = () => {
-  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
-  );
-
  const { objectMetadataItem } = useObjectMetadataItemById({
-    objectId: contextStoreCurrentObjectMetadataId ?? '',
+    objectId: objectMetadataItemId,
  });

-  const { records, loading, totalCount } = useContextStoreSelectedRecords({
-    limit: 3,
-  });
+  const { records, loading, totalCount } =
+    useFindManyRecordsSelectedInContextStore({
+      limit: 3,
+    });

  if (loading || !totalCount) {
    return null;
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
@ -0,0 +1,55 @@
+import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Avatar } from 'twenty-ui';
+
+const StyledAvatarWrapper = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  &:not(:first-of-type) {
+    margin-left: -${({ theme }) => theme.spacing(1)};
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CommandMenuContextRecordChipAvatars = ({
+  objectMetadataItem,
+  record,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+  record: ObjectRecord;
+}) => {
+  const { recordChipData } = useRecordChipData({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    record,
+  });
+
+  const { Icon, IconColor } = useGetStandardObjectIcon(
+    objectMetadataItem.nameSingular,
+  );
+
+  const theme = useTheme();
+
+  return (
+    <StyledAvatarWrapper>
+      {Icon ? (
+        <Icon color={IconColor} size={theme.icon.size.sm} />
+      ) : (
+        <Avatar
+          avatarUrl={recordChipData.avatarUrl}
+          placeholderColorSeed={recordChipData.recordId}
+          placeholder={recordChipData.name}
+          type={recordChipData.avatarType}
+          size="sm"
+        />
+      )}
+    </StyledAvatarWrapper>
+  );
+};
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
@ -2,8 +2,10 @@ import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandM
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
-import { IconX, LightIconButton, useIsMobile } from 'twenty-ui';
+import { IconX, LightIconButton, isDefined, useIsMobile } from 'twenty-ui';

 const StyledInputContainer = styled.div`
  align-items: center;
@ -65,9 +67,17 @@ export const CommandMenuTopBar = ({

  const { closeCommandMenu } = useCommandMenu();

+  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
+  );
+
  return (
    <StyledInputContainer>
-      <CommandMenuContextRecordChip />
+      {isDefined(contextStoreCurrentObjectMetadataId) && (
+        <CommandMenuContextRecordChip
+          objectMetadataItemId={contextStoreCurrentObjectMetadataId}
+        />
+      )}
      <StyledInput
        autoFocus
        value={commandMenuSearch}
--- a/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
@ -1,14 +1,9 @@
-import { action } from '@storybook/addon-actions';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import { useEffect } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCheckbox, IconNotes } from 'twenty-ui';
+import { useSetRecoilState } from 'recoil';

 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { CommandType } from '@/command-menu/types/Command';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -21,8 +16,8 @@ import {
 import { sleep } from '~/utils/sleep';

 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
 import { CommandMenu } from '../CommandMenu';

@ -55,46 +50,13 @@ const meta: Meta<typeof CommandMenu> = {
      const setCurrentWorkspaceMember = useSetRecoilState(
        currentWorkspaceMemberState,
      );
-      const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-
-      const { addToCommandMenu, setObjectsInCommandMenu, openCommandMenu } =
-        useCommandMenu();
+      const setIsCommandMenuOpened = useSetRecoilState(
+        isCommandMenuOpenedState,
+      );

      setCurrentWorkspace(mockDefaultWorkspace);
      setCurrentWorkspaceMember(mockedWorkspaceMemberData);
-
-      useEffect(() => {
-        const nonSystemActiveObjects = objectMetadataItems.filter(
-          (object) => !object.isSystem && object.isActive,
-        );
-
-        setObjectsInCommandMenu(nonSystemActiveObjects);
-
-        addToCommandMenu([
-          {
-            id: 'create-task',
-            to: '',
-            label: 'Create Task',
-            type: CommandType.Create,
-            Icon: IconCheckbox,
-            onCommandClick: action('create task click'),
-          },
-          {
-            id: 'create-note',
-            to: '',
-            label: 'Create Note',
-            type: CommandType.Create,
-            Icon: IconNotes,
-            onCommandClick: action('create note click'),
-          },
-        ]);
-        openCommandMenu();
-      }, [
-        addToCommandMenu,
-        setObjectsInCommandMenu,
-        openCommandMenu,
-        objectMetadataItems,
-      ]);
+      setIsCommandMenuOpened(true);

      return <Story />;
    },
@ -115,9 +77,6 @@ export const DefaultWithoutSearch: Story = {
  play: async () => {
    const canvas = within(document.body);

-    expect(
-      await canvas.findByText('Create Task', undefined, { timeout: 10000 }),
-    ).toBeInTheDocument();
    expect(await canvas.findByText('Go to People')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Opportunities')).toBeInTheDocument();
@ -134,7 +93,6 @@ export const MatchingPersonCompanyActivityCreateNavigate: Story = {
    await userEvent.type(searchInput, 'n');
    expect(await canvas.findByText('Linkedin')).toBeInTheDocument();
    expect(await canvas.findByText(companiesMock[0].name)).toBeInTheDocument();
-    expect(await canvas.findByText('Create Note')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
  },
 };
@ -145,7 +103,6 @@ export const OnlyMatchingCreateAndNavigate: Story = {
    const searchInput = await canvas.findByPlaceholderText('Type anything');
    await sleep(openTimeout);
    await userEvent.type(searchInput, 'ta');
-    expect(await canvas.findByText('Create Task')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Tasks')).toBeInTheDocument();
  },
 };