From 35595bef110b91010eb0f1627efe231b7edb2ffd Mon Sep 17 00:00:00 2001 From: Aries Date: Wed, 4 Jun 2025 16:52:27 +0800 Subject: [PATCH] optimize error text notification in searched item details (#7885) Co-authored-by: zhouwenxuan --- .../dirent-detail/detail/body/index.css | 8 +++++ .../src/components/search/details/index.js | 35 +++++++++++++++++-- .../src/metadata/hooks/metadata-details.js | 8 ++++- 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/dirent-detail/detail/body/index.css b/frontend/src/components/dirent-detail/detail/body/index.css index 9dcfb94242..d3b588cd89 100644 --- a/frontend/src/components/dirent-detail/detail/body/index.css +++ b/frontend/src/components/dirent-detail/detail/body/index.css @@ -6,3 +6,11 @@ overflow-x: hidden; padding: 8px; } + +.detail-body.dirent-info.error { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/frontend/src/components/search/details/index.js b/frontend/src/components/search/details/index.js index 51ab82c3d4..c7c3c2ddc6 100644 --- a/frontend/src/components/search/details/index.js +++ b/frontend/src/components/search/details/index.js @@ -8,12 +8,15 @@ import { Repo } from '../../../models'; import { MetadataStatusProvider } from '../../../hooks'; import Details from './details'; import LibDetail from '../../dirent-detail/lib-details'; +import { Body, Header } from '../../dirent-detail/detail'; +import { gettext } from '../../../utils/constants'; import './index.css'; const SearchedItemDetails = ({ repoID, path, dirent }) => { const [repoInfo, setRepoInfo] = useState(null); const [direntDetail, setDirentDetail] = useState(null); + const [errMessage, setErrMessage] = useState(null); useEffect(() => { seafileAPI.getRepoInfo(repoID).then(res => { @@ -31,6 +34,7 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => { const fetchData = async () => { if (!repoID || !path || !dirent || dirent.isLib) { setDirentDetail(null); + setErrMessage(null); return; } @@ -41,11 +45,18 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => { { signal: controller.signal } ); setDirentDetail(res.data); + setErrMessage(null); } catch (error) { - if (error.name !== 'AbortError') { - const errMessage = Utils.getErrorMsg(error); - toaster.danger(errMessage); + if (error.name === 'AbortError') { + return; // Ignore abort errors } + if (error.response && error.response.status === 404) { + const err = `${dirent.type === 'file' ? 'File' : 'Folder'} does not exist`; + setErrMessage(err); + return; + } + const errMessage = Utils.getErrorMsg(error); + toaster.danger(errMessage); } }; @@ -59,6 +70,22 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => { if (!repoInfo) return; + if (errMessage) { + return ( +
+
+
+ + {gettext(errMessage)} + +
+
+ ); + } + if (dirent.isLib) { return (
@@ -80,6 +107,7 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => { dirent={dirent} direntDetail={direntDetail} direntType={dirent?.type !== 'file' ? 'dir' : 'file'} + onErrMessage={(message) => setErrMessage(message)} >
{ path={parentDir} dirent={dirent} direntDetail={direntDetail} + errMessage={errMessage} /> diff --git a/frontend/src/metadata/hooks/metadata-details.js b/frontend/src/metadata/hooks/metadata-details.js index 482d01848a..9e9d10ecca 100644 --- a/frontend/src/metadata/hooks/metadata-details.js +++ b/frontend/src/metadata/hooks/metadata-details.js @@ -15,7 +15,7 @@ import { NOT_DISPLAY_COLUMN_KEYS } from '../components/metadata-details/constant const MetadataDetailsContext = React.createContext(null); -export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, direntDetail, direntType, modifyLocalFileTags, children }) => { +export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, direntDetail, direntType, modifyLocalFileTags, onErrMessage, children }) => { const { enableMetadata, detailsSettings, modifyDetailsSettings } = useMetadataStatus(); const [isLoading, setLoading] = useState(true); @@ -183,6 +183,12 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent setOriginColumns(columns); setLoading(false); }).catch(error => { + if (error.response && error.response.status === 404 && onErrMessage) { + const err = `${direntType === 'file' ? 'File' : 'Folder' } does not exist`; + onErrMessage(err); + setLoading(false); + return; + } const errMessage = Utils.getErrorMsg(error); toaster.danger(errMessage); setLoading(false);