Make all Studio modals draggable by their header

assets/eslint.config.mjs

@@ -447,7 +447,27 @@ export default tseslint.config(
       // -----------------------------------------------------------------------
       // Misc (from original .eslintrc.js)
       // -----------------------------------------------------------------------
-      'max-lines': ['error', { max: 300 }]
+      'max-lines': ['error', { max: 300 }],
+
+      // -----------------------------------------------------------------------
+      // Keep every modal draggable: route all modals through the shared
+      // component instead of antd's Modal (see components/modal/modal.tsx).
+      // -----------------------------------------------------------------------
+      'no-restricted-imports': ['error', {
+        paths: [{
+          name: 'antd',
+          importNames: ['Modal'],
+          message: "Import Modal from '@Pimcore/components/modal/modal' (or use WindowModal) instead of antd's Modal so it stays draggable. For imperative dialogs use useStudioModal()."
+        }]
+      }]
+    }
+  },
+
+  // 2b. The shared Modal component is the one place allowed to wrap antd's Modal.
+  {
+    files: ['**/core/components/modal/modal.tsx'],
+    rules: {
+      'no-restricted-imports': 'off'
     }
   },
 

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

@@ -8,10 +8,10 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { Modal, Upload } from 'antd'
+import { Upload } from 'antd'
 import type { UploadFile } from 'antd/es/upload/interface'
 import React from 'react'
-import { ModalTitle } from '@Pimcore/components/modal/modal-title/modal-title'
+import { Modal } from '@Pimcore/components/modal/modal'
 import { useTranslation } from 'react-i18next'
 import UploadList from 'antd/es/upload/UploadList'
 import { Alert } from '@Pimcore/components/alert/alert'
@@ -51,10 +51,9 @@ export const UploadModal = (props: UploadModalProps): React.JSX.Element => {
       closable={ false }
       data-testid="upload-modal"
       footer={ null }
+      iconName='upload-cloud'
       open={ props.open }
-      title={ (
-        <ModalTitle iconName='upload-cloud'>{ t('upload') }</ModalTitle>
-            ) }
+      title={ t('upload') }
     >
 
       {/* Total Progress */}

assets/js/src/core/components/modal-upload/hooks/use-upload-conflict-modal.tsx

@@ -9,7 +9,8 @@
  */
 
 import React, { useRef } from 'react'
-import { App, Button, Switch } from 'antd'
+import { Button, Switch } from 'antd'
+import { useStudioModal } from '@Pimcore/components/modal/hooks/use-studio-modal'
 import { api as assetApi } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
 import { useAppDispatch } from '@sdk/app'
 import { isNil } from 'lodash'
@@ -27,7 +28,7 @@ export interface UploadConflictModalResult {
 export const useUploadConflictModal = (): UploadConflictModalResult => {
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
-  const { modal } = App.useApp()
+  const { localModal: modal } = useStudioModal()
 
   const applyToAllRef = useRef<{ action: UploadConflictAction | null }>({ action: null })
 

assets/js/src/core/components/modal/hooks/draggable-modal-render.tsx

@@ -0,0 +1,48 @@
+/**
+ * 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 from 'react'
+import { useDraggableModal, type UseDraggableModalOptions } from './use-draggable-modal'
+
+export interface DraggableModalRenderProps extends Pick<UseDraggableModalOptions, 'handle' | 'cancel' | 'disabled'> {
+  children: React.ReactNode
+}
+
+/**
+ * Component wrapper around {@link useDraggableModal} for the imperative modal
+ * API (`modal.confirm` / `modal.info` / …), whose `modalRender` callback needs
+ * to return an element that can own its own drag state. Each open imperative
+ * modal is destroyed on close, so state resets naturally without an `open`
+ * prop.
+ *
+ * Compose with any caller-provided `modalRender`:
+ *   modalRender: (node) => <DraggableModalRender>{userRender(node)}</DraggableModalRender>
+ */
+export const DraggableModalRender = ({ children, ...options }: DraggableModalRenderProps): React.JSX.Element => {
+  const { modalRender } = useDraggableModal(options)
+  return <>{modalRender(children)}</>
+}
+
+/**
+ * Wraps a `ModalFuncProps.modalRender` value so the imperative modal becomes
+ * draggable, preserving any existing render (e.g. autofocus behaviour).
+ */
+export const withDraggableModalRender = (
+  existingRender?: (node: React.ReactNode) => React.ReactNode
+): ((node: React.ReactNode) => React.ReactNode) => {
+  const renderDraggableModal = (node: React.ReactNode): React.ReactNode => (
+    <DraggableModalRender>
+      {existingRender !== undefined ? existingRender(node) : node}
+    </DraggableModalRender>
+  )
+  renderDraggableModal.displayName = 'DraggableModalRenderCallback'
+
+  return renderDraggableModal
+}

assets/js/src/core/components/modal/hooks/use-draggable-modal.styles.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { createStyles } from '@Pimcore/modules/ant-design/styles/create-styles'
+
+export const useStyle = createStyles(({ css }) => {
+  return {
+    // Applied to the draggable wrapper around the modal content. Scopes the
+    // "grab" affordance to the header/title so the body keeps normal cursors,
+    // and prevents accidental text selection while dragging by the header.
+    draggableWrapper: css`
+      .ant-modal-header,
+      .ant-modal-confirm-title {
+        cursor: move;
+        user-select: none;
+      }
+    `
+  }
+}, { hashPriority: 'low' })

assets/js/src/core/components/modal/hooks/use-draggable-modal.tsx

@@ -0,0 +1,126 @@
+/**
+ * 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, { useCallback, useEffect, useRef, useState } from 'react'
+import Draggable, { type DraggableData, type DraggableEvent } from 'react-draggable'
+import cn from 'classnames'
+import { useStyle } from './use-draggable-modal.styles'
+
+/**
+ * CSS selectors (relative to the modal content) that initiate a drag.
+ * Covers both the standard modal header and the imperative confirm/alert title.
+ */
+const DEFAULT_HANDLE = '.ant-modal-header, .ant-modal-confirm-title'
+
+/**
+ * CSS selectors inside the handle that must NOT start a drag, so interactive
+ * header content (close button, links, form controls placed in the title)
+ * keeps working. `react-draggable` matches these against the mousedown target.
+ */
+const DEFAULT_CANCEL = '.ant-modal-close, button, a, input, textarea, select, [role="button"], .ant-select, .ant-input, .ant-input-number, .ant-picker'
+
+export interface UseDraggableModalOptions {
+  /** When false the modal renders untouched (no drag behaviour, no wrapper). */
+  disabled?: boolean
+  /**
+   * Controlled open state of the modal. When provided, the drag position is
+   * reset to origin every time the modal opens, so a modal that was dragged
+   * away does not reappear off-centre on the next open. Imperative modals are
+   * destroyed on close, so they get a fresh position automatically and can
+   * omit this.
+   */
+  open?: boolean
+  /** Override the drag-handle selector. */
+  handle?: string
+  /** Override the non-draggable selector. */
+  cancel?: string
+  /** Extra class(es) merged onto the draggable wrapper element. */
+  wrapperClassName?: string
+}
+
+export interface UseDraggableModalResult {
+  /** Pass to antd `Modal`'s / `ModalFuncProps`' `modalRender`. */
+  modalRender: (modal: React.ReactNode) => React.ReactNode
+  /** The draggable container element; useful as a `getPopupContainer` target. */
+  nodeRef: React.RefObject<HTMLDivElement>
+}
+
+/**
+ * Shared drag-by-header behaviour for every Studio modal. Wraps the modal
+ * content in `react-draggable` using the standard antd recipe (viewport bounds
+ * recomputed on drag start, `nodeRef` to stay React-18/19 safe) and drives the
+ * position in controlled mode so it can be reset between opens.
+ */
+export const useDraggableModal = (options: UseDraggableModalOptions = {}): UseDraggableModalResult => {
+  const {
+    disabled = false,
+    open,
+    handle = DEFAULT_HANDLE,
+    cancel = DEFAULT_CANCEL,
+    wrapperClassName
+  } = options
+
+  const { styles } = useStyle()
+  const nodeRef = useRef<HTMLDivElement>(null)
+  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 })
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  // Reset to origin (centred) whenever the modal transitions to open.
+  useEffect(() => {
+    if (open === true) {
+      setPosition({ x: 0, y: 0 })
+    }
+  }, [open])
+
+  const onStart = useCallback((_event: DraggableEvent, uiData: DraggableData): void => {
+    const { clientWidth, clientHeight } = window.document.documentElement
+    const targetRect = nodeRef.current?.getBoundingClientRect()
+    if (targetRect === undefined || targetRect === null) {
+      return
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y)
+    })
+  }, [])
+
+  const onDrag = useCallback((_event: DraggableEvent, uiData: DraggableData): void => {
+    setPosition({ x: uiData.x, y: uiData.y })
+  }, [])
+
+  const modalRender = useCallback((modal: React.ReactNode): React.ReactNode => {
+    if (disabled) {
+      return modal
+    }
+
+    return (
+      <Draggable
+        bounds={ bounds }
+        cancel={ cancel }
+        handle={ handle }
+        nodeRef={ nodeRef }
+        onDrag={ onDrag }
+        onStart={ onStart }
+        position={ position }
+      >
+        <div
+          className={ cn(styles.draggableWrapper, wrapperClassName) }
+          ref={ nodeRef }
+        >
+          {modal}
+        </div>
+      </Draggable>
+    )
+  }, [bounds, cancel, handle, disabled, position, onDrag, onStart, styles.draggableWrapper, wrapperClassName])
+
+  return { modalRender, nodeRef }
+}

assets/js/src/core/components/modal/hooks/use-studio-modal.tsx

@@ -8,13 +8,36 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { App } from 'antd'
+import { App, type ModalFuncProps } from 'antd'
 import { useMemo } from 'react'
 import { isInIframe } from '@Pimcore/utils/iframe'
 import { isPimcoreStudioApiAvailable, getPimcoreStudioApi } from '@Pimcore/app/public-api/helpers/api-helper'
+import { withDraggableModalRender } from '@Pimcore/components/modal/hooks/draggable-modal-render'
 
 type ModalStaticFunctions = ReturnType<typeof App.useApp>['modal']
 
+/** Imperative modal methods whose dialogs should become draggable by their title. */
+const DRAGGABLE_METHODS = ['confirm', 'info', 'success', 'error', 'warning'] as const
+
+/**
+ * Wraps an imperative modal instance so its confirm/info/success/error/warning
+ * dialogs are draggable, composing with any `modalRender` the caller already
+ * provides (e.g. the form modals' autofocus render).
+ */
+function withDraggableModals (modal: ModalStaticFunctions): ModalStaticFunctions {
+  const wrapped = { ...modal }
+
+  DRAGGABLE_METHODS.forEach((method) => {
+    const original = modal[method]
+    wrapped[method] = (config: ModalFuncProps) => original({
+      ...config,
+      modalRender: withDraggableModalRender(config.modalRender)
+    })
+  })
+
+  return wrapped
+}
+
 export interface StudioModalResponse {
   modal: ModalStaticFunctions
   localModal: ModalStaticFunctions
@@ -43,8 +66,8 @@ export function useStudioModal (): StudioModalResponse {
     }
 
     return {
-      modal: studioModal,
-      localModal
+      modal: withDraggableModals(studioModal),
+      localModal: withDraggableModals(localModal)
     }
   }, [localModal])
 }

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

@@ -13,6 +13,7 @@ import React from 'react'
 import { useStyle } from '@Pimcore/components/modal/modal.styles'
 import type useModal from 'antd/es/modal/useModal'
 import { ModalTitle } from '@Pimcore/components/modal/modal-title/modal-title'
+import { useDraggableModal } from '@Pimcore/components/modal/hooks/use-draggable-modal'
 
 export type ModalSize = 'M' | 'ML' | 'L' | 'XL' | 'XXL'
 
@@ -22,13 +23,28 @@ export interface IModalProps extends AntModalProps {
   size?: ModalSize
   limitContentHeight?: boolean
   className?: string
+  /**
+   * Allow the modal to be dragged by its header. Defaults to `true`.
+   * A caller-provided `modalRender` always takes precedence and disables the
+   * built-in drag behaviour.
+   */
+  draggable?: boolean
   useModal?: typeof useModal
   children: React.ReactNode
 }
 
-export const Modal = ({ iconName, size = 'M', limitContentHeight, className, title, children, styles: stylesProp, ...props }: IModalProps): React.JSX.Element => {
+export const Modal = ({ iconName, size = 'M', limitContentHeight, className, title, children, styles: stylesProp, draggable = true, modalRender: modalRenderProp, ...props }: IModalProps): React.JSX.Element => {
   const { styles } = useStyle()
 
+  // A caller-provided modalRender wins (e.g. WindowModal supplies its own),
+  // which also switches off the built-in drag wrapper.
+  const hasCustomRender = modalRenderProp !== undefined
+  const { modalRender: draggableRender } = useDraggableModal({
+    open: props.open,
+    disabled: !draggable || hasCustomRender
+  })
+  const modalRender = hasCustomRender ? modalRenderProp : (draggable ? draggableRender : undefined)
+
   const classes = [styles.modal, className].filter(Boolean)
 
   const sizeBasedWidth = {
@@ -49,6 +65,7 @@ export const Modal = ({ iconName, size = 'M', limitContentHeight, className, tit
   return (
     <AntModal
       className={ classes.join(' ') }
+      modalRender={ modalRender }
       styles={ mergedStyles }
       title={ (
         <ModalTitle iconName={ iconName }>{title}</ModalTitle>