PLU-336: show error message when invalid file selected for tiles import (#787)

## Changes
1. show error message when file is too large / invalid file type
2. change default dropzone background color

<img width="899" alt="image"
src="https://github.com/user-attachments/assets/aef903b6-934f-4932-8988-e4825840d7f0">

Author: pregnantboy

packages/frontend/src/pages/Tile/components/TableBanner/ImportCsvButton.tsx

@@ -54,13 +54,11 @@ const CHUNK_SIZE = 100
 
 const ImportStatus = ({
   columnsToCreate,
-  errorMsg,
   importStatus,
   rowsImported,
   rowsToImport,
 }: {
   columnsToCreate: string[]
-  errorMsg: string | null
   importStatus: IMPORT_STATUS
   rowsImported: number
   rowsToImport: number
@@ -83,7 +81,7 @@ const ImportStatus = ({
               isColumnDataExpanded ? <BiChevronUp /> : <BiChevronDown />
             }
           >
-            {columnsToCreate.length} column(s) to create
+            {columnsToCreate.length} column(s) will be created
           </Button>
           <Collapse in={isColumnDataExpanded}>
             <List spacing={3} mt={4}>
@@ -121,7 +119,7 @@ const ImportStatus = ({
         </Box>
       )
     case 'error':
-      return <Text color="red.500">Error: {errorMsg}</Text>
+      return null
   }
 }
 
@@ -236,6 +234,10 @@ export const ImportCsvModalContent = ({
     [],
   )
 
+  useEffect(() => {
+    setErrorMsg(null)
+  }, [file])
+
   const onImport = useCallback(async () => {
     // do not import if no rows or columns to create
     if (!result?.length && !columnsToCreate.length) {
@@ -280,7 +282,7 @@ export const ImportCsvModalContent = ({
     } catch (e) {
       setImportStatus('error')
       if (e instanceof Error) {
-        setErrorMsg(e.message)
+        setErrorMsg('Error: ' + e.message)
       }
     }
   }, [
@@ -321,6 +323,7 @@ export const ImportCsvModalContent = ({
           onChange={setFile}
           title="Upload CSV"
           name="file-upload"
+          onError={setErrorMsg}
           colorScheme="primary"
           showFileSize={true}
           accept={['.csv']}
@@ -337,14 +340,18 @@ export const ImportCsvModalContent = ({
             ) : (
               <ImportStatus
                 columnsToCreate={columnsToCreate}
-                errorMsg={errorMsg}
                 importStatus={importStatus}
                 rowsImported={rowsImported}
                 rowsToImport={rowsToImport}
               />
             )}
           </Card>
         )}
+        {errorMsg && (
+          <Text color="red.500" textStyle="caption-2" fontSize="sm" mt={1}>
+            {errorMsg}
+          </Text>
+        )}
       </ModalBody>
 
       <ModalFooter>

packages/frontend/src/theme/components/Attachment.ts

@@ -0,0 +1,52 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+import { anatomy } from '@chakra-ui/theme-tools'
+
+const parts = anatomy('attachment').parts(
+  'container',
+  'dropzone',
+  'icon',
+  'fileInfoContainer',
+  'fileInfo',
+  'fileInfoDescription',
+  'fileInfoImage',
+  'fileInfoTitle',
+  'fileInfoIcon',
+  'fileErrorIcon',
+  'fileErrorMessage',
+)
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys)
+
+const getDropzoneColors = definePartsStyle(({ colorScheme: c }) => {
+  return {
+    dropzone: {
+      borderColor: `${c}.700`,
+      bg: `${c}.100`,
+      _hover: {
+        bg: `${c}.200`,
+      },
+      _active: {
+        bg: `${c}.200`,
+      },
+    },
+  }
+})
+
+const variantOutline = definePartsStyle((props) => {
+  const colorProps = getDropzoneColors(props)
+
+  return {
+    dropzone: {
+      ...colorProps.dropzone,
+    },
+  }
+})
+
+const variants = {
+  outline: variantOutline,
+}
+
+export const Attachment = defineMultiStyleConfig({
+  variants,
+})

packages/frontend/src/theme/components/index.ts

@@ -1,3 +1,4 @@
+import { Attachment } from './Attachment'
 import { Button } from './Button'
 import { Container } from './Container'
 import { FormLabel } from './FormLabel'
@@ -20,4 +21,5 @@ export const components = {
   Sidebar,
   SingleSelect,
   Radio,
+  Attachment,
 }