From 58fba4b5f75cc8f122b092431ecc5b9b3d6de032 Mon Sep 17 00:00:00 2001
From: Valeriu Iliescu <valeriu.iliescu@resonate-mp4.com>
Date: Wed, 26 Jul 2023 09:44:52 +0300
Subject: [PATCH] #31674 error message if illegal input data is detected

---
 src/stories/TimelineScenarios.ts    |  3 ++-
 src/stories/basic/Basic.stories.tsx | 12 ++++++++++++
 src/style.css                       |  6 ++++++
 src/timeline.js                     | 27 ++++++++++++++++++++++++---
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/stories/TimelineScenarios.ts b/src/stories/TimelineScenarios.ts
index 120c618a..fc7c2d70 100644
--- a/src/stories/TimelineScenarios.ts
+++ b/src/stories/TimelineScenarios.ts
@@ -5,5 +5,6 @@ export const timelineScenarios = {
     'WHEN the mouse moves THEN the red bar moves also (with snapping) AND the its date is displayed',
   propertyItemRendererDefaultProps: 'PROPERTY itemRendererDefaultProps',
   propertyItemRenderer: 'PROPERTY itemRenderer',
-  whenClickOrDragToSelectThenItemsSelected: "WHEN click or drag to select THEN items are selected/deselected"
+  whenClickOrDragToSelectThenItemsSelected: "WHEN click or drag to select THEN items are selected/deselected",
+  givenIlegalDataThenShowWarning: "GIVEN illegal data, THEN show warning icon"
 };
diff --git a/src/stories/basic/Basic.stories.tsx b/src/stories/basic/Basic.stories.tsx
index 61fa9d95..5b267424 100644
--- a/src/stories/basic/Basic.stories.tsx
+++ b/src/stories/basic/Basic.stories.tsx
@@ -45,3 +45,15 @@ Main.parameters = {
     timelineScenarios.whenMouseMovesThenRedBar
   ]
 };
+
+export const IllegalData = () => {
+
+  return (<Timeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} groups={[someHumanResources[0]]} items={someTasks} />);
+};
+
+IllegalData.parameters = {
+  scenarios: [
+    timelineScenarios.givenIlegalDataThenShowWarning
+  ]
+}
+
diff --git a/src/style.css b/src/style.css
index 5cb8a36e..b2ddd37c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -296,6 +296,12 @@
   top: 1px;
 }
 
+.rct9k-warning-div {
+  position: absolute;
+  right: 30px;
+  top: 3px;
+}
+
 .rct9k-menu.ui.popup {
   padding: 0;
   margin: 0;
diff --git a/src/timeline.js b/src/timeline.js
index b0a6ab1b..81524ada 100644
--- a/src/timeline.js
+++ b/src/timeline.js
@@ -9,7 +9,7 @@ import moment from 'moment';
 import interact from 'interactjs';
 import _ from 'lodash';
 import {Column, Group, InteractOption, Item, RowLayer} from './index';
-import {Button, Label, Menu, Popup} from 'semantic-ui-react';
+import {Button, Label, Menu, Popup, Icon} from 'semantic-ui-react';
 
 import {pixToInt, intToPix} from './utils/commonUtils';
 import {
@@ -527,7 +527,8 @@ export default class Timeline extends React.Component {
       rightClickDraggingState: undefined,
       openedContextMenuCoordinates: undefined,
       openedContextMenuRow: undefined,
-      openedContextMenuTime: undefined
+      openedContextMenuTime: undefined,
+      illegalInputData: false
     };
 
     // These functions need to be bound because they are passed as parameters.
@@ -800,6 +801,7 @@ export default class Timeline extends React.Component {
     let heightToFillIn = this._grid.props.height - totalItemsHeight;
     let fillInGroups = [];
 
+    let illegalInputData = false;
     let groupId = groups.length;
     while (heightToFillIn > 0) {
       // create new empty group;
@@ -811,10 +813,17 @@ export default class Timeline extends React.Component {
       }
 
       fillInGroups.push(emptyGroup);
+      if (this.rowItemMap[groupId] && this.rowItemMap[groupId].length) {
+        const itemKeys = this.rowItemMap[groupId].map(item => item.key).join(', ');
+        console.error(
+          `The items with keys: [${itemKeys}] has row = ${groupId} but there's no group with index ${groupId}. Please check if the groups property or the items with keys [${itemKeys}] are well defined.`
+        );
+        illegalInputData = true;
+      }
       heightToFillIn -= this.props.itemHeight;
       groupId++;
     }
-    this.setState({groups: [...groups, ...fillInGroups]});
+    this.setState({groups: [...groups, ...fillInGroups], illegalInputData});
   }
 
   /**
@@ -1691,6 +1700,17 @@ export default class Timeline extends React.Component {
     }
   }
 
+  /**
+   * @returns { JSX.Element }
+   */
+  renderWarningIcon() {
+    return (
+      <Popup position="top right" trigger={<Icon color="red" size="big" name="exclamation" />}>
+        <div style={{color: 'red'}}> Some of the input data are illegal. More info in the console.</div>
+      </Popup>
+    );
+  }
+
   /**
    * @returns { JSX.Element }
    */
@@ -1980,6 +2000,7 @@ export default class Timeline extends React.Component {
                       topOffset: timebarHeight,
                       verticalGridLines: this.state.verticalGridLines
                     })}
+                  {this.state.illegalInputData && <div className="rct9k-warning-div">{this.renderWarningIcon()}</div>}
                   <div className="rct9k-menu-div">{this.renderMenuButton()}</div>
                 </div>
               </div>