@jupyterlab/settingeditor 4.0.0-alpha.9 → 4.0.0-beta.1

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

@@ -18,9 +18,9 @@
   min-width: 360px;
   min-height: 240px;
   background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
   margin-top: -1px;
   outline: none;
-  color: var(--jp-content-font-color1) !important;
 
   /* This is needed so that all font sizing of children done in ems is
    * relative to this base size */
@@ -90,19 +90,10 @@
   right: 0;
 }
 
-.jp-PluginList .jp-SettingsHeader {
-  display: flex;
-  flex-basis: 100%;
-}
-
-.jp-PluginList .jp-SettingsHeader button {
-  color: var(--jp-private-notebook-selected-color);
-  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);
 }
 
 .jp-PluginList .jp-PluginList-noResults,
@@ -116,7 +107,7 @@
   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-content-font-color1);
+  color: var(--jp-ui-font-color1);
 }
 
 .jp-PluginList .jp-SelectedIndicator {
@@ -134,24 +125,6 @@
   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);
-}
-
-.jp-PluginList button span {
-  color: var(--jp-content-font-color1);
-  line-height: var(--jp-cell-collapser-min-height);
-}
-
-.jp-FormComponent li span {
-  overflow: hidden;
-}
-
 .jp-SettingEditor-header {
   font-size: var(--jp-content-font-size4);
   font-weight: var(--jp-content-heading-font-weight);
@@ -164,14 +137,6 @@
   background-color: var(--jp-layout-color0);
 }
 
-.jp-PluginList-Searcher {
-  margin: 5px;
-}
-
-ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
-  background-image: var(--jp-icon-file-selected);
-}
-
 .jp-PluginList-icon {
   display: flex;
   height: 20px;
@@ -196,19 +161,6 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   align-items: center;
 }
 
-.jp-ToolbarButtonComponent-label
-  .jp-SettingsRawEditor.jp-mod-error
-  .jp-Toolbar-item.jp-BugIcon::after {
-  color: red;
-  content: '\25CF'; /* Unicode circle character (error dot) */
-  font-size: 7px;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 4px;
-  left: 6px;
-}
-
 .jp-SettingsRawEditor .jp-Inspector {
   border-top: 2px solid var(--jp-layout-color2);
   min-height: var(--jp-private-settingeditor-debug-height);
@@ -224,35 +176,8 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   text-align: right;
 }
 
-.jp-SettingsPanel fieldset input,
-.jp-SettingsPanel fieldset select,
-.jp-SettingsPanel fieldset textarea {
-  font-size: var(--jp-content-font-size2);
-  border-color: var(--jp-input-border-color);
-  border-style: solid;
-  border-radius: 5px;
-  border-width: 1px;
-  padding: 6px 8px;
-  background: none;
-  color: var(--jp-content-font-color0);
-  height: inherit;
-}
-
-.jp-SettingsPanel fieldset input[type='checkbox'] {
-  position: relative;
-  top: 2px;
-  margin-left: 0;
-}
-
-/** copy of `input.jp-mod-styled:focus` style */
-.jp-SettingsPanel fieldset input:focus {
-  border: var(--jp-border-width) solid var(--md-blue-500);
-  box-shadow: inset 0 0 4px var(--md-blue-300);
-}
-
-.jp-SettingsPanel .checkbox label {
-  cursor: pointer;
-  font-size: var(--jp-content-font-size2);
+.jp-SettingsRawEditor .cm-editor {
+  height: 100%;
 }
 
 .jp-SettingsPanel .checkbox p {
@@ -264,61 +189,12 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   flex-direction: column-reverse;
 }
 
-.jp-SettingsPanel .checkbox .field-description {
-  /* Disable default description field for checkbox:
-   because other widgets do not have description fields,
-   we add descriptions to each widget on the field level.
-  */
-  display: none;
-}
-
-.jp-SettingsPanel button[type='submit'] {
-  display: none;
-}
-
 .jp-SettingsPanel .form-group {
   display: flex;
   padding: 4px 8px 4px var(--jp-private-settingeditor-modifier-indent);
   margin-top: 5px;
 }
 
-.jp-SettingsPanel .jp-objectFieldWrapper .form-group {
-  padding: 2px 8px 2px var(--jp-private-settingeditor-modifier-indent);
-  margin-top: 2px;
-}
-
-.jp-ArrayOperations {
-  margin-left: 8px;
-}
-
-.jp-SettingsPanel .jp-FormGroup-content {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.jp-SettingsPanel .jp-FormGroup-contentItem {
-  margin-left: 7px;
-}
-
-.jp-SettingsPanel .jp-FormGroup-description {
-  flex-basis: 100%;
-  padding: 4px 7px;
-}
-
-.jp-SettingsPanel #root__description {
-  display: none;
-}
-
-.jp-SettingsPanel fieldset {
-  border: none;
-  padding: 0;
-}
-
-.jp-SettingsPanel fieldset:not(:first-child) {
-  margin-left: 7px;
-}
-
 .jp-SettingsPanel .jp-SaveSettingsBanner {
   position: absolute;
   bottom: 0;
@@ -340,71 +216,6 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   color: var(--jp-brand-color0);
 }
 
-.jp-SettingsPanel .form-group.small-field:hover {
-  background: var(--jp-border-color3);
-}
-
-.jp-SettingsPanel button.jp-mod-styled {
-  cursor: pointer;
-}
-
-.jp-SettingsPanel button.jp-mod-styled:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.jp-SettingsPanel .array-item button {
-  margin: 2px;
-}
-
-.jp-openJSONSettingsEditor {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.jp-openJSONSettingsEditor button {
-  border: 1px solid var(--jp-border-color1);
-  color: var(--jp-ui-font-color0);
-  padding: 5px;
-  margin: 5px;
-  cursor: pointer;
-  background-color: var(--jp-border-color2);
-  display: flex;
-  align-items: center;
-}
-
-.jp-openJSONSettingsEditor button > div {
-  display: flex;
-}
-
-.jp-openJSONSettingsEditor svg#icon {
-  height: 1.5em;
-}
-
-.jp-SettingsPanel .array-item {
-  border: 1px solid var(--jp-border-color2);
-  border-radius: 4px;
-  margin: 4px;
-}
-
-.jp-SettingsPanel .field-array-of-string .array-item {
-  /* Display `jp-ArrayOperations` buttons side-by-side with content except
-    for small screens where flex-wrap will place them one below the other.
-  */
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.jp-SettingsPanel .jp-root > fieldset > legend {
-  display: none;
-}
-
-.jp-SettingsPanel .jp-root > fieldset > p {
-  display: none;
-}
-
 .jp-SettingsPanel .jp-SettingsHeader h2 {
   font-size: var(--jp-content-font-size3);
   color: var(--jp-ui-font-color0);
@@ -420,20 +231,6 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   line-height: var(--jp-content-font-size3);
 }
 
-.jp-SettingsPanel legend {
-  font-size: var(--jp-content-font-size2);
-  color: var(--jp-ui-font-color0);
-  flex-basis: 100%;
-  padding: 4px 0;
-  font-weight: var(--jp-content-header-font-weight);
-  border-bottom: 1px solid var(--jp-border-color2);
-}
-
-.jp-SettingsPanel .field-description {
-  padding: 4px 0;
-  white-space: pre-wrap;
-}
-
 .jp-SettingsPanel .jp-SettingsTitle {
   display: flex;
   align-items: center;
@@ -477,6 +274,10 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   white-space: nowrap;
 }
 
+.jp-PluginList-entry:hover {
+  background: var(--jp-layout-color1);
+}
+
 .jp-PluginList-entry li {
   margin-left: 27px;
   margin-top: 5px;
@@ -485,14 +286,16 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   text-overflow: ellipsis;
 }
 
-.jp-pluginList-entry-label {
+.jp-PluginList-entry-label {
   display: flex;
 }
 
-.jp-pluginList-entry-label span {
+.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);
 }
 
 .jp-SettingsPanel .jp-SettingsHeader-Name {
@@ -500,32 +303,6 @@ ul.jp-PluginList li.jp-mod-selected span.jp-PluginList-icon.jp-FileIcon {
   font-size: var(--jp-content-font-size3);
 }
 
-.jp-SettingsPanel .jp-modifiedIndicator {
-  width: 5px;
-  background-color: var(--jp-brand-color2);
-  margin-top: 0;
-  margin-left: calc(var(--jp-private-settingeditor-modifier-indent) * -1);
-  flex-shrink: 0;
-}
-
-.jp-SettingsPanel .jp-FormGroup-fieldLabel {
-  font-size: var(--jp-content-font-size1);
-  font-weight: normal;
-  min-width: 120px;
-}
-
-.jp-SettingsPanel .jp-modifiedIndicator.jp-errorIndicator {
-  background-color: var(--jp-error-color0);
-}
-
-.jp-SettingsPanel .validationErrors {
-  color: var(--jp-error-color0);
-}
-
-.jp-SettingsPanel .panel.errors {
-  display: none;
-}
-
 .jp-SettingsPanel .jp-SettingsEditor {
   padding: 20px;
 }

package/lib/splitpanel.d.ts

@@ -1,13 +0,0 @@
-import { ISignal } from '@lumino/signaling';
-import { SplitPanel as SPanel } from '@lumino/widgets';
-/**
- * A deprecated split panel that will be removed when the phosphor split panel
- * supports a handle moved signal. See https://github.com/phosphorjs/phosphor/issues/297.
- */
-export declare class SplitPanel extends SPanel {
-    /**
-     * Emits when the split handle has moved.
-     */
-    readonly handleMoved: ISignal<any, void>;
-    handleEvent(event: Event): void;
-}

package/lib/splitpanel.js

@@ -1,26 +0,0 @@
-/* -----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-import { Signal } from '@lumino/signaling';
-import { SplitPanel as SPanel } from '@lumino/widgets';
-/**
- * A deprecated split panel that will be removed when the phosphor split panel
- * supports a handle moved signal. See https://github.com/phosphorjs/phosphor/issues/297.
- */
-export class SplitPanel extends SPanel {
-    constructor() {
-        super(...arguments);
-        /**
-         * Emits when the split handle has moved.
-         */
-        this.handleMoved = new Signal(this);
-    }
-    handleEvent(event) {
-        super.handleEvent(event);
-        if (event.type === 'mouseup') {
-            this.handleMoved.emit(undefined);
-        }
-    }
-}
-//# sourceMappingURL=splitpanel.js.map

package/lib/splitpanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"splitpanel.js","sourceRoot":"","sources":["../src/splitpanel.ts"],"names":[],"mappings":"AAAA;;;+EAG+E;AAE/E,OAAO,EAAW,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,UAAU,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,MAAM;IAAtC;;QACE;;WAEG;QACM,gBAAW,GAAuB,IAAI,MAAM,CAAY,IAAI,CAAC,CAAC;IASzE,CAAC;IAPC,WAAW,CAAC,KAAY;QACtB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEzB,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;YAC3B,IAAI,CAAC,WAAiC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzD;IACH,CAAC;CACF"}