fix(uploads): SJIP-1091 display raw input for unmatch list

packages/ui/Release.md

@@ -1,3 +1,6 @@
+### 10.14.1 2024-11-14
+- fix: SJIP-1091 display raw input for upload ids
+
 ### 10.14.0 2024-11-14
 - feat: SJIP-1090 Add text transform mode to uploads modal. Update antd to 4.24.16
 

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "10.14.0",
+    "version": "10.14.1",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
@@ -117,7 +117,7 @@
         "md5": "^2.3.0",
         "npm": "^10.8.2",
         "query-string": "^7.0.1",
-        "react-grid-layout": "^1.4.4",
+        "react-grid-layout": "^1.5.0",
         "react-highlight-words": "^0.18.0",
         "react-icons": "^4.2.0",
         "react-sizeme": "^3.0.2",

packages/ui/src/components/UploadIds/UploadModal/index.tsx

@@ -62,28 +62,38 @@ const UploadModal = ({
     const [unmatch, setUnmatch] = useState<UnmatchTableItem[] | undefined>(undefined);
     const debouncedValue = useDebounce(value, 500);
 
-    const getRawValueList = () => {
-        let result = value.split(/[\n,\r ]/).filter((val) => !!val);
+    const getRawValueList = () => value.split(/[\n,\r ]/).filter((val) => !!val);
+    const getValueList = () =>
+        uniq(
+            getRawValueList().map((val) => {
+                if (textTransformMode === TextTransformMode.LOWER) {
+                    return val.toLowerCase();
+                } else if (textTransformMode === TextTransformMode.UPPER) {
+                    return val.toUpperCase();
+                }
+                return val;
+            }),
+        );
 
-        if (textTransformMode === TextTransformMode.LOWER) {
-            result = result.map((val) => val.toLowerCase());
-        } else if (textTransformMode === TextTransformMode.UPPER) {
-            result = result.map((val) => val.toUpperCase());
-        }
-
-        return result;
-    };
-    const getValueList = () => uniq(getRawValueList());
-
-    const getUnmatchList = (results: MatchTableItem[]) =>
-        difference(
+    const getUnmatchList = (results: MatchTableItem[]) => {
+        const rawList = getRawValueList();
+        const unmatchs = difference(
             getValueList(),
             results.map((item) => item.submittedId),
         ).map((id, index) => ({
             key: index,
             submittedId: id,
         }));
 
+        return unmatchs.map((unmatch) => {
+            const submittedId = rawList.find((val) => val.toLowerCase() === unmatch.submittedId.toLowerCase());
+            return {
+                key: unmatch.key,
+                submittedId: submittedId ?? unmatch.submittedId,
+            };
+        });
+    };
+
     const getMatchToCount = (match: MatchTableItem[]) =>
         without(
             uniqBy(match, ({ matchTo }) => matchTo).map(({ matchTo }) => matchTo),
@@ -103,6 +113,8 @@ const UploadModal = ({
                 setIsLoading(true);
                 const results = await fetchMatch(getValueList());
                 setMatch(results);
+
+                // use raw list
                 setUnmatch(getUnmatchList(results));
                 setIsLoading(false);
             })();