Added context menu to config tabs (#3330)

* added context menu to config tabs

* Apply eslint-fixer changes

* Automatic frontend build

* added sonar fixes

* Apply eslint-fixer changes

* Automatic frontend build

---------

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

Author: Corepex

assets/js/src/core/components/tabs/tab-context-menu.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 { useTranslation } from 'react-i18next'
+import { Menu } from '@Pimcore/components/menu/menu'
+import { useCloseContextMenu } from '@Pimcore/components/context-menu-wrapper/context-menu-wrapper'
+
+export interface TabContextMenuProps {
+  tabKey: string
+  allKeys: string[]
+  onClose: (key: string) => void
+}
+
+export const TabContextMenu = ({ tabKey, allKeys, onClose }: TabContextMenuProps): React.JSX.Element => {
+  const { t } = useTranslation()
+  const closeMenu = useCloseContextMenu()
+
+  return (
+    <Menu
+      items={ [
+        {
+          key: 'close-tab',
+          label: t('close-tab'),
+          onClick: () => {
+            onClose(tabKey)
+            closeMenu?.()
+          }
+        },
+        {
+          key: 'close-others',
+          label: t('close-others'),
+          onClick: () => {
+            allKeys.forEach((k) => {
+              if (k !== tabKey) {
+                onClose(k)
+              }
+            })
+            closeMenu?.()
+          }
+        },
+        {
+          key: 'close-all',
+          label: t('close-all'),
+          onClick: () => {
+            allKeys.forEach((k) => { onClose(k) })
+            closeMenu?.()
+          }
+        }
+      ] }
+    />
+  )
+}

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

@@ -13,6 +13,8 @@ import { Tabs as AntdTabs, type TabsProps } from 'antd'
 import { useStyles } from '@Pimcore/components/tabs/tabs.styles'
 import cn from 'classnames'
 import { isUndefined } from 'lodash'
+import { ContextMenuWrapper } from '@Pimcore/components/context-menu-wrapper/context-menu-wrapper'
+import { TabContextMenu } from '@Pimcore/components/tabs/tab-context-menu'
 
 export interface ITabsProps extends TabsProps {
   onClose?: (any) => void
@@ -65,19 +67,44 @@ const Component = ({ items, className, activeKey, onClose, hasStickyHeader = fal
   }, [onClose, items])
 
   // Add mouse down handler to each tab item
-  const enhancedItems = useMemo(() => items?.map(item => ({
-    ...item,
-    label: (
-      <button
-        className={ styles.middleClickButton }
-        data-tab-key={ item.key }
-        onMouseDown={ handleMiddleClick }
-        type="button"
-      >
-        {item.label}
-      </button>
-    )
-  })), [items, handleMiddleClick])
+  const enhancedItems = useMemo(() => {
+    const allKeys = items?.map(item => item.key) ?? []
+
+    return items?.map(item => {
+      const button = (
+        <button
+          className={ styles.middleClickButton }
+          data-tab-key={ item.key }
+          onMouseDown={ handleMiddleClick }
+          type="button"
+        >
+          {item.label}
+        </button>
+      )
+
+      const label = isUndefined(onClose)
+        ? button
+        : (
+          <ContextMenuWrapper
+            calculateAutoHeight={ false }
+            renderMenu={ () => (
+              <TabContextMenu
+                allKeys={ allKeys }
+                onClose={ onClose }
+                tabKey={ item.key }
+              />
+            ) }
+          >
+            {button}
+          </ContextMenuWrapper>
+          )
+
+      return {
+        ...item,
+        label
+      }
+    })
+  }, [items, handleMiddleClick, onClose])
 
   return (
     <AntdTabs