Issue inline editing

What does this MR do?

Moves the issue edit form for title & description inline. The other dropdown's (labels, milestones etc.) are already in the sidebar so they are not present in this inline form.

The user clicks the edit button in either desktop or mobile view & can then update the title, description, confidential status or move the issue to another project without having to navigate away from the page they are currently on.

If new data from the realtime endpoint is received after the title or description has been edited then a warning message is displaying asking the user to check the changes before saving. This warning box also contains a link to the issue that opens in a new window (follows the same behaviour as the current edit form).

Screenshots (if relevant)

What are the relevant issue numbers?

Closes #24873 (closed)

added 1 commit

• e2323f5d - Added eventHub events to change the showForm value

Compare with previous version

added 5 commits

• 9b2e1743 - Added inline issue edit form actions
• 1cb43394 - Shows delete button if permissions are correct
• da38cea2 - Stop the polling before changing the location
• 74cff4ff - Moved json parsing out of service
• 6598a88c - Merge branch 'issue-edit-inline-form-btns' into 'issue-edit-inline'

Compare with previous version

added 136 commits

• 6598a88c...e261b4b8 - 130 commits from branch master
• 5d19bda4 - Issue inline editing
• 66539563 - Added eventHub events to change the showForm value
• 86700b97 - Added inline issue edit form actions
• 3bd37bc4 - Shows delete button if permissions are correct
• 3d553954 - Stop the polling before changing the location
• 47881254 - Moved json parsing out of service

Compare with previous version

added 6 commits

• e61ce83b - Issue inline edit title field
• 45c274da - Fixed form not sending correct data
• 14387b49 - for open.form event
• 36df19e7 - Stop passing through the store object
• 64e159ad - Created form component instead of using :is incorrectly
• a0f7ee43 - Merge branch 'issue-edit-inline-title-field' into 'issue-edit-inline'

Compare with previous version

added 69 commits

• a0f7ee43...8b66e42b - 68 commits from branch master
• 5f2b142b - Merge branch 'master' into issue-edit-inline

Compare with previous version

added 9 commits

• b1affe07 - Issue inline edit title field
• b5b5b4af - Added description field to inline edit form
• 7791d498 - Added accessibility data to description field
• aa6d92ae - Added sr-only to label for description
• 96a46521 - Added markdown docs link
• 86ab9edb - Merge branch 'issue-edit-inline' into issue-edit-inline-description-field
• f53d703f - Fixed else-if in description
• 9b93a3f2 - Use the tooltip mixin
• 4fcff0bf - Merge branch 'issue-edit-inline-description-field' into 'issue-edit-inline'

Compare with previous version

added 2 commits

• e713c68a - Disable inline submit button when title is blank
• 4693aa9c - Merge branch 'issue-edit-inline-title-validation' into 'issue-edit-inline'

Compare with previous version

added 6 commits

• c4fea61f - Added inline confidential field
• 468afcaa - Merge branch 'issue-edit-inline' into issue-edit-inline-confidential
• 6dd2b4b9 - Added spec for window reload
• 2a934741 - Use dash instead of underscore
• 6963442d - Merge branch 'issue-edit-inline' into issue-edit-inline-confidential
• 81c69c28 - Merge branch 'issue-edit-inline-confidential' into 'issue-edit-inline'

Compare with previous version

marked the checklist item Fix issue when clicking edit before the request has finished as completed

marked the checklist item Fix issue when clicking edit before the request has finished as incomplete

marked the checklist item Validation on title so can't be submitted when empty as completed

added 2 commits

• cf0cc972 - Stops formState from updating if the form is already open
• 16288e78 - Merge branch 'issue-edit-inline-stop-edit-button-reseting-state' into 'issue-edit-inline'

Compare with previous version

added 3 commits

• 29278027 - Focus the description field in the inline form when mounted
• 9c9a24ce - Fixed typo
• f5675666 - Merge branch 'auto-focus-description-field' into 'issue-edit-inline'

Compare with previous version

marked the checklist item Fix issue when clicking edit before the request has finished as completed

marked the checklist item Fix issue when clicking edit before the request has finished as incomplete

marked the checklist item Stop edit button re-setting the formState when the form is already open as completed

changed the description

marked the checklist item Auto-focus description field as completed

added 5 commits

• f80d2ab3 - Added specs for description field
• 35b5ea0a - Merge branch 'issue-edit-inline' into issue-edit-inline-description-field-specs
• 6c34f5a2 - Added a test with markdown
• 203a94e3 - Merge branch 'issue-edit-inline' into issue-edit-inline-description-field-specs
• eee88bca - Merge branch 'issue-edit-inline-description-field-specs' into 'issue-edit-inline'

Compare with previous version

added 5 commits

• 907dd68e - Added move to project in issue inline edit form
• b8647134 - Merge branch 'issue-edit-inline' into issue-edit-inline-move-project
• c225007a - Added back a removed test
• 1c463586 - Removed un-used CSS
• 3c3b17a5 - Merge branch 'issue-edit-inline-move-project' into 'issue-edit-inline'

Compare with previous version

changed the description

marked the checklist item Fix issue when clicking edit before the request has finished as completed

added 6 commits

• 6a14a515 - Show warning if realtime data has changed since the form has opened
• 982ab870 - Added specs for testing when warning is visible
• 16243985 - Merge branch 'issue-edit-inline' into issue-edit-inline-locked-warning
• 59db8b2f - Removed role from link
• 95efe5b3 - Added test to check if warning is not visible
• 3f996024 - Merge branch 'issue-edit-inline-locked-warning' into 'issue-edit-inline'

Compare with previous version

changed the description

marked the checklist item Warning about changes to the data when new data is recieved as completed

added 11 commits

• efc9408f - Added description template selector
• 0820aab4 - Merge branch 'issue-edit-inline' into issue-edit-inline-description-template
• 47e875ea - Added spec for rendering the selector
• f1b0b4a4 - Merge branch 'issue-edit-inline' into issue-edit-inline-description-template
• 3301ca10 - Fixed up the template dropdown to correctly work
• 4f0849f2 - Merge branch 'issue-edit-inline' into issue-edit-inline-description-template
• 7a21e26f - Merge branch 'issue-edit-inline' into issue-edit-inline-description-template
• 17617a32 - Moved value into computed property
• 745ec1ac - added label to button
• 21205d1e - Merge branch 'issue-edit-inline' into issue-edit-inline-description-template
• d853d821 - Merge branch 'issue-edit-inline-description-template' into 'issue-edit-inline'

Compare with previous version

added 2 commits

• d3198c60 - Get new data after inline edit save
• e78b8223 - Merge branch 'issue-edit-inline-getdata-after-update' into 'issue-edit-inline'

Compare with previous version

added 2 commits

• b2c27518 - Changed all data to come through the JSON script element
• a9470c45 - fixed karma failures

Compare with previous version

added 1 commit

• fd3750c6 - fixed bug with can? check when user is not logged in

Compare with previous version

added 536 commits

• fd3750c6...6ece9792 - 534 commits from branch master
• 2ef6172d - fixed spinach tests
• f452cb77 - Merge branch 'master' into issue-edit-inline

Compare with previous version

added 1 commit

• 625d3442 - renamed path to web_url in endpoint

Compare with previous version

added 1 commit

• 04178d72 - fixed move issue specs

Compare with previous version

@victorwu here is the issue inline edit merge request. Could you test it out & let me know of any issues you find? Thanks!

changed the description

added 1 commit

• e20654fc - fixed GFM references not working

Compare with previous version

@iamphill : Looks great! Could you please also add in the description templates! Sorry they are not in the original issue. But the design should look exactly like the existing design when you edit an issue. I'll ping @dimitrieh again.

added 1 commit

• 0defc4f7 - fixed issuable templates dropdown not showing

Compare with previous version

changed the description

Reviewed feature with @iamphill . Looks good.

added 4 commits

• 3ce6658d - Warn before moving issue in inline edit form
• 6becf288 - use formState to update loading of save button
• 10dccdc4 - Merge branch 'issue-edit-inline' into issue-edit-inline-project-move-warning
• 7f34b7cb - Merge branch 'issue-edit-inline-project-move-warning' into 'issue-edit-inline'

Compare with previous version

added 1 commit

• 5227ea5b - fixed up weird karma specs with tooltip

Compare with previous version

@filipa can you look at this please? This is the final big merge request

unmarked as a Work In Progress

assigned to @filipa

added 221 commits

• 5227ea5b...f47e86fe - 220 commits from branch master
• 3465e1e5 - Merge branch 'master' into issue-edit-inline

Compare with previous version

added 221 commits

• 5227ea5b...f47e86fe - 220 commits from branch master
• 3465e1e5 - Merge branch 'master' into issue-edit-inline

Compare with previous version

The EE compat job will probably fail so i'll create an EE merge request once we are all happy with it

@iamphill overall LGTM

I left some comments regarding updating the store state directly through the main component, should we have methods to keep consistency?

Going to test locally in the meanwhile :)

@smcgivern can you please take a look at the ruby changes? Thanks!

@iamphill Tested locally and found:

• if I use the shortcut e it sends me to the old edit view, is that correct?
• shortcut cmd+shift+p preview is empty

Love this feature

assigned to @iamphill

resolved all discussions

Nice find with them shortcuts!

e shortcut isn't correct - well it wasn't scoped in the issue. But its a super simple fix!

added 1 commit

• df7c9011 - fixed issuable shortcuts not working

Compare with previous version

@filipa addressed the comments & fixed the shortcuts bug

assigned to @smcgivern

added 1 commit

• 29fd1305 - enable meta+enter shortcut to quick submit

Compare with previous version

Just two comments on the Ruby!

assigned to @iamphill

resolved all discussions

assigned to @filipa

Code LGTM! Just need to test it again :)

@smcgivern are the Ruby changes good?

@filipa yep!

Thank you @iamphill

approved this merge request

@iamphill Can you please check the ee job failing? :)

merged

mentioned in commit 882a591d

mentioned in merge request !12106 (merged)

mentioned in issue #33598 (closed)

mentioned in issue #33798 (closed)

mentioned in issue #33735 (closed)