stable

Clone or download

Read-only

Have a common writing zone + manage focus state

part of part of story #31151 Edit the description comment in text only The goal of this contribution is to have a common writing zone between the components. In the mockups, the writing zone has tabs above the textarea, showing [Write] and [Preview]. Since the implementation of markdown will be done in another phase of the epic, only the [Write] tab is shown atm. This writing zone, when it is "active" should have its textarea focused, the whole content should have its border in tlp-main-color, and the tab [Write] should be active. In the contrary, when it is not active, the borders should be in neutral color, the tab inactive, and the textarea not focused. As per the mockups, this writing zone is expected to have the same design and behavior in the three components: the new-comment for, the reply form and the description comment edition form. During the development, I realized that the fact NewCommentForm had no controller made the usage of the writing zone too messy, so I've decided to split the component in different files, like it's done in the other components. It allows us to have better unit tested parts, and a cleaner public api for the component. Regarding the post_submit_callback, I had to expose a method in the controller to trigger it manually, only for testing purpose. I know it doesn't feel quite right, but it was the easiest and cleanest solution to avoid breaking the tests in SideBySideCodeMirrorWidgetCreator. How to test: - In the vue and angular overview: -- Click [Edit] on the description comment ---> The writing zone is active ---> It is inactive when you click outside -- Click [Reply] on a comment ---> The writing zone is active ---> It is inactive when you click outside - In the vue overview only -- Scroll down to the "add comment component" --> It is inactive by default --> Clicking in the textarea or the [Write] tab make it active --> Clicking outside makes it inactive --> When you save a new comment, it is added to the timeline, the textarea is cleared and the writing zone is in inactive mode. - In the file-diff view -- Click to add a comment --> The writing zone is active and the textarea focused by default Change-Id: Iec2a6b1da354536b3b608960d3ae60d14536ac29

Modified Files

Name
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/comment/PullRequestCommentController.test.ts +11 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/comment/PullRequestCommentController.ts +15 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/comment/PullRequestCommentReplyFormTemplate.test.ts +50 −8 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/comment/PullRequestCommentReplyFormTemplate.ts +13 −31 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/comment/ReplyCommentFormPresenter.test.ts +14 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/comment/ReplyCommentFormPresenter.ts +21 −5 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/description-comment/PullRequestDescriptionCommentController.test.ts +21 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/description-comment/PullRequestDescriptionCommentController.ts +16 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/description-comment/PullRequestDescriptionCommentFormPresenter.test.ts +27 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/description-comment/PullRequestDescriptionCommentFormPresenter.ts +16 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/description-comment/PullRequestDescriptionCommentFormTemplate.test.ts +35 −12 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/description-comment/PullRequestDescriptionCommentFormTemplate.ts +27 −34 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/helpers/textarea-focus-helper.ts +15 −4 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentForm.test.ts +2 −160 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentForm.ts +14 −141 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentFormController.test.ts +192 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentFormController.ts +101 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentFormPresenter.test.ts +99 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentFormPresenter.ts +70 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentFormTemplate.test.ts +215 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/NewCommentFormTemplate.ts +110 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/src/new-comment-form/main.ts +9 −4 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/templates/WritingZoneTemplate.test.ts +133 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/src/templates/WritingZoneTemplate.ts +85 −0 Go to diff View file
A plugins/pullrequest/scripts/lib/pullrequest-comments/tests/stubs/ControlNewCommentFormStub.ts +34 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/tests/stubs/ControlPullRequestDescriptionCommentStub.ts +3 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/tests/stubs/FocusTextareaStub.ts +1 −0 Go to diff View file
R plugins/pullrequest/scripts/pullrequests-app/tests/stubs/SaveNewInlineCommentStub.ts Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/tests/stubs/PullRequestCommentControllerStub.ts +3 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/tests/stubs/ReplyCommentFormPresenterStub.ts +12 −0 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/tests/stubs/SaveNewCommentStub.ts +11 −1 Go to diff View file
M plugins/pullrequest/scripts/lib/pullrequest-comments/themes/includes/_comment.scss +7 −1 Go to diff View file
M plugins/pullrequest/scripts/pullrequest-overview/src/components/Threads/OverviewNewCommentForm.test.ts +1 −5 Go to diff View file
M plugins/pullrequest/scripts/pullrequest-overview/src/components/Threads/OverviewNewCommentForm.vue +16 −11 Go to diff View file
M plugins/pullrequest/scripts/pullrequests-app/src/app/file-diff/types.ts +2 −9 Go to diff View file
M plugins/pullrequest/scripts/pullrequests-app/src/app/file-diff/widgets/SideBySideCodeMirrorWidgetCreator.test.ts +2 −6 Go to diff View file
M plugins/pullrequest/scripts/pullrequests-app/src/app/file-diff/widgets/SideBySideCodeMirrorWidgetCreator.ts +28 −21 Go to diff View file
M plugins/pullrequest/scripts/pullrequests-app/tests/stubs/FileDiffWidgetStub.ts +10 −10 Go to diff View file
M plugins/pullrequest/scripts/pullrequests-app/tests/stubs/PullRequestCommentPresenterStub.ts +1 −1 Go to diff View file