142 remove url encoding when creating dataset and files (#189)

* when upload the file decode filename to exclude special characters

* utilize <mark> tag to highlight correctly

Author: longshuicy

frontend/package-lock.json

@@ -46,6 +46,7 @@
 		"babel-polyfill": "^6.26.0",
 		"classnames": "^2.2.6",
 		"date-fns": "^2.28.0",
+		"html-react-parser": "^3.0.4",
 		"jquery": "^3.6.0",
 		"jwt-decode": "^3.0.0",
 		"prop-types": "^15.7.2",

frontend/package.json

@@ -6,6 +6,8 @@ import ArticleIcon from "@mui/icons-material/Article";
 import {parseDate} from "../../utils/common";
 import {theme} from "../../theme";
 
+import parse from "html-react-parser";
+
 export function SearchResult(props) {
 
 	const {data} = props;
@@ -23,13 +25,13 @@ export function SearchResult(props) {
 								{
 									item._index === "dataset" ?
 										<MuiLink component={Link} to={`/datasets/${item._id}`}
-											  sx={{ fontWeight: 600, fontSize: "18px"}}>
-											{item.name}
+											  sx={{ fontWeight: "bold", fontSize: "18px"}}>
+											{parse(item.name)}
 										</MuiLink>
 										:
 										<MuiLink component={Link} to={`/files/${item._id}?dataset=${item.dataset_id}`}
-											  sx={{ fontWeight: 600, fontSize: "18px"}}>
-											{item.name}
+											  sx={{ fontWeight: "bold", fontSize: "18px"}}>
+											{parse(item.name)}
 										</MuiLink>
 								}
 							</React.Fragment>
@@ -39,13 +41,13 @@ export function SearchResult(props) {
 								<Typography variant="body2" color={theme.palette.secondary.light}>
 									{
 										item._index === "dataset" ?
-										`Created by ${item.author} at ${parseDate(item.created)}`
+										`Created by ${parse(item.author)} at ${parseDate(item.created)}`
 										:
-										`Created by ${item.creator} at ${parseDate(item.created)}`
+										`Created by ${parse(item.creator)} at ${parseDate(item.created)}`
 									}
 								</Typography>
 								<Typography variant="body2" color={theme.palette.secondary.dark}>
-									{ item._index === "dataset" ? item.description : `${item.content_type} | ${item.bytes} bytes`}
+									{ item._index === "dataset" ? parse(item.description) : `${item.content_type} | ${item.bytes} bytes`}
 								</Typography>
 							</React.Fragment>
 						}

frontend/src/components/search/SearchResult.tsx

@@ -104,3 +104,9 @@ body {
     border-bottom: 1px solid #868E96!important;
     font-weight: bold;
 }
+
+mark{
+	font-weight: bold;
+	background: inherit;
+	color: inherit;
+}