From 993981bb9bfd9c843859dfdbca2e624697d08a50 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 26 Feb 2020 06:55:21 -0800
Subject: [PATCH] feat: condense item header options into a single menu (#568)

All options in the dashboard item, for a visualization, are now moved to a single button with a dropdown menu. This includes the "View as" options for switching between Map, Table, Chart, as well as show/hideing the interpretations and open the Vis in the corresponding app.

This commit also fixes wrapping issues when for the item title when the item is narrow.
---
 i18n/en.pot                                   |  36 +-
 package.json                                  |   2 +-
 src/components/App.js                         |  78 +--
 src/components/Item/AppItem/Item.js           |   2 +-
 src/components/Item/DeleteItemButton.js       |  24 +
 src/components/Item/ItemHeader.js             |  55 ++-
 src/components/Item/ItemHeaderButton.js       |  27 --
 src/components/Item/ListItem/Item.js          |   2 +-
 src/components/Item/MessagesItem/Item.js      |   6 +-
 src/components/Item/NotSupportedItem/Item.js  |   8 +-
 src/components/Item/SpacerItem/Item.js        |   9 +-
 src/components/Item/TextItem/Item.js          |   2 +-
 src/components/Item/VisualizationItem/Item.js |  78 +--
 .../VisualizationItem/ItemHeaderButtons.js    | 272 +++++------
 .../__tests__/ItemHeaderButtons.spec.js       |  12 +-
 .../__tests__/__snapshots__/Item.spec.js.snap | 126 +----
 .../ItemHeaderButtons.spec.js.snap            | 456 ++++++++++++------
 .../Item/VisualizationItem/assets/icons.js    |  31 ++
 .../Item/__tests__/ItemHeaderButton.spec.js   |  15 -
 .../ItemHeaderButton.spec.js.snap             |  88 ----
 .../DeleteItemButton.module.css}              |   4 +-
 .../Item/styles/ItemHeader.module.css         |  28 ++
 src/components/ItemGrid/DeleteItemButton.js   |  29 --
 src/components/ItemGrid/ItemGrid.css          |  20 -
 src/components/ItemGrid/ItemGrid.js           |   9 +-
 src/modules/itemTypes.js                      |  13 +-
 yarn.lock                                     |   9 +
 27 files changed, 714 insertions(+), 727 deletions(-)
 create mode 100644 src/components/Item/DeleteItemButton.js
 delete mode 100644 src/components/Item/ItemHeaderButton.js
 create mode 100644 src/components/Item/VisualizationItem/assets/icons.js
 delete mode 100644 src/components/Item/__tests__/ItemHeaderButton.spec.js
 delete mode 100644 src/components/Item/__tests__/__snapshots__/ItemHeaderButton.spec.js.snap
 rename src/components/Item/{ItemHeaderButton.css => styles/DeleteItemButton.module.css} (64%)
 create mode 100644 src/components/Item/styles/ItemHeader.module.css
 delete mode 100644 src/components/ItemGrid/DeleteItemButton.js

diff --git a/i18n/en.pot b/i18n/en.pot
index ab7b91dfb..a161cb591 100644
--- a/i18n/en.pot
+++ b/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-02-12T20:02:08.021Z\n"
-"PO-Revision-Date: 2020-02-12T20:02:08.021Z\n"
+"POT-Creation-Date: 2020-02-25T15:24:49.055Z\n"
+"PO-Revision-Date: 2020-02-25T15:24:49.055Z\n"
 
 msgid "Dashboard"
 msgstr ""
@@ -64,12 +64,18 @@ msgstr[1] ""
 msgid "Remove"
 msgstr ""
 
+msgid "Delete item"
+msgstr ""
+
 msgid "Messages"
 msgstr ""
 
 msgid "See all messages"
 msgstr ""
 
+msgid "Item type \"{{type}}\" not supported"
+msgstr ""
+
 msgid "Spacer"
 msgstr ""
 
@@ -88,6 +94,24 @@ msgstr ""
 msgid "No data to display"
 msgstr ""
 
+msgid "Hide interpretations and details"
+msgstr ""
+
+msgid "Show interpretations and details"
+msgstr ""
+
+msgid "View as Chart"
+msgstr ""
+
+msgid "View as Table"
+msgstr ""
+
+msgid "View as Map"
+msgstr ""
+
+msgid "Open in {{appName}} app"
+msgstr ""
+
 msgid "Confirm"
 msgstr ""
 
@@ -130,7 +154,7 @@ msgstr ""
 msgid "Visualizations"
 msgstr ""
 
-msgid "Visualizer"
+msgid "Pivot tables"
 msgstr ""
 
 msgid "Pivot tables"
@@ -145,15 +169,9 @@ msgstr ""
 msgid "Event reports"
 msgstr ""
 
-msgid "Event Reports"
-msgstr ""
-
 msgid "Event charts"
 msgstr ""
 
-msgid "Event Visualizer"
-msgstr ""
-
 msgid "Apps"
 msgstr ""
 
diff --git a/package.json b/package.json
index 91d5c8a10..6f75cca3b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@dhis2/d2-ui-translation-dialog": "^6.0.1",
         "@dhis2/data-visualizer-plugin": "^34.3.3",
         "@dhis2/prop-types": "^1.2.1",
-        "@dhis2/ui-core": "^4.9.1",
+        "@dhis2/ui-core": "^4.11.0",
         "@dhis2/ui-widgets": "^2.0.5",
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^3.0.2",
diff --git a/src/components/App.js b/src/components/App.js
index 509a8b9b7..46c53371d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
 import { HeaderBar } from '@dhis2/ui-widgets';
+import { CssVariables } from '@dhis2/ui-core';
 
 import { EDIT, VIEW, NEW } from './Dashboard/dashboardModes';
 import { acReceivedUser } from '../actions/user';
@@ -30,44 +31,47 @@ export class App extends Component {
 
     render() {
         return (
-            <div className="app-wrapper">
-                <div className="dashboard-header-bar">
-                    <HeaderBar appName={i18n.t('Dashboard')} />
+            <>
+                <CssVariables colors spacers />
+                <div className="app-wrapper">
+                    <div className="dashboard-header-bar">
+                        <HeaderBar appName={i18n.t('Dashboard')} />
+                    </div>
+                    <Router>
+                        <Switch>
+                            <Route
+                                exact
+                                path="/"
+                                render={props => (
+                                    <Dashboard {...props} mode={VIEW} />
+                                )}
+                            />
+                            <Route
+                                exact
+                                path="/new"
+                                render={props => (
+                                    <Dashboard {...props} mode={NEW} />
+                                )}
+                            />
+                            <Route
+                                exact
+                                path="/:dashboardId"
+                                render={props => (
+                                    <Dashboard {...props} mode={VIEW} />
+                                )}
+                            />
+                            <Route
+                                exact
+                                path="/:dashboardId/edit"
+                                render={props => (
+                                    <Dashboard {...props} mode={EDIT} />
+                                )}
+                            />
+                        </Switch>
+                    </Router>
+                    <SnackbarMessage />
                 </div>
-                <Router>
-                    <Switch>
-                        <Route
-                            exact
-                            path="/"
-                            render={props => (
-                                <Dashboard {...props} mode={VIEW} />
-                            )}
-                        />
-                        <Route
-                            exact
-                            path="/new"
-                            render={props => (
-                                <Dashboard {...props} mode={NEW} />
-                            )}
-                        />
-                        <Route
-                            exact
-                            path="/:dashboardId"
-                            render={props => (
-                                <Dashboard {...props} mode={VIEW} />
-                            )}
-                        />
-                        <Route
-                            exact
-                            path="/:dashboardId/edit"
-                            render={props => (
-                                <Dashboard {...props} mode={EDIT} />
-                            )}
-                        />
-                    </Switch>
-                </Router>
-                <SnackbarMessage />
-            </div>
+            </>
         );
     }
 }
diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index bfb10f9a3..b96538f48 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -39,7 +39,7 @@ const AppItem = ({ item, itemFilters }, context) => {
 
     return appDetails && appDetails.name && appDetails.launchUrl ? (
         <Fragment>
-            <ItemHeader title={appDetails.name} />
+            <ItemHeader title={appDetails.name} itemId={item.id} />
             <Line />
             <iframe
                 title={appDetails.name}
diff --git a/src/components/Item/DeleteItemButton.js b/src/components/Item/DeleteItemButton.js
new file mode 100644
index 000000000..1b5a86b5b
--- /dev/null
+++ b/src/components/Item/DeleteItemButton.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import i18n from '@dhis2/d2-i18n';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { colors } from '@dhis2/ui-core';
+
+import classes from './styles/DeleteItemButton.module.css';
+
+const DeleteItemButton = ({ onClick }) => (
+    <button
+        type="button"
+        className={classes.deleteItemButton}
+        onClick={onClick}
+        title={i18n.t(`Delete item`)}
+    >
+        <DeleteIcon style={{ fill: colors.red500 }} />
+    </button>
+);
+
+DeleteItemButton.propTypes = {
+    onClick: PropTypes.func,
+};
+
+export default DeleteItemButton;
diff --git a/src/components/Item/ItemHeader.js b/src/components/Item/ItemHeader.js
index 3e16374ef..a35a217ed 100644
--- a/src/components/Item/ItemHeader.js
+++ b/src/components/Item/ItemHeader.js
@@ -1,28 +1,59 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
-export const HEADER_HEIGHT = 45;
+import { sGetIsEditing } from '../../reducers/editDashboard';
+import { acRemoveDashboardItem } from '../../actions/editDashboard';
+import DeleteItemButton from './DeleteItemButton';
+
+import classes from './styles/ItemHeader.module.css';
 
 const ItemHeader = props => {
-    const { title, actionButtons, editMode } = props;
+    const {
+        title,
+        editMode,
+        actionButtons,
+        itemId,
+        acRemoveDashboardItem,
+    } = props;
+
+    const handleDeleteItem = () => acRemoveDashboardItem(itemId);
 
     return (
-        <div className="dashboard-item-header">
-            <div
-                className="dashboard-item-header-title"
-                style={{ userSelect: editMode ? 'none' : 'text' }}
-            >
-                {title}
-            </div>
-            {actionButtons}
+        <div className={classes.itemHeaderWrap}>
+            <p className={classes.itemTitle}>{title}</p>
+            {editMode ? (
+                <div className={classes.itemActionsWrap}>
+                    <DeleteItemButton onClick={handleDeleteItem} />
+                </div>
+            ) : (
+                actionButtons && (
+                    <div className={classes.itemActionsWrap}>
+                        {actionButtons}
+                    </div>
+                )
+            )}
         </div>
     );
 };
 
 ItemHeader.propTypes = {
+    acRemoveDashboardItem: PropTypes.func,
     actionButtons: PropTypes.node,
     editMode: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+    itemId: PropTypes.string,
+    title: PropTypes.string,
+};
+
+const mapStateToProps = state => ({
+    editMode: sGetIsEditing(state),
+});
+
+const mapDispatchToProps = {
+    acRemoveDashboardItem,
 };
 
-export default ItemHeader;
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(ItemHeader);
diff --git a/src/components/Item/ItemHeaderButton.js b/src/components/Item/ItemHeaderButton.js
deleted file mode 100644
index 4bbae6090..000000000
--- a/src/components/Item/ItemHeaderButton.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './ItemHeaderButton.css';
-
-const ItemHeaderButton = ({ disabled, onClick, children, style }) => {
-    return (
-        <button
-            disabled={disabled}
-            type="button"
-            className="item-action-button"
-            style={style}
-            onClick={onClick}
-        >
-            {children}
-        </button>
-    );
-};
-
-ItemHeaderButton.propTypes = {
-    children: PropTypes.node,
-    disabled: PropTypes.bool,
-    style: PropTypes.object,
-    onClick: PropTypes.func,
-};
-
-export default ItemHeaderButton;
diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.js
index e8c98b0e8..6f09030fe 100644
--- a/src/components/Item/ListItem/Item.js
+++ b/src/components/Item/ListItem/Item.js
@@ -50,7 +50,7 @@ const ListItem = (props, context) => {
 
     return (
         <Fragment>
-            <ItemHeader title={getItemTitle(item)} />
+            <ItemHeader title={getItemTitle(item)} itemId={item.id} />
             <Line />
             <div className="dashboard-item-content">
                 <ul className={classes.list}>
diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.js
index e539335cc..cc5fa8f92 100644
--- a/src/components/Item/MessagesItem/Item.js
+++ b/src/components/Item/MessagesItem/Item.js
@@ -108,7 +108,10 @@ class MessagesItem extends Component {
     render() {
         return (
             <Fragment>
-                <ItemHeader title={i18n.t('Messages')} />
+                <ItemHeader
+                    title={i18n.t('Messages')}
+                    itemId={this.props.item.id}
+                />
                 <Line />
                 {this.props.messages.length > 0 && (
                     <div className="dashboard-item-content">
@@ -127,6 +130,7 @@ class MessagesItem extends Component {
 
 MessagesItem.propTypes = {
     editMode: PropTypes.bool,
+    item: PropTypes.object,
     messages: PropTypes.array,
 };
 
diff --git a/src/components/Item/NotSupportedItem/Item.js b/src/components/Item/NotSupportedItem/Item.js
index b5c1d1564..561773401 100644
--- a/src/components/Item/NotSupportedItem/Item.js
+++ b/src/components/Item/NotSupportedItem/Item.js
@@ -1,11 +1,17 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import i18n from '@dhis2/d2-i18n';
 import ItemHeader from '../ItemHeader';
 import NotInterestedIcon from '@material-ui/icons/NotInterested';
 
 const NotSupportedItem = props => (
     <Fragment>
-        <ItemHeader title={`Item type not supported: ${props.item.type}`} />
+        <ItemHeader
+            title={i18n.t('Item type "{{type}}" not supported', {
+                type: props.item.type,
+            })}
+            itemId={props.item.id}
+        />
         <div
             style={{
                 display: 'flex',
diff --git a/src/components/Item/SpacerItem/Item.js b/src/components/Item/SpacerItem/Item.js
index 2b4930719..0e790c7df 100644
--- a/src/components/Item/SpacerItem/Item.js
+++ b/src/components/Item/SpacerItem/Item.js
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 import i18n from '@dhis2/d2-i18n';
 
 import { colors } from '@dhis2/ui-core';
@@ -11,10 +12,10 @@ const style = {
     color: colors.grey600,
 };
 
-const SpacerItem = () => {
+const SpacerItem = props => {
     return (
         <Fragment>
-            <ItemHeader title={i18n.t('Spacer')} />
+            <ItemHeader title={i18n.t('Spacer')} itemId={props.item.id} />
             <p style={style}>
                 {i18n.t(
                     'Use a spacer to create empty vertical space between other dashboard items.'
@@ -24,4 +25,8 @@ const SpacerItem = () => {
     );
 };
 
+SpacerItem.propTypes = {
+    item: PropTypes.object,
+};
+
 export default SpacerItem;
diff --git a/src/components/Item/TextItem/Item.js b/src/components/Item/TextItem/Item.js
index 62c2adf4b..ffbd6e153 100644
--- a/src/components/Item/TextItem/Item.js
+++ b/src/components/Item/TextItem/Item.js
@@ -59,7 +59,7 @@ const TextItem = props => {
     const editItem = () => {
         return (
             <Fragment>
-                <ItemHeader title={i18n.t('Text item')} />
+                <ItemHeader title={i18n.t('Text item')} itemId={item.id} />
                 <Line />
                 <div className="dashboard-item-content">
                     <RichTextEditor onEdit={onChangeText}>
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 90fa8cee8..0ebef2297 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -1,17 +1,16 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
-import LaunchIcon from '@material-ui/icons/Launch';
 import VisualizationPlugin from '@dhis2/data-visualizer-plugin';
 
 import i18n from '@dhis2/d2-i18n';
 import uniqueId from 'lodash/uniqueId';
 
 import DefaultPlugin from './DefaultPlugin';
-import ItemHeader, { HEADER_HEIGHT } from '../ItemHeader';
+import ItemHeader from '../ItemHeader';
+import ItemHeaderButtons from './ItemHeaderButtons';
 import ItemFooter from './ItemFooter';
-import VisualizationItemHeaderButtons from './ItemHeaderButtons';
 import * as pluginManager from './plugin';
 import { sGetVisualization } from '../../../reducers/visualizations';
 import { sGetItemFiltersRoot } from '../../../reducers/itemFilters';
@@ -19,18 +18,14 @@ import {
     acAddVisualization,
     acSetActiveVisualizationType,
 } from '../../../actions/visualizations';
-import {
-    VISUALIZATION,
-    MAP,
-    CHART,
-    REPORT_TABLE,
-    itemTypeMap,
-} from '../../../modules/itemTypes';
+import { VISUALIZATION, MAP, CHART, REPORT_TABLE } from '../../../modules/itemTypes';
 
 import { colors } from '@dhis2/ui-core';
 import memoizeOne from '../../../modules/memoizeOne';
 import { getVisualizationConfig } from './plugin';
 
+const HEADER_HEIGHT = 45;
+
 const styles = {
     icon: {
         width: 16,
@@ -229,45 +224,6 @@ export class Item extends Component {
             this.props.visualization
         );
 
-    getTitle = () => {
-        const { item, editMode, classes } = this.props;
-        const itemName = pluginManager.getName(item);
-
-        return (
-            <div style={{ display: 'flex' }}>
-                <span className={classes.title} title={itemName}>
-                    {itemName}
-                </span>
-                {!editMode && this.pluginIsAvailable() ? (
-                    <a
-                        href={pluginManager.getLink(this.props.item, this.d2)}
-                        style={{ height: 16 }}
-                        title={`View in ${
-                            itemTypeMap[this.props.item.type].appName
-                        } app`}
-                    >
-                        <LaunchIcon className={classes.icon} />
-                    </a>
-                ) : null}
-            </div>
-        );
-    };
-
-    getActionButtons = () =>
-        pluginManager.pluginIsAvailable(
-            this.props.item,
-            this.props.visualization
-        ) && !this.props.editMode ? (
-            <VisualizationItemHeaderButtons
-                item={this.props.item}
-                visualization={this.props.visualization}
-                activeFooter={this.state.showFooter}
-                activeType={this.getActiveType()}
-                onSelectActiveType={this.onSelectActiveType}
-                onToggleFooter={this.onToggleFooter}
-            />
-        ) : null;
-
     getContentStyle = () => {
         const { item, editMode } = this.props;
         const PADDING_BOTTOM = 4;
@@ -283,12 +239,24 @@ export class Item extends Component {
         const { item, editMode, itemFilters } = this.props;
         const { showFooter } = this.state;
 
+        const actionButtons = (
+            <ItemHeaderButtons
+                item={item}
+                visualization={this.props.visualization}
+                onSelectActiveType={this.onSelectActiveType}
+                onToggleFooter={this.onToggleFooter}
+                d2={this.d2}
+                activeType={this.getActiveType()}
+                activeFooter={this.state.showFooter}
+            />
+        );
+
         return (
-            <Fragment>
+            <>
                 <ItemHeader
-                    title={this.getTitle()}
-                    actionButtons={this.getActionButtons()}
-                    editMode={editMode}
+                    title={pluginManager.getName(item)}
+                    itemId={item.id}
+                    actionButtons={actionButtons}
                 />
                 <div
                     key={this.getUniqueKey(itemFilters)}
@@ -298,7 +266,7 @@ export class Item extends Component {
                     {this.state.configLoaded && this.getPluginComponent()}
                 </div>
                 {!editMode && showFooter ? <ItemFooter item={item} /> : null}
-            </Fragment>
+            </>
         );
     }
 }
diff --git a/src/components/Item/VisualizationItem/ItemHeaderButtons.js b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
index 18dd6e1f1..b9985fa2a 100644
--- a/src/components/Item/VisualizationItem/ItemHeaderButtons.js
+++ b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
@@ -1,12 +1,17 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import MessageIcon from '@material-ui/icons/Message';
+
+import { isSingleValue, isYearOverYear } from '@dhis2/analytics';
+import { Button, Menu, MenuItem, Divider, colors } from '@dhis2/ui-core';
+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';
+import LaunchIcon from '@material-ui/icons/Launch';
 
-import { extractFavorite } from './plugin';
-import ItemHeaderButton from '../ItemHeaderButton';
+import { ThreeDots, SpeechBubble } from './assets/icons';
+import { pluginIsAvailable, getLink } from './plugin';
 import {
     CHART,
     MAP,
@@ -15,178 +20,127 @@ import {
     EVENT_REPORT,
     isTrackerDomainType,
     hasMapView,
+    getAppName,
 } from '../../../modules/itemTypes';
-import { colors, theme } from '@dhis2/ui-core';
-import { isSingleValue } from '@dhis2/analytics';
-
-const style = {
-    iconBase: {
-        width: '24px',
-        height: '24px',
-        fill: colors.grey500,
-    },
-    buttonBase: {
-        padding: '5px 6px 3px 6px',
-    },
-    buttonDisabled: {
-        padding: '5px 6px 3px 6px',
-        opacity: 0.5,
-        cursor: 'unset',
-    },
-    toggleFooterPadding: {
-        padding: '7px 6px 1px 6px',
-    },
-    border: {
-        borderRadius: '2px',
-        border: `1px solid ${colors.grey200}`,
-    },
-};
 
-const baseStyle = {
-    icon: style.iconBase,
-    container: style.buttonBase,
-};
+const iconFill = { fill: colors.grey600 };
 
-const disabledStyle = {
-    icon: style.iconBase,
-    container: style.buttonDisabled,
-};
+const ItemHeaderButtons = props => {
+    const [anchorEl, setAnchorEl] = useState(null);
 
-const activeStyle = {
-    icon: { ...style.iconBase, fill: theme.primary800 },
-    container: {
-        ...style.buttonBase,
-        backgroundColor: theme.primary100,
-    },
-};
+    const { item, visualization, onSelectActiveType, d2, activeType } = props;
 
-const inactiveStyle = disabled => (disabled ? disabledStyle : baseStyle);
-
-const tableBtnStyle = (activeType, disabled) =>
-    [REPORT_TABLE, EVENT_REPORT].includes(activeType)
-        ? activeStyle
-        : inactiveStyle(disabled);
-
-const chartBtnStyle = (activeType, disabled) =>
-    [CHART, EVENT_CHART].includes(activeType)
-        ? activeStyle
-        : inactiveStyle(disabled);
-
-const mapBtnStyle = (activeType, disabled) =>
-    [MAP].includes(activeType) ? activeStyle : inactiveStyle(disabled);
-
-class VisualizationItemHeaderButtons extends Component {
-    renderInterpretationButton() {
-        const { activeFooter, onToggleFooter } = this.props;
-
-        const toggleFooterBase = activeFooter ? activeStyle : baseStyle;
-
-        const toggleFooter = {
-            ...toggleFooterBase,
-            container: {
-                ...toggleFooterBase.container,
-                ...style.toggleFooterPadding,
-                ...style.border,
-            },
-        };
-
-        return (
-            <Fragment>
-                <ItemHeaderButton
-                    style={toggleFooter.container}
-                    onClick={onToggleFooter}
-                >
-                    <MessageIcon style={toggleFooter.icon} />
-                </ItemHeaderButton>
-            </Fragment>
-        );
-    }
-
-    renderVisualizationButtons() {
-        const {
-            item,
-            visualization,
-            onSelectActiveType,
-            activeType,
-        } = this.props;
-
-        if (isSingleValue(visualization.type)) {
-            return null;
-        }
+    const isTrackerType = isTrackerDomainType(item.type);
 
-        const onViewTable = () =>
-            onSelectActiveType(
-                isTrackerDomainType(item.type) ? EVENT_REPORT : REPORT_TABLE
-            );
+    const onViewTable = () => {
+        onSelectActiveType(isTrackerType ? EVENT_REPORT : REPORT_TABLE);
+        handleClose();
+    };
 
-        const onViewChart = () =>
-            onSelectActiveType(
-                isTrackerDomainType(item.type) ? EVENT_CHART : CHART
-            );
+    const onViewChart = () => {
+        onSelectActiveType(isTrackerType ? EVENT_CHART : CHART);
+        handleClose();
+    };
 
-        const onViewMap = () => onSelectActiveType(MAP);
+    const onViewMap = () => {
+        onSelectActiveType(MAP);
+        handleClose();
+    };
 
-        // disable toggle buttons
-        let disabled = false;
+    const itemHasMapView = () => hasMapView(item.type);
 
-        if (item.type === CHART) {
-            if (extractFavorite(item).type.match(/^YEAR_OVER_YEAR/)) {
-                disabled = true;
-            }
+    const handleMenuClick = (_, event) => setAnchorEl(event.currentTarget);
+
+    const handleInterpretationClick = () => {
+        props.onToggleFooter();
+        if (anchorEl !== null) {
+            handleClose();
         }
+    };
+
+    const handleClose = () => setAnchorEl(null);
+
+    const type = visualization.type || item.type;
+    const canViewAs = !isSingleValue(type) && !isYearOverYear(type);
+
+    const interpretationMenuLabel = props.activeFooter
+        ? i18n.t(`Hide interpretations and details`)
+        : i18n.t(`Show interpretations and details`);
+
+    const ViewAsMenuItems = () => (
+        <>
+            <MenuItem
+                dense
+                active={activeType === CHART}
+                label={i18n.t('View as Chart')}
+                onClick={onViewChart}
+                icon={<ChartIcon style={iconFill} />}
+            />
+            <MenuItem
+                dense
+                active={[REPORT_TABLE, EVENT_REPORT].includes(activeType)}
+                label={i18n.t('View as Table')}
+                onClick={onViewTable}
+                icon={<TableIcon style={iconFill} />}
+            />
+            {itemHasMapView() && (
+                <MenuItem
+                    dense
+                    active={activeType === MAP}
+                    label={i18n.t('View as Map')}
+                    onClick={onViewMap}
+                    icon={<MapIcon style={iconFill} />}
+                />
+            )}
+        </>
+    );
+
+    return pluginIsAvailable(item, visualization) ? (
+        <>
+            <Button small secondary onClick={handleMenuClick}>
+                <ThreeDots />
+            </Button>
+            <Popover
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorEl={anchorEl}
+            >
+                <Menu>
+                    {canViewAs && (
+                        <>
+                            <ViewAsMenuItems />
+                            <Divider />
+                        </>
+                    )}
+                    <MenuItem
+                        dense
+                        icon={<LaunchIcon style={{ fill: '#6e7a8a' }} />}
+                        label={i18n.t('Open in {{appName}} app', {
+                            appName: getAppName(item.type),
+                        })}
+                        href={getLink(item, d2)}
+                        target="_blank"
+                    />
+                    <MenuItem
+                        dense
+                        icon={<SpeechBubble />}
+                        label={interpretationMenuLabel}
+                        onClick={handleInterpretationClick}
+                    />
+                </Menu>
+            </Popover>
+        </>
+    ) : null;
+};
 
-        const tableButtonStyle = tableBtnStyle(activeType, disabled);
-        const chartButtonStyle = chartBtnStyle(activeType, disabled);
-        const mapButtonStyle = mapBtnStyle(activeType, disabled);
-
-        return (
-            <div style={{ marginLeft: 10 }}>
-                <div style={style.border}>
-                    <ItemHeaderButton
-                        disabled={disabled}
-                        style={tableButtonStyle.container}
-                        onClick={onViewTable}
-                    >
-                        <TableIcon style={tableButtonStyle.icon} />
-                    </ItemHeaderButton>
-                    <ItemHeaderButton
-                        disabled={disabled}
-                        style={chartButtonStyle.container}
-                        onClick={onViewChart}
-                    >
-                        <ChartIcon style={chartButtonStyle.icon} />
-                    </ItemHeaderButton>
-                    {hasMapView(item.type) ? (
-                        <ItemHeaderButton
-                            disabled={disabled}
-                            style={mapButtonStyle.container}
-                            onClick={onViewMap}
-                        >
-                            <MapIcon style={mapButtonStyle.icon} />
-                        </ItemHeaderButton>
-                    ) : null}
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <Fragment>
-                {this.renderInterpretationButton()}
-                {this.renderVisualizationButtons()}
-            </Fragment>
-        );
-    }
-}
-
-VisualizationItemHeaderButtons.propTypes = {
+ItemHeaderButtons.propTypes = {
     activeFooter: PropTypes.bool,
     activeType: PropTypes.string,
+    d2: PropTypes.object,
     item: PropTypes.object,
     visualization: PropTypes.object,
     onSelectActiveType: PropTypes.func,
     onToggleFooter: PropTypes.func,
 };
 
-export default VisualizationItemHeaderButtons;
+export default ItemHeaderButtons;
diff --git a/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js b/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
index a50f441c4..c35246065 100644
--- a/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
+++ b/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
@@ -2,6 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import ItemHeaderButtons from '../ItemHeaderButtons';
 
+jest.mock('../plugin', () => ({
+    getLink: () => 'http://rainbowdash',
+    pluginIsAvailable: () => true,
+}));
+
 it('renders correctly', () => {
     const buttons = shallow(
         <ItemHeaderButtons
@@ -12,13 +17,12 @@ it('renders correctly', () => {
             visualization={{
                 type: 'SINGLE_VALUE',
             }}
-            onSelectVisualization={Function.prototype}
+            onSelectActiveType={Function.prototype}
             activeFooter={false}
             activeType={'CHART'}
+            d2={{}}
             onToggleFooter={Function.prototype}
-        >
-            My Little Pony
-        </ItemHeaderButtons>
+        />
     );
     expect(buttons).toMatchSnapshot();
 });
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
index 19ca5b773..61baa92b9 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -53,11 +53,12 @@ ShallowWrapper {
     "nodeType": "function",
     "props": Object {
       "children": Array [
-        <ItemHeader
+        <Connect(ItemHeader)
           actionButtons={
-            <VisualizationItemHeaderButtons
+            <ItemHeaderButtons
               activeFooter={false}
               activeType="EVENT_CHART"
+              d2={Object {}}
               item={
                 Object {
                   "eventChart": Object {
@@ -81,32 +82,7 @@ ShallowWrapper {
               }
             />
           }
-          editMode={false}
-          title={
-            <div
-              style={
-                Object {
-                  "display": "flex",
-                }
-              }
-            >
-              <span
-                title="rainbow"
-              >
-                rainbow
-              </span>
-              <a
-                style={
-                  Object {
-                    "height": 16,
-                  }
-                }
-                title="View in Event Visualizer app"
-              >
-                <pure(LaunchIcon) />
-              </a>
-            </div>
-          }
+          title="rainbow"
         />,
         <div
           className="dashboard-item-content"
@@ -119,11 +95,12 @@ ShallowWrapper {
       Object {
         "instance": null,
         "key": undefined,
-        "nodeType": "function",
+        "nodeType": "class",
         "props": Object {
-          "actionButtons": <VisualizationItemHeaderButtons
+          "actionButtons": <ItemHeaderButtons
             activeFooter={false}
             activeType="EVENT_CHART"
+            d2={Object {}}
             item={
               Object {
                 "eventChart": Object {
@@ -146,30 +123,8 @@ ShallowWrapper {
               }
             }
           />,
-          "editMode": false,
-          "title": <div
-            style={
-              Object {
-                "display": "flex",
-              }
-            }
-          >
-            <span
-              title="rainbow"
-            >
-              rainbow
-            </span>
-            <a
-              style={
-                Object {
-                  "height": 16,
-                }
-              }
-              title="View in Event Visualizer app"
-            >
-              <pure(LaunchIcon) />
-            </a>
-          </div>,
+          "itemId": undefined,
+          "title": "rainbow",
         },
         "ref": null,
         "rendered": null,
@@ -198,11 +153,12 @@ ShallowWrapper {
       "nodeType": "function",
       "props": Object {
         "children": Array [
-          <ItemHeader
+          <Connect(ItemHeader)
             actionButtons={
-              <VisualizationItemHeaderButtons
+              <ItemHeaderButtons
                 activeFooter={false}
                 activeType="EVENT_CHART"
+                d2={Object {}}
                 item={
                   Object {
                     "eventChart": Object {
@@ -226,32 +182,7 @@ ShallowWrapper {
                 }
               />
             }
-            editMode={false}
-            title={
-              <div
-                style={
-                  Object {
-                    "display": "flex",
-                  }
-                }
-              >
-                <span
-                  title="rainbow"
-                >
-                  rainbow
-                </span>
-                <a
-                  style={
-                    Object {
-                      "height": 16,
-                    }
-                  }
-                  title="View in Event Visualizer app"
-                >
-                  <pure(LaunchIcon) />
-                </a>
-              </div>
-            }
+            title="rainbow"
           />,
           <div
             className="dashboard-item-content"
@@ -264,11 +195,12 @@ ShallowWrapper {
         Object {
           "instance": null,
           "key": undefined,
-          "nodeType": "function",
+          "nodeType": "class",
           "props": Object {
-            "actionButtons": <VisualizationItemHeaderButtons
+            "actionButtons": <ItemHeaderButtons
               activeFooter={false}
               activeType="EVENT_CHART"
+              d2={Object {}}
               item={
                 Object {
                   "eventChart": Object {
@@ -291,30 +223,8 @@ ShallowWrapper {
                 }
               }
             />,
-            "editMode": false,
-            "title": <div
-              style={
-                Object {
-                  "display": "flex",
-                }
-              }
-            >
-              <span
-                title="rainbow"
-              >
-                rainbow
-              </span>
-              <a
-                style={
-                  Object {
-                    "height": 16,
-                  }
-                }
-                title="View in Event Visualizer app"
-              >
-                <pure(LaunchIcon) />
-              </a>
-            </div>,
+            "itemId": undefined,
+            "title": "rainbow",
           },
           "ref": null,
           "rendered": null,
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
index d9daba150..b50c0216c 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
@@ -3,9 +3,10 @@
 exports[`renders correctly 1`] = `
 ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <VisualizationItemHeaderButtons
+  Symbol(enzyme.__unrendered__): <ItemHeaderButtons
     activeFooter={false}
     activeType="CHART"
+    d2={Object {}}
     item={
       Object {
         "chart": Object {
@@ -15,16 +16,14 @@ ShallowWrapper {
         "type": "CHART",
       }
     }
-    onSelectVisualization={[Function]}
+    onSelectActiveType={[Function]}
     onToggleFooter={[Function]}
     visualization={
       Object {
         "type": "SINGLE_VALUE",
       }
     }
-  >
-    My Little Pony
-  </VisualizationItemHeaderButtons>,
+  />,
   Symbol(enzyme.__renderer__): Object {
     "batchedUpdates": [Function],
     "checkPropTypes": [Function],
@@ -40,29 +39,48 @@ ShallowWrapper {
     "nodeType": "function",
     "props": Object {
       "children": Array [
-        <React.Fragment>
-          <ItemHeaderButton
-            onClick={[Function]}
-            style={
-              Object {
-                "border": "1px solid #f3f5f7",
-                "borderRadius": "2px",
-                "padding": "7px 6px 1px 6px",
-              }
-            }
+        <Button
+          dataTest="dhis2-uicore-button"
+          onClick={[Function]}
+          secondary={true}
+          small={true}
+          type="button"
+        >
+          <ThreeDots />
+        </Button>,
+        <WithStyles(Popover)
+          anchorEl={null}
+          onClose={[Function]}
+          open={false}
+        >
+          <Menu
+            dataTest="dhis2-uicore-menu"
           >
-            <pure(MessageIcon)
-              style={
-                Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
-                }
+            <MenuItem
+              dataTest="dhis2-uicore-menuitem"
+              dense={true}
+              href="http://rainbowdash"
+              icon={
+                <pure(LaunchIcon)
+                  style={
+                    Object {
+                      "fill": "#6e7a8a",
+                    }
+                  }
+                />
               }
+              label="Open in Data Visualizer app"
+              target="_blank"
+            />
+            <MenuItem
+              dataTest="dhis2-uicore-menuitem"
+              dense={true}
+              icon={<SpeechBubble />}
+              label="Show interpretations and details"
+              onClick={[Function]}
             />
-          </ItemHeaderButton>
-        </React.Fragment>,
-        null,
+          </Menu>
+        </WithStyles(Popover)>,
       ],
     },
     "ref": null,
@@ -70,28 +88,62 @@ ShallowWrapper {
       Object {
         "instance": null,
         "key": undefined,
-        "nodeType": "function",
+        "nodeType": "class",
         "props": Object {
-          "children": <ItemHeaderButton
-            onClick={[Function]}
-            style={
-              Object {
-                "border": "1px solid #f3f5f7",
-                "borderRadius": "2px",
-                "padding": "7px 6px 1px 6px",
-              }
-            }
+          "children": <ThreeDots />,
+          "dataTest": "dhis2-uicore-button",
+          "onClick": [Function],
+          "secondary": true,
+          "small": true,
+          "type": "button",
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {},
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        "type": [Function],
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "anchorEl": null,
+          "children": <Menu
+            dataTest="dhis2-uicore-menu"
           >
-            <pure(MessageIcon)
-              style={
-                Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
-                }
+            <MenuItem
+              dataTest="dhis2-uicore-menuitem"
+              dense={true}
+              href="http://rainbowdash"
+              icon={
+                <pure(LaunchIcon)
+                  style={
+                    Object {
+                      "fill": "#6e7a8a",
+                    }
+                  }
+                />
               }
+              label="Open in Data Visualizer app"
+              target="_blank"
             />
-          </ItemHeaderButton>,
+            <MenuItem
+              dataTest="dhis2-uicore-menuitem"
+              dense={true}
+              icon={<SpeechBubble />}
+              label="Show interpretations and details"
+              onClick={[Function]}
+            />
+          </Menu>,
+          "onClose": [Function],
+          "open": false,
         },
         "ref": null,
         "rendered": Object {
@@ -99,43 +151,79 @@ ShallowWrapper {
           "key": undefined,
           "nodeType": "function",
           "props": Object {
-            "children": <pure(MessageIcon)
-              style={
-                Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
+            "children": Array [
+              false,
+              <MenuItem
+                dataTest="dhis2-uicore-menuitem"
+                dense={true}
+                href="http://rainbowdash"
+                icon={
+                  <pure(LaunchIcon)
+                    style={
+                      Object {
+                        "fill": "#6e7a8a",
+                      }
+                    }
+                  />
                 }
-              }
-            />,
-            "onClick": [Function],
-            "style": Object {
-              "border": "1px solid #f3f5f7",
-              "borderRadius": "2px",
-              "padding": "7px 6px 1px 6px",
-            },
+                label="Open in Data Visualizer app"
+                target="_blank"
+              />,
+              <MenuItem
+                dataTest="dhis2-uicore-menuitem"
+                dense={true}
+                icon={<SpeechBubble />}
+                label="Show interpretations and details"
+                onClick={[Function]}
+              />,
+            ],
+            "dataTest": "dhis2-uicore-menu",
           },
           "ref": null,
-          "rendered": Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "class",
-            "props": Object {
-              "style": Object {
-                "fill": "#a0adba",
-                "height": "24px",
-                "width": "24px",
+          "rendered": Array [
+            false,
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "function",
+              "props": Object {
+                "dataTest": "dhis2-uicore-menuitem",
+                "dense": true,
+                "href": "http://rainbowdash",
+                "icon": <pure(LaunchIcon)
+                  style={
+                    Object {
+                      "fill": "#6e7a8a",
+                    }
+                  }
+                />,
+                "label": "Open in Data Visualizer app",
+                "target": "_blank",
               },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
             },
-            "ref": null,
-            "rendered": null,
-            "type": [Function],
-          },
+            Object {
+              "instance": null,
+              "key": undefined,
+              "nodeType": "function",
+              "props": Object {
+                "dataTest": "dhis2-uicore-menuitem",
+                "dense": true,
+                "icon": <SpeechBubble />,
+                "label": "Show interpretations and details",
+                "onClick": [Function],
+              },
+              "ref": null,
+              "rendered": null,
+              "type": [Function],
+            },
+          ],
           "type": [Function],
         },
-        "type": Symbol(react.fragment),
+        "type": [Function],
       },
-      null,
     ],
     "type": Symbol(react.fragment),
   },
@@ -146,29 +234,48 @@ ShallowWrapper {
       "nodeType": "function",
       "props": Object {
         "children": Array [
-          <React.Fragment>
-            <ItemHeaderButton
-              onClick={[Function]}
-              style={
-                Object {
-                  "border": "1px solid #f3f5f7",
-                  "borderRadius": "2px",
-                  "padding": "7px 6px 1px 6px",
-                }
-              }
+          <Button
+            dataTest="dhis2-uicore-button"
+            onClick={[Function]}
+            secondary={true}
+            small={true}
+            type="button"
+          >
+            <ThreeDots />
+          </Button>,
+          <WithStyles(Popover)
+            anchorEl={null}
+            onClose={[Function]}
+            open={false}
+          >
+            <Menu
+              dataTest="dhis2-uicore-menu"
             >
-              <pure(MessageIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
+              <MenuItem
+                dataTest="dhis2-uicore-menuitem"
+                dense={true}
+                href="http://rainbowdash"
+                icon={
+                  <pure(LaunchIcon)
+                    style={
+                      Object {
+                        "fill": "#6e7a8a",
+                      }
+                    }
+                  />
                 }
+                label="Open in Data Visualizer app"
+                target="_blank"
+              />
+              <MenuItem
+                dataTest="dhis2-uicore-menuitem"
+                dense={true}
+                icon={<SpeechBubble />}
+                label="Show interpretations and details"
+                onClick={[Function]}
               />
-            </ItemHeaderButton>
-          </React.Fragment>,
-          null,
+            </Menu>
+          </WithStyles(Popover)>,
         ],
       },
       "ref": null,
@@ -176,28 +283,62 @@ ShallowWrapper {
         Object {
           "instance": null,
           "key": undefined,
-          "nodeType": "function",
+          "nodeType": "class",
           "props": Object {
-            "children": <ItemHeaderButton
-              onClick={[Function]}
-              style={
-                Object {
-                  "border": "1px solid #f3f5f7",
-                  "borderRadius": "2px",
-                  "padding": "7px 6px 1px 6px",
-                }
-              }
+            "children": <ThreeDots />,
+            "dataTest": "dhis2-uicore-button",
+            "onClick": [Function],
+            "secondary": true,
+            "small": true,
+            "type": "button",
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "function",
+            "props": Object {},
+            "ref": null,
+            "rendered": null,
+            "type": [Function],
+          },
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "anchorEl": null,
+            "children": <Menu
+              dataTest="dhis2-uicore-menu"
             >
-              <pure(MessageIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
+              <MenuItem
+                dataTest="dhis2-uicore-menuitem"
+                dense={true}
+                href="http://rainbowdash"
+                icon={
+                  <pure(LaunchIcon)
+                    style={
+                      Object {
+                        "fill": "#6e7a8a",
+                      }
+                    }
+                  />
                 }
+                label="Open in Data Visualizer app"
+                target="_blank"
+              />
+              <MenuItem
+                dataTest="dhis2-uicore-menuitem"
+                dense={true}
+                icon={<SpeechBubble />}
+                label="Show interpretations and details"
+                onClick={[Function]}
               />
-            </ItemHeaderButton>,
+            </Menu>,
+            "onClose": [Function],
+            "open": false,
           },
           "ref": null,
           "rendered": Object {
@@ -205,43 +346,79 @@ ShallowWrapper {
             "key": undefined,
             "nodeType": "function",
             "props": Object {
-              "children": <pure(MessageIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
+              "children": Array [
+                false,
+                <MenuItem
+                  dataTest="dhis2-uicore-menuitem"
+                  dense={true}
+                  href="http://rainbowdash"
+                  icon={
+                    <pure(LaunchIcon)
+                      style={
+                        Object {
+                          "fill": "#6e7a8a",
+                        }
+                      }
+                    />
                   }
-                }
-              />,
-              "onClick": [Function],
-              "style": Object {
-                "border": "1px solid #f3f5f7",
-                "borderRadius": "2px",
-                "padding": "7px 6px 1px 6px",
-              },
+                  label="Open in Data Visualizer app"
+                  target="_blank"
+                />,
+                <MenuItem
+                  dataTest="dhis2-uicore-menuitem"
+                  dense={true}
+                  icon={<SpeechBubble />}
+                  label="Show interpretations and details"
+                  onClick={[Function]}
+                />,
+              ],
+              "dataTest": "dhis2-uicore-menu",
             },
             "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "style": Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
+            "rendered": Array [
+              false,
+              Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "function",
+                "props": Object {
+                  "dataTest": "dhis2-uicore-menuitem",
+                  "dense": true,
+                  "href": "http://rainbowdash",
+                  "icon": <pure(LaunchIcon)
+                    style={
+                      Object {
+                        "fill": "#6e7a8a",
+                      }
+                    }
+                  />,
+                  "label": "Open in Data Visualizer app",
+                  "target": "_blank",
                 },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
               },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
+              Object {
+                "instance": null,
+                "key": undefined,
+                "nodeType": "function",
+                "props": Object {
+                  "dataTest": "dhis2-uicore-menuitem",
+                  "dense": true,
+                  "icon": <SpeechBubble />,
+                  "label": "Show interpretations and details",
+                  "onClick": [Function],
+                },
+                "ref": null,
+                "rendered": null,
+                "type": [Function],
+              },
+            ],
             "type": [Function],
           },
-          "type": Symbol(react.fragment),
+          "type": [Function],
         },
-        null,
       ],
       "type": Symbol(react.fragment),
     },
@@ -270,6 +447,5 @@ ShallowWrapper {
       },
     },
   },
-  Symbol(enzyme.__childContext__): null,
 }
 `;
diff --git a/src/components/Item/VisualizationItem/assets/icons.js b/src/components/Item/VisualizationItem/assets/icons.js
new file mode 100644
index 000000000..ea25065f8
--- /dev/null
+++ b/src/components/Item/VisualizationItem/assets/icons.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+export const ThreeDots = () => (
+    <svg
+        height="18"
+        viewBox="0 0 18 18"
+        width="18"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m4 7.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm10 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-5 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"
+            fill="#6e7a8a"
+        />
+    </svg>
+);
+
+export const SpeechBubble = () => (
+    <svg
+        height="20"
+        viewBox="0 0 20 20"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="m20 2h-16c-1.1 0-1.99.9-1.99 2l-.01 18 4-4h14c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm-2 12h-12v-2h12zm0-3h-12v-2h12zm0-3h-12v-2h12z"
+            fill="#6e7a8a"
+            fillRule="evenodd"
+            transform="translate(-2 -2)"
+        />
+    </svg>
+);
diff --git a/src/components/Item/__tests__/ItemHeaderButton.spec.js b/src/components/Item/__tests__/ItemHeaderButton.spec.js
deleted file mode 100644
index 283c24d1d..000000000
--- a/src/components/Item/__tests__/ItemHeaderButton.spec.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import ItemHeaderButton from '../ItemHeaderButton';
-
-it('renders correctly', () => {
-    const button = shallow(
-        <ItemHeaderButton
-            onClick={Function.prototype}
-            style={{ fill: 'purple' }}
-        >
-            My Little Pony
-        </ItemHeaderButton>
-    );
-    expect(button).toMatchSnapshot();
-});
diff --git a/src/components/Item/__tests__/__snapshots__/ItemHeaderButton.spec.js.snap b/src/components/Item/__tests__/__snapshots__/ItemHeaderButton.spec.js.snap
deleted file mode 100644
index 1a621bf9a..000000000
--- a/src/components/Item/__tests__/__snapshots__/ItemHeaderButton.spec.js.snap
+++ /dev/null
@@ -1,88 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-ShallowWrapper {
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <ItemHeaderButton
-    onClick={[Function]}
-    style={
-      Object {
-        "fill": "purple",
-      }
-    }
-  >
-    My Little Pony
-  </ItemHeaderButton>,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "checkPropTypes": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateError": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": "My Little Pony",
-      "className": "item-action-button",
-      "disabled": undefined,
-      "onClick": [Function],
-      "style": Object {
-        "fill": "purple",
-      },
-      "type": "button",
-    },
-    "ref": null,
-    "rendered": "My Little Pony",
-    "type": "button",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": "My Little Pony",
-        "className": "item-action-button",
-        "disabled": undefined,
-        "onClick": [Function],
-        "style": Object {
-          "fill": "purple",
-        },
-        "type": "button",
-      },
-      "ref": null,
-      "rendered": "My Little Pony",
-      "type": "button",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-        "legacyContextMode": "parent",
-        "lifecycles": Object {
-          "componentDidUpdate": Object {
-            "onSetState": true,
-          },
-          "getChildContext": Object {
-            "calledByRenderer": false,
-          },
-          "getDerivedStateFromError": true,
-          "getDerivedStateFromProps": Object {
-            "hasShouldComponentUpdateBug": false,
-          },
-          "getSnapshotBeforeUpdate": true,
-          "setState": Object {
-            "skipsComponentDidUpdateOnNullish": true,
-          },
-        },
-      },
-    },
-  },
-}
-`;
diff --git a/src/components/Item/ItemHeaderButton.css b/src/components/Item/styles/DeleteItemButton.module.css
similarity index 64%
rename from src/components/Item/ItemHeaderButton.css
rename to src/components/Item/styles/DeleteItemButton.module.css
index d4f16c9ed..3e8b940c4 100644
--- a/src/components/Item/ItemHeaderButton.css
+++ b/src/components/Item/styles/DeleteItemButton.module.css
@@ -1,9 +1,9 @@
-.item-action-button {
+.deleteItemButton {
     border: none;
     background: transparent;
     cursor: pointer;
 }
 
-.item-action-button:focus {
+.deleteItemButton:focus {
     outline: 0;
 }
diff --git a/src/components/Item/styles/ItemHeader.module.css b/src/components/Item/styles/ItemHeader.module.css
new file mode 100644
index 000000000..c3e3d0a9d
--- /dev/null
+++ b/src/components/Item/styles/ItemHeader.module.css
@@ -0,0 +1,28 @@
+.itemWrap {
+    padding: var(--spacers-dp8);
+}
+
+.itemHeaderWrap {
+    display: flex;
+    align-items: top;
+    margin: var(--spacers-dp4) var(--spacers-dp4) var(--spacers-dp8)
+        var(--spacers-dp8);
+}
+
+.itemTitle {
+    font-weight: 500;
+    color: var(--colors-grey800);
+    font-size: 14px;
+    line-height: 19px;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+}
+
+.itemActionsWrap {
+    margin-left: auto;
+    flex-shrink: 0;
+}
+.itemActionsWrap button {
+    margin-left: var(--spacers-dp8);
+}
diff --git a/src/components/ItemGrid/DeleteItemButton.js b/src/components/ItemGrid/DeleteItemButton.js
deleted file mode 100644
index a0b25dd84..000000000
--- a/src/components/ItemGrid/DeleteItemButton.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ItemHeaderButton from '../Item/ItemHeaderButton';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { colors } from '@dhis2/ui-core';
-
-const style = {
-    button: {
-        position: 'absolute',
-        top: '7px',
-        right: '7px',
-        zIndex: '1000',
-    },
-    icon: {
-        fill: colors.red500,
-    },
-};
-
-const DeleteItemHeaderButton = ({ onClick }) => (
-    <ItemHeaderButton onClick={onClick} style={style.button}>
-        <DeleteIcon style={style.icon} />
-    </ItemHeaderButton>
-);
-
-DeleteItemHeaderButton.propTypes = {
-    onClick: PropTypes.func,
-};
-
-export default DeleteItemHeaderButton;
diff --git a/src/components/ItemGrid/ItemGrid.css b/src/components/ItemGrid/ItemGrid.css
index 2442accf1..dd4f6134f 100644
--- a/src/components/ItemGrid/ItemGrid.css
+++ b/src/components/ItemGrid/ItemGrid.css
@@ -48,26 +48,6 @@
     background: none;
 }
 
-/* dashboard item - header */
-
-.dashboard-item-header {
-    font-size: 15px;
-    font-weight: 700;
-    color: #3a3a3a;
-    display: flex;
-    align-items: center;
-    padding: 0 4px 0 14px;
-    height: 45px;
-}
-
-.dashboard-item-header-title {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    top: -1px;
-    left: -1px;
-}
-
 /* dashboard item - content */
 
 .dashboard-item-content {
diff --git a/src/components/ItemGrid/ItemGrid.js b/src/components/ItemGrid/ItemGrid.js
index beefe714d..7eab80a1f 100644
--- a/src/components/ItemGrid/ItemGrid.js
+++ b/src/components/ItemGrid/ItemGrid.js
@@ -22,7 +22,7 @@ import {
     onItemResize,
 } from './gridUtil';
 import { orArray } from '../../modules/util';
-import DeleteItemButton from './DeleteItemButton';
+
 import NoContentMessage from '../../widgets/NoContentMessage';
 
 import 'react-grid-layout/css/styles.css';
@@ -148,13 +148,6 @@ export class ItemGrid extends Component {
                                 key={item.i}
                                 className={itemClassNames}
                             >
-                                {edit ? (
-                                    <DeleteItemButton
-                                        onClick={this.onRemoveItemWrapper(
-                                            item.id
-                                        )}
-                                    />
-                                ) : null}
                                 <Item
                                     item={item}
                                     editMode={edit}
diff --git a/src/modules/itemTypes.js b/src/modules/itemTypes.js
index 0c9d614d2..bb089c751 100644
--- a/src/modules/itemTypes.js
+++ b/src/modules/itemTypes.js
@@ -45,6 +45,7 @@ export const isTrackerDomainType = itemType =>
     itemTypeMap[itemType].domainType === DOMAIN_TYPE_TRACKER;
 export const getDefaultItemCount = itemType =>
     itemTypeMap[itemType].defaultItemCount || 5;
+export const getAppName = itemType => itemTypeMap[itemType].appName || '';
 
 // Item type map
 export const itemTypeMap = {
@@ -54,7 +55,7 @@ export const itemTypeMap = {
         propName: 'visualization',
         pluralTitle: i18n.t('Visualizations'),
         appUrl: id => `dhis-web-data-visualizer/#/${id}`,
-        appName: i18n.t('Visualizer'),
+        appName: 'Data Visualizer',
         defaultItemCount: 10,
     },
     [REPORT_TABLE]: {
@@ -65,7 +66,7 @@ export const itemTypeMap = {
         domainType: DOMAIN_TYPE_AGGREGATE,
         isVisualizationType: true,
         appUrl: id => `dhis-web-data-visualizer/#/${id}`,
-        appName: i18n.t('Visualizer'),
+        appName: 'Data Visualizer',
     },
     [CHART]: {
         id: CHART,
@@ -75,7 +76,7 @@ export const itemTypeMap = {
         domainType: DOMAIN_TYPE_AGGREGATE,
         isVisualizationType: true,
         appUrl: id => `dhis-web-data-visualizer/#/${id}`,
-        appName: i18n.t('Visualizer'),
+        appName: 'Data Visualizer',
     },
     [MAP]: {
         id: MAP,
@@ -85,7 +86,7 @@ export const itemTypeMap = {
         domainType: DOMAIN_TYPE_AGGREGATE,
         isVisualizationType: true,
         appUrl: id => `dhis-web-maps/?id=${id}`,
-        appName: i18n.t('Maps'),
+        appName: 'Maps',
     },
     [EVENT_REPORT]: {
         id: EVENT_REPORT,
@@ -95,7 +96,7 @@ export const itemTypeMap = {
         domainType: DOMAIN_TYPE_TRACKER,
         isVisualizationType: true,
         appUrl: id => `dhis-web-event-reports/?id=${id}`,
-        appName: i18n.t('Event Reports'),
+        appName: 'Event Reports',
     },
     [EVENT_CHART]: {
         id: EVENT_CHART,
@@ -105,7 +106,7 @@ export const itemTypeMap = {
         domainType: DOMAIN_TYPE_TRACKER,
         isVisualizationType: true,
         appUrl: id => `dhis-web-event-visualizer/?id=${id}`,
-        appName: i18n.t('Event Visualizer'),
+        appName: 'Event Visualizer',
     },
     [APP]: {
         endPointName: 'apps',
diff --git a/yarn.lock b/yarn.lock
index be8a3e389..42a72fbaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1450,6 +1450,15 @@
   dependencies:
     prop-types "^15"
 
+"@dhis2/ui-core@^4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-4.11.0.tgz#2b629f3f2dd8c9d94e667bc8a4230cc90d1687e6"
+  integrity sha512-9vJXiWUbwrbOmJAhn275YeZOs1i+dyXAx5lM3I10l3YnqE1YpZ5QkLzjfsheNs0FsAttU6IkHSw7DzNSzDleRA==
+  dependencies:
+    "@dhis2/prop-types" "^1.5.0"
+    "@popperjs/core" "^2.0.6"
+    classnames "^2.2.6"
+
 "@dhis2/ui-core@^4.9.1":
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/@dhis2/ui-core/-/ui-core-4.9.1.tgz#13ebaa43deceb5c3fa2955668c183131241847fa"