PS-601 fix uploader multi target

alchemy-fr · Jan 2, 2024 · 5be3b21 · 5be3b21
1 parent 037251b
commit 5be3b21
Show file tree

Hide file tree

Showing 19 changed files with 50 additions and 109 deletions.
diff --git a/expose/client/package.json b/expose/client/package.json
@@ -36,7 +36,6 @@
     "react-image-gallery": "^0.9.1",
     "react-image-magnifiers": "^1.3.2",
     "react-images": "^1.1.7",
-    "react-loader-spinner": "^3.1.4",
     "sass": "^1.44.0",
     "sass-loader": "^8.0.0",
     "universal-cookie": "^4.0.2",

diff --git a/expose/client/src/component/ConfigWrapper.tsx b/expose/client/src/component/ConfigWrapper.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import config from '../config';
-import FullPageLoader from './FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import apiClient from '../lib/api-client';
 import Root from './Root.tsx';
 

diff --git a/expose/client/src/component/EmbeddedAsset.tsx b/expose/client/src/component/EmbeddedAsset.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import FullPageLoader from './FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import {Asset} from '../types';
 import AssetProxy from './layouts/shared-components/AssetProxy';
 import {loadAsset} from './api';
@@ -38,7 +38,9 @@ export default function EmbeddedAsset({id}: Props) {
     }
 
     if (!data) {
-        return <FullPageLoader />;
+        return <FullPageLoader
+            backdrop={false}
+        />;
     }
 
     const {publication} = data;

diff --git a/expose/client/src/component/FullPageLoader.jsx b/expose/client/src/component/FullPageLoader.jsx
diff --git a/expose/client/src/component/index/PublicationIndex.tsx b/expose/client/src/component/index/PublicationIndex.tsx
@@ -5,7 +5,7 @@ import moment from 'moment';
 import SortImg from '../../images/sort.svg?react';
 import {Dropdown, DropdownButton} from 'react-bootstrap';
 import {Logo} from '../Logo';
-import FullPageLoader from '../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import {getThumbPlaceholder} from '../layouts/shared-components/placeholders';
 import apiClient from '../../lib/api-client';
 import {useTranslation} from 'react-i18next';
@@ -113,7 +113,9 @@ export default function PublicationIndex({}: Props) {
                             </div>
                         ))
                     ) : (
-                        <FullPageLoader />
+                        <FullPageLoader
+                            backdrop={false}
+                        />
                     )}
                 </div>
             </div>

diff --git a/expose/client/src/component/layouts/grid/GridLayout.jsx b/expose/client/src/component/layouts/grid/GridLayout.jsx
@@ -13,7 +13,7 @@ import {
 import AssetProxy from '../shared-components/AssetProxy';
 import PublicationHeader from '../shared-components/PublicationHeader';
 import {Trans} from 'react-i18next';
-import FullPageLoader from '../../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import {logAssetView} from '../../../lib/log';
 import {getThumbPlaceholder} from '../shared-components/placeholders';
 
@@ -117,7 +117,9 @@ class GridLayout extends React.Component {
 
     renderGallery() {
         if (!this.state.thumbsLoaded) {
-            return <FullPageLoader />;
+            return <FullPageLoader
+                backdrop={false}
+            />;
         }
 
         const {downloadEnabled} = this.props.data;

diff --git a/expose/client/src/component/security/PublicationSecurityProxy.tsx b/expose/client/src/component/security/PublicationSecurityProxy.tsx
@@ -1,7 +1,7 @@
 import React, {PropsWithChildren} from 'react';
 import {Publication} from '../../types';
 import {securityMethods} from './methods';
-import FullPageLoader from '../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import {logPublicationView} from '../../lib/log';
 import {keycloakClient} from '../../lib/api-client';
 
@@ -28,7 +28,9 @@ export default function PublicationSecurityProxy({
     };
 
     if (!publication) {
-        return <FullPageLoader />;
+        return <FullPageLoader
+            backdrop={false}
+        />;
     }
 
     const {

diff --git a/expose/client/src/scss/FullPageLoader.scss b/expose/client/src/scss/FullPageLoader.scss
@@ -1,5 +1,3 @@
-@import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
-
 html {
   min-height: 100%;
 }

diff --git a/lib/js/phrasea-ui/src/components/FullPageLoader.tsx b/lib/js/phrasea-ui/src/components/FullPageLoader.tsx
@@ -1,17 +1,22 @@
-import {CircularProgress} from "@mui/material";
+import {Backdrop, CircularProgress} from "@mui/material";
 
-type Props = {};
+type Props = {
+    open?: boolean;
+    backdrop?: boolean;
+};
 
-export default function FullPageLoader({}: Props) {
-    return <div style={{
-        background: 'rgba(0,0,0,0.3)',
-        position: 'absolute',
-        height: '100vh',
-        width: '100vw',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-    }}>
+export default function FullPageLoader({
+    open = true,
+    backdrop = true,
+}: Props) {
+    return <Backdrop
+        sx={{
+            color: '#fff',
+            zIndex: (theme) => theme.zIndex.drawer + 1
+        }}
+        open={open}
+        invisible={!backdrop}
+    >
         <CircularProgress/>
-    </div>
+    </Backdrop>
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/uploader/client/package.json b/uploader/client/package.json
@@ -33,7 +33,6 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.1",
     "react-i18next": "^11.15.1",
-    "react-loader-spinner": "^3.1.14",
     "react-redux": "^9.0.4",
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",

diff --git a/uploader/client/src/components/FullPageLoader.jsx b/uploader/client/src/components/FullPageLoader.jsx
diff --git a/uploader/client/src/components/page/FormEditor.jsx b/uploader/client/src/components/page/FormEditor.jsx
@@ -3,7 +3,7 @@ import {Button, Form} from 'react-bootstrap';
 import FormPreview from '../FormPreview';
 import Container from '../Container';
 import {getFormSchema, getTargets} from '../../requests';
-import FullPageLoader from '../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import apiClient from '../../lib/apiClient';
 
 export default class FormEditor extends Component {

diff --git a/uploader/client/src/components/page/SelectTarget.jsx b/uploader/client/src/components/page/SelectTarget.jsx
@@ -3,10 +3,11 @@ import '../../scss/Upload.scss';
 import {getTargets} from '../../requests';
 import Container from '../Container';
 import {getPath, Link, useNavigate} from '@alchemy/navigation';
-import FullPageLoader from '../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import {Translation} from 'react-i18next';
 import {routes} from '../../routes';
 
+
 export default function SelectTarget() {
     const [targets, setTargets] = useState();
     const navigate = useNavigate();
@@ -21,8 +22,10 @@ export default function SelectTarget() {
         }
     }, [targets]);
 
-    if (!targets || targets?.length) {
-        return <FullPageLoader />;
+    if (!targets || targets?.length === 1) {
+        return <FullPageLoader
+            backdrop={false}
+        />;
     }
 
     return (

diff --git a/uploader/client/src/components/page/TargetDataEditor.jsx b/uploader/client/src/components/page/TargetDataEditor.jsx
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Button, Form} from 'react-bootstrap';
 import Container from '../Container';
 import {getTargetParams, getTargets} from '../../requests';
-import FullPageLoader from '../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import apiClient from '../../lib/apiClient';
 
 export default class TargetDataEditor extends Component {

diff --git a/uploader/client/src/components/page/Upload.jsx b/uploader/client/src/components/page/Upload.jsx
@@ -13,7 +13,7 @@ import config from '../../config';
 import {getTarget} from '../../requests';
 import UploadBatch from '../../uploadBatch';
 import {retrieveImageFromClipboardAsBlob} from '../ImagePaste';
-import FullPageLoader from '../FullPageLoader';
+import {FullPageLoader} from '@alchemy/phrasea-ui';
 import {withRouter} from '../withRouter';
 import {routes} from '../../routes';
 
@@ -214,7 +214,9 @@ class Upload extends Component {
             );
         }
         if (!target) {
-            return <FullPageLoader />;
+            return <FullPageLoader
+                backdrop={false}
+            />;
         }
 
         return (

diff --git a/uploader/client/src/oauth.jsx b/uploader/client/src/oauth.jsx
@@ -2,7 +2,6 @@ import React, {PureComponent} from 'react';
 import config from './config';
 import {KeycloakClient} from '@alchemy/auth';
 // import PropTypes from "prop-types";
-import FullPageLoader from './components/FullPageLoader';
 
 export const keycloakClient = new KeycloakClient({
     clientId: config.clientId,

diff --git a/uploader/client/src/scss/App.scss b/uploader/client/src/scss/App.scss
@@ -2,7 +2,6 @@
 @import "variables";
 @import "bootstrap/scss/bootstrap";
 @import "Menu";
-@import "FullPageLoader";
 @import "Target";
 
 body {

diff --git a/uploader/client/src/scss/FullPageLoader.scss b/uploader/client/src/scss/FullPageLoader.scss