EZP-31417: Added tooltips to UDW (#278)

Resources/translations/universal_discovery_widget.en.xliff

@@ -21,6 +21,16 @@
         <target state="new">Browse</target>
         <note>key: browse.label</note>
       </trans-unit>
+      <trans-unit id="a35f9da1e68c9f811d1a0093f434bc32fd0d2b78" resname="browser.add">
+        <source>Add</source>
+        <target state="new">Add</target>
+        <note>key: browser.add</note>
+      </trans-unit>
+      <trans-unit id="ddff3bc3b7838c0c1e752a37cd40b4a6d537dcdd" resname="browser.selected">
+        <source>Selected</source>
+        <target state="new">Selected</target>
+        <note>key: browser.selected</note>
+      </trans-unit>
       <trans-unit id="1713d0deb6344882cf915babb2df574556a3f82c" resname="content_create.cancel.label">
         <source>Cancel</source>
         <target state="new">Cancel</target>
@@ -116,11 +126,21 @@
         <target state="new">Subtree</target>
         <note>key: filters.subtree</note>
       </trans-unit>
+      <trans-unit id="87994bd9606f86f5999597107b8782ae5018a5ea" resname="meta_preview.bookmark">
+        <source>Bookmark</source>
+        <target state="new">Bookmark</target>
+        <note>key: meta_preview.bookmark</note>
+      </trans-unit>
       <trans-unit id="5e42fe3d48d64c1c9a735ac6286d3b0c06a008a0" resname="meta_preview.creation_date">
         <source>Creation Date</source>
         <target state="new">Creation Date</target>
         <note>key: meta_preview.creation_date</note>
       </trans-unit>
+      <trans-unit id="2e0757eac91bd5a5cd89bd2811a0126bf8bd8194" resname="meta_preview.edit">
+        <source>Edit</source>
+        <target state="new">Edit</target>
+        <note>key: meta_preview.edit</note>
+      </trans-unit>
       <trans-unit id="4828dcbcd9cf2ad9c2b69a9b9420c94eccbe5dcc" resname="meta_preview.edit_translation">
         <source>Edit translation</source>
         <target state="new">Edit translation</target>
@@ -131,6 +151,11 @@
         <target state="new">Last Modified</target>
         <note>key: meta_preview.last_modified</note>
       </trans-unit>
+      <trans-unit id="7035b652193ea7af439a17d02ff8eda8013318ea" resname="meta_preview.preview">
+        <source>Preview</source>
+        <target state="new">Preview</target>
+        <note>key: meta_preview.preview</note>
+      </trans-unit>
       <trans-unit id="18595eab7f455b6e3267de1bd018011b8126ab97" resname="meta_preview.translations">
         <source>Translations</source>
         <target state="new">Translations</target>
@@ -181,6 +206,31 @@
         <target state="new">Some helpful search tips</target>
         <note>key: search.tips</note>
       </trans-unit>
+      <trans-unit id="1e503a68093242d42791b3ce4572f246b994d303" resname="selected_locations.clear_all">
+        <source>Clear all</source>
+        <target state="new">Clear all</target>
+        <note>key: selected_locations.clear_all</note>
+      </trans-unit>
+      <trans-unit id="f57171aaa260d58b75c085d5606779e75a97751f" resname="selected_locations.clear_selection">
+        <source>Clear selection</source>
+        <target state="new">Clear selection</target>
+        <note>key: selected_locations.clear_selection</note>
+      </trans-unit>
+      <trans-unit id="7b84163c8a4215667a4a05bd8f44f25aa5ddc198" resname="selected_locations.collapse.sidebar">
+        <source>Collapse sidebar</source>
+        <target state="new">Collapse sidebar</target>
+        <note>key: selected_locations.collapse.sidebar</note>
+      </trans-unit>
+      <trans-unit id="6e6722ce3ff968c64d765d570209299cd6628024" resname="selected_locations.confirm_selection">
+        <source>Confirm selection</source>
+        <target state="new">Confirm selection</target>
+        <note>key: selected_locations.confirm_selection</note>
+      </trans-unit>
+      <trans-unit id="19700661da70137e52d0009660c9a87f5bcb99bd" resname="selected_locations.expand.sidebar">
+        <source>Expand sidebar</source>
+        <target state="new">Expand sidebar</target>
+        <note>key: selected_locations.expand.sidebar</note>
+      </trans-unit>
       <trans-unit id="49f1cbcf4bdd5ba51b7f17dc8dfe93d95cbd4795" resname="selected_locations.selected">
         <source>selected</source>
         <target state="new">selected</target>
@@ -191,11 +241,31 @@
         <target state="new">Date</target>
         <note>key: sorting.date.label</note>
       </trans-unit>
+      <trans-unit id="a3253454c09869d111cc52367a11b7d419819a8a" resname="sorting.date.tooltip">
+        <source>Sort by Date</source>
+        <target state="new">Sort by Date</target>
+        <note>key: sorting.date.tooltip</note>
+      </trans-unit>
+      <trans-unit id="7e978afd229113429d273612c01318f09e3f3e5e" resname="sorting.grid.view">
+        <source>Grid view</source>
+        <target state="new">Grid view</target>
+        <note>key: sorting.grid.view</note>
+      </trans-unit>
       <trans-unit id="c06c6d1c4592ee395e16fc267b514ee167146886" resname="sorting.name.label">
         <source>Name</source>
         <target state="new">Name</target>
         <note>key: sorting.name.label</note>
       </trans-unit>
+      <trans-unit id="2ef6e531e02791b42911cf5f7279f9bedebb3fb2" resname="sorting.name.tooltip">
+        <source>Sort by Name</source>
+        <target state="new">Sort by Name</target>
+        <note>key: sorting.name.tooltip</note>
+      </trans-unit>
+      <trans-unit id="27c00b5da502fe6afe6b76e59ddeb951bbbf2c6f" resname="sorting.panels.view">
+        <source>Panels view</source>
+        <target state="new">Panels view</target>
+        <note>key: sorting.panels.view</note>
+      </trans-unit>
     </body>
   </file>
 </xliff>

src/modules/universal-discovery/components/content-create-button/content.create.button.js

@@ -19,7 +19,9 @@ const ContentCreateButton = ({ isDisabled }) => {
     const [selectedLocations, dispatchSelectedLocationsAction] = useContext(SelectedLocationsContext);
     const [multiple, multipleItemsLimit] = useContext(MultipleConfigContext);
     const { hidden, allowedLocations } = useContext(ContentOnTheFlyConfigContext);
+    const createLabel = Translator.trans(/*@Desc("Create")*/ 'create_content.create', {}, 'universal_discovery_widget');
     const toggleContentCreateVisibility = () => {
+        window.eZ.helpers.tooltips.hideAll();
         setCreateContentVisible((prevState) => !prevState);
     };
     let selectedLocation = loadedLocationsMap.find((loadedLocation) => loadedLocation.parentLocationId === markedLocationId);
@@ -46,7 +48,9 @@ const ContentCreateButton = ({ isDisabled }) => {
             <button
                 className="c-content-create-button__btn btn btn-primary"
                 disabled={isDisabled || !hasAccess || !isAllowedLocation || isLimitReached}
-                onClick={toggleContentCreateVisibility}>
+                onClick={toggleContentCreateVisibility}
+                data-tooltip-container-selector=".c-top-menu"
+                title={createLabel}>
                 <Icon name="create" extraClasses="ez-icon--medium ez-icon--light" />
             </button>
         </div>

src/modules/universal-discovery/components/content-create-widget/content.create.widget.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect, useRef } from 'react';
 
 import Icon from '../../../common/icon/icon';
 
@@ -17,6 +17,7 @@ const languages = Object.values(window.eZ.adminUiConfig.languages.mappings);
 const contentTypes = Object.entries(window.eZ.adminUiConfig.contentTypes);
 
 const ContentCreateWidget = () => {
+    const refContentTree = useRef(null);
     const [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext);
     const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
     const { allowedLanguages, preselectedLanguage, preselectedContentType } = useContext(ContentOnTheFlyConfigContext);
@@ -69,16 +70,26 @@ const ContentCreateWidget = () => {
         'universal_discovery_widget'
     );
     const createLabel = Translator.trans(/*@Desc("Create")*/ 'create_content.create', {}, 'universal_discovery_widget');
+    const closeLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'universal_discovery_widget');
     const widgetClassName = createCssClassNames({
         'c-content-create': true,
         'c-content-create--hidden': !createContentVisible,
     });
 
+    useEffect(() => {
+        window.eZ.helpers.tooltips.parse(refContentTree.current);
+    }, []);
+
     return (
-        <div className={widgetClassName}>
+        <div className={widgetClassName} ref={refContentTree}>
             <div className="c-content-create__header">
                 <div className="c-content-create__header-title">{createContentLabel}</div>
-                <button type="button" className="c-content-create__close-button" onClick={close}>
+                <button
+                    type="button"
+                    className="c-content-create__close-button"
+                    onClick={close}
+                    title={closeLabel}
+                    data-tooltip-container-selector=".c-udw-tab">
                     <Icon name="discard" extraClasses="ez-icon--small" />
                 </button>
             </div>

src/modules/universal-discovery/components/content-edit-button/content.edit.button.js

@@ -21,6 +21,7 @@ const ContentEditButton = ({ version, location, isDisabled }) => {
     const [isTranslationSelectorVisible, setIsTranslationSelectorVisible] = useState(false);
     const contentTypeInfo = contentTypesMap[location.ContentInfo.Content.ContentType._href];
     const isUserContentType = window.eZ.adminUiConfig.userContentTypes.includes(contentTypeInfo.identifier);
+    const editLabel = Translator.trans(/*@Desc("Edit")*/ 'meta_preview.edit', {}, 'universal_discovery_widget');
 
     useEffect(() => {
         setIsTranslationSelectorVisible(false);
@@ -107,7 +108,9 @@ const ContentEditButton = ({ version, location, isDisabled }) => {
             <button
                 className="c-content-edit-button__btn btn btn-primary"
                 disabled={!version || isDisabled}
-                onClick={toggleTranslationSelectorVisibility}>
+                onClick={toggleTranslationSelectorVisibility}
+                data-tooltip-container-selector=".c-udw-tab"
+                title={editLabel}>
                 <Icon name="edit" extraClasses="ez-icon--medium ez-icon--light" />
             </button>
             {renderTranslationSelector()}

src/modules/universal-discovery/components/content-table/content.table.js

@@ -1,17 +1,22 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import ContentTableItem from './content.table.item';
 
 import Pagination from '../../../common/pagination/pagination';
 
 const ContentTable = ({ count, itemsPerPage, items, activePageIndex, title, onPageChange }) => {
+    const refContentTable = useRef(null);
     const nameLabel = Translator.trans(/*@Desc("Name")*/ 'content_table.name', {}, 'universal_discovery_widget');
     const modifiedLabel = Translator.trans(/*@Desc("Modified")*/ 'content_table.modified', {}, 'universal_discovery_widget');
     const contentTypeLabel = Translator.trans(/*@Desc("Content Type")*/ 'content_table.content_type', {}, 'universal_discovery_widget');
 
+    useEffect(() => {
+        window.eZ.helpers.tooltips.parse(refContentTable.current);
+    }, []);
+
     return (
-        <div className="c-content-table">
+        <div className="c-content-table" ref={refContentTable}>
             <div className="c-content-table__title">{title}</div>
             <div className="c-content-table__items">
                 <table className="table">

src/modules/universal-discovery/components/finder/finder.leaf.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import ToggleSelectionButton from '../toggle-selection-button/toggle.selection.button';
@@ -58,6 +58,10 @@ const FinderLeaf = ({ location }) => {
         'c-finder-leaf--not-selectable': isNotSelectable,
     });
 
+    useEffect(() => {
+        window.eZ.helpers.tooltips.parse(window.document.querySelector('.c-udw-tab'));
+    }, []);
+
     return (
         <div className={className} onClick={markLocation}>
             <span className="c-finder-leaf__name">
@@ -67,7 +71,9 @@ const FinderLeaf = ({ location }) => {
                         customPath={contentTypesMap[location.ContentInfo.Content.ContentType._href].thumbnail}
                     />
                 </span>
-                <span>{location.ContentInfo.Content.TranslatedName}</span>
+                <span title={location.ContentInfo.Content.TranslatedName} data-tooltip-container-selector=".c-udw-tab">
+                    {location.ContentInfo.Content.TranslatedName}
+                </span>
             </span>
             {renderToggleSelectionButton()}
         </div>

src/modules/universal-discovery/components/menu-button/menu.button.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 
-const MenuButton = ({ extraClasses, onClick, isDisabled, children }) => {
+const MenuButton = ({ extraClasses, onClick, isDisabled, title, children }) => {
     const className = createCssClassNames({
         'c-menu-button': true,
         [extraClasses]: !!extraClasses,
     });
 
     return (
-        <button className={className} onClick={onClick} disabled={isDisabled}>
+        <button className={className} onClick={onClick} disabled={isDisabled} title={title} data-tooltip-container-selector=".c-udw-tab">
             {children}
         </button>
     );
@@ -20,13 +20,15 @@ MenuButton.propTypes = {
     extraClasses: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     isDisabled: PropTypes.bool,
+    title: PropTypes.string,
     children: PropTypes.any,
 };
 
 MenuButton.defaultProps = {
     children: [],
     extraClasses: '',
     isDisabled: false,
+    title: '',
 };
 
 export default MenuButton;

src/modules/universal-discovery/components/selected-locations/selected.locations.item.js

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import Icon from '../../../common/icon/icon';
@@ -7,9 +7,16 @@ import Thumbnail from '../../../common/thumbnail/thumbnail';
 import { SelectedLocationsContext, ContentTypesMapContext } from '../../universal.discovery.module';
 
 const SelectedLocationsItem = ({ location, permissions }) => {
+    const refSelectedLocationsItem = useRef(null);
     const [selectedLocations, dispatchSelectedLocationsAction] = useContext(SelectedLocationsContext);
     const contentTypesMap = useContext(ContentTypesMapContext);
+    const clearLabel = Translator.trans(
+        /*@Desc("Clear selection")*/ 'selected_locations.clear_selection',
+        {},
+        'universal_discovery_widget'
+    );
     const removeFromSelection = () => {
+        window.eZ.helpers.tooltips.hideAll(refSelectedLocationsItem.current);
         dispatchSelectedLocationsAction({ type: 'REMOVE_SELECTED_LOCATION', id: location.id });
     };
     const sortedActions = useMemo(() => {
@@ -23,8 +30,12 @@ const SelectedLocationsItem = ({ location, permissions }) => {
     const version = location.ContentInfo.Content.CurrentVersion.Version;
     const thumbnailData = version ? version.Thumbnail : {};
 
+    useEffect(() => {
+        window.eZ.helpers.tooltips.parse(refSelectedLocationsItem.current);
+    }, []);
+
     return (
-        <div className="c-selected-locations-item">
+        <div className="c-selected-locations-item" ref={refSelectedLocationsItem}>
             <div className="c-selected-locations-item__image-wrapper">
                 <Thumbnail thumbnailData={thumbnailData} />
             </div>
@@ -40,7 +51,12 @@ const SelectedLocationsItem = ({ location, permissions }) => {
 
                     return <Component key={action.id} location={location} permissions={permissions} />;
                 })}
-                <button type="button" className="c-selected-locations-item__remove-button" onClick={removeFromSelection}>
+                <button
+                    type="button"
+                    className="c-selected-locations-item__remove-button"
+                    onClick={removeFromSelection}
+                    title={clearLabel}
+                    data-tooltip-container-selector=".c-udw-tab">
                     <Icon name="discard" extraClasses="ez-icon--small-medium" />
                 </button>
             </div>