[MM-32927] Upgrade chart.js from version 2.9.4 to 3.8.2

[m1lt0n]

Summary

Upgrade chart.js dependency from 2.9.4 to 3.8.2 in the context of regular dependency upgrades in the web app.

There are some breaking changes that are addressed in the places where chart.js is used (according to the migration guide of the library.

Note: As far as I've checked, the charts are used in top channels insights and in system console. Checking manually the components seem to behave the same as before.

Testing

Channel insights need a professional or enterprise plan to be visible.

Ticket Link

https://mattermost.atlassian.net/browse/MM-34915

Release Note

Upgrade chart.js from version "2.9.4" to "3.8.2"

[mattermod]

E2E tests not automatically triggered, because PR has no approval yet. Please ask a developer to review and then try again to attach the QA label.

[nevyangelova]

/e2e-test

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/250369

[nevyangelova]

@m1lt0n some e2e tests are failing but doesn't seem related to me https://mattermost-cypress-report.s3.amazonaws.com/250369-e0123d9-onprem-ent-webapp-pr-11326-mm-ee-test:e0123d9/mochawesome.html

can you double check just in case?

[m1lt0n]

thanks @nevyangelova I'll look into them later or in the morning. They seem unrelated (like a11y ones etc) but I'll look into them a bit more.

[m1lt0n]

/update-branch

[m1lt0n]

/e2e-test

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/250429

[m1lt0n]

/e2e-test

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/250824

[m1lt0n]

^ @nevyangelova the latest e2e run succeeded (without any changes to the code, since failures were either in unrelated code or there were errors pulling images in the workers).

[m1lt0n]

Thanks @BenCookie95 ! Good catch with the legend :) For the responsiveness, all the options are set properly, so I'll need to troubleshoot what's going on there.

[m1lt0n]

@BenCookie95 Added a couple of changes based on your feedback. Specifically:

1. Removed the legends (thanks :) )
2. Removed the decimal points (I found that after comparing current chart in production with the one in my local)
3. Listen to resize as the width of the container is fixed between breakpoints in several occasions. In chart.js 2, there was a size monitor element created by default, which is not the case for chart.js 3, so I had to do that for responsive charts.

All the changes are in the last commit if you want to check atomically.

[BenCookie95]

@BenCookie95 Added a couple of changes based on your feedback. Specifically:

1. Removed the legends (thanks :) )
2. Removed the decimal points (I found that after comparing current chart in production with the one in my local)
3. Listen to resize as the width of the container is fixed between breakpoints in several occasions. In chart.js 2, there was a size monitor element created by default, which is not the case for chart.js 3, so I had to do that for responsive charts.

All the changes are in the last commit if you want to check atomically.

Thanks @m1lt0n, changes look to be working. One more small thing is that the cursor is no longer a pointer in the graph, would be great if we could have that back

[m1lt0n]

@BenCookie95 and @M-ZubairAhmed latest changes are in and pipeline green, feel free to review :)

[M-ZubairAhmed]

/e2e-test

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/254978

[m1lt0n]

/e2e-test

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/256646

[jgilliam17]

running e2es again, last cycle failed to start https://automation-dashboard.vercel.app/cycles/fa67a1b2-810f-4fad-8b55-118e056bc326

[jgilliam17]

Thanks @m1lt0n Tested, looks good to merge. Verified top channel insights and system console pages - working as before. One issue found during testing, but it seems that it self-resolved. High Availability table was not displaying initially and was taking a long time to load, refresh caused an error (see image). After few minutes, server loaded again and the issue wasn't reproducing. Just noting here what was observed, in case high availability table section is using chart.js E2E report - no PR related failures.

[m1lt0n]

Thanks @jgilliam17 ! High available table doesn't use chart.js. The error seems to be coming from our CDN, so perhaps some instant glitch

[mm-cloud-bot]

Test server destroyed

[jgilliam17]

Thanks for checking @m1lt0n I left the server available in case logs were needed.