From de335d5e0f5a36b698647f7eb2e113152068c731 Mon Sep 17 00:00:00 2001
From: Suchitra Swain <suchitraswain.2012gmail.com>
Date: Sun, 19 Oct 2025 13:47:33 +0200
Subject: [PATCH] fix: show proper error state in import notifications

- Fix import notification showing 'Imported 0 items' when imports fail
- Add new translation key for failed import messages
- Update notification logic to prioritize error states over success
- Add visual error styling for failed import notifications
- Fix icon import file extensions from .js to .tsx

Fixes #2448
---
 public/locales/en/files.json                  |  1 +
 .../file-import-status/FileImportStatus.css   | 10 +++++++++
 .../file-import-status/FileImportStatus.js    | 22 ++++++++++++-------
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index a50098709..24998044b 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -113,6 +113,7 @@
   "filesImportStatus": {
     "imported": "{count, plural, one {Imported 1 item} other {Imported {count} items}}",
     "importing": "{count, plural, one {Importing 1 item} other {Importing {count} items}}",
+    "failed": "{count, plural, one {Failed to import 1 item} other {Failed to import {count} items}}",
     "toggleDropdown": "Toggle dropdown",
     "closeDropdown": "Close dropdown",
     "count": "{count} of {count}"
diff --git a/src/files/file-import-status/FileImportStatus.css b/src/files/file-import-status/FileImportStatus.css
index eef38099d..d14ffbe7d 100644
--- a/src/files/file-import-status/FileImportStatus.css
+++ b/src/files/file-import-status/FileImportStatus.css
@@ -54,4 +54,14 @@
 
 .fileImportStatusName {
     flex: 1 1;
+}
+
+.fileImportStatusError {
+    background: #fff5f5 !important;
+    border-color: #feb2b2 !important;
+}
+
+.fileImportStatusError .fileImportStatusButton {
+    background: #fff5f5 !important;
+    color: #c53030 !important;
 }
\ No newline at end of file
diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js
index 5ea3c2a02..37aa6432c 100644
--- a/src/files/file-import-status/FileImportStatus.js
+++ b/src/files/file-import-status/FileImportStatus.js
@@ -4,13 +4,13 @@ import PropTypes from 'prop-types'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 // Icons
-import DocumentIcon from '../../icons/GlyphDocGeneric.js'
-import FolderIcon from '../../icons/GlyphFolder.js'
+import DocumentIcon from '../../icons/GlyphDocGeneric.tsx'
+import FolderIcon from '../../icons/GlyphFolder.tsx'
 import './FileImportStatus.css'
-import GlyphSmallArrows from '../../icons/GlyphSmallArrow.js'
-import GlyphTick from '../../icons/GlyphTick.js'
-import GlyphCancel from '../../icons/GlyphCancel.js'
-import GlyphSmallCancel from '../../icons/GlyphSmallCancel.js'
+import GlyphSmallArrows from '../../icons/GlyphSmallArrow.tsx'
+import GlyphTick from '../../icons/GlyphTick.tsx'
+import GlyphCancel from '../../icons/GlyphCancel.tsx'
+import GlyphSmallCancel from '../../icons/GlyphSmallCancel.tsx'
 import ProgressBar from '../../components/progress-bar/ProgressBar.js'
 
 const Import = (job, t) =>
@@ -109,12 +109,16 @@ export const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doF
   }
 
   const numberOfImportedItems = !filesFinished.length ? 0 : filesFinished.reduce((prev, finishedFile) => prev + finishedFile.message.entries.length, 0)
+  const numberOfFailedItems = !filesErrors.length ? 0 : filesErrors.reduce((prev, failedFile) => prev + failedFile.message.entries.length, 0)
   const numberOfPendingItems = filesPending.reduce((total, pending) => total + groupByPath(pending.message.entries).size, 0)
   const progress = Math.floor(filesPending.reduce((total, { message: { progress } }) => total + progress, 0) / filesPending.length)
 
+  const hasErrors = numberOfFailedItems > 0 && !filesPending.length
+  const containerClass = hasErrors ? 'fileImportStatusError' : ''
+
   return (
     <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 14, pointerEvents: 'none' }}>
-      <div className="relative br1 dark-gray w-40 center ba b--light-gray bg-white" style={{ pointerEvents: 'auto' }}>
+      <div className={`relative br1 dark-gray w-40 center ba b--light-gray bg-white ${containerClass}`} style={{ pointerEvents: 'auto' }}>
         <div
           tabIndex="0"
           onClick={() => setExpanded(!expanded)}
@@ -127,7 +131,9 @@ export const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doF
           <span>
             { filesPending.length
               ? `${t('filesImportStatus.importing', { count: numberOfPendingItems })} (${progress}%)`
-              : t('filesImportStatus.imported', { count: numberOfImportedItems })
+              : numberOfFailedItems > 0
+                ? t('filesImportStatus.failed', { count: numberOfFailedItems })
+                : t('filesImportStatus.imported', { count: numberOfImportedItems })
             }
           </span>
           <div className="flex items-center">