Create metadata editor

[marthacryan]

Opens a dialog that allows user to edit the name / description /
language / code of a code snippet.

Still need to implement/fix:

• deleting code snippets
• Known bug that when editing code in the text area of the dialog, the dialog submits when the return key is pressed (might try to add code mirror and see if that helps)

Fixes #556

Screenshots to come after implementing delete.

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

[kevin-bates]

Hi Martha - these changes look good to me so far. Would you mind tossing in a few screenshots of a code-snippet's lifecycle? I think that would be helpful to reviewers - especially those of us that have no idea what this typescript stuff is doing. 😄

[marthacryan]

Screenshots of the current state of the UI:

Dialog when "New snippet" button is pressed:

Dialog when delete button is pressed:

Still need to fix the bug for pressing "enter" and also want to talk about the UI a bit more.

[lresende]

Does this bring a new dialog for creating the code-snippet? How hard would it be to make the dialog to take control of the code-snippet panel and let the user create a new thing from there, this way he can easily navigate and copy+paste code from a notebook or python file?

[vabarbosa]

@marthacryan nice progress on this so far. i would tend to agree with @lresende that have the add/edit form in the sidebar would be more helpful than in a new dialog.

i understand the PR is a WIP (and you are probably aware of these) but wanted to mention a couple things i noticed at first pass-through:

1. the Add code snippet icon does not give any visual indicator that it is actionable when you hover over it. maybe the cursor can be changed and/or highlight it's background
2. when successfully deleting a code snippet i had to refresh to see it was removed from sidebar
3. the multiple + icons can be confusing. i associate the + with adding something which makes sense in the context of adding a new code snippet. however, it does not when you are inserting a code snippet into a notebook or file. since you are working in this area, i would vote you replace the insert icon with something more like the Paste or Import icons (from Carbon Design System):

[kevin-bates]

+1 to Luciano's idea, although I think we should still have a dialog option as well.

I guess I'd like a wider dialog. Perhaps a layout that resembles something akin to this...

Name:   ----------------------------------------      Language:  ------------------------- V 
Description (optional):
------------------------------------------------------------------------------------------
Code: 
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

I know that's poorly conveyed, but you get the idea:

• Name and Language can share a line,
• Language gets populated with a set of languages from existing kernelspecs (and code-snippets?),
• 'python' is marked as the default language, if it exists in kernelspecs or when there are zero languages in kernelspecs (rare). If there are kernelspecs languages and none are python, I suppose we just choose the first in the list?
• The code portion is visibly wider and taller giving the impression that it can be pasted into.

Should we let users bring their own language? Seems like we should. In that case, the language seems like it would need to be a combination edit/dropdown thing if that's possible.

[marthacryan]

@lresende @kevin-bates I could definitely make it available in the code snippets panel, although I think we'd need to choose between opening the dialog and making it available in the code snippets panel, right? We could talk about this at the scrum if you think we should have a conversation about it. We sort of discussed this in the issue #556.

[marthacryan]

@vabarbosa Thoughts on this one for inserting code?

[vabarbosa]

@vabarbosa Thoughts on this one for inserting code?

@marthacryan that one could also work

[marthacryan]

Still need to clean up code and fix merge conflicts. Screenshots to come after cleanup.

[marthacryan]

Here's what the most current UI looks like:
For editing snippets:

For adding snippets:

Changes should automatically update in the left side pane when the "Save Snippet" button is pressed.
I also added code mirror to the left side which fixes #409.
Close-up of the snippet preview in the left side panel (might need to change color of the trash icon):

On clicking the language dropdown:

If a language isn't present in the dropdown:

Reopens tabs on reloading the page (has a couple of issues with this: doesn't reopen unsaved code snippet editing tabs, also reverts the code snippet back to original fields even though the metadata has been updated)

[marthacryan]

I want to make the form less hard-coded to the fields of code snippets, not sure if that needs to be in this PR?

[marthacryan]

@lresende Just tried it out and it definitely would need some work:

[marthacryan]

This is what the editor looks like if you click "Save & Close" with an empty form:

Currently, if you fix one of the fields and press the "Save & Close" button, the warning will go away for that field.

[marthacryan]

Just pushed a change that makes the page legible in dark mode, but it still needs some work on the color of the dropdown / submit button (couldn't find a simple way of activating the dark mode of blueprint.js through CSS - apparently if you add the class bp3-dark it'd automatically set up the right css for dark mode, but I couldn't figure out how to do that without a bunch of extra code).

[ajbozarth]

@vabarbosa on @marthacryan comment above, did you learn how to make css conditional to the current theme in your pr? (Ie add/remove bp3-dark if the theme changes)

[vabarbosa]

@lresende @marthacryan @ajbozarth will take a look at dark mode this morning

[vabarbosa]

@vabarbosa on @marthacryan comment above, did you learn how to make css conditional to the current theme in your pr? (Ie add/remove bp3-dark if the theme changes)

the best way to do that would be to use JupyterLab's ThemeManager and listen to changes in theme and then programmatically add/remove the bp3-dark. i have added the code for that (55642a6).

[marthacryan]

@vabarbosa Thank you, it looks great! Just added a couple little changes as well (colors of icons / buttons added in this PR for the code snippets were a little off) and here's what it looks like in light / dark mode:


@lresende I think the PR is ready whenever you want to give it a last pass

[marthacryan]

After last commit, header of code snippets looks like this:

[ajbozarth]

The vertical spacing looks a bit off in those screenshots, perhaps it has to do with the

around the text "Code Snippet"

[ajbozarth]

or the icon's css may just need some tweaking to match the changes you made to the header in this pr

@vabarbosa insight?

[marthacryan]

Here's a side-by-side of this PR (top) vs the current master (bottom) for reference:

[vabarbosa]

or the icon's css may just need some tweaking to match the changes you made to the header in this pr

@vabarbosa insight?

this is how the icons currently line up:

[karlaspuldaro]

Tested the latest updates and it works great!
Very nice work :)