Initial Thoughts on a Zulip's Issue
Tags: opensource, devjournal, beginners
Published: 2021-12-02 03:48:37

---
series: Contributing to Zulip
---

At the beginning of this week, I've found an interesting [issue](https://github.com/zulip/zulip/issues/20162) on Zulip's [repo](https://github.com/zulip/zulip). 

{% github zulip/zulip %}

[Zulip](https://zulip.com/) is a popular open source communication platform built with Django (Python). Despite having spent some time one it, I eventually let another developer handle that issue[^1] and claimed another [one](https://github.com/zulip/zulip/issues/20267). It's a feature request for showing profile pictures in search autocomplete suggestions.

{% github https://github.com/zulip/zulip/issues/20267 %}

## What the feature involves
I was overwhelmed with Zulip's gigantic codebase and technologies. Luckily, their documentation is really clear, concise, and helpful. Although setting up a local development environment for the project took more time than usual, the process was straightforward. I had a chance to learn a bit about Docker and [Vagrant](https://www.vagrantup.com/). Apart from that, I had an unexpected reunion with Git's pre-commit hooks, my old friend from OSD's lab.

The next part was a nightmare: tracing the relevant code in a  codebase developed by 700+ contributors with 45000+ commits. After doing some research and receiving support from Zulip's community server, I've had some ideas for the feature.

Based on an existing approach to a relatively similar feature, I need to customize the existing [typeahead.js](https://twitter.github.io/typeahead.js/)'s layout to include an avatar for any suggested person or organization. As the author of the issue suggested, I could reuse a [Handlebars](https://handlebarsjs.com/) partial for each suggestion.

## How I approach it
Firstly, I need a way to render a user's profile picture from their name. After some code tracing, I found [`render_person_or_user_group()`](https://github.com/zulip/zulip/blob/0a2649d9fe2b363c668b671c77fbab2fd0a554b3/static/js/typeahead_helper.js#L104), a typeahead's helper function that can help me with that task. It uses [this Handlebars partial](https://github.com/zulip/zulip/blob/main/static/templates/typeahead_list_item.hbs) to render a suggestion:

```hbs
{{#if is_emoji}}
    {{#if has_image}}
        <img class="emoji" src="{{ img_src }}" />
    {{else}}
        <span class='emoji emoji-{{ emoji_code }}'></span>
    {{/if}}
    &nbsp;&nbsp;
{{else}}
    {{#if is_person}}
        {{#if user_circle_class}}
        <span class="{{user_circle_class}} user_circle"></span>
        {{/if}}
        {{#if has_image}}
        <img class="typeahead-image" src="{{ img_src }}" />
        {{else}}
        <span class='typeahead-image fa fa-bullhorn no-presence-circle'></span>
        {{/if}}
    {{else}}
        {{#if is_user_group}}
        <i class="typeahead-image icon fa fa-group no-presence-circle" aria-hidden="true"></i>
        {{/if}}
    {{/if}}
{{/if}}
<strong>
    {{~ primary ~}}
</strong>
{{~#if has_secondary}}
&nbsp;&nbsp;
<small class="autocomplete_secondary">
    {{~ secondary ~}}
</small>
{{#if is_unsubscribed}}
&nbsp;
<span class="fa fa-exclamation-triangle unsubscribed_icon"
  title="{{t 'You are not currently subscribed to this stream.' }}"></span>
{{/if}}
{{~/if}}
```

Having said that, I still need more time to understand the behaviour of the function. It's likely that I have to write a similar one to exclude the irrelevant.

Secondly, I need to find a way to customize a suggestion's layout. After some research, I noticed [`highlighter()`](https://github.com/zulip/zulip/blob/0a2649d9fe2b363c668b671c77fbab2fd0a554b3/static/js/search.js#L95-L98) is responsible for it:

```js
highlighter(item) {
   const obj = search_map.get(item);
   return obj.description;
}
```

- `obj.description` is some bizarre raw HTML with a par of `<strong>` tags, enclosing each character of a name, and another one that follows it and encloses absolutely nothing. For instance, the HTML for "Sent by **Aayush Solanki**" looks like this:

```html
<a href="#">Sent by <strong>A</strong><strong></strong><strong>a</strong><strong></strong><strong>y</strong><strong></strong><strong>u</strong><strong></strong><strong>s</strong><strong></strong><strong>h</strong> <strong>S</strong><strong></strong><strong>o</strong><strong></strong><strong>l</strong><strong></strong><strong>a</strong><strong></strong><strong>n</strong><strong></strong><strong>k</strong><strong></strong><strong>i</strong></a>
```

Finally, I must come up with a way to connect the two functions seamlessly. This is the most complicated part.

## Conclusion
This seems like an impactful contribution to a large open source project. I'm still clueless about how to build upon my initial approach, but I'll try to keep you posted about my progress.

[^1]: There was another developer who had worked on the [issue](https://github.com/zulip/zulip/issues/20162) before me. He [abandoned the issue](https://github.com/zulip/zulip/issues/20162#issuecomment-976142115) due to his college work. However, he asked to work on it again a day after I [discussed my approaches](https://chat.zulip.org/#narrow/stream/6-frontend/topic/Add.20summary.20statistics.20to.20.2Fstats.20page) with the project maintainers.  Since he claimed to have some progress on it already, I decided to let him take over the issue. Do you think I've done the right thing in this situation? Let me know the comments.

---
Cover photo by <a href="https://unsplash.com/@kaleidico?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kaleidico</a> on <a href="https://unsplash.com/s/photos/development?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>