Saved configuration for issue board

Resources

UX @cperessini | PM @victorwu | FE @psimyn | BE @oswaldo

Saved config for issue boards

• View and change board config only if you are in desktop mode.
• For mobile, feature is not available.

Group boards vs project boards

• This will be available for group issue boards, thus that would be EEP.
• This will be available for project issue boards, thus that would be EES.
• The higher priority is to have this functionality for group issue boards. If we can only do one, do group issue boards.

Design

Board switcher

• The Go to a board header should be removed
• The Edit board name row should be removed. The dropdown that opens when clicking it should be removed.
• The Edit board milestone row should be removed. The dropdown that opens when clicking it should be removed.

Editing a board milestone

• The previous UI for setting a board milestone from a dropdown should be removed
• The "locked" milestone token in the search bar should no longer be displayed

Editing a board's name

• The previous UI for changing a board's name from a dropdown should be removed

Editing a board

• This feature will only be available in desktop mode.
• If you have permissions to edit the board name, you can edit the board's scope.
• If you have permissions to edit the board, there is a button Edit board to the right of the search bar.
• If you do not have permissions to edit the board, the button reads View scope.
• These buttons do not show up if you are not in desktop mode.

Permissions	No permissions

Configuration modal

• When you click the Edit board button, a modal appears that lets you edit the board's name and scope.
• The title of the modal is Edit board.
• There are two sections in the modal: Board name and Board scope
• The name section only has a text box to edit the board's name.
• The scope section has some help text and selectors for each of the scoping options.
• The UI of the scope section is similar to the issuable sidebar.
• When you click an Edit button, the displayed value is replaced by a dropdown where you can select a new value.
• Unlike the behavior of the issuable sidebar, changes shouldn't be applied automatically. Instead, they should only take effect when clicking Save. This gives the user a chance to exit without saving.
• If possible, the order should be different from the issuable sidebar, so the options that are most relevant to scoping are at the top: Milestone, Labels, Assignee, Author, Weight
• The Save changes button should be disabled until the user makes a change. If they undo their changes manually, we don't have to disable the button.
• When you click View scope, the modal pops up. When you dismiss the modal, the temporary filter area does not change. Any filters applied do not change.
• When you click Edit board, the modal pops up. If you click cancel (maybe you made some changes, doesn't matter), the board config did not change. The modal is dismissed, and the temporary filter area does not change at all.
• When you click Edit board, the modal pops up. If you click Save changes (and even if you actually didn't make any changes), the board "refreshes" as it applies the new configuration. And the temporary filter area is reset and is now blank.

Empty state	Editing value	Values

Users without permissions

• If you don't have permissions, you can just view the board scope
• The title of the modal changes to Board scope
• The Board name section is not displayed, as it doesn't make sense to show a disabled text field
• The Edit buttons for each section are not displayed in the modal
• The footer with the Save and Cancel buttons is not displayed

Behavior

• For this iteration, you can only set one assignee for the board config. (This is because the assignee search for the board filter and issues list view search bar currently has some bugs. So we want to simplify for this first iteration.)
• If the saved configuration has a milestone, then the temporary filter area cannot filter by milestone.
• If the saved configuration has an author, then the temporary filter area cannot filter by author.
• If the saved configuration has an assignee, then the temporary filter area cannot filter by assignee.
• If the saved configuration has weight, then the temporary filter area cannot filter by weight.
• If the saved configuration has a label, then the temporary filter area can still have labels. You can even filter by the same label as a saved configuration label (as a simplifying assumption).

Milestones and labels

• If it is a project board, you can view/configure all project milestones and group milestones.
• If it is a project board, you can view/configure all project labels and group labels.
• If it is a group board, you can view/configure only group milestones.
• If it is a group board, you can view/configure only group labels.

Creating a board

• The current flow will no longer be used. The current board creation dropdown should be removed.
• When the user clicks the Create new board row in the board switcher, they are shown a similar modal to the one used for editing
• The title of the modal is Create new board
• The board name text box is automatically focused
• The Create board button is inactive at first. It becomes active once the user enters a name for the board
• The Create board modal has a collapsed state so as not to overwhelm the user with too many options at once
• When the user clicks the Expand button, the modal becomes taller and all the scope options are displayed. The Expand button turns into Collapse
• When you click Create new board, the modal pops up. The existing board in the background remains. So if you click cancel in the modal, you return to the existing board, and nothing changes. The temporary filter area does not change. If you click Create board to complete the form/modal, the new board appears and the temporary filter is now blank.
• If you hit Cancel when creating a board and open the modal again, all fields will be blank.

Create board	Name entered	Expanded

UI considerations

• The modal can be dismissed by clicking the x in the top right, or the Cancel button.
• The total width of the modal is 440px.
• The modal is centered vertically in the content area behind it (always below the top bar).
• Minimum margins: 16px to global top bar, 16px to the bottom of the window.
• The height of the modal should be calculated when opening so it can fit the necessary rows without whitespace.
• The content of the modal should be scrollable if there is not enough vertical space.

• When the height of the content changes while the modal is open, it can either resize dynamically or become scrollable. It's up to whatever @psimyn finds is a simpler implementation.

Other UI tweaks

• Remove the Go to a board header section in the dropdown. It's unnecessary. This has been mentioned in the Board switcher section of this proposal.
• Right now it's not clear that you can continue scrolling to see more boards in the switcher dropdown. If there's more boards beyond the displayed rows (see mockup), make the last board in the dropdown faded so that the user knows to scroll. This has been scheduled for %10.2 with #3181.
• The fade effect would be a good addition to the modal itself and the dropdowns you can open inside the modal.