fix(studio): missing translations show up red

modules/testing/src/backend/api.ts

@@ -70,7 +70,7 @@ export default async (bp: typeof sdk, testByBot: TestByBot) => {
     const rendered = elements.map(element => {
       return {
         id: `#!${element.id}`,
-        preview: element.previews.en
+        preview: element.previews.en // TODO: Use the bot's default language instead of hardcoded english
       }
     })
 

src/bp/ui-studio/src/web/views/Content/List.tsx

@@ -1,4 +1,5 @@
 import { AnchorButton, Button, Divider, InputGroup, Position, Tooltip } from '@blueprintjs/core'
+import classnames from 'classnames'
 import _ from 'lodash'
 import moment from 'moment'
 import React, { Component } from 'react'
@@ -7,6 +8,8 @@ import 'react-table/react-table.css'
 import { LeftToolbarButtons, Toolbar } from '~/components/Shared/Interface'
 import withLanguage from '~/components/Util/withLanguage'
 
+import style from './style.scss'
+
 class ListView extends Component<Props, State> {
   private debouncedHandleSearch
 
@@ -195,7 +198,15 @@ class ListView extends Component<Props, State> {
         Header: 'Preview',
         accessor: 'previews',
         filterable: false,
-        Cell: x => x.original.previews && x.original.previews[this.props.contentLang]
+        Cell: x => {
+          const preview = x.original.previews && x.original.previews[this.props.contentLang]
+          const className = classnames({ [style.missingTranslation]: preview.startsWith('(missing translation) ') })
+          return (
+            <React.Fragment>
+              <span className={className}>{preview}</span>
+            </React.Fragment>
+          )
+        }
       },
       {
         Header: 'Modified On',

src/bp/ui-studio/src/web/views/Content/style.scss

@@ -3,6 +3,10 @@
   height: 100%;
 }
 
+.missingTranslation {
+  color: red;
+}
+
 .modal {
   .cancel {
     position: absolute;

src/bp/ui-studio/src/web/views/Content/style.scss.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'cancel': string;
   'content': string;
+  'missingTranslation': string;
   'modal': string;
 }
 declare var cssExports: CssExports;

src/bp/ui-studio/src/web/views/FlowBuilder/common/action.jsx

@@ -88,14 +88,18 @@ class ActionItem extends Component {
       return '{' + stripDots(x) + '}'
     })
 
+    const className = classnames(style.name, {
+      [style.missingTranslation]: preview && preview.startsWith('(missing translation) ')
+    })
+
     const mustached = restoreDots(Mustache.render(htmlTpl, vars))
 
     const html = { __html: mustached }
 
     return (
-      <div className={classnames(this.props.className, style['action-item'], style['msg'])}>
+      <div className={classnames(this.props.className, style['action-item'], style.msg)}>
         <span className={style.icon}>💬</span>
-        <span className={style.name} dangerouslySetInnerHTML={html} />
+        <span className={className} dangerouslySetInnerHTML={html} />
         {this.props.children}
       </div>
     )

src/bp/ui-studio/src/web/views/FlowBuilder/common/style.scss

@@ -5,6 +5,10 @@
 
   &.msg {
     color: #1cbd57;
+
+    .missingTranslation {
+      color: red;
+    }
   }
 
   &.condition {

src/bp/ui-studio/src/web/views/FlowBuilder/common/style.scss.d.ts

@@ -7,6 +7,7 @@ interface CssExports {
   'editableInput': string;
   'fn': string;
   'icon': string;
+  'missingTranslation': string;
   'msg': string;
   'name': string;
 }