Merge pull request #1218 from nyaruka/warnings

Add support to the simulator to display warnings

Author: rowanseymour

src/components/simulator/LogEvent.module.scss

@@ -5,6 +5,7 @@
     transform: scale(0.2);
     opacity: 0;
   }
+
   to {
     transform: scale(1);
     opacity: 1;
@@ -20,6 +21,7 @@
 .msg_text {
   padding: 8px 15px;
 }
+
 .ivr_msg,
 .send_msg {
   border-radius: 10px;
@@ -50,6 +52,16 @@
   }
 }
 
+.warning {
+  float: inherit;
+  color: $yellow;
+  font-size: 11px;
+  border: none;
+  text-align: center;
+  padding: 10px 15px;
+  border-radius: 11px;
+}
+
 .error {
   float: inherit;
   color: $red;
@@ -72,6 +84,7 @@
 .email {
   text-decoration: underline;
   cursor: pointer;
+
   &:hover {
     color: #999;
   }
@@ -81,6 +94,7 @@
   word-break: break-all;
   text-decoration: underline;
   cursor: pointer;
+
   &:hover {
     color: #999;
   }
@@ -145,12 +159,14 @@
   white-space: -pre-wrap;
   white-space: -o-pre-wrap;
   word-wrap: break-word;
+
   ::first-line {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 34px;
   }
+
   .response {
     padding-top: 20px;
   }
@@ -182,11 +198,13 @@
   width: 100%;
   font-size: 90%;
   color: #bbb;
+
   td {
     padding: 0 5px;
   }
+
   td:last-child {
     text-align: right;
     font-size: 90%;
   }
-}
+}

src/components/simulator/LogEvent.test.tsx

@@ -101,6 +101,13 @@ describe(LogEvent.name, () => {
       ...commonEventProps
     });
   });
+  it('should render warning event', () => {
+    testEventRender({
+      type: 'warning',
+      text: "I'm an warning",
+      ...commonEventProps
+    });
+  });
   it('should render error event', () => {
     testEventRender({
       type: 'error',

src/components/simulator/LogEvent.tsx

@@ -101,6 +101,14 @@ const getStyleForDirection = (direction: Direction): string => {
   return direction === Direction.MO ? styles.msg_received : styles.send_msg;
 };
 
+const renderWarning = (warning: string): JSX.Element => {
+  return (
+    <div className={styles.warning}>
+      <span>Warning: {warning}</span>
+    </div>
+  );
+};
+
 const renderError = (error: string): JSX.Element => {
   return (
     <div className={styles.error}>
@@ -109,6 +117,10 @@ const renderError = (error: string): JSX.Element => {
   );
 };
 
+const renderInfoStyles = (allStyles: any[]): string => {
+  return allStyles.join(' ');
+};
+
 const renderInfo = (info: string, extraStyles?: any[]): JSX.Element => {
   // localized text can have html entities, so this isn't as dangerous as it looks
   const infoStyle = [styles.info];
@@ -120,9 +132,6 @@ const renderInfo = (info: string, extraStyles?: any[]): JSX.Element => {
     </div>
   );
 };
-const renderInfoStyles = (allStyles: any[]): string => {
-  return allStyles.join(' ');
-};
 
 const renderAttachment = (attachment: string): JSX.Element => {
   const idx = attachment.indexOf(':');
@@ -381,6 +390,8 @@ export default class LogEvent extends React.Component<EventProps, LogEventState>
         return renderMessage(this.props.msg.text, this.props.msg.attachments, Direction.MT);
       case 'ivr_created':
         return renderMessage(this.props.msg.text, this.props.msg.attachments, Direction.MT);
+      case 'warning':
+        return renderWarning(this.props.text);
       case 'error':
         return renderError(this.props.text);
       case 'failure':
@@ -391,7 +402,7 @@ export default class LogEvent extends React.Component<EventProps, LogEventState>
         return this.renderGroupsChanged();
       case 'contact_urns_changed':
         return renderInfo('Added a URN for the contact');
-      case 'contact_field_changed':
+      case 'contact_field_changed': {
         const value = this.getValue(this.props.value);
         if (value !== '') {
           return renderInfo(
@@ -407,6 +418,7 @@ export default class LogEvent extends React.Component<EventProps, LogEventState>
             })
           );
         }
+      }
       case 'run_result_changed':
         return renderInfo(
           i18n.t('simulator.run_result_changed', 'Set result "[[field]]" to "[[value]]"', {
@@ -423,9 +435,10 @@ export default class LogEvent extends React.Component<EventProps, LogEventState>
       case 'email_created':
       case 'email_sent':
         return this.renderEmailSent();
-      case 'broadcast_created':
+      case 'broadcast_created': {
         const translation = this.props.translations[this.props.base_language];
         return renderMessage(translation.text, translation.attachments, Direction.MT);
+      }
       case 'resthook_called':
         return renderInfo(
           i18n.t('simulator.resthook_called', 'Triggered flow event "[[resthook]]"', {
@@ -475,7 +488,7 @@ export default class LogEvent extends React.Component<EventProps, LogEventState>
             topic: this.props.ticket.topic.name
           })
         );
-      case 'airtime_transferred':
+      case 'airtime_transferred': {
         const event = this.props as AirtimeTransferEvent;
         return (
           <>
@@ -494,6 +507,7 @@ export default class LogEvent extends React.Component<EventProps, LogEventState>
             )}
           </>
         );
+      }
     }
 
     // should only get here if we are get an unexpected event

src/components/simulator/__snapshots__/LogEvent.test.tsx.snap

@@ -406,3 +406,22 @@ exports[`LogEvent should render ticket_opened event 1`] = `
   </div>
 </body>
 `;
+
+exports[`LogEvent should render warning event 1`] = `
+<body>
+  <div>
+    <div
+      class="evt"
+    >
+      <div
+        class="warning"
+      >
+        <span>
+          Warning: 
+          I'm an warning
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;