fix: hide vis action buttons for single value charts (#336)

* extract action button rendering + update snapshots * update snapshot * code style * add comment * add comment * minor fix
dhis2 · Sep 25, 2019 · b42812a · b42812a
1 parent 8e65eef
commit b42812a
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 568 deletions.
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
@@ -229,7 +229,7 @@ export class Item extends Component {
         const itemName = pluginManager.getName(item);
 
         return (
-            <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div style={{ display: 'flex' }}>
                 <span className={classes.title} title={itemName}>
                     {itemName}
                 </span>
@@ -255,6 +255,7 @@ export class Item extends Component {
         ) && !this.props.editMode ? (
             <VisualizationItemHeaderButtons
                 item={this.props.item}
+                visualization={this.props.visualization}
                 activeFooter={this.state.showFooter}
                 activeType={this.getActiveType()}
                 onSelectVisualization={this.onSelectVisualization}

diff --git a/src/components/Item/VisualizationItem/ItemHeaderButtons.js b/src/components/Item/VisualizationItem/ItemHeaderButtons.js
@@ -17,6 +17,7 @@ import {
     EVENT_CHART,
     EVENT_REPORT,
     DOMAIN_TYPE_AGGREGATE,
+    CHART_TYPE_SINGLE_VALUE,
 } from '../../../modules/itemTypes';
 import { colors, theme } from '@dhis2/ui-core';
 
@@ -85,16 +86,50 @@ export const getItemTypeId = (itemTypeMap, visualizationType, domainType) => {
     return item.id;
 };
 
+// TODO: Import this from @dhis2/analytics when available
+const isSingleValue = (itemType, chartType) =>
+    itemType === VISUALIZATION_TYPE_CHART &&
+    chartType === CHART_TYPE_SINGLE_VALUE;
+
 class VisualizationItemHeaderButtons extends Component {
-    render() {
+    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,
             onSelectVisualization,
-            activeFooter,
             activeType,
-            onToggleFooter,
         } = this.props;
 
+        if (isSingleValue(item.type, visualization.type)) {
+            return null;
+        }
+
         const domainType = itemTypeMap[item.type].domainType;
 
         const onViewTable = () =>
@@ -112,17 +147,6 @@ class VisualizationItemHeaderButtons extends Component {
                 getItemTypeId(itemTypeMap, VISUALIZATION_TYPE_MAP, domainType)
             );
 
-        const toggleFooterBase = activeFooter ? activeStyle : baseStyle;
-
-        const toggleFooter = {
-            ...toggleFooterBase,
-            container: {
-                ...toggleFooterBase.container,
-                ...style.toggleFooterPadding,
-                ...style.border,
-            },
-        };
-
         // disable toggle buttons
         let disabled = false;
 
@@ -137,15 +161,7 @@ class VisualizationItemHeaderButtons extends Component {
         const mapButtonStyle = mapBtnStyle(activeType, disabled);
 
         return (
-            <Fragment>
-                <div style={{ marginRight: 10 }}>
-                    <ItemHeaderButton
-                        style={toggleFooter.container}
-                        onClick={onToggleFooter}
-                    >
-                        <MessageIcon style={toggleFooter.icon} />
-                    </ItemHeaderButton>
-                </div>
+            <div style={{ marginLeft: 10 }}>
                 <div style={style.border}>
                     <ItemHeaderButton
                         disabled={disabled}
@@ -171,6 +187,15 @@ class VisualizationItemHeaderButtons extends Component {
                         </ItemHeaderButton>
                     ) : null}
                 </div>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <Fragment>
+                {this.renderInterpretationButton()}
+                {this.renderVisualizationButtons()}
             </Fragment>
         );
     }

diff --git a/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js b/src/components/Item/VisualizationItem/__tests__/ItemHeaderButtons.spec.js
@@ -9,6 +9,9 @@ it('renders correctly', () => {
                 type: 'CHART',
                 chart: { type: 'NOT_YOY', domainType: 'AGGREGATE' },
             }}
+            visualization={{
+                type: 'SINGLE_VALUE',
+            }}
             onSelectVisualization={Function.prototype}
             activeFooter={false}
             activeType={'CHART'}

diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -70,14 +70,22 @@ ShallowWrapper {
               }
               onSelectVisualization={[Function]}
               onToggleFooter={[Function]}
+              visualization={
+                Object {
+                  "columns": Array [],
+                  "description": "Test pivot mock",
+                  "filters": Array [],
+                  "name": "Test pivot",
+                  "rows": Array [],
+                }
+              }
             />
           }
           editMode={false}
           title={
             <div
               style={
                 Object {
-                  "alignItems": "center",
                   "display": "flex",
                 }
               }
@@ -128,12 +136,20 @@ ShallowWrapper {
             }
             onSelectVisualization={[Function]}
             onToggleFooter={[Function]}
+            visualization={
+              Object {
+                "columns": Array [],
+                "description": "Test pivot mock",
+                "filters": Array [],
+                "name": "Test pivot",
+                "rows": Array [],
+              }
+            }
           />,
           "editMode": false,
           "title": <div
             style={
               Object {
-                "alignItems": "center",
                 "display": "flex",
               }
             }
@@ -199,14 +215,22 @@ ShallowWrapper {
                 }
                 onSelectVisualization={[Function]}
                 onToggleFooter={[Function]}
+                visualization={
+                  Object {
+                    "columns": Array [],
+                    "description": "Test pivot mock",
+                    "filters": Array [],
+                    "name": "Test pivot",
+                    "rows": Array [],
+                  }
+                }
               />
             }
             editMode={false}
             title={
               <div
                 style={
                   Object {
-                    "alignItems": "center",
                     "display": "flex",
                   }
                 }
@@ -257,12 +281,20 @@ ShallowWrapper {
               }
               onSelectVisualization={[Function]}
               onToggleFooter={[Function]}
+              visualization={
+                Object {
+                  "columns": Array [],
+                  "description": "Test pivot mock",
+                  "filters": Array [],
+                  "name": "Test pivot",
+                  "rows": Array [],
+                }
+              }
             />,
             "editMode": false,
             "title": <div
               style={
                 Object {
-                  "alignItems": "center",
                   "display": "flex",
                 }
               }