Add issues to boards list
What does this MR do?
Removes the backlog list from issue boards & instead places this list into a modal window. From here the user can add multiple issues at a time into a list of their choosing.
Few things to note:
- The add issues button is disabled if no lists exist in the board
- De-selecting issues on the selected tab keeps them there until the tab changes
- Removing issues from the board is done by button in sidebar (visible by clicking issue card)
Screenshots (if relevant)
What are the relevant issue numbers?
Closes #26205 (closed)
Merge request reports
Activity
added 2 commits
Thanks @iamphill ! I'll definitely fire up this branch when I'm back at my computer next week. @cperessini please go ahead and give any feedback you can.
added 1 commit
- 7da4e8b1 - Used issue bulk update instead of different endpoint
assigned to @dbalexandre
added 7 commits
- 9f99bf0f - Remove backlog lists from boards
- 409a7349 - Remove backlog lists from board services
- 45f5cab3 - Fix spec for Projects::Boards::ListsController
- a03a64f5 - Update the API endpoint to get the lists of a project board
- 0df2f3ac - Remove backlog lists from factories
- d6d2de4e - Fix feature spec to create new issue on issue boards
- ff751784 - Fix feature spec for issue sidebar on issue boards
Toggle commit listadded 1 commit
- 4ac14236 - Boards spec update to take into account removed backlog
added 1 commit
- 6f873c2e - Fixed masonry re-triggering when it didnt need to
@iamphill Just checked out the branch and it's working and looking awesome!!
I've written down some notes, but since you're still working on it I thought I would hold off on posting them as things may change
@cperessini Could you send the notes anyway? Just so i'm aware from your side what is left
-
@iamphill here are the notes. Sorry I created some confusion, I should have updated the issue body with the final designs. Also, sorry about the huge list
-
Before entering the modal, the
Add issuesandAdd listbuttons should be inverted -
The shadow on the modal is a little dark (
0.5instead of0.3opacity) and it cuts off a few pixels before the actual modal ends -
There's a small gap between the
All issuesandSelected issuestabs -
The
Select allbutton remains in focus state after you release your click -
Turning the
Select allbutton toUnselect allis a nice touch but I don't know if it could be confusing. @awhildy what do you think? -
The shadow on the cards looks a little dark over the white background. Changing the opacity to
0.4would look nicer, but I don't want to introduce complexity to the code just because, so it's fine to keep the normal style from the board. -
The checkmark for each card is a little big. I used
9pxfont size for the icon and17pxdiameter for the circle. The background color is$blue-lightand the border color is$border-blue-light -
The spacing between cards should be
5pxin vertical, and10pxbetween columns -
The
Add 0 issuesbuttons is not a big deal, but it'd be better if the0wasn't there -
The dropdown for selecting a list should open up instead of down so you can see the full list.
-
The
to listlabel looks like it's a little further away from the dropdown than the button -
The color for the selected option in the dropdown is on the right, but it should be on the left
-
The empty state graphic in the
Selected issuestab seems to be aligned a little lower than the vertical center. -
Maybe we shouldn't remove issues from the
Selected issuestab as soon as you click on them. You may click on them by accident, and now you have to go back to the other tab and find it again. Even worse, you might have not realized which issue it was that you clicked
-
@cperessini thats perfect thank you! Some I was already aware of, but thanks
Point 9. Add issues for when none are selected. Add X issues when there are some selected, is that right?
Point 14. what do you suggest? A confirm popup box?
-
Point 9. Yes, exactly
Point 14. No popup, just leave the issue where it is, but update the count on the badge and the button
If you switch tabs and come back to
Selected issues, it will have disappeared
@cperessini might be adding a little bit of complexity to the code, but i'll see what I can do
-
@iamphill Aw, I thought it would be simpler
@cperessini pushed a changed to keep them on the selected tab until the tab is changed
added 1 commit
- b5ad538e - Reuse endpoint to list issues for a list instead of create a new one
@felipe_artur Could you review the backend stuff for me, please? Thanks :)
assigned to @iamphill
-
I add issues to the board. I refresh the board. The issues are not on the board. (No label was actually persisted to the issues.)
-
When there is no list on the board. I can still click add issues, but cannot complete the modal submit. How can we improve that experience? Maybe don't even show the add issues button if there are no lists on the board?
-
@dbalexandre Looks good!!! Just left a small comment.
-
@victorwu Good catch on 2). I think it's probably better to show both buttons and disable the
Add issuesone. We can show a tooltipPlease add a list to your board firston hover/click/tap. added 1 commit
- 01f0d57f - Fixed issue with issue not persisting in list
added 1 commit
- 2e673f94 - Remove unnecessary include from RemoveBacklogListsFromBoards migration
@felipe_artur Thank you
added 1 commit
- 3a758fb3 - Disabled add issues button if no lists exist
@dbalexandre had to make a little change to return the issue
idas well as theiid. This is needed for thebulk_updatemethod to work.added 1 commit
- 93c414bd - Add optional id property to the issue schema
@dbalexandre had to make a little change to return the issue id as well as the iid. This is needed for the bulk_update method to work.
@iamphill I pushed one commit fixing the specs related to the boards' controllers, otherwise, they will fail.
added 439 commits
-
93c414bd...d6450bb2 - 402 commits from branch
master - e37ad076 - Add issues to boards list
- 746f568d - Styling fix for list
- dd8e26e9 - Added masonry layout
- 652095c0 - Selected issues show with checkmark
- 4e00b133 - Fixes layout issue on selected tab
- 5bd6fefe - Mobile sizes
- cbfaf8e3 - Added selectable list before adding issues
- eb9cb833 - Changed where data gets loaded
- 5a3b97f4 - Search bar now returns data
- 16866bac - Created a modal store
- 643b1974 - Started tests
- 015193ca - Cleaned up some code
- 80cb9cf1 - Added empty state
- daf05fd6 - Reloads issues when re-opening modal
- 04f6c0b9 - Added more tests
- 5d817dfc - Used issue bulk update instead of different endpoint
- d652956e - Remove backlog lists from boards
- 7d793b2f - Remove backlog lists from board services
- 40935276 - Fix spec for Projects::Boards::ListsController
- 1edf36b9 - Update the API endpoint to get the lists of a project board
- 0463a6a1 - Remove backlog lists from factories
- 46b6978b - Fix feature spec to create new issue on issue boards
- b0f410fe - Fix feature spec for issue sidebar on issue boards
- c7464166 - Boards spec update to take into account removed backlog
- ae4aa57d - Fixed masonry re-triggering when it didnt need to
- a170ff8f - Infinite scrolling
- 607e765b - Fixed some failing lint tests
- 93e09c02 - Some styling updates
- ed1caa25 - Lists dropdown drops up
- 92366d2d - Removed backlog frontend code
- f1f36163 - Reuse endpoint to list issues for a list instead of create a new one
- c8a77231 - Fixed up JS tests
- 0b65716e - Fixed issue with issue not persisting in list
- 0dcd6ade - Remove unnecessary include from RemoveBacklogListsFromBoards migration
- 5368803a - Disabled add issues button if no lists exist
- cbb8059b - Fixed issue link href
- e4111ecb - Add optional id property to the issue schema
Toggle commit list-
93c414bd...d6450bb2 - 402 commits from branch
added 64 commits
-
90b74f35...fef6f52b - 26 commits from branch
master - b1a3e9bd - Add issues to boards list
- 043d8dff - Styling fix for list
- 7e43cca1 - Added masonry layout
- 987537ec - Selected issues show with checkmark
- 8c0ec5da - Fixes layout issue on selected tab
- fd7cd3ae - Mobile sizes
- 06e9a446 - Added selectable list before adding issues
- f70a517d - Changed where data gets loaded
- e2efe81e - Search bar now returns data
- e225094c - Created a modal store
- f85bbd92 - Started tests
- d171ab7b - Cleaned up some code
- 708a02ed - Added empty state
- a6ba669d - Reloads issues when re-opening modal
- e9f7478d - Added more tests
- b890b7bb - Used issue bulk update instead of different endpoint
- 4c72601f - Remove backlog lists from boards
- 1e9a1c3a - Remove backlog lists from board services
- f29c4ee3 - Fix spec for Projects::Boards::ListsController
- 50ad2b41 - Update the API endpoint to get the lists of a project board
- aece36f0 - Remove backlog lists from factories
- ca4dc0b3 - Fix feature spec to create new issue on issue boards
- bb5853e7 - Fix feature spec for issue sidebar on issue boards
- d8acb3f8 - Boards spec update to take into account removed backlog
- 6689df81 - Fixed masonry re-triggering when it didnt need to
- bcd841b6 - Infinite scrolling
- e105c264 - Fixed some failing lint tests
- 02d12fda - Some styling updates
- c6012e7d - Lists dropdown drops up
- f5a945bb - Removed backlog frontend code
- 6f4f3ad0 - Reuse endpoint to list issues for a list instead of create a new one
- 1227f177 - Fixed up JS tests
- 66b52308 - Fixed issue with issue not persisting in list
- c44d5381 - Remove unnecessary include from RemoveBacklogListsFromBoards migration
- 23cfb408 - Disabled add issues button if no lists exist
- 2cfee8c9 - Fixed issue link href
- 40d8d956 - Add optional id property to the issue schema
- 75e1d469 - Added remove button
Toggle commit list-
90b74f35...fef6f52b - 26 commits from branch
added 1 commit
- ba5ebad3 - Fixed bug where 2 un-selected issues would stay on selected tab
added 1 commit
- 1912c69f - Fixed bug with empty state showing after search
Hey @fatihacet could you review the frontend please? Sorry the amount of changes
assigned to @fatihacet
Thanks @iamphill + @cperessini . Here are a few bugs / edge cases I found so far:
-
Add issue to board. Move it around to different columns. Click
Remove from board. The issue is closed (and sent to theDonecolumn). This is incorrect. The issue should remain open. And all the current board labels associated with the issue should be removed so that the issue no longer is on the board. -
Open the add issues modal. Add some issues. Open the add issues modal again. The all issues count is not the updated one. It should be updated. (It is updated after a page refresh.) Consequently, if there are no more issues to add, the empty state is not there currently.
-
When there are no more issues to add, and when there are no issues in the project at all. These two situations share the same empty state. That's okay. We should just have a more generic empty state message that captures that. @cperessini: Could you work with @pedroms to find that messaging? I think @pedroms updated the empty state for issues list earlier and had the latest messaging. And could you check that it makes sense? We want to convey that there are no more open issues to add to the board. I think we have an empty state message for that already.
-
For the empty state, let's use
New issueas the button text instead ofCreate issue. @awhildy is that what you want? -
Right now we have
Un-select all. I think it should be at leastUnselect all. Or should it beDeselect all? @awhildy thoughts?
-
assigned to @iamphill
added 1 commit
- ab9c80f6 - Removes labels instead of closing issue when clicking remove button
added 1 commit
- fda7ea43 - Props use objects with required & type values
Thanks all!
@victorwu: It should be
New issue, andDeselect all. Thanks!added 1 commit
- 349314bf - Removed Masonry, instead uses groups of data
Thanks @iamphill for fixing those bugs I found above. Tested them again and they look good!
assigned to @fatihacet
@cperessini @victorwu here are the issues empty state updates: https://gitlab.com/gitlab-org/gitlab-ce/issues/25043 and https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8202
@iamphill when I add a new issue to I see some issues in DevTools. See the gif below.
@fatihacet ah nice spot! Will fix that now
added 1 commit
- 61d2f225 - Fixed remove btn error after creating new issue in list
added 326 commits
-
61d2f225...52ea5051 - 275 commits from branch
master - a132b7d8 - Add issues to boards list
- 94c07c21 - Styling fix for list
- 1fae4d81 - Added masonry layout
- 48b3623f - Selected issues show with checkmark
- 7d0feab3 - Fixes layout issue on selected tab
- e786ba98 - Mobile sizes
- 97fbb3d1 - Added selectable list before adding issues
- 38d84c13 - Changed where data gets loaded
- acd86c12 - Search bar now returns data
- 240d8c8d - Created a modal store
- 6adb6cae - Started tests
- d9894a2f - Cleaned up some code
- ff98a743 - Added empty state
- 76264cc0 - Reloads issues when re-opening modal
- 54461ce2 - Added more tests
- 3aabf0c6 - Used issue bulk update instead of different endpoint
- 682d213f - Remove backlog lists from boards
- 860fafee - Remove backlog lists from board services
- 79a132a3 - Fix spec for Projects::Boards::ListsController
- 158173a1 - Update the API endpoint to get the lists of a project board
- a3edd5f1 - Remove backlog lists from factories
- 8a2ecebe - Fix feature spec to create new issue on issue boards
- f99a1edf - Fix feature spec for issue sidebar on issue boards
- c4fc17f2 - Boards spec update to take into account removed backlog
- ac7949db - Fixed masonry re-triggering when it didnt need to
- 0904e9b1 - Infinite scrolling
- 8b977b29 - Fixed some failing lint tests
- a9432410 - Some styling updates
- 26d61113 - Lists dropdown drops up
- 7f58fc0e - Removed backlog frontend code
- 274987d5 - Reuse endpoint to list issues for a list instead of create a new one
- 8323bc49 - Fixed up JS tests
- c368b28c - Fixed issue with issue not persisting in list
- b1291872 - Remove unnecessary include from RemoveBacklogListsFromBoards migration
- 6c828906 - Disabled add issues button if no lists exist
- e140675e - Fixed issue link href
- ffeb3200 - Add optional id property to the issue schema
- 954deefa - Added remove button
- d5c9d7e7 - Fixed DB schema
- 1b01386a - Fixed bug where 2 un-selected issues would stay on selected tab
- 39fbd189 - Fixed bug with empty state showing after search
- 1b840452 - Added webkit CSS properties
- a51aa6ab - Fixed issue card spec
- 32a97ef1 - Fixed JS lint errors
- 103c78f1 - Removes labels instead of closing issue when clicking remove button
- 00b835ba - Props use objects with required & type values
- cf5396d4 - Fixed up specs
- b4113dba - Uses mixins for repeated functions
- 4428bb27 - Removed Masonry, instead uses groups of data
- e85cd9ee - Removed duplicated test
- 8c5e50e1 - Fixed remove btn error after creating new issue in list
Toggle commit list-
61d2f225...52ea5051 - 275 commits from branch
@iamphill I tested this deeply and everything works great. Very solid job here. Congrats
I just cancelled previous build because this MR was 250+ commits behind of the master. Rebased and force pushed. I will take another quick look to the code and then I will probably enable auto merge.
Once again, great job @iamphill
enabled an automatic merge when the pipeline for 8c5e50e1 succeeds
@iamphill Last minute bug I found. When you delete a board, modal still shows that board in the List dropdown.
assigned to @iamphill
added 1 commit
- fee064be - Fixed modal lists dropdown not updating when list is deleted
@fatihacet Fixed with fee064be
assigned to @fatihacet
enabled an automatic merge when the pipeline for fee064be succeeds
@iamphill Thanks for the quick fix
enabled an automatic merge when the pipeline for aea7e700 succeeds
mentioned in commit 3213dfd7
