From 710a77566f54758347a3b0443b155974185c09bb Mon Sep 17 00:00:00 2001
From: Damjan Jelic <103260312+duke-b@users.noreply.github.com>
Date: Mon, 27 Nov 2023 14:48:17 +0100
Subject: [PATCH] Feature/#nn graphic update (#115)

* #92-label-deployment-frequency-overview

* Feature #92: Added translation

* feature #92 added tests

* Feature #92 - test adjustment

* Feature #92 added translation to the tests

* Feature #92 fixed tests

* Constantinopolis: Ignored tests for i18n

* Adjusted look and feel for the overview

* feature/#nn graphic update: resolved conflicts

* feature/#nn graphic update: prettier cleanup

* feature/#nn graphic update: prettier cleanup

* feature/#nn graphic update: map change

* feature/#nn graphic update: removed a comment
---
 .../DashboardComponent/DashboardComponent.css |  6 ++++++
 .../DashboardComponent/DashboardComponent.tsx | 16 ++++++++++++---
 .../HighlightTextBoxComponent.css             | 20 ++++++++++++++++---
 .../HighlightTextBoxComponent.test.tsx        |  4 ++--
 .../HighlightTextBoxComponent.tsx             |  8 ++++----
 .../open-dora/src/locales/en/translation.json |  3 ++-
 6 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css
index 6aeb8db..a5de725 100644
--- a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css
+++ b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.css
@@ -39,3 +39,9 @@
   height: 100%;
   padding: 15px;
 }
+
+h1 {
+  font-style: italic;
+  /* TODO: Orange for Duch version */
+  color: blueviolet;
+}
diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
index 9293d3d..2c88b30 100644
--- a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
@@ -156,7 +156,9 @@ export const DashboardComponent = ({
                 <Grid container>
                   <Grid item xs={3}>
                     <HighlightTextBoxComponent
-                      title=""
+                      title={t(
+                        'deployment_frequency.labels.deployment_frequency_overall',
+                      )}
                       text=""
                       highlight={
                         dfOverview
@@ -165,8 +167,16 @@ export const DashboardComponent = ({
                             )
                           : t('custom_errors.data_unavailable')
                       }
-                      // to do: think of text colouring for different scenarios
-                      textColour="positiveHighlight"
+                      healthStatus={
+                        (dfOverview &&
+                          {
+                            'on-demand': 'positive',
+                            'lt-6month': 'critical',
+                            'week-month': 'neutral',
+                            'month-6month': 'negative',
+                          }[dfOverview]) ||
+                        'neutral'
+                      }
                     />
                   </Grid>
                 </Grid>
diff --git a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
index 64033d3..9e1abe2 100644
--- a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
+++ b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
@@ -1,7 +1,7 @@
 .highlight {
   text-align: center;
   width: 100%;
-  font-size: 70px;
+  font-size: 42px;
 }
 
 .notification {
@@ -9,7 +9,7 @@
   font-style: italic;
 }
 
-.warning {
+.negative {
   color: #ffcc00;
 }
 
@@ -17,6 +17,20 @@
   color: red;
 }
 
-.positiveHighlight {
+.positive {
   color: #198754;
 }
+
+.neutral {
+  color: default;
+}
+
+.highlightTextBoxBorder {
+  padding: 20px;
+  border-style: hidden;
+  background-color: #333333;
+}
+
+.margin-left-offset-m25 {
+  margin: 0 0 0 -8px;
+}
diff --git a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx
index 203d2a2..a3622aa 100644
--- a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx
@@ -7,7 +7,7 @@ describe('HighlightTextBoxComponent', () => {
     const { getByText, queryByText } = render(
       <HighlightTextBoxComponent
         title="example title"
-        textColour="warning"
+        healthStatus="warning"
         highlight="example highlight"
       />,
     );
@@ -23,7 +23,7 @@ describe('HighlightTextBoxComponent', () => {
     const { queryByText } = render(
       <HighlightTextBoxComponent
         title="example title"
-        textColour="warning"
+        healthStatus="warning"
         highlight="example highlight"
         text="example text"
       />,
diff --git a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
index 07e9d62..9e7be05 100644
--- a/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
@@ -3,7 +3,7 @@ import './HighlightTextBoxComponent.css';
 
 interface HighlightTextBoxComponentProps {
   title: string;
-  textColour: 'warning' | 'critical' | 'positiveHighlight';
+  healthStatus: string;
   highlight: string;
   text?: string;
 }
@@ -11,9 +11,9 @@ export const HighlightTextBoxComponent = (
   props: HighlightTextBoxComponentProps,
 ) => {
   return (
-    <div>
-      <h1>{props.title}</h1>
-      <div className={props.textColour}>
+    <div className="highlightTextBoxBorder">
+      <h1 className="margin-left-offset-m25 headerStyle">{props.title}</h1>
+      <div className={props.healthStatus}>
         <div className="highlight">{props.highlight}</div>
       </div>
       <div className="notification">{props.text}</div>
diff --git a/backstage-plugin/plugins/open-dora/src/locales/en/translation.json b/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
index fa3916c..2f0e798 100644
--- a/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
+++ b/backstage-plugin/plugins/open-dora/src/locales/en/translation.json
@@ -2,7 +2,8 @@
   "deployment_frequency": {
     "labels": {
       "deployment_frequency": "Deployment Frequency",
-      "deployment_frequency_average": "Deployment Frequency Average"
+      "deployment_frequency_average": "Deployment Frequency Average",
+      "deployment_frequency_overall": "Deployment frequency overall"
     },
     "overall_labels": {
       "lt-6month": "Fewer than once per six months",