render error msg if metadata["tags"] is a String

Author: ashmaroli

src/components/metadata/MetaTags.js

@@ -63,15 +63,22 @@ export class MetaTags extends Component {
   }
 
   render() {
-    const { fieldValue } = this.props;
-    const pageTags = this.state.pageTags.filter(
+    const { pageTags } = this.state;
+
+    if (pageTags.length > 0 && !(pageTags instanceof(Array))) {
+      return (
+        <span className="meta-error">
+          Invalid array of tags! Found string: <b>"{pageTags}"</b>
+        </span>
+      );
+    }
+
+    const tagPool = pageTags.filter(
       function(tag, index, self) {
         return index == self.indexOf(tag);
       }
     );
 
-    const tagPool = pageTags || fieldValue;
-
     const tags = _.map(tagPool, (tag, i) => {
       return (
         <span key={i} className="tag">

src/components/metadata/tests/metatags.spec.js

@@ -38,6 +38,14 @@ describe('Components::MetaTags', () => {
     expect(editable.node).toBeTruthy();
   });
 
+  it('should render an error if fieldValue prop is a String', () => {
+    const { component, editable } = setup(Object.assign({}, defaultProps, {
+      fieldValue: 'foo'
+    }));
+    expect(component.find('.meta-error').text()).toEqual('Invalid array of tags! Found string: "foo"');
+    expect(editable.node).toBeFalsy();
+  });
+
   it('should create tags on certain keypresses', () => {
     const { component, editable } = setup();
     editable.node.value = 'foo';

src/styles/datagui.scss

@@ -365,4 +365,10 @@
     color: white;
     background: #2b2b2b;
   }
+  .meta-error {
+    display: inline-block;
+    height: 48px;
+    margin-left: 15px;
+    padding: 14px 0;
+  }
 }

src/styles/metafields.scss

@@ -316,6 +316,20 @@
       }
     }
   }
+
+  .meta-error {
+    display: flex;
+    padding: 5px;
+    background-color: lighten($dark-red, 37%);
+  }
+}
+
+.meta-error {
+  color: $dark-red;
+  b {
+    margin-left: 5px;
+    color: $dark-red;
+  }
 }
 
 .tags-wrap {