Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Three-state labels #282

Merged
merged 10 commits into from
Mar 22, 2024
Merged

Three-state labels #282

merged 10 commits into from
Mar 22, 2024

Conversation

nknguyenhc
Copy link
Contributor

@nknguyenhc nknguyenhc commented Mar 4, 2024 •
edited
Loading

Summary:

Fixes part of #240.

Type of change:

  • ✨ New Feature/ Enhancement

Changes Made:

Made the filter labels a three-state button.

Each filter label has the following 3 possible states:

  • Default: no filter applied. This corresponds to no border.
  • Selected: filter in all issues/PRs with this label. This corresponds to green border.
  • Deselected: filter out all issues/PRs with this label. This corresponds to red border.

Additionally, each label has the following state rotation: default -> selected -> deselected.

The old checkbox for two-state is removed. Labels are manually added to the set of selected/deselected label names.

Finally, the set of deselected label names are used in the filter to apply them to the issues/PRs displayed.

There is one case that I need to highlight. That is, if an issue/PR has 2 labels, one is in selected state, and one is in deselected state. Currently, the filter with deselected state takes precedence, so an issue/PR with deselected labels will be filtered out, regardless of whether any other of its labels are being selected. Consider #251 with labels category.Feature and category.Enhancement, currently being assigned to me:

image

It is being filtered out.

Screenshots:

image

image

Proposed Commit Message:

Three-state labels

Previously, each label only has 2 states, either selected or
not selected. However, with such design,
the feature of hiding labels can be confused
with hiding issues/PRs with the label.

We implement the three-state label filters,
so that each label can also be used to hide
issues/PRs with the label.

Checklist:
  • I have tested my changes thoroughly.
  • I have created tests for any new code files created in this PR or provided a link to a issue/PR that addresses this.
  • I have added or modified code comments to improve code readability where necessary.
  • I have updated the project's documentation as necessary.

Arif-Khalid
Arif-Khalid reviewed Mar 5, 2024
View reviewed changes
Copy link
Contributor

@Arif-Khalid Arif-Khalid left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great working implementation of three-state labels! 👏
Just minor comments about code quality and a missed bug but overall a great job!

src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.ts Outdated Show resolved Hide resolved
src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.html Outdated
class="flexbox-container"
(click)="changeLabelState(label)"
[class.hidden]="filter(input.value, label.name)"
[style]="{ border: '2px solid ' + getBorderColor(label) }"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be better to use the full return of a function instead of appending to the '2px solid ' string?
An axample would be labelService.setLabelStyle which returns the full style object

Copy link
Contributor Author

@nknguyenhc nknguyenhc Mar 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe there is no difference in which one is a better code design, but I would prefer not putting style-related code into ts files. Also, I believe it is clearer to have a function that attaches each state of a label to a color.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see where you are coming from and I would do the same as you.
My concern is following the coding style already established in this project as shown from labelService.setLabelStyle.
We should wait for other's opinion @CATcher-org/active-devs.

src/app/shared/filter-bar/label-filter-bar/label-filter-bar.component.css Outdated Show resolved Hide resolved
@Arif-Khalid
Copy link
Contributor

As an add-on unrelated to the code but more so the design.
I feel that the harsh border colors clash with the design of watcher.
To me, a more fitting way of showing the states would be changing the background color of the entire label to a light red/pink for deselected and light green for selected.
image

Arif-Khalid
Arif-Khalid requested changes Mar 5, 2024
View reviewed changes
Copy link
Contributor

@Arif-Khalid Arif-Khalid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found a bug where removing all labels using the Remove All button gives the following error.
image
This is because in label-filter-bar.component.ts::removeAllSelection references matSelectionList which no longer exists.
The button functionality is therefore completely disabled.
Please refactor this function in accordance with the new implementation.

@damithc
Copy link
Contributor

damithc commented Mar 5, 2024

Other possibilities: using strike through, an icon/symbol
If using colors to convey information, need to consider color-blind people (i.e., use contrasting colors)

@nknguyenhc
Copy link
Contributor Author

With regards to the indication of label states, I have thought about the solution of making the background color. However, remember that Github labels can be of any color, so red tags and green tags might blend in with the background. I would still prefer sticking with the border color, but incorporate strike through for deselected state. Please see updated screenshot in the PR description.

With regards to the color, I have picked from Material Design color system.

The bug on Remove all button has also been fixed.

Arif-Khalid
Arif-Khalid previously approved these changes Mar 7, 2024
View reviewed changes
Copy link
Contributor

@Arif-Khalid Arif-Khalid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the changes made and everything is in working order. LGTM!

@nknguyenhc nknguyenhc requested a review from Arif-Khalid March 19, 2024 10:35
Arif-Khalid
Arif-Khalid previously approved these changes Mar 20, 2024
View reviewed changes
Copy link
Contributor

@Arif-Khalid Arif-Khalid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@nknguyenhc nknguyenhc requested a review from Arif-Khalid March 20, 2024 11:55
Arif-Khalid
Arif-Khalid approved these changes Mar 22, 2024
View reviewed changes
Copy link
Contributor

@Arif-Khalid Arif-Khalid left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@nknguyenhc nknguyenhc merged commit e3d4a34 into CATcher-org:main Mar 22, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Arif-Khalid Arif-Khalid Arif-Khalid approved these changes

@luminousleek luminousleek Awaiting requested review from luminousleek

@vigneshsankariyer1234567890 vigneshsankariyer1234567890 Awaiting requested review from vigneshsankariyer1234567890

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@nknguyenhc @Arif-Khalid @damithc