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 (
+
+ {
+ 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.')}
+ />
+
+ )
+}
\ 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 && (
@@ -583,26 +587,13 @@ class BlockEdit extends BlockEditWithAPIMetadata {
{isSupersetAPI(app, this.state.apps) && (
- {
- setAttributes({
- dvzProxyDatasetId: newDatasetId,
- dimension1: "none",
- dimension2: "none",
- dimension3: "none",
- measures: [],
- });
- this.setState({
- dimensions: [],
- measures: [],
- filters: [],
- categories: [],
- });
- this.loadMetadata(app, newDatasetId);
- }}
- options={datasets}
+
)}
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'