feat: [DHIS2-15783] Tooltip on long working list names (#3474)

src/core_modules/capture-core/components/DataEntries/SingleEventRegistrationEntry/DataEntryWrapper/DataEntry/withMainButton.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import { Button } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { newEventSaveTypes } from './newEventSaveTypes';
 import { getDataEntryKey } from '../../../../DataEntry/common/getDataEntryKey';
 import { type RenderFoundation } from '../../../../../metaData';

src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import Popover from '@material-ui/core/Popover';
 import { IconChevronDown16, IconChevronUp16, Button } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { ActiveFilterButton } from './ActiveFilterButton.component';
 import { FilterSelectorContents } from '../Contents';
 import type { UpdateFilter, ClearFilter, RemoveFilter } from '../../types';

src/core_modules/capture-core/components/Notes/Notes.component.js

@@ -6,7 +6,7 @@ import { withStyles } from '@material-ui/core';
 import { colors, spacersNum, Menu, MenuItem, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { withFocusSaver } from 'capture-ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { TextField } from '../FormFields/New';
 import type { Note } from './notes.types';
 

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentQuickActions/QuickActionButton/QuickActionButton.js

@@ -3,7 +3,7 @@ import React from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { Button, spacers } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import type { QuickActionButtonTypes } from './QuickActionButton.types';
 
 const styles = {

src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/ProgramStageSelector/ProgramStageSelector.component.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { Button, spacers, spacersNum } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { withStyles } from '@material-ui/core';
 import { NonBundledDhis2Icon } from '../../../NonBundledDhis2Icon';
 

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js

@@ -5,7 +5,7 @@ import { dataEntryIds, dataEntryKeys } from 'capture-core/constants';
 import { withStyles } from '@material-ui/core/';
 import { spacers, IconFileDocument24, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { ViewEventSection } from '../Section/ViewEventSection.component';
 import { ViewEventSectionHeader } from '../Section/ViewEventSectionHeader.component';
 import { EditEventDataEntry } from '../../../WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container';

src/core_modules/capture-core/components/Relationships/Relationships.component.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import i18n from '@dhis2/d2-i18n';
 import { IconButton, withStyles } from '@material-ui/core';
 import { IconArrowRight16, IconCross24, Button } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import type { RelationshipType } from '../../metaData';
 import type { Relationship, Entity } from './relationships.types';
 

src/core_modules/capture-core/components/TemplateSelector/TemplateSelector.component.js

@@ -18,7 +18,6 @@ const getStyles = () => ({
         padding: 0,
         gap: '4px',
         marginBottom: spacers.dp8,
-        overflow: 'hidden',
     },
     chipContainer: {
         padding: 0,
@@ -80,7 +79,10 @@ const TemplateSelectorPlain = (props: Props) => {
         const { id } = customTemplate;
         return (
             <div className={classes.chipContainer} key={id}>
-                <TemplateSelectorChip template={customTemplate} onSelectTemplate={onSelectTemplate} />
+                <TemplateSelectorChip
+                    template={customTemplate}
+                    onSelectTemplate={onSelectTemplate}
+                />
             </div>
         );
     });

src/core_modules/capture-core/components/TemplateSelector/TemplateSelectorChip.component.js

@@ -2,6 +2,7 @@
 import React, { useCallback } from 'react';
 import { Chip } from '@dhis2/ui';
 import type { WorkingListTemplate } from './workingListsBase.types';
+import { TooltipForChip } from '../Tooltips/TooltipForChip';
 
 type Props = {
     template: WorkingListTemplate,
@@ -19,8 +20,23 @@ export const TemplateSelectorChip = (props: Props) => {
     const text = displayName.length > 30 ? `${displayName.substring(0, 27)}...` : displayName;
 
     return (
-        <Chip marginTop="0" marginBottom="0" marginLeft="0" marginRight="0" dataTest="workinglist-template-selector-chip" onClick={selectTemplateHandler}>
-            {text}
-        </Chip>
+        <TooltipForChip
+            content={displayName}
+            placement={'top'}
+            openDelay={800}
+            enabled={displayName.length > 30}
+            onClick={selectTemplateHandler}
+        >
+            <Chip
+                marginTop={0}
+                marginBottom={0}
+                marginLeft={0}
+                marginRight={0}
+                dataTest="workinglist-template-selector-chip"
+            >
+                {text}
+            </Chip>
+        </TooltipForChip>
+
     );
 };

src/core_modules/capture-core/components/Tooltips/TooltipForChip/TooltipForChip.component.js

@@ -0,0 +1,60 @@
+// @flow
+import React from 'react';
+import { Tooltip } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core/';
+
+type Props = {
+    enabled: boolean,
+    onClick: Function,
+    children: any,
+    ...CssClasses,
+};
+
+const styles = {
+    // button style reset
+    button: {
+        border: 'none',
+        backgroundColor: 'transparent',
+        borderRadius: '16px',
+        padding: 0,
+        margin: 0,
+        minWidth: 0,
+        minHeight: 0,
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+    },
+};
+const TooltipForChipPlain = (props: Props) => {
+    const { enabled, children, classes, onClick, ...passOnProps } = props;
+
+    return enabled ?
+        (
+            <Tooltip
+                {...passOnProps}
+            >
+                {({ ref, onMouseOver, onMouseOut }) => (
+                    <button
+                        ref={ref}
+                        onClick={onClick}
+                        className={classes.button}
+                        onPointerEnter={onMouseOver}
+                        onPointerLeave={onMouseOut}
+                        onFocus={onMouseOver}
+                        onBlur={onMouseOut}
+                    >
+                        {children}
+                    </button>
+                )}
+            </Tooltip>
+        ) : (
+            <button
+                onClick={onClick}
+                className={classes.button}
+            >
+                {children}
+            </button>
+        );
+};
+
+export const TooltipForChip = withStyles(styles)(TooltipForChipPlain);

src/core_modules/capture-core/components/Tooltips/TooltipForChip/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { TooltipForChip } from './TooltipForChip.component';

src/core_modules/capture-core/components/WidgetEnrollment/Actions/AddNew/AddNew.component.js

@@ -2,7 +2,7 @@
 import { IconAdd16, MenuItem } from '@dhis2/ui';
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import type { Props } from './addNew.types';
 
 export const AddNew = ({ canAddNew, onlyEnrollOnce, tetName, onAddNew }: Props) => {

src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withMainButton.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import { Button } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { type RenderFoundation } from '../../../metaData';
 
 type Props = {

src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { spacersNum, Button, colors, IconEdit24, IconArrowLeft24 } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 import i18n from '@dhis2/d2-i18n';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { useEnrollmentEditEventPageMode, useAvailableProgramStages } from 'capture-core/hooks';
 import { useCoreOrgUnit } from 'capture-core/metadataRetrieval/coreOrgUnit';
 import type { Props } from './widgetEventEdit.types';

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core';
 import { spacersNum, colors, IconAdd16, Button } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { StageOverview } from './StageOverview';
 import type { Props } from './stage.types';
 import { Widget } from '../../../Widget';

src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js

@@ -16,7 +16,7 @@ import { colors,
     IconAdd16,
     Tooltip,
 } from '@dhis2/ui';
-import { ConditionalTooltip } from 'capture-core/components/ConditionalTooltip';
+import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { sortDataFromEvent } from './hooks/sortFuntions';
 import { useComputeDataFromEvent, useComputeHeaderColumn, formatRowForView } from './hooks/useEventList';
 import { DEFAULT_NUMBER_OF_ROW, SORT_DIRECTION } from './hooks/constants';

src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Chip } from '@dhis2/ui';
 import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component';
 import type { WorkingListTemplate } from './workingListsBase.types';
+import { TooltipForChip } from '../../Tooltips/TooltipForChip';
 
 type PassOnProps = {
     currentListIsModified: boolean,
@@ -13,10 +14,17 @@ type Props = {
     template: WorkingListTemplate,
     currentTemplateId: string,
     onSelectTemplate: Function,
+    maxCharacters?: number,
 };
 
 export const TemplateSelectorChip = (props: Props) => {
-    const { template, currentTemplateId, onSelectTemplate, ...passOnProps } = props;
+    const {
+        template,
+        currentTemplateId,
+        onSelectTemplate,
+        maxCharacters = 30,
+        ...passOnProps
+    } = props;
     const { name, id } = template;
 
     const selectTemplateHandler = React.useCallback(() => {
@@ -27,16 +35,29 @@ export const TemplateSelectorChip = (props: Props) => {
     ]);
 
     return (
-        <Chip
-            dataTest="workinglist-template-selector-chip"
-            selected={id === currentTemplateId}
+        <TooltipForChip
+            content={name}
+            placement={'top'}
+            openDelay={800}
+            enabled={name.length > maxCharacters}
             onClick={selectTemplateHandler}
         >
-            <TemplateSelectorChipContent
-                {...passOnProps}
-                text={name}
-                isSelectedTemplate={id === currentTemplateId}
-            />
-        </Chip>
+            <Chip
+                marginTop={0}
+                marginBottom={0}
+                marginLeft={0}
+                marginRight={0}
+                dataTest="workinglist-template-selector-chip"
+                selected={id === currentTemplateId}
+            >
+                <TemplateSelectorChipContent
+                    {...passOnProps}
+                    text={name}
+                    maxCharacters={maxCharacters}
+                    isSelectedTemplate={id === currentTemplateId}
+                />
+            </Chip>
+        </TooltipForChip>
     );
 };
+

src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChipContent.component.js

@@ -2,6 +2,7 @@
 
 type Props = {
     currentListIsModified: boolean,
+    maxCharacters: number,
     text: string,
     isSelectedTemplate: boolean,
 };
@@ -10,10 +11,11 @@ export const TemplateSelectorChipContent = (props: Props) => {
     const {
         currentListIsModified,
         text,
+        maxCharacters,
         isSelectedTemplate,
     } = props;
 
-    const truncatedText = text.length > 30 ? `${text.substring(0, 27)}...` : text;
+    const truncatedText = text.length > maxCharacters ? `${text.substring(0, maxCharacters - 3)}...` : text;
     const content = isSelectedTemplate && currentListIsModified ? `${truncatedText} *` : truncatedText;
 
     return content;