chore: fix sonarqube warnings

Author: simonadomnisoru

src/core_modules/capture-core-utils/styles/withStyles.tsx

@@ -19,6 +19,12 @@ type Options = {
     withTheme?: boolean;
 }
 
+// Transform the raw style object with Emotion’s css() so that className={classes.label} continues to work as before
+const cssTransform = rawStyles => Object.keys(rawStyles).reduce((acc, key) => {
+    acc[key] = css(rawStyles[key] as any);
+    return acc;
+}, {} as any);
+
 export const withStyles =
     <S extends Record<string, Style>, T = typeof theme>(stylesOrCreator: StylesArg<S, T>, option?: Options) =>
     /* Ideally, the correct type would be: Component: React.ComponentType<P>.
@@ -35,11 +41,8 @@ export const withStyles =
                     stylesOrCreator && typeof stylesOrCreator === 'function'
                         ? stylesOrCreator(theme as T)
                         : stylesOrCreator;
-                // Transform the raw style object with Emotion’s css() so that className={classes.label} continues to work as before
-                return Object.keys(rawStyles).reduce((acc, key) => {
-                    acc[key] = css(rawStyles[key] as any);
-                    return acc;
-                }, {} as any);
+
+                return cssTransform(rawStyles);
             }, []);
 
             return option?.withTheme

src/core_modules/capture-core/components/FormFields/Generic/D2TextField.component.tsx

@@ -22,7 +22,6 @@ export class D2TextField extends Component<Props> {
         this.handleBlur = this.handleBlur.bind(this);
     }
     instance: HTMLInputElement | null = null;
-    containerInstance: HTMLDivElement | null = null;
 
     handleChange = (payload: { value?: string }, event: any) => {
         this.props.onChange && this.props.onChange(payload.value || '', event);
@@ -40,7 +39,7 @@ export class D2TextField extends Component<Props> {
         const { onChange, onBlur, value, ...passOnProps } = this.props;
 
         return (
-            <div ref={(containerInstance) => { this.containerInstance = containerInstance; }}>
+            <div>
                 <Input
                     ref={(inst: any) => { this.instance = inst; }}
                     value={value || ''}

src/core_modules/capture-core/components/FormFields/Generic/D2TrueOnly.component.tsx

@@ -31,7 +31,6 @@ class D2TrueOnlyPlain extends Component<Props> {
 
         this.labelClasses = this.buildLabelClasses();
     }
-    containerInstance: HTMLDivElement | null = null;
 
     buildLabelClasses() {
         return {
@@ -56,7 +55,6 @@ class D2TrueOnlyPlain extends Component<Props> {
 
         return (
             <div
-                ref={(containerInstance) => { this.containerInstance = containerInstance; }}
                 style={style}
             >
                 <FieldSet>

src/core_modules/capture-core/components/FormFields/Options/MultiSelectBoxes/MultiSelectBoxes.component.tsx

@@ -27,7 +27,6 @@ type Props = OwnProps & WithStyles<typeof styles>;
 class MultiSelectBoxesPlain extends Component<Props> {
     checkedValues!: Set<any> | null;
     labelClasses: any;
-    containerInstance: any;
 
     constructor(props: Props) {
         super(props);
@@ -126,7 +125,7 @@ class MultiSelectBoxesPlain extends Component<Props> {
         this.setCheckedStatusForBoxes();
 
         return (
-            <div ref={(containerInstance) => { this.containerInstance = containerInstance; }}>
+            <div>
                 <FieldSet>
                     {
                         (() => {

src/core_modules/capture-core/components/FormFields/Options/SelectVirtualizedV2/OptionsSelectVirtualized.component.tsx

@@ -70,8 +70,6 @@ class OptionsSelectVirtualizedPlain extends React.Component<Props, State> {
             )) || [];
     }
 
-    containerInstance: any;
-
     static defaultProps = {
         translations: {
             clearText: '',
@@ -221,7 +219,6 @@ class OptionsSelectVirtualizedPlain extends React.Component<Props, State> {
         return (
             <div
                 data-test="virtualized-select"
-                ref={(containerInstance) => { this.containerInstance = containerInstance; }}
             >
                 <div
                     data-test={dataTest}

src/core_modules/capture-core/components/FormFields/Options/SingleSelectBoxes/SingleSelectBoxes.component.tsx

@@ -26,7 +26,6 @@ type Props = OwnProps & WithStyles<typeof styles>;
 class SingleSelectBoxesPlain extends Component<Props> {
     checkedValues!: Set<any> | null;
     labelClasses: any;
-    containerInstance: any;
 
     constructor(props: Props) {
         super(props);
@@ -110,7 +109,7 @@ class SingleSelectBoxesPlain extends Component<Props> {
         this.setCheckedStatusForBoxes();
 
         return (
-            <div ref={(containerInstance) => { this.containerInstance = containerInstance; }}>
+            <div>
                 <FieldSet>
                     {
                         (() => {

src/core_modules/capture-ui/PolygonField/DeleteControl.component.tsx

@@ -43,10 +43,10 @@ const DeleteControlPlain = ({ onClick, disabled, leaflet }: Props) => {
     }, [onHandleClick, disabled]);
 
     useEffect(() => {
-        leafletElement && leafletElement.addTo(leaflet.map);
+        leafletElement?.addTo(leaflet.map);
     }, [leafletElement, leaflet.map]);
 
-    useEffect(() => () => leafletElement && leafletElement.remove(), [leafletElement]);
+    useEffect(() => () => leafletElement?.remove(), [leafletElement]);
 
     return null;
 };