@jupyterlab/settingeditor 4.0.0-beta.1 → 4.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/settingeditor",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-rc.0",
   "description": "The JupyterLab default setting editor interface",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -32,28 +32,33 @@
   ],
   "scripts": {
     "build": "tsc -b",
-    "clean": "rimraf lib && rimraf tsconfig.tsbuildinfo",
+    "build:test": "tsc --build tsconfig.test.json",
+    "clean": "rimraf lib tsconfig.tsbuildinfo",
     "docs": "typedoc src",
+    "test": "jest",
+    "test:cov": "jest --collect-coverage",
+    "test:debug": "node --inspect-brk ../../node_modules/.bin/jest --runInBand",
+    "test:debug:watch": "node --inspect-brk ../../node_modules/.bin/jest --runInBand --watch",
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.0-beta.1",
-    "@jupyterlab/apputils": "^4.0.0-beta.1",
-    "@jupyterlab/codeeditor": "^4.0.0-beta.1",
-    "@jupyterlab/inspector": "^4.0.0-beta.1",
-    "@jupyterlab/rendermime": "^4.0.0-beta.1",
-    "@jupyterlab/settingregistry": "^4.0.0-beta.1",
-    "@jupyterlab/statedb": "^4.0.0-beta.1",
-    "@jupyterlab/translation": "^4.0.0-beta.1",
-    "@jupyterlab/ui-components": "^4.0.0-beta.1",
+    "@jupyterlab/application": "^4.0.0-rc.0",
+    "@jupyterlab/apputils": "^4.0.0-rc.0",
+    "@jupyterlab/codeeditor": "^4.0.0-rc.0",
+    "@jupyterlab/inspector": "^4.0.0-rc.0",
+    "@jupyterlab/rendermime": "^4.0.0-rc.0",
+    "@jupyterlab/settingregistry": "^4.0.0-rc.0",
+    "@jupyterlab/statedb": "^4.0.0-rc.0",
+    "@jupyterlab/translation": "^4.0.0-rc.0",
+    "@jupyterlab/ui-components": "^4.0.0-rc.0",
     "@lumino/algorithm": "^2.0.0",
-    "@lumino/commands": "^2.0.1",
-    "@lumino/coreutils": "^2.0.0",
-    "@lumino/disposable": "^2.0.0",
+    "@lumino/commands": "^2.1.1",
+    "@lumino/coreutils": "^2.1.1",
+    "@lumino/disposable": "^2.1.1",
     "@lumino/messaging": "^2.0.0",
-    "@lumino/polling": "^2.0.0",
-    "@lumino/signaling": "^2.0.0",
-    "@lumino/widgets": "^2.0.1",
+    "@lumino/polling": "^2.1.1",
+    "@lumino/signaling": "^2.1.1",
+    "@lumino/widgets": "^2.1.1",
     "@rjsf/core": "^5.1.0",
     "@rjsf/utils": "^5.1.0",
     "@rjsf/validator-ajv8": "^5.1.0",
@@ -61,10 +66,16 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
+    "@jupyterlab/testing": "^4.0.0-rc.0",
+    "@types/jest": "^29.2.0",
     "@types/react": "^18.0.26",
+    "@types/react-test-renderer": "^18.0.0",
+    "jest": "^29.2.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "~3.0.0",
-    "typedoc": "~0.23.25",
-    "typescript": "~5.0.2"
+    "ts-jest": "^29.1.0",
+    "typedoc": "~0.24.1",
+    "typescript": "~5.0.4"
   },
   "publishConfig": {
     "access": "public"

package/src/InstructionsPlaceholder.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+
+import { ITranslator } from '@jupyterlab/translation';
+
+type ISettingsEditorPlaceholderProps = {
+  translator: ITranslator;
+};
+
+export const SettingsEditorPlaceholder = ({
+  translator
+}: ISettingsEditorPlaceholderProps) => {
+  const trans = translator.load('jupyterlab');
+  return (
+    <div className="jp-SettingsEditor-placeholder">
+      <div className="jp-SettingsEditor-placeholderContent">
+        <h3>{trans.__('No Plugin Selected')}</h3>
+        <p>
+          {trans.__(
+            'Select a plugin from the list to view and edit its preferences.'
+          )}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/SettingsFormEditor.tsx

@@ -3,21 +3,24 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+import React from 'react';
+
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { ISettingRegistry, Settings } from '@jupyterlab/settingregistry';
 import { ITranslator } from '@jupyterlab/translation';
+import { FormComponent } from '@jupyterlab/ui-components';
 import {
-  caretDownIcon,
-  caretRightIcon,
-  FormComponent
-} from '@jupyterlab/ui-components';
-import { JSONExt, ReadonlyPartialJSONObject } from '@lumino/coreutils';
+  JSONExt,
+  PartialJSONObject,
+  ReadonlyJSONObject,
+  ReadonlyPartialJSONObject
+} from '@lumino/coreutils';
 import { Debouncer } from '@lumino/polling';
 import { IChangeEvent } from '@rjsf/core';
 import validatorAjv8 from '@rjsf/validator-ajv8';
 import { Field, UiSchema } from '@rjsf/utils';
 import { JSONSchema7 } from 'json-schema';
-import React from 'react';
+import { Button } from '@jupyterlab/ui-components';
 
 /**
  * Indentation to use when saving the settings as JSON document.
@@ -43,16 +46,6 @@ export namespace SettingsFormEditor {
      */
     renderers: { [id: string]: { [property: string]: Field } };
 
-    /**
-     * Whether the form is collapsed or not.
-     */
-    isCollapsed: boolean;
-
-    /**
-     * Callback with the collapse state value.
-     */
-    onCollapseChange: (v: boolean) => void;
-
     /**
      * Translator object
      */
@@ -117,7 +110,7 @@ export class SettingsFormEditor extends React.Component<
   constructor(props: SettingsFormEditor.IProps) {
     super(props);
     const { settings } = props;
-    this._formData = settings.composite;
+    this._formData = settings.composite as ReadonlyJSONObject;
     this.state = {
       isModified: settings.isModified,
       uiSchema: {},
@@ -161,6 +154,7 @@ export class SettingsFormEditor extends React.Component<
     // Prevent unnecessary save when opening settings that haven't been modified.
     if (
       !this.props.settings.isModified &&
+      this._formData &&
       this.props.settings.isDefault(this._formData)
     ) {
       this.props.updateDirtyState(false);
@@ -189,61 +183,52 @@ export class SettingsFormEditor extends React.Component<
     for (const field in this.props.settings.user) {
       await this.props.settings.remove(field);
     }
-    this._formData = this.props.settings.composite;
+    this._formData = this.props.settings.composite as ReadonlyJSONObject;
     this.setState({ isModified: false });
   };
 
   render(): JSX.Element {
     const trans = this.props.translator.load('jupyterlab');
-    const icon = this.props.isCollapsed ? caretRightIcon : caretDownIcon;
 
     return (
-      <div>
-        <div
-          className="jp-SettingsHeader"
-          onClick={() => {
-            this.props.onCollapseChange(!this.props.isCollapsed);
-            this.props.onSelect(this.props.settings.id);
-          }}
-        >
-          <header className="jp-SettingsTitle">
-            <icon.react
-              tag="span"
-              elementPosition="center"
-              className="jp-SettingsTitle-caret"
-            />
-            <h2>{this.props.settings.schema.title}</h2>
-            <div className="jp-SettingsHeader-description">
-              {this.props.settings.schema.description}
-            </div>
-          </header>
-          {this.state.isModified && (
-            <button className="jp-RestoreButton" onClick={this.reset}>
-              {trans.__('Restore to Defaults')}
-            </button>
-          )}
+      <>
+        <div className="jp-SettingsHeader">
+          <h2
+            className="jp-SettingsHeader-title"
+            title={this.props.settings.schema.description}
+          >
+            {this.props.settings.schema.title}
+          </h2>
+          <div className="jp-SettingsHeader-buttonbar">
+            {this.state.isModified && (
+              <Button className="jp-RestoreButton" onClick={this.reset}>
+                {trans.__('Restore to Defaults')}
+              </Button>
+            )}
+          </div>
+          <div className="jp-SettingsHeader-description">
+            {this.props.settings.schema.description}
+          </div>
         </div>
-        {!this.props.isCollapsed && (
-          <FormComponent
-            validator={validatorAjv8}
-            schema={this.state.filteredSchema as JSONSchema7}
-            formData={this._formData}
-            uiSchema={this.state.uiSchema}
-            fields={this.props.renderers[this.props.settings.id]}
-            formContext={this.state.formContext}
-            liveValidate
-            idPrefix={`jp-SettingsEditor-${this.props.settings.id}`}
-            onChange={this._onChange}
-            translator={this.props.translator}
-          />
-        )}
-      </div>
+        <FormComponent
+          validator={validatorAjv8}
+          schema={this.state.filteredSchema as JSONSchema7}
+          formData={this._getFilteredFormData(this.state.filteredSchema)}
+          uiSchema={this.state.uiSchema}
+          fields={this.props.renderers[this.props.settings.id]}
+          formContext={this.state.formContext}
+          liveValidate
+          idPrefix={`jp-SettingsEditor-${this.props.settings.id}`}
+          onChange={this._onChange}
+          translator={this.props.translator}
+        />
+      </>
     );
   }
 
   private _onChange = (e: IChangeEvent<ReadonlyPartialJSONObject>): void => {
     this.props.hasError(e.errors.length !== 0);
-    this._formData = e.formData;
+    this._formData = e.formData as ReadonlyJSONObject;
     if (e.errors.length === 0) {
       this.props.updateDirtyState(true);
       void this._debouncer.invoke();
@@ -301,6 +286,23 @@ export class SettingsFormEditor extends React.Component<
     }
   }
 
+  private _getFilteredFormData(
+    filteredSchema?: ISettingRegistry.ISchema
+  ): ReadonlyJSONObject {
+    if (!filteredSchema?.properties) {
+      return this._formData;
+    }
+    const filteredFormData = JSONExt.deepCopy(
+      this._formData as PartialJSONObject
+    );
+    for (const field in filteredFormData) {
+      if (!filteredSchema.properties[field]) {
+        delete filteredFormData[field];
+      }
+    }
+    return filteredFormData as ReadonlyJSONObject;
+  }
+
   private _debouncer: Debouncer<void, any>;
-  private _formData: any;
+  private _formData: ReadonlyJSONObject;
 }

package/src/jsonsettingeditor.tsx

@@ -8,13 +8,14 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
-import { jupyterIcon, ReactWidget } from '@jupyterlab/ui-components';
+import { ReactWidget } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONExt, JSONObject, JSONValue } from '@lumino/coreutils';
 import { Message } from '@lumino/messaging';
 import { ISignal } from '@lumino/signaling';
 import { SplitPanel, Widget } from '@lumino/widgets';
 import * as React from 'react';
+import { SettingsEditorPlaceholder } from './InstructionsPlaceholder';
 import { PluginEditor } from './plugineditor';
 import { PluginList } from './pluginlist';
 
@@ -44,7 +45,6 @@ export class JsonSettingEditor extends SplitPanel {
       spacing: 1
     });
     this.translator = options.translator || nullTranslator;
-    const trans = this.translator.load('jupyterlab');
     this.addClass('jp-SettingEditor');
     this.key = options.key;
     this.state = options.state;
@@ -52,25 +52,7 @@ export class JsonSettingEditor extends SplitPanel {
     const { commands, editorFactory, rendermime } = options;
     const registry = (this.registry = options.registry);
     const instructions = (this._instructions = ReactWidget.create(
-      <React.Fragment>
-        <h2>
-          <jupyterIcon.react
-            className="jp-SettingEditorInstructions-icon"
-            tag="span"
-            elementPosition="center"
-            height="auto"
-            width="60px"
-          />
-          <span className="jp-SettingEditorInstructions-title">
-            {trans.__('Settings')}
-          </span>
-        </h2>
-        <span className="jp-SettingEditorInstructions-text">
-          {trans.__(
-            'Select a plugin from the list to view and edit its preferences.'
-          )}
-        </span>
-      </React.Fragment>
+      <SettingsEditorPlaceholder translator={this.translator} />
     ));
     instructions.addClass('jp-SettingEditorInstructions');
     const editor = (this._editor = new PluginEditor({

package/src/pluginlist.tsx

@@ -3,6 +3,8 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+import React from 'react';
+
 import { ReactWidget } from '@jupyterlab/apputils';
 import { ISettingRegistry, Settings } from '@jupyterlab/settingregistry';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
@@ -18,7 +20,8 @@ import { StringExt } from '@lumino/algorithm';
 import { PartialJSONObject } from '@lumino/coreutils';
 import { Message } from '@lumino/messaging';
 import { ISignal, Signal } from '@lumino/signaling';
-import React from 'react';
+
+import type { SettingsEditor } from './settingseditor';
 
 /**
  * The JupyterLab plugin schema key for the setting editor
@@ -56,7 +59,9 @@ export class PluginList extends ReactWidget {
     }, this);
     this.mapPlugins = this.mapPlugins.bind(this);
     this.setFilter = this.setFilter.bind(this);
-    this.setFilter(updateFilterFunction(options.query ?? '', false, false));
+    this.setFilter(
+      options.query ? updateFilterFunction(options.query, false, false) : null
+    );
     this.setError = this.setError.bind(this);
     this._evtMousedown = this._evtMousedown.bind(this);
     this._query = options.query;
@@ -91,7 +96,6 @@ export class PluginList extends ReactWidget {
     void loadSettings();
 
     this._errors = {};
-    this.selection = this._allPlugins[0].id;
   }
 
   /**
@@ -122,7 +126,7 @@ export class PluginList extends ReactWidget {
     return false;
   }
 
-  get filter(): (item: ISettingRegistry.IPlugin) => string[] | null {
+  get filter(): SettingsEditor.PluginSearchFilter {
     return this._filter;
   }
 
@@ -140,10 +144,7 @@ export class PluginList extends ReactWidget {
   /**
    * Signal that fires when search filter is updated so that settings panel can filter results.
    */
-  get updateFilterSignal(): ISignal<
-    this,
-    (plugin: ISettingRegistry.IPlugin) => string[] | null
-  > {
+  get updateFilterSignal(): ISignal<this, SettingsEditor.PluginSearchFilter> {
     return this._updateFilterSignal;
   }
 
@@ -321,20 +322,24 @@ export class PluginList extends ReactWidget {
    * @param filter Filter function passed by search bar based on search value.
    */
   setFilter(
-    filter: (item: string) => Partial<IScore> | null,
+    filter: ((item: string) => Partial<IScore> | null) | null,
     query?: string
   ): void {
-    this._filter = (plugin: ISettingRegistry.IPlugin): string[] | null => {
-      if (filter(plugin.schema.title ?? '')) {
-        return null;
-      }
-      const filtered = this.getFilterString(
-        filter,
-        plugin.schema ?? {},
-        plugin.schema.definitions
-      );
-      return filtered;
-    };
+    if (filter) {
+      this._filter = (plugin: ISettingRegistry.IPlugin): string[] | null => {
+        if (!filter || filter(plugin.schema.title ?? '')) {
+          return null;
+        }
+        const filtered = this.getFilterString(
+          filter,
+          plugin.schema ?? {},
+          plugin.schema.definitions
+        );
+        return filtered;
+      };
+    } else {
+      this._filter = null;
+    }
     this._query = query;
     this._updateFilterSignal.emit(this._filter);
     this.update();
@@ -373,20 +378,22 @@ export class PluginList extends ReactWidget {
     const icon = this.getHint(ICON_KEY, this.registry, plugin);
     const iconClass = this.getHint(ICON_CLASS_KEY, this.registry, plugin);
     const iconTitle = this.getHint(ICON_LABEL_KEY, this.registry, plugin);
-    const filteredProperties = this._filter(plugin)?.map(fieldValue => {
-      const highlightedIndices = StringExt.matchSumOfSquares(
-        fieldValue.toLocaleLowerCase(),
-        this._query?.toLocaleLowerCase() ?? ''
-      );
-      const highlighted = StringExt.highlight(
-        fieldValue,
-        highlightedIndices?.indices ?? [],
-        chunk => {
-          return <mark>{chunk}</mark>;
-        }
-      );
-      return <li key={`${id}-${fieldValue}`}> {highlighted} </li>;
-    });
+    const filteredProperties = this._filter
+      ? this._filter(plugin)?.map(fieldValue => {
+          const highlightedIndices = StringExt.matchSumOfSquares(
+            fieldValue.toLocaleLowerCase(),
+            this._query?.toLocaleLowerCase() ?? ''
+          );
+          const highlighted = StringExt.highlight(
+            fieldValue,
+            highlightedIndices?.indices ?? [],
+            chunk => {
+              return <mark>{chunk}</mark>;
+            }
+          );
+          return <li key={`${id}-${fieldValue}`}> {highlighted} </li>;
+        })
+      : undefined;
 
     return (
       <div
@@ -422,6 +429,9 @@ export class PluginList extends ReactWidget {
     const trans = this.translator.load('jupyterlab');
     // Filter all plugins based on search value before displaying list.
     const allPlugins = this._allPlugins.filter(plugin => {
+      if (!this._filter) {
+        return false;
+      }
       const filtered = this._filter(plugin);
       return filtered === null || filtered.length > 0;
     });
@@ -470,12 +480,12 @@ export class PluginList extends ReactWidget {
   protected translator: ITranslator;
   private _changed = new Signal<this, void>(this);
   private _errors: { [id: string]: boolean };
-  private _filter: (item: ISettingRegistry.IPlugin) => string[] | null;
+  private _filter: SettingsEditor.PluginSearchFilter;
   private _query: string | undefined;
   private _handleSelectSignal = new Signal<this, string>(this);
   private _updateFilterSignal = new Signal<
     this,
-    (plugin: ISettingRegistry.IPlugin) => string[] | null
+    SettingsEditor.PluginSearchFilter
   >(this);
   private _allPlugins: ISettingRegistry.IPlugin[] = [];
   private _settings: { [id: string]: Settings } = {};

package/src/settingseditor.tsx

@@ -161,6 +161,13 @@ export namespace SettingsEditor {
    */
   export type SaveState = 'started' | 'failed' | 'completed';
 
+  /**
+   *
+   */
+  export type PluginSearchFilter =
+    | ((plugin: ISettingRegistry.IPlugin) => string[] | null)
+    | null;
+
   /**
    * Settings editor options
    */

package/src/settingspanel.tsx

@@ -3,15 +3,18 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-import { ISettingRegistry, Settings } from '@jupyterlab/settingregistry';
+import React, { useEffect, useState } from 'react';
+
+import { 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';
+import { SettingsEditorPlaceholder } from './InstructionsPlaceholder';
 
+import type { Field } from '@rjsf/utils';
+import type { SettingsEditor } from './settingseditor';
 export interface ISettingsPanelProps {
   /**
    * List of Settings objects that provide schema and values
@@ -55,16 +58,13 @@ export interface ISettingsPanelProps {
   /**
    * Signal that sends updated filter when search value changes.
    */
-  updateFilterSignal: ISignal<
-    PluginList,
-    (plugin: ISettingRegistry.IPlugin) => string[] | null
-  >;
+  updateFilterSignal: ISignal<PluginList, SettingsEditor.PluginSearchFilter>;
 
   /**
    * 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;
+  initialFilter: SettingsEditor.PluginSearchFilter;
 }
 
 /**
@@ -82,18 +82,10 @@ export const SettingsPanel: React.FC<ISettingsPanelProps> = ({
   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 [activePluginId, setActivePluginId] = useState<string | null>(null);
+  const [filterPlugin, setFilter] = useState<SettingsEditor.PluginSearchFilter>(
+    initialFilter ? () => initialFilter : null
+  );
   const wrapperRef: React.RefObject<HTMLDivElement> = React.useRef(null);
   const editorDirtyStates: React.RefObject<{
     [id: string]: boolean;
@@ -102,34 +94,16 @@ export const SettingsPanel: React.FC<ISettingsPanelProps> = ({
   useEffect(() => {
     const onFilterUpdate = (
       list: PluginList,
-      newFilter: (plugin: ISettingRegistry.IPlugin) => string[] | null
+      newFilter: SettingsEditor.PluginSearchFilter
     ) => {
-      setFilter(() => newFilter);
-      for (const pluginSettings of settings) {
-        const filtered = newFilter(pluginSettings.plugin);
-        if (filtered === null || filtered.length > 0) {
-          setExpandedPlugin(pluginSettings.id);
-          break;
-        }
-      }
+      newFilter ? setFilter(() => newFilter) : setFilter(null);
     };
 
-    // 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);
+      setActivePluginId(pluginId);
     };
     handleSelectSignal?.connect?.(onSelectChange);
 
@@ -174,30 +148,30 @@ export const SettingsPanel: React.FC<ISettingsPanelProps> = ({
     [editorRegistry]
   );
 
+  if (!activePluginId && !filterPlugin) {
+    return <SettingsEditorPlaceholder translator={translator} />;
+  }
+
   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);
+        const filtered = filterPlugin
+          ? filterPlugin(pluginSettings.plugin)
+          : null;
         // If filtered results are an array, only show if the array is non-empty.
-        if (filtered !== null && filtered.length === 0) {
+        if (
+          (activePluginId && activePluginId !== pluginSettings.id) ||
+          (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}