Merge branch 'main' into chore/#71-refactor-error-reducer

DevoteamNL · Nov 27, 2023 · b7d5175 · b7d5175
2 parents 8d429ea + 710a775
commit b7d5175
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 12 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
@@ -58,8 +58,14 @@ const BenchmarkGridItem = ({ type }: { type: string }) => {
       title=""
       text=""
       highlight={t(`deployment_frequency.overall_labels.${benchmark}`)}
-      // to do: think of text colouring for different scenarios
-      textColour="positiveHighlight"
+      healthStatus={
+        {
+          'on-demand': 'positive',
+          'lt-6month': 'critical',
+          'week-month': 'neutral',
+          'month-6month': 'negative',
+        }[benchmark]
+      }
     />
   ) : (
     <CircularProgress />

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",