Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx (TypeScript)

Code before:
  filter?: FindRecordsActionFilter;
  orderBy?: FindRecordsActionOrderBy;
  limit?: number;
};

export type FindRecordsActionFilter = {
  recordFilterGroups?: RecordFilterGroup[];
  recordFilters?: RecordFilter[];
  gqlOperationFilter?: JsonValue;
};

export type FindRecordsActionOrderBy = {
  recordSorts?: RecordSort[];
  gqlOperationOrderBy?: JsonValue;
};

export const WorkflowEditActionFindRecords = ({
  action,
  actionOptions,
}: WorkflowEditActionFindRecordsProps) => {
  const theme = useTheme();
  const { getIcon } = useIcons();
  const { t } = useLingui();
  const maxRecordsFormatted = QUERY_MAX_RECORDS.toLocaleString();
  const [searchInputValue, setSearchInputValue] = useState('');
  const [isSystemObjectsOpen, setIsSystemObjectsOpen] = useState(false);
  const dropdownId = 'workflow-edit-action-record-find-records-object-name';

  const { closeDropdown } = useCloseDropdown();

  const { objectMetadataItems } = useFilteredObjectMetadataItems();

  const activeStandardObjectOptions = useMemo(
    () =>
      objectMetadataItems
        .filter(
          (objectMetadataItem) =>
            objectMetadataItem.isActive && !objectMetadataItem.isSystem,
        )
        .map((objectMetadataItem) => ({
          Icon: getIcon(objectMetadataItem.icon),
          label: objectMetadataItem.labelPlural,
          value: objectMetadataItem.nameSingular,
        })),
    [objectMetadataItems, getIcon],
  );

  const activeSystemObjectOptions = useMemo(
    () =>
      objectMetadataItems
        .filter(

Review comment (refactor):
I feel that it's unclear if `WorkflowObjectDropdown` is a managed component or not. One one hand, isSystemObjectsOpen is handled from the outside and passed as a prop

On the other hand, the component seems to be quite easy to "encapsulate" here:
- isSystemObjectsOpen is only used by WorkflowObjectDropdown
- setIsSystemObjectsOpen is only called by callbacks exposed by WorkflowObjectDropdown

==> I think we should refactor WorkflowObjectDropdown to encapsulate everything and simplify its api, this code won't be re-usable. It's too heavy to add these states from the outside everytime we want to use it

Code after:
};

export type FindRecordsActionFilter = {
  recordFilterGroups?: RecordFilterGroup[];
  recordFilters?: RecordFilter[];
  gqlOperationFilter?: JsonValue;
};

export type FindRecordsActionOrderBy = {
  recordSorts?: RecordSort[];
  gqlOperationOrderBy?: JsonValue;
};

export const WorkflowEditActionFindRecords = ({
  action,
  actionOptions,
}: WorkflowEditActionFindRecordsProps) => {
  const theme = useTheme();
  const { t } = useLingui();
  const maxRecordsFormatted = QUERY_MAX_RECORDS.toLocaleString();

  const dropdownId = 'workflow-edit-action-record-find-records-object-name';

  const { closeDropdown } = useCloseDropdown();

  const { objectMetadataItems } = useFilteredObjectMetadataItems();

  const [formData, setFormData] = useState<FindRecordsFormData>(() => ({
    objectNameSingular: action.settings.input.objectName,
    limit:
      isNumber(action.settings.input.limit) &&
      action.settings.input.limit > QUERY_MAX_RECORDS
        ? QUERY_MAX_RECORDS
        : (action.settings.input.limit ?? 1),
    filter: action.settings.input.filter as FindRecordsActionFilter,
    orderBy: action.settings.input.orderBy as FindRecordsActionOrderBy,
  }));

  const [limitError, setLimitError] = useState<string | undefined>(undefined);
  const isFormDisabled = actionOptions.readonly ?? false;
  const instanceId = `workflow-edit-action-record-find-records-${action.id}-${formData.objectNameSingular}`;

  const selectedObjectMetadataItem = objectMetadataItems.find(
    (item) => item.nameSingular === formData.objectNameSingular,
  );
  const { getIcon } = useIcons();

  const selectedOption = selectedObjectMetadataItem
    ? {
        Icon: getIcon(selectedObjectMetadataItem?.icon),
        label: selectedObjectMetadataItem?.labelPlural,