Implement custom tags and tag manager

shinglyu commented 9 years ago

+1, very helpful

shinglyu commented 9 years ago

I would like to help with this. Is this a time-critical feature you want to implement in a short time? If not, can I take some time to get my self familiar with this? Thanks.

kyoshino commented 9 years ago

Please feel free to take this or any issues :+1: I think now you can assign yourself.

shinglyu commented 9 years ago

I would like to try implementing this without drag and drop (was scared by the drag and drop API in my previous project :p ), and add the drag and drop later.

My idea is to hack the star button, we create a folder button next to the star button, and when a user clicks the folder button, she will be prompted to choose a folder name (or create a new folder). She can then remove the bug from the folder by clicking the folder button again.

Does that make sense?

shinglyu commented 9 years ago

Also, I was trying to understand the MVC architecture. Please correct me if I am wrong: From what I understand, when a user clicks the star, the view code calls the controller.bugs.toggle_star, the controller then call the model to save it. Finally, the controller emits a Bug:StarToggled event. When the view received the event, it updates the DOM to reflect the change. Is that right?

kyoshino commented 9 years ago

Sorry I'm late here!

The drag & drop functionality (#19) can be implemented later, of course.
This issue initially proposed folders but now I think the implementation could be tags (or labels) as I proposed in #29 so each bug can have multiple tags rather than belonging to one single folder.
The UI @shinglyu mentioned sounds good! Font Awesome has the tags icon.
I have quickly written the database design proposal in the wiki. Instead of adding an annotation to each bug like the current star implementation, we could have the new subscriptions database to manage stars, tags and saved searches (#15) in the same way. Any comments on this?
I'm working on bugs model refactoring (#243) so the MVC architecture would be better. It is still fluid but as you see, basically views and controllers interact via events using this.on and this.trigger method. I'll write a document about it.

shinglyu commented 9 years ago

tags are bood because it gives us more flexibility. Sometimes I found people abusing the tag and make it hard to search, like in MozTrap. If that really happens, we can still limit the tags to a 1-to-1 relationship, so it works like a folder
The DB proposal looks good. Should I wait for this to land before I start this one?
(More on subscriptions) We often use the "whiteboard" and "QA whiteborad" to save special tags for our dashboards. You may consider that instead of the saved searches DB.
Thanks for the documentation in advance!

shinglyu commented 9 years ago

I created a tag icon next to the star icon, and can capture its mousedown event now. I am wondering how we should propmt the user to select a tag? I am thinking about Modal, but I wonder if there is any existing component I can reuse?

kyoshino commented 9 years ago

There is the Dialog widget in FlareTail.js so you can use it as new this.widget.Dialog(...) in a view, but a tag selector might be a bit complicated, maybe a ListBox and Button?

shinglyu commented 9 years ago

Cool, let me try

kyoshino commented 9 years ago

I have finished the refactoring (#243) so you can start this right away!

I'm still wondering if the DB design is right. We should probably not store bug IDs in subscriptions; annotations on bugs like the current star might be better...

'_starred_comments': [7509603, ...], // I forgot why I was using Array instead of Set
'_tags': new Set(['compatibility', 'love this', 'awesome']), // Set is more convenient than Array

We don't have to think about abusing anyway because the tags here are personal annotations, while comment tags (#137) are public and shared with others.

shinglyu commented 9 years ago

Is there somewhere else I can save the tags? Because when I want to show all tag folders in the sidebar or show a list of all existing tags, I need to scan all the bugs and create a set of tags on-the-fly.

shinglyu commented 9 years ago

Ah my bad, it's in the database design proposal. Perhaps we can still save tags in a bug, but at the same time keep a list of tag names in the subscription DB, so we can have tags that has no bugs in it.

shinglyu commented 9 years ago

Why do we add the first comment to _starred_comments here? https://github.com/bzdeck/bzdeck/blob/master/webroot/static/scripts/models/bug.js#L203

kyoshino commented 9 years ago

Perhaps we can still save tags in a bug, but at the same time keep a list of tag names in the subscription DB, so we can have tags that has no bugs in it.

Yes, I'm thinking of that. Updated wiki. models/subscriptions.js has a function to get a list of starred bugs, so we can add a similar logic here to get a list of bugs with a specific tags, like this:

new Map([for (bug of bugs.values()) if (bug._tags.has(tag_name)) [bug.id, bug]]);

Why do we add the first comment to _starred_comments here? https://github.com/bzdeck/bzdeck/blob/master/webroot/static/scripts/models/bug.js#L203

This is something I have emulated Gmail's threads. A starred bug means a bug which has one or more starred comments. The first comment is the reporter's initial comment, so it makes sense. But as you see, it adds some UI/UX complexity... I may remove the feature and just annotate each bug with _starred: true/false.

kyoshino commented 9 years ago

Updated the star system in #272.

shinglyu commented 9 years ago

I'm still playing around with the code, if you need to finish this quickly, please feel free to take it back anytime.

kyoshino commented 9 years ago

In no rush. Take your time :smiley_cat:

shinglyu commented 9 years ago

In views/sidebar.js, I hacked this line:

this.$$folders = new this.widget.ListBox(document.querySelector('#sidebar-folder-list'), folders);

I add a get_tags() function in the subscriptions model, and append the tags I found to the config.folders array (using the folder local variable).

But clearly there is a timing problem. I get the following error:

too much recursion home-page.js:67:6
too much recursion toolbar.js:124:8

The additional delay before folder rendering causes this to happen. If I use the JS debugger to pause for a second, the folders (include tags) are correctly shown.

Is there any way I can stop break the timing problem?

shinglyu commented 9 years ago

OK, this is what I got so far: https://github.com/bzdeck/bzdeck/compare/master...shinglyu:tags

It feels really hacky. The problem I got is that I don't know how to dynamically update the sidebar folder list. The flow would be like 1) Load default folder in config 2) call models.subscriptions.get_tags(), then update the folder list when the promise resoves 3) listen on the tag added event and update the folder list.

I haven't finish the tag selection dialog either.

kyoshino commented 9 years ago

Hmm, FlareTail.widget.ListBox doesn't have any method to add a member so far. Looks like I'm doing such a thing manually on the ThreadView. I could definitely improve the widget like XUL listbox... I'll work on it tomorrow.

kyoshino commented 9 years ago

Refactoring in progress: https://github.com/bzdeck/flaretail.js/compare/27-refactor-widgets

kyoshino commented 9 years ago

As per a recent thread on the dev-platform list, Bugzilla already has its own personal bug tagging feature which is disabled by default. We could ask the Bugzilla team to implement new API methods to create/add/remove a tag, and list the existing tags, rather than implementing BzDeck's own tagging system. Bugs tagged by the user are already searchable like this:

BzDeck.controllers.global.request('bug', new URLSearchParams('tag=firefox-relnotes'), { auth: true })

bzdeck / bzdeck

Implement custom tags and tag manager #18