Refactor and rename code bases and make some stylistic changes

Author: jahn96

src/CodeSnippetDisplay.tsx

@@ -92,6 +92,7 @@ import {
   sasIcon,
 } from './CodeSnippetLanguages';
 import { ICodeSnippetEditorMetadata } from './CodeSnippetEditor';
+import { showMessage } from './CodeSnippetMessage';
 
 /**
  * The CSS class added to code snippet widget.
@@ -1289,10 +1290,8 @@ export class CodeSnippetDisplay extends React.Component<
         title: 'Insert, copy, edit, and delete',
         icon: moreOptionsIcon,
         onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>): void => {
-          console.log('three dots clicked');
           showMoreOptions({
             body: new OptionsHandler(this, codeSnippet),
-            // buttons: [],
           });
           this._setOptionsPosition(event);
         },
@@ -1316,7 +1315,6 @@ export class CodeSnippetDisplay extends React.Component<
           event.preventDefault();
           showMoreOptions({
             body: new OptionsHandler(this, codeSnippet),
-            // buttons: [],
           });
           this._setOptionsPosition(event);
         }}
@@ -1518,6 +1516,7 @@ export class CodeSnippetDisplay extends React.Component<
           format: 'text',
           content: JSON.stringify(codeSnippet),
         });
+        showMessage('download');
       }
     });
   }
@@ -1549,7 +1548,7 @@ export class CodeSnippetDisplay extends React.Component<
     copySnip.textContent = 'Copy snippet to clipboard';
     copySnip.onclick = (): void => {
       Clipboard.copyToSystem(codeSnippet.code.join('\n'));
-      alert('saved to clipboard');
+      showMessage('copy');
       this.removeOptionsNode();
     };
     const editSnip = document.createElement('div');

src/CodeSnippetEditor.tsx

@@ -32,7 +32,7 @@ import { CodeSnippetService } from './CodeSnippetService';
 import { CodeSnippetWidget } from './CodeSnippetWidget';
 import { SUPPORTED_LANGUAGES } from './CodeSnippetLanguages';
 import { CodeSnippetEditorTags } from './CodeSnippetEditorTags';
-import { showMessage } from './CodeSnippetConfirmMessage';
+import { showMessage } from './CodeSnippetMessage';
 import { validateInputs, saveOverWriteFile } from './CodeSnippetUtilities';
 
 /**
@@ -393,7 +393,7 @@ export class CodeSnippetEditor extends ReactWidget {
             return false;
           }
         });
-        showMessage();
+        showMessage('confirm');
       }
     }
     // modify existing snippet

src/CodeSnippetInputDialog.ts

@@ -9,7 +9,7 @@ import { Widget } from '@lumino/widgets';
 import { Message } from '@lumino/messaging';
 
 import { ICodeSnippet, CodeSnippetService } from './CodeSnippetService';
-import { showMessage } from './CodeSnippetConfirmMessage';
+import { showMessage } from './CodeSnippetMessage';
 
 import { CodeSnippetWidget } from './CodeSnippetWidget';
 import { SUPPORTED_LANGUAGES } from './CodeSnippetLanguages';
@@ -209,7 +209,7 @@ function createNewSnippet(
   });
 
   codeSnippetWidget.renderCodeSnippetsSignal.emit(codeSnippetManager.snippets);
-  showMessage();
+  showMessage('confirm');
 }
 
 /**

src/CodeSnippetMenu.ts

@@ -85,12 +85,6 @@ export class OptionsMessage<T> extends Widget {
    * not be called directly by user code.
    */
   handleEvent(event: Event): void {
-    // if (event.type == 'click') {
-    //   console.log('click');
-    // } else {
-    //   console.log('default');
-    //   console.log(event.type);
-    // }
     switch (event.type) {
       case 'click':
         this._evtClick(event as MouseEvent);

src/CodeSnippetConfirmMessage.ts src/CodeSnippetMessage.tssrc/CodeSnippetConfirmMessage.ts renamed to src/CodeSnippetMessage.ts

@@ -6,13 +6,11 @@ import { Dialog } from '@jupyterlab/apputils';
 
 import { Widget } from '@lumino/widgets';
 import { Message } from '@lumino/messaging';
-// import { PromiseDelegate } from '@lumino/coreutils';
-// import { ArrayExt } from '@lumino/algorithm';
 
 import checkSVGstr from '../style/icon/jupyter_checkmark.svg';
 
 /**
- * The class name for confirmation box
+ * The class name for message
  */
 // const CONFIRM_CLASS = 'jp-codeSnippet-confirm';
 const CONFIRM_CONTENT = 'jp-codeSnippet-Message-content';
@@ -26,26 +24,28 @@ const CODE_SNIPPET_CONFIRM_TEXT = 'jp-codeSnippet-confirm-text';
  *
  * @returns A promise that resolves with whether the dialog was accepted.
  */
-export function showMessage<T>(): Promise<Dialog.IResult<T>> {
-  const confirmMessage = new ConfirmMessage({
-    body: new MessageHandler(),
+export function showMessage<T>(type: string): Promise<Dialog.IResult<T>> {
+  const confirmMessage = new CodeSnippetMessage({
+    body: new MessageHandler(type),
     buttons: [],
   });
   return confirmMessage.launch();
 }
 
 /**
- * A widget used to show confirmation message.
+ * A widget used to show message.
  */
-export class ConfirmMessage<T> extends Dialog<any> {
+export class CodeSnippetMessage<T> extends Dialog<any> {
   constructor(options: Partial<Dialog.IOptions<T>> = {}) {
     super(options);
     this.children().next().addClass(CONFIRM_CONTENT);
   }
 
   protected onAfterAttach(msg: Message): void {
     const node = this.node;
+
     node.addEventListener('click', this, true);
+    document.addEventListener('keydown', this, false);
   }
 
   /**
@@ -54,12 +54,35 @@ export class ConfirmMessage<T> extends Dialog<any> {
   protected onAfterDetach(msg: Message): void {
     const node = this.node;
     node.removeEventListener('click', this, true);
+    document.removeEventListener('keydown', this, false);
+  }
+
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'keydown':
+        this._evtKeydown(event as KeyboardEvent);
+        break;
+      case 'click':
+        this._evtClick(event as MouseEvent);
+        break;
+    }
+  }
+
+  protected _evtKeydown(event: KeyboardEvent): void {
+    // Check for escape key
+    switch (event.key) {
+      case 'Escape':
+        event.stopPropagation();
+        event.preventDefault();
+        this.reject();
+        break;
+    }
   }
 }
 
 class MessageHandler extends Widget {
-  constructor() {
-    super({ node: Private.createConfirmMessageNode() });
+  constructor(type: string) {
+    super({ node: Private.createMessageNode(type) });
     this.addClass(CONFIRM_BODY);
   }
 }
@@ -69,14 +92,20 @@ class MessageHandler extends Widget {
  */
 namespace Private {
   // create a confirm message when new snippet is created successfully
-  export function createConfirmMessageNode(): HTMLElement {
+  export function createMessageNode(type: string): HTMLElement {
     const body = document.createElement('div');
     body.innerHTML = checkSVGstr;
 
     const messageContainer = document.createElement('div');
     messageContainer.className = CODE_SNIPPET_CONFIRM_TEXT;
     const message = document.createElement('text');
-    message.textContent = 'Saved as Snippet!';
+    if (type === 'confirm') {
+      message.textContent = 'Saved as Snippet!';
+    } else if (type === 'copy') {
+      message.textContent = 'Saved to Clipboard!';
+    } else if (type === 'download') {
+      message.textContent = 'Downloaded the Snippet!';
+    }
     messageContainer.appendChild(message);
     body.append(messageContainer);
     return body;

src/PreviewSnippet.ts src/CodeSnippetPreview.tssrc/PreviewSnippet.ts renamed to src/CodeSnippetPreview.ts

@@ -248,7 +248,7 @@ export namespace Preview {
    * The preview widget tracker.
    */
   export const tracker = new WidgetTracker<Preview<any>>({
-    namespace: '@jupyterlab/code_snippet:ConfirmWidget',
+    namespace: '@jupyterlab/code_snippet:preview',
   });
 }