fix(alert-modal): treat a null title as no title

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

@@ -0,0 +1,79 @@
+/**
+ * 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 { render } from '@testing-library/react'
+import { useAlertModal } from './use-alert-modal'
+
+const modal = {
+  info: jest.fn(),
+  error: jest.fn(),
+  warning: jest.fn(),
+  success: jest.fn()
+}
+
+jest.mock('@sdk/components', () => ({
+  useStudioModal: () => ({ modal })
+}))
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => `t:${key}` })
+}))
+
+jest.mock('@Pimcore/components/icon/icon', () => ({
+  Icon: () => null
+}))
+
+// Opens one alert through the hook and hands back the config antd was called with.
+const openAlert = (open: (alert: ReturnType<typeof useAlertModal>) => void, method: keyof typeof modal): Record<string, unknown> => {
+  const Harness = (): null => {
+    open(useAlertModal())
+
+    return null
+  }
+
+  render(<Harness />)
+
+  return modal[method].mock.calls.at(-1)![0]
+}
+
+describe('useAlertModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('translates a title it is given', () => {
+    const config = openAlert((alert) => { alert.error({ content: 'boom', title: 'custom.title' }) }, 'error')
+
+    expect(config.title).toBe('t:custom.title')
+  })
+
+  /**
+   * The error handler reports a plain error as `{ title: null }`. antd renders its title slot for
+   * every value that is not undefined or null, so passing the translation of `null` through would
+   * leave an empty heading above the message and the icon aligned to it rather than to the text.
+   */
+  it('falls back to the default heading when the title is null', () => {
+    const config = openAlert((alert) => { alert.error({ content: 'boom', title: null }) }, 'error')
+
+    expect(config.title).toBe('t:error')
+  })
+
+  it.each([
+    ['info', 't:info'],
+    ['warn', 't:warning'],
+    ['success', 't:success']
+  ] as const)('falls back to the default heading for %s', (kind, expected) => {
+    const method = kind === 'warn' ? 'warning' : kind
+    const config = openAlert((alert) => { alert[kind]({ content: 'hello', title: null }) }, method)
+
+    expect(config.title).toBe(expected)
+  })
+})

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

@@ -11,15 +11,20 @@
 import { type ModalFuncProps } from 'antd'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { isUndefined } from 'lodash'
+import { isNil } from 'lodash'
 import { useStudioModal } from '@sdk/components'
 import { Icon } from '@Pimcore/components/icon/icon'
 
 type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps)
 
 interface IAlertModalProps extends Omit<ModalFuncProps, 'content' | 'title'> {
   content: string | React.ReactNode
-  title?: string
+  /**
+   * Omit it (or pass null) to get the default heading for the kind of alert. Anything defined is
+   * handed to antd as the title, and antd renders the title slot for any non-null value - an empty
+   * one leaves the icon floating above a text block it no longer lines up with.
+   */
+  title?: string | null
 }
 
 export interface UseAlertModalResponse {
@@ -37,7 +42,7 @@ export const useAlertModal = (): UseAlertModalResponse => {
     () => ({
       info: ({ title, content, icon, ...rest }) => (
         modal.info({
-          title: !isUndefined(title) ? t(title) : t('info'),
+          title: !isNil(title) ? t(title) : t('info'),
           content,
           icon: icon ?? <Icon value='info' />,
           okText: t('alert-modal.ok-text'),
@@ -46,7 +51,7 @@ export const useAlertModal = (): UseAlertModalResponse => {
       ),
       error: ({ title, content, icon, ...rest }) => (
         modal.error({
-          title: !isUndefined(title) ? t(title) : t('error'),
+          title: !isNil(title) ? t(title) : t('error'),
           content,
           icon: icon ?? <Icon value='close-filled' />,
           okText: t('alert-modal.ok-text'),
@@ -55,7 +60,7 @@ export const useAlertModal = (): UseAlertModalResponse => {
       ),
       warn: ({ title, content, icon, ...rest }) => (
         modal.warning({
-          title: !isUndefined(title) ? t(title) : t('warning'),
+          title: !isNil(title) ? t(title) : t('warning'),
           content,
           icon: icon ?? <Icon value='alert' />,
           okText: t('alert-modal.ok-text'),
@@ -64,7 +69,7 @@ export const useAlertModal = (): UseAlertModalResponse => {
       ),
       success: ({ title, content, icon, ...rest }) => (
         modal.success({
-          title: !isUndefined(title) ? t(title) : t('success'),
+          title: !isNil(title) ? t(title) : t('success'),
           content,
           icon: icon ?? <Icon value='checkmark' />,
           okText: t('alert-modal.ok-text'),