Mattermost-server: Webapp: Emoji Autocomplete UI update

[mattermod]

To align with the new autocomplete menus, update the emoji autocomplete UI. For more details, see the Figma design linked below.

Note:

• follow the same rules for positioning this popover as this ticket
• Figma Design File

---

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-30898

[gorostiaga]

I am learning React I'd like to get more experience. I'd like to help on this issue.

[jasonblais]

@gorostiaga awesome! Thank you for your interest, if you have any questions, let us know

cc @emilyacook

[gorostiaga]

Are there any guidelines required for the devs to allow?
or all the needed info is in the readme

Is there any deadline for this ticket?

[gorostiaga]

Hi all!
I have tried to deploy the environment for start coding based on the guidelines at developers.mattermost.com/contribute*
I've got the following errors: (Is it critical? or Could I skip them and start coding this ticker#16514 ????

Summary of all failing tests
 FAIL  components/data_prefetch/data_prefetch.test.tsx
  ● /components/data_prefetch › Should call for posts based on prefetchQueueObj and obey concurrency

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "mentionChannel1"
    Received
           1: "currentChannelId"
           2: "mentionChannel0"

    Number of calls: 2

      117 |         await loadProfilesForSidebar();
      118 |         expect(instance.prefetchPosts).toHaveBeenCalledWith('mentionChannel0');
    > 119 |         expect(instance.prefetchPosts).toHaveBeenCalledWith('mentionChannel1');
          |                                        ^
      120 |         expect(instance.prefetchPosts).toHaveBeenCalledTimes(3);
      121 | 
      122 |         await props.actions.prefetchChannelPosts();

      at Object.<anonymous> (components/data_prefetch/data_prefetch.test.tsx:119:40)

  ● /components/data_prefetch › Should call for new prefetchQueueObj channels on change of prop and cancel previous ones

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 3
    Received number of calls: 2

      144 |         await props.actions.prefetchChannelPosts();
      145 |         await loadProfilesForSidebar();
    > 146 |         expect(instance.prefetchPosts).toHaveBeenCalledTimes(3);
          |                                        ^
      147 |         wrapper.setProps({
      148 |             prefetchQueueObj: {
      149 |                 1: ['mentionChannel5', 'mentionChannel6'],

      at Object.<anonymous> (components/data_prefetch/data_prefetch.test.tsx:146:40)


Test Suites: 1 failed, 525 passed, 526 total
Tests:       2 failed, 4268 passed, 4270 total
Snapshots:   1359 passed, 1359 total
Time:        360.126 s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `cross-env NODE_ICU_DATA=node_modules/full-icu TZ=Etc/UTC jest --maxWorkers=50%`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/goros/.npm/_logs/2020-12-12T13_59_11_775Z-debug.log
make: *** [Makefile:34: test] Error 1

[jasonblais]

@hmhealey or @hanzei are you open to help assist @gorostiaga with the errors reported above?

[hmhealey]

You should be fine to ignore them for this since they're not related to this ticket, but they are a bit concerning. Are you on the latest version of master from this repository?

[gorostiaga]

Yes sir, forked on Dec 10th.
I didn't backup from any existing containers btw, as I thought it was not necessary.
Pls give me access to the figma file. My email is: [email protected]

[hmhealey]

Sorry about that. I'll get in touch with the person who owns the file to make it public.

And we've had another report of that test failing for someone else as well. It shouldn't affect you hopefully as long as it isn't occurring on CI.

[hmhealey]

Okay, it should be accessible now. If you sign up for a free account, you'll also be able to inspect the design to get more details on the exact measurements for padding and such.

[EVaughan00]

I've been experiencing the same data_prefetch test fail. Any update on that? Thanks

[gorostiaga]

Hello!
It seems that this issue has been solved with the proposed code in this PR
Is it needed additional code or support on this issue since it would be solved with the mentioned code?
Thanks!

[jasonblais]

cc @hmhealey on the above question from @gorostiaga

[hmhealey]

No, that PR is about positioning the autocomplete relative to where the user is typing, but this ticket is about updating the emoji autocomplete to look more like the ones for at-mentions and such.


It's mostly to update the spacing around the autocomplete items to match the newer design.