From b42812ac9a3d730d3f2c8956cee1d13dfaf7acfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Henrik=20=C3=98verland?= <jan@dhis2.org>
Date: Wed, 25 Sep 2019 11:34:05 +0200
Subject: [PATCH] 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
---
 src/components/Item/VisualizationItem/Item.js |   3 +-
 .../VisualizationItem/ItemHeaderButtons.js    |  71 ++-
 .../__tests__/ItemHeaderButtons.spec.js       |   3 +
 .../__tests__/__snapshots__/Item.spec.js.snap |  40 +-
 .../ItemHeaderButtons.spec.js.snap            | 557 +-----------------
 src/modules/itemTypes.js                      |   4 +
 6 files changed, 110 insertions(+), 568 deletions(-)

diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index 3386cf7ab..1202b591d 100644
--- 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
index e9e67e38d..a5caa6736 100644
--- 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
index c51d184ca..a50f441c4 100644
--- 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
index e7453ff01..e7d6603cf 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
@@ -70,6 +70,15 @@ ShallowWrapper {
               }
               onSelectVisualization={[Function]}
               onToggleFooter={[Function]}
+              visualization={
+                Object {
+                  "columns": Array [],
+                  "description": "Test pivot mock",
+                  "filters": Array [],
+                  "name": "Test pivot",
+                  "rows": Array [],
+                }
+              }
             />
           }
           editMode={false}
@@ -77,7 +86,6 @@ ShallowWrapper {
             <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,6 +215,15 @@ ShallowWrapper {
                 }
                 onSelectVisualization={[Function]}
                 onToggleFooter={[Function]}
+                visualization={
+                  Object {
+                    "columns": Array [],
+                    "description": "Test pivot mock",
+                    "filters": Array [],
+                    "name": "Test pivot",
+                    "rows": Array [],
+                  }
+                }
               />
             }
             editMode={false}
@@ -206,7 +231,6 @@ ShallowWrapper {
               <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",
                 }
               }
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 2f0cb2920..d9daba150 100644
--- a/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
+++ b/src/components/Item/VisualizationItem/__tests__/__snapshots__/ItemHeaderButtons.spec.js.snap
@@ -17,6 +17,11 @@ ShallowWrapper {
     }
     onSelectVisualization={[Function]}
     onToggleFooter={[Function]}
+    visualization={
+      Object {
+        "type": "SINGLE_VALUE",
+      }
+    }
   >
     My Little Pony
   </VisualizationItemHeaderButtons>,
@@ -35,13 +40,7 @@ ShallowWrapper {
     "nodeType": "function",
     "props": Object {
       "children": Array [
-        <div
-          style={
-            Object {
-              "marginRight": 10,
-            }
-          }
-        >
+        <React.Fragment>
           <ItemHeaderButton
             onClick={[Function]}
             style={
@@ -62,74 +61,8 @@ ShallowWrapper {
               }
             />
           </ItemHeaderButton>
-        </div>,
-        <div
-          style={
-            Object {
-              "border": "1px solid #f3f5f7",
-              "borderRadius": "2px",
-            }
-          }
-        >
-          <ItemHeaderButton
-            disabled={false}
-            onClick={[Function]}
-            style={
-              Object {
-                "padding": "5px 6px 3px 6px",
-              }
-            }
-          >
-            <pure(ViewListIcon)
-              style={
-                Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
-                }
-              }
-            />
-          </ItemHeaderButton>
-          <ItemHeaderButton
-            disabled={false}
-            onClick={[Function]}
-            style={
-              Object {
-                "backgroundColor": "#e3f2fd",
-                "padding": "5px 6px 3px 6px",
-              }
-            }
-          >
-            <pure(InsertChartIcon)
-              style={
-                Object {
-                  "fill": "#0d47a1",
-                  "height": "24px",
-                  "width": "24px",
-                }
-              }
-            />
-          </ItemHeaderButton>
-          <ItemHeaderButton
-            disabled={false}
-            onClick={[Function]}
-            style={
-              Object {
-                "padding": "5px 6px 3px 6px",
-              }
-            }
-          >
-            <pure(PublicIcon)
-              style={
-                Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
-                }
-              }
-            />
-          </ItemHeaderButton>
-        </div>,
+        </React.Fragment>,
+        null,
       ],
     },
     "ref": null,
@@ -137,7 +70,7 @@ ShallowWrapper {
       Object {
         "instance": null,
         "key": undefined,
-        "nodeType": "host",
+        "nodeType": "function",
         "props": Object {
           "children": <ItemHeaderButton
             onClick={[Function]}
@@ -159,9 +92,6 @@ ShallowWrapper {
               }
             />
           </ItemHeaderButton>,
-          "style": Object {
-            "marginRight": 10,
-          },
         },
         "ref": null,
         "rendered": Object {
@@ -203,198 +133,9 @@ ShallowWrapper {
           },
           "type": [Function],
         },
-        "type": "div",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <ItemHeaderButton
-              disabled={false}
-              onClick={[Function]}
-              style={
-                Object {
-                  "padding": "5px 6px 3px 6px",
-                }
-              }
-            >
-              <pure(ViewListIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />
-            </ItemHeaderButton>,
-            <ItemHeaderButton
-              disabled={false}
-              onClick={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#e3f2fd",
-                  "padding": "5px 6px 3px 6px",
-                }
-              }
-            >
-              <pure(InsertChartIcon)
-                style={
-                  Object {
-                    "fill": "#0d47a1",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />
-            </ItemHeaderButton>,
-            <ItemHeaderButton
-              disabled={false}
-              onClick={[Function]}
-              style={
-                Object {
-                  "padding": "5px 6px 3px 6px",
-                }
-              }
-            >
-              <pure(PublicIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />
-            </ItemHeaderButton>,
-          ],
-          "style": Object {
-            "border": "1px solid #f3f5f7",
-            "borderRadius": "2px",
-          },
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "children": <pure(ViewListIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />,
-              "disabled": false,
-              "onClick": [Function],
-              "style": Object {
-                "padding": "5px 6px 3px 6px",
-              },
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "style": Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
-                },
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            "type": [Function],
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "children": <pure(InsertChartIcon)
-                style={
-                  Object {
-                    "fill": "#0d47a1",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />,
-              "disabled": false,
-              "onClick": [Function],
-              "style": Object {
-                "backgroundColor": "#e3f2fd",
-                "padding": "5px 6px 3px 6px",
-              },
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "style": Object {
-                  "fill": "#0d47a1",
-                  "height": "24px",
-                  "width": "24px",
-                },
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            "type": [Function],
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "children": <pure(PublicIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />,
-              "disabled": false,
-              "onClick": [Function],
-              "style": Object {
-                "padding": "5px 6px 3px 6px",
-              },
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "class",
-              "props": Object {
-                "style": Object {
-                  "fill": "#a0adba",
-                  "height": "24px",
-                  "width": "24px",
-                },
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            "type": [Function],
-          },
-        ],
-        "type": "div",
+        "type": Symbol(react.fragment),
       },
+      null,
     ],
     "type": Symbol(react.fragment),
   },
@@ -405,13 +146,7 @@ ShallowWrapper {
       "nodeType": "function",
       "props": Object {
         "children": Array [
-          <div
-            style={
-              Object {
-                "marginRight": 10,
-              }
-            }
-          >
+          <React.Fragment>
             <ItemHeaderButton
               onClick={[Function]}
               style={
@@ -432,74 +167,8 @@ ShallowWrapper {
                 }
               />
             </ItemHeaderButton>
-          </div>,
-          <div
-            style={
-              Object {
-                "border": "1px solid #f3f5f7",
-                "borderRadius": "2px",
-              }
-            }
-          >
-            <ItemHeaderButton
-              disabled={false}
-              onClick={[Function]}
-              style={
-                Object {
-                  "padding": "5px 6px 3px 6px",
-                }
-              }
-            >
-              <pure(ViewListIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />
-            </ItemHeaderButton>
-            <ItemHeaderButton
-              disabled={false}
-              onClick={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#e3f2fd",
-                  "padding": "5px 6px 3px 6px",
-                }
-              }
-            >
-              <pure(InsertChartIcon)
-                style={
-                  Object {
-                    "fill": "#0d47a1",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />
-            </ItemHeaderButton>
-            <ItemHeaderButton
-              disabled={false}
-              onClick={[Function]}
-              style={
-                Object {
-                  "padding": "5px 6px 3px 6px",
-                }
-              }
-            >
-              <pure(PublicIcon)
-                style={
-                  Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  }
-                }
-              />
-            </ItemHeaderButton>
-          </div>,
+          </React.Fragment>,
+          null,
         ],
       },
       "ref": null,
@@ -507,7 +176,7 @@ ShallowWrapper {
         Object {
           "instance": null,
           "key": undefined,
-          "nodeType": "host",
+          "nodeType": "function",
           "props": Object {
             "children": <ItemHeaderButton
               onClick={[Function]}
@@ -529,9 +198,6 @@ ShallowWrapper {
                 }
               />
             </ItemHeaderButton>,
-            "style": Object {
-              "marginRight": 10,
-            },
           },
           "ref": null,
           "rendered": Object {
@@ -573,198 +239,9 @@ ShallowWrapper {
             },
             "type": [Function],
           },
-          "type": "div",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <ItemHeaderButton
-                disabled={false}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "padding": "5px 6px 3px 6px",
-                  }
-                }
-              >
-                <pure(ViewListIcon)
-                  style={
-                    Object {
-                      "fill": "#a0adba",
-                      "height": "24px",
-                      "width": "24px",
-                    }
-                  }
-                />
-              </ItemHeaderButton>,
-              <ItemHeaderButton
-                disabled={false}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "backgroundColor": "#e3f2fd",
-                    "padding": "5px 6px 3px 6px",
-                  }
-                }
-              >
-                <pure(InsertChartIcon)
-                  style={
-                    Object {
-                      "fill": "#0d47a1",
-                      "height": "24px",
-                      "width": "24px",
-                    }
-                  }
-                />
-              </ItemHeaderButton>,
-              <ItemHeaderButton
-                disabled={false}
-                onClick={[Function]}
-                style={
-                  Object {
-                    "padding": "5px 6px 3px 6px",
-                  }
-                }
-              >
-                <pure(PublicIcon)
-                  style={
-                    Object {
-                      "fill": "#a0adba",
-                      "height": "24px",
-                      "width": "24px",
-                    }
-                  }
-                />
-              </ItemHeaderButton>,
-            ],
-            "style": Object {
-              "border": "1px solid #f3f5f7",
-              "borderRadius": "2px",
-            },
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "children": <pure(ViewListIcon)
-                  style={
-                    Object {
-                      "fill": "#a0adba",
-                      "height": "24px",
-                      "width": "24px",
-                    }
-                  }
-                />,
-                "disabled": false,
-                "onClick": [Function],
-                "style": Object {
-                  "padding": "5px 6px 3px 6px",
-                },
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "class",
-                "props": Object {
-                  "style": Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  },
-                },
-                "ref": null,
-                "rendered": null,
-                "type": [Function],
-              },
-              "type": [Function],
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "children": <pure(InsertChartIcon)
-                  style={
-                    Object {
-                      "fill": "#0d47a1",
-                      "height": "24px",
-                      "width": "24px",
-                    }
-                  }
-                />,
-                "disabled": false,
-                "onClick": [Function],
-                "style": Object {
-                  "backgroundColor": "#e3f2fd",
-                  "padding": "5px 6px 3px 6px",
-                },
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "class",
-                "props": Object {
-                  "style": Object {
-                    "fill": "#0d47a1",
-                    "height": "24px",
-                    "width": "24px",
-                  },
-                },
-                "ref": null,
-                "rendered": null,
-                "type": [Function],
-              },
-              "type": [Function],
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "children": <pure(PublicIcon)
-                  style={
-                    Object {
-                      "fill": "#a0adba",
-                      "height": "24px",
-                      "width": "24px",
-                    }
-                  }
-                />,
-                "disabled": false,
-                "onClick": [Function],
-                "style": Object {
-                  "padding": "5px 6px 3px 6px",
-                },
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "class",
-                "props": Object {
-                  "style": Object {
-                    "fill": "#a0adba",
-                    "height": "24px",
-                    "width": "24px",
-                  },
-                },
-                "ref": null,
-                "rendered": null,
-                "type": [Function],
-              },
-              "type": [Function],
-            },
-          ],
-          "type": "div",
+          "type": Symbol(react.fragment),
         },
+        null,
       ],
       "type": Symbol(react.fragment),
     },
diff --git a/src/modules/itemTypes.js b/src/modules/itemTypes.js
index 58d4b554c..d4bce5a3b 100644
--- a/src/modules/itemTypes.js
+++ b/src/modules/itemTypes.js
@@ -35,6 +35,10 @@ export const VISUALIZATION_TYPE_TABLE = 'TABLE';
 export const VISUALIZATION_TYPE_CHART = 'CHART';
 export const VISUALIZATION_TYPE_MAP = 'MAP';
 
+// TODO: Import this from @dhis2/analytics when available
+export const CHART_TYPE_SINGLE_VALUE = 'SINGLE_VALUE';
+
+// Dashboard helpers
 export const spacerContent = 'SPACER_ITEM_FOR_DASHBOARD_LAYOUT_CONVENIENCE';
 export const emptyTextItemContent = 'TEXT_ITEM_WITH_NO_CONTENT';
 export const isSpacerType = item =>