Change: Extract ErrorMarker from useFormValidation hook module

Hooks should not contain JSX code and should be plain JS only. Therefore
extract the ErrorMarker component from the useFormValidation module and
use `js` file suffix for the module.

src/web/components/form/ErrorMarker.jsx

@@ -0,0 +1,29 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import React from 'react';
+
+import styled from 'styled-components';
+
+import {styledExcludeProps} from 'web/utils/styledConfig';
+import Theme from 'web/utils/theme';
+
+const StyledMarker = styledExcludeProps(styled.div, ['isVisible'])`
+  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')};
+`;
+
+const ErrorMarker = props => (
+  <StyledMarker {...props} data-testid="error-marker">
+    ×
+  </StyledMarker>
+);
+
+export default ErrorMarker;

src/web/components/form/multiselect.jsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import styled from 'styled-components';
@@ -33,7 +32,7 @@ import {
   SelectedValue,
 } from './selectelements';
 
-import {Marker} from './useFormValidation';
+import ErrorMarker from './ErrorMarker';
 
 const DEFAULT_WIDTH = '250px';
 
@@ -278,7 +277,7 @@ class MultiSelect extends React.Component {
                   </Menu>
                 )}
               </SelectContainer>
-              <Marker isVisible={hasError}>×</Marker>
+              <ErrorMarker isVisible={hasError}>×</ErrorMarker>
             </Div>
           );
         }}

src/web/components/form/select.jsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import Downshift from 'downshift';
@@ -31,7 +30,7 @@ import {
   SelectedValue,
 } from './selectelements';
 
-import {Marker} from './useFormValidation';
+import ErrorMarker from './ErrorMarker';
 import {styledExcludeProps} from 'web/utils/styledConfig';
 
 const SingleSelectedValue = styled(SelectedValue)`
@@ -279,7 +278,7 @@ class Select extends React.Component {
                   </Menu>
                 )}
               </SelectContainer>
-              <Marker isVisible={hasError}>×</Marker>
+              <ErrorMarker isVisible={hasError}>×</ErrorMarker>
             </Div>
           );
         }}

src/web/components/form/textarea.jsx

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React, {useCallback} from 'react';
 import {isDefined} from 'gmp/utils/identity';
 import PropTypes from 'web/utils/proptypes';
@@ -15,7 +14,7 @@ import Theme from 'web/utils/theme';
 import withLayout from 'web/components/layout/withLayout';
 
 import {DISABLED_OPACITY} from './field';
-import {Marker} from './useFormValidation';
+import ErrorMarker from './ErrorMarker';
 import {styledExcludeProps} from 'web/utils/styledConfig';
 
 const StyledTextArea = styledExcludeProps(styled.textarea, [
@@ -80,7 +79,7 @@ const TextArea = ({
         value={value}
         onChange={handleChange}
       />
-      <Marker isVisible={hasError}>×</Marker>
+      <ErrorMarker isVisible={hasError}>×</ErrorMarker>
     </React.Fragment>
   );
 };

src/web/components/form/textfield.jsx

@@ -3,13 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import PropTypes from 'web/utils/proptypes';
 
 import Field from './field';
-import {Marker} from './useFormValidation';
+import ErrorMarker from './ErrorMarker';
 
 const TextField = ({hasError = false, errorContent, title, ...props}) => {
   return (
@@ -20,7 +19,7 @@ const TextField = ({hasError = false, errorContent, title, ...props}) => {
         title={hasError ? `${errorContent}` : title}
         type="text"
       />
-      <Marker isVisible={hasError}>×</Marker>
+      <ErrorMarker isVisible={hasError}>×</ErrorMarker>
     </React.Fragment>
   );
 };

src/web/components/form/useFormValidation.jsx → src/web/components/form/useFormValidation.js

@@ -3,34 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
-import React, {useState, useEffect, useCallback} from 'react';
-
-import styled from 'styled-components';
+import {useState, useEffect, useCallback} from 'react';
 
 import {_, _l} from 'gmp/locale/lang';
 
 import {hasValue, isDefined, isFunction} from 'gmp/utils/identity';
 
-import {styledExcludeProps} from 'web/utils/styledConfig';
-import Theme from 'web/utils/theme';
-
-const StyledMarker = styledExcludeProps(styled.div, ['isVisible'])`
-  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')};
-`;
-
-export const Marker = props => (
-  <StyledMarker {...props} data-testid="error-marker">
-    ×
-  </StyledMarker>
-);
-
 const useFormValidation = (
   validationRules,
   values,