Mattermost-server: Remove usage of jQuery from post components

[mattermod]

We've been working for some time to remove jQuery as a dependency of the Mattermost web app to reduce the size of the JS bundle in the web app and to simplify our code by using equivalent functions that are usable on all browsers that we support.

As part of this, we should remove the usage of jQuery from the following files in the web app:

• components/link_tooltip/link_tooltip.tsx
• components/create_comment/create_comment.jsx
• components/rhs_thread/rhs_thread.tsx
• components/suggestion/search_suggestion_list.jsx

In addition to removing the usage of jQuery, E2E tests using Cypress should be added to ensure that:

• Link tooltips (such as those added by the Mattermost Plugin Demo) fade in and out with an animation
• The RHS correctly scrolls to the bottom when a thread is opened or when the user types in the comment box
• The autocomplete in the search box correctly scrolls when the user navigates through options with the keyboard

If you have any questions, feel free to ask @hmhealey (or @harrison on our Mattermost community server).

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-27447

[bhargav50]

Question in second point in tests expectations, which is,
"Link tooltips (such as those added by the Mattermost Plugin Demo) fade in and out with an animation"

Here I don't think in e2e tests are supposed to check animations, as far as I have researched, cypress doesn't support testing of animations. @hmhealey if that is answered, then I can pick this task.

[hmhealey]

Instead of checking for a specific animation, we could look for the CSS class that controls the animation since I believe those ones are CSS-based. If they're not CSS-based, you could make them CSS based and look for a class or I think Cypress has the ability to look at CSS styles if I'm not mistaken.

[bhargav50]

Thanks for answering, I would like to work on this

[hmhealey]

Awesome. Feel free to let me know if you have any more questions.

[bhargav50]

@hmhealey I am trying to check the link tool tip UI by installing demo plugin but it is not showing on mouse hover of a link, is this feature broken or I am doing something wrong?

[hmhealey]

Looks like it only shows them for any link to www.test.com based on this.

[bhargav50]

@hmhealey In the issue description it is suggested to remove jQuery from component/suggestion/search_suggestion_list.jsx but there it is just one function which is anyway not called anywhere. Core part in search box (Scrolling) with jQuery is at components/suggestion/suggestion_list.jsx. Shall I remove jQuery usage from there?

[hmhealey]

SearchSuggestionList extends SuggestionList, so SearchSuggestionList.getContent is actually called by SuggestionList.scrollToItem when you're using a SearchSuggestionList. I made the mistake of using inheritance when writing that component since that was back before I understood that inheritance causes a lot of problems in React. You might need wrap the SearchSuggestionList's items in a div to be able to get a ref for that without using jquery.

[bhargav50]

Sorry I am not getting enough time to work on this, you can assign this one to someone else.

[hmhealey]

No worries. I'll open it back up. Thanks again for your help though 😄

[Jonany]

@hmhealey, could I be assigned to this, please?

[Jonany]

@hmhealey

Link tooltips (such as those added by the Mattermost Plugin Demo) fade in and out with an animation.

If I create a test using the Demo Plugin, won't the test fail on a regular installation?

[hmhealey]

I'm not sure I understand. Are you trying to write an E2E test with the demo plugin?

[Jonany]

Yes. The wording in the issue description seems to indicate that it is necessary.

Link tooltips (such as those added by the Mattermost Plugin Demo) fade in and out with an animation. (emphasis mine)

The previous contributor had also installed the demo plugin.

I am trying to check the link tool tip UI by installing demo plugin

However, based on your question, I presume that the plugin is not needed. If that's the case, I suggest the reference to the demo plugin be removed from the issue description.

[hmhealey]

If we can figure out how to load the plugin as part of a unit test, that'd be great, but I don't actually know if we have any way to do that currently. I'll ask around to see if anyone knows how to do that. If we can't find a way to do that, I think we can skip adding an automated test for that and just test it manually instead.

[hmhealey]

Looks like there's a few tests for it such as message_channel_draw_spec.js and upgrade_spec.js. The second one actually uses the demo plugin as well.

[Jonany]

Thanks! :+1: I'll take a look at those tests.

[Jonany]

Is there an existing TM4J number I should use for the linktool tip tests?

[hmhealey]

I'm not aware of any existing test cases for that, but I'll check. We can always create the test cases for it after the fact.

[hmhealey]

QA created a test case for the demo plugin's tooltip if you want to link your test case to that

https://mattermost.atlassian.net/projects/MM?selectedItem=com.atlassian.plugins.atlassian-connect-plugin:com.kanoah.test-manager__main-project-page#!/testCase/MM-T3422

[Jonany]

Thanks, Harrison. I'm unassigning myself to give others a chance to work on it. It's been slow going so far due to recurring issues with my dev environment and I'll be much busier over the next few weeks.

What I have found is that the link tooltip is shown/hidden via jQuery show()/hide() using a 400ms transition. React or Vanilla JS functions will need to be used to replicate the show()/hide() functionality.

The styles applied to the tooltip are defined as a JS object in link_tooltip.tsx. The styles do not change based on the tooltip's visibility so they could left alone. As is mentioned previously in the comments, applying a CSS class to the tooltip when transitioning would probably be the easiest way of testing the transition.

[hmhealey]

Thanks for the info and for your work on this so far. It'll definitely be helpful for whoever picks this up!