From 58b205a70e1d7613a3085527e40fe4adaea08e45 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Tue, 8 Sep 2020 09:08:17 +0200
Subject: [PATCH 1/3] fix: add warning to items that have been shortened

---
 i18n/en.pot                                   |  7 +++--
 .../Dashboard/PrintLayoutDashboard.js         |  1 +
 src/components/Item/AppItem/Item.js           |  1 +
 src/components/Item/ItemHeader/ItemHeader.js  | 18 ++++++++-----
 .../Item/ItemHeader/PrintWarning.js           | 20 ++++++++++++++
 .../ItemHeader/styles/PrintWarning.module.css | 11 ++++++++
 src/components/Item/ListItem/Item.js          |  1 +
 src/components/Item/MessagesItem/Item.js      |  1 +
 src/components/Item/TextItem/Item.js          | 26 +++++++++++++++++--
 src/components/Item/VisualizationItem/Item.js |  1 +
 .../ItemGrid/PrintLayoutItemGrid.js           |  1 +
 src/icons/Warning.js                          | 17 ++++++++++++
 src/modules/printUtils.js                     |  2 +-
 13 files changed, 96 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Item/ItemHeader/PrintWarning.js
 create mode 100644 src/components/Item/ItemHeader/styles/PrintWarning.module.css
 create mode 100644 src/icons/Warning.js

diff --git a/i18n/en.pot b/i18n/en.pot
index db5290946..d0622c869 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-08-31T08:37:42.542Z\n"
-"PO-Revision-Date: 2020-08-31T08:37:42.542Z\n"
+"POT-Creation-Date: 2020-09-08T06:57:57.672Z\n"
+"PO-Revision-Date: 2020-09-08T06:57:57.672Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
@@ -102,6 +102,9 @@ msgstr ""
 msgid "Delete item"
 msgstr ""
 
+msgid "This item has been shortened to fit on one page"
+msgstr ""
+
 msgid "Messages"
 msgstr ""
 
diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js
index 0f73e7b26..8b5cc2720 100644
--- a/src/components/Dashboard/PrintLayoutDashboard.js
+++ b/src/components/Dashboard/PrintLayoutDashboard.js
@@ -96,6 +96,7 @@ export class PrintLayoutDashboard extends Component {
             // page (react-grid-layout units)
             this.props.items.forEach(item => {
                 if (item.h > MAX_ITEM_GRID_HEIGHT) {
+                    item.shortened = true
                     this.props.updateDashboardItem(
                         Object.assign({}, item, { h: MAX_ITEM_GRID_HEIGHT })
                     )
diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index 2ef13e594..e795a2c33 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -48,6 +48,7 @@ const AppItem = ({ dashboardMode, item, itemFilters }, context) => {
                 title={appDetails.name}
                 itemId={item.id}
                 dashboardMode={dashboardMode}
+                hasWarning={item.shortened}
             />
             <Line />
             <iframe
diff --git a/src/components/Item/ItemHeader/ItemHeader.js b/src/components/Item/ItemHeader/ItemHeader.js
index 715a39641..0e3225dcd 100644
--- a/src/components/Item/ItemHeader/ItemHeader.js
+++ b/src/components/Item/ItemHeader/ItemHeader.js
@@ -4,21 +4,26 @@ import { connect } from 'react-redux'
 
 import ViewItemActions from './ViewItemActions'
 import EditItemActions from './EditItemActions'
-import { VIEW, EDIT } from '../../Dashboard/dashboardModes'
+import PrintWarning from './PrintWarning'
+
+import { VIEW, EDIT, PRINT_LAYOUT } from '../../Dashboard/dashboardModes'
 
 import classes from './styles/ItemHeader.module.css'
 
-const itemActionsMap = {
-    [VIEW]: ViewItemActions,
-    [EDIT]: EditItemActions,
+const getItemActionsMap = hasWarning => {
+    return {
+        [VIEW]: ViewItemActions,
+        [EDIT]: EditItemActions,
+        [PRINT_LAYOUT]: hasWarning ? PrintWarning : null,
+    }
 }
 
 // This is the margin-top + margin-bottom defined in the css file
 export const HEADER_MARGIN_HEIGHT = 12
 
 const ItemHeader = React.forwardRef(
-    ({ dashboardMode, title, ...rest }, ref) => {
-        const Actions = itemActionsMap[dashboardMode]
+    ({ dashboardMode, title, hasWarning, ...rest }, ref) => {
+        const Actions = getItemActionsMap(hasWarning)[dashboardMode]
         return (
             <div className={classes.itemHeaderWrap} ref={ref}>
                 <p className={classes.itemTitle}>{title}</p>
@@ -32,6 +37,7 @@ ItemHeader.displayName = 'ItemHeader'
 
 ItemHeader.propTypes = {
     dashboardMode: PropTypes.string,
+    hasWarning: PropTypes.bool,
     title: PropTypes.string,
 }
 
diff --git a/src/components/Item/ItemHeader/PrintWarning.js b/src/components/Item/ItemHeader/PrintWarning.js
new file mode 100644
index 000000000..cb032efd8
--- /dev/null
+++ b/src/components/Item/ItemHeader/PrintWarning.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Tooltip } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+
+import WarningIcon from '../../../icons/Warning'
+
+import classes from './styles/PrintWarning.module.css'
+
+const PrintWarning = () => (
+    <div className={classes.warning}>
+        <Tooltip
+            content={i18n.t('This item has been shortened to fit on one page')}
+            placement="bottom"
+        >
+            <WarningIcon />
+        </Tooltip>
+    </div>
+)
+
+export default PrintWarning
diff --git a/src/components/Item/ItemHeader/styles/PrintWarning.module.css b/src/components/Item/ItemHeader/styles/PrintWarning.module.css
new file mode 100644
index 000000000..b6255cefe
--- /dev/null
+++ b/src/components/Item/ItemHeader/styles/PrintWarning.module.css
@@ -0,0 +1,11 @@
+.warning {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+}
+
+@media print {
+    .warning {
+        display: none;
+    }
+}
diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.js
index 6a2551ff7..64c6878ac 100644
--- a/src/components/Item/ListItem/Item.js
+++ b/src/components/Item/ListItem/Item.js
@@ -56,6 +56,7 @@ const ListItem = (props, context) => {
                 title={getItemTitle(item)}
                 itemId={item.id}
                 dashboardMode={dashboardMode}
+                hasWarning={item.shortened}
             />
             <Line />
             <div className="dashboard-item-content">
diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.js
index 00b116504..84d624283 100644
--- a/src/components/Item/MessagesItem/Item.js
+++ b/src/components/Item/MessagesItem/Item.js
@@ -114,6 +114,7 @@ class MessagesItem extends Component {
                     title={i18n.t('Messages')}
                     itemId={this.props.item.id}
                     dashboardMode={this.props.dashboardMode}
+                    hasWarning={this.props.item.shortened}
                 />
                 <Line />
                 {this.props.messages.length > 0 && (
diff --git a/src/components/Item/TextItem/Item.js b/src/components/Item/TextItem/Item.js
index af1e6a917..1ae898685 100644
--- a/src/components/Item/TextItem/Item.js
+++ b/src/components/Item/TextItem/Item.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 
 import Input from '@material-ui/core/Input'
 import ItemHeader from '../ItemHeader/ItemHeader'
+import PrintWarning from '../ItemHeader/PrintWarning'
 import Line from '../../../widgets/Line'
 import {
     Parser as RichTextParser,
@@ -18,7 +19,7 @@ import {
     sGetIsPrinting,
     sGetPrintDashboardItems,
 } from '../../../reducers/printDashboard'
-import { isEditMode } from '../../Dashboard/dashboardModes'
+import { isEditMode, PRINT_LAYOUT } from '../../Dashboard/dashboardModes'
 
 const style = {
     textDiv: {
@@ -86,7 +87,28 @@ const TextItem = props => {
         )
     }
 
-    return <>{isEditMode(dashboardMode) ? editItem() : viewItem()}</>
+    const printItem = () => {
+        const textDivStyle = Object.assign({}, style.textField, style.textDiv)
+        return (
+            <>
+                {props.item.shortened ? <PrintWarning /> : null}
+                <div className="dashboard-item-content" style={style.container}>
+                    <RichTextParser style={textDivStyle}>{text}</RichTextParser>
+                </div>
+            </>
+        )
+    }
+
+    let textItem
+    if (isEditMode(dashboardMode)) {
+        textItem = editItem
+    } else if (dashboardMode === PRINT_LAYOUT) {
+        textItem = printItem
+    } else {
+        textItem = viewItem
+    }
+
+    return <>{textItem()}</>
 }
 
 const mapStateToProps = (state, ownProps) => {
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index f2f09a08a..e1b6ff9ee 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -304,6 +304,7 @@ export class Item extends Component {
                     actionButtons={actionButtons}
                     ref={this.headerRef}
                     dashboardMode={dashboardMode}
+                    hasWarning={item.shortened}
                 />
                 <FatalErrorBoundary>
                     <div
diff --git a/src/components/ItemGrid/PrintLayoutItemGrid.js b/src/components/ItemGrid/PrintLayoutItemGrid.js
index c5ad36179..b07b7050b 100644
--- a/src/components/ItemGrid/PrintLayoutItemGrid.js
+++ b/src/components/ItemGrid/PrintLayoutItemGrid.js
@@ -65,6 +65,7 @@ export class PrintLayoutItemGrid extends Component {
         const itemClassNames = cx('print', 'layout', `${item.type}`, {
             'first-page-break':
                 this.props.isEditing && this.isFirstPageBreak(item),
+            shortened: !!item.shortened,
         })
 
         return (
diff --git a/src/icons/Warning.js b/src/icons/Warning.js
new file mode 100644
index 000000000..5bbaacb0f
--- /dev/null
+++ b/src/icons/Warning.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { colors } from '@dhis2/ui'
+
+const WarningIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        fill={colors.yellow500}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+    </svg>
+)
+
+export default WarningIcon
diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js
index 7fb4c7a81..c09e94e7d 100644
--- a/src/modules/printUtils.js
+++ b/src/modules/printUtils.js
@@ -7,7 +7,7 @@ import { itemTypeMap } from './itemTypes'
 // const a4LandscapeHeightPx = 794
 export const a4LandscapeWidthPx = 1102
 
-export const MAX_ITEM_GRID_HEIGHT = 33
+export const MAX_ITEM_GRID_HEIGHT = 34
 
 export const getTransformYPx = elStyle => {
     if (!elStyle || !elStyle.transform) {

From e5ec393b1576a34667945f4e2c8461b14ce10d13 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Tue, 8 Sep 2020 10:45:08 +0200
Subject: [PATCH 2/3] fix: updates to naming and use info instead of warning

---
 src/components/Item/AppItem/Item.js                  |  2 +-
 src/components/Item/ItemHeader/ItemHeader.js         | 12 ++++++------
 .../ItemHeader/{PrintWarning.js => PrintItemInfo.js} |  6 +++---
 ...ntWarning.module.css => PrintItemInfo.module.css} |  0
 src/components/Item/ListItem/Item.js                 |  2 +-
 src/components/Item/MessagesItem/Item.js             |  2 +-
 src/components/Item/NotSupportedItem/Item.js         |  1 +
 src/components/Item/SpacerItem/Item.js               |  1 +
 src/components/Item/TextItem/Item.js                 |  4 ++--
 src/components/Item/VisualizationItem/Item.js        |  2 +-
 src/icons/{Warning.js => Info.js}                    |  4 ++--
 11 files changed, 19 insertions(+), 17 deletions(-)
 rename src/components/Item/ItemHeader/{PrintWarning.js => PrintItemInfo.js} (73%)
 rename src/components/Item/ItemHeader/styles/{PrintWarning.module.css => PrintItemInfo.module.css} (100%)
 rename src/icons/{Warning.js => Info.js} (67%)

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
index e795a2c33..6a83be901 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.js
@@ -48,7 +48,7 @@ const AppItem = ({ dashboardMode, item, itemFilters }, context) => {
                 title={appDetails.name}
                 itemId={item.id}
                 dashboardMode={dashboardMode}
-                hasWarning={item.shortened}
+                isShortened={item.shortened}
             />
             <Line />
             <iframe
diff --git a/src/components/Item/ItemHeader/ItemHeader.js b/src/components/Item/ItemHeader/ItemHeader.js
index 0e3225dcd..f4e89eeba 100644
--- a/src/components/Item/ItemHeader/ItemHeader.js
+++ b/src/components/Item/ItemHeader/ItemHeader.js
@@ -4,17 +4,17 @@ import { connect } from 'react-redux'
 
 import ViewItemActions from './ViewItemActions'
 import EditItemActions from './EditItemActions'
-import PrintWarning from './PrintWarning'
+import PrintItemInfo from './PrintItemInfo'
 
 import { VIEW, EDIT, PRINT_LAYOUT } from '../../Dashboard/dashboardModes'
 
 import classes from './styles/ItemHeader.module.css'
 
-const getItemActionsMap = hasWarning => {
+const getItemActionsMap = isShortened => {
     return {
         [VIEW]: ViewItemActions,
         [EDIT]: EditItemActions,
-        [PRINT_LAYOUT]: hasWarning ? PrintWarning : null,
+        [PRINT_LAYOUT]: isShortened ? PrintItemInfo : null,
     }
 }
 
@@ -22,8 +22,8 @@ const getItemActionsMap = hasWarning => {
 export const HEADER_MARGIN_HEIGHT = 12
 
 const ItemHeader = React.forwardRef(
-    ({ dashboardMode, title, hasWarning, ...rest }, ref) => {
-        const Actions = getItemActionsMap(hasWarning)[dashboardMode]
+    ({ dashboardMode, title, isShortened, ...rest }, ref) => {
+        const Actions = getItemActionsMap(isShortened)[dashboardMode]
         return (
             <div className={classes.itemHeaderWrap} ref={ref}>
                 <p className={classes.itemTitle}>{title}</p>
@@ -37,7 +37,7 @@ ItemHeader.displayName = 'ItemHeader'
 
 ItemHeader.propTypes = {
     dashboardMode: PropTypes.string,
-    hasWarning: PropTypes.bool,
+    isShortened: PropTypes.bool,
     title: PropTypes.string,
 }
 
diff --git a/src/components/Item/ItemHeader/PrintWarning.js b/src/components/Item/ItemHeader/PrintItemInfo.js
similarity index 73%
rename from src/components/Item/ItemHeader/PrintWarning.js
rename to src/components/Item/ItemHeader/PrintItemInfo.js
index cb032efd8..228b3e254 100644
--- a/src/components/Item/ItemHeader/PrintWarning.js
+++ b/src/components/Item/ItemHeader/PrintItemInfo.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { Tooltip } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 
-import WarningIcon from '../../../icons/Warning'
+import InfoIcon from '../../../icons/Info'
 
-import classes from './styles/PrintWarning.module.css'
+import classes from './styles/PrintItemInfo.module.css'
 
 const PrintWarning = () => (
     <div className={classes.warning}>
@@ -12,7 +12,7 @@ const PrintWarning = () => (
             content={i18n.t('This item has been shortened to fit on one page')}
             placement="bottom"
         >
-            <WarningIcon />
+            <InfoIcon />
         </Tooltip>
     </div>
 )
diff --git a/src/components/Item/ItemHeader/styles/PrintWarning.module.css b/src/components/Item/ItemHeader/styles/PrintItemInfo.module.css
similarity index 100%
rename from src/components/Item/ItemHeader/styles/PrintWarning.module.css
rename to src/components/Item/ItemHeader/styles/PrintItemInfo.module.css
diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.js
index 64c6878ac..56397ecda 100644
--- a/src/components/Item/ListItem/Item.js
+++ b/src/components/Item/ListItem/Item.js
@@ -56,7 +56,7 @@ const ListItem = (props, context) => {
                 title={getItemTitle(item)}
                 itemId={item.id}
                 dashboardMode={dashboardMode}
-                hasWarning={item.shortened}
+                isShortened={item.shortened}
             />
             <Line />
             <div className="dashboard-item-content">
diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.js
index 84d624283..ff3eeefb0 100644
--- a/src/components/Item/MessagesItem/Item.js
+++ b/src/components/Item/MessagesItem/Item.js
@@ -114,7 +114,7 @@ class MessagesItem extends Component {
                     title={i18n.t('Messages')}
                     itemId={this.props.item.id}
                     dashboardMode={this.props.dashboardMode}
-                    hasWarning={this.props.item.shortened}
+                    isShortened={this.props.item.shortened}
                 />
                 <Line />
                 {this.props.messages.length > 0 && (
diff --git a/src/components/Item/NotSupportedItem/Item.js b/src/components/Item/NotSupportedItem/Item.js
index e1db8d51d..440973ad2 100644
--- a/src/components/Item/NotSupportedItem/Item.js
+++ b/src/components/Item/NotSupportedItem/Item.js
@@ -12,6 +12,7 @@ const NotSupportedItem = props => (
             })}
             itemId={props.item.id}
             dashboardMode={props.dashboardMode}
+            isShortened={props.item.shortened}
         />
         <div
             style={{
diff --git a/src/components/Item/SpacerItem/Item.js b/src/components/Item/SpacerItem/Item.js
index ae920e924..b55c2077f 100644
--- a/src/components/Item/SpacerItem/Item.js
+++ b/src/components/Item/SpacerItem/Item.js
@@ -19,6 +19,7 @@ const SpacerItem = props => {
                 title={i18n.t('Spacer')}
                 itemId={props.item.id}
                 dashboardMode={props.dashboardMode}
+                isShortened={props.item.shortened}
             />
             <p style={style}>
                 {i18n.t(
diff --git a/src/components/Item/TextItem/Item.js b/src/components/Item/TextItem/Item.js
index 1ae898685..61204967f 100644
--- a/src/components/Item/TextItem/Item.js
+++ b/src/components/Item/TextItem/Item.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 
 import Input from '@material-ui/core/Input'
 import ItemHeader from '../ItemHeader/ItemHeader'
-import PrintWarning from '../ItemHeader/PrintWarning'
+import PrintItemInfo from '../ItemHeader/PrintItemInfo'
 import Line from '../../../widgets/Line'
 import {
     Parser as RichTextParser,
@@ -91,7 +91,7 @@ const TextItem = props => {
         const textDivStyle = Object.assign({}, style.textField, style.textDiv)
         return (
             <>
-                {props.item.shortened ? <PrintWarning /> : null}
+                {props.item.shortened ? <PrintItemInfo /> : null}
                 <div className="dashboard-item-content" style={style.container}>
                     <RichTextParser style={textDivStyle}>{text}</RichTextParser>
                 </div>
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.js
index e1b6ff9ee..0a09f0c73 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.js
@@ -304,7 +304,7 @@ export class Item extends Component {
                     actionButtons={actionButtons}
                     ref={this.headerRef}
                     dashboardMode={dashboardMode}
-                    hasWarning={item.shortened}
+                    isShortened={item.shortened}
                 />
                 <FatalErrorBoundary>
                     <div
diff --git a/src/icons/Warning.js b/src/icons/Info.js
similarity index 67%
rename from src/icons/Warning.js
rename to src/icons/Info.js
index 5bbaacb0f..5ef63ae91 100644
--- a/src/icons/Warning.js
+++ b/src/icons/Info.js
@@ -7,10 +7,10 @@ const WarningIcon = () => (
         height="24"
         viewBox="0 0 24 24"
         width="24"
-        fill={colors.yellow500}
+        fill={colors.grey600}
     >
         <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
     </svg>
 )
 

From c82fd764ab232439b3a811ef5ca7ea16eecaca19 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Tue, 8 Sep 2020 11:52:02 +0200
Subject: [PATCH 3/3] fix: show info icon on spacer as well

---
 src/components/Item/ItemHeader/styles/PrintItemInfo.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Item/ItemHeader/styles/PrintItemInfo.module.css b/src/components/Item/ItemHeader/styles/PrintItemInfo.module.css
index b6255cefe..31759d4a4 100644
--- a/src/components/Item/ItemHeader/styles/PrintItemInfo.module.css
+++ b/src/components/Item/ItemHeader/styles/PrintItemInfo.module.css
@@ -2,6 +2,7 @@
     position: absolute;
     top: 5px;
     right: 5px;
+    visibility: visible;
 }
 
 @media print {