fix: use new endpoint for dashboard item search DHIS2-12236 (#2204)

* fix: use new endpoint for dashboard item search DHIS2-12236

* test: use more sensible viewport for tests

This is the same size we use in DV/LL.

* test: use a different map to avoid timeouts

This map seems to be loading fast enough.
The super long timeout has been removed.

cypress.json

@@ -2,5 +2,7 @@
     "baseUrl": "http://localhost:3000",
     "video": true,
     "projectId": "5fk191",
-    "testFiles": "**/*.feature"
+    "testFiles": "**/*.feature",
+    "viewportWidth": 1280,
+    "viewportHeight": 800
 }

cypress/integration/view/dashboard_filter/create_dashboard.js

@@ -26,22 +26,27 @@ When('I add a MAP and a CHART and save', () => {
         .find('input')
         .type('Inpatient', { force: true })
 
-    // //chart
+    //chart
     cy.get(
         '[data-test="menu-item-Inpatient: BMI this year by districts"]'
     ).click()
 
+    cy.get('[data-test="dhis2-uicore-layer"]').click('topLeft')
+
+    cy.get('[data-test="item-search"]').click()
+    cy.get('[data-test="item-search"]')
+        .find('input')
+        .type('ipt 2', { force: true })
+
     //map
-    cy.get(
-        '[data-test="menu-item-Inpatient: BMI at facility level this year"]'
-    ).click()
+    cy.get('[data-test="menu-item-ANC: IPT 2 Coverage this year"]').click()
 
     cy.get('[data-test="dhis2-uicore-layer"]').click('topLeft')
 
     //move things so the dashboard is more compact
     cy.get(`${gridItemSel}.MAP`)
         .trigger('mousedown')
-        .trigger('mousemove', { clientX: 600 })
+        .trigger('mousemove', { clientX: 650 })
         .trigger('mouseup')
 
     //save
@@ -54,13 +59,12 @@ Given('I open existing dashboard', () => {
         .click()
 })
 
-// TODO - restore the normal EXTENDED_TIMEOUT when
-// slow loading of this map has been fixes
+// Some map visualization load very slowly:
 // https://dhis2.atlassian.net/browse/DHIS2-14365
 Then('the dashboard displays in view mode', () => {
     // check for a map canvas and a highcharts element
     cy.get(chartSel, EXTENDED_TIMEOUT).should('be.visible')
-    cy.get(mapSel, { timeout: 85000 }).should('be.visible')
+    cy.get(mapSel, EXTENDED_TIMEOUT).should('be.visible')
 })
 
 When('I choose to delete dashboard', () => {

src/pages/edit/ItemSelector/ItemSelector.js

@@ -1,31 +1,44 @@
-import { useDataEngine } from '@dhis2/app-runtime'
+import { useDataQuery } from '@dhis2/app-runtime'
 import { Popover, FlyoutMenu } from '@dhis2/ui'
 import React, { useState, useEffect, createRef } from 'react'
 import { itemTypeMap, getDefaultItemCount } from '../../../modules/itemTypes.js'
 import useDebounce from '../../../modules/useDebounce.js'
 import CategorizedMenuGroup from './CategorizedMenuGroup.js'
-import { getDashboardsQQuery } from './dashboardsQQuery.js'
 import ItemSearchField from './ItemSearchField.js'
 import { singleItems, categorizedItems } from './selectableItems.js'
 import SinglesMenuGroup from './SinglesMenuGroup.js'
 import classes from './styles/ItemSelector.module.css'
 
+const dashboardSearchQuery = {
+    items: {
+        resource: 'dashboards/search',
+        params: ({ searchTerm = '', count = 11, maxItems = [] }) => ({
+            q: searchTerm,
+            count,
+            max: maxItems,
+        }),
+    },
+}
+
 const ItemSelector = () => {
     const [isOpen, setIsOpen] = useState(false)
     const [filter, setFilter] = useState('')
     const [items, setItems] = useState(null)
     const [maxOptions, setMaxOptions] = useState(new Set())
-    const dataEngine = useDataEngine()
     const debouncedFilterText = useDebounce(filter, 350)
 
-    useEffect(() => {
-        const query = getDashboardsQQuery(
-            debouncedFilterText,
-            Array.from(maxOptions)
-        )
+    const { data, refetch } = useDataQuery(dashboardSearchQuery, {
+        lazy: true,
+    })
 
-        dataEngine.query({ items: query }).then((res) => setItems(res.items))
-    }, [debouncedFilterText, maxOptions])
+    useEffect(() => data?.items && setItems(data.items), [data])
+
+    useEffect(() => {
+        refetch({
+            searchTerm: debouncedFilterText,
+            maxItems: Array.from(maxOptions),
+        })
+    }, [debouncedFilterText, maxOptions, refetch])
 
     const closeMenu = () => {
         setIsOpen(false)