updated the DynamicGroupDropdown

Author: ValeriaMaltseva

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

@@ -8,22 +8,27 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
+import React from 'react'
+import { isNil, isNull } from 'lodash'
+import { type MenuProps } from 'antd'
+import { useTranslation } from 'react-i18next'
 import { useInjection } from '@Pimcore/app/depency-injection'
-import { Dropdown, type DropdownProps } from '@Pimcore/components/dropdown/dropdown'
+import { Dropdown } from '@Pimcore/components/dropdown/dropdown'
 import { useNumberedList } from '@Pimcore/components/form/controls/numbered-list/provider/numbered-list/use-numbered-list'
 import { type DynamicTypePipelineRegistry } from '@Pimcore/modules/element/dynamic-types/definitions/pipelines/dynamic-type-pipeline-registry'
-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
   dynamicTypeRegistryId: string
 }
 
+interface IGroupedTree {
+  dynamicTypes?: DynamicTypePipelineAbstract[]
+  [groupKey: string]: any
+}
+
 export const DynamicGroupDropdown = ({ children, dynamicTypeRegistryId }: DynamicGroupDropdownProps): React.JSX.Element => {
   const registry = useInjection<DynamicTypePipelineRegistry>(dynamicTypeRegistryId)
   const { operations } = useNumberedList()
@@ -34,28 +39,59 @@ export const DynamicGroupDropdown = ({ children, dynamicTypeRegistryId }: Dynami
     return dynamicType.isAvailableForSelection(config)
   })
 
-  const { transformersMenuItems } = useTransformersMenuItems(availableDynamicTypes)
+  const groupedTree: IGroupedTree = {}
 
-  const isTransformersRegistry = dynamicTypeRegistryId === serviceIds['DynamicTypes/Grid/TransformersRegistry']
+  availableDynamicTypes.forEach(dynamicType => {
+    const groupedIds = !isNull(dynamicType.group)
+      ? Array.isArray(dynamicType.group) ? dynamicType.group : [dynamicType.group]
+      : []
 
-  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
-        })
+    let currentLevel = groupedTree
+
+    groupedIds.forEach(groupKey => {
+      if (isNil(currentLevel[groupKey])) {
+        currentLevel[groupKey] = {}
       }
-    }))
+
+      currentLevel = currentLevel[groupKey]
+    })
+
+    if (isNil(currentLevel.dynamicTypes)) {
+      currentLevel.dynamicTypes = []
+    }
+
+    currentLevel.dynamicTypes.push(dynamicType)
+  })
+
+  const buildMenuItemsFromTree = (group: IGroupedTree): NonNullable<MenuProps['items']> => {
+    const items: NonNullable<MenuProps['items']> = []
+
+    if (!isNil(group.dynamicTypes)) {
+      group.dynamicTypes.forEach(dynamicType => {
+        items.push({
+          key: dynamicType.id,
+          label: t(`grid.advanced-column.advancedColumns.${dynamicType.id}`),
+          onClick: () => { operations.add({ key: dynamicType.id }) }
+        })
+      })
+    }
+
+    Object.entries(group).forEach(([groupKey, childNode]) => {
+      if (groupKey === 'dynamicTypes') return
+      items.push({
+        key: `${groupKey}-group`,
+        label: t(`grid.advanced-column.advancedColumns.group.${groupKey}`),
+        children: buildMenuItemsFromTree(childNode as IGroupedTree)
+      })
+    })
+
+    return items
+  }
+
+  const items = buildMenuItemsFromTree(groupedTree)
 
   return (
-    <Dropdown
-      menu={ {
-        items
-      } }
-    >
+    <Dropdown menu={ { items } }>
       {children}
     </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

@@ -15,6 +15,7 @@ import { type ReactElement } from 'react'
 @injectable()
 export abstract class DynamicTypePipelineAbstract implements DynamicTypeAbstract {
   abstract readonly id: string
+  readonly group: string | string[] | null = null
 
   abstract getComponent (): ReactElement
 

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/dynamic-type-pipeline-abstract.ts

@@ -16,7 +16,7 @@ import { DynamicTypePipelineGridTransformersAnonymizerComponent } from '@Pimcore
 @injectable()
 export class DynamicTypePipelineGridTransformersAnonymizer extends DynamicTypePipelineAbstract {
   readonly id = 'anonymizer'
-  readonly group = ['string']
+  readonly group = ['string', 'new']
 
   getComponent (): ReactElement {
     return (

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/transformers/types/anonymizer/anonymizer.tsx

@@ -16,7 +16,7 @@ import { DynamicTypePipelineGridTransformersBlurComponent } from '@Pimcore/modul
 @injectable()
 export class DynamicTypePipelineGridTransformersBlur extends DynamicTypePipelineAbstract {
   readonly id = 'blur'
-  readonly group = ['string']
+  readonly group = 'string'
 
   getComponent (): ReactElement {
     return (

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/transformers/types/blur/blur.tsx

@@ -16,7 +16,7 @@ import { DynamicTypePipelineGridTransformersBooleanFormatterComponent } from '@P
 @injectable()
 export class DynamicTypePipelineGridTransformersBooleanFormatter extends DynamicTypePipelineAbstract {
   readonly id = 'booleanFormatter'
-  readonly group = ['boolean']
+  readonly group = 'boolean'
 
   getComponent (): ReactElement {
     return (

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/transformers/types/boolean-formatter/boolean-formatter.tsx

@@ -16,7 +16,7 @@ import { injectable } from 'inversify'
 @injectable()
 export class DynamicTypePipelineGridTransformersChangeCase extends DynamicTypePipelineAbstract {
   readonly id = 'caseChange'
-  readonly group = ['string']
+  readonly group = 'string'
 
   getComponent (): ReactElement {
     return (

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/transformers/types/change-case/change-case.tsx

@@ -16,7 +16,7 @@ import { DynamicTypePipelineGridTransformersCombineComponent } from '../../compo
 @injectable()
 export class DynamicTypePipelineGridTransformersCombine extends DynamicTypePipelineAbstract {
   readonly id = 'combine'
-  readonly group = ['string']
+  readonly group = 'string'
 
   getComponent (): ReactElement {
     return (

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/transformers/types/combine/combine.tsx

@@ -16,7 +16,7 @@ import { DynamicTypePipelineGridTransformersDateFormatterComponent } from '@Pimc
 @injectable()
 export class DynamicTypePipelineGridTransformersDateFormatter extends DynamicTypePipelineAbstract {
   readonly id = 'dateFormatter'
-  readonly group = ['date']
+  readonly group = 'date'
 
   getComponent (): ReactElement {
     return (

assets/js/src/core/modules/element/dynamic-types/definitions/pipelines/grid/transformers/types/date-formatter/date-formatter.tsx

@@ -15,7 +15,7 @@ import { DynamicTypePipelineAbstract } from '../../../../dynamic-type-pipeline-a
 @injectable()
 export class DynamicTypePipelineGridTransformersElementCounter extends DynamicTypePipelineAbstract {
   readonly id = 'elementCounter'
-  readonly group = ['other']
+  readonly group = 'other'
 
   getComponent (): ReactElement {
     return <></>