mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-25 06:33:48 +00:00
optimize error text notification in searched item details (#7885)
Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
@@ -6,3 +6,11 @@
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-body.dirent-info.error {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
@@ -8,12 +8,15 @@ import { Repo } from '../../../models';
|
|||||||
import { MetadataStatusProvider } from '../../../hooks';
|
import { MetadataStatusProvider } from '../../../hooks';
|
||||||
import Details from './details';
|
import Details from './details';
|
||||||
import LibDetail from '../../dirent-detail/lib-details';
|
import LibDetail from '../../dirent-detail/lib-details';
|
||||||
|
import { Body, Header } from '../../dirent-detail/detail';
|
||||||
|
import { gettext } from '../../../utils/constants';
|
||||||
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
const SearchedItemDetails = ({ repoID, path, dirent }) => {
|
const SearchedItemDetails = ({ repoID, path, dirent }) => {
|
||||||
const [repoInfo, setRepoInfo] = useState(null);
|
const [repoInfo, setRepoInfo] = useState(null);
|
||||||
const [direntDetail, setDirentDetail] = useState(null);
|
const [direntDetail, setDirentDetail] = useState(null);
|
||||||
|
const [errMessage, setErrMessage] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
seafileAPI.getRepoInfo(repoID).then(res => {
|
seafileAPI.getRepoInfo(repoID).then(res => {
|
||||||
@@ -31,6 +34,7 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
|
|||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
if (!repoID || !path || !dirent || dirent.isLib) {
|
if (!repoID || !path || !dirent || dirent.isLib) {
|
||||||
setDirentDetail(null);
|
setDirentDetail(null);
|
||||||
|
setErrMessage(null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -41,11 +45,18 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
|
|||||||
{ signal: controller.signal }
|
{ signal: controller.signal }
|
||||||
);
|
);
|
||||||
setDirentDetail(res.data);
|
setDirentDetail(res.data);
|
||||||
|
setErrMessage(null);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error.name !== 'AbortError') {
|
if (error.name === 'AbortError') {
|
||||||
const errMessage = Utils.getErrorMsg(error);
|
return; // Ignore abort errors
|
||||||
toaster.danger(errMessage);
|
|
||||||
}
|
}
|
||||||
|
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 (!repoInfo) return;
|
||||||
|
|
||||||
|
if (errMessage) {
|
||||||
|
return (
|
||||||
|
<div className="searched-item-details">
|
||||||
|
<div
|
||||||
|
className="cur-view-detail"
|
||||||
|
style={{ width: 300 }}
|
||||||
|
>
|
||||||
|
<Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)}></Header>
|
||||||
|
<Body className="error">
|
||||||
|
{gettext(errMessage)}
|
||||||
|
</Body>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
if (dirent.isLib) {
|
if (dirent.isLib) {
|
||||||
return (
|
return (
|
||||||
<div className="searched-item-details">
|
<div className="searched-item-details">
|
||||||
@@ -80,6 +107,7 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
|
|||||||
dirent={dirent}
|
dirent={dirent}
|
||||||
direntDetail={direntDetail}
|
direntDetail={direntDetail}
|
||||||
direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
|
direntType={dirent?.type !== 'file' ? 'dir' : 'file'}
|
||||||
|
onErrMessage={(message) => setErrMessage(message)}
|
||||||
>
|
>
|
||||||
<Details
|
<Details
|
||||||
repoID={repoID}
|
repoID={repoID}
|
||||||
@@ -87,6 +115,7 @@ const SearchedItemDetails = ({ repoID, path, dirent }) => {
|
|||||||
path={parentDir}
|
path={parentDir}
|
||||||
dirent={dirent}
|
dirent={dirent}
|
||||||
direntDetail={direntDetail}
|
direntDetail={direntDetail}
|
||||||
|
errMessage={errMessage}
|
||||||
/>
|
/>
|
||||||
</MetadataDetailsProvider>
|
</MetadataDetailsProvider>
|
||||||
</MetadataStatusProvider>
|
</MetadataStatusProvider>
|
||||||
|
@@ -15,7 +15,7 @@ import { NOT_DISPLAY_COLUMN_KEYS } from '../components/metadata-details/constant
|
|||||||
|
|
||||||
const MetadataDetailsContext = React.createContext(null);
|
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 { enableMetadata, detailsSettings, modifyDetailsSettings } = useMetadataStatus();
|
||||||
|
|
||||||
const [isLoading, setLoading] = useState(true);
|
const [isLoading, setLoading] = useState(true);
|
||||||
@@ -183,6 +183,12 @@ export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, dirent
|
|||||||
setOriginColumns(columns);
|
setOriginColumns(columns);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}).catch(error => {
|
}).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);
|
const errMessage = Utils.getErrorMsg(error);
|
||||||
toaster.danger(errMessage);
|
toaster.danger(errMessage);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
Reference in New Issue
Block a user