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:
On smaller screens:
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:
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.
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
Top comments (0)