Merge branch '2026.1' into 2026.x

Author: ValeriaMaltseva

assets/js/src/core/components/icon-selector/utils/element-icon.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { container } from '@Pimcore/app/depency-injection'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { type DynamicTypeIconSetRegistry } from '@Pimcore/components/icon-selector/dynamic-types/registry/dynamic-type-icon-set-registry'
+import { type ElementIcon } from '@Pimcore/modules/asset/asset-api-slice.gen'
+
+const isElementIcon = (value: unknown): value is ElementIcon => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    'value' in value
+  )
+}
+
+const isLibraryIcon = (name: string): boolean => {
+  const registry = container.get<DynamicTypeIconSetRegistry>(serviceIds['DynamicTypes/IconSetRegistry'])
+
+  return registry.getDynamicTypes().some((iconSet) =>
+    iconSet.getIcons().some((icon) => icon.value === name)
+  )
+}
+
+export const toElementIcon = (input: ElementIcon | string | null | undefined): ElementIcon | undefined => {
+  if (input === null || input === undefined || input === '') {
+    return undefined
+  }
+
+  if (isElementIcon(input)) {
+    return input
+  }
+
+  return {
+    type: isLibraryIcon(input) ? 'name' : 'path',
+    value: input
+  }
+}
+
+export const toIconString = (input: ElementIcon | string | null | undefined): string => {
+  if (input === null || input === undefined) {
+    return ''
+  }
+
+  if (typeof input === 'string') {
+    return input
+  }
+
+  return input.value
+}

assets/js/src/core/components/panel/panel.tsx

@@ -10,16 +10,18 @@
 
 import React, { type ReactNode } from 'react'
 import { isNil } from 'lodash'
-import { Space } from '@Pimcore/components/space/space'
+import { Flex } from '@Pimcore/components/flex/flex'
 import { Box, type BoxProps } from '@Pimcore/components/box/box'
 import { BaseView } from '@Pimcore/components/base-view/base-view'
 import { TooltipIcon } from '@Pimcore/components/tooltip-icon/tooltip-icon'
+import { Icon, type ElementIcon } from '@Pimcore/components/icon/icon'
 import { type CollapseProps } from 'antd'
 import { ItemSpacer } from '@Pimcore/components/form/layouts/item-spacer/item-spacer'
 
 export interface PanelProps {
   title?: ReactNode
   tooltip?: ReactNode
+  icon?: ElementIcon | null
   border?: boolean
   collapsible?: boolean
   collapsed?: boolean
@@ -43,6 +45,7 @@ export const Panel = ({
   collapsible,
   title,
   tooltip,
+  icon,
   theme = 'card-with-highlight',
   extra,
   extraPosition,
@@ -55,15 +58,28 @@ export const Panel = ({
       return undefined
     }
 
-    if (isNil(tooltip)) {
+    const iconNode = !isNil(icon)
+      ? (
+        <Icon
+          type={ icon.type }
+          value={ icon.value }
+        />
+        )
+      : null
+
+    if (isNil(tooltip) && iconNode === null) {
       return title
     }
 
     return (
-      <Space size='extra-small'>
+      <Flex
+        align='center'
+        gap='extra-small'
+      >
+        {iconNode}
         {title}
-        <TooltipIcon tooltip={ tooltip } />
-      </Space>
+        {!isNil(tooltip) && <TooltipIcon tooltip={ tooltip } />}
+      </Flex>
     )
   }
 

assets/js/src/core/components/tabpanel/tabpanel.tsx

@@ -17,7 +17,7 @@ import { isNonEmptyString } from '@sdk/utils'
 
 export interface TabpanelItem {
   key?: string
-  label?: string
+  label?: React.ReactNode
   title?: string
   closable?: boolean
   children?: React.ReactNode
@@ -64,7 +64,12 @@ export const Tabpanel = ({
   const { t } = useTranslation()
   const tabItems: ITabsProps['items'] = items.map((item, index) => {
     const labelOrTitle = item.label ?? item.title
-    const label = isNonEmptyString(labelOrTitle) ? t(labelOrTitle) : `Tab ${index + 1}`
+    let label: React.ReactNode
+    if (typeof labelOrTitle === 'string') {
+      label = isNonEmptyString(labelOrTitle) ? t(labelOrTitle) : `Tab ${index + 1}`
+    } else {
+      label = labelOrTitle ?? `Tab ${index + 1}`
+    }
 
     return {
       ...item,

assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.tsx

@@ -87,6 +87,7 @@ export const UsersRolesDropdown = ({ userList, initialSharedUsers, roleList, ini
         label: renderLabel({ labelName: item?.username, iconName: 'user' }),
         searchValue: item?.username
       }))
+      ?.sort((a, b) => (a.searchValue ?? '').localeCompare(b.searchValue ?? ''))
 
     return renderSelect({
       options,
@@ -101,7 +102,7 @@ export const UsersRolesDropdown = ({ userList, initialSharedUsers, roleList, ini
       value: item.id,
       label: renderLabel({ labelName: item?.name, iconName: 'shield' }),
       searchValue: item?.name
-    }))
+    }))?.sort((a, b) => (a.searchValue ?? '').localeCompare(b.searchValue ?? ''))
 
     return renderSelect({
       options,

assets/js/src/core/modules/class-definition/class-definition-slice-enhanced.ts

@@ -8,11 +8,31 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
+import { type OverrideResultType } from '@reduxjs/toolkit/query'
 import { invalidatingTags, providingTags, tagNames } from '@Pimcore/app/api/pimcore/tags'
-import { api as baseApi } from './class-definition-slice.gen'
+import { type ElementIcon } from '@Pimcore/components/icon/icon'
+import { denormalizeLayoutTreeIcons, normalizeLayoutTreeIcons } from '@Pimcore/utils/normalize-icon'
+import { api as baseApi, type ConfigLayoutDefinition, type CustomLayouts, type Layout } from './class-definition-slice.gen'
+
+// Backend returns the root layout's icon as `string` for field-collection and
+// object-brick layouts. The codegen for ConfigLayoutDefinition reflects that
+// (`icon: string | null`), so we both convert it at runtime and override the
+// result type. For the other layout endpoints (classDefinitionGetLayoutById,
+// classCustomLayoutGet, classObjectBrickCustomLayoutGet) the codegen claims
+// `ElementIcon | null` already, but the same string-runtime mismatch can
+// occur, so we normalize defensively without any type override.
+export type NormalizedConfigLayoutDefinition =
+  Omit<ConfigLayoutDefinition, 'icon'> & { icon: ElementIcon | null }
+
+const normalizeLayout = (raw: Layout): Layout => normalizeLayoutTreeIcons(raw)
+
+const normalizeCustomLayouts = (raw: CustomLayouts): CustomLayouts => ({
+  ...raw,
+  layoutDefinition: raw.layoutDefinition !== null ? normalizeLayout(raw.layoutDefinition) : null
+})
 
 /* eslint-disable max-lines */
-const api = baseApi.enhanceEndpoints({
+const apiWithTags = baseApi.enhanceEndpoints({
   addTagTypes: [tagNames.DATA_OBJECT, tagNames.DATA_OBJECT_DETAIL, tagNames.CLASS_DEFINITION, tagNames.CLASS_DEFINITION_DETAIL, tagNames.CLASS_DEFINITION_COLLECTION, tagNames.CUSTOM_LAYOUT, tagNames.CUSTOM_LAYOUT_DETAIL, tagNames.CUSTOM_LAYOUT_COLLECTION, tagNames.FIELD_COLLECTION, tagNames.FIELD_COLLECTION_DETAIL, tagNames.FIELD_COLLECTION_COLLECTION, tagNames.OBJECT_BRICK, tagNames.OBJECT_BRICK_DETAIL, tagNames.OBJECT_BRICK_COLLECTION, tagNames.OBJECT_BRICK_CUSTOM_LAYOUT, tagNames.OBJECT_BRICK_CUSTOM_LAYOUT_DETAIL, tagNames.OBJECT_BRICK_CUSTOM_LAYOUT_COLLECTION, tagNames.SELECT_OPTION_DETAIL, tagNames.SELECT_OPTION_COLLECTION],
   endpoints: {
     classDefinitionCollection: {
@@ -22,7 +42,8 @@ const api = baseApi.enhanceEndpoints({
       providesTags: (result, error, args) => providingTags.CLASS_DEFINITION_DETAIL(args.id)
     },
     classDefinitionGetLayoutById: {
-      providesTags: (result, error, args) => providingTags.CLASS_DEFINITION_DETAIL(args.id)
+      providesTags: (result, error, args) => providingTags.CLASS_DEFINITION_DETAIL(args.id),
+      transformResponse: normalizeLayout
     },
     classCustomLayoutCollection: {
       providesTags: () => providingTags.CUSTOM_LAYOUT_COLLECTION()
@@ -33,7 +54,7 @@ const api = baseApi.enhanceEndpoints({
         try {
           const { data } = await queryFulfilled
           dispatch(
-            api.util.updateQueryData('classDefinitionGetById', { id: args.id }, (draft) => {
+            apiWithTags.util.updateQueryData('classDefinitionGetById', { id: args.id }, (draft) => {
               Object.assign(draft, data)
             })
           )
@@ -61,15 +82,17 @@ const api = baseApi.enhanceEndpoints({
       ]
     },
     classCustomLayoutGet: {
-      providesTags: (result, error, args) => providingTags.CUSTOM_LAYOUT_DETAIL(args.customLayoutId)
+      providesTags: (result, error, args) => providingTags.CUSTOM_LAYOUT_DETAIL(args.customLayoutId),
+      transformResponse: normalizeCustomLayouts
     },
     classCustomLayoutUpdate: {
       invalidatesTags: () => [],
+      transformResponse: normalizeCustomLayouts,
       async onQueryStarted (args, { dispatch, queryFulfilled }) {
         try {
           const { data } = await queryFulfilled
           dispatch(
-            api.util.updateQueryData('classCustomLayoutGet', { customLayoutId: args.customLayoutId }, (draft) => {
+            apiWithTags.util.updateQueryData('classCustomLayoutGet', { customLayoutId: args.customLayoutId }, (draft) => {
               Object.assign(draft, data)
             })
           )
@@ -120,7 +143,7 @@ const api = baseApi.enhanceEndpoints({
         try {
           const { data } = await queryFulfilled
           dispatch(
-            api.util.updateQueryData('classFieldCollectionGetByKey', { key: args.key }, (draft) => {
+            apiWithTags.util.updateQueryData('classFieldCollectionGetByKey', { key: args.key }, (draft) => {
               Object.assign(draft, data)
             })
           )
@@ -171,7 +194,7 @@ const api = baseApi.enhanceEndpoints({
         try {
           const { data } = await queryFulfilled
           dispatch(
-            api.util.updateQueryData('classObjectBrickGetByKey', { key: args.key }, (draft) => {
+            apiWithTags.util.updateQueryData('classObjectBrickGetByKey', { key: args.key }, (draft) => {
               Object.assign(draft, data)
             })
           )
@@ -196,15 +219,17 @@ const api = baseApi.enhanceEndpoints({
       ]
     },
     classObjectBrickCustomLayoutGet: {
-      providesTags: (result, error, args) => providingTags.OBJECT_BRICK_CUSTOM_LAYOUT_DETAIL(args.key, args.customLayoutId)
+      providesTags: (result, error, args) => providingTags.OBJECT_BRICK_CUSTOM_LAYOUT_DETAIL(args.key, args.customLayoutId),
+      transformResponse: normalizeCustomLayouts
     },
     classObjectBrickCustomLayoutUpdate: {
       invalidatesTags: () => [],
+      transformResponse: normalizeCustomLayouts,
       async onQueryStarted (args, { dispatch, queryFulfilled }) {
         try {
           const { data } = await queryFulfilled
           dispatch(
-            api.util.updateQueryData('classObjectBrickCustomLayoutGet', { key: args.key, customLayoutId: args.customLayoutId }, (draft) => {
+            apiWithTags.util.updateQueryData('classObjectBrickCustomLayoutGet', { key: args.key, customLayoutId: args.customLayoutId }, (draft) => {
               Object.assign(draft, data)
             })
           )
@@ -237,7 +262,7 @@ const api = baseApi.enhanceEndpoints({
         try {
           const { data } = await queryFulfilled
           dispatch(
-            api.util.updateQueryData('classSelectOptionGet', { id: args.id }, (draft) => {
+            apiWithTags.util.updateQueryData('classSelectOptionGet', { id: args.id }, (draft) => {
               Object.assign(draft, data)
             })
           )
@@ -278,6 +303,69 @@ const api = baseApi.enhanceEndpoints({
   }
 })
 
+// Retype the two layout-by-key queries so callers see the normalized icon,
+// and wire transformResponse to do the runtime conversion. Both happen in the
+// same enhanceEndpoints call so transformResponse's return type matches the
+// overridden result type.
+const apiWithReadTransforms = apiWithTags.enhanceEndpoints<never, {
+  classFieldCollectionGetLayoutByKey: OverrideResultType<
+  typeof apiWithTags.endpoints.classFieldCollectionGetLayoutByKey.Types.QueryDefinition,
+  NormalizedConfigLayoutDefinition
+  >
+  classObjectBrickGetLayoutByKey: OverrideResultType<
+  typeof apiWithTags.endpoints.classObjectBrickGetLayoutByKey.Types.QueryDefinition,
+  NormalizedConfigLayoutDefinition
+  >
+}>({
+  endpoints: {
+    classFieldCollectionGetLayoutByKey: {
+      transformResponse: (raw: ConfigLayoutDefinition): NormalizedConfigLayoutDefinition =>
+        normalizeLayoutTreeIcons(raw) as unknown as NormalizedConfigLayoutDefinition
+    },
+    classObjectBrickGetLayoutByKey: {
+      transformResponse: (raw: ConfigLayoutDefinition): NormalizedConfigLayoutDefinition =>
+        normalizeLayoutTreeIcons(raw) as unknown as NormalizedConfigLayoutDefinition
+    }
+  }
+})
+
+const denormalizeConfigurationOnQuery = (endpoint: { query?: (arg: any) => any }): void => {
+  const originalQuery = endpoint.query
+  if (originalQuery === undefined) {
+    return
+  }
+
+  endpoint.query = (queryArg: any) => {
+    const baseResult = originalQuery(queryArg)
+    if (baseResult === null || typeof baseResult !== 'object' || !('body' in baseResult)) {
+      return baseResult
+    }
+
+    const body = baseResult.body as { configuration?: unknown }
+    if (body.configuration === undefined) {
+      return baseResult
+    }
+
+    return {
+      ...baseResult,
+      body: {
+        ...body,
+        configuration: denormalizeLayoutTreeIcons(body.configuration)
+      }
+    }
+  }
+}
+
+const api = apiWithReadTransforms.enhanceEndpoints({
+  endpoints: {
+    classDefinitionUpdate: denormalizeConfigurationOnQuery,
+    classCustomLayoutUpdate: denormalizeConfigurationOnQuery,
+    classFieldCollectionUpdate: denormalizeConfigurationOnQuery,
+    classObjectBrickUpdate: denormalizeConfigurationOnQuery,
+    classObjectBrickCustomLayoutUpdate: denormalizeConfigurationOnQuery
+  }
+})
+
 export type * from './class-definition-slice.gen'
 
 export const {

assets/js/src/core/modules/class-definition/components/class-editor/use-class-definition-get-by-id.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 { useMemo } from 'react'
+import { useClassDefinitionGetByIdQuery } from '@Pimcore/modules/class-definition/class-definition-slice-enhanced'
+import { toElementIcon } from '@Pimcore/components/icon-selector/utils/element-icon'
+import { type AnyQueryHook } from 'types/react-query'
+
+type QueryArg = Parameters<typeof useClassDefinitionGetByIdQuery>[0]
+
+export const useClassDefinitionGetById = ((arg: QueryArg) => {
+  const result = useClassDefinitionGetByIdQuery(arg)
+
+  const data = useMemo(() => {
+    if (result.data === undefined) {
+      return result.data
+    }
+
+    return {
+      ...result.data,
+      icon: toElementIcon(result.data.icon as Parameters<typeof toElementIcon>[0])
+    }
+  }, [result.data])
+
+  return { ...result, data }
+}) as AnyQueryHook