@manuscripts/style-guide 0.30.13 → 0.30.17

package/dist/cjs/components/FileManager/FileManager.js

@@ -45,11 +45,21 @@ const FilesSection_1 = require("./FilesSection");
 const TooltipDiv_1 = require("./TooltipDiv");
 const util_1 = require("./util");
 exports.PermissionsContext = react_1.createContext(null);
-exports.FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, setNewUploadedFileName, stopUploadProgress, }) => {
+exports.FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
     const [state, dispatch] = react_1.useReducer(FileSectionState_1.reducer, FileSectionState_1.getInitialState());
-    const handleReplaceFile = react_1.useCallback((submissionId, name, file, typeId) => {
-        return handleReplace(submissionId, name, file, typeId);
-    }, [handleReplace]);
+    const handleReplaceFile = react_1.useCallback((submissionId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
+        dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
+        dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.namesWithDesignationMap.get(typeId) || util_1.Designation.Document));
+        const res = yield handleReplace(submissionId, name, file, typeId);
+        if (res) {
+            dispatch(FileSectionState_1.actions.SHOW_FILE_UPLOADED_ALERT());
+            dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+        }
+        else {
+            dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+        }
+        return res;
+    }), [handleReplace]);
     const handleUploadFile = react_1.useCallback((submissionId, file, designation) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             dispatch(FileSectionState_1.actions.HANDLE_UPLOAD_ACTION());
@@ -57,19 +67,20 @@ exports.FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, ha
                 dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.Designation.Supplementary));
             }
             const res = yield handleUpload(submissionId, file, designation);
-            setNewUploadedFileName(file.name);
+            if (res) {
+                dispatch(FileSectionState_1.actions.SHOW_FILE_UPLOADED_ALERT());
+                dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+            }
+            else {
+                dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+            }
             return res;
         }
         catch (e) {
             console.error(e);
             return false;
         }
-    }), [handleUpload, setNewUploadedFileName]);
-    react_1.useEffect(() => {
-        if (stopUploadProgress) {
-            dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
-        }
-    }, [stopUploadProgress]);
+    }), [handleUpload]);
     const handleChangeDesignationFile = react_1.useCallback((submissionId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             const res = yield handleChangeDesignation(submissionId, typeId, name);
@@ -94,7 +105,7 @@ exports.FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, ha
             return (designation !== undefined &&
                 util_1.designationWithFileSectionsMap.get(designation) === fileSection);
         });
-        const itemsDataWithTitle = util_1.sortExternalFiles(util_1.generateExternalFilesTitles(itemsData, fileSection));
+        const itemsDataWithTitle = util_1.generateExternalFilesTitles(util_1.sortExternalFiles(itemsData), fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
             const itemProps = {
                 submissionId: submissionId,

package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemContainer = exports.Item = exports.ActionsIcon = exports.FileSectionItem = void 0;
 const react_1 = __importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
 const use_dropdown_1 = require("../../../hooks/use-dropdown");
 const Dropdown_1 = require("../../Dropdown");
@@ -20,8 +19,15 @@ exports.FileSectionItem = ({ submissionId, externalFile, title, showAttachmentNa
     const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
     const designation = util_1.namesWithDesignationMap.get(externalFile.designation);
     const isMainManuscript = designation === util_1.Designation.MainManuscript;
+    const isSelected = externalFile._id == window.location.hash.substr(1);
     return (react_1.default.createElement(exports.Item, { ref: dragRef, className: className, style: style },
-        react_1.default.createElement(exports.ItemContainer, { to: isEditor ? `#${externalFile._id}` : '#' },
+        react_1.default.createElement(exports.ItemContainer, { onClick: () => {
+                window.location.hash =
+                    isEditor && !isSelected ? `#${externalFile._id}` : '#';
+                if (isSelected) {
+                    window.location.hash = `#${externalFile._id}`;
+                }
+            } },
             react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.filename }),
             react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.filename, title: title, designation: designation, description: externalFile.description, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, dispatch: dispatch })),
         onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
@@ -32,7 +38,7 @@ exports.FileSectionItem = ({ submissionId, externalFile, title, showAttachmentNa
         handleDownload && handleReplace && submissionId && (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
             react_1.default.createElement(exports.ActionsIcon, { onClick: toggleOpen, type: "button", "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
-            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen }))))));
+            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch }))))));
 };
 const IconCloseButton = styled_components_1.default.button `
   border: none;
@@ -82,10 +88,9 @@ exports.Item = styled_components_1.default.div `
     margin-right: 8px;
   }
 `;
-exports.ItemContainer = styled_components_1.default(react_router_dom_1.Link) `
+exports.ItemContainer = styled_components_1.default.div `
   display: flex;
   min-width: calc(100% - 8px);
   padding-right: 4px;
   box-sizing: border-box;
-  text-decoration: none;
 `;

package/dist/cjs/components/FileManager/FileSectionItem/FileSectionUploadItem.js

@@ -14,7 +14,7 @@ exports.FileSectionUploadItem = ({ fileName, isLoading, submissionId, dragRef, c
     const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
     fileName = fileName.substring(0, fileName.lastIndexOf('.'));
     return (react_1.default.createElement(FileSectionItem_1.Item, { ref: dragRef, className: className, style: style },
-        react_1.default.createElement(exports.UploadItemContainer, { to: '#' },
+        react_1.default.createElement(exports.UploadItemContainer, null,
             react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: false }),
             react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
                 react_1.default.createElement(FileInfo_1.FileNameContainer, null,

package/dist/cjs/components/FileManager/FileSectionItem/ItemActions.js

@@ -23,8 +23,9 @@ exports.ItemActions = void 0;
 const react_1 = __importStar(require("react"));
 const Dropdown_1 = require("../../Dropdown");
 const FileManager_1 = require("../FileManager");
+const FileSectionState_1 = require("../FileSectionState");
 const ItemsAction_1 = require("../ItemsAction");
-exports.ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, }) => {
+exports.ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, dispatch, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const fileInputRef = react_1.useRef(null);
     const [selectedFile, setSelectedFile] = react_1.useState();
@@ -33,6 +34,9 @@ exports.ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, su
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
             setSelectedFile(file);
+            if (dispatch) {
+                dispatch(FileSectionState_1.actions.UPLOAD_FILE(file));
+            }
             replaceAttachmentHandler(submissionId, fileName, file, attachmentDesignation);
             hideActionList();
         }

package/dist/cjs/components/FileManager/FileSectionState.js

@@ -4,6 +4,7 @@ exports.actions = exports.reducer = exports.getInitialState = void 0;
 exports.getInitialState = () => ({
     uploadedFile: undefined,
     isUploadFile: false,
+    isFileUploaded: false,
     moveToOtherState: undefined,
     successMessage: '',
     isShowSuccessMessage: false,
@@ -19,6 +20,8 @@ var ActionTypes;
     ActionTypes["HANDLE_UPLOAD_ACTION"] = "handleUpload";
     ActionTypes["HANDLE_FINISH_UPLOAD"] = "handleFinishUpload";
     ActionTypes["HANDLE_SUCCESS_MESSAGE"] = "handleSuccessMessage";
+    ActionTypes["SHOW_FILE_UPLOADED_ALERT"] = "showFileUploadedAlert";
+    ActionTypes["CLOSE_FILE_UPLOADED_ALERT"] = "closeFileUploadedAlert";
 })(ActionTypes || (ActionTypes = {}));
 exports.reducer = (state, action) => {
     switch (action.type) {
@@ -44,9 +47,15 @@ exports.reducer = (state, action) => {
         case ActionTypes.HANDLE_FINISH_UPLOAD: {
             return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
         }
+        case ActionTypes.SHOW_FILE_UPLOADED_ALERT: {
+            return Object.assign(Object.assign({}, state), { isFileUploaded: true });
+        }
         case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
             return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true });
         }
+        case ActionTypes.CLOSE_FILE_UPLOADED_ALERT: {
+            return Object.assign(Object.assign({}, state), { isFileUploaded: false });
+        }
     }
     return state;
 };
@@ -75,6 +84,12 @@ exports.actions = {
     HANDLE_FINISH_UPLOAD: () => ({
         type: ActionTypes.HANDLE_FINISH_UPLOAD,
     }),
+    SHOW_FILE_UPLOADED_ALERT: () => ({
+        type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,
+    }),
+    CLOSE_FILE_UPLOADED_ALERT: () => ({
+        type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,
+    }),
     HANDLE_SUCCESS_MESSAGE: () => ({
         type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
     }),

package/dist/cjs/components/FileManager/FilesSection.js

@@ -21,6 +21,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilesSection = void 0;
 const react_1 = __importStar(require("react"));
+const AlertMessage_1 = require("../AlertMessage");
 const DragItemArea_1 = require("./DragItemArea");
 const FileManager_1 = require("./FileManager");
 const FileSectionUploadItem_1 = require("./FileSectionItem/FileSectionUploadItem");
@@ -47,7 +48,11 @@ exports.FilesSection = ({ submissionId, enableDragAndDrop, handleUpload, fileSec
             (isOtherFileTab || isSupplementFilesTab) && (react_1.default.createElement(UploadFileArea_1.UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, submissionId: submissionId, dispatch: dispatch })),
             state.isUploadFile &&
                 state.uploadedFile &&
-                state.selectDesignation !== undefined && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
+                state.selectDesignation !== undefined && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })),
+            state.isFileUploaded && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.info, hideCloseButton: true, dismissButton: {
+                    action: () => dispatch(FileSectionState_1.actions.CLOSE_FILE_UPLOADED_ALERT()),
+                    text: 'Close',
+                } }, "File uploaded successfully. It may take a few moments to show the new file in the Inspector.")))),
         state.uploadedFile && isOtherFileTab && (react_1.default.createElement(SelectDialogDesignation_1.SelectDialogDesignation, { isOpen: state.isOpenSelectDesignationPopup, fileExtension: uploadedFileExtension, handleCancel: () => {
                 dispatch(FileSectionState_1.actions.HANDLE_CANCEL_UPLOAD());
             }, uploadFileHandler: () => handleUploadOtherFile(), dispatch: dispatch, fileSection: fileSection })),

package/dist/cjs/components/FileManager/util.js

@@ -374,16 +374,13 @@ exports.generateExternalFilesTitles = (externalFiles, fileSectionType) => {
     }));
     return result;
 };
-exports.sortExternalFiles = (externalFilesWithTitles) => {
-    externalFilesWithTitles
-        .sort((a, b) => Number(a.externalFile.createdAt) - Number(b.externalFile.createdAt))
-        .sort((a, b) => b.externalFile.designation === 'main-manuscript'
-        ? 1
-        : a.externalFile.designation === 'main-manuscript'
-            ? -1
-            : 0);
-    return externalFilesWithTitles;
-};
+exports.sortExternalFiles = (externalFile) => externalFile
+    .sort((a, b) => Number(a.createdAt) - Number(b.createdAt))
+    .sort((a, b) => b.designation === 'main-manuscript'
+    ? 1
+    : a.designation === 'main-manuscript'
+        ? -1
+        : 0);
 exports.getDesignationActionsList = (designation, fileExtension) => {
     const allowedDesignationsToTransition = exports.designationWithAllowedDesignationsToTransitionMap.get(designation);
     if (allowedDesignationsToTransition) {

package/dist/cjs/lib/lw-errors-decoder.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const errorsExplanations = {
     ANY_ERR_AUTHORIZATION: {
         title: 'Authorization issue',
-        description: "It seems you don't have access to this page. If you think...",
+        description: "It seems you don't have access to this resource. If you think you should have access, please contact the support team.",
         type: 'System',
     },
     PREVIEW_HTML_GENERATION_FAILED: {

package/dist/es/components/FileManager/FileManager.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { createContext, useCallback, useEffect, useReducer } from 'react';
+import React, { createContext, useCallback, useReducer } from 'react';
 import ReactTooltip from 'react-tooltip';
 import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
@@ -20,11 +20,21 @@ import { FilesSection } from './FilesSection';
 import { TooltipDiv } from './TooltipDiv';
 import { Designation, designationWithFileSectionsMap, FileSectionType, generateExternalFilesTitles, namesWithDesignationMap, sortExternalFiles, } from './util';
 export const PermissionsContext = createContext(null);
-export const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, setNewUploadedFileName, stopUploadProgress, }) => {
+export const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, can, handleUpload, handleDownload, handleReplace, handleChangeDesignation, }) => {
     const [state, dispatch] = useReducer(reducer, getInitialState());
-    const handleReplaceFile = useCallback((submissionId, name, file, typeId) => {
-        return handleReplace(submissionId, name, file, typeId);
-    }, [handleReplace]);
+    const handleReplaceFile = useCallback((submissionId, name, file, typeId) => __awaiter(void 0, void 0, void 0, function* () {
+        dispatch(actions.HANDLE_UPLOAD_ACTION());
+        dispatch(actions.SELECT_DESIGNATION(namesWithDesignationMap.get(typeId) || Designation.Document));
+        const res = yield handleReplace(submissionId, name, file, typeId);
+        if (res) {
+            dispatch(actions.SHOW_FILE_UPLOADED_ALERT());
+            dispatch(actions.HANDLE_FINISH_UPLOAD());
+        }
+        else {
+            dispatch(actions.HANDLE_FINISH_UPLOAD());
+        }
+        return res;
+    }), [handleReplace]);
     const handleUploadFile = useCallback((submissionId, file, designation) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             dispatch(actions.HANDLE_UPLOAD_ACTION());
@@ -32,19 +42,20 @@ export const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, ca
                 dispatch(actions.SELECT_DESIGNATION(Designation.Supplementary));
             }
             const res = yield handleUpload(submissionId, file, designation);
-            setNewUploadedFileName(file.name);
+            if (res) {
+                dispatch(actions.SHOW_FILE_UPLOADED_ALERT());
+                dispatch(actions.HANDLE_FINISH_UPLOAD());
+            }
+            else {
+                dispatch(actions.HANDLE_FINISH_UPLOAD());
+            }
             return res;
         }
         catch (e) {
             console.error(e);
             return false;
         }
-    }), [handleUpload, setNewUploadedFileName]);
-    useEffect(() => {
-        if (stopUploadProgress) {
-            dispatch(actions.HANDLE_FINISH_UPLOAD());
-        }
-    }, [stopUploadProgress]);
+    }), [handleUpload]);
     const handleChangeDesignationFile = useCallback((submissionId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             const res = yield handleChangeDesignation(submissionId, typeId, name);
@@ -69,7 +80,7 @@ export const FileManager = ({ submissionId, externalFiles, enableDragAndDrop, ca
             return (designation !== undefined &&
                 designationWithFileSectionsMap.get(designation) === fileSection);
         });
-        const itemsDataWithTitle = sortExternalFiles(generateExternalFilesTitles(itemsData, fileSection));
+        const itemsDataWithTitle = generateExternalFilesTitles(sortExternalFiles(itemsData), fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
             const itemProps = {
                 submissionId: submissionId,

package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useDropdown } from '../../../hooks/use-dropdown';
 import { DropdownContainer } from '../../Dropdown';
@@ -14,8 +13,15 @@ export const FileSectionItem = ({ submissionId, externalFile, title, showAttachm
     const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
     const designation = namesWithDesignationMap.get(externalFile.designation);
     const isMainManuscript = designation === Designation.MainManuscript;
+    const isSelected = externalFile._id == window.location.hash.substr(1);
     return (React.createElement(Item, { ref: dragRef, className: className, style: style },
-        React.createElement(ItemContainer, { to: isEditor ? `#${externalFile._id}` : '#' },
+        React.createElement(ItemContainer, { onClick: () => {
+                window.location.hash =
+                    isEditor && !isSelected ? `#${externalFile._id}` : '#';
+                if (isSelected) {
+                    window.location.hash = `#${externalFile._id}`;
+                }
+            } },
             React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.filename }),
             React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, showDesignationActions: showDesignationActions, submissionAttachmentName: externalFile.filename, title: title, designation: designation, description: externalFile.description, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, dispatch: dispatch })),
         onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
@@ -26,7 +32,7 @@ export const FileSectionItem = ({ submissionId, externalFile, title, showAttachm
         handleDownload && handleReplace && submissionId && (React.createElement(DropdownContainer, { ref: wrapperRef },
             React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 React.createElement(DotsIcon, null)),
-            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen }))))));
+            isOpen && (React.createElement(ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch }))))));
 };
 const IconCloseButton = styled.button `
   border: none;
@@ -76,10 +82,9 @@ export const Item = styled.div `
     margin-right: 8px;
   }
 `;
-export const ItemContainer = styled(Link) `
+export const ItemContainer = styled.div `
   display: flex;
   min-width: calc(100% - 8px);
   padding-right: 4px;
   box-sizing: border-box;
-  text-decoration: none;
 `;

package/dist/es/components/FileManager/FileSectionItem/FileSectionUploadItem.js

@@ -8,7 +8,7 @@ export const FileSectionUploadItem = ({ fileName, isLoading, submissionId, dragR
     const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
     fileName = fileName.substring(0, fileName.lastIndexOf('.'));
     return (React.createElement(Item, { ref: dragRef, className: className, style: style },
-        React.createElement(UploadItemContainer, { to: '#' },
+        React.createElement(UploadItemContainer, null,
             React.createElement(FileTypeIcon, { withDot: false }),
             React.createElement(FileInfoContainer, null,
                 React.createElement(FileNameContainer, null,

package/dist/es/components/FileManager/FileSectionItem/ItemActions.js

@@ -1,8 +1,9 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useRef, useState, } from 'react';
 import { DropdownList } from '../../Dropdown';
 import { PermissionsContext } from '../FileManager';
+import { actions } from '../FileSectionState';
 import { ActionsItem } from '../ItemsAction';
-export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, }) => {
+export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandler, submissionId, fileName, designation, publicUrl, hideActionList, dispatch, }) => {
     const attachmentDesignation = designation == undefined ? 'undefined' : designation;
     const fileInputRef = useRef(null);
     const [selectedFile, setSelectedFile] = useState();
@@ -11,6 +12,9 @@ export const ItemActions = ({ downloadAttachmentHandler, replaceAttachmentHandle
         if (event && event.target && event.target.files) {
             const file = event.target.files[0];
             setSelectedFile(file);
+            if (dispatch) {
+                dispatch(actions.UPLOAD_FILE(file));
+            }
             replaceAttachmentHandler(submissionId, fileName, file, attachmentDesignation);
             hideActionList();
         }

package/dist/es/components/FileManager/FileSectionState.js

@@ -1,6 +1,7 @@
 export const getInitialState = () => ({
     uploadedFile: undefined,
     isUploadFile: false,
+    isFileUploaded: false,
     moveToOtherState: undefined,
     successMessage: '',
     isShowSuccessMessage: false,
@@ -16,6 +17,8 @@ var ActionTypes;
     ActionTypes["HANDLE_UPLOAD_ACTION"] = "handleUpload";
     ActionTypes["HANDLE_FINISH_UPLOAD"] = "handleFinishUpload";
     ActionTypes["HANDLE_SUCCESS_MESSAGE"] = "handleSuccessMessage";
+    ActionTypes["SHOW_FILE_UPLOADED_ALERT"] = "showFileUploadedAlert";
+    ActionTypes["CLOSE_FILE_UPLOADED_ALERT"] = "closeFileUploadedAlert";
 })(ActionTypes || (ActionTypes = {}));
 export const reducer = (state, action) => {
     switch (action.type) {
@@ -41,9 +44,15 @@ export const reducer = (state, action) => {
         case ActionTypes.HANDLE_FINISH_UPLOAD: {
             return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
         }
+        case ActionTypes.SHOW_FILE_UPLOADED_ALERT: {
+            return Object.assign(Object.assign({}, state), { isFileUploaded: true });
+        }
         case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
             return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true });
         }
+        case ActionTypes.CLOSE_FILE_UPLOADED_ALERT: {
+            return Object.assign(Object.assign({}, state), { isFileUploaded: false });
+        }
     }
     return state;
 };
@@ -72,6 +81,12 @@ export const actions = {
     HANDLE_FINISH_UPLOAD: () => ({
         type: ActionTypes.HANDLE_FINISH_UPLOAD,
     }),
+    SHOW_FILE_UPLOADED_ALERT: () => ({
+        type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,
+    }),
+    CLOSE_FILE_UPLOADED_ALERT: () => ({
+        type: ActionTypes.CLOSE_FILE_UPLOADED_ALERT,
+    }),
     HANDLE_SUCCESS_MESSAGE: () => ({
         type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
     }),

package/dist/es/components/FileManager/FilesSection.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { DragItemArea } from './DragItemArea';
 import { PermissionsContext } from './FileManager';
 import { FileSectionUploadItem } from './FileSectionItem/FileSectionUploadItem';
@@ -25,7 +26,11 @@ export const FilesSection = ({ submissionId, enableDragAndDrop, handleUpload, fi
             (isOtherFileTab || isSupplementFilesTab) && (React.createElement(UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, submissionId: submissionId, dispatch: dispatch })),
             state.isUploadFile &&
                 state.uploadedFile &&
-                state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
+                state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { submissionId: submissionId, fileName: state.uploadedFile.name, isLoading: state.isUploadFile })),
+            state.isFileUploaded && (React.createElement(AlertMessage, { type: AlertMessageType.info, hideCloseButton: true, dismissButton: {
+                    action: () => dispatch(actions.CLOSE_FILE_UPLOADED_ALERT()),
+                    text: 'Close',
+                } }, "File uploaded successfully. It may take a few moments to show the new file in the Inspector.")))),
         state.uploadedFile && isOtherFileTab && (React.createElement(SelectDialogDesignation, { isOpen: state.isOpenSelectDesignationPopup, fileExtension: uploadedFileExtension, handleCancel: () => {
                 dispatch(actions.HANDLE_CANCEL_UPLOAD());
             }, uploadFileHandler: () => handleUploadOtherFile(), dispatch: dispatch, fileSection: fileSection })),

package/dist/es/components/FileManager/util.js

@@ -368,16 +368,13 @@ export const generateExternalFilesTitles = (externalFiles, fileSectionType) => {
     }));
     return result;
 };
-export const sortExternalFiles = (externalFilesWithTitles) => {
-    externalFilesWithTitles
-        .sort((a, b) => Number(a.externalFile.createdAt) - Number(b.externalFile.createdAt))
-        .sort((a, b) => b.externalFile.designation === 'main-manuscript'
-        ? 1
-        : a.externalFile.designation === 'main-manuscript'
-            ? -1
-            : 0);
-    return externalFilesWithTitles;
-};
+export const sortExternalFiles = (externalFile) => externalFile
+    .sort((a, b) => Number(a.createdAt) - Number(b.createdAt))
+    .sort((a, b) => b.designation === 'main-manuscript'
+    ? 1
+    : a.designation === 'main-manuscript'
+        ? -1
+        : 0);
 export const getDesignationActionsList = (designation, fileExtension) => {
     const allowedDesignationsToTransition = designationWithAllowedDesignationsToTransitionMap.get(designation);
     if (allowedDesignationsToTransition) {

package/dist/es/lib/lw-errors-decoder.js

@@ -16,7 +16,7 @@
 const errorsExplanations = {
     ANY_ERR_AUTHORIZATION: {
         title: 'Authorization issue',
-        description: "It seems you don't have access to this page. If you think...",
+        description: "It seems you don't have access to this resource. If you think you should have access, please contact the support team.",
         type: 'System',
     },
     PREVIEW_HTML_GENERATION_FAILED: {

package/dist/types/components/FileManager/FileManager.d.ts

@@ -11,6 +11,4 @@ export declare const FileManager: React.FC<{
     handleDownload: (url: string) => void;
     handleReplace: (submissionId: string, name: string, file: File, typeId: string) => Promise<boolean>;
     handleChangeDesignation: (submissionId: string, typeId: string, name: string) => Promise<boolean>;
-    setNewUploadedFileName: React.Dispatch<React.SetStateAction<string | undefined>>;
-    stopUploadProgress?: boolean;
 }>;

package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts

@@ -1,7 +1,6 @@
 import { ExternalFile } from '@manuscripts/manuscripts-json-schema';
 import React, { CSSProperties, Dispatch } from 'react';
 import { DragElementWrapper, DragSourceOptions } from 'react-dnd';
-import { Link } from 'react-router-dom';
 import { Action } from '../FileSectionState';
 export interface FileSectionItemProps {
     submissionId?: string;
@@ -23,4 +22,4 @@ export interface FileSectionItemProps {
 export declare const FileSectionItem: React.FC<FileSectionItemProps>;
 export declare const ActionsIcon: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const Item: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ItemContainer: import("styled-components").StyledComponent<typeof Link, import("styled-components").DefaultTheme, {}, never>;
+export declare const ItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/FileSectionItem/FileSectionUploadItem.d.ts

@@ -9,5 +9,5 @@ export interface FileSectionItemProps {
     style?: CSSProperties;
 }
 export declare const FileSectionUploadItem: React.FC<FileSectionItemProps>;
-export declare const UploadItemContainer: import("styled-components").StyledComponent<typeof import("react-router-dom").Link, import("styled-components").DefaultTheme, {}, never>;
+export declare const UploadItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/FileManager/FileSectionItem/ItemActions.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { Dispatch } from 'react';
+import { Action } from '../FileSectionState';
 export declare const ItemActions: React.FC<{
     downloadAttachmentHandler: (url: string) => void;
     replaceAttachmentHandler: (submissionId: string, name: string, file: File, typeId: string) => Promise<boolean>;
@@ -7,4 +8,5 @@ export declare const ItemActions: React.FC<{
     designation?: string | undefined;
     publicUrl: string | undefined;
     hideActionList: () => void;
+    dispatch?: Dispatch<Action>;
 }>;

package/dist/types/components/FileManager/FileSectionState.d.ts

@@ -3,6 +3,7 @@ export declare const getInitialState: () => State;
 export interface State {
     uploadedFile: File | undefined;
     isUploadFile: boolean;
+    isFileUploaded: boolean;
     moveToOtherState: {
         submissionId: string;
         typeId: string;
@@ -20,7 +21,9 @@ declare enum ActionTypes {
     HANDLE_CANCEL_UPLOAD = "handleCancel",
     HANDLE_UPLOAD_ACTION = "handleUpload",
     HANDLE_FINISH_UPLOAD = "handleFinishUpload",
-    HANDLE_SUCCESS_MESSAGE = "handleSuccessMessage"
+    HANDLE_SUCCESS_MESSAGE = "handleSuccessMessage",
+    SHOW_FILE_UPLOADED_ALERT = "showFileUploadedAlert",
+    CLOSE_FILE_UPLOADED_ALERT = "closeFileUploadedAlert"
 }
 export declare const reducer: (state: State, action: Action) => State;
 export interface Action {
@@ -34,6 +37,8 @@ export declare const actions: {
     SELECT_DESIGNATION: (designation: Designation) => Action;
     MOVE_FILE: (submissionId: string, typeId: string, name: string, successMoveMessage: string) => Action;
     HANDLE_FINISH_UPLOAD: () => Action;
+    SHOW_FILE_UPLOADED_ALERT: () => Action;
+    CLOSE_FILE_UPLOADED_ALERT: () => Action;
     HANDLE_SUCCESS_MESSAGE: () => Action;
 };
 export {};

package/dist/types/components/FileManager/util.d.ts

@@ -46,13 +46,7 @@ export declare const generateExternalFilesTitles: (externalFiles: ExternalFile[]
     title: string;
     externalFile: ExternalFile;
 }>;
-export declare const sortExternalFiles: (externalFilesWithTitles: Array<{
-    title: string;
-    externalFile: ExternalFile;
-}>) => Array<{
-    title: string;
-    externalFile: ExternalFile;
-}>;
+export declare const sortExternalFiles: (externalFile: ExternalFile[]) => ExternalFile[];
 export declare const getDesignationActionsList: (designation: Designation, fileExtension: string) => Array<Designation>;
 export declare const getDesignationName: (designation: Designation) => string;
 export declare const getDesignationByFileSection: (fileSectionType: FileSectionType) => Array<Designation>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "0.30.13",
+  "version": "0.30.17",
   "repository": "gitlab:mpapp-public/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -37,7 +37,7 @@
     "@manuscripts/eslint-config": "^0.4.2",
     "@reach/tabs": "^0.11.2",
     "@types/react-color": "^3.0.4",
-    "@types/react-router-dom": "^5.3.2",
+    "@types/react-router-dom": "^5.1.6",
     "date-fns": "^2.16.1",
     "lodash-es": "^4.17.15",
     "pdfjs-dist": "^2.7.570",
@@ -46,7 +46,7 @@
     "react-intl": "^3.12.0",
     "react-modal": "^3.11.2",
     "react-modern-calendar-datepicker": "^3.1.3",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^5.2.0",
     "react-select": "^3.0.8",
     "react-sizeme": "^2.6.12",
     "react-tooltip": "^4.2.11",