From 80dfaa6a1ef092a066c08f4643050787b1f1fe2a Mon Sep 17 00:00:00 2001
From: Connor Hudson <cohu3291@colorado.edu>
Date: Fri, 22 Jun 2018 10:01:12 -0400
Subject: [PATCH] Use l10n ids in extension chip

---
 src/views/preview/extension-chip.jsx | 7 ++++++-
 src/views/preview/presentation.jsx   | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/views/preview/extension-chip.jsx b/src/views/preview/extension-chip.jsx
index 54c01c7e5..5213ab6f1 100644
--- a/src/views/preview/extension-chip.jsx
+++ b/src/views/preview/extension-chip.jsx
@@ -1,6 +1,7 @@
 const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
+const FormattedMessage = require('react-intl').FormattedMessage;
 require('./extension-chip.scss');
 
 const ExtensionChip = props => (
@@ -12,7 +13,10 @@ const ExtensionChip = props => (
             />
         }
         <div className="extension-content">
-            <span>{props.extensionName}</span>
+            {props.extensionL10n ?
+                <FormattedMessage id={props.extensionL10n} /> :
+                <span>{props.extensionName}</span>
+            }
             {props.hasStatus && (
                 <div className="extension-status">
                     Needs Connection
@@ -23,6 +27,7 @@ const ExtensionChip = props => (
 );
 
 ExtensionChip.propTypes = {
+    extensionL10n: PropTypes.string,
     extensionName: PropTypes.string,
     hasStatus: PropTypes.bool,
     iconURI: PropTypes.string
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 3b31f3aef..530a985e1 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -268,10 +268,11 @@ const PreviewPresentation = ({
                             <FlexRow className="extension-list">
                                 {extensions && extensions.map(extension => (
                                     <ExtensionChip
+                                        extensionL10n={extension.l10nId}
                                         extensionName={extension.name}
                                         hasStatus={extension.hasStatus}
                                         iconURI={extension.icon && `/svgs/project/${extension.icon}`}
-                                        key={extension.name}
+                                        key={extension.name || extension.l10nId}
                                     />
                                 ))}
                             </FlexRow>