Added send via notification feature (#3359)

* added `send via notification` feature

* Automatic frontend build

* updated check

* Automatic frontend build

---------

Co-authored-by: Corepex <16717695+Corepex@users.noreply.github.com>

Author: Corepex

assets/js/src/core/modules/asset/editor/toolbar/context-menu/context-menu.tsx

@@ -22,6 +22,8 @@ import { ButtonGroup } from '@Pimcore/components/button-group/button-group'
 import { useContextMenuSlot } from '@Pimcore/modules/app/context-menu-registry/use-context-menu-slot'
 import { contextMenuConfig } from '@Pimcore/modules/app/context-menu-registry/context-menu-config'
 import { type AssetEditorContextMenuProps } from '@Pimcore/modules/app/context-menu-registry/context-types'
+import { useShareViaNotification } from '@Pimcore/modules/notifications/actions/share-via-notification/use-share-via-notification'
+import { isNil } from 'lodash'
 
 export const EditorToolbarContextMenu = (): React.JSX.Element => {
   const { t } = useTranslation()
@@ -35,7 +37,15 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
 
   const items: DropdownMenuProps['items'] = useContextMenuSlot(contextMenuConfig.assetEditorToolbar.name, contextMenuProps)
 
-  const visibleItems = items.filter(item => (item !== null && 'hidden' in item) ? item?.hidden === false : false)
+  const { shareViaNotificationContextMenuItem, shareViaNotificationModal } = useShareViaNotification(
+    isNil(asset)
+      ? undefined
+      : { type: 'asset', id: asset.id, fullPath: asset.fullPath ?? undefined }
+  )
+
+  const allItems = [...items, shareViaNotificationContextMenuItem]
+
+  const visibleItems = allItems.filter(item => (item !== null && 'hidden' in item) ? item?.hidden === false : false)
 
   const buttonGroupItems: ReactElement[] = []
 
@@ -58,7 +68,7 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
     buttonGroupItems.push(
       <Dropdown
         key="more-button"
-        menu={ { items } }
+        menu={ { items: allItems } }
       >
         <DropdownButton key="dropdown-button">
           {t('toolbar.more')}
@@ -68,10 +78,13 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
   }
 
   return (
-    <ButtonGroup
-      items={ buttonGroupItems }
-      noSpacing
-    />
+    <>
+      <ButtonGroup
+        items={ buttonGroupItems }
+        noSpacing
+      />
+      {shareViaNotificationModal}
+    </>
   )
 
   function hasDataChanged (): boolean {

assets/js/src/core/modules/data-object/editor/toolbar/context-menu/context-menu.tsx

@@ -21,6 +21,8 @@ import { useContextMenuSlot } from '@Pimcore/modules/app/context-menu-registry/u
 import { contextMenuConfig } from '@Pimcore/modules/app/context-menu-registry/context-menu-config'
 import { type DataObjectEditorContextMenuProps } from '@Pimcore/modules/app/context-menu-registry/context-types'
 import { ContextMenuActionName } from '@Pimcore/modules/element/actions'
+import { useShareViaNotification } from '@Pimcore/modules/notifications/actions/share-via-notification/use-share-via-notification'
+import { isNil } from 'lodash'
 import { type MenuProps } from 'antd'
 import React, { type ReactElement, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -38,7 +40,15 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
 
   const items: DropdownMenuProps['items'] = useContextMenuSlot(contextMenuConfig.dataObjectEditorToolbar.name, contextMenuProps)
 
-  const visibleItems = items.filter(item => (item !== null && 'hidden' in item) ? item?.hidden === false : false)
+  const { shareViaNotificationContextMenuItem, shareViaNotificationModal } = useShareViaNotification(
+    isNil(dataObject)
+      ? undefined
+      : { type: 'object', id: dataObject.id, fullPath: dataObject.fullPath ?? undefined }
+  )
+
+  const allItems = [...items, shareViaNotificationContextMenuItem]
+
+  const visibleItems = allItems.filter(item => (item !== null && 'hidden' in item) ? item?.hidden === false : false)
 
   const handleMenuClick: MenuProps['onClick'] = (e) => {
     if (e.key === ContextMenuActionName.unpublish) {
@@ -57,7 +67,7 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
       <Dropdown
         key="dropdown-button"
         menu={ {
-          items,
+          items: allItems,
           onClick: handleMenuClick
         } }
         open={ isOpen }
@@ -70,9 +80,12 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
   }
 
   return (
-    <ButtonGroup
-      items={ buttonGroupItems }
-      noSpacing
-    />
+    <>
+      <ButtonGroup
+        items={ buttonGroupItems }
+        noSpacing
+      />
+      {shareViaNotificationModal}
+    </>
   )
 }

assets/js/src/core/modules/document/editor/toolbar/context-menu/context-menu.tsx

@@ -22,6 +22,8 @@ import { ReloadButton } from './components/reload-button/reload-button'
 import { useContextMenuSlot } from '@Pimcore/modules/app/context-menu-registry/use-context-menu-slot'
 import { contextMenuConfig } from '@Pimcore/modules/app/context-menu-registry/context-menu-config'
 import { type DocumentEditorContextMenuProps } from '@Pimcore/modules/app/context-menu-registry/context-types'
+import { useShareViaNotification } from '@Pimcore/modules/notifications/actions/share-via-notification/use-share-via-notification'
+import { isNil } from 'lodash'
 
 export const EditorToolbarContextMenu = (): React.JSX.Element => {
   const { t } = useTranslation()
@@ -37,7 +39,15 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
   // Get context menu items from registry
   const items: DropdownMenuProps['items'] = useContextMenuSlot(contextMenuConfig.documentEditorToolbar.name, contextMenuProps)
 
-  const visibleItems = items.filter(item => (item !== null && 'hidden' in item) ? item?.hidden === false : false)
+  const { shareViaNotificationContextMenuItem, shareViaNotificationModal } = useShareViaNotification(
+    isNil(document)
+      ? undefined
+      : { type: 'document', id: document.id, fullPath: document.fullPath ?? undefined }
+  )
+
+  const allItems = [...items, shareViaNotificationContextMenuItem]
+
+  const visibleItems = allItems.filter(item => (item !== null && 'hidden' in item) ? item?.hidden === false : false)
 
   const handleMenuClick: MenuProps['onClick'] = (e) => {
     if (e.key === ContextMenuActionName.unpublish) {
@@ -56,7 +66,7 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
       <Dropdown
         key={ 'dropdown-button' }
         menu={ {
-          items,
+          items: allItems,
           onClick: handleMenuClick
         } }
         open={ isOpen }
@@ -69,9 +79,12 @@ export const EditorToolbarContextMenu = (): React.JSX.Element => {
   }
 
   return (
-    <ButtonGroup
-      items={ buttonGroupItems }
-      noSpacing
-    />
+    <>
+      <ButtonGroup
+        items={ buttonGroupItems }
+        noSpacing
+      />
+      {shareViaNotificationModal}
+    </>
   )
 }

assets/js/src/core/modules/element/actions/index.ts

@@ -56,4 +56,6 @@ export enum ContextMenuActionName {
   clearImageThumbnails = 'clearImageThumbnails',
   clearVideoThumbnails = 'clearVideoThumbnails',
   clearPdfThumbnails = 'clearPdfThumbnails',
+
+  shareViaNotification = 'shareViaNotification',
 }

assets/js/src/core/modules/notifications/actions/share-via-notification/use-share-via-notification.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 { type ItemType } from '@Pimcore/components/dropdown/dropdown'
+import { Icon } from '@Pimcore/components/icon/icon'
+import { type ManyToOneRelationValue } from '@Pimcore/components/many-to-one-relation/many-to-one-relation'
+import { ContextMenuActionName } from '@Pimcore/modules/element/actions'
+import { isAllowed } from '@Pimcore/modules/auth/permission-helper'
+import { UserPermission } from '@Pimcore/modules/auth/enums/user-permission'
+import { SendNotificationModal } from '@Pimcore/modules/notifications/send-notification/send-notification-modal'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface UseShareViaNotificationReturn {
+  shareViaNotificationContextMenuItem: ItemType
+  shareViaNotificationModal: React.JSX.Element
+}
+
+export const useShareViaNotification = (
+  attachment: ManyToOneRelationValue | undefined
+): UseShareViaNotificationReturn => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  const shareViaNotificationContextMenuItem: ItemType = {
+    label: t('element.share-via-notification'),
+    key: ContextMenuActionName.shareViaNotification,
+    icon: <Icon value={ 'notes-events' } />,
+    hidden: !isAllowed(UserPermission.SendNotifications) || attachment === undefined,
+    onClick: () => {
+      setIsOpen(true)
+    }
+  }
+
+  const shareViaNotificationModal = (
+    <SendNotificationModal
+      initialAttachment={ attachment }
+      onClose={ () => { setIsOpen(false) } }
+      open={ isOpen }
+    />
+  )
+
+  return {
+    shareViaNotificationContextMenuItem,
+    shareViaNotificationModal
+  }
+}

assets/js/src/core/modules/notifications/send-notification/send-notification-modal.tsx

@@ -13,22 +13,30 @@ import { WindowModal } from '@Pimcore/components/modal/window-modal/window-modal
 import { FieldWidthProvider } from '@Pimcore/modules/element/dynamic-types/definitions/objects/data-related/providers/field-width/field-width-provider'
 import { Button, Flex, Icon, ModalFooter, useMessage } from '@sdk/components'
 import { GeneralError, trackError } from '@sdk/modules/app'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNotification } from '../hooks/use-send-notification'
 import { NotificationForm } from './components/notification-form/notification-form'
+import { type ManyToOneRelationValue } from '@Pimcore/components/many-to-one-relation/many-to-one-relation'
 
 interface SendNotificationModalProps {
   open: boolean
   onClose: () => void
+  initialAttachment?: ManyToOneRelationValue
 }
 
-export const SendNotificationModal = ({ open, ...props }: SendNotificationModalProps): React.JSX.Element => {
+export const SendNotificationModal = ({ open, initialAttachment, ...props }: SendNotificationModalProps): React.JSX.Element => {
   const { t } = useTranslation()
   const [form] = Form.useForm()
   const { sendNotification, isLoading } = useNotification()
   const { success } = useMessage()
 
+  useEffect(() => {
+    if (open && initialAttachment !== undefined) {
+      form.setFieldValue('attachment', initialAttachment)
+    }
+  }, [open, initialAttachment])
+
   const onClose = (): void => {
     form.resetFields()
     props.onClose()