feat: [DHIS2-15783] Tooltip on long working list names

src/core_modules/capture-core/components/ConditionalTooltipForChip/ConditionalTooltipForChip.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 ConditionalTooltipForChipPlain = (props: Props) => {
+    const { enabled, children, classes, onClick, ...passOnProps } = props;
+
+    return enabled ?
+        (
+            <Tooltip
+                {...passOnProps}
+            >
+                {({ ref, onMouseOver, onMouseOut }) => (
+                    <button
+                        ref={ref}
+                        onClick={onClick}
+                        className={classes.button}
+                        onMouseOver={onMouseOver}
+                        onMouseOut={onMouseOut}
+                        onFocus={onMouseOver}
+                        onBlur={onMouseOut}
+                    >
+                        {children}
+                    </button>
+                )}
+            </Tooltip>
+        ) : (
+            <button
+                onClick={onClick}
+                className={classes.button}
+            >
+                {children}
+            </button>
+        );
+};
+
+export const ConditionalTooltipForChip = withStyles(styles)(ConditionalTooltipForChipPlain);

src/core_modules/capture-core/components/ConditionalTooltipForChip/index.js

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

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 { ConditionalTooltipForChip } from '../ConditionalTooltipForChip';
 
 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>
+        <ConditionalTooltipForChip
+            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>
+        </ConditionalTooltipForChip>
+
     );
 };

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 { ConditionalTooltipForChip } from '../../ConditionalTooltipForChip';
 
 type PassOnProps = {
     currentListIsModified: boolean,
@@ -27,16 +28,28 @@ export const TemplateSelectorChip = (props: Props) => {
     ]);
 
     return (
-        <Chip
-            dataTest="workinglist-template-selector-chip"
-            selected={id === currentTemplateId}
+        <ConditionalTooltipForChip
+            content={name}
+            placement={'top'}
+            openDelay={800}
+            enabled={name.length > 30}
             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}
+                    isSelectedTemplate={id === currentTemplateId}
+                />
+            </Chip>
+        </ConditionalTooltipForChip>
     );
 };
+