Add created date to the note info panel

[sandymcfadden]

Fix

The note info panel didn't display the created date for a note as mentioned in #2506 as well as in our feature request tracker.

This pull request adds the created date below the last modified date in the note info panel.

Test

1. Open a note
2. Click the info panel
3. See the created date at the top

Screenshot

Release

• Added created date to note info panel

[dmsnell]

Looks straightforward to me; nice quick fix.

Maybe double-check with @codebykat before merging so she has a chance to review.

[sandymcfadden]

Thanks @dmsnell! I just pushed another commit breaking out the note info items in the panel to their own component to reduce a bunch of repeated HTML.

[dmsnell]

The value of splitting out the note info items into new components and then wrapping a helper function is debatable. We might end up regretting having to jump around so much in order to understand what output is being rendered.

Personally I find it clearer the way it was, but if we do want to split it apart then I think it would be much less confusing if we did it inline inside of the render() function. This is largely because the new component isn't some kind of general-purpose component we can use in various places; it's a specific component that does almost nothing but carries with it very specific CSS.

The same goes for the time tag - I'd rather see the duplication in the code so I know what exactly it produces and how. Maybe that one is more generic than the note info item. How many places around the app do we create a timestamp with this specific format, with this specific HTML tag? If a number of places then I'd see that being a better candidate for extraction into a new component (though to be clear I think it's fine inline).

[dmsnell]

these props are already namespaces by means of being props for this component. you can see my other comment questioning the value of creating this component, but if we do then details and name would be sufficient unless you have a reason they need to be prefixed. it's awkward below when calling it since noteName and noteDetails don't stick out as being related to what it's used for.

[sandymcfadden]

Thanks so much @dmsnell. I wasn't sure when it would be best to split out. I saw multiple items that ll looked and worked almost the same and thought it may be easier to read to move them out and pass in props instead. I'll take a look again tomorrow and revert it back to how I had it at first.

Regarding the naming you mentioned above, I can't seem to duplicate it now, but I was getting an error somewhere when using just the name details so I changed it to noteDetails and it solved the issue. I'll keep this in mind for future.

[sandymcfadden]

About the time tag that was mentioned above. In a previous commit, I had added a helper function that would generate the time tag used here. This format is only used in a couple of places so I would say it is fine like @dmsnell said to leave the bit of code duplication. I'll leave things as-is for now.

[codebykat]

To sum up from our chat, I think for now we should leave the duplicate code, and merge this as it was, but with one small change: move the creation (edited: I was backwards) modification to the top to match the new designs. This component will need a full update for the new design that breaks note info and details into two separate components.

[codebykat]

This is looking and working great! There's one class missing that makes the note detail a lighter shade to match the others.

[codebykat]

Looks perfect! Let's

BTW, it's good to include screenshots for both light and dark mode, though hopefully with unifying the styles we'll have fewer bugs on just one or the other.

[pachlava]

[testing] verified on Win10 | desktop SN 2.6.0-beta1