From 87d84df8b438b4e7a7628421fc1a6b78a7783ac2 Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Thu, 13 May 2021 18:23:40 -0700
Subject: [PATCH] Reading in from toolbar copy from config for narrative and
 filter panels

---
 src/common/data/copy.json                  |  8 +++++---
 src/components/Toolbar.js                  | 22 ++++++++++++++++++++--
 src/components/controls/FilterListPanel.js |  7 ++++---
 src/store/initial.js                       |  6 ++++++
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index 5a123d2..9e4fe21 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -134,14 +134,16 @@
           "placeholder": "Search"
         }
       },
+      "narratives": "Narratives",
       "narratives_label": "Narratives",
-      "narrative_summary": "Follow a path through the data, from one key event to the next.",
-      "categories": "Categories",
-      "categories_label": "Categories",
+      "explore_by_narrative__title": "Explore events by narrative",
+      "explore_by_narrative__description": "Follow a path through the data, from one key event to the next.",
       "filters": "Filters",
       "filters_label": "Filters",
       "explore_by_filter__title": "Explore by filter",
       "explore_by_filter__description": "'Filters' refer to the types of incident. Select multiple filters to introduce colour-coding, up to a maximum of four filters.<br><br>If no filters are selected, all datapoints are displayed.",
+      "categories": "Categories",
+      "categories_label": "Categories",
       "explore_by_category__title": "Explore events by category",
       "explore_by_category__description": "‘Categories’ refer to the victims of a given incident.<br><br>If no categories are selected, all datapoints are displayed."
     },
diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
index c1e15f1..b7a80d9 100644
--- a/src/components/Toolbar.js
+++ b/src/components/Toolbar.js
@@ -84,10 +84,18 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarNarrativePanel() {
+    const { panels } = this.props.toolbarCopy;
+    const panelTitle = panels.narratives.label
+      ? panels.narratives.label
+      : copy[this.props.language].toolbar.narratives;
+    const panelDescription = panels.narratives.description
+      ? panels.narratives.description
+      : copy[this.props.language].toolbar.explore_by_narrative__description;
+
     return (
       <TabPanel>
-        <h2>{copy[this.props.language].toolbar.narrative_panel_title}</h2>
-        <p>{copy[this.props.language].toolbar.narrative_summary}</p>
+        <h2>{panelTitle}</h2>
+        <p>{panelDescription}</p>
         {this.props.narratives.map((narr) => {
           return (
             <div className="panel-action action">
@@ -134,6 +142,14 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarFilterPanel() {
+    const { panels } = this.props.toolbarCopy;
+    const panelTitle = panels.filters.label
+      ? panels.filters.label
+      : copy[this.props.language].toolbar.filters;
+    const panelDescription = panels.filters.description
+      ? panels.filters.description
+      : copy[this.props.language].toolbar.explore_by_filter__description;
+
     return (
       <TabPanel>
         <FilterListPanel
@@ -143,6 +159,8 @@ class Toolbar extends React.Component {
           language={this.props.language}
           coloringSet={this.props.coloringSet}
           filterColors={this.props.filterColors}
+          title={panelTitle}
+          description={panelDescription}
         />
       </TabPanel>
     );
diff --git a/src/components/controls/FilterListPanel.js b/src/components/controls/FilterListPanel.js
index adb5013..9d02e9b 100644
--- a/src/components/controls/FilterListPanel.js
+++ b/src/components/controls/FilterListPanel.js
@@ -1,7 +1,6 @@
 import React from "react";
 import Checkbox from "../atoms/Checkbox";
 import marked from "marked";
-import copy from "../../common/data/copy.json";
 import {
   aggregateFilterPaths,
   getFilterIdxFromColorSet,
@@ -30,6 +29,8 @@ function FilterListPanel({
   language,
   coloringSet,
   filterColors,
+  title,
+  description,
 }) {
   function createNodeComponent(filter, depth) {
     const [key, children] = filter;
@@ -81,10 +82,10 @@ function FilterListPanel({
 
   return (
     <div className="react-innertabpanel">
-      <h2>{copy[language].toolbar.filters}</h2>
+      <h2>{title}</h2>
       <p
         dangerouslySetInnerHTML={{
-          __html: marked(copy[language].toolbar.explore_by_filter__description),
+          __html: marked(description),
         }}
       />
       {renderTree(filters)}
diff --git a/src/store/initial.js b/src/store/initial.js
index d9df191..40219f8 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -120,6 +120,12 @@ const initial = {
           title: copy[language].toolbar.explore_by_filter__title,
           description: copy[language].toolbar.explore_by_filter__description,
         },
+        narratives: {
+          icon: DEFAULT_TAB_ICONS.NARRATIVE,
+          label: copy[language].toolbar.narratives_label,
+          title: copy[language].toolbar.explore_by_narrative__title,
+          description: copy[language].toolbar.explore_by_narrative__description,
+        },
       },
     },
     loading: false,