From fc38a0190e68f5ab7b59b5b839627649086a5096 Mon Sep 17 00:00:00 2001
From: Maciej Szewczyk <maciej.szewczyk@tivix.com>
Date: Mon, 4 Mar 2024 21:32:26 +0100
Subject: [PATCH] fix rdi errors

---
 .../src/components/core/DropzoneField.tsx     |  4 +--
 .../RegistrationDataImportCreateDialog.tsx    |  9 +++--
 .../rdi/create/kobo/KoboProjectSelect.tsx     |  3 +-
 .../create/xlsx/CreateImportFromXlsxForm.tsx  | 34 +++++++++----------
 .../rdi/create/xlsx/DropzoneField.tsx         | 11 ++++--
 .../RegistrationDetails.tsx                   |  1 +
 .../AdminAreaAutocompleteMultiple.tsx         |  1 +
 7 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/core/DropzoneField.tsx b/frontend/src/components/core/DropzoneField.tsx
index c55b26c73a..03096c029d 100644
--- a/frontend/src/components/core/DropzoneField.tsx
+++ b/frontend/src/components/core/DropzoneField.tsx
@@ -44,8 +44,8 @@ export function DropzoneField({
 
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
     disabled: loading,
-    accept:
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' as unknown as Accept,
+    //@ts-ignore
+    accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
     onDrop,
   });
   const acceptedFilename =
diff --git a/frontend/src/components/rdi/create/RegistrationDataImportCreateDialog.tsx b/frontend/src/components/rdi/create/RegistrationDataImportCreateDialog.tsx
index 5bd7fc2771..98e97485f8 100644
--- a/frontend/src/components/rdi/create/RegistrationDataImportCreateDialog.tsx
+++ b/frontend/src/components/rdi/create/RegistrationDataImportCreateDialog.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import {
+  Box,
   Button,
   DialogContent,
   DialogTitle,
@@ -110,9 +111,13 @@ export function RegistrationDataImportCreateDialog(): React.ReactElement {
         </DialogTitleWrapper>
         <DialogContent>
           <FormControl variant="outlined">
-            <StyledInputLabel>{t('Import From')}</StyledInputLabel>
+            <StyledInputLabel size="small" htmlFor="import-type-select">
+              {t('Import From')}
+            </StyledInputLabel>
             <ComboBox
+              id="import-type-select"
               value={importType}
+              size="small"
               defaultValue=""
               variant="outlined"
               label=""
@@ -130,7 +135,7 @@ export function RegistrationDataImportCreateDialog(): React.ReactElement {
               </MenuItem>
             </ComboBox>
           </FormControl>
-          {importTypeForm}
+          <Box mt={2}>{importTypeForm}</Box>
         </DialogContent>
         <StyledDialogFooter data-cy="dialog-actions-container">
           <Button
diff --git a/frontend/src/components/rdi/create/kobo/KoboProjectSelect.tsx b/frontend/src/components/rdi/create/kobo/KoboProjectSelect.tsx
index 0f8e9e7940..10fb1c853a 100644
--- a/frontend/src/components/rdi/create/kobo/KoboProjectSelect.tsx
+++ b/frontend/src/components/rdi/create/kobo/KoboProjectSelect.tsx
@@ -48,10 +48,11 @@ export function KoboProjectSelect(): React.ReactElement {
   return (
     <>
       <FormControl variant="outlined">
-        <StyledInputLabel>{t('Select Project')}</StyledInputLabel>
+        <StyledInputLabel size="small">{t('Select Project')}</StyledInputLabel>
         <ComboBox
           {...field}
           variant="outlined"
+          size="small"
           label={t('Kobo Project')}
           disabled={loading}
           fullWidth
diff --git a/frontend/src/components/rdi/create/xlsx/CreateImportFromXlsxForm.tsx b/frontend/src/components/rdi/create/xlsx/CreateImportFromXlsxForm.tsx
index b7803cea28..000de1d4ae 100644
--- a/frontend/src/components/rdi/create/xlsx/CreateImportFromXlsxForm.tsx
+++ b/frontend/src/components/rdi/create/xlsx/CreateImportFromXlsxForm.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { CircularProgress } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import { Field, FormikProvider, useFormik } from 'formik';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -105,9 +105,9 @@ export function CreateImportFromXlsxForm({
   }, [xlsxImportData]);
 
   return (
-    <div>
-      <FormikProvider value={formik}>
-        <DropzoneField loading={saveXlsxLoading} />
+    <FormikProvider value={formik}>
+      <DropzoneField loading={saveXlsxLoading} />
+      <Box mt={2}>
         <Field
           name="name"
           fullWidth
@@ -116,18 +116,18 @@ export function CreateImportFromXlsxForm({
           variant="outlined"
           component={FormikTextField}
         />
-        <ScreenBeneficiaryField />
-        {saveXlsxLoading ? (
-          <CircularProgressContainer>
-            <CircularProgress />
-          </CircularProgressContainer>
-        ) : (
-          <XlsxImportDataRepresentation
-            xlsxImportData={xlsxImportData}
-            loading={saveXlsxLoading}
-          />
-        )}
-      </FormikProvider>
-    </div>
+      </Box>
+      <ScreenBeneficiaryField />
+      {saveXlsxLoading ? (
+        <CircularProgressContainer>
+          <CircularProgress />
+        </CircularProgressContainer>
+      ) : (
+        <XlsxImportDataRepresentation
+          xlsxImportData={xlsxImportData}
+          loading={saveXlsxLoading}
+        />
+      )}
+    </FormikProvider>
   );
 }
diff --git a/frontend/src/components/rdi/create/xlsx/DropzoneField.tsx b/frontend/src/components/rdi/create/xlsx/DropzoneField.tsx
index 305b18550f..ad3447a17d 100644
--- a/frontend/src/components/rdi/create/xlsx/DropzoneField.tsx
+++ b/frontend/src/components/rdi/create/xlsx/DropzoneField.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Accept, useDropzone } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
 import styled from 'styled-components';
 import { useField } from 'formik';
 import { useSnackbar } from '@hooks/useSnackBar';
@@ -31,6 +31,11 @@ export function DropzoneField({ loading }): React.ReactElement {
   const { showMessage } = useSnackbar();
   const onDrop = useCallback(
     (acceptedFiles) => {
+      // Log the MIME types of the accepted files
+      acceptedFiles.forEach((file) => {
+        console.log(file.type);
+      });
+
       if (acceptedFiles.length !== 1) {
         return;
       }
@@ -50,8 +55,8 @@ export function DropzoneField({ loading }): React.ReactElement {
   );
   const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
     disabled: loading,
-    accept:
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' as unknown as Accept,
+    //@ts-ignore
+    accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
     onDrop,
   });
 
diff --git a/frontend/src/components/rdi/details/RegistrationDetails/RegistrationDetails.tsx b/frontend/src/components/rdi/details/RegistrationDetails/RegistrationDetails.tsx
index 56063c96bd..798aa86486 100644
--- a/frontend/src/components/rdi/details/RegistrationDetails/RegistrationDetails.tsx
+++ b/frontend/src/components/rdi/details/RegistrationDetails/RegistrationDetails.tsx
@@ -34,6 +34,7 @@ export const BigValue = styled.div`
 
 const Error = styled.p`
   color: ${({ theme }: { theme: MiśTheme }) => theme.hctPalette.red};
+  font-size: 12px;
 `;
 interface RegistrationDetailsProps {
   registration: RegistrationDetailedFragment;
diff --git a/frontend/src/shared/autocompletes/AdminAreaAutocompleteMultiple.tsx b/frontend/src/shared/autocompletes/AdminAreaAutocompleteMultiple.tsx
index 33575618e5..1a28eaf829 100644
--- a/frontend/src/shared/autocompletes/AdminAreaAutocompleteMultiple.tsx
+++ b/frontend/src/shared/autocompletes/AdminAreaAutocompleteMultiple.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import get from 'lodash/get';
 import { Box, TextField } from '@mui/material';
 import Autocomplete from '@mui/lab/Autocomplete';
 import { useEffect, useState } from 'react';