Create a confirmation box for adding a new snippet

Author: jahn96

src/CodeSnippetWidget.tsx

@@ -38,7 +38,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { copyIcon, addIcon, closeIcon } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 import { Signal } from '@lumino/signaling';
-import { Widget, PanelLayout } from '@lumino/widgets';
+import { Widget } from '@lumino/widgets';
 
 import { IDragEvent } from '@lumino/dragdrop';
 import { MimeData } from '@lumino/coreutils';
@@ -268,7 +268,6 @@ export class CodeSnippetWidget extends ReactWidget {
  this.getCurrentWidget = getCurrentWidget;
  this.codeSnippetManager = new CodeSnippetService();
  this.renderCodeSnippetsSignal = new Signal<this, ICodeSnippet[]>(this);
- this.layout = new Private.SnippetPanelLayout();
  }
  // Request code snippets from server
  async fetchData(): Promise<ICodeSnippet[]> {
@@ -481,22 +480,6 @@ namespace Private {
  const data = mime.getData('text/plain');
  return data;
  }
- 
- /**
- * A custom panel layout for the notebook.
- */
- export class SnippetPanelLayout extends PanelLayout {
- /**
- * A message handler invoked on an `'update-request'` message.
- *
- * #### Notes
- * This is a reimplementation of the base class method,
- * and is a no-op.
- */
- protected onUpdateRequest(msg: Message): void {
- // This is a no-op.
- }
- }
 }
 
 /**

src/index.ts

@@ -1,6 +1,8 @@
 import '../style/index.css';
 
 import { codeSnippetIcon } from '@elyra/ui-components';
+import checkSVGstr from '../style/check.svg';
+// import { LabIcon } from '@jupyterlab/ui-components';
 
 import {
  JupyterFrontEnd,
@@ -13,11 +15,11 @@ import { ICommandPalette } from '@jupyterlab/apputils';
 
 import { CodeSnippetWidget } from './CodeSnippetWidget';
 
+import { showMessage } from './ConfirmMessage';
 
 import { RequestHandler } from '@elyra/application';
 // import { URLExt } from '@jupyterlab/coreutils';
 
-
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
 import { Dialog, showDialog} from '@jupyterlab/apputils';
 
@@ -58,11 +60,11 @@ export interface IFileContainer extends JSONObject {
  * Rename a file with a dialog. This is what actually displays everything. 
  * Result.value is the value retrieved from .getValue(). ---> .getValue() returns an array of inputs.
  */
-export function renameDialog(
+export async function renameDialog(
  url: string,
  inputCode: string
 ): Promise<Contents.IModel | null> {
- return showDialog({
+ return await showDialog({
  title: 'Save Code Snippet',
  body: new RenameHandler(),
  focusNodeSelector: 'input',
@@ -90,6 +92,14 @@ export function renameDialog(
  }),
  false
  );
+ showMessage({
+ body: /*"Saved as Snippet"*/new MessageHandler()
+ });
+ // showDialog({
+ // body: new ConfirmHandler(),
+ // buttons: []
+ // });
+ // new ConfirmHandler();
  }
  // if (!isValidFileName(result.value)) {
  // void showErrorMessage(
@@ -174,6 +184,11 @@ class RenameHandler extends Widget {
  }
 }
 
+class MessageHandler extends Widget {
+ constructor() {
+ super({ node: Private.createConfirmMessageNode() });
+ }
+}
 /**
  * A namespace for private data.
  */
@@ -211,6 +226,19 @@ namespace Private {
  body.appendChild(name3);
  return body;
  }
+
+ export function createConfirmMessageNode(): HTMLElement {
+ const body = document.createElement('div');
+ body.innerHTML = checkSVGstr;
+
+ const messageContainer = document.createElement('div');
+ messageContainer.className = 'jp-confirm-text';
+ const message = document.createElement('text');
+ message.textContent = 'Saved as Snippet!';
+ messageContainer.appendChild(message)
+ body.append(messageContainer);
+ return body;
+ }
 }
 
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -284,8 +312,8 @@ const code_snippet_extension: JupyterFrontEndPlugin<void> = {
  // }),
  // false
  // );
-
-  renameDialog(url,temp);
+ renameDialog(url,temp)
+ 
  console.log(`Highlight trial: ${temp}`);
  }});