Use l10n ids in extension chip

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">
+            {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

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>