feat: implement ability to search when selecting datasets

.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

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>
+    )
+}

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';
+export { CSVConfig as CSVSourceConfig } from './CSVSourceConfig';
+export { DatasetSelector } from './DatasetSelector';

plugins/wp-react-blocks-plugin/blocks/map/BlockEdit.js

@@ -9,13 +9,15 @@ import {
   ToggleControl,
   TextControl,
   Button,
+  ComboboxControl,
 } from "@wordpress/components";
 import { PanelColorSettings } from "@wordpress/block-editor";
 import { __ } from "@wordpress/i18n";
 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>
                 )}

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",