feature:manager - New screen to handler vulnerabilities (#542)

New screen of horusec-manager to handler vulnerabilities
with group of files.
![](https://user-images.githubusercontent.com/69604366/150204407-c5ace0a6-14ba-4265-a15e-fff0a8730c82.gif)

Signed-off-by: lucas.bruno <lucas.bruno@zup.com.br>

e2e/cypress/src/integration/auth-horusec/without_application_admin_spec.ts

@@ -331,37 +331,23 @@ function CheckIfExistsVulnerabilitiesAndCanUpdateSeverityAndStatus(): void {
     cy.get("li").contains("Vulnerabilities").click();
     cy.wait(1500);
 
-    cy.get('.MuiTableBody-root > :nth-child(1) > :nth-child(3)').invoke('text')
-    .then((firstHash)=>{ 
-        console.log(firstHash)
-        expect(firstHash).not.to.equal("");
-        expect(firstHash).not.to.equal(undefined);
-        expect(firstHash).not.to.equal(null);
+    // Select first vulnerability
+    cy.get('.file-list > :nth-child(1)').click();
 
-        // Select first vulnerability and open Severity dropdown
-        cy.get(":nth-child(1) > .center > .MuiFormControl-root > .MuiInputBase-root > #select").click();
-        cy.wait(500);
+    // Open severity dropdown of first vulnerability
+    cy.get(".severity-dropdown").first().click();
 
-        // Change severity to HIGH
-        cy.get('[data-value="HIGH"]').click();
+    // Change severity to CRITICAL
+    cy.get('[data-value="CRITICAL"]').click();
 
-        // Select first vulnerability and open status dropdown
-        cy.get(":nth-child(1) > :nth-child(2) > .MuiFormControl-root > .MuiInputBase-root > #select").click();
+    // Open status dropdown of first vulnerability
+    cy.get(".status-dropdown").first().click();
 
-        // Change status to Risk Accepted
-        cy.get('[data-value="Risk Accepted"]').click();
-        cy.get("button").contains("Update Vulnerabilities").click();
-        cy.wait(1500);
+    // Change status to Risk Accepted
+    cy.get('[data-value="Risk Accepted"]').click();
 
-        // Open modal of vulnerability and check if details exists
-        cy.get("[data-testid=\"icon-info\"]").first().click();
-        cy.contains("Vulnerability Details").should("exist")
-        cy.wait(1500);
-
-        cy.get("[data-testid=\"icon-close\"]").first().click();
-
-        cy.contains(firstHash).should("not.exist");
-    })
+    cy.get("button.save-vulnerabilities").click();
+    cy.wait(1500);
 }
 
 function CreateUserAndInviteToExistingWorkspace(): void {

e2e/cypress/src/integration/auth-keycloak/without_application_admin_spec.ts

@@ -333,37 +333,23 @@ function CheckIfExistsVulnerabilitiesAndCanUpdateSeverityAndStatus(): void {
     cy.get("li").contains("Vulnerabilities").click();
     cy.wait(1500);
 
-    cy.get('.MuiTableBody-root > :nth-child(1) > :nth-child(3)').invoke('text')
-    .then((firstHash)=>{ 
-        console.log(firstHash)
-        expect(firstHash).not.to.equal("");
-        expect(firstHash).not.to.equal(undefined);
-        expect(firstHash).not.to.equal(null);
+    // Select first vulnerability
+    cy.get('.file-list > :nth-child(1)').click();
 
-        // Select first vulnerability and open Severity dropdown
-        cy.get(":nth-child(1) > .center > .MuiFormControl-root > .MuiInputBase-root > #select").click();
-        cy.wait(500);
+    // Open severity dropdown of first vulnerability
+    cy.get(".severity-dropdown").first().click();
 
-        // Change severity to HIGH
-        cy.get('[data-value="HIGH"]').click();
+    // Change severity to CRITICAL
+    cy.get('[data-value="CRITICAL"]').click();
 
-        // Select first vulnerability and open status dropdown
-        cy.get(":nth-child(1) > :nth-child(2) > .MuiFormControl-root > .MuiInputBase-root > #select").click();
+    // Open status dropdown of first vulnerability
+    cy.get(".status-dropdown").first().click();
 
-        // Change status to Risk Accepted
-        cy.get('[data-value="Risk Accepted"]').click();
-        cy.get("button").contains("Update Vulnerabilities").click();
-        cy.wait(1500);
+    // Change status to Risk Accepted
+    cy.get('[data-value="Risk Accepted"]').click();
 
-        // Open modal of vulnerability and check if details exists
-        cy.get("[data-testid=\"icon-info\"]").first().click();
-        cy.contains("Vulnerability Details").should("exist")
-        cy.wait(1500);
-
-        cy.get("[data-testid=\"icon-close\"]").first().click();
-
-        cy.contains(firstHash).should("not.exist");
-    })
+    cy.get("button.save-vulnerabilities").click();
+    cy.wait(1500);
 }
 
 function CreateUserAndInviteToExistingWorkspace(): void {

manager/src/components/Button/index.tsx

@@ -22,6 +22,7 @@ import { useTranslation } from 'react-i18next';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;
   outline?: boolean;
+  outlinePrimary?: boolean;
   rounded?: boolean;
   opaque?: boolean;
   ghost?: boolean;
@@ -39,6 +40,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = ({
   text,
   outline,
+  outlinePrimary,
   rounded,
   opaque,
   ghost,
@@ -64,6 +66,7 @@ const Button: React.FC<ButtonProps> = ({
       {...props}
       isLoading={isLoading}
       outline={outline}
+      outlinePrimary={outlinePrimary}
       rounded={rounded}
       opaque={opaque}
       ghost={ghost}

manager/src/components/Button/styled.ts

@@ -18,6 +18,7 @@ import styled, { css } from 'styled-components';
 
 interface ButtonProps {
   outline?: boolean;
+  outlinePrimary?: boolean;
   rounded?: boolean;
   opaque?: boolean;
   ghost?: boolean;
@@ -79,6 +80,21 @@ const Button = styled.button<ButtonProps>`
       border: 1px solid ${({ theme }) => theme.colors.button.border};
     `};
 
+  ${({ outlinePrimary, isLoading }) =>
+    outlinePrimary && isLoading
+      ? css`
+          background: ${({ theme }) => theme.colors.button.outlineBackground};
+          border: 1px solid ${({ theme }) => theme.colors.button.disableInDark} !important;
+        `
+      : null}
+
+  ${({ outlinePrimary }) =>
+    outlinePrimary &&
+    css`
+      background: ${({ theme }) => theme.colors.button.outlineBackground};
+      border: 1px solid ${({ theme }) => theme.colors.button.primary};
+    `};
+
   ${({ ghost }) =>
     ghost &&
     css`

manager/src/components/Pagination/index.tsx

@@ -42,20 +42,22 @@ const Pagination: React.FC<Props> = ({ onChange, pagination }) => {
   };
 
   return (
-    <TablePagination
-      rowsPerPageOptions={[10, 50, 100]}
-      count={pagination.totalItems}
-      rowsPerPage={pagination.pageSize}
-      page={pagination.currentPage - 1}
-      onPageChange={handleChangePage}
-      onRowsPerPageChange={handleChangeRowsPerPage}
-      labelRowsPerPage={t('GENERAL.PAGINATION.ITENS_PAGE')}
-      labelDisplayedRows={({ from, to, count }) =>
-        `${from}-${to} ${t('GENERAL.PAGINATION.OF')} ${
-          count !== -1 ? count : to
-        }`
-      }
-    />
+    pagination.totalItems > 0 && (
+      <TablePagination
+        rowsPerPageOptions={[10, 50, 100]}
+        count={pagination.totalItems}
+        rowsPerPage={pagination.pageSize}
+        page={pagination.currentPage - 1}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        labelRowsPerPage={t('GENERAL.PAGINATION.ITENS_PAGE')}
+        labelDisplayedRows={({ from, to, count }) =>
+          `${from}-${to} ${t('GENERAL.PAGINATION.OF')} ${
+            count !== -1 ? count : to
+          }`
+        }
+      />
+    )
   );
 };
 

manager/src/components/SearchBar/index.tsx

@@ -23,15 +23,24 @@ interface Props extends InputHTMLAttributes<HTMLInputElement> {
   placeholder: string;
 }
 
-const SearchBar: React.FC<Props> = ({ placeholder, onSearch, ...rest }) => {
+const SearchBar: React.FC<Props> = ({
+  placeholder,
+  onSearch,
+  onBlur,
+  onFocus,
+  style,
+  ...rest
+}) => {
   return (
-    <Styled.Wrapper>
+    <Styled.Wrapper style={style}>
       <Icon name="search" size="14px" />
 
       <Styled.Input
         {...rest}
         placeholder={placeholder}
         onChange={(event) => onSearch(event.target.value)}
+        onBlur={onBlur}
+        onFocus={onFocus}
       />
     </Styled.Wrapper>
   );