Merge branch '1.x' of github.com:pimcore/studio-ui-bundle into edit-v…

…iew-styling

assets/build/api/openapi-config.ts

@@ -77,6 +77,9 @@ const config: ConfigFile = {
     },
     '../../js/src/core/modules/class-definition/class-definition-slice.gen.ts': {
       filterEndpoints: pathMatcher(/\/class\//i)
+    },
+    '../../js/src/core/modules/data-object/unit-slice.gen.ts': {
+      filterEndpoints: pathMatcher(/\/unit\//i)
     }
   },
   exportName: 'api',

assets/js/src/core/app/config/services/index.ts

@@ -103,6 +103,7 @@ import { DynamicTypeObjectDataDatetime } from '@Pimcore/modules/element/dynamic-
 import { DynamicTypeObjectDataDateRange } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-date-range'
 import { DynamicTypeObjectDataTime } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-time'
 import { DynamicTypeObjectDataExternalImage } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-external-image'
+import { DynamicTypeObjectDataImage } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-image'
 import { DynamicTypeObjectDataGeoPoint } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-geopoint'
 import { DynamicTypeObjectDataGeoBounds } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-geobounds'
 import { DynamicTypeObjectDataGeoPolygon } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/types/dynamic-type-object-data-geopolygon'
@@ -246,6 +247,7 @@ container.bind(serviceIds['DynamicTypes/ObjectData/Datetime']).to(DynamicTypeObj
 container.bind(serviceIds['DynamicTypes/ObjectData/DateRange']).to(DynamicTypeObjectDataDateRange).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/Time']).to(DynamicTypeObjectDataTime).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/ExternalImage']).to(DynamicTypeObjectDataExternalImage).inSingletonScope()
+container.bind(serviceIds['DynamicTypes/ObjectData/Image']).to(DynamicTypeObjectDataImage).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/GeoPoint']).to(DynamicTypeObjectDataGeoPoint).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/GeoBounds']).to(DynamicTypeObjectDataGeoBounds).inSingletonScope()
 container.bind(serviceIds['DynamicTypes/ObjectData/GeoPolygon']).to(DynamicTypeObjectDataGeoPolygon).inSingletonScope()

assets/js/src/core/app/config/services/service-ids.ts

@@ -138,6 +138,7 @@ export const serviceIds = {
   'DynamicTypes/ObjectData/DateRange': 'DynamicTypes/ObjectData/DateRange',
   'DynamicTypes/ObjectData/Time': 'DynamicTypes/ObjectData/Time',
   'DynamicTypes/ObjectData/ExternalImage': 'DynamicTypes/ObjectData/ExternalImage',
+  'DynamicTypes/ObjectData/Image': 'DynamicTypes/ObjectData/Image',
   'DynamicTypes/ObjectData/GeoPoint': 'DynamicTypes/ObjectData/GeoPoint',
   'DynamicTypes/ObjectData/GeoBounds': 'DynamicTypes/ObjectData/GeoBounds',
   'DynamicTypes/ObjectData/GeoPolygon': 'DynamicTypes/ObjectData/GeoPolygon',

assets/js/src/core/components/drag-and-drop/droppable.styles.ts

@@ -23,7 +23,7 @@ export const useStyle = createStyles(({ token, css }) => {
       
       & .dnd--drag-valid {
         background: ${token.colorBgTextActive};
-        border: 1px dashed ${token.colorInfoBorder};
+        border: 1px dashed ${token.colorInfoBorderHover};
       }
 
       & .dnd--drag-error {
@@ -32,9 +32,9 @@ export const useStyle = createStyles(({ token, css }) => {
       }
     `,
     outline: css`
-      
+            
       & .dnd--drag-valid {
-        outline: 1px dashed ${token.colorInfoBorder};
+        outline: 1px dashed ${token.colorInfoBorderHover};
       }
 
       & .dnd--drag-error {

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

@@ -11,7 +11,7 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React from 'react'
+import React, { type LegacyRef } from 'react'
 import { Flex as AntFlex, type FlexProps as AntFlexProps, theme } from 'antd'
 import cn from 'classnames'
 import { isString, isNumber, isObject } from 'lodash'
@@ -21,6 +21,7 @@ import { type GapType } from '@Pimcore/types/components/types'
 
 export interface FlexProps extends Omit<AntFlexProps, 'gap'> {
   gap?: GapType
+  ref?: LegacyRef<HTMLDivElement>
 }
 
 const { useToken } = theme

assets/js/src/core/components/image-preview/image-preview.stories.tsx

@@ -0,0 +1,40 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { type Meta } from '@storybook/react'
+import { ImagePreview } from './image-preview'
+
+const config: Meta = {
+  title: 'Components/Data Display/ImagePreview',
+  component: ImagePreview,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'This component is used to display an image preview with specified width and height. The component has a max-width of 100% and the image is displayed centered within the given box. This component can also be used within a droppable component to allow drag and drop of images.'
+      }
+    }
+  }
+}
+
+export default config
+
+export const _default = {
+  args: {
+    width: 300,
+    height: 300,
+    style: {
+      border: '1px dashed #d9d9d9'
+    }
+  }
+}

assets/js/src/core/components/image-preview/image-preview.styles.tsx

@@ -0,0 +1,36 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+  return {
+    imagePreviewContainer: css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      max-width: 100%;
+      
+      .ant-image {
+        height: 100%;
+        width: 100%;
+      }
+      
+        .ant-image-img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+    `
+  }
+})

assets/js/src/core/components/image-preview/image-preview.tsx

@@ -0,0 +1,74 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React, { type CSSProperties, forwardRef, type MutableRefObject, useEffect } from 'react'
+import { useStyle } from './image-preview.styles'
+import cn from 'classnames'
+import { toCssDimension } from '@Pimcore/utils/css'
+import { Image } from 'antd'
+import { getPrefix } from '@Pimcore/app/api/pimcore/route'
+import { useDroppable } from '@Pimcore/components/drag-and-drop/hooks/use-droppable'
+import { Spin } from '@Pimcore/components/spin/spin'
+import { Flex } from '@Pimcore/components/flex/flex'
+
+interface ImagePreviewProps {
+  src?: string
+  assetId?: number
+  className?: string
+  width: number | string
+  height: number | string
+  style?: CSSProperties
+}
+
+export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, width, height, className, style }: ImagePreviewProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
+  const [key, setKey] = React.useState(0)
+  const { getStateClasses } = useDroppable()
+  const { styles } = useStyle()
+
+  const imageSrc = assetId !== undefined ? `${getPrefix()}/assets/${assetId}/image/stream/preview` : src
+
+  useEffect(() => {
+    setKey(key + 1)
+  }, [imageSrc])
+
+  const loadingSpinner = (
+    <Flex
+      align="center"
+      className="h-full"
+      justify="center"
+    >
+      <Spin size="small" />
+    </Flex>
+  )
+
+  return (
+    <div
+      className={ cn(className, styles.imagePreviewContainer, ...getStateClasses()) }
+      ref={ ref }
+      style={ {
+        ...style,
+        height: toCssDimension(height),
+        width: toCssDimension(width)
+      } }
+    >
+      <Image
+        className="w-full"
+        fallback="/bundles/pimcorestudioui/img/fallback-image.svg"
+        key={ key }
+        placeholder={ loadingSpinner }
+        preview={ false }
+        src={ imageSrc }
+      />
+    </div>
+  )
+})

assets/js/src/core/components/image-target/image-target.styles.tsx

@@ -17,9 +17,11 @@ export const useStyle = createStyles(({ token, css }) => {
   return {
     imageTargetContainer: css`
       border-radius: ${token.borderRadiusLG}px;
-      border: 1px dashed ${token.colorBorder};
+      outline: 1px dashed ${token.colorBorder};
       background: ${token.controlItemBgHover};
       padding: ${token.paddingSM}px;
+      max-width: 100%;
+      
       
       .image-target-title {
           text-align: center;

assets/js/src/core/components/image-target/image-target.tsx

@@ -11,30 +11,57 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React from 'react'
+import React, { forwardRef, type MutableRefObject } from 'react'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { useStyle } from './image-target.styles'
 import cn from 'classnames'
 import { toCssDimension } from '@Pimcore/utils/css'
+import { Icon } from '@Pimcore/components/icon/icon'
+import { useDroppable } from '@Pimcore/components/drag-and-drop/hooks/use-droppable'
 
 interface ImageTargetProps {
   title: string
   className?: string
-  width?: number
-  height?: number
+  width?: number | string
+  height?: number | string
+  dndIcon?: boolean
+  uploadIcon?: boolean
 }
 
-export const ImageTarget = ({ title, width, height, className }: ImageTargetProps): React.JSX.Element => {
+export const ImageTarget = forwardRef(function ImageTarget ({ title, className, width = 200, height = 200, dndIcon, uploadIcon }: ImageTargetProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
+  const { getStateClasses } = useDroppable()
   const { styles } = useStyle()
 
   return (
-    <Flex
-      align="center"
-      className={ cn(className, styles.imageTargetContainer) }
-      justify="center"
-      style={ { maxWidth: toCssDimension(width), height: toCssDimension(height) } }
+    <div
+      className={ cn(className, styles.imageTargetContainer, ...getStateClasses()) }
+      ref={ ref }
+      style={ {
+        height: toCssDimension(height),
+        width: toCssDimension(width)
+      } }
     >
-      <div className="image-target-title">{ title }</div>
-    </Flex>
+      <Flex
+        align="center"
+        gap="extra-small"
+        justify="center"
+        style={ { height: '100%' } }
+        vertical
+      >
+        { (dndIcon === true || uploadIcon === true) && (
+        <div className="icon-container">
+          <Icon
+            options={ { height: 30, width: 30 } }
+            value={ 'PlusOutlined' }
+          />
+          <Icon
+            options={ { height: 30, width: 30 } }
+            value={ 'copy-07' }
+          />
+        </div>
+        )}
+        <div className="image-target-title">{ title }</div>
+      </Flex>
+    </div>
   )
-}
+})

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

@@ -57,6 +57,10 @@ export const Pagination = ({
     }
   }, [currentPage, pageSize])
 
+  useEffect(() => {
+    setCurrentPage(current)
+  }, [current])
+
   const pages = Math.ceil(total / pageSize)
 
   if (total === 0 || (hideOnSinglePage && pages === 1)) {

assets/js/src/core/components/pql-query-input/pql-query-input.styles.ts

@@ -15,14 +15,25 @@ import { createStyles } from 'antd-style'
 
 export const useStyles = createStyles(({ css, token }) => {
   return {
+    tooltip: css`
+      width: 394px;
+      max-width: 100%;
+    `,
+
     infoIcon: css`
       color: rgba(0, 0, 0, 0.45);
       cursor: pointer;
     `,
 
-    link: css`
+    text: css`
       color: ${token.colorTextLightSolid};
+      line-height: 22px;
     }
+    `,
+
+    link: css`
+      color: #d3adf7 !important;
+      text-decoration: underline !important;
     `
   }
 })

assets/js/src/core/components/pql-query-input/pql-query-input.tsx

@@ -13,7 +13,8 @@
 
 import React, { useState } from 'react'
 import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'
-import { Tooltip } from 'antd'
+import { Tooltip, Typography } from 'antd'
+import { Trans } from 'react-i18next'
 import { isObject } from 'lodash'
 import TextArea from 'antd/es/input/TextArea'
 import { Flex } from '@Pimcore/components/flex/flex'
@@ -58,16 +59,24 @@ export const PQLQueryInput = ({ value, handleChange, handleBlur, errorData, isSh
           <Tooltip
             onOpenChange={ () => { setIsShowTooltip(!isShowTooltip) } }
             open={ isShowTooltip }
+            overlayClassName={ styles.tooltip }
             title={ (
-              <a
-                className={ styles.link }
-                href={ PQL_DOCUMENTATION_LINK }
-                rel="noreferrer"
-                target="_blank"
-              >
-                {PQL_DOCUMENTATION_LINK}
-              </a>
-                ) }
+              <Typography className={ styles.text }>
+                <Trans
+                  components={ {
+                    anchorPQL: (
+                    // eslint-disable-next-line jsx-a11y/anchor-has-content
+                      <a
+                        className={ styles.link }
+                        href={ PQL_DOCUMENTATION_LINK }
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      />)
+                  } }
+                  i18nKey="component.pql.description"
+                />
+              </Typography>
+            ) }
             trigger="click"
           >
             <Icon