Use IconPicker instead

Author: martmull

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -24,6 +24,8 @@ import {
   LightIconButton,
 } from 'twenty-ui/input';
 import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
+
 export type IconPickerProps = {
   disabled?: boolean;
   dropdownId?: string;
@@ -35,6 +37,10 @@ export type IconPickerProps = {
   variant?: IconButtonVariant;
   className?: string;
   size?: IconButtonSize;
+  clickableComponent?: ReactNode;
+  dropdownWidth?: number;
+  dropdownOffset?: DropdownOffset;
+  maxIconsVisible?: number;
 };
 
 const StyledMenuIconItemsContainer = styled.div`
@@ -100,6 +106,10 @@ export const IconPicker = ({
   variant = 'secondary',
   className,
   size = 'medium',
+  clickableComponent,
+  dropdownWidth,
+  dropdownOffset,
+  maxIconsVisible = 25,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
   const {
@@ -169,8 +179,8 @@ export const IconPicker = ({
           ...filteredAndSortedIconKeys.filter(
             (iconKey) => iconKey !== selectedIconKey,
           ),
-        ].slice(0, 25)
-      : filteredAndSortedIconKeys.slice(0, 25);
+        ].slice(0, maxIconsVisible)
+      : filteredAndSortedIconKeys.slice(0, maxIconsVisible);
   }, [icons, searchString, selectedIconKey]);
 
   const iconKeys2d = useMemo(
@@ -185,21 +195,26 @@ export const IconPicker = ({
       <Dropdown
         dropdownId={dropdownId}
         dropdownHotkeyScope={{ scope: IconPickerHotkeyScope.IconPicker }}
+        dropdownOffset={dropdownOffset}
         clickableComponent={
-          <IconButton
-            ariaLabel={`Click to select icon ${
-              selectedIconKey
-                ? `(selected: ${selectedIconKey})`
-                : `(no icon selected)`
-            }`}
-            disabled={disabled}
-            Icon={icon}
-            variant={variant}
-            size={size}
-          />
+          clickableComponent || (
+            <IconButton
+              ariaLabel={`Click to select icon ${
+                selectedIconKey
+                  ? `(selected: ${selectedIconKey})`
+                  : `(no icon selected)`
+              }`}
+              disabled={disabled}
+              Icon={icon}
+              variant={variant}
+              size={size}
+            />
+          )
         }
         dropdownComponents={
-          <DropdownContent widthInPixels={ICON_PICKER_DROPDOWN_CONTENT_WIDTH}>
+          <DropdownContent
+            widthInPixels={dropdownWidth || ICON_PICKER_DROPDOWN_CONTENT_WIDTH}
+          >
             <SelectableList
               selectableListInstanceId="icon-list"
               selectableItemIdMatrix={iconKeys2d}

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx

@@ -17,7 +17,9 @@ import { useIcons } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { useLingui } from '@lingui/react/macro';
-import { COMMAND_MENU_ICON_OPTIONS } from '@/workflow/workflow-trigger/constants/CommandMenuIconOptions';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { SelectControl } from '@/ui/input/components/SelectControl';
+import styled from '@emotion/styled';
 
 type WorkflowEditTriggerManualFormProps = {
   trigger: WorkflowManualTrigger;
@@ -31,6 +33,23 @@ type WorkflowEditTriggerManualFormProps = {
         onTriggerUpdate: (trigger: WorkflowManualTrigger) => void;
       };
 };
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  margin-top: ${({ theme }) => theme.spacing(0.25)};
+`;
+
+const StyledIconPickerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 export const WorkflowEditTriggerManualForm = ({
   trigger,
@@ -103,6 +122,7 @@ export const WorkflowEditTriggerManualForm = ({
               settings: getManualTriggerDefaultSettings({
                 availability: updatedTriggerType,
                 activeNonSystemObjectMetadataItems,
+                icon: trigger.settings.icon,
               }),
             });
           }}
@@ -137,14 +157,35 @@ export const WorkflowEditTriggerManualForm = ({
             dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
           />
         ) : null}
-        <Select
+        <IconPicker
           dropdownId={'workflow-edit-manual-trigger-icon'}
-          label={t`Command Menu Icon`}
-          description={t`The icon your workflow trigger will display in the command menu`}
-          value={trigger.settings.icon}
-          options={COMMAND_MENU_ICON_OPTIONS}
-          withSearchInput
-          onChange={(icon) => {
+          selectedIconKey={trigger.settings.icon}
+          dropdownOffset={{ y: -parseInt(theme.spacing(3), 10) }}
+          dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
+          maxIconsVisible={9 * 8} // 9 columns * 8 lines
+          disabled={triggerOptions.readonly}
+          clickableComponent={
+            <StyledIconPickerContainer
+              onClick={(e) => {
+                if (triggerOptions.readonly === true) {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              }}
+            >
+              <StyledLabel>{t`Command menu icon`}</StyledLabel>
+              <SelectControl
+                isDisabled={triggerOptions.readonly}
+                selectedOption={{
+                  Icon: getIcon(trigger.settings.icon),
+                  value: trigger.settings.icon || null,
+                  label: '',
+                }}
+              />
+              <StyledDescription>{t`The icon your workflow trigger will display in the command menu`}</StyledDescription>
+            </StyledIconPickerContainer>
+          }
+          onChange={({ iconKey }) => {
             if (triggerOptions.readonly === true) {
               return;
             }
@@ -153,12 +194,10 @@ export const WorkflowEditTriggerManualForm = ({
               ...trigger,
               settings: {
                 ...trigger.settings,
-                icon,
+                icon: iconKey,
               },
             });
           }}
-          dropdownOffset={{ y: parseInt(theme.spacing(1), 10) }}
-          dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
         />
       </WorkflowStepBody>
     </>

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/CommandMenuIconOptions.ts

@@ -9,23 +9,25 @@ import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants
 export const getManualTriggerDefaultSettings = ({
   availability,
   activeNonSystemObjectMetadataItems,
+  icon,
 }: {
   availability: WorkflowManualTriggerAvailability;
   activeNonSystemObjectMetadataItems: ObjectMetadataItem[];
+  icon?: string;
 }): WorkflowManualTriggerSettings => {
   switch (availability) {
     case 'EVERYWHERE': {
       return {
         objectType: undefined,
         outputSchema: {},
-        icon: COMMAND_MENU_DEFAULT_ICON,
+        icon: icon || COMMAND_MENU_DEFAULT_ICON,
       };
     }
     case 'WHEN_RECORD_SELECTED': {
       return {
         objectType: activeNonSystemObjectMetadataItems[0].nameSingular,
         outputSchema: {},
-        icon: COMMAND_MENU_DEFAULT_ICON,
+        icon: icon || COMMAND_MENU_DEFAULT_ICON,
       };
     }
   }