[Data Object Grid][Advanced columns] Add improvements

assets/js/src/core/components/pipeline/item/dynamic-group/dynamic-group-dropdown.tsx

@@ -16,6 +16,8 @@ import React from 'react'
 import { usePipelineConfig } from '../../provider/pipeline-config/use-pipeline-config'
 import { type DynamicTypePipelineAbstract } from '@Pimcore/modules/element/dynamic-types/definitions/pipelines/dynamic-type-pipeline-abstract'
 import { useTranslation } from 'react-i18next'
+import { useTransformersMenuItems } from '@Pimcore/modules/data-object/listing/decorator/column-configuration/view-layer/components/grid/hooks/use-grid-options/tabs/grid-config/forms/advanced-column-form/hooks/use-transformers-menu-items'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
 
 export interface DynamicGroupDropdownProps {
   children: React.ReactNode
@@ -32,15 +34,21 @@ export const DynamicGroupDropdown = ({ children, dynamicTypeRegistryId }: Dynami
     return dynamicType.isAvailableForSelection(config)
   })
 
-  const items: DropdownProps['menu']['items'] = availableDynamicTypes.map((dynamicType) => ({
-    key: dynamicType.id,
-    label: t(`grid.advanced-column.advancedColumns.${dynamicType.id}`),
-    onClick: () => {
-      operations.add({
-        key: dynamicType.id
-      })
-    }
-  }))
+  const { transformersMenuItems } = useTransformersMenuItems(availableDynamicTypes)
+
+  const isTransformersRegistry = dynamicTypeRegistryId === serviceIds['DynamicTypes/Grid/TransformersRegistry']
+
+  const items: DropdownProps['menu']['items'] = isTransformersRegistry
+    ? transformersMenuItems
+    : availableDynamicTypes.map((dynamicType) => ({
+      key: dynamicType.id,
+      label: t(`grid.advanced-column.advancedColumns.${dynamicType.id}`),
+      onClick: () => {
+        operations.add({
+          key: dynamicType.id
+        })
+      }
+    }))
 
   return (
     <Dropdown

assets/js/src/core/modules/data-object/listing/decorator/column-configuration/view-layer/components/grid/hooks/use-grid-options/tabs/grid-config/forms/advanced-column-form/hooks/use-transformers-menu-items.tsx

@@ -0,0 +1,60 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import { isNil, isUndefined } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import type { DropdownMenuProps } from '@Pimcore/components/dropdown/dropdown'
+import type { DynamicTypePipelineAbstract } from '@Pimcore/modules/element/dynamic-types/definitions/pipelines/dynamic-type-pipeline-abstract'
+import { useNumberedList } from '@Pimcore/components/form/controls/numbered-list/provider/numbered-list/use-numbered-list'
+
+interface IUseTransformersMenuItemsReturn {
+  transformersMenuItems: DropdownMenuProps['items']
+}
+
+const TRANSFORMERS_GROUP = {
+  boolean: ['booleanFormatter'],
+  date: ['dateFormatter'],
+  string: ['anonymizer', 'blur', 'caseChange', 'combine', 'explode', 'stringReplace', 'substring', 'trim'],
+  other: ['elementCounter', 'twigOperator']
+}
+
+export const useTransformersMenuItems = (availableDynamicTypes?: DynamicTypePipelineAbstract[]): IUseTransformersMenuItemsReturn => {
+  if (isUndefined(availableDynamicTypes)) return { transformersMenuItems: [] }
+
+  const { t } = useTranslation()
+  const { operations } = useNumberedList()
+
+  const groupedIds = new Set(Object.values(TRANSFORMERS_GROUP).flat())
+  const ungroupedTransformers = availableDynamicTypes
+    .map(dynamicType => dynamicType.id)
+    .filter(id => !groupedIds.has(id))
+
+  if (ungroupedTransformers.length > 0) {
+    TRANSFORMERS_GROUP.other = [
+      ...TRANSFORMERS_GROUP.other,
+      ...ungroupedTransformers
+    ]
+  }
+
+  const transformersMenuItems: DropdownMenuProps['items'] = Object.entries(TRANSFORMERS_GROUP).map(([groupKey, transformerIds]) => ({
+    key: `${groupKey}Transformers`,
+    label: t(`grid.advanced-column.advancedColumns.group.${groupKey}`),
+    children: availableDynamicTypes
+      .filter(dynamicType => transformerIds.includes(dynamicType.id))
+      .map(dynamicType => ({
+        key: dynamicType.id,
+        label: t(`grid.advanced-column.advancedColumns.${dynamicType.id}`),
+        onClick: () => { operations.add({ key: dynamicType.id }) }
+      }))
+      .filter(item => !isNil(item))
+  }))
+
+  return { transformersMenuItems }
+}

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/source-fields/components/simple-field/simple-field.tsx

@@ -34,7 +34,10 @@ export const DynamicTypePipelineGridSourceFieldsSimpleFieldComponent = (): React
       label={ t('field') }
       name={ 'field' }
     >
-      <Select options={ sourceFieldOptions } />
+      <Select
+        options={ sourceFieldOptions }
+        showSearch
+      />
     </Form.Item>
   )
 }