refactor: replace material-ui popover with ui popover in Item menu an…

…d ItemSelector (#1304)

In addition to replacing material-ui with @dhis2/ui components, the following refactoring was done:
* switch to functional component with hooks
* put ItemSearchField into separate file

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-10-12T06:11:46.298Z\n"
-"PO-Revision-Date: 2020-10-12T06:11:46.298Z\n"
+"POT-Creation-Date: 2020-11-21T09:42:35.736Z\n"
+"PO-Revision-Date: 2020-11-21T09:42:35.736Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""

src/components/Item/VisualizationItem/ItemHeaderButtons.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, createRef } from 'react'
 import PropTypes from 'prop-types'
 
 import {
@@ -7,9 +7,15 @@ import {
     VIS_TYPE_GAUGE,
     VIS_TYPE_PIE,
 } from '@dhis2/analytics'
-import { Button, Menu, MenuItem, Divider, colors } from '@dhis2/ui'
+import {
+    Button,
+    FlyoutMenu,
+    Popover,
+    MenuItem,
+    Divider,
+    colors,
+} from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
-import Popover from '@material-ui/core/Popover'
 import TableIcon from '@material-ui/icons/ViewList'
 import ChartIcon from '@material-ui/icons/InsertChart'
 import MapIcon from '@material-ui/icons/Public'
@@ -31,39 +37,38 @@ import {
 const iconFill = { fill: colors.grey600 }
 
 const ItemHeaderButtons = (props, context) => {
-    const [anchorEl, setAnchorEl] = useState(null)
+    const [menuIsOpen, setMenuIsOpen] = useState(null)
 
     const { item, visualization, onSelectActiveType, activeType } = props
 
     const isTrackerType = isTrackerDomainType(item.type)
 
     const onViewTable = () => {
-        handleClose()
+        closeMenu()
         onSelectActiveType(isTrackerType ? EVENT_REPORT : REPORT_TABLE)
     }
 
     const onViewChart = () => {
-        handleClose()
+        closeMenu()
         onSelectActiveType(isTrackerType ? EVENT_CHART : CHART)
     }
 
     const onViewMap = () => {
-        handleClose()
+        closeMenu()
         onSelectActiveType(MAP)
     }
 
     const itemHasMapView = () => hasMapView(item.type)
 
-    const handleMenuClick = (_, event) => setAnchorEl(event.currentTarget)
-
     const handleInterpretationClick = () => {
         props.onToggleFooter()
-        if (anchorEl !== null) {
-            handleClose()
+        if (menuIsOpen) {
+            closeMenu()
         }
     }
 
-    const handleClose = () => setAnchorEl(null)
+    const openMenu = () => setMenuIsOpen(true)
+    const closeMenu = () => setMenuIsOpen(false)
 
     const type = visualization.type || item.type
     const canViewAs =
@@ -105,18 +110,23 @@ const ItemHeaderButtons = (props, context) => {
         </>
     )
 
+    const buttonRef = createRef()
+
     return pluginIsAvailable(activeType || item.type) ? (
         <>
-            <Button small secondary onClick={handleMenuClick}>
-                <ThreeDots />
-            </Button>
-            {anchorEl && (
+            <div ref={buttonRef}>
+                <Button small secondary onClick={openMenu}>
+                    <ThreeDots />
+                </Button>
+            </div>
+            {menuIsOpen && (
                 <Popover
-                    open={Boolean(anchorEl)}
-                    onClose={handleClose}
-                    anchorEl={anchorEl}
+                    reference={buttonRef}
+                    placement="auto-start"
+                    arrow={false}
+                    onClickOutside={closeMenu}
                 >
-                    <Menu>
+                    <FlyoutMenu>
                         {canViewAs && (
                             <>
                                 <ViewAsMenuItems />
@@ -138,7 +148,7 @@ const ItemHeaderButtons = (props, context) => {
                             label={interpretationMenuLabel}
                             onClick={handleInterpretationClick}
                         />
-                    </Menu>
+                    </FlyoutMenu>
                 </Popover>
             )}
         </>

src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap

@@ -2,14 +2,16 @@
 
 exports[`renders correctly 1`] = `
 <Fragment>
-  <Button
-    dataTest="dhis2-uicore-button"
-    onClick={[Function]}
-    secondary={true}
-    small={true}
-    type="button"
-  >
-    <ThreeDots />
-  </Button>
+  <div>
+    <Button
+      dataTest="dhis2-uicore-button"
+      onClick={[Function]}
+      secondary={true}
+      small={true}
+      type="button"
+    >
+      <ThreeDots />
+    </Button>
+  </div>
 </Fragment>
 `;

src/components/ItemSelector/HeaderMenuItem.js

@@ -2,8 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MenuItem, colors } from '@dhis2/ui'
 
+import classes from './styles/HeaderMenuItem.module.css'
+
 const HeaderMenuItem = ({ title }) => (
     <MenuItem
+        className={classes.item}
         dense
         key={title}
         disabled

src/components/ItemSelector/ItemSearchField.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import i18n from '@dhis2/d2-i18n'
+import { InputField } from '@dhis2/ui'
+
+const ItemSearchField = props => (
+    <InputField
+        name="Dashboard item search"
+        label={i18n.t('Search for items to add to this dashboard')}
+        type="text"
+        onChange={props.onChange}
+        onFocus={props.onFocus}
+        value={props.value}
+        dataTest="item-search"
+    />
+)
+
+ItemSearchField.propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+}
+
+export default ItemSearchField