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>
2026-03-09 19:33:12 +05:30
parent 06bdb5ad6a
commit 36bcc71f3d
275 changed files with 4544 additions and 4436 deletions
@@ -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>
+      )}
+    </>
+  );
+};