fix: debounce the item selector query in dashboard editor [DHIS2-10530]

src/api/dashboardsQ.js

@@ -0,0 +1,6 @@
+export const getDashboardsQQuery = (query = '', maxItems = []) => {
+    return {
+        resource: `dashboards/q/${query}`,
+        params: { count: 11, max: maxItems },
+    }
+}

src/components/ItemSelector/ItemSelector.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect, createRef } from 'react'
 import { Popover, FlyoutMenu } from '@dhis2/ui'
-import { useD2 } from '@dhis2/app-runtime-adapter-d2'
+import { useDataEngine } from '@dhis2/app-runtime'
 import ItemSearchField from './ItemSearchField'
 import CategorizedMenuGroup from './CategorizedMenuGroup'
 import SinglesMenuGroup from './SinglesMenuGroup'
 import { singleItems, categorizedItems } from './selectableItems'
 import { itemTypeMap, getDefaultItemCount } from '../../modules/itemTypes'
+import useDebounce from '../../modules/useDebounce'
+import { getDashboardsQQuery } from '../../api/dashboardsQ'
 
 import classes from './styles/ItemSelector.module.css'
 
@@ -14,21 +16,17 @@ const ItemSelector = () => {
     const [filter, setFilter] = useState('')
     const [items, setItems] = useState(null)
     const [maxOptions, setMaxOptions] = useState(new Set())
-    const { d2 } = useD2({})
+    const dataEngine = useDataEngine()
+    const debouncedFilterText = useDebounce(filter, 200)
 
     useEffect(() => {
-        let queryString = '?count=11'
-        if ([...maxOptions.values()].length) {
-            queryString += '&max=' + [...maxOptions.values()].join('&max=')
-        }
-
-        const filterStr = filter ? `/${filter}` : ''
+        const query = getDashboardsQQuery(
+            debouncedFilterText,
+            Array.from(maxOptions)
+        )
 
-        d2.Api.getApi()
-            .get(`dashboards/q${filterStr}${queryString}`)
-            .then(response => setItems(response))
-            .catch(console.error)
-    }, [filter, maxOptions])
+        dataEngine.query({ items: query }).then(res => setItems(res.items))
+    }, [debouncedFilterText, maxOptions])
 
     const closeMenu = () => {
         setIsOpen(false)

src/components/ItemSelector/SinglesMenuGroup.js

@@ -6,7 +6,7 @@ import HeaderMenuItem from './HeaderMenuItem'
 import ContentMenuItem from './ContentMenuItem'
 import { acAddDashboardItem } from '../../actions/editDashboard'
 
-export const SinglesMenuGroup = ({ acAddDashboardItem, category }) => {
+const SinglesMenuGroup = ({ acAddDashboardItem, category }) => {
     const addToDashboard = ({ type, content }) => () => {
         acAddDashboardItem({ type, content })
     }

src/components/ItemSelector/__tests__/SinglesMenuGroup.spec.js

@@ -1,28 +1,35 @@
 import React from 'react'
-import { shallow } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import { SinglesMenuGroup } from '../SinglesMenuGroup'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
 
-describe('SinglesMenuGroup', () => {
-    const wrapper = props => shallow(<SinglesMenuGroup {...props} />)
+import SinglesMenuGroup from '../SinglesMenuGroup'
 
-    it('matches snapshot', () => {
-        const props = {
-            acAddDashboardItem: jest.fn(),
-            category: {
-                header: 'ponies',
-                items: [
-                    {
-                        type: 'colorful',
-                        name: 'Rainbow Dash',
-                    },
-                    {
-                        type: 'greytone',
-                        name: 'B&W',
-                    },
-                ],
-            },
-        }
-        expect(toJson(wrapper(props))).toMatchSnapshot()
-    })
+const mockStore = configureMockStore()
+
+test('renders SingleMenuGroup', () => {
+    const store = {}
+
+    const props = {
+        category: {
+            header: 'ponies',
+            items: [
+                {
+                    type: 'colorful',
+                    name: 'Rainbow Dash',
+                },
+                {
+                    type: 'greytone',
+                    name: 'Twilight',
+                },
+            ],
+        },
+    }
+
+    const { container } = render(
+        <Provider store={mockStore(store)}>
+            <SinglesMenuGroup {...props} />
+        </Provider>
+    )
+    expect(container).toMatchSnapshot()
 })

src/components/ItemSelector/__tests__/__snapshots__/SinglesMenuGroup.spec.js.snap

@@ -1,21 +1,114 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SinglesMenuGroup matches snapshot 1`] = `
-<Fragment>
-  <HeaderMenuItem
-    title="ponies"
-  />
-  <ContentMenuItem
-    key="colorful"
-    name="Rainbow Dash"
-    onInsert={[Function]}
-    type="colorful"
-  />
-  <ContentMenuItem
-    key="greytone"
-    name="B&W"
-    onInsert={[Function]}
-    type="greytone"
-  />
-</Fragment>
+exports[`renders SingleMenuGroup 1`] = `
+<div>
+  <li
+    class="jsx-665727467 item disabled dense"
+    data-test="dhis2-uicore-menuitem"
+  >
+    <a
+      class="jsx-665727467"
+    >
+      <span
+        class="jsx-665727467 label"
+      >
+        <span
+          style="color: rgb(64, 75, 90); font-weight: 600;"
+        >
+          ponies
+        </span>
+      </span>
+    </a>
+  </li>
+  <li
+    class="jsx-665727467 dense"
+    data-test="menu-item-Rainbow Dash"
+  >
+    <a
+      class="jsx-665727467"
+    >
+      <span
+        class="jsx-665727467 label"
+      >
+        <div
+          class="menuItem"
+        >
+          <div
+            class="label"
+          >
+            <span
+              style="margin-right: 6px;"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-1"
+                focusable="false"
+                role="presentation"
+                style="fill: #6e7a8a;"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"
+                />
+              </svg>
+            </span>
+            <span>
+              Rainbow Dash
+            </span>
+          </div>
+          <button
+            class="buttonInsert"
+          >
+            Insert
+          </button>
+        </div>
+      </span>
+    </a>
+  </li>
+  <li
+    class="jsx-665727467 dense"
+    data-test="menu-item-Twilight"
+  >
+    <a
+      class="jsx-665727467"
+    >
+      <span
+        class="jsx-665727467 label"
+      >
+        <div
+          class="menuItem"
+        >
+          <div
+            class="label"
+          >
+            <span
+              style="margin-right: 6px;"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-1"
+                focusable="false"
+                role="presentation"
+                style="fill: #6e7a8a;"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"
+                />
+              </svg>
+            </span>
+            <span>
+              Twilight
+            </span>
+          </div>
+          <button
+            class="buttonInsert"
+          >
+            Insert
+          </button>
+        </div>
+      </span>
+    </a>
+  </li>
+</div>
 `;

src/components/ItemSelector/selectableItems.js

@@ -4,7 +4,6 @@ import {
     MAP,
     EVENT_CHART,
     EVENT_REPORT,
-    USERS,
     REPORTS,
     RESOURCES,
     APP,
@@ -43,11 +42,10 @@ export const categorizedItems = [
     MAP,
     EVENT_REPORT,
     EVENT_CHART,
-    USERS,
     REPORTS,
     RESOURCES,
     APP,
 ]
 
 // listItemTypes are included in a single dashboard item
-export const listItemTypes = [REPORTS, RESOURCES, USERS]
+export const listItemTypes = [REPORTS, RESOURCES]

src/modules/useDebounce.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react'
+
+const useDebounce = (value, delay) => {
+    const [debouncedValue, setDebouncedValue] = useState(value)
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value)
+        }, delay)
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [value, delay])
+    return debouncedValue
+}
+
+export default useDebounce