Merge origin/2025.4 into 2026.1

Author: markus-moser

.github/workflows/shared-frontend-build.yaml

@@ -174,11 +174,6 @@ jobs:
         working-directory: ./assets
         run: npm run build-rsbuild-plugins
 
-      - name: Create package archive
-        if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/1.x' }}
-        continue-on-error: true
-        working-directory: ./assets
-        run: npm pack && mv ./pimcore-studio-ui*.tgz ../public/build/studio-npm-package.tgz
       - uses: stefanzweifel/git-auto-commit-action@v5
         with:
           file_pattern: './public/'

assets/build/api/docs.jsonopenapi.json

@@ -236,6 +236,9 @@ const config: ConfigFile = {
     },
     '../../js/src/core/modules/gdpr-data-extractor/gdpr-data-extractor-api-slice.gen.ts': {
       filterEndpoints: pathMatcher(/\/api\/gdpr\/?/i)
+    },
+    '../../js/src/core/modules/cache/cache-api-slice.gen.ts': {
+      filterEndpoints: pathMatcher(/\/api\/cache\/?/i)
     }
   },
   exportName: 'api',

assets/build/api/openapi-config.ts

@@ -63,4 +63,5 @@ import '@Pimcore/modules/quantity-value'
 import '@Pimcore/modules/field-definitions'
 import '@Pimcore/modules/gdpr-data-extractor'
 import '@Pimcore/modules/system-settings'
+import '@Pimcore/modules/cache'
 import '@Pimcore/modules/classification-store-config'

assets/js/src/core/bootstrap.ts

@@ -11,6 +11,7 @@
 import { ToolStripBox } from '@Pimcore/components/toolstrip/box/tool-strip-box'
 import React, { useMemo } from 'react'
 import { BlockToolStrip } from './block-tool-strip'
+import { Flex } from '../flex/flex'
 
 export interface BlockItemProps {
   field: number
@@ -42,7 +43,12 @@ export const BlockItem = (props: BlockItemProps): React.JSX.Element => {
         )
       }
     >
-      {children}
+      <Flex 
+        gap={ 'extra-small' }
+        vertical
+      >
+        {children}
+      </Flex>
     </ToolStripBox>
   ), [field, noteditable, children, props.disallowAdd, props.disallowDelete, props.disallowReorder, props.itemValue, props.getItemTitle])
 }

assets/js/src/core/components/block/block-item.tsx

@@ -18,6 +18,7 @@ import cn from 'classnames'
 import { Tooltip } from '../tooltip/tooltip'
 import useElementOverflow from '../../utils/use-element-overflow'
 import { isEmptyValue } from '@Pimcore/utils/type-utils'
+import { SanitizeHtml } from '@Pimcore/components/sanitize-html/sanitize-html'
 
 export interface ElementTagProps extends Omit<TagProps, 'id' | 'children'> {
   path: string
@@ -27,9 +28,10 @@ export interface ElementTagProps extends Omit<TagProps, 'id' | 'children'> {
   disabled?: boolean
   onClose?: () => void
   inline?: boolean
+  pathIsHtml?: boolean
 }
 
-export const ElementTag: React.FC<ElementTagProps> = ({ path, elementType, id, published, disabled, onClose, inline = false, ...props }) => {
+export const ElementTag: React.FC<ElementTagProps> = ({ path, elementType, id, published, disabled, onClose, inline = false, pathIsHtml = false, ...props }) => {
   const { openElement } = useElementHelper()
   const { styles } = useStyles()
   const textRef = useRef<HTMLSpanElement>(null)
@@ -49,7 +51,7 @@ export const ElementTag: React.FC<ElementTagProps> = ({ path, elementType, id, p
   }
 
   return (
-    <Tooltip title={ isOverflow ? path : '' }>
+    <Tooltip title={ isOverflow && !pathIsHtml ? path : '' }>
       <Tag
         bordered={ false }
         className={ cn(inline ? styles.tagInline : styles.tag, { [styles.tagClickable]: isClickable, [styles.tagDisabled]: disabled }) }
@@ -61,7 +63,14 @@ export const ElementTag: React.FC<ElementTagProps> = ({ path, elementType, id, p
         ref={ textRef }
         { ...props }
       >
-        <span className="tag-content">{path}</span>
+        {pathIsHtml
+          ? (
+            <span className="tag-content"><SanitizeHtml
+              html={ path }
+              tag="span"
+                                          /></span>
+            )
+          : <span className="tag-content">{path}</span>}
       </Tag>
     </Tooltip>
   )

assets/js/src/core/components/element-tag/element-tag.tsx

@@ -9,6 +9,7 @@
  */
 
 import React, { useState, useRef } from 'react'
+import { isInIframe } from '@Pimcore/utils/iframe'
 import { ConfigProvider } from 'antd'
 import { type IModalProps, Modal } from '@Pimcore/components/modal/modal'
 import type { DraggableData, DraggableEvent } from 'react-draggable'
@@ -44,6 +45,14 @@ export const WindowModal = (props: IWindowModalProps): React.JSX.Element => {
     })
   }
 
+  // In an iframe (e.g. document editor) popups must render inside the draggable container to
+  // inherit the correct stacking context. In the top-level window the modal wrapper has
+  // pointer-events:none, so popups rendered inside it would be unclickable — use document.body.
+  const getPopupContainer = (): HTMLElement => {
+    if (isInIframe()) return draggleRef.current ?? document.body
+    return document.body
+  }
+
   return (
     <Modal
       { ...restProps }
@@ -84,9 +93,7 @@ export const WindowModal = (props: IWindowModalProps): React.JSX.Element => {
       }
       wrapClassName={ styles.wrapper }
     >
-      {/* Render popups (Select, DatePicker, etc.) inside the modal's draggable container */}
-      {/* so they inherit its stacking context and appear above the modal overlay. */}
-      <ConfigProvider getPopupContainer={ () => draggleRef.current ?? document.body }>
+      <ConfigProvider getPopupContainer={ getPopupContainer }>
         {props.children}
       </ConfigProvider>
     </Modal>

assets/js/src/core/components/modal/window-modal/window-modal.tsx

@@ -21,6 +21,7 @@ import { Toolbar } from '@Pimcore/components/toolbar/toolbar'
 import { api } from '@Pimcore/modules/application-logger/application-logger-api-slice-enhanced'
 import { useAppDispatch } from '@sdk/app'
 import { CreatableSelect } from '@sdk/components'
+import { type SortingState } from '@tanstack/react-table'
 import { isNil } from 'lodash'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -35,15 +36,29 @@ export const ApplicationLoggerContainerInner = (): React.JSX.Element => {
   const [pageSize, setPageSize] = useState<number>(20)
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [refreshInterval, setRefreshInterval] = useState<string | undefined>(undefined)
+  const [sorting, setSorting] = useState<SortingState>([])
   const { columnFilters, setIsLoading: setFilterLoading } = useFilter()
 
+  const sortKeyMap: Record<string, string> = {
+    date: 'date',
+    message: 'message',
+    translatedPriority: 'priority',
+    fileObject: 'fileobject',
+    component: 'component',
+    source: 'source'
+  }
+
+  const sortFilter = sorting.length > 0
+    ? { key: sortKeyMap[sorting[0].id] ?? sorting[0].id, direction: sorting[0].desc ? 'DESC' : 'ASC' }
+    : { key: 'id', direction: 'DESC' }
+
   const { data, isFetching: isRTKFetching } = useBundleApplicationLoggerGetCollectionQuery({
     body: {
       filters: {
         page: currentPage,
         pageSize,
         columnFilters,
-        sortFilter: { key: 'id', direction: 'DESC' }
+        sortFilter
       }
     }
   })
@@ -178,7 +193,12 @@ export const ApplicationLoggerContainerInner = (): React.JSX.Element => {
             y: 'none'
           } }
         >
-          <ApplicationLogger items={ data?.items ?? [] } />
+          <ApplicationLogger
+            isLoading={ isRTKFetching }
+            items={ data?.items ?? [] }
+            onSortingChange={ setSorting }
+            sorting={ sorting }
+          />
         </Box>
       </Content>
     </ContentLayout>

assets/js/src/core/modules/application-logger/application-logger-container-inner.tsx

@@ -9,6 +9,7 @@
  */
 
 import { ContentLayout, Sidebar } from '@sdk/components'
+import { type SortingState } from '@tanstack/react-table'
 import { isNil } from 'lodash'
 import React from 'react'
 import { type BundleApplicationLoggerGetCollectionApiResponse } from './application-logger-api-slice.gen'
@@ -17,9 +18,12 @@ import { Table } from './components/table/table'
 
 interface ApplicationLoggerProps {
   items: BundleApplicationLoggerGetCollectionApiResponse['items']
+  isLoading?: boolean
+  sorting?: SortingState
+  onSortingChange?: (sorting: SortingState) => void
 }
 
-export const ApplicationLogger = ({ items }: ApplicationLoggerProps): React.JSX.Element => {
+export const ApplicationLogger = ({ items, isLoading, sorting, onSortingChange }: ApplicationLoggerProps): React.JSX.Element => {
   if (isNil(items)) {
     return <></>
   }
@@ -32,7 +36,12 @@ export const ApplicationLogger = ({ items }: ApplicationLoggerProps): React.JSX.
         />
       }
     >
-      <Table items={ items } />
+      <Table
+        isLoading={ isLoading }
+        items={ items }
+        onSortingChange={ onSortingChange }
+        sorting={ sorting }
+      />
     </ContentLayout>
   )
 }

assets/js/src/core/modules/application-logger/application-logger.tsx

@@ -15,7 +15,7 @@ import { useElementHelper } from '@Pimcore/modules/element/hooks/use-element-hel
 import { type ElementType } from '@Pimcore/types/enums/element/element-type'
 import { formatDateTime } from '@Pimcore/utils/date-time'
 import { Button } from '@sdk/components'
-import { createColumnHelper } from '@tanstack/react-table'
+import { createColumnHelper, type SortingState } from '@tanstack/react-table'
 import { isNil } from 'lodash'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -25,14 +25,17 @@ import { useStyles } from './table.styles'
 
 interface TableProps {
   items: BundleApplicationLoggerGetCollectionApiResponse['items']
+  isLoading?: boolean
+  sorting?: SortingState
+  onSortingChange?: (sorting: SortingState) => void
 }
 
 export interface BundleApplicationLoggerLogEntryWithActions extends BundleApplicationLoggerLogEntry {
   translatedPriority: string
   actions: React.ReactNode
 }
 
-export const Table = ({ items }: TableProps): React.JSX.Element => {
+export const Table = ({ items, isLoading, sorting, onSortingChange }: TableProps): React.JSX.Element => {
   const { t } = useTranslation()
   const { openElement } = useElementHelper()
   const { styles } = useStyles()
@@ -56,14 +59,16 @@ export const Table = ({ items }: TableProps): React.JSX.Element => {
   const columns = [
     columnHelper.accessor('date', {
       header: t('application-logger.columns.timestamp'),
-      size: 80
+      size: 80,
+      enableSorting: true
     }),
     columnHelper.accessor('pid', {
       header: t('application-logger.columns.pid'),
       size: 60
     }),
     columnHelper.accessor('message', {
       header: t('application-logger.columns.message'),
+      enableSorting: true,
       cell: ({ getValue }) => (
         <span className={ styles.cellTruncate }>
           {getValue()}
@@ -72,10 +77,12 @@ export const Table = ({ items }: TableProps): React.JSX.Element => {
     }),
     columnHelper.accessor('translatedPriority', {
       header: t('application-logger.columns.type'),
-      size: 60
+      size: 60,
+      enableSorting: true
     }),
     columnHelper.accessor('fileObject', {
       header: t('application-logger.columns.file-object'),
+      enableSorting: true,
       cell: ({ row }): React.JSX.Element => {
         const column = row.original
         const fileObjectBasePath = '/admin/bundle/applicationlogger/log/show-file-object?filePath='
@@ -125,13 +132,16 @@ export const Table = ({ items }: TableProps): React.JSX.Element => {
     }),
     columnHelper.accessor('component', {
       header: t('application-logger.columns.component'),
-      size: 100
+      size: 100,
+      enableSorting: true
     }),
     columnHelper.accessor('source', {
-      header: t('application-logger.columns.source')
+      header: t('application-logger.columns.source'),
+      enableSorting: true
     }),
     columnHelper.accessor('actions', {
       header: t('application-logger.columns.details'),
+      enableSorting: false,
       cell: ({ row }): React.JSX.Element => {
         const column = row.original
 
@@ -160,9 +170,13 @@ export const Table = ({ items }: TableProps): React.JSX.Element => {
         autoWidth
         columns={ columns }
         data={ tableItems }
-        // isLoading={notesAndEventsFetching}
+        enableSorting
+        isLoading={ isLoading }
+        manualSorting
         modifiedCells={ [] }
+        onSortingChange={ onSortingChange }
         resizable
+        sorting={ sorting }
       />
 
       <DetailModal