refactor(command-menu-item): rename Actions to CommandMenuItem (#18489)

actions are being renamed to command menu item, they will be migrated to
server and will be served as headless front components

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenuButton.tsx

@@ -0,0 +1,88 @@
+import { styled } from '@linaria/react';
+import { i18n, type MessageDescriptor } from '@lingui/core';
+import { isString } from '@sniptt/guards';
+import { type MouseEvent } from 'react';
+import {
+  AppTooltip,
+  type IconComponent,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui/display';
+import { Button, IconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+const StyledWrapper = styled.div`
+  font-size: ${themeCssVariables.font.size.md};
+`;
+
+export type CommandMenuButtonProps = {
+  command: {
+    key: string;
+    label: string | MessageDescriptor;
+    shortLabel?: string | MessageDescriptor;
+    Icon: IconComponent;
+    isPrimaryCTA?: boolean;
+  };
+  onClick?: (event?: MouseEvent<HTMLElement>) => void;
+  to?: string;
+};
+
+const getCommandMenuButtonLabel = (
+  label: string | MessageDescriptor,
+): string => {
+  return isString(label) ? label : i18n._(label);
+};
+
+export const CommandMenuButton = ({
+  command,
+  onClick,
+  to,
+}: CommandMenuButtonProps) => {
+  const resolvedLabel = getCommandMenuButtonLabel(command.label);
+
+  const resolvedShortLabel =
+    command.shortLabel === undefined
+      ? undefined
+      : getCommandMenuButtonLabel(command.shortLabel);
+
+  const buttonAccent = command.isPrimaryCTA ? 'blue' : 'default';
+
+  return (
+    <>
+      {resolvedShortLabel !== undefined ? (
+        <Button
+          Icon={command.Icon}
+          size="small"
+          variant="secondary"
+          accent={buttonAccent}
+          to={to}
+          onClick={onClick}
+          title={resolvedShortLabel}
+          ariaLabel={resolvedLabel}
+        />
+      ) : (
+        <div id={`command-menu-item-entry-${command.key}`} key={command.key}>
+          <IconButton
+            Icon={command.Icon}
+            size="small"
+            variant="secondary"
+            accent={buttonAccent}
+            to={to}
+            onClick={onClick}
+            ariaLabel={resolvedLabel}
+          />
+          <StyledWrapper>
+            <AppTooltip
+              anchorSelect={`#command-menu-item-entry-${command.key}`}
+              content={resolvedLabel}
+              delay={TooltipDelay.longDelay}
+              place={TooltipPosition.Bottom}
+              offset={5}
+              noArrow
+            />
+          </StyledWrapper>
+        </div>
+      )}
+    </>
+  );
+};

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -20,7 +20,7 @@ import {
 } from '~/testing/mock-data/users';
 import { sleep } from '~/utils/sleep';
 
-import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { CommandMenuComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuComponentInstanceContext';
 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
 import { SidePanelRouter } from '@/side-panel/components/SidePanelRouter';
 import { SIDE_PANEL_COMPONENT_INSTANCE_ID } from '@/side-panel/constants/SidePanelComponentInstanceId';
@@ -55,7 +55,7 @@ const ContextStoreDecorator: Decorator = (Story) => {
         <ViewComponentInstanceContext.Provider
           value={{ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID }}
         >
-          <ActionMenuComponentInstanceContext.Provider
+          <CommandMenuComponentInstanceContext.Provider
             value={{ instanceId: SIDE_PANEL_COMPONENT_INSTANCE_ID }}
           >
             <JestContextStoreSetter
@@ -65,7 +65,7 @@ const ContextStoreDecorator: Decorator = (Story) => {
             >
               <Story />
             </JestContextStoreSetter>
-          </ActionMenuComponentInstanceContext.Provider>
+          </CommandMenuComponentInstanceContext.Provider>
         </ViewComponentInstanceContext.Provider>
       </ContextStoreComponentInstanceContext.Provider>
     </RecordComponentInstanceContextsWrapper>