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/CommandMenu.tsx

@@ -119,7 +119,7 @@ export function CommandMenu() {
                   key={cmd.label}
                   to={cmd.to}
                   label={cmd.label}
-                  icon={cmd.icon}
+                  Icon={cmd.Icon}
                   shortcuts={cmd.shortcuts || []}
                   onClick={cmd.onCommandClick}
                 />
@@ -132,7 +132,7 @@ export function CommandMenu() {
               key={matchingCreateCommand.label}
               to={matchingCreateCommand.to}
               label={matchingCreateCommand.label}
-              icon={matchingCreateCommand.icon}
+              Icon={matchingCreateCommand.Icon}
               shortcuts={matchingCreateCommand.shortcuts || []}
               onClick={matchingCreateCommand.onCommandClick}
             />
@@ -155,14 +155,14 @@ export function CommandMenu() {
                 to={`person/${person.id}`}
                 label={person.displayName}
                 key={person.id}
-                icon={
+                Icon={() => (
                   <Avatar
                     avatarUrl={null}
-                    size="sm"
-                    colorId={person.id}
                     placeholder={person.displayName}
+                    colorId={person.id}
+                    type="rounded"
                   />
-                }
+                )}
               />
             ))}
           </StyledGroup>
@@ -174,14 +174,13 @@ export function CommandMenu() {
                 to={`companies/${company.id}`}
                 label={company.name}
                 key={company.id}
-                icon={
+                Icon={() => (
                   <Avatar
                     avatarUrl={getLogoUrlFromDomainName(company.domainName)}
-                    size="sm"
                     colorId={company.id}
                     placeholder={company.name}
                   />
-                }
+                )}
               />
             ))}
           </StyledGroup>
@@ -193,7 +192,7 @@ export function CommandMenu() {
                 onClick={() => openActivityRightDrawer(activity.id)}
                 label={activity.title ?? ''}
                 key={activity.id}
-                icon={<IconNotes />}
+                Icon={IconNotes}
               />
             ))}
           </StyledGroup>

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}
+    />
   );
 }

front/src/modules/command-menu/types/Command.ts

@@ -1,3 +1,5 @@
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
 export enum CommandType {
   Navigate = 'Navigate',
   Create = 'Create',
@@ -7,7 +9,7 @@ export type Command = {
   to: string;
   label: string;
   type: CommandType.Navigate | CommandType.Create;
-  icon?: JSX.Element;
+  Icon?: IconComponent;
   shortcuts?: string[];
   onCommandClick?: () => void;
 };