DEV Community

Cover image for My Progress on Zulip's Issue
Oliver Pham
Oliver Pham

Posted on

My Progress on Zulip's Issue

In preparing for battle I have always found that plans are useless, but planning is indispensable. - Dwight D. Eisenhower

Indeed my initial approach to the issue wasn't a good one, but it was not useless. Discussing it with several Zulip members & contributors helped me come up with a neater one and complete a prototype. After some refinement, I finally made a pull request for the feature.

search_suggestion: Show profile pictures in search auto-complete suggestions #20494

Fix #20267

What I've basically changed is how bootstrap-typeahead should render the auto-complete suggestions for users only. I've attempted to reuse the existing UI components (e.g. input_pill) and styling, but it seems hard to make them work together as expected without adding a container and some CSS. If you find a better approach, I'm open to all recommendations.

During the process of encapsulating the typeahead list items inside flexboxes, I noticed the whitespace right after prefix is not escaped in HTML. This can cause, for example, "StreamDenmark" because the whitespace before "Denmark", which is wrapped with <strong> tags, is ignored in HTML.

Testing plan:

  • Manual Testing

GIFs or screenshots: On large screens: image image

On smaller screens: image image

What happened

A few hours after my messages were sent, I got some helpful feedback to my initial thoughts. Basically, I was advised to modify a more relevant, lower-level function, get_person_suggestions(). That should help me avoid breaking the existing features.

My first prototype for the feature looks like this:

A list of users with their avatars

A list of search descriptions with a user's avatar and name

It's really ugly, wasn't it? I was then advised to use an existing UI component, user_pill, to display a user's full name and avatar as a distinct block. Another refinement was to vertically align the text. I eventually implemented both, which significantly improved the design of my initial prototype.

A list of users with their avatars in pill-shaped containers

A list of search descriptions with a user's avatar and name in a pill-shaped container

What I've learnt

I should have made a draft/work-in-progress pull request early in my development process and improved on it iteratively. Keeping others posted of my prototype of the feature was a good idea, but I missed out another important deliverable: my nasty code. Working with an open source community means that I can get feedback for me code more easily, so I should've taken advantage of that.

What's next

Hopefully, the maintainers will review my code soon. In the meantime, I probably need to fix some broken automation tests.

Cover photo by Mohammad Rahmani on Unsplash

Discussion (0)