From 1e3433274bffc698e00e57866969117f2912a015 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <mail@d-koppenhagen.de>
Date: Tue, 26 Oct 2021 20:12:45 +0200
Subject: [PATCH] feat(PageHelp): make PageHelp messages configurable

---
 messages_example.json                 |  5 ++++-
 public/messages.json                  |  5 ++++-
 src/components/PageHelp/PageHelp.tsx  | 11 ++++++-----
 src/context/MessagesContext/index.tsx |  3 +++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/messages_example.json b/messages_example.json
index 0f3d0f7..677929f 100644
--- a/messages_example.json
+++ b/messages_example.json
@@ -42,6 +42,7 @@
         ]
       }
     ],
+    "quadrantsPreDescription": "The quadrants are:",
     "quadrants": [
       {
         "name": "Languages and Frameworks",
@@ -60,6 +61,7 @@
         "description": "(including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of."
       }
     ],
+    "ringsPreDescription": "Each of the items is classified in one of these rings:",
     "rings": [
       {
         "name": "Adopt",
@@ -82,7 +84,8 @@
       "href": "https://github.com/AOEpeople/aoe_technology_radar",
       "name": "AOE Tech Radar on Github",
       "description": "Contributions and source code of the AOE Tech Radar are on github:"
-    }
+    },
+    "headlinePrefix": "How to use the"
   },
   "pageOverview": {
     "title": "Technologies Overview"
diff --git a/public/messages.json b/public/messages.json
index 0f3d0f7..677929f 100644
--- a/public/messages.json
+++ b/public/messages.json
@@ -42,6 +42,7 @@
         ]
       }
     ],
+    "quadrantsPreDescription": "The quadrants are:",
     "quadrants": [
       {
         "name": "Languages and Frameworks",
@@ -60,6 +61,7 @@
         "description": "(including AOE internal Services): Here we include infrastructure platforms and services. We also use this category to communicate news about AOE services that we want all AOE teams to be aware of."
       }
     ],
+    "ringsPreDescription": "Each of the items is classified in one of these rings:",
     "rings": [
       {
         "name": "Adopt",
@@ -82,7 +84,8 @@
       "href": "https://github.com/AOEpeople/aoe_technology_radar",
       "name": "AOE Tech Radar on Github",
       "description": "Contributions and source code of the AOE Tech Radar are on github:"
-    }
+    },
+    "headlinePrefix": "How to use the"
   },
   "pageOverview": {
     "title": "Technologies Overview"
diff --git a/src/components/PageHelp/PageHelp.tsx b/src/components/PageHelp/PageHelp.tsx
index 859c90c..e381cb7 100644
--- a/src/components/PageHelp/PageHelp.tsx
+++ b/src/components/PageHelp/PageHelp.tsx
@@ -14,11 +14,12 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
   const { pageHelp } = useMessages();
 
   if (pageHelp) {
-    const { paragraphs, quadrants, rings, sourcecodeLink } = pageHelp;
+    const { paragraphs, quadrants, rings, sourcecodeLink, headlinePrefix, quadrantsPreDescription, ringsPreDescription } = pageHelp;
+    const title = `${headlinePrefix || 'How to use the'} ${radarName}`;
     return (
       <Fadeable leaving={leaving} onLeave={onLeave}>
-        <SetTitle title={"How to use the " + radarName} />
-        <HeroHeadline>How to use the {radarName}</HeroHeadline>
+        <SetTitle title={title}/>
+        <HeroHeadline>{title}</HeroHeadline>
         <div className="fullpage-content">
           {paragraphs.map(({ headline, values }) => (
             <React.Fragment key={headline}>
@@ -29,7 +30,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
             </React.Fragment>
           ))}
 
-          <p>The quadrants are:</p>
+          <p>{quadrantsPreDescription ?? "The quadrants are:"}</p>
           <ul>
             {quadrants.map(({ name, description }) => (
               <li key={name}>
@@ -38,7 +39,7 @@ const PageHelp: React.FC<Props> = ({ leaving, onLeave }) => {
             ))}
           </ul>
 
-          <p>Each of the items is classified in one of these rings:</p>
+          <p>{ringsPreDescription ?? "Each of the items is classified in one of these rings:"}</p>
           <ul>
             {rings.map(({ name, description }) => (
               <li key={name}>
diff --git a/src/context/MessagesContext/index.tsx b/src/context/MessagesContext/index.tsx
index e29282d..8f99bc6 100644
--- a/src/context/MessagesContext/index.tsx
+++ b/src/context/MessagesContext/index.tsx
@@ -18,13 +18,16 @@ interface Paragraph {
 
 interface PageHelp {
   paragraphs: Paragraph[];
+  quadrantsPreDescription?: string;
   quadrants: Quadrant[];
   rings: Ring[];
+  ringsPreDescription?: string;
   sourcecodeLink?: {
     href: string;
     name: string;
     description: string;
   };
+  headlinePrefix?: string
 }
 
 interface PageOverview {