add tooltips to editor tabs

assets/js/src/core/components/editor-tabs/editor-tabs.icon-wrapper.tsx

@@ -0,0 +1,61 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import React, { useEffect, useState } from 'react'
+import { Tooltip } from 'antd'
+
+export interface IconWrapperProps {
+  tabKey: string
+  activeTabKey: string | null
+  tabKeyInFocus: string | undefined
+  tabKeyOutOfFocus: string | undefined
+  title: string
+  children: React.ReactNode
+}
+export const IconWrapper = ({ tabKey, activeTabKey, tabKeyInFocus, tabKeyOutOfFocus, title, children }: IconWrapperProps): React.JSX.Element => {
+  const [showTooltip, setShowTooltip] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (tabKeyInFocus !== undefined) { setShowTooltip(tabKeyInFocus) }
+  }, [tabKeyInFocus])
+
+  useEffect(() => {
+    if (tabKeyOutOfFocus !== undefined && tabKeyOutOfFocus === showTooltip) { setShowTooltip(null) }
+  }, [tabKeyOutOfFocus])
+
+  const toolTipIsVisible = showTooltip === tabKey && activeTabKey !== tabKey
+
+  const handleMouseEnter = (): void => {
+    setShowTooltip(tabKey)
+  }
+
+  const handleMouseLeave = (): void => {
+    setShowTooltip(null)
+  }
+
+  return (
+    <Tooltip
+      arrow={ false }
+      open={ toolTipIsVisible }
+      placement="top"
+      title={ title }
+    >
+      <div
+        onMouseEnter={ handleMouseEnter }
+        onMouseLeave={ handleMouseLeave }
+      >
+        {children}
+      </div>
+    </Tooltip>
+  )
+}

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

@@ -11,14 +11,15 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React, { useContext } from 'react'
+import React, { type FocusEvent, useContext, useEffect, useState } from 'react'
 import { useStyle } from '@Pimcore/components/editor-tabs/editor-tabs.styles'
 import { Button, Tabs } from 'antd'
 import { type IEditorTab } from '@Pimcore/modules/element/editor/tab-manager/interface/IEditorTab'
 import { Icon } from '@Pimcore/components/icon/icon'
 import { useDetachTab } from '@Pimcore/components/editor-tabs/hooks/use-detach-tab'
 import { ElementToolbar } from '@Pimcore/components/element-toolbar/element-toolbar'
 import { AssetContext } from '@Pimcore/modules/asset/asset-provider'
+import { IconWrapper } from '@Pimcore/components/editor-tabs/editor-tabs.icon-wrapper'
 
 export interface IAdvancedEditorTab extends IEditorTab {
   originalLabel?: string
@@ -34,6 +35,35 @@ export const EditorTabs = ({ defaultActiveKey, showLabelIfActive, items }: IEdit
   const { styles } = useStyle()
   const { detachWidget } = useDetachTab()
   const { id } = useContext(AssetContext)
+  const [activeTabKey, setActiveTabKey] = useState<string | null>(null)
+  const [tabKeyInFocus, setTabKeyInFocus] = useState<string | undefined>(undefined)
+  const [tabKeyOutOfFocus, setTabKeyOutOfFocus] = useState<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (activeTabKey === null && items.length > 0) {
+      setActiveTabKey(items[0].key)
+    }
+  }, [items])
+
+  const onChange = (key: string): void => {
+    setActiveTabKey(key)
+  }
+
+  const tabKeys: string[] = items?.map(item => item.key)
+
+  const findTabKey = (event: FocusEvent<HTMLDivElement>): string | undefined => {
+    const target = event.target as HTMLDivElement
+    const id = target.id
+    return tabKeys.find(substring => id.includes(substring))
+  }
+
+  const onFocus = (event: FocusEvent<HTMLDivElement>): void => {
+    setTabKeyInFocus(findTabKey(event))
+  }
+
+  const onBlur = (event: FocusEvent<HTMLDivElement>): void => {
+    setTabKeyOutOfFocus(findTabKey(event))
+  }
 
   const openDetachedWidget = (item: IEditorTab): void => {
     detachWidget({
@@ -44,7 +74,18 @@ export const EditorTabs = ({ defaultActiveKey, showLabelIfActive, items }: IEdit
   items = items?.map((item) => {
     const tmpItem = {
       ...item,
-      originalLabel: item.label as string
+      originalLabel: item.label as string,
+      icon: (
+        <IconWrapper
+          activeTabKey={ activeTabKey }
+          tabKey={ item.key }
+          tabKeyInFocus={ tabKeyInFocus }
+          tabKeyOutOfFocus={ tabKeyOutOfFocus }
+          title={ item.label as string }
+        >
+          {item.icon}
+        </IconWrapper>
+      )
     }
 
     if (tmpItem.isDetachable === true) {
@@ -77,6 +118,9 @@ export const EditorTabs = ({ defaultActiveKey, showLabelIfActive, items }: IEdit
         className={ `${styles.editorTabs} ${(showLabelIfActive === true) ? styles.onlyActiveLabel : ''}` }
         defaultActiveKey={ defaultActiveKey }
         items={ items }
+        onBlur={ onBlur }
+        onFocus={ onFocus }
+        onTabClick={ onChange }
         tabBarExtraContent={ {
           left: <ElementToolbar id={ id! } />
         } }

public/build/3c406fdd-5727-4b3c-83b5-06179027221a/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/3c406fdd-5727-4b3c-83b5-06179027221a/main.js"
+      ]
+    }
+  }
+}

public/build/3c406fdd-5727-4b3c-83b5-06179027221a/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/3c406fdd-5727-4b3c-83b5-06179027221a/main.js": "/bundles/pimcorestudioui/build/3c406fdd-5727-4b3c-83b5-06179027221a/main.js"
+}

public/build/6c31694b-8df2-4e52-8a27-5ad87347ad61/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/6c31694b-8df2-4e52-8a27-5ad87347ad61/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/6c31694b-8df2-4e52-8a27-5ad87347ad61/core-dll.js"
+      ]
+    }
+  }
+}