Discussion field UI
This is the UI subtask of #809 (closed). It need not initially support threading, but may as well be built with that in mind, as it is a likely future requirement.
This ticket is to produce a UI and storybook story for a discussion field, which can be used as a component within a form configured using the form-builder. An example of another form component, giving some idea of how it interacts with Formik and graphql, is LinksInput
; you can find other components here and here.
While this component sits within a form and interacts with Formik, retrieving, adding and updating comments may be better dealt with via a separate mechanism, rather than via Formik's value
. SupplementaryFiles
is an example of a form-builder component that doesn't update formik at all. Nonetheless, this component will need to interact with formik at least to the extent of letting formik know when the field is touched and whether it contains text -- to allow the "required" validation option to work.
Graphql interface:
The data object received via graphql should have a structure something like:
type ThreadedDiscussion {
id: ID!
created: DateTime!
updated: DateTime
reviewId: ID!
threads: [Channel!]!
userCanAddComment: Boolean!
userCanEditOwnComment: Boolean!
userCanEditAnyComment: Boolean!
}
For now, there will always be exactly one thread.
The FormElement
object will be similar to what is used for other field types.
User interface:
Field title and description appear above and below the field as usual For the field itself, if there are no previous comments and userCanComment
, the field looks like a simple wax editor, and uses whatever placeholder is set in the FormElement
:
The comment is submitted when the user clicks the submit button for the entire form. (Note: Unsubmitted comments can be lost if the tab closes. If this is a problem we may need to consider an alternative to using Channel
s.)
When there are previously submitted comments, the most recent is always expanded by default, and all others collapsed by default. No dividing lines or other decorations are needed between comments. Collapsed comments should look like:
Expanded comments should look like:
If the comment's created and updated date-times differ, the comment should indicate it is edited:
Hovering over the comment date should open a tooltip with full created date-time, and if there was an update, full updated date-time as well. (Note: the Channel data model doesn't keep track of who edited a comment. This may be another reason to consider an alternative to Channels.)
If there are previous comments and userCanComment
, the wax editor is displayed below the previous comments, with the placeholder "Add a reply...".
If userCanEditOwnComment
, a small "Edit" button sits next to each previous comment by that user. If userCanEditAnyComment
, an "Edit" button sits next to all previous comments.
Hitting the edit button should open a modal editing window with the title "Edit comment by < user >, < date >" a simple wax editor, and Cancel and Submit buttons. Modal is preferred to inline as it is harder to scroll away and forget that you have an unfinished edit.