feat: condense item header options into a single menu

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 ""
 

package.json

@@ -16,7 +16,7 @@
         "@dhis2/d2-ui-translation-dialog": "^6.0.1",
         "@dhis2/data-visualizer-plugin": "^34.2.5",
         "@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",

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>
+            </>
         );
     }
 }

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}

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;

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);

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}>

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,
 };
 

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',

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;