updates vizes to respect locale, performs urlswap by locale

packages/cms/app/pages/Profile.jsx

@@ -8,7 +8,7 @@ import libs from "../../src/utils/libs";
 class Profile extends Component {
 
   getChildContext() {
-    const {formatters, profile, router} = this.props;
+    const {formatters, locale, profile, router} = this.props;
     const {variables} = profile;
     return {
       formatters: formatters.reduce((acc, d) => {
@@ -18,7 +18,8 @@ class Profile extends Component {
         return acc;
       }, {}),
       router,
-      variables
+      variables,
+      locale
     };
   }
 
@@ -39,16 +40,18 @@ class Profile extends Component {
 
 Profile.childContextTypes = {
   formatters: PropTypes.object,
+  locale: PropTypes.string,
   router: PropTypes.object,
   variables: PropTypes.object
 };
 
 Profile.need = [
-  fetchData("profile", "/api/profile/<pslug>/<pid>"),
+  fetchData("profile", "/api/profile/<pslug>/<pid>?locale=<i18n.locale>"),
   fetchData("formatters", "/api/formatters")
 ];
 
 export default connect(state => ({
   formatters: state.data.formatters,
+  locale: state.i18n.locale,
   profile: state.data.profile
 }))(Profile);

packages/cms/src/api/mortarRoute.js

@@ -207,7 +207,7 @@ module.exports = function(app) {
         // Generators use <id> as a placeholder. Replace instances of <id> with the provided id from the URL
         // The .catch here is to handle malformed API urls, returning an empty object
         const fetches = requests.map(r => {
-          let url = urlSwap(r, {...req.params, ...cache, ...attr});
+          let url = urlSwap(r, {...req.params, ...cache, ...attr, locale});
           if (url.indexOf("http") !== 0) {
             const origin = `http${ req.connection.encrypted ? "s" : "" }://${ req.headers.host }`;
             url = `${origin}${url.indexOf("/") === 0 ? "" : "/"}${url}`;

packages/cms/src/components/Viz/index.jsx

@@ -16,12 +16,15 @@ class Viz extends Component {
   }
 
   render() {
-    const {formatters, variables} = this.context;
+    const {formatters} = this.context;
+
+    const variables = this.props.variables || this.context.variables;
+    const locale = this.props.locale || this.context.locale;
 
     const {config, configOverride, className, options, slug} = this.props;
 
     // clone config object to allow manipulation
-    const vizProps = propify(config.logic, formatters, variables);
+    const vizProps = propify(config.logic, formatters, variables, locale);
 
     // If the result of propify has an "error" property, then the provided javascript was malformed and propify
     // caught an error. Instead of attempting to render the viz, simply show the error to the user.
@@ -56,6 +59,7 @@ class Viz extends Component {
 
 Viz.contextTypes = {
   formatters: PropTypes.object,
+  locale: PropTypes.string,
   updateSource: PropTypes.func,
   variables: PropTypes.object
 };

packages/cms/src/components/cards/GeneratorCard.jsx

@@ -218,7 +218,7 @@ class GeneratorCard extends Component {
         >
 
           <div className="pt-dialog-body">
-            <GeneratorEditor preview={preview} data={minData} variables={variables} type={type} />
+            <GeneratorEditor preview={preview} locale={locale} data={minData} variables={variables} type={type} />
           </div>
           <FooterButtons
             onDelete={this.maybeDelete.bind(this)}

packages/cms/src/components/cards/VisualizationCard.jsx

@@ -96,7 +96,7 @@ class VisualizationCard extends Component {
     if (!minData) return <Loading />;
 
     const {formatters} = this.context;
-    const {selectors, type, variables, parentArray, item, preview} = this.props;
+    const {selectors, type, variables, parentArray, item, preview, locale} = this.props;
 
     minData.selectors = selectors;
     const {logic} = varSwapRecursive(minData, formatters, variables);
@@ -135,11 +135,11 @@ class VisualizationCard extends Component {
         </Alert>
 
         {/* title & edit toggle button */}
-        <h5 className="cms-card-header">
+        {locale === "en" && <h5 className="cms-card-header">
           <button className="cms-button" onClick={this.openEditor.bind(this)}>
             Edit <span className="pt-icon pt-icon-cog" />
           </button>
-        </h5>
+        </h5> }
 
         {/* reorder buttons */}
         { parentArray &&
@@ -166,7 +166,7 @@ class VisualizationCard extends Component {
             onSave={this.save.bind(this)}
           />
         </Dialog>
-        { logic ? <Viz config={{logic}} configOverride={{height, scrollContainer: "#item-editor"}} options={false} /> : <p>No configuration defined.</p> }
+        { logic ? <Viz config={{logic}} locale={locale} variables={variables} configOverride={{height, scrollContainer: "#item-editor"}} options={false} /> : <p>No configuration defined.</p> }
       </div>
     );
   }

packages/cms/src/components/editors/GeneratorEditor.jsx

@@ -85,12 +85,12 @@ class GeneratorEditor extends Component {
   previewPayload(forceSimple) {
     const {data} = this.state;
     const {api} = data;
-    const {preview, variables} = this.props;
+    const {preview, variables, locale} = this.props;
     if (api) {
       // The API will have an <id> in it that needs to be replaced with the current preview.
       // Use urlSwap to swap ANY instances of variables between brackets (e.g. <varname>)
-      // With its corresponding value.
-      const url = urlSwap(api, Object.assign({}, variables, {id: preview}));
+      // With its corresponding value. Same goes for locale
+      const url = urlSwap(api, Object.assign({}, variables, {id: preview, locale}));
       axios.get(url).then(resp => {
         const payload = resp.data;
         let {simple} = this.state;

packages/cms/src/profile/ProfileBuilder.jsx

@@ -47,14 +47,6 @@ class ProfileBuilder extends Component {
     });
   }
 
-  getChildContext() {
-    const {formatters} = this.context;
-    const {variablesHash, currentSlug} = this.state;
-    const variables = variablesHash[currentSlug] ? variablesHash[currentSlug].en : {};
-    // TODO: how to send down proper lang via context?
-    return {formatters, variables};
-  }
-
   /**
    * Decode HTML elements such as &. Taken from:
    * https://stackoverflow.com/questions/3700326/decode-amp-back-to-in-javascript
@@ -579,11 +571,6 @@ class ProfileBuilder extends Component {
   }
 }
 
-ProfileBuilder.childContextTypes = {
-  formatters: PropTypes.object,
-  variables: PropTypes.object
-};
-
 ProfileBuilder.contextTypes = {
   formatters: PropTypes.object
 };

packages/cms/src/profile/TopicEditor.jsx

@@ -359,6 +359,7 @@ class TopicEditor extends Component {
             <VisualizationCard
               key={v.id}
               item={v}
+              locale="en"
               preview={preview}
               onDelete={this.onDelete.bind(this)}
               type="topic_visualization"
@@ -369,6 +370,22 @@ class TopicEditor extends Component {
             />
           )}
         </div>
+        {locale && <div className="cms-card-list visualizations">
+          { minData.visualizations && minData.visualizations.map(v =>
+            <VisualizationCard
+              key={v.id}
+              item={v}
+              locale={locale}
+              preview={preview}
+              onDelete={this.onDelete.bind(this)}
+              type="topic_visualization"
+              variables={variables[locale]}
+              selectors={minData.selectors.map(s => Object.assign({}, s))}
+              parentArray={minData.visualizations}
+              onMove={this.onMove.bind(this)}
+            />
+          )}
+        </div>}
       </div>
     );
   }

packages/cms/src/utils/FUNC.js

@@ -54,11 +54,12 @@ function func2obj(func) {
 
 }
 
-function parse(config, formatters = {}) {
+function parse(config, formatters = {}, locale = "en") {
 
   const globals = {
     formatters,
-    libs
+    libs,
+    locale
   };
 
   function parseFunction(obj) {

packages/cms/src/utils/d3plusPropify.js

@@ -1,14 +1,14 @@
 import {assign} from "d3plus-common";
 import {parse} from "./FUNC";
 
-export default (logic, formatters = {}, variables = {}) => {
+export default (logic, formatters = {}, variables = {}, locale = "en") => {
 
   let config;
 
   // The logic provided might be malformed. Wrap it in a try/catch to be sure we don't 
   // crash / RSOD whatever page is making use of propify.
   try {
-    config = parse({vars: ["variables"], logic}, formatters)(variables);
+    config = parse({vars: ["variables"], logic}, formatters, locale)(variables);
   }
   // If the javascript fails, return a special error object for the front-end to use.
   catch (e) {