Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Profile: Update UX for creating and editing notes #2437

merged 28 commits into from Mar 29, 2019


Copy link

@kevinrobinson kevinrobinson commented Mar 26, 2019

Who is this PR for?


What problem does this PR fix?

This makes a set of changes related to writing notes. It's aimed at moving towards specific improvements related to autosaving, getting more information about permissions. And also aimed at unifying the UX and code for creating, editing and viewing.

What does this PR do?

For creating a note:

  • update the frame to use <FeedCardFrame /> as part of migrating the create/edit UX together
  • removing attachment URLs as a separate UI component (for pasting inline instead)
  • feedback on saving or error

Updating a note:

  • Fix a UI jump from a bug where while the update patch was in flight, the "take notes" dialog would show
  • Save changes to the server, debounced by 500ms, instead of on blur.
  • Update number of revisions (not super meaningful, especially not with autosave) to the date of the last revision.
  • feedback on saving or error

Technical bits:

  • The state for requests is reworked in PageContainer, properly tracking edits to each note, and simplifying some of the state change code. Ccallbacks related to transition notes (eg, saveTransitionNote) are removed as well.
  • EditableTextComponent and the Sanitize code are removed, which used contentEditable and then some manual HTML sanitizing. This is just a plain <textarea /> now and all user input is escaped through React.
  • Swaps in ResizingTextArea for editing.

Next pieces, not in this PR:

  • Update the edit UX to use <FeedCardFrame />
  • Update the create and edit UX to use badges and click interactions like in mockups
  • Save draft notes to the server, prompt about them on the home page
  • Migration on the server for links, UI updates to show them

Screenshot (if adding a client-side feature)

There are many other cases, tested in NoteCard.test.js and visualized in NoteCard.story.js.

Create, links removed

Screen Shot 2019-03-26 at 12 23 05 PM

Edit, revisions

Screen Shot 2019-03-26 at 4 15 31 PM


Which features or pages does this PR touch?

  • Profile
  • My notes

Does this PR use tests to help verify we can deploy these changes quickly and confidently?

  • Included specs for changes
@kevinrobinson kevinrobinson changed the title Remove use of nowMoment prop in TakeNotes Profile: Update UX for creating and editing notes Mar 26, 2019
Copy link
Contributor Author

@kevinrobinson kevinrobinson commented Mar 29, 2019


@kevinrobinson kevinrobinson merged commit 589cb6b into master Mar 29, 2019
1 check passed
@kevinrobinson kevinrobinson deleted the refactor/take-notes-moment branch Mar 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant