From 857f8ff5109122b2b34b4738d061bd62809a9b97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Jun 2024 12:22:19 +0200
Subject: [PATCH] Simplify ErrorMarker component

Just support the actual prop in use (`isVisible`) and drop passing a
child.
---
 src/web/components/form/ErrorMarker.jsx | 15 +++++++++------
 src/web/components/form/multiselect.jsx |  2 +-
 src/web/components/form/select.jsx      |  2 +-
 src/web/components/form/textarea.jsx    |  2 +-
 src/web/components/form/textfield.jsx   |  2 +-
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/web/components/form/ErrorMarker.jsx b/src/web/components/form/ErrorMarker.jsx
index 9b081635ee..641349f2d0 100644
--- a/src/web/components/form/ErrorMarker.jsx
+++ b/src/web/components/form/ErrorMarker.jsx
@@ -7,23 +7,26 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import {styledExcludeProps} from 'web/utils/styledConfig';
 import Theme from 'web/utils/theme';
+import PropTypes from 'web/utils/proptypes';
 
-const StyledMarker = styledExcludeProps(styled.div, ['isVisible'])`
+const StyledMarker = styled.div`
   color: ${Theme.darkRed};
-  color: ${props => props.color};
   font-weight: bold;
   font-size: 19px;
   padding-bottom: 1px;
   padding-left: 4px;
-  display: ${props => (props.isVisible ? 'inline' : 'none')};
+  display: ${props => (props.$isVisible ? 'inline' : 'none')};
 `;
 
-const ErrorMarker = props => (
-  <StyledMarker {...props} data-testid="error-marker">
+const ErrorMarker = ({isVisible}) => (
+  <StyledMarker $isVisible={isVisible} data-testid="error-marker">
     ×
   </StyledMarker>
 );
 
+ErrorMarker.propTypes = {
+  isVisible: PropTypes.bool,
+};
+
 export default ErrorMarker;
diff --git a/src/web/components/form/multiselect.jsx b/src/web/components/form/multiselect.jsx
index 6ce998155c..fb6d5b6166 100644
--- a/src/web/components/form/multiselect.jsx
+++ b/src/web/components/form/multiselect.jsx
@@ -277,7 +277,7 @@ class MultiSelect extends React.Component {
                   </Menu>
                 )}
               </SelectContainer>
-              <ErrorMarker isVisible={hasError}>×</ErrorMarker>
+              <ErrorMarker isVisible={hasError} />
             </Div>
           );
         }}
diff --git a/src/web/components/form/select.jsx b/src/web/components/form/select.jsx
index ecb413f6d7..fb79cc85a7 100644
--- a/src/web/components/form/select.jsx
+++ b/src/web/components/form/select.jsx
@@ -278,7 +278,7 @@ class Select extends React.Component {
                   </Menu>
                 )}
               </SelectContainer>
-              <ErrorMarker isVisible={hasError}>×</ErrorMarker>
+              <ErrorMarker isVisible={hasError} />
             </Div>
           );
         }}
diff --git a/src/web/components/form/textarea.jsx b/src/web/components/form/textarea.jsx
index 111c4cf4b5..9bc7f71865 100644
--- a/src/web/components/form/textarea.jsx
+++ b/src/web/components/form/textarea.jsx
@@ -79,7 +79,7 @@ const TextArea = ({
         value={value}
         onChange={handleChange}
       />
-      <ErrorMarker isVisible={hasError}>×</ErrorMarker>
+      <ErrorMarker isVisible={hasError} />
     </React.Fragment>
   );
 };
diff --git a/src/web/components/form/textfield.jsx b/src/web/components/form/textfield.jsx
index 37e31dc8e0..595c669bc6 100644
--- a/src/web/components/form/textfield.jsx
+++ b/src/web/components/form/textfield.jsx
@@ -19,7 +19,7 @@ const TextField = ({hasError = false, errorContent, title, ...props}) => {
         title={hasError ? `${errorContent}` : title}
         type="text"
       />
-      <ErrorMarker isVisible={hasError}>×</ErrorMarker>
+      <ErrorMarker isVisible={hasError} />
     </React.Fragment>
   );
 };