Add the Settings Editor to the landing page (#6316)

* Add the Settings Editor to the landing page

* Fix tab panel tabs

* Do not include JSON editor for now

* Hide Settings Editor command from the menu

* Update yarn.lock

* Fix integrity

* Fix yarn.lock and resolutions

* Update yarn.lock

* Allow adding and closing the settings editor

* Do not include JSON editor for now

* Update snapshots

* More snapshot updates

* More snapshot update

* Fix resolutions

app/index.js

@@ -148,6 +148,7 @@ async function main() {
     require('@jupyterlab/theme-light-extension'),
     require('@jupyterlab/theme-dark-extension'),
     require('@jupyterlab/translation-extension'),
+    require('@jupyterlab/ui-components-extension'),
     // Add the "Hub Control Panel" menu option when running in JupyterHub
     require('@jupyterlab/collaboration-extension'),
     require('@jupyterlab/hub-extension')
@@ -170,7 +171,11 @@ async function main() {
           ].includes(id)
         ),
         require('@jupyter-notebook/tree-extension'),
-        require('@jupyterlab/running-extension')
+        require('@jupyterlab/running-extension'),
+        require('@jupyterlab/settingeditor-extension').default.filter(
+          ({ id }) =>
+            ['@jupyterlab/settingeditor-extension:form-ui'].includes(id)
+        )
       ]);
       break;
     }

app/package.json

@@ -74,6 +74,8 @@
     "@jupyterlab/rendermime-interfaces": "~3.8.0-alpha.17",
     "@jupyterlab/running-extension": "~4.0.0-alpha.17",
     "@jupyterlab/services": "~7.0.0-alpha.17",
+    "@jupyterlab/settingeditor": "~4.0.0-alpha.17",
+    "@jupyterlab/settingeditor-extension": "~4.0.0-alpha.17",
     "@jupyterlab/settingregistry": "~4.0.0-alpha.17",
     "@jupyterlab/shortcuts-extension": "~4.0.0-alpha.17",
     "@jupyterlab/statedb": "~4.0.0-alpha.17",
@@ -148,6 +150,8 @@
     "@jupyterlab/pdf-extension": "^4.0.0-alpha.17",
     "@jupyterlab/rendermime-extension": "^4.0.0-alpha.17",
     "@jupyterlab/running-extension": "^4.0.0-alpha.17",
+    "@jupyterlab/settingeditor": "^4.0.0-alpha.17",
+    "@jupyterlab/settingeditor-extension": "^4.0.0-alpha.17",
     "@jupyterlab/shortcuts-extension": "^4.0.0-alpha.17",
     "@jupyterlab/terminal-extension": "^4.0.0-alpha.17",
     "@jupyterlab/theme-dark-extension": "^4.0.0-alpha.17",
@@ -209,6 +213,7 @@
       "@jupyterlab/pdf-extension",
       "@jupyterlab/rendermime-extension",
       "@jupyterlab/running-extension",
+      "@jupyterlab/settingeditor-extension",
       "@jupyterlab/shortcuts-extension",
       "@jupyterlab/terminal-extension",
       "@jupyterlab/theme-dark-extension",
@@ -245,6 +250,7 @@
       "@jupyterlab/rendermime",
       "@jupyterlab/rendermime-interfaces",
       "@jupyterlab/services",
+      "@jupyterlab/settingeditor",
       "@jupyterlab/settingregistry",
       "@jupyterlab/statedb",
       "@jupyterlab/statusbar",

packages/tree-extension/package.json

@@ -48,6 +48,7 @@
     "@jupyterlab/filebrowser": "^4.0.0-alpha.17",
     "@jupyterlab/mainmenu": "^4.0.0-alpha.17",
     "@jupyterlab/services": "^7.0.0-alpha.17",
+    "@jupyterlab/settingeditor": "^4.0.0-alpha.17",
     "@jupyterlab/settingregistry": "^4.0.0-alpha.17",
     "@jupyterlab/statedb": "^4.0.0-alpha.17",
     "@jupyterlab/translation": "^4.0.0-alpha.17",

packages/tree-extension/src/index.ts

@@ -22,6 +22,8 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
 import { IRunningSessionManagers, RunningSessions } from '@jupyterlab/running';
 
+import { ISettingEditorTracker } from '@jupyterlab/settingeditor';
+
 import { ITranslator } from '@jupyterlab/translation';
 
 import {
@@ -135,7 +137,7 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
     ISettingRegistry,
     IToolbarWidgetRegistry
   ],
-  optional: [IRunningSessionManagers],
+  optional: [IRunningSessionManagers, ISettingEditorTracker],
   autoStart: true,
   provides: INotebookTree,
   activate: (
@@ -144,7 +146,8 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
     translator: ITranslator,
     settingRegistry: ISettingRegistry,
     toolbarRegistry: IToolbarWidgetRegistry,
-    manager: IRunningSessionManagers | null
+    manager: IRunningSessionManagers | null,
+    settingEditorTracker: ISettingEditorTracker | null
   ): INotebookTree => {
     const nbTreeWidget = new NotebookTreeWidget();
 
@@ -206,6 +209,14 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
 
     app.shell.add(nbTreeWidget, 'main', { rank: 100 });
 
+    if (settingEditorTracker) {
+      settingEditorTracker.widgetAdded.connect((_, editor) => {
+        nbTreeWidget.addWidget(editor);
+        nbTreeWidget.tabBar.addTab(editor.title);
+        nbTreeWidget.currentWidget = editor;
+      });
+    }
+
     return nbTreeWidget;
   }
 };

packages/tree/style/base.css

@@ -20,7 +20,6 @@
 .jp-TreePanel .lm-TabBar-tab {
   color: var(--jp-ui-font-color0);
   font-size: var(--jp-ui-font-size1);
-  padding-top: 6px;
   height: 100%;
 }
 
@@ -45,3 +44,7 @@
 button[data-command='filebrowser:refresh'] .jp-ToolbarButtonComponent-label {
   display: none;
 }
+
+.jp-TreePanel .lm-TabBar-tabIcon svg {
+  vertical-align: sub;
+}