Style labels in search bar

Resources

FE @ClemMakesApps

• In the search bar for issues and merge requests and boards.
• Style labels.

• The x is in issue https://gitlab.com/gitlab-org/gitlab-ce/issues/30466, and out of scope here.

changed milestone to %Backlog

added ~874211 frontend ~897282 ~14281 to schedule labels

cc @jschatz1 @ClemMakesApps @cperessini

@jschatz1 : Can we make this 9.2

changed milestone to %9.2

added Deliverable label

removed ~897282 to schedule labels

@cperessini @tauriedavis : Please confirm the design. Thanks!

Should we fallback to gray in the event we are unable to load the label color?

That makes sense to me @ClemMakesApps - why would that happen?

In the event that the user pastes a search query that contains a label, we will have to ask the backend to determine what the label color is. There could be some lag between the time the label is pasted and the time we display the actual label color because of network speeds.

assigned to @ClemMakesApps

@ClemMakesApps I would just say to use the same color we have for other tokens. No need to have a specific default color just for labels, I think.

This situation would also be possible if a user enters a non-existent label, right? Or do we remove those?

@cperessini : Are you saying we just don't need this issue? The point of this issue is to color the labels in the search bar per the design in the description. Is that not a good design?

@victorwu no, we should color them! I'm saying that if a color cannot be found we can use the grey we already use as a fallback.

I don't know why but I thought it had been suggested we choose a new color as a fallback. Sorry for the confusion!

@cperessini : Oh I understand what you mean by "same color we have for other tokens". I.e. all tokens have the same default color right? And only in the special case of labels, we override that default if it's a valid label. Makes sense.

Although the scenarios in this issue is similar to https://gitlab.com/gitlab-org/gitlab-ce/issues/30468, the implementation for this should be much easier because all the labels are returned in one API request.

There are currently multiple scenarios for a label to be added to the search bar.

1. User types out the label
2. User clicks on the label that is displayed on the dropdown (same as if the user filters and clicks)
3. User pastes the label to the search bar

In our current implementation, when the user first invokes the label dropdown (after the user types label:), the label json data for the project is retrieved from the API and cached. Since the data is already cached, we can easily load the label color in the filtered search bar without needing an additional API request.

If the user goes through scenario 3 without invoking the label dropdown, I propose we perform an API request to retrieve all the label data so that we can load the label color in the filtered search. When the user first pastes the search query containing labels, the label visual token color will be the same as the other tokens. After the label data is retrieved from the API, the label color will be styled based on what was retrieved from the backend.

If the label is not found in the label list, the color will remain the same as the other tokens.

@filipa wdyt?

When I paste Label:~Frontend to the search bar, a request to labels is made. I don't think we have scenario 3.

Same scenario as mentioned in https://gitlab.com/gitlab-org/gitlab-ce/issues/30468#note_27698422

Multiple assignees (FE) review ended up taking a lot of my time this release month. I don't think I will be able to ship this Deliverable in time along with my others. Assigning to @jschatz1 as discussed in slack.

assigned to @jschatz1

assigned to @timzallmann

This is mine now!

assigned to @winh

@tauriedavis Just to be clear on that: Do we want the labels rectangular as in the description or pill-shaped as everywhere else?

(sorry, posted with wrong account earlier)

I believe rectangular to match the other tokens but @cperessini is the designer here so I'll let him decide.

@winh : Please go ahead with what's in the description unless @cperessini responds otherwise. Don't want to slow you down as the deadline for 9.2 is coming up. The designs in the description were created by the UX team (@cperessini I think?) . So I think they are fine.

mentioned in merge request !11047 (merged)

mentioned in issue #22680 (moved)

As @tauriedavis said, we should use a rectangular shape here to be consistent with the other tokens. Thanks all for checking and chiming in!

closed via merge request !11047 (merged)

mentioned in issue #33507 (moved)