refactor: [DHIS2-17650] Replace Material-UI Table, TableBody, TableCell, TableHead and TableRow

[henrikmv]

DHIS2-17650

• Changed from Material-UI Table, TableBody, TableCell, TableHead and TableRow to DHIS2/UI
• Style changes: Checkboxes are placed to the right to keep them away from the drag/drop icon. Small changes to the table (added border, header row color, etc)
• Changed from using DragSource and DropTarget to using useDrag and useDrop
• Had to remove the div to style the table properly. Since DndProvider was expecting the div, I got this error message: Only native element nodes can now be passed to React DnD connectors. You can either wrap DataTableRow into a div or turn it into a drag source or a drop target itself. Solved by using useRef to set the DataTableRow to ref.
• Updated Cypress tests to look after the checkbox in tablerow

[simonadomnisoru]

LGTM!

[github-actions]

🚀 Deployed on https://deploy-preview-3721--dhis2-capture.netlify.app

[henrikmv]

@eirikhaugstulen requested some changes to improve usability, so I have implemented them now.

Note: I can see that the hover effect can be confusing under drag, but I found it hard to fix it.

Would you give me another review with the new changes implemented @simonadomnisoru? Thanks!

[simonadomnisoru]

Note: I can see that the hover effect can be confusing under drag, but I found it hard to fix it.

How about setting the opacity to 0 when dragging? This way the drawn row will look empty and can help with the confusion of the hover effect (this is also how it currently works in play with the material UI components).

[henrikmv]

@simonadomnisoru
I agree that setting the opacity to 0 makes it better so I will change it to:
const opacity = isDragging ? 0 : 1;

However, the table row hover is still confusing. I added a picture where I am dragging the Gender, but the hover is marking Last name.

[simonadomnisoru]

I use Firefox where the hover issue doesn't happen, but I was able to reproduce it in Chrome. I bealive you can remove the hover styles altogether with something like this in the DragDropListItem.component.js.

// the styles

const styles = {
    rowWithoutHover: {
        '&:hover > td': {
            backgroundColor: 'transparent !important',
        },
    },
};

// and in the render use the class

return (
        <DataTableRow ref={ref} style={{ opacity }} className={classes.rowWithoutHover} draggable>
            <DataTableCell>{text}</DataTableCell>
            ......

[henrikmv]

Thank you, @simonadomnisoru! That works. With the changes, the hover was completely removed, so in addition to your suggested changes, I added a state to tell if any element in the list is being dragged. Based on that state, I will disable the hover. What do you think? I appreciate your help!

[simonadomnisoru]

It looks great now 👏

[eirikhaugstulen]

Great work @henrikmv!

[geethaalwan]

Tested successfully on 2.42 version

[dhis2-bot]

🎉 This PR is included in version 100.77.0 🎉

The release is available on:

• AppHub release
• v100.77.0
• GitHub release

Your semantic-release bot 📦🚀