@jupyterlab/settingeditor 4.0.0-alpha.2 → 4.0.0-alpha.20

package/src/settingspanel.tsx

@@ -0,0 +1,218 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+import { ISettingRegistry, Settings } from '@jupyterlab/settingregistry';
+import { ITranslator } from '@jupyterlab/translation';
+import { IFormRendererRegistry } from '@jupyterlab/ui-components';
+import { ISignal } from '@lumino/signaling';
+import type { Field } from '@rjsf/utils';
+import React, { useEffect, useState } from 'react';
+import { PluginList } from './pluginlist';
+import { SettingsFormEditor } from './SettingsFormEditor';
+
+export interface ISettingsPanelProps {
+  /**
+   * List of Settings objects that provide schema and values
+   * of plugins.
+   */
+  settings: Settings[];
+
+  /**
+   * Form component registry that provides renderers
+   * for the form editor.
+   */
+  editorRegistry: IFormRendererRegistry;
+
+  /**
+   * Handler for when selection change is triggered by scrolling
+   * in the SettingsPanel.
+   */
+  onSelect: (id: string) => void;
+
+  /**
+   * Signal that fires when a selection is made in the plugin list.
+   */
+  handleSelectSignal: ISignal<PluginList, string>;
+
+  /**
+   * Translator object
+   */
+  translator: ITranslator;
+
+  /**
+   * Callback to update the plugin list to display plugins with
+   * invalid / unsaved settings in red.
+   */
+  hasError: (id: string, error: boolean) => void;
+
+  /**
+   * Sends the updated dirty state to the parent class.
+   */
+  updateDirtyState: (dirty: boolean) => void;
+
+  /**
+   * Signal that sends updated filter when search value changes.
+   */
+  updateFilterSignal: ISignal<
+    PluginList,
+    (plugin: ISettingRegistry.IPlugin) => string[] | null
+  >;
+
+  /**
+   * If the settings editor is created with an initial search query, an initial
+   * filter function is passed to the settings panel.
+   */
+  initialFilter: (item: ISettingRegistry.IPlugin) => string[] | null;
+}
+
+/**
+ * React component that displays a list of SettingsFormEditor
+ * components.
+ */
+export const SettingsPanel: React.FC<ISettingsPanelProps> = ({
+  settings,
+  editorRegistry,
+  onSelect,
+  handleSelectSignal,
+  hasError,
+  updateDirtyState,
+  updateFilterSignal,
+  translator,
+  initialFilter
+}: ISettingsPanelProps): JSX.Element => {
+  const [expandedPlugin, setExpandedPlugin] = useState<string | null>(null);
+  const [filterPlugin, setFilter] = useState<
+    (plugin: ISettingRegistry.IPlugin) => string[] | null
+  >(() => initialFilter);
+
+  // Refs used to keep track of "selected" plugin based on scroll location
+  const editorRefs: {
+    [pluginId: string]: React.RefObject<HTMLDivElement>;
+  } = {};
+  for (const setting of settings) {
+    editorRefs[setting.id] = React.useRef(null);
+  }
+  const wrapperRef: React.RefObject<HTMLDivElement> = React.useRef(null);
+  const editorDirtyStates: React.RefObject<{
+    [id: string]: boolean;
+  }> = React.useRef({});
+
+  useEffect(() => {
+    const onFilterUpdate = (
+      list: PluginList,
+      newFilter: (plugin: ISettingRegistry.IPlugin) => string[] | null
+    ) => {
+      setFilter(() => newFilter);
+      for (const pluginSettings of settings) {
+        const filtered = newFilter(pluginSettings.plugin);
+        if (filtered === null || filtered.length > 0) {
+          setExpandedPlugin(pluginSettings.id);
+          break;
+        }
+      }
+    };
+
+    // Set first visible plugin as expanded plugin on initial load.
+    for (const pluginSettings of settings) {
+      const filtered = filterPlugin(pluginSettings.plugin);
+      if (filtered === null || filtered.length > 0) {
+        setExpandedPlugin(pluginSettings.id);
+        break;
+      }
+    }
+
+    // When filter updates, only show plugins that match search.
+    updateFilterSignal.connect(onFilterUpdate);
+
+    const onSelectChange = (list: PluginList, pluginId: string) => {
+      setExpandedPlugin(expandedPlugin !== pluginId ? pluginId : null);
+      // Scroll to the plugin when a selection is made in the left panel.
+      editorRefs[pluginId]?.current?.scrollIntoView(true);
+    };
+    handleSelectSignal?.connect?.(onSelectChange);
+
+    return () => {
+      updateFilterSignal.disconnect(onFilterUpdate);
+      handleSelectSignal?.disconnect?.(onSelectChange);
+    };
+  }, []);
+
+  const updateDirtyStates = React.useCallback(
+    (id: string, dirty: boolean) => {
+      if (editorDirtyStates.current) {
+        editorDirtyStates.current[id] = dirty;
+        for (const editor in editorDirtyStates.current) {
+          if (editorDirtyStates.current[editor]) {
+            updateDirtyState(true);
+            return;
+          }
+        }
+      }
+      updateDirtyState(false);
+    },
+    [editorDirtyStates, updateDirtyState]
+  );
+
+  const renderers = React.useMemo(
+    () =>
+      Object.entries(editorRegistry.renderers).reduce<{
+        [plugin: string]: { [property: string]: Field };
+      }>((agg, [id, renderer]) => {
+        const splitPosition = id.lastIndexOf('.');
+        const pluginId = id.substring(0, splitPosition);
+        const propertyName = id.substring(splitPosition + 1);
+        if (!agg[pluginId]) {
+          agg[pluginId] = {};
+        }
+        if (!agg[pluginId][propertyName] && renderer.fieldRenderer) {
+          agg[pluginId][propertyName] = renderer.fieldRenderer;
+        }
+        return agg;
+      }, {}),
+    [editorRegistry]
+  );
+
+  return (
+    <div className="jp-SettingsPanel" ref={wrapperRef}>
+      {settings.map(pluginSettings => {
+        // Pass filtered results to SettingsFormEditor to only display filtered fields.
+        const filtered = filterPlugin(pluginSettings.plugin);
+        // If filtered results are an array, only show if the array is non-empty.
+        if (filtered !== null && filtered.length === 0) {
+          return undefined;
+        }
+        return (
+          <div
+            ref={editorRefs[pluginSettings.id]}
+            className="jp-SettingsForm"
+            key={`${pluginSettings.id}SettingsEditor`}
+          >
+            <SettingsFormEditor
+              isCollapsed={pluginSettings.id !== expandedPlugin}
+              onCollapseChange={(willCollapse: boolean) => {
+                if (!willCollapse) {
+                  setExpandedPlugin(pluginSettings.id);
+                } else if (pluginSettings.id === expandedPlugin) {
+                  setExpandedPlugin(null);
+                }
+              }}
+              filteredValues={filtered}
+              settings={pluginSettings}
+              renderers={renderers}
+              hasError={(error: boolean) => {
+                hasError(pluginSettings.id, error);
+              }}
+              updateDirtyState={(dirty: boolean) => {
+                updateDirtyStates(pluginSettings.id, dirty);
+              }}
+              onSelect={onSelect}
+              translator={translator}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/tokens.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IWidgetTracker, MainAreaWidget } from '@jupyterlab/apputils';
+import { Token } from '@lumino/coreutils';
+import { JsonSettingEditor as JSONSettingEditor } from './jsonsettingeditor';
+import { SettingsEditor } from './settingseditor';
+
+/**
+ * The setting editor tracker token.
+ */
+export const ISettingEditorTracker = new Token<ISettingEditorTracker>(
+  '@jupyterlab/settingeditor:ISettingEditorTracker'
+);
+
+/**
+ * The setting editor tracker token.
+ */
+export const IJSONSettingEditorTracker = new Token<IJSONSettingEditorTracker>(
+  '@jupyterlab/settingeditor:IJSONSettingEditorTracker'
+);
+
+/**
+ * A class that tracks the setting editor.
+ */
+export interface IJSONSettingEditorTracker
+  extends IWidgetTracker<MainAreaWidget<JSONSettingEditor>> {}
+
+/**
+ * A class that tracks the setting editor.
+ */
+export interface ISettingEditorTracker
+  extends IWidgetTracker<MainAreaWidget<SettingsEditor>> {}

package/style/base.css

@@ -10,20 +10,25 @@
   --jp-private-settingeditor-row-height: 16px;
   --jp-private-settingeditor-toolbar-height: 28px;
   --jp-private-settingeditor-type-width: 75px;
+  --jp-private-settingeditor-modifier-indent: 5px;
 }
 
-#setting-editor {
+.jp-SettingsPanel,
+#json-setting-editor {
   min-width: 360px;
   min-height: 240px;
   background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
   margin-top: -1px;
   outline: none;
+
   /* This is needed so that all font sizing of children done in ems is
    * relative to this base size */
   font-size: var(--jp-ui-font-size1);
 }
 
-#setting-editor > .lm-Widget {
+#setting-editor > .lm-Widget,
+#json-setting-editor > .lm-Widget {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -31,22 +36,23 @@
   right: 0;
 }
 
-#setting-editor .lm-SplitPanel-handle {
+#setting-editor .lm-SplitPanel-handle,
+#json-setting-editor .lm-SplitPanel-handle {
   background-color: var(--jp-border-color2);
 }
 
-#setting-editor .jp-SettingEditorInstructions {
+#json-setting-editor .jp-SettingEditorInstructions {
   text-align: center;
 }
 
-#setting-editor .jp-SettingEditorInstructions-icon {
+#json-setting-editor .jp-SettingEditorInstructions-icon {
   display: inline-block;
   height: 78px;
   margin: 2px 5px 2px 8px;
   width: 60px;
 }
 
-#setting-editor .jp-SettingEditorInstructions-title {
+#json-setting-editor .jp-SettingEditorInstructions-title {
   color: var(--jp-ui-font-color0);
   font-size: 32px;
   font-weight: 200;
@@ -54,88 +60,125 @@
   vertical-align: top;
 }
 
-#setting-editor .jp-SettingEditorInstructions-text {
+#json-setting-editor .jp-SettingEditorInstructions-text {
   color: var(--jp-ui-font-color0);
   font-size: var(--jp-ui-font-size2);
 }
 
-#setting-editor .jp-PluginList {
+.jp-PluginList {
   min-width: 175px;
   max-width: 275px;
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-PluginList-wrapper {
+  overflow-y: auto;
+  height: 100%;
 }
 
-#setting-editor .jp-PluginList ul {
-  background-color: var(--jp-layout-color1);
+.jp-PluginList ul {
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow-y: auto;
-  position: absolute;
+  position: relative;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
-#setting-editor .jp-PluginList li {
-  display: flex;
-  flex-direction: row;
-  border: 1px solid transparent;
-  overflow: hidden;
-  padding: 4px 0 4px 4px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.jp-PluginList .jp-PluginList-header {
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  border-top: var(--jp-border-width) solid var(--jp-border-color2);
+  color: var(--jp-ui-font-color1);
 }
 
-#setting-editor .jp-PluginList li:hover {
-  background-color: var(--jp-layout-color2);
-  border: 1px solid var(--jp-border-color2);
+.jp-PluginList .jp-PluginList-noResults,
+.jp-PluginList .jp-PluginList-header {
+  flex: 0 0 auto;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: var(--jp-ui-font-size0);
+  padding: 8px 8px 8px 12px;
+  margin: 10px;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  border-top: var(--jp-border-width) solid var(--jp-border-color2);
+  color: var(--jp-ui-font-color1);
 }
 
-#setting-editor .jp-PluginList li.jp-mod-selected {
+.jp-PluginList .jp-SelectedIndicator {
+  width: 3px;
   background-color: var(--jp-brand-color1);
-  color: white;
-  border: 1px solid var(--jp-brand-color1);
+  height: var(--jp-cell-collapser-min-height);
+  visibility: hidden;
+}
+
+.jp-PluginList .jp-mod-selected .jp-SelectedIndicator {
+  visibility: inherit;
+}
+
+.jp-PluginList .jp-ErrorPlugin .jp-SelectedIndicator {
+  background-color: var(--jp-error-color0);
+}
+
+.jp-PluginList button.jp-mod-selected.jp-ErrorPlugin span {
+  color: var(--jp-error-color0);
+}
+
+.jp-PluginList button.jp-mod-selected span {
+  font-weight: var(--jp-content-heading-font-weight);
+  color: var(--jp-brand-color1);
 }
 
-#setting-editor
-  ul.jp-PluginList
-  li.jp-mod-selected
-  span.jp-PluginList-icon.jp-FileIcon {
+.jp-FormComponent li span {
+  overflow: hidden;
+}
+
+.jp-SettingEditor-header {
+  font-size: var(--jp-content-font-size4);
+  font-weight: var(--jp-content-heading-font-weight);
+  color: var(--jp-ui-font-color0);
+  padding: 20px 0 10px 20px;
+  border-bottom: 1px solid var(--jp-border-color2);
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background-color: var(--jp-layout-color0);
+}
+
+ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   background-image: var(--jp-icon-file-selected);
 }
 
-#setting-editor .jp-PluginList-icon {
-  display: inline-block;
+.jp-PluginList-icon {
+  display: flex;
   height: 20px;
   width: 20px;
   margin-right: 3px;
   position: relative;
 }
 
-#setting-editor .jp-SettingsRawEditor .jp-Toolbar {
+.jp-SettingsRawEditor .jp-Toolbar {
   color: var(--jp-ui-font-color0);
   font-size: var(--jp-ui-font-size1);
   height: var(--jp-private-settingeditor-toolbar-height);
   max-height: var(--jp-private-settingeditor-toolbar-height);
 }
 
-#setting-editor
-  .jp-SettingsRawEditor
-  .jp-Toolbar
-  .jp-ToolbarButtonComponent-label {
+.jp-SettingsRawEditor .jp-Toolbar .jp-ToolbarButtonComponent-label {
   display: none;
 }
 
-#setting-editor .jp-SettingsRawEditor .jp-Toolbar-item {
+.jp-SettingsRawEditor .jp-Toolbar-item {
   margin-top: 1px;
   align-items: center;
 }
 
 .jp-ToolbarButtonComponent-label
-  #setting-editor
   .jp-SettingsRawEditor.jp-mod-error
   .jp-Toolbar-item.jp-BugIcon::after {
   color: red;
@@ -148,96 +191,177 @@
   left: 6px;
 }
 
-#setting-editor .jp-SettingsRawEditor .jp-Inspector {
+.jp-SettingsRawEditor .jp-Inspector {
   border-top: 2px solid var(--jp-layout-color2);
   min-height: var(--jp-private-settingeditor-debug-height);
   max-height: var(--jp-private-settingeditor-debug-height);
 }
 
-#setting-editor
-  .jp-SettingsRawEditor
-  .jp-Inspector.jp-SettingsDebug
-  .jp-RenderedHTMLCommon {
+.jp-SettingsRawEditor .jp-Inspector.jp-SettingsDebug .jp-RenderedHTMLCommon {
   padding: 2px 5px 2px 0;
   width: 100%;
 }
 
-#setting-editor
-  .jp-SettingsRawEditor
-  .jp-Inspector.jp-SettingsDebug
-  .jp-RenderedHTMLCommon
-  p {
+.jp-SettingsRawEditor .jp-Inspector.jp-SettingsDebug .jp-RenderedHTMLCommon p {
   text-align: right;
 }
 
-#setting-editor .jp-SettingsTableEditor {
-  border: 1px solid var(--jp-brand-color1);
-  margin: 0;
-  padding: 0;
+.jp-SettingsRawEditor .cm-editor {
+  height: 100%;
 }
 
-#setting-editor .jp-SettingsTableEditor legend {
-  color: var(--jp-brand-color1);
-  font-size: 70%;
-  font-weight: bold;
-  margin-left: 15px;
-  height: var(--jp-private-settingeditor-legend-height);
+.jp-SettingsPanel .checkbox p {
+  font-size: var(--jp-content-font-size1);
+}
+
+.jp-SettingsPanel .checkbox {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.jp-SettingsPanel .form-group {
+  display: flex;
+  padding: 4px 8px 4px var(--jp-private-settingeditor-modifier-indent);
+  margin-top: 5px;
 }
 
-#setting-editor .jp-SettingsTableEditor-wrapper {
+.jp-SettingsPanel .jp-SaveSettingsBanner {
   position: absolute;
-  top: var(--jp-private-settingeditor-legend-height);
   bottom: 0;
-  overflow-y: auto;
+  padding: 20px;
+  width: 100%;
+  background: var(--jp-border-color3);
 }
 
-#setting-editor .jp-SettingsTableEditor table {
-  table-layout: fixed;
-  color: var(--jp-ui-font-color1);
+.jp-SettingsPanel .jp-SaveSettingsBanner button {
+  box-shadow: none;
+  outline: none;
+  border: none;
+  color: var(--jp-brand-color1);
   font-size: var(--jp-ui-font-size1);
-  padding: 2px;
-  width: calc(100% - 4px);
-  overflow: hidden;
+  cursor: pointer;
 }
 
-#setting-editor .jp-SettingsTableEditor tr {
-  color: var(--jp-ui-font-color2);
-  height: var(--jp-private-settingeditor-row-height);
-  overflow: hidden;
+.jp-SettingsPanel .jp-SaveSettingsBanner button:hover {
+  color: var(--jp-brand-color0);
 }
 
-#setting-editor .jp-SettingsTableEditor th {
-  background-color: var(--jp-layout-color3);
-  border: 1px solid transparent;
-  font-weight: bold;
-  height: var(--jp-private-settingeditor-row-height);
+.jp-SettingsPanel .jp-SettingsHeader h2 {
+  font-size: var(--jp-content-font-size3);
+  color: var(--jp-ui-font-color0);
+  font-weight: 300;
+  margin: 1em;
 }
 
-#setting-editor .jp-SettingsTableEditor td {
-  border: 1px solid transparent;
-  height: var(--jp-private-settingeditor-row-height);
+.jp-SettingsPanel .jp-SettingsHeader-description {
+  font-size: var(--jp-content-font-size2);
+  color: var(--jp-ui-font-color1);
+  font-weight: 200;
+  margin: 1em;
+  line-height: var(--jp-content-font-size3);
+}
+
+.jp-SettingsPanel .jp-SettingsTitle {
+  display: flex;
+  align-items: center;
+  padding-left: 1em;
+}
+
+.jp-SettingsPanel .jp-SettingsTitle-caret {
+  width: 2em;
+  flex-shrink: 0;
+}
+
+.jp-SettingsForm {
+  position: relative;
 }
 
-#setting-editor .jp-SettingsTableEditor th.jp-SettingsTableEditor-key {
-  width: var(--jp-private-settingeditor-key-width);
+.jp-SettingsPanel .jp-SettingsHeader {
+  display: flex;
+  flex: auto;
+  justify-content: space-between;
+  cursor: pointer;
+  border: 1px solid var(--jp-border-color2);
 }
 
-#setting-editor .jp-SettingsTableEditor th.jp-SettingsTableEditor-type {
-  width: var(--jp-private-settingeditor-type-width);
+.jp-PluginList .jp-FilterBox {
+  margin: 8px 12px 0;
+}
+
+.jp-PluginList mark {
+  background-color: transparent;
+  font-weight: bold;
+  color: var(--jp-ui-font-color1);
 }
 
-#setting-editor .jp-SettingsTableEditor td.jp-SettingsTableEditor-key {
+.jp-PluginList-entry {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid transparent;
+  background: transparent;
   overflow: hidden;
+  padding: 4px 0 4px 4px;
   white-space: nowrap;
+}
+
+.jp-PluginList-entry:hover {
+  background: var(--jp-layout-color1);
+}
+
+.jp-PluginList-entry li {
+  margin-left: 27px;
+  margin-top: 5px;
+  color: var(--jp-ui-font-color1);
+  overflow-x: hidden;
   text-overflow: ellipsis;
 }
 
-#setting-editor .jp-SettingsTableEditor td.jp-SettingsTableEditor-value {
-  overflow: hidden;
-  white-space: nowrap;
+.jp-PluginList-entry-label {
+  display: flex;
+}
+
+.jp-PluginList-entry-label-text {
   text-overflow: ellipsis;
+  overflow-x: hidden;
+  white-space: nowrap;
+  color: var(--jp-ui-font-color1);
+  line-height: var(--jp-cell-collapser-min-height);
 }
 
-#setting-editor .jp-SettingsTableEditor td.jp-SettingsTableEditor-type {
-  text-align: right;
+.jp-SettingsPanel .jp-SettingsHeader-Name {
+  text-transform: inherit;
+  font-size: var(--jp-content-font-size3);
+}
+
+.jp-SettingsPanel .jp-SettingsEditor {
+  padding: 20px;
+}
+
+.jp-SettingsPanel .jp-SettingEditor-Switch .jp-switch {
+  position: absolute;
+  bottom: 0;
+  z-index: 999;
+  background-color: var(--jp-border-color3);
+  border: 1px solid var(--jp-border-color1);
+}
+
+.jp-SettingsPanel {
+  overflow-y: auto;
+  height: 100%;
+}
+
+.jp-SettingsForm button.jp-RestoreButton {
+  white-space: nowrap;
+  background: none;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  font-size: var(--jp-content-font-size2);
+  color: var(--jp-brand-color1);
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.jp-PluginEditor {
+  overflow: auto;
 }

package/style/index.css

@@ -9,6 +9,7 @@
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/codeeditor/style/index.css');
 @import url('~@jupyterlab/rendermime/style/index.css');
+@import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/inspector/style/index.css');
 
 @import url('./base.css');