Add ManyToOneRelationPath component

assets/js/src/core/components/many-to-one-relation/components/many-to-one-relation/index.ts

@@ -0,0 +1,12 @@
+/**
+ * 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)
+ */
+
+export { ManyToOneRelationInput } from '../../many-to-one-relation-input'
+export { ManyToOneRelationPath } from './many-to-one-relation-path'

assets/js/src/core/components/many-to-one-relation/components/many-to-one-relation/many-to-one-relation-path.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 React, { useMemo, useCallback } from 'react'
+import { isNonEmptyString } from '@Pimcore/utils/type-utils'
+import { ManyToOneRelation, type ManyToOneRelationProps, type ManyToOneRelationValueType } from '../../many-to-one-relation'
+
+export interface ManyToOneRelationPathProps extends Omit<ManyToOneRelationProps, 'value' | 'onChange'> {
+  value?: string | null
+  onChange?: (value: string | null) => void
+}
+
+export const ManyToOneRelationPath = (props: ManyToOneRelationPathProps): React.JSX.Element => {
+  const { value, onChange, allowPathTextInput, ...restProps } = props
+
+  const memoizedValue = useMemo((): ManyToOneRelationValueType => {
+    if (!isNonEmptyString(value)) {
+      return null
+    }
+
+    if (allowPathTextInput === true) {
+      return { textInput: true, fullPath: value }
+    }
+
+    return { type: '', id: 0, fullPath: value }
+  }, [value, allowPathTextInput])
+
+  const handleChange = useCallback((newValue: ManyToOneRelationValueType): void => {
+    const newPath = newValue === null ? null : (newValue.fullPath ?? null)
+    onChange?.(newPath)
+  }, [onChange])
+
+  return (
+    <ManyToOneRelation
+      { ...restProps }
+      allowPathTextInput={ allowPathTextInput }
+      hideOpenButton
+      onChange={ handleChange }
+      value={ memoizedValue }
+    />
+  )
+}

assets/js/src/core/components/many-to-one-relation/index.ts

@@ -16,6 +16,7 @@ export type {
   PathTextInputValue,
   ManyToOneRelationClassDefinitionProps
 } from './many-to-one-relation'
+export { ManyToOneRelationPath, ManyToOneRelationInput } from './components/many-to-one-relation'
+export type { ManyToOneRelationPathProps } from './components/many-to-one-relation/many-to-one-relation-path'
 export { PathTarget } from './path-target'
-export { ManyToOneRelationInput } from './many-to-one-relation-input'
 export type { PathTargetProps } from './path-target'

assets/js/src/core/components/many-to-one-relation/many-to-one-relation.tsx

@@ -54,6 +54,7 @@ export interface ManyToOneRelationClassDefinitionProps {
   inherited?: boolean
   readOnly?: boolean
   vertical?: boolean
+  hideOpenButton?: boolean
 }
 
 export interface ManyToOneRelationProps extends IRelationAllowedTypesDataComponent, ManyToOneRelationClassDefinitionProps {
@@ -92,7 +93,7 @@ export const ManyToOneRelation = (props: ManyToOneRelationProps): React.JSX.Elem
       if (value.textInput === true) {
         window.open(value.fullPath, '_blank', 'noopener,noreferrer')
       } else {
-        const elementType = mapToElementType(value.type)
+        const elementType = mapToElementType(value.type, true)
         if (!isUndefined(elementType)) {
           openElement({ type: elementType, id: value.id }).catch(() => { })
         }
@@ -104,6 +105,8 @@ export const ManyToOneRelation = (props: ManyToOneRelationProps): React.JSX.Elem
 
   const isEnabled = props.disabled !== true && props.readOnly !== true
 
+  const { hideOpenButton, ...inputProps } = props
+
   return (
     <Flex
       className={ cn(styles.container, props.className) }
@@ -114,15 +117,15 @@ export const ManyToOneRelation = (props: ManyToOneRelationProps): React.JSX.Elem
       vertical={ props.vertical }
     >
       <ManyToOneRelationInput
-        { ...props }
+        { ...inputProps }
         onChange={ setValue }
         value={ value }
       />
       <Flex
         gap="extra-small"
         justify={ props.vertical === true ? 'start' : undefined }
       >
-        {(props.allowPathTextInput !== true || props.showOpenForTextInput === true) && !isNull(value) && (
+        {props.hideOpenButton !== true && (props.allowPathTextInput !== true || props.showOpenForTextInput === true) && !isNull(value) && (
           <Tooltip
             key="open"
             title={ t('open') }

assets/js/src/core/components/many-to-one-relation/path-target.tsx

@@ -117,7 +117,7 @@ export const PathTarget = forwardRef(function PathTarget (
       inputPrefix = (
         <ElementTag
           disabled={ props.disabled === true || props.inherited === true }
-          elementType={ mapToElementType(value.type) }
+          elementType={ mapToElementType(value.type, true) }
           id={ value.id }
           onClose={ props.allowElementTagClose === true
             ? () => {
@@ -158,7 +158,7 @@ export const PathTarget = forwardRef(function PathTarget (
               prefix={
                 <ElementTag
                   disabled={ props.disabled === true || props.inherited === true }
-                  elementType={ mapToElementType(value.type) }
+                  elementType={ mapToElementType(value.type, true) }
                   id={ value.id }
                   inline
                   onClose={ () => {

assets/js/src/core/modules/field-definitions/dynamic-types/types/image/field-definition-image-form-fields.tsx

@@ -9,10 +9,10 @@
  */
 
 import { type FieldDefinitionAbstractFormFieldsProps } from '@Pimcore/modules/field-definitions/dynamic-types/dynamic-type-field-definition-abstract'
-import { ManyToOneRelation } from '@Pimcore/components/many-to-one-relation/many-to-one-relation'
 import { Form, FormKit, Input } from '@sdk/components'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { ManyToOneRelationPath } from '@Pimcore/components/many-to-one-relation'
 
 export const FieldDefinitionImageFormFields = (props: FieldDefinitionAbstractFormFieldsProps): React.JSX.Element => {
   const { t } = useTranslation()
@@ -37,7 +37,7 @@ export const FieldDefinitionImageFormFields = (props: FieldDefinitionAbstractFor
         label={ t('upload-path') }
         name="uploadPath"
       >
-        <ManyToOneRelation
+        <ManyToOneRelationPath
           allowToClearRelation
           allowedAssetTypes={ ['folder'] }
           assetsAllowed

assets/js/src/core/modules/field-definitions/dynamic-types/types/imageAdvanced/field-definition-image-advanced-form-fields.tsx

@@ -10,10 +10,10 @@
 
 import { type FieldDefinitionAbstractFormFieldsProps } from '@Pimcore/modules/field-definitions/dynamic-types/dynamic-type-field-definition-abstract'
 import { FieldDefinitionCropPanel } from '@Pimcore/modules/field-definitions/dynamic-types/components/field-definition-crop-panel/field-definition-crop-panel'
-import { ManyToOneRelation } from '@Pimcore/components/many-to-one-relation/many-to-one-relation'
 import { Form, FormKit, Input } from '@sdk/components'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { ManyToOneRelationPath } from '@Pimcore/components/many-to-one-relation'
 
 export const FieldDefinitionImageAdvancedFormFields = (props: FieldDefinitionAbstractFormFieldsProps): React.JSX.Element => {
   const { t } = useTranslation()
@@ -38,7 +38,7 @@ export const FieldDefinitionImageAdvancedFormFields = (props: FieldDefinitionAbs
         label={ t('upload-path') }
         name="uploadPath"
       >
-        <ManyToOneRelation
+        <ManyToOneRelationPath
           allowToClearRelation
           allowedAssetTypes={ ['folder'] }
           assetsAllowed

assets/js/src/core/modules/field-definitions/dynamic-types/types/imageGallery/field-definition-image-gallery-form-fields.tsx

@@ -10,10 +10,10 @@
 
 import { type FieldDefinitionAbstractFormFieldsProps } from '@Pimcore/modules/field-definitions/dynamic-types/dynamic-type-field-definition-abstract'
 import { FieldDefinitionCropPanel } from '@Pimcore/modules/field-definitions/dynamic-types/components/field-definition-crop-panel/field-definition-crop-panel'
-import { ManyToOneRelation } from '@Pimcore/components/many-to-one-relation/many-to-one-relation'
 import { Form, FormKit, Input } from '@sdk/components'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { ManyToOneRelationPath } from '@Pimcore/components/many-to-one-relation'
 
 export const FieldDefinitionImageGalleryFormFields = (props: FieldDefinitionAbstractFormFieldsProps): React.JSX.Element => {
   const { t } = useTranslation()
@@ -38,7 +38,7 @@ export const FieldDefinitionImageGalleryFormFields = (props: FieldDefinitionAbst
         label={ t('upload-path') }
         name="uploadPath"
       >
-        <ManyToOneRelation
+        <ManyToOneRelationPath
           allowToClearRelation
           allowedAssetTypes={ ['folder'] }
           assetsAllowed

assets/js/src/sdk/components/index.ts

@@ -110,6 +110,7 @@ export * from '@Pimcore/components/input-number/input-number'
 export * from '@Pimcore/components/input-password/input-password'
 export * from '@Pimcore/components/language-selection/language-selection'
 export * from '@Pimcore/components/logo/logo'
+export * from '@Pimcore/components/many-to-one-relation'
 export * from '@Pimcore/components/menu/menu'
 export * from '@Pimcore/components/menu/item/menu-item'
 export * from '@Pimcore/components/message/useMessage'