jupytercalpoly · kpinnipa · May 4, 2021 · May 4, 2021 · May 4, 2021
diff --git a/Design/add_custom_snippet.png b/Design/add_custom_snippet.png
diff --git a/Design/add_snippet.png b/Design/add_snippet.png
diff --git a/Design/codeSnippetEditor.png b/Design/codeSnippetEditor.png
diff --git a/Design/code_snippet_edit.png b/Design/code_snippet_edit.png
diff --git a/Design/code_snippet_filter_box.png b/Design/code_snippet_filter_box.png
diff --git a/Design/code_snippet_input_dialog.png b/Design/code_snippet_input_dialog.png
diff --git a/Design/code_snippet_menu.png b/Design/code_snippet_menu.png
diff --git a/Design/code_snippet_preview.png b/Design/code_snippet_preview.png
diff --git a/Design/create_from_scratch.png b/Design/create_from_scratch.png
diff --git a/Design/options.png b/Design/options.png
diff --git a/Design/right_click.png b/Design/right_click.png
diff --git a/Design/search_filter.png b/Design/search_filter.png
diff --git a/docs/contributor/codebase.rst b/docs/contributor/codebase.rst
@@ -7,7 +7,7 @@ Directories
 Code Snippets: ``snippets/``
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-This comprises the predefined code snippets for the extension. Refer to
+This comprises the sample code snippets for the extension. Refer to
 `Code Snippet Metadata`_ to learn more about the content of each code
 snippet.
 
@@ -16,11 +16,11 @@ Binder setup: ``binder/``
 This contains an environment specification for ``repo2docker`` which
 allows the repository to be tested on `mybinder.org`_. This
 specification is developer focused. For a more user-focused binder see
-the `JupyterLab demo`_
+the `JupyterLab demo`_.
 
-Test: ``test/``
-^^^^^^^^^^^^^^^
-This contains test scripts that test our codebase using jest.
+Test: ``test/`` ``cypress/``
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+``test/`` contains unit test scripts using jest. And, ``cypress/`` contains integration test scripts using Cypress.
 
 Design: ``design/``
 ^^^^^^^^^^^^^^^^^^^
@@ -41,30 +41,25 @@ Description of each file in ``src/``
 
 - CodeSnippetContentsService.ts: this contains a wrapper class that
  uses the functions defined in @jupyterlab/contentsSerivce.
-- CodeSnippetDisplay.tsx: this contains a React component that renders
+- CodeSnippetDisplay.tsx: this contains a major React component that defines key code snippets UI and renders
  code snippets.
 - CodeSnippetEditor.tsx : this contains a React component that creates
  an editor for each code snippet.
 - CodeSnippetEditorTags.tsx: this contains a React component that
  renders code snippet tags in code snippet editor.
-- CodeSnippetForm.tsx: this contains a Lumino widget that creates a
- input form to create a new code snippet as a modal window.
-- CodeSnippetInputDialog.ts: this contains a Lumino widget that defines
+- CodeSnippetFilterTools.tsx: this contains a react component that renders a
+ search bar and filter box.
+- CodeSnippetInputDialog.ts: this contains a class that defines
  the content of the custom code snippet form.
 - CodeSnippetLanguages.ts: this contains a list of supported languages
  and their corresponding icons.
-- CodeSnippetWidget.tsx: this contains a Lumino react widget that acts
- as a container of code snippets.
-- CodeSnippetWidgetModel.ts: this contains a code snippet model that
- keeps track of a list of code snippets being used in the extension.
-- ConfirmMessage.ts: this contains a luminio widget that creates
- confirmation dialog as a modal window after snippet creation.
-- FilterTools.tsx: this contains a react component that renders a
- search bar and filter box.
 - CodeSnippetMenu.ts: this contains a lumino widget that creates dropdown
  dialog when three dots icon is clicked.
-- PreviewSnippet.ts: this contains a lumino widget used to create
- preview minimap.
+- CodeSnippetMessage.ts: this contains a class that creates a message as a modal window after creating, copying, or downloading snippet.
+- CodeSnippetPreview.ts: this contains a lumino widget that creates a preview minimap.
+- CodeSnippetService.ts: this contains a wrapper class that handles the backend storage of the code snippets in JupyterLab Settings API.
+- CodeSnippetUtilities.ts: this contains a few utility functions that are used across the codebase.
+- CodeSnippetWidget.tsx: this contains a Lumino react widget that acts as a container of code snippets.
 - index.ts: this contains the activation of our extension.
 
 .. _Code Snippet Metadata: https://jupyterlab-code-snippets-documentation.readthedocs.io/en/latest/contributor/snippet_metadata.html

diff --git a/docs/getting_started/changelog.rst b/docs/getting_started/changelog.rst
@@ -9,6 +9,9 @@ v2.1.0
 * Improved search : can search for code, language, and name in search bar.
 * Expanded tags : now can filter by language tag and by snippet tag.
 * Added ability to download snippets to local directory.
+* Made right click to open the code snippet contextMenu possible anywhere on code snippet in addition to the three dots.
+* Made possible to create or move a snippet while snippets are filtered.
+* Set the language of a new snippet as the kernel language by default.
 * Improved snippet creation process by making description optional and allowing uppercase and spaces in snippet names.
 * Made minor UI and bug fixes.
 

diff --git a/docs/user/features.rst b/docs/user/features.rst
@@ -4,33 +4,38 @@ Features
 Creation of a New Snippet
 -------------------------
 
-- Right click and save highlighted lines of code
+.. image:: ../../Design/right_click.png
+.. image:: ../../Design/code_snippet_input_dialog.png
+
+- Right click (or use keyboard shortcut (cmd-shift-A or ctrl-shift-A)) and save highlighted lines of code
 - Drag cell into panel to save
 - Select cell(s) and right click to save content as snippet
 - Select cell(s) and use keyboard shortcut (cmd-shift-A or ctrl-shift-A) to save content as snippet
-.. image:: ../../Design/add_snippet.png
 
+.. image:: ../../Design/create_from_scratch.png
 - Plus button to create a new snippet from scratch
-.. image:: ../../Design/add_custom_snippet.png
 
 Use of Code Snippets
 --------------------
-.. image:: ../../Design/options.png
-- Copy, Insert, Delete snippet
+
+.. image:: ../../Design/code_snippet_menu.png
+- Copy, Insert, Edit, Download, Delete snippet
 - Drag snippet into any JupyterLab workspace
 
 Search of Code Snippets
 -----------------------
 
-.. image:: ../../Design/search_filter.png
+.. image:: ../../Design/code_snippet_filter_box.png
 - Scrollable/resizable snippet explorer panel displaying snippets
 - Move snippet within snippet explorer
 - Search bar for snippets
 - Filter tags for snippets
+
+.. image:: ../../Design/code_snippet_preview.png
 - Snippet preview (on the side)
 
 Edit of Existing Code Snippets
 ------------------------------
 
-.. image:: ../../Design/codeSnippetEditor.png
+.. image:: ../../Design/code_snippet_edit.png
 - Code Snippet Editor
diff --git a/docs/user/ux.rst b/docs/user/ux.rst
@@ -19,17 +19,22 @@ Find snippet
 
 Edit snippet
 ^^^^^^^^^^^^
-* Click 3 dots and select "Edit snippet" in dropdown.
+* Click 3 dots (or right click) and select "Edit snippet" in dropdown.
 
 Use snippet
 ^^^^^^^^^^^
 * Drag and drop snippet using 6 dot drag icon (visible on hover) to notebook.
 
  * Will put snippet code into a cell upon insertion.
 
-* Click 3 dots and select "Insert snippet" to insert snippet where cursor was on notebook.
-* Click 3 dots and select "Copy to clipboard" to copy snippet and paste it wherever desired.
+* Click 3 dots (or right click) and select "Insert snippet" to insert snippet where cursor was on notebook.
+* Click 3 dots (or right click) and select "Copy to clipboard" to copy snippet and paste it wherever desired.
+
+Download snippet
+^^^^^^^^^^^^^^^^
+* Click 3 dots (or right click) and select "Download snippet" and input the relative path to download. If the path is not given, it downloads it to the current directory.
+* Easy way to share snippets with others.
 
 Delete snippet
 ^^^^^^^^^^^^^^
-* Click 3 dots and select "Delete snippet" and confirm delete in dialog.
+* Click 3 dots (or right click) and select "Delete snippet" and confirm delete in dialog.