Add a setting to show search box by kernel tables (#13)

* Show search box by the tables

* Add a test

* Add snapshot

schema/plugin.json

@@ -29,6 +29,11 @@
       "type": "boolean",
       "title": "Show starred section"
     },
+    "searchAllSections": {
+      "type": "boolean",
+      "title": "Search in all sections",
+      "default": true
+    },
     "collapsedSections": {
       "title": "Collapsed sections",
       "description": "Whether to start launcher with given section collapsed.",

src/components/table.tsx

@@ -55,8 +55,9 @@ export function KernelTable(props: {
   const { trans } = props;
   let query: string;
   let updateQuery: (value: string) => void;
+  // Note: state cannot be defined in conditionals, or React will error out when toggling it.
+  const [_query, _updateQuery] = React.useState<string>('');
   if (props.showSearchBox) {
-    const [_query, _updateQuery] = React.useState<string>('');
     query = _query;
     updateQuery = _updateQuery;
   } else {
@@ -285,7 +286,7 @@ export function KernelTable(props: {
       {props.showSearchBox ? (
         <div className="jp-Launcher-searchBox">
           <FilterBox
-            placeholder={trans.__('Filter')}
+            placeholder={trans.__('Filter kernels')}
             updateFilter={(_, query) => {
               updateQuery(query ?? '');
             }}

src/launcher.tsx

@@ -44,11 +44,24 @@ function LauncherBody(props: {
     props.settings.composite.starredSection as ISettingsLayout['starredSection']
   );
 
+  const [searchAll, updateSearchAll] = React.useState<
+    ISettingsLayout['searchAllSections']
+  >(
+    props.settings.composite
+      .searchAllSections as ISettingsLayout['searchAllSections']
+  );
+
   const syncSettings = () => {
-    updateShowStarred(
-      props.settings.composite
-        .starredSection as ISettingsLayout['starredSection']
-    );
+    const newStarred = props.settings.composite
+      .starredSection as ISettingsLayout['starredSection'];
+    if (showStarred !== newStarred) {
+      updateShowStarred(newStarred);
+    }
+    const newSearchAll = props.settings.composite
+      .searchAllSections as ISettingsLayout['searchAllSections'];
+    if (searchAll !== newSearchAll) {
+      updateSearchAll(newSearchAll);
+    }
   };
 
   React.useEffect(() => {
@@ -104,16 +117,18 @@ function LauncherBody(props: {
           ))}
         </div>
       </div>
-      <div className="jp-Launcher-searchBox">
-        <FilterBox
-          placeholder={trans.__('Filter')}
-          updateFilter={(_, query) => {
-            updateQuery(query ?? '');
-          }}
-          initialQuery={''}
-          useFuzzyFilter={false}
-        />
-      </div>
+      {searchAll ? (
+        <div className="jp-Launcher-searchBox">
+          <FilterBox
+            placeholder={trans.__('Filter')}
+            updateFilter={(_, query) => {
+              updateQuery(query ?? '');
+            }}
+            initialQuery={''}
+            useFuzzyFilter={false}
+          />
+        </div>
+      ) : null}
       <CollapsibleSection
         className="jp-Launcher-openByType"
         title={trans.__('Create Empty')}
@@ -141,7 +156,7 @@ function LauncherBody(props: {
             <KernelTable
               items={starred}
               commands={props.commands}
-              showSearchBox={false}
+              showSearchBox={!searchAll}
               showWidgetType={true}
               query={query}
               settings={props.settings}
@@ -162,7 +177,7 @@ function LauncherBody(props: {
         <KernelTable
           items={props.notebookItems}
           commands={props.commands}
-          showSearchBox={false}
+          showSearchBox={!searchAll}
           query={query}
           settings={props.settings}
           trans={trans}
@@ -178,7 +193,7 @@ function LauncherBody(props: {
         <KernelTable
           items={props.consoleItems}
           commands={props.commands}
-          showSearchBox={false}
+          showSearchBox={!searchAll}
           query={query}
           settings={props.settings}
           trans={trans}

src/types.ts

@@ -21,6 +21,7 @@ export interface ISettingsLayout {
   columnOrder: string[];
   starredSection: boolean;
   collapsedSections: Record<string, 'collapsed' | 'expanded'>;
+  searchAllSections: boolean;
 }
 
 export interface IItem extends ILauncher.IItemOptions {

ui-tests/tests/jupyterlab_new_launcher.spec.ts

@@ -38,3 +38,22 @@ test.describe('With starred section', () => {
     );
   });
 });
+
+test.describe('Filter individual', () => {
+  test.use({
+    mockSettings: {
+      ...galata.DEFAULT_SETTINGS,
+      [SETTINGS_ID]: {
+        ...galata.DEFAULT_SETTINGS[SETTINGS_ID],
+        searchAllSections: false
+      }
+    }
+  });
+
+  test('search in individual sections', async ({ page }) => {
+    const launcher = page.locator('.jp-LauncherBody');
+    expect(await launcher.screenshot()).toMatchSnapshot(
+      'launcher-search-in-individual.png'
+    );
+  });
+});