Collapsible disclaimer

examples/listings/Makefile

@@ -2,8 +2,6 @@ print-listings:
 #	@exec echo Local Blacklist URI: http://localhost:8888/listings/blacklist.json
 #	@exec echo Local Whitelist URI: http://localhost:8888/listings/whitelist.json
 
-#	  --LabServerApp.blacklist_uris=http://localhost:8888/listings/blacklist.json \
-#	  --LabServerApp.whitelist_uris=http://localhost:8888/listings/whitelist.json
 dev: print-listings
 	@exec python main.py \
 	  --dev \
@@ -11,8 +9,6 @@ dev: print-listings
 	  --LabServerApp.blacklist_uris=https://raw.githubusercontent.com/datalayer-jupyterlab/jupyterlab-listings-example/master/blacklist.json \
 	  --LabServerApp.whitelist_uris=https://raw.githubusercontent.com/datalayer-jupyterlab/jupyterlab-listings-example/master/whitelist.json
 
-#	  --LabServerApp.blacklist_uris=http://localhost:8888/listings/blacklist.json \
-#	  --LabServerApp.whitelist_uris=http://localhost:8888/listings/whitelist.json
 dev-watch: print-listings
 	@exec python main.py \
 	  --dev \

examples/listings/settings/@jupyterlab/extensionmanager-extension/plugin.jupyterlab-settings

@@ -4,9 +4,9 @@
     // Extension manager settings.
     // *********************************************
 
-    // Disclaimer Status
+    // Disclaimed Status
     // Whether the user understand that extensions managed through this interface run arbitrary code that may be dangerous
-    "disclaimed": false,
+    "disclaimed": true,
 
     // Enabled Status
     // Enables extension manager (requires Node.js/npm).

packages/extensionmanager/src/widget.tsx

@@ -57,31 +57,40 @@ export class SearchBar extends React.Component<
    */
   render(): React.ReactNode {
     return (
-      <div className="jp-extensionmanager-search-bar">
-        <InputGroup
-          className="jp-extensionmanager-search-wrapper"
-          type="text"
-          placeholder={this.props.placeholder}
-          onChange={this.handleChange}
-          value={this.state.value}
-          rightIcon="search"
-          disabled={this.props.disabled}
-        />
-        <br />
-        <Checkbox
-          label="I understand that extensions managed through this interface run arbitrary code that may be dangerous."
-          checked={ListModel.isDisclaimed()}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            this.props.settings
-              .set('disclaimed', e.target.checked)
-              .catch(reason => {
-                console.error(
-                  `Something went wrong when setting disclaimed.\n${reason}`
-                );
-              });
-          }}
-        />
-      </div>
+      <>
+        <div className="jp-extensionmanager-search-bar">
+          <InputGroup
+            className="jp-extensionmanager-search-wrapper"
+            type="text"
+            placeholder={this.props.placeholder}
+            onChange={this.handleChange}
+            value={this.state.value}
+            rightIcon="search"
+            disabled={this.props.disabled}
+          />
+        </div>
+        <CollapsibleSection
+          key="search-section"
+          isOpen={false}
+          header={'Disclaimer'}
+        >
+          <div className="jp-extensionmanager-disclaimer">
+            <Checkbox
+              label="I understand that extensions managed through this interface run arbitrary code that may be dangerous."
+              checked={ListModel.isDisclaimed()}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                this.props.settings
+                  .set('disclaimed', e.target.checked)
+                  .catch(reason => {
+                    console.error(
+                      `Something went wrong when setting disclaimed.\n${reason}`
+                    );
+                  });
+              }}
+            />
+          </div>
+        </CollapsibleSection>
+      </>
     );
   }
 

packages/extensionmanager/style/base.css

@@ -90,6 +90,10 @@
   padding: 4px;
 }
 
+.jp-extensionmanager-disclaimer {
+  padding: 4px;
+}
+
 .jp-extensionmanager-search-wrapper input {
   background: transparent;
   font-size: var(--jp-ui-font-size1);

packages/extensionmanager/tsconfig.json

@@ -16,10 +16,10 @@
       "path": "../services"
     },
     {
-      "path": "../ui-components"
+      "path": "../settingregistry"
     },
     {
-      "path": "../settingregistry"
+      "path": "../ui-components"
     }
   ]
 }