Merge pull request #43 from catenax-ng/hotfix_3.2_with_pcf_part2

[chore]: Code refactor: File download from server and page layout

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 New features, fixed bugs, known defects and other noteworthy changes to each release of the Simple Data Exchanger Frontend.
 
+## [2.1.2] - non-released
+### Changed
+- Download file functions code optimisations. 
+- Page layout css fixes.
+
 ## [2.1.1] - non-released
 ### Added
 - PCF Submodel support added

DEPENDENCIES

@@ -290,6 +290,7 @@ npm/npmjs/-/faye-websocket/0.11.4, Apache-2.0, approved, clearlydefined
 npm/npmjs/-/fb-watchman/2.0.2, MIT AND Apache-2.0, approved, #5379
 npm/npmjs/-/file-entry-cache/6.0.1, MIT, approved, clearlydefined
 npm/npmjs/-/file-loader/6.2.0, MIT, approved, clearlydefined
+npm/npmjs/-/file-saver/2.0.5, MIT, approved, clearlydefined
 npm/npmjs/-/file-selector/0.6.0, MIT, approved, #3230
 npm/npmjs/-/filelist/1.0.4, Apache-2.0, approved, clearlydefined
 npm/npmjs/-/filesize/8.0.7, BSD-3-Clause, approved, #2965
@@ -1212,6 +1213,7 @@ npm/npmjs/@types/estree/0.0.51, MIT, approved, clearlydefined
 npm/npmjs/@types/estree/1.0.0, MIT, approved, #8266
 npm/npmjs/@types/express-serve-static-core/4.17.31, MIT, approved, #6020
 npm/npmjs/@types/express/4.17.14, MIT, approved, #5760
+npm/npmjs/@types/file-saver/2.0.5, MIT, approved, clearlydefined
 npm/npmjs/@types/graceful-fs/4.1.5, MIT, approved, clearlydefined
 npm/npmjs/@types/history/4.7.11, MIT, approved, clearlydefined
 npm/npmjs/@types/hoist-non-react-statics/3.3.1, MIT, approved, clearlydefined

Dockerfile

@@ -48,4 +48,5 @@ RUN chmod ug+rwx /usr/share/nginx/html/
 EXPOSE 8080
 USER 101
 # Start Nginx server
-CMD ["/bin/sh", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]
+CMD ["nginx", "-g", "daemon off;"]
+#CMD ["/bin/bash", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "managed-simple-data-exchanger-frontend",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Managed Simple Data Exchanger Frontend",
   "license": "Apache-2.0",
   "repository": {
@@ -40,6 +40,7 @@
     "axios": "^0.26.0",
     "buffer": "^6.0.3",
     "cx-portal-shared-components": "^1.5.0",
+    "file-saver": "^2.0.5",
     "i18next": "^21.6.12",
     "i18next-browser-languagedetector": "^6.1.3",
     "keycloak-js": "^18.0.1",
@@ -58,6 +59,7 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "^14.0.4",
+    "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.185",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
@@ -87,6 +89,6 @@
     "lint-fix": "eslint src --quiet --fix",
     "format": "prettier --config .prettierrc --write \"src/**/*.{js,ts,json,md,css,html,tsx,jsx}\"",
     "build:legal-notice": "bash scripts/legal-notice.sh",
-    "check:dependencies": "java -jar ./scripts/download/org.eclipse.dash.licenses-1.0.2.jar ./package-lock.json -project automotive.tractusx -summary DEPENDENCIES || true"
+    "check:dependencies": "java -jar ./scripts/download/org.eclipse.dash.licenses.jar ./package-lock.json -project automotive.tractusx -summary DEPENDENCIES || true"
   }
-}
+}

scripts/check-dependencies.md

@@ -6,4 +6,4 @@ This workflow uses the executable jar in the download directory.
 
 In order to update the executable jar run the following command from the root directory:
 
-    curl -L --output ./scripts/download/org.eclipse.dash.licenses-1.0.2.jar 'https://repo.eclipse.org/service/local/artifact/maven/redirect?r=dash-licenses&g=org.eclipse.dash&a=org.eclipse.dash.licenses&v=1.0.2'
+    curl -L --output ./scripts/download/org.eclipse.dash.licenses.jar 'https://repo.eclipse.org/service/local/artifact/maven/redirect?r=dash-licenses&g=org.eclipse.dash&a=org.eclipse.dash.licenses&v=LATEST'

src/components/ContractsTable.tsx

@@ -187,7 +187,7 @@ function ContractsTable({ type, title, subtitle }: IContractsTable) {
 
   if (isSuccess) {
     return (
-      <Box sx={{ flex: 1, p: 4 }}>
+      <>
         <Grid container spacing={2} alignItems="center">
           <Grid item xs={9}>
             <Typography variant="h3">{title}</Typography>
@@ -250,7 +250,7 @@ function ContractsTable({ type, title, subtitle }: IContractsTable) {
             </Box>
           </Grid>
         </Grid>
-      </Box>
+      </>
     );
   } else return null;
 }

src/components/DownloadCSV.tsx → src/components/DownloadSamples.tsx

@@ -23,37 +23,25 @@ import { LoadingButton } from 'cx-portal-shared-components';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { setSnackbarMessage } from '../features/notifiication/slice';
-import { useAppDispatch } from '../features/store';
+import { csvFileDownload } from '../helpers/FileDownloadHelper';
 import AppService from '../services/appService';
 
-export default function DownloadCSV({ submodel }: { submodel: string }) {
+export default function DownloadSamples({ submodel }: { submodel: string }) {
   const [downloadingSample, setdownloadingSample] = useState(false);
   const [downloadingTemplate, setdownloadingTemplate] = useState(false);
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
   async function download(type: string) {
+    if (type === 'sample') {
+      setdownloadingSample(true);
+    } else if (type === 'template') {
+      setdownloadingTemplate(true);
+    }
     try {
-      if (type === 'sample') {
-        setdownloadingSample(true);
-      } else {
-        setdownloadingTemplate(true);
-      }
       const { data } = await AppService.getInstance().downloadCSV(submodel, type);
       if (data) {
-        const url = window.URL.createObjectURL(new Blob([data]));
-        const link = document.createElement('a');
-        link.href = url;
-        link.setAttribute('download', `${type}-${submodel}.csv`);
-        document.body.appendChild(link);
-        link.click();
-        dispatch(
-          setSnackbarMessage({
-            message: 'alerts.downloadSuccess',
-            type: 'success',
-          }),
-        );
+        const fileName = `${type}-${submodel}`;
+        csvFileDownload(data, fileName);
       }
     } finally {
       setdownloadingSample(false);

src/components/layouts/AppLayout.tsx

@@ -41,7 +41,9 @@ export default function AppLayout(props: any) {
         <Nav />
         <Box sx={{ display: 'flex', mt: 8, height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
           <Sidebar />
-          <Box sx={{ width: '100%', height: '100%', overflowY: 'scroll' }}>{props.children}</Box>
+          <Box sx={{ width: '100%', height: '100%', overflowY: 'scroll' }}>
+            <Box sx={{ flex: 1, p: 4 }}>{props.children}</Box>
+          </Box>
         </Box>
       </Box>
     </Box>

src/helpers/FileDownloadHelper.ts

@@ -0,0 +1,36 @@
+/********************************************************************************
+ * Copyright (c) 2023 T-Systems International GmbH
+ * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import saveAs from 'file-saver';
+
+import { setSnackbarMessage } from '../features/notifiication/slice';
+import { store } from '../features/store';
+
+function csvFileDownload(data: BlobPart, name: string) {
+  const file = new File([data], `${name}.csv`, { type: 'text/csv;charset=utf-8' });
+  saveAs(file);
+  store.dispatch(
+    setSnackbarMessage({
+      message: 'alerts.downloadSuccess',
+      type: 'success',
+    }),
+  );
+}
+
+export { csvFileDownload };

src/pages/About.tsx

@@ -18,20 +18,19 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { Box } from '@mui/material';
 import { AboutCard, Typography } from 'cx-portal-shared-components';
 import { t } from 'i18next';
 
 import aboutContent from '../assets/about/legal-notice.json';
 
 function About() {
   return (
-    <Box sx={{ flex: 1, p: 4 }}>
+    <>
       <Typography variant="h3" mb={3}>
         {t('pages.about')}
       </Typography>
       <AboutCard {...aboutContent} />
-    </Box>
+    </>
   );
 }
 

src/pages/CreateData.tsx

@@ -25,7 +25,7 @@ import { isEmpty } from 'lodash';
 import { SyntheticEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import DownloadCSV from '../components/DownloadCSV';
+import DownloadSamples from '../components/DownloadSamples';
 import PoliciesDialog from '../components/policies/PoliciesDialog';
 import SelectSubmodel from '../components/SelectSubmodel';
 import SubmodelDataTable from '../components/SubmodelDataTable';
@@ -43,7 +43,7 @@ export default function CreateData() {
   };
 
   return (
-    <Box sx={{ flex: 1, p: 4 }}>
+    <>
       <Typography variant="h3" mb={2}>
         {t('content.provider.heading')}
       </Typography>
@@ -63,7 +63,7 @@ export default function CreateData() {
         </Grid>
         {!isEmpty(selectedSubmodel) ? (
           <Grid item xs={6}>
-            <DownloadCSV submodel={selectedSubmodel.value} />
+            <DownloadSamples submodel={selectedSubmodel.value} />
           </Grid>
         ) : null}
       </Grid>
@@ -106,6 +106,6 @@ export default function CreateData() {
         </Box>
       )}
       <PoliciesDialog />
-    </Box>
+    </>
   );
 }

src/pages/Help.tsx

@@ -19,12 +19,12 @@
  ********************************************************************************/
 
 import InfoIcon from '@mui/icons-material/Info';
-import { Box, Card, CardContent, Grid } from '@mui/material';
+import { Card, CardContent, Grid } from '@mui/material';
 import { GridColDef } from '@mui/x-data-grid';
 import { Table, Tooltips, Typography } from 'cx-portal-shared-components';
 import { useTranslation } from 'react-i18next';
 
-import DownloadCSV from '../components/DownloadCSV';
+import DownloadSamples from '../components/DownloadSamples';
 import { useGetHelpPageDataQuery } from '../features/provider/submodels/apiSlice';
 import { HelpPageData } from '../features/provider/submodels/types';
 import { useAppSelector } from '../features/store';
@@ -74,7 +74,7 @@ export default function Help() {
 
   if (isSuccess) {
     return (
-      <Box sx={{ flex: 1, p: 4 }}>
+      <>
         <Typography variant="h3" mb={1}>
           {t('pages.help')}
         </Typography>
@@ -105,7 +105,7 @@ export default function Help() {
               <Typography variant="body1" mb={4}>
                 {table.description}
               </Typography>
-              <DownloadCSV submodel={table.id} />
+              <DownloadSamples submodel={table.id} />
             </Grid>
           </Grid>
         ))}
@@ -119,7 +119,7 @@ export default function Help() {
             </ul>
           </CardContent>
         </Card>
-      </Box>
+      </>
     );
   } else return null;
 }