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
DevoteamNL · Nov 27, 2023 · 710a775 · 710a775
1 parent 607984b
commit 710a775
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 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
@@ -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
@@ -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/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css b/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.css
@@ -1,22 +1,36 @@
 .highlight {
   text-align: center;
   width: 100%;
-  font-size: 70px;
+  font-size: 42px;
 }
 
 .notification {
   text-align: right;
   font-style: italic;
 }
 
-.warning {
+.negative {
   color: #ffcc00;
 }
 
 .critical {
   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/...ins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.test.tsx b/...ins/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/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx b/.../plugins/open-dora/src/components/HighlightTextBoxComponent/HighlightTextBoxComponent.tsx
@@ -3,17 +3,17 @@ import './HighlightTextBoxComponent.css';
 
 interface HighlightTextBoxComponentProps {
   title: string;
-  textColour: 'warning' | 'critical' | 'positiveHighlight';
+  healthStatus: string;
   highlight: string;
   text?: string;
 }
 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
@@ -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",