From 269fbfe7e4ea857ca73161e42d11f3c69ea4d885 Mon Sep 17 00:00:00 2001
From: Timothy Mugo <tmugo@developmentgateway.org>
Date: Fri, 4 Sep 2026 10:24:33 +0300
Subject: [PATCH] feat: implement ability to search when selecting datasets

---
 .changeset/sixty-queens-invent.md             |  5 ++
 packages/commons/src/DatasetSelector.jsx      | 64 +++++++++++++++++++
 packages/commons/src/index.js                 |  3 +-
 .../blocks/map/BlockEdit.js                   | 31 ++++-----
 .../blocks/package.json                       |  2 +-
 pnpm-lock.yaml                                |  2 +-
 6 files changed, 84 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/sixty-queens-invent.md
 create mode 100644 packages/commons/src/DatasetSelector.jsx

diff --git a/.changeset/sixty-queens-invent.md b/.changeset/sixty-queens-invent.md
new file mode 100644
index 000000000..b5ec0bd1c
--- /dev/null
+++ b/.changeset/sixty-queens-invent.md
@@ -0,0 +1,5 @@
+---
+"@devgateway/dvz-wp-commons": patch
+---
+
+Implement dataset search input and selector to search from a list of datasets
diff --git a/packages/commons/src/DatasetSelector.jsx b/packages/commons/src/DatasetSelector.jsx
new file mode 100644
index 000000000..92213ab42
--- /dev/null
+++ b/packages/commons/src/DatasetSelector.jsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { ComboboxControl } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+
+export const DatasetSelector = (props) => {
+    const {
+        setAttributes,
+        setState,
+        loadMetadata,
+        dvzProxyDatasetId,
+        app,
+        datasets
+    } = props;
+    const [ filterValue, setFilterValue ] = useState("");
+    const selectedDataset = (datasets || []).find(dataset =>
+        dataset.value.toString() === dvzProxyDatasetId?.toString()
+    );
+    const filteredOptions = (datasets || []).filter(dataset => {
+        const searchValue = filterValue.toLowerCase();
+        return dataset.label.toLowerCase().includes(searchValue) ||
+            dataset.value.toString().toLowerCase().includes(searchValue);
+    });
+
+    return (
+        <div style={{
+            maxWidth: "100%",
+            minWidth: 0,
+            overflowWrap: "anywhere",
+            width: "100%",
+        }}>
+            <ComboboxControl
+                label={__("Datasets")}
+                value={selectedDataset?.value || dvzProxyDatasetId || ""}
+                style={{
+                    maxWidth: "100%",
+                    minWidth: 0,
+                    overflowWrap: "anywhere",
+                    width: "100%",
+                }}
+                onChange={(newDatasetId) => {
+                    setAttributes({
+                        dvzProxyDatasetId: newDatasetId,
+                        dimension1: "none",
+                        dimension2: "none",
+                        dimension3: "none",
+                        measures: [],
+                    });
+                    setState({
+                        dimensions: [],
+                        measures: [],
+                        filters: [],
+                        categories: [],
+                    });
+                    loadMetadata(app, newDatasetId);
+                }}
+                options={filteredOptions}
+                onFilterValueChange={inputValue => {
+                    setFilterValue(inputValue || "");
+                }}
+                help={__('Select the dataset from the API.')}
+            />
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/packages/commons/src/index.js b/packages/commons/src/index.js
index ccca21455..2ad5a3db1 100644
--- a/packages/commons/src/index.js
+++ b/packages/commons/src/index.js
@@ -41,4 +41,5 @@ export {
 export { ChartLegends } from './ChartLegends';
 
 export { GenericIcon, ChartIcon } from './icons/index';
-export { CSVConfig as CSVSourceConfig } from './CSVSourceConfig';
\ No newline at end of file
+export { CSVConfig as CSVSourceConfig } from './CSVSourceConfig';
+export { DatasetSelector } from './DatasetSelector';
\ No newline at end of file
diff --git a/plugins/wp-react-blocks-plugin/blocks/map/BlockEdit.js b/plugins/wp-react-blocks-plugin/blocks/map/BlockEdit.js
index 7fb70556e..f06fabb94 100644
--- a/plugins/wp-react-blocks-plugin/blocks/map/BlockEdit.js
+++ b/plugins/wp-react-blocks-plugin/blocks/map/BlockEdit.js
@@ -9,6 +9,7 @@ import {
   ToggleControl,
   TextControl,
   Button,
+  ComboboxControl,
 } from "@wordpress/components";
 import { PanelColorSettings } from "@wordpress/block-editor";
 import { __ } from "@wordpress/i18n";
@@ -16,6 +17,7 @@ import {
   BlockEditWithAPIMetadata,
   isSupersetAPI,
   MapCSVSourceConfig,
+  DatasetSelector
 } from "@devgateway/dvz-wp-commons";
 import APIConfig from "./APIConfig";
 import LegendBreaks from "./LegendBreaks";
@@ -31,6 +33,7 @@ class BlockEdit extends BlockEditWithAPIMetadata {
       types: "media",
       taxonomies: null,
       loading: true,
+      datasetFilter: null,
     };
 
     this.iframe = React.createRef();
@@ -544,6 +547,7 @@ class BlockEdit extends BlockEditWithAPIMetadata {
 
     const divStyles = { height: height + "px", width: "100%" };
 
+
     return [
       isSelected && (
         <InspectorControls>
@@ -583,26 +587,13 @@ class BlockEdit extends BlockEditWithAPIMetadata {
 
                 {isSupersetAPI(app, this.state.apps) && (
                   <PanelRow>
-                    <SelectControl
-                      label={__("Datasets")}
-                      value={[dvzProxyDatasetId]}
-                      onChange={(newDatasetId) => {
-                        setAttributes({
-                          dvzProxyDatasetId: newDatasetId,
-                          dimension1: "none",
-                          dimension2: "none",
-                          dimension3: "none",
-                          measures: [],
-                        });
-                        this.setState({
-                          dimensions: [],
-                          measures: [],
-                          filters: [],
-                          categories: [],
-                        });
-                        this.loadMetadata(app, newDatasetId);
-                      }}
-                      options={datasets}
+                    <DatasetSelector
+                      setAttributes={setAttributes}
+                      setState={this.setState.bind(this)}
+                      loadMetadata={this.loadMetadata.bind(this)}
+                      dvzProxyDatasetId={dvzProxyDatasetId}
+                      app={app}
+                      datasets={datasets}
                     />
                   </PanelRow>
                 )}
diff --git a/plugins/wp-react-blocks-plugin/blocks/package.json b/plugins/wp-react-blocks-plugin/blocks/package.json
index 800d964ce..db2838689 100644
--- a/plugins/wp-react-blocks-plugin/blocks/package.json
+++ b/plugins/wp-react-blocks-plugin/blocks/package.json
@@ -39,7 +39,7 @@
     "start": "wp-scripts start"
   },
   "dependencies": {
-    "@devgateway/dvz-wp-commons": "workspace:@devgateway/dvz-wp-commons@*",
+    "@devgateway/dvz-wp-commons": "workspace:*",
     "@types/react": "18",
     "@wordpress/a11y": "^4.32.0",
     "@wordpress/api-fetch": "^7.32.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c7b170e2..2a557cb6a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,7 @@ importers:
   plugins/wp-react-blocks-plugin/blocks:
     dependencies:
       '@devgateway/dvz-wp-commons':
-        specifier: workspace:@devgateway/dvz-wp-commons@*
+        specifier: workspace:*
         version: link:../../../packages/commons
       '@types/react':
         specifier: '18'