Add New Pipeline to File Menu > New

- added pipeline icon to file browser - added new pipeline to File Menu > New - fixed some style issues Fixes elyra-ai#88
harshad16 · Oct 7, 2019 · b84c8e7 · b84c8e7
1 parent 1b37b85
commit b84c8e7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/packages/pipeline-editor/src/index.tsx b/packages/pipeline-editor/src/index.tsx
@@ -20,6 +20,7 @@ import {URLExt} from '@jupyterlab/coreutils';
 import {DocumentRegistry, ABCWidgetFactory, DocumentWidget} from '@jupyterlab/docregistry';
 import {IFileBrowserFactory} from '@jupyterlab/filebrowser';
 import {ILauncher} from '@jupyterlab/launcher';
+import {IMainMenu} from '@jupyterlab/mainmenu';
 import {ServerConnection} from '@jupyterlab/services';
 
 import {toArray} from '@phosphor/algorithm';
@@ -38,7 +39,7 @@ import * as ReactDOM from 'react-dom';
 
 import { IntlProvider } from "react-intl";
 
-const PIPELINE_ICON_CLASS = 'ewai-PipelineIcon';
+const PIPELINE_ICON_CLASS = 'jp-MaterialIcon ewai-PipelineIcon';
 const PIPELINE_CLASS = 'ewai-PipelineEditor';
 const PIPELINE_FACTORY = 'pipelineEditorFactory';
 const PIPELINE = 'pipeline';
@@ -448,13 +449,15 @@ class PipelineEditorFactory extends ABCWidgetFactory<DocumentWidget> {
 const extension: JupyterFrontEndPlugin<void> = {
   id: PIPELINE,
   autoStart: true,
-  requires: [ICommandPalette, ILauncher, IFileBrowserFactory, ILayoutRestorer],
-
-  activate: (app: JupyterFrontEnd,
-             palette: ICommandPalette,
-             launcher: ILauncher,
-             browserFactory: IFileBrowserFactory,
-             restorer: ILayoutRestorer) => {
+  requires: [ICommandPalette, ILauncher, IFileBrowserFactory, ILayoutRestorer, IMainMenu],
+  activate: (
+    app: JupyterFrontEnd,
+    palette: ICommandPalette,
+    launcher: ILauncher,
+    browserFactory: IFileBrowserFactory,
+    restorer: ILayoutRestorer,
+    menu: IMainMenu
+  ) => {
     // Set up new widget Factory for .pipeline files
     const pipelineEditorFactory = new PipelineEditorFactory({
       name: PIPELINE_FACTORY,
@@ -465,7 +468,7 @@ const extension: JupyterFrontEndPlugin<void> = {
     });
 
     // Add the default behavior of opening the widget for .pipeline files
-    app.docRegistry.addFileType({ name: PIPELINE, extensions: ['.pipeline']});
+    app.docRegistry.addFileType({ name: PIPELINE, extensions: ['.pipeline'], iconClass: PIPELINE_ICON_CLASS});
     app.docRegistry.addWidgetFactory(pipelineEditorFactory);
 
     const tracker = new WidgetTracker<DocumentWidget>({
@@ -495,8 +498,8 @@ const extension: JupyterFrontEndPlugin<void> = {
     // Add an application command
     const openPipelineEditorCommand: string = commandIDs.openPipelineEditor;
     app.commands.addCommand(openPipelineEditorCommand, {
-      label: 'Pipeline Editor',
-      iconClass: PIPELINE_ICON_CLASS,
+      label: args => (args['isPalette'] ? 'New Pipeline Editor' : 'Pipeline Editor'),
+      iconClass:  args => (args['isPalette'] ? '' : PIPELINE_ICON_CLASS),
       execute: () => {
         // Creates blank file, then opens it in a new window
         app.commands.execute(commandIDs.newDocManager, {
@@ -513,14 +516,19 @@ const extension: JupyterFrontEndPlugin<void> = {
       }
     });
     // Add the command to the palette.
-    palette.addItem({command: openPipelineEditorCommand, category: 'Extensions'});
+    palette.addItem({command: openPipelineEditorCommand, args: { isPalette: true }, category: 'Extensions'});
     if (launcher) {
       launcher.add({
         command: openPipelineEditorCommand,
         category: 'Other',
         rank: 3
       });
     }
+    // Add new pipeline to the file menu
+    menu.fileMenu.newMenu.addGroup(
+      [{ command: openPipelineEditorCommand }],
+      30
+    );
   }
  };
  export default extension;
diff --git a/packages/pipeline-editor/style/index.css b/packages/pipeline-editor/style/index.css
@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/* Add CSS variables to :root */
+:root {
+  --ewai-icon-pipeline: url('./pipelineIcon.png');
+}
+
 .add .list-item {
 	background-image: url('./add-notebook-node.svg');
 	background-repeat: no-repeat;
@@ -50,10 +55,7 @@
 }
 
 .ewai-PipelineIcon {
-	background-image: url('./pipelineIcon.png');
-	background-repeat: no-repeat;
-    background-position: center;
-    background-size: 30%;
+    background-image: var(--ewai-icon-pipeline);
 }
 
 .ewai-PipelineEditor .properties-modal {