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/api/datasets.test.tsx

@@ -11,6 +11,7 @@ import {
   useDatasetDetails,
   useDatasetsInfinite,
   useDatasetsPaginated,
+  createDataset,
 } from './datasets';
 
 jest.mock('../handleICATError');
@@ -496,4 +497,50 @@ describe('dataset api functions', () => {
       expect(document.body.appendChild).toHaveBeenCalledWith(link);
     });
   });
+
+  describe('createDataset', () => {
+    it('sends axios request to create a dataset and returns the dataset ID', async () => {
+      const name = 'Test Dataset';
+      const description = 'Test Description';
+      const investigationId = 1;
+      const datasetId = 123;
+
+      const axiosPostMock = jest.spyOn(axios, 'post');
+      axiosPostMock.mockResolvedValue({
+        data: {
+          datasetId: datasetId.toString(),
+        },
+      });
+
+      const result = await createDataset(name, description, investigationId);
+
+      expect(axiosPostMock).toHaveBeenCalledWith(
+        'http://127.0.0.1:8181/dataset',
+        {
+          investigationId: investigationId,
+          datasetName: name,
+          datasetDescription: description,
+        },
+        {
+          headers: {
+            Authorization: 'Bearer null',
+          },
+        }
+      );
+      expect(result).toBe(datasetId);
+    });
+
+    it('handles axios request error and throws an error', async () => {
+      const name = 'Test Dataset';
+      const description = 'Test Description';
+      const investigationId = 1;
+
+      const axiosPostMock = jest.spyOn(axios, 'post');
+      axiosPostMock.mockRejectedValue(new Error('Test error'));
+
+      await expect(
+        createDataset(name, description, investigationId)
+      ).rejects.toThrow('Test error');
+    });
+  });
 });

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

@@ -284,3 +284,26 @@ export const downloadDataset = (
   link.click();
   link.remove();
 };
+
+export const createDataset = (
+  name: string,
+  description: string,
+  investigationId: number
+): Promise<number> => {
+  // const apiUrl = useSelector((state: StateType) => state.dgcommon.urls.apiUrl);
+
+  const params = {
+    investigationId: investigationId,
+    datasetName: name,
+    datasetDescription: description,
+  };
+
+  //TODO: remove hardcoded url
+  return axios
+    .post('http://127.0.0.1:8181/dataset', params, {
+      headers: {
+        Authorization: `Bearer ${readSciGatewayToken().sessionId}`,
+      },
+    })
+    .then((response) => parseInt(response.data.datasetId));
+};

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 />`;