Refactor icons passed as props with the new way (#1492)

* Refactor icons passed as props with the new way

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Update more files

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Fix according to review

* Fix according to review

* Fix according to review

* Fix chromatic regressions

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -1,25 +1,18 @@
 import React from 'react';
-import { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { IconArrowUpRight } from '@/ui/icon';
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { MenuItemCommand } from '@/ui/menu-item/components/MenuItemCommand';
 
 import { useCommandMenu } from '../hooks/useCommandMenu';
 
-import {
-  StyledIconAndLabelContainer,
-  StyledIconContainer,
-  StyledMenuItem,
-  StyledShortCut,
-  StyledShortcutsContainer,
-} from './CommandMenuStyles';
-
-export type OwnProps = {
+export type CommandMenuItemProps = {
   label: string;
   to?: string;
   key: string;
   onClick?: () => void;
-  icon?: ReactNode;
+  Icon?: IconComponent;
   shortcuts?: Array<string>;
 };
 
@@ -27,14 +20,14 @@ export function CommandMenuItem({
   label,
   to,
   onClick,
-  icon,
+  Icon,
   shortcuts,
-}: OwnProps) {
+}: CommandMenuItemProps) {
   const navigate = useNavigate();
   const { closeCommandMenu } = useCommandMenu();
 
-  if (to && !icon) {
-    icon = <IconArrowUpRight />;
+  if (to && !Icon) {
+    Icon = IconArrowUpRight;
   }
 
   const onItemClick = () => {
@@ -51,23 +44,11 @@ export function CommandMenuItem({
   };
 
   return (
-    <StyledMenuItem onSelect={onItemClick}>
-      <StyledIconAndLabelContainer>
-        <StyledIconContainer>{icon}</StyledIconContainer>
-        {label}
-      </StyledIconAndLabelContainer>
-      <StyledShortcutsContainer>
-        {shortcuts &&
-          shortcuts.map((shortcut, index) => {
-            const prefix = index > 0 ? 'then' : '';
-            return (
-              <React.Fragment key={index}>
-                {prefix}
-                <StyledShortCut>{shortcut}</StyledShortCut>
-              </React.Fragment>
-            );
-          })}
-      </StyledShortcutsContainer>
-    </StyledMenuItem>
+    <MenuItemCommand
+      LeftIcon={Icon}
+      text={label}
+      command={shortcuts ? shortcuts.join(' then ') : ''}
+      onClick={onItemClick}
+    />
   );
 }