[Data Object Grid][Advanced columns] Add improvements (#2322)

* added the useTransformersMenuItems hook

* added the translations

* updated the useTransformersMenuItems by adding the fallback for groupping

* Automatic frontend build

* added the group prop inside the dyn types

* updated the DynamicGroupDropdown

* updated the type

* fixed the Sonar error

* Automatic frontend build

---------

Co-authored-by: ValeriaMaltseva <[email protected]>

Author: ValeriaMaltseva

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

@@ -8,20 +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'
 
 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()
@@ -32,22 +39,65 @@ 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 groupedTree: IGroupedTree = {}
+
+  availableDynamicTypes.forEach(dynamicType => {
+    let groupId: string[] = []
+
+    if (!isNull(dynamicType.group)) {
+      if (Array.isArray(dynamicType.group)) {
+        groupId = dynamicType.group
+      } else {
+        groupId = [dynamicType.group]
+      }
+    }
+
+    let currentLevel = groupedTree
+
+    groupId.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/element/dynamic-types/definitions/pipelines/dynamic-type-pipeline-abstract.ts

@@ -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/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>
   )
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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