Feature/dls user upload #1596

docker/docker-entrypoint.sh

@@ -8,6 +8,7 @@ sed -e "s|\"facilityName\": \".*\"|\"facilityName\": \"$FACILITY_NAME\"|" \
     -e "s|\"idsUrl\": \".*\"|\"idsUrl\": \"$IDS_URL\"|" \
     -e "s|\"apiUrl\": \".*\"|\"apiUrl\": \"$API_URL\"|" \
     -e "s|\"downloadApiUrl\": \".*\"|\"downloadApiUrl\": \"$DOWNLOAD_API_URL\"|" \
+    -e "s|\"uploadUrl\": \".*\"|\"uploadUrl\": \"$UPLOAD_URL\"|" \
     -e "s|\"pluginHost\": \".*\"|\"pluginHost\": \"/datagateway-dataview\"|" \
     /usr/local/apache2/htdocs/datagateway-dataview/datagateway-dataview-settings.json > "$TEMPFILE"
 

packages/datagateway-common/package.json

@@ -12,6 +12,15 @@
     "@emotion/styled": "11.11.0",
     "@mui/x-date-pickers": "6.11.2",
     "@types/lodash.debounce": "4.0.6",
+    "@uppy/core": "^3.7.1",
+    "@uppy/dashboard": "^3.7.1",
+    "@uppy/drag-drop": "^3.0.3",
+    "@uppy/file-input": "^3.0.4",
+    "@uppy/form": "^3.0.3",
+    "@uppy/golden-retriever": "^3.1.1",
+    "@uppy/progress-bar": "^3.0.4",
+    "@uppy/react": "^3.2.1",
+    "@uppy/tus": "^3.4.0",
     "axios": "1.6.1",
     "connected-react-router": "6.9.1",
     "date-fns": "2.30.0",
@@ -103,7 +112,7 @@
   },
   "jest": {
     "transformIgnorePatterns": [
-      "node_modules/(?!axios)"
+      "node_modules/(?!(axios|@uppy|nanoid|exifr|p-queue|p-timeout)/)"
     ],
     "collectCoverageFrom": [
       "src/**/*.{tsx,ts,js,jsx}",

packages/datagateway-common/src/__mocks__/axios.ts

@@ -6,7 +6,9 @@ const requests = {
   get: jest.fn(() => Promise.resolve({ data: {} })),
   post: jest.fn(() => Promise.resolve({ data: {} })),
   delete: jest.fn(() => Promise.resolve({ data: {} })),
+  put: jest.fn(() => Promise.resolve({ data: {} })),
   CancelToken: axios.CancelToken,
+  isAxiosError: axios.isAxiosError,
 };
 
 export default requests;

packages/datagateway-common/src/api/index.test.tsx

@@ -12,6 +12,7 @@ import {
   useSort,
   usePushCurrentTab,
   useUpdateView,
+  refreshSession,
 } from './index';
 import {
   FiltersType,
@@ -1074,4 +1075,20 @@ describe('generic api functions', () => {
       );
     });
   });
+
+  it('sends a PUT request to refresh the session', () => {
+    const apiUrl = 'https://example.com/api';
+
+    refreshSession(apiUrl);
+
+    expect(axios.put).toHaveBeenCalledWith(
+      `${apiUrl}/sessions`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer null`,
+        },
+      }
+    );
+  });
 });

packages/datagateway-common/src/api/index.tsx

@@ -819,3 +819,15 @@ export const useCustomFilterCount = (
   // @ts-ignore
   return useQueries(queryConfigs);
 };
+
+export const refreshSession = (apiUrl: string): void => {
+  axios.put(
+    `${apiUrl}/sessions`,
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${readSciGatewayToken().sessionId}`,
+      },
+    }
+  );
+};

packages/datagateway-common/src/index.tsx

@@ -2,7 +2,6 @@
 // import React from 'react';
 // import ReactDOM from 'react-dom';
 // import App from './App';
-// import './index.css';
 
 import { StateType } from './state/app.types';
 
@@ -66,6 +65,7 @@ export type { CartProps } from './views/viewCartButton.component';
 export { default as ViewButton } from './views/viewButton.component';
 export { default as ClearFiltersButton } from './views/clearFiltersButton.component';
 export { default as DownloadButton } from './views/downloadButton.component';
+export { default as UploadButton } from './views/uploadButton.component';
 export { default as SelectionAlert } from './views/selectionAlert.component';
 
 export { default as ISISDatafileDetailsPanel } from './detailsPanels/isis/datafileDetailsPanel.component';

packages/datagateway-common/src/preloader/__snapshots__/preloader.component.test.tsx.snap

@@ -18,22 +18,22 @@ exports[`Preloader component renders when the site is loading 1`] = `
         style="box-sizing: border-box; padding: 10px 0px;"
       >
         <div
-          style="display: block; margin: auto; width: 230px; height: 230px; animation: rotate 10s infinite linear;"
+          class="MuiBox-root css-i7r3q1"
         >
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 140px; border-top-right-radius: 140px; border-color: #8c4799; height: 70px; width: 140px; margin-top: -70px; margin-left: -70px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0, 0, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-1xpn6vn"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 148px; border-top-right-radius: 148px; border-color: #1d4f91; height: 79px; width: 158px; margin-top: -79px; margin-left: -79px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0.3, 0.12, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-5srjsq"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 156px; border-top-right-radius: 156px; border-color: #c34613; height: 88px; width: 176px; margin-top: -88px; margin-left: -88px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0.6, 0.24, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-gke7bx"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 164px; border-top-right-radius: 164px; border-color: #008275; height: 97px; width: 194px; margin-top: -97px; margin-left: -97px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 0.8999999999999999, 0.36, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-19f05lv"
           />
           <i
-            style="position: absolute; display: inline-block; top: 50%; left: 50%; border: 8px solid transparent; border-top-left-radius: 172px; border-top-right-radius: 172px; border-color: #63666a; height: 106px; width: 212px; margin-top: -106px; margin-left: -106px; animation-name: rotate; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: cubic-bezier(.09, 1.2, 0.48, .03); transform-origin: 50% 100% 0; box-sizing: border-box;"
+            class="css-1m17ujy"
           />
         </div>
       </div>

packages/datagateway-common/src/preloader/preloader.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box } from '@mui/material';
+import { Box, keyframes, styled } from '@mui/material';
 
 const colors = ['#8C4799', '#1D4F91', '#C34613', '#008275', '#63666A'];
 const innerRadius = 140;
@@ -11,11 +11,13 @@ interface PreloaderProps {
   children: React.ReactNode;
 }
 
-interface SpinnerStyle {
-  [id: string]: string | number;
-}
+const rotate = keyframes`
+  to {
+    transform: rotateZ(360deg);
+  }
+`;
 
-const spinnerStyle = (index: number): SpinnerStyle => {
+const StyledI = styled('i')(({ index }: { index: number }) => {
   const size = innerRadius + index * 2 * (border + spacing);
 
   return {
@@ -32,7 +34,10 @@ const spinnerStyle = (index: number): SpinnerStyle => {
     width: size,
     marginTop: -size / 2,
     marginLeft: -size / 2,
-    animationName: 'rotate',
+    animation: `${rotate} 3s infinite cubic-bezier(.09, ${0.3 * index}, ${
+      0.12 * index
+    }, .03)`,
+    animationName: `${rotate}`,
     animationIterationCount: 'infinite',
     animationDuration: '3s',
     animationTimingFunction: `cubic-bezier(.09, ${0.3 * index}, ${
@@ -41,7 +46,7 @@ const spinnerStyle = (index: number): SpinnerStyle => {
     transformOrigin: '50% 100% 0',
     boxSizing: 'border-box',
   };
-};
+});
 
 const Preloader: React.FC<PreloaderProps> = (props: PreloaderProps) => (
   <div role={props.loading ? 'progressbar' : undefined}>
@@ -59,21 +64,21 @@ const Preloader: React.FC<PreloaderProps> = (props: PreloaderProps) => (
         }}
       >
         <div style={{ boxSizing: 'border-box', padding: '10px 0' }}>
-          <div
-            style={{
+          <Box
+            sx={{
               display: 'block',
               margin: 'auto',
               width: innerRadius + colors.length * 2 * (border + spacing),
               height: innerRadius + colors.length * 2 * (border + spacing),
-              animation: 'rotate 10s infinite linear',
+              animation: `${rotate} 10s infinite linear`,
             }}
           >
-            <i style={spinnerStyle(0)} />
-            <i style={spinnerStyle(1)} />
-            <i style={spinnerStyle(2)} />
-            <i style={spinnerStyle(3)} />
-            <i style={spinnerStyle(4)} />
-          </div>
+            <StyledI index={0} />
+            <StyledI index={1} />
+            <StyledI index={2} />
+            <StyledI index={3} />
+            <StyledI index={4} />
+          </Box>
         </div>
         <Box sx={{ color: 'text.primary' }}>Loading...</Box>
       </Box>

packages/datagateway-common/src/setupTests.tsx

@@ -90,6 +90,7 @@ export const createReactQueryWrapper = (
         icatUrl: 'https://example.com/icat',
         idsUrl: 'https://example.com/ids',
         downloadApiUrl: 'https://example.com/topcat',
+        uploadUrl: 'https://example.com/upload',
       },
     },
   };

packages/datagateway-common/src/state/actions/actions.types.tsx

@@ -277,6 +277,7 @@ export interface URLs {
   apiUrl: string;
   downloadApiUrl: string;
   icatUrl: string;
+  uploadUrl?: string;
 }
 
 export interface PluginRoute {

packages/datagateway-common/src/views/__snapshots__/uploadDialog.component.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Upload dialog component Datafile renders correctly 1`] = `<DocumentFragment />`;
+
+exports[`Upload dialog component Dataset renders correctly 1`] = `<DocumentFragment />`;