Updated Editing Flow and Manual Dates

[cpresler]

Description

Updating editing flow to have an editing/display state - this will help with accidental changes, and give us more options for incorporating editable options that differ from the display version down the road. I built the feature to manually edit the "created date" for change logs. This will be useful for libraries with existing logs looking to switch to FigLog without history loss.

Fixes #64 and #17

Type of Change

• New feature (non-breaking change which adds functionality)
  This feature should be tested to be sure that it is not a breaking change - it has the potential to be one, but I have intended to author it so that it is not one. It is a "breaking change" from a UX perspective in that it changes how the user edits change logs, but should not actually break existing widgets from a functionality/data standpoint.

How Has This Been Tested?

Manual testing via creating change logs and editing in different scenarios:
New Editing flow:

• Editing State
  • new editing state (right after edit is clicked) should always match current change log data and not reflect any previous changes that might have been canceled
  • clicking "cancel" should exit the "editing" state and revert any changes made to the previous change log values
  • clicking "save changes" should exit the editing state and add all updates to the change log
  • editing change description should function the same as prior to this feature (click on input and enter text)
  • "delete changelog" removed the log from the change log list
  • Type:
    • clicking type opens the type menu - only in editing
    • selecting a type in the menu adds that type to the "updates" data, closes the menu, and displays that type in the change log
  • Links:
    • add link functionality should function the same as prior to this feature
      • click on "add link" to show link form
      • link form validates link label and url prior adding the link
      • link form can be canceled
    • adding a link should add the link to be displayed in the link list while editing
    • deleting a link should remove the link from the link list while editing
    • if changes are canceled, link list should match the link list prior to editing
    • if changes are saved, link list should update with link changes (additions/deletions)
  • Date
    • required format: Month(1-2 digits)/Day(1-2 digits)/Year(4 digits)
    • date needs to be before/same as the current date
    • error: stores date input in date.tmp and applies red border to input and error message
    • valid date combines with the current time value to create a timestamp and are stored in "createdDate" in updates
  • Time
    • required format: Hours(1-2 digits):Minutes(1-2 digits):Seconds(1-2 digits) AM/PM
    • valid values: Hours > 0 & <= 12, Minutes > 0 & < 60, Seconds > 0 & < 60, AM/PM = "am" | "pm" case insensitive
    • error: stores time input in time.tmp and applies red border to input and error message
    • valid time combines with the current date value to create a timestamp and are stored in "createdDate" in updates
  • New change log:
    • new change log should be in the new "editing" state
    • saving changes on a new change log should not show it as "edited"
• Display State
  • options to edit (change log type, created date, change description, add links, deleting links, or deleting a change log) do not show
  • clicking "edit" on any change log should automatically cancel the editing state of any other change log (deleting the current changes)
  • type should only show if "show types" is enabled and there is a type applied to the change log
  • type should not be clickable, or show an pointer on hover
  • links do not show without delete option

[ryansrofe]

Great work on this new editing feature. Users are going to really appreciate this and it will expand who considers using this widget. I only found one bug and a handful of tweaks/suggestions.

The bug I'm seeing is kind of weird and I'm surprised we haven't come across it yet. When adding a Name or Description text, the incorrect text shows up in the opposite field. To replicate click into name add some text, click into description, then click back into name and the error should happen, seeing duplicate text until user clicks away. I was able to get it to error both ways actually. This looks to be an existing bug (happens in current production widget) and is not something introduced in this update, however, if we can resolve the issue, that would be super cool.

Consider adjusting the time format error message to show more closely how it should look for users vs the technical formatting, matching the date error text. Can we limit the letter characters that can be typed to "A, P, M" only? I wonder would this even benefit UX?

Additionally, we should define a standard format for all the error messages. We are using no quotes, quotes, and parens.
Consider disabling or error coloring the button when there is an error and the change can't be saved? I literally (even though there was an error message) was confused when I couldn't save when clicking the button. I think we discussed this possibly so if I'm contradicting my initial thinking, I'm sorry.

When users add a link value that is invalid, then selects that text and pastes a valid link on top. Figma will auto link the text. This is caught by the widget, however, I'm wondering if we can/should make it so this doesn't happen at all? Also it's interesting a user can paste a link and then clicking away clears the link formatting.

I've added a couple images of the bug.

[ryansrofe]

great work