Merge pull request #2457 from sarahd93/compliance_bar_color_20.08

Change visual appearance of compliance status bar
greenbone · Sep 18, 2020 · 3596949 · 3596949
2 parents eb5b320 + 78a0502
commit 3596949
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 116 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added option for "Start Task" event upon "New SecInfo arrived" condition in alerts dialog [#2418](https://github.com/greenbone/gsa/pull/2418)
 
 ### Changed
+- Changed visual appearance of compliance status bar [#2457](https://github.com/greenbone/gsa/pull/2457)
 - Changed delete icons on report format detailspage and schedule detailspage to trashcan icons [#2459](https://github.com/greenbone/gsa/pull/2459)
 - Use <predefined> to disable feed object editing and filter creation on feed status page [#2398](https://github.com/greenbone/gsa/pull/2398)
 

diff --git a/gsa/src/web/components/bar/__tests__/__snapshots__/compliancestatusbar.js.snap b/gsa/src/web/components/bar/__tests__/__snapshots__/compliancestatusbar.js.snap
@@ -6,7 +6,7 @@ exports[`ComplianceStatusBar tests should render 1`] = `
   box-sizing: content-box;
   display: inline-block;
   width: 100px;
-  background: #393637;
+  background: #c83814;
   vertical-align: middle;
   text-align: center;
 }
@@ -25,7 +25,7 @@ exports[`ComplianceStatusBar tests should render 1`] = `
 .c1 {
   height: 13px;
   width: 75%;
-  background: #fdc300;
+  background: #70c000;
 }
 
 @media print {

diff --git a/gsa/src/web/components/bar/__tests__/compliancestatusbar.js b/gsa/src/web/components/bar/__tests__/compliancestatusbar.js
@@ -68,26 +68,25 @@ describe('ComplianceStatusBar tests', () => {
     expect(element).toHaveTextContent('N/A');
   });
 
-  test('should render background for high compliance', () => {
+  test('should render colors', () => {
     const {getByTestId} = render(
       <ComplianceStatusBar complianceStatus={100} />,
     );
     const progress = getByTestId('progress');
+    const progressbarBox = getByTestId('progressbar-box');
 
-    expect(progress).toHaveStyleRule('background', Theme.paleGreen);
+    expect(progress).toHaveStyleRule('background', Theme.statusRunGreen);
+    expect(progressbarBox).toHaveStyleRule('background', Theme.errorRed);
   });
 
-  test('should render background for medium compliance', () => {
-    const {getByTestId} = render(<ComplianceStatusBar complianceStatus={75} />);
+  test('should render gray background for N/A', () => {
+    const {getByTestId} = render(<ComplianceStatusBar complianceStatus={-1} />);
     const progress = getByTestId('progress');
+    const progressbarBox = getByTestId('progressbar-box');
 
-    expect(progress).toHaveStyleRule('background', Theme.goldYellow);
-  });
-
-  test('should render background for low compliance', () => {
-    const {getByTestId} = render(<ComplianceStatusBar complianceStatus={25} />);
-    const progress = getByTestId('progress');
+    expect(progress).toHaveStyleRule('background', Theme.statusRunGreen);
+    expect(progress).toHaveStyleRule('width', '0%');
 
-    expect(progress).toHaveStyleRule('background', Theme.errorRed);
+    expect(progressbarBox).toHaveStyleRule('background', Theme.darkGray);
   });
 });
diff --git a/gsa/src/web/components/bar/__tests__/progressbar.js b/gsa/src/web/components/bar/__tests__/progressbar.js
@@ -120,4 +120,27 @@ describe('ProgressBar tests', () => {
 
     expect(progress).toHaveStyleRule('background', 'gray');
   });
+
+  test('should render box background', () => {
+    const {getByTestId} = render(
+      <ProgressBar
+        boxBackground={Theme.errorRed}
+        background="run"
+        progress="10"
+        title="Progress"
+      />,
+    );
+    const progressbarBox = getByTestId('progressbar-box');
+
+    expect(progressbarBox).toHaveStyleRule('background', Theme.errorRed);
+  });
+
+  test('should render gray box background by default', () => {
+    const {getByTestId} = render(
+      <ProgressBar background="run" progress="10" title="Progress" />,
+    );
+    const progressbarBox = getByTestId('progressbar-box');
+
+    expect(progressbarBox).toHaveStyleRule('background', Theme.darkGray);
+  });
 });
diff --git a/gsa/src/web/components/bar/compliancestatusbar.js b/gsa/src/web/components/bar/compliancestatusbar.js
@@ -26,24 +26,22 @@ import ProgressBar from 'web/components/bar/progressbar';
 
 const ComplianceStatusBar = ({complianceStatus}) => {
   let text;
+  let boxBackground;
   if (complianceStatus < 0 || complianceStatus > 100) {
     text = _('N/A');
+    boxBackground = Theme.darkGrey;
   } else {
     text = complianceStatus + '%';
+    boxBackground = Theme.errorRed;
   }
 
-  let type;
-  if (complianceStatus < 0 || complianceStatus > 100) {
-    type = 'log';
-  } else if (complianceStatus === 100) {
-    type = Theme.paleGreen;
-  } else if (complianceStatus <= 50) {
-    type = Theme.errorRed;
-  } else {
-    type = Theme.goldYellow;
-  }
   return (
-    <ProgressBar title={text} progress={complianceStatus} background={type}>
+    <ProgressBar
+      title={text}
+      progress={complianceStatus}
+      background={Theme.statusRunGreen}
+      boxBackground={boxBackground}
+    >
       {text}
     </ProgressBar>
   );

diff --git a/gsa/src/web/components/bar/progressbar.js b/gsa/src/web/components/bar/progressbar.js
@@ -28,7 +28,7 @@ const ProgressBarBox = styled.div`
   box-sizing: content-box; /* height includes border */
   display: inline-block;
   width: 100px;
-  background: ${Theme.darkGray};
+  background: ${props => props.boxBackground};
   vertical-align: middle;
   text-align: center;
 
@@ -95,9 +95,19 @@ const Progress = styled.div`
   }};
 `;
 
-const ProgressBar = ({background, children, progress, title}) => {
+const ProgressBar = ({
+  background,
+  boxBackground = Theme.darkGray,
+  children,
+  progress,
+  title,
+}) => {
   return (
-    <ProgressBarBox data-testid="progressbar-box" title={title}>
+    <ProgressBarBox
+      data-testid="progressbar-box"
+      title={title}
+      boxBackground={boxBackground}
+    >
       <Progress
         data-testid="progress"
         progress={progress}
@@ -110,6 +120,7 @@ const ProgressBar = ({background, children, progress, title}) => {
 
 ProgressBar.propTypes = {
   background: PropTypes.string,
+  boxBackground: PropTypes.string,
   progress: PropTypes.numberOrNumberString,
   title: PropTypes.string,
 };

diff --git a/gsa/src/web/pages/audits/__tests__/__snapshots__/listpage.js.snap b/gsa/src/web/pages/audits/__tests__/__snapshots__/listpage.js.snap
@@ -326,7 +326,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   justify-content: space-between;
 }
 
-.c56 {
+.c57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -411,7 +411,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   margin-left: 5px;
 }
 
-.c55 {
+.c56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -434,14 +434,14 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   margin-left: -5px;
 }
 
-.c55 > * {
+.c56 > * {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c55 > * {
+.c56 > * {
   margin-left: 5px;
 }
 
@@ -467,7 +467,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   display: inline-flex;
 }
 
-.c54 {
+.c55 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -678,7 +678,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   width: 150px;
 }
 
-.c57 {
+.c58 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -818,7 +818,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   margin-right: 5px;
 }
 
-.c58 {
+.c59 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -937,6 +937,16 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   text-align: center;
 }
 
+.c53 {
+  height: 13px;
+  box-sizing: content-box;
+  display: inline-block;
+  width: 100px;
+  background: #c83814;
+  vertical-align: middle;
+  text-align: center;
+}
+
 .c51 {
   z-index: 1;
   font-weight: bold;
@@ -954,10 +964,10 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   background: #4f91c7;
 }
 
-.c53 {
+.c54 {
   height: 13px;
   width: 50%;
-  background: #c83814;
+  background: #70c000;
 }
 
 .c52 {
@@ -1061,6 +1071,13 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
   }
 }
 
+@media print {
+  .c53 {
+    background: none;
+    border: 0;
+  }
+}
+
 @media print {
   .c51 {
     color: black;
@@ -1074,7 +1091,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
 }
 
 @media print {
-  .c53 {
+  .c54 {
     background: none;
   }
 }
@@ -1554,12 +1571,12 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
                       class="c44"
                     >
                       <div
-                        class="c49"
+                        class="c53"
                         data-testid="progressbar-box"
                         title="50%"
                       >
                         <div
-                          class="c53"
+                          class="c54"
                           data-testid="progress"
                         />
                         <div
@@ -1575,10 +1592,10 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
                       class="c0"
                     >
                       <div
-                        class="c54"
+                        class="c55"
                       >
                         <div
-                          class="c55"
+                          class="c56"
                           margin="5px"
                         >
                           <span
@@ -1671,7 +1688,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
                     colspan="5"
                   >
                     <div
-                      class="c56"
+                      class="c57"
                     >
                       <div
                         class="c2"
@@ -1688,7 +1705,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
                             role="combobox"
                           >
                             <div
-                              class="c57"
+                              class="c58"
                               width="180px"
                             >
                               <div
@@ -1767,7 +1784,7 @@ exports[`AuditPage tests should render full AuditPage 1`] = `
               class="c45"
             >
               <div
-                class="c58"
+                class="c59"
               >
                 (Applied filter: )
               </div>