Merge branch 'eclipse-tractusx:main' into codeql-workflow

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 New features, fixed bugs, known defects and other noteworthy changes to each release of the Simple Data Exchanger Frontend.
 
+## [Unreleased]
+### Added
+- Dedicated page to manage policies.
+- Policies will be dynamically fetched from policy hub based on the selected/available use-cases.
+- Frontend components will be dynamically rendered based on the policy type.
+- New policies can be created and already created policies will be selected and modified while uploading a data.
+- Re-usable page loading handlers for api calls.
+- Notes and info texts added in create data page.
+- Policy related documentations updated.
+
+### Changed
+- Upload data api implemetation moved to RTK query for better performance.
+- Consumer: Fetching policy information from EDC for offer details overlay
+
 ## [2.3.6] - 2024-03-08
 ### Added
 - Policy overlay descriptions.

docs/user-guide/README.md

@@ -25,14 +25,7 @@ This work is licensed under the [Apache-2.0](https://www.apache.org/licenses/LIC
     - [Create Data](#create-data)
       - [Upload File](#upload-file)
       - [Manual Entry](#manual-entry)
-        - [Serial Part](#serial-part-typization)
-        - [Batch](#batch)
-        - [Single Level BoM As Built](#single-level-bom-asbuilt)
-        - [Part As Planned](#part-as-planned)
-        - [Single Level Bom As Planned](#single-level-bom-as-planned)
-        - [Part Site Information As Planned](#part-site-information-as-planned)
-        - [Single Level Usage As Built](#single-level-usage-as-built)
-        - [Product Carbon Footprint](#product-carbon-footprint)
+    - [Policies](#policies)
     - [Upload history](#upload-history)
     - [Contracts](#provider-contracts)
     - [Help](#help)
@@ -44,15 +37,15 @@ This work is licensed under the [Apache-2.0](https://www.apache.org/licenses/LIC
 
 ## **Accessing the app**
 
-[SDE](https://dft.int.demo.catena-x.net/) can be accessed via the internet. The recommended browser is Google Chrome. You need to request an account to access it.
+SDE can be accessed via the internet. The recommended browser is Google Chrome. You need to request an account to access it.
 
 ### **Login**
 
 <img src="images/catenax-login-org-select.svg" height="60%" width="60%">
 <img src="images/catenax-login-org-search.svg" height="60%" width="60%"> 
 <img src="images/catenax-keycloak-signin.svg" height="60%" width="60%">
 
-1. Open **S**imple **D**ata **E**xchanger application via the [URL](https://dft.int.demo.catena-x.net/) (recommended browser Google Chrome).
+1. Open **S**imple **D**ata **E**xchanger application via the URL (recommended browser Google Chrome).
 2. Select the organization from the list or search the organization by typing name in input textbox and select the organization from the search results to login to the Simple Data Exchanger application. After selecting the organization from the list, it will redirect to the CatenaX keycloak login page.
 3. On Keycloak login page of the selected organization, enter login details i.e. Username or email and Password. Click on Sign In button to login to the Simple Data Exchanger application.
 
@@ -89,6 +82,7 @@ On the left side menu, it is possible to navigate the Simple Data Exchanger appl
 **Provider**
 
 - Create Data
+- Policies
 - Upload History
 - Contracts
 - Help
@@ -154,51 +148,31 @@ You can click on the button "Choose a file" and select the proper CSV file prese
 
 After successful file upload of the supported file format i.e. CSV, the button "Next Step - Configure Policies" will be enabled and after clicking on the same, Policy selection dialog will be shown where we need to configure Access and Usage policy.
 
-User can configure access policy accordingly and select company name or bpn number to add.
+User can create new or choose existing policy.
 
-User can add usage policy accordingly and select framework.
+User can configure access and usage policy accordingly to use case selection. 
 
 Once configuring both the policies, we need to click on "SUBMIT" button and wait for upload to finish.
 This is the process of creating new data offer through SDE application by uploading CSV file.
 
 - ### Manual entry
 
-#### Serial Part
+<img src="images/manual-entry.svg" height="60%" width="60%" />
 
-<img src="images/sde-serial-part-tabular.svg" height="60%" width="60%" />
-
-#### Batch
-
-<img src="images/sde-batch-tabular.svg" height="60%" width="60%" />
-
-#### Single Level BoM AsBuilt
-
-<img src="images/sde-assembly-tabular.svg" height="60%" width="60%" />
-
-#### Part AsPlanned
-
-<img src="images/sde-part-planned-tabular.svg" height="60%" width="60%" />
-
-#### Single Level Bom AsPlanned
-
-<img src="images/sde-single-bom-tabular.svg" height="60%" width="60%" />
-
-#### Part Site Information AsPlanned
-
-<img src="images/sde-part-site-info-tabular.svg" height="60%" width="60%" />
+You can add and submit multiple data offers via Manual entry option for particular submodel by clicking on "Add Row" button to bulk upload the multiple data offers in one go. Once you enter details in all of the required fields for a particular row, you need to select which offers we need to upload by ticking the checkboxes for the respective rows and then we need to click on "Next Step - Configure Policies" button to configure Access and Usage policies and then you need to click on Submit button from policy dialog to upload the data. You can upload the data for multiple submodels by selecting the respective submodel from the top level Select submodel dropdown.
+We also can delete multiple rows by selecting which rows we want to delete and then click on Delete Row(s) button.
 
-#### Single Level Usage AsBuilt
+Then you need to configure Access and Usage policies by clicking on "Next Step - Configure Policies" button and after successful configuration, click on Submit button from policy dialog to upload bulk data offers at once.
 
-<img src="images/sde-single-level-usage-table.svg" height="60%" width="60%" />
+You can add other sub-model similarly.
 
-#### Product Carbon Footprint
+## Policies
 
-<img src="images/sde-product-carbon-footprint.svg" height="60%" width="60%" />
+<img src="images/policy.svg" height="60%" width="60%" />
 
-You can add and submit multiple data offers via Manual entry option for particular submodel by clicking on "Add Row" button to bulk upload the multiple data offers in one go. Once you enter details in all of the required fields for a particular row, you need to select which offers we need to upload by ticking the checkboxes for the respective rows and then we need to click on "Next Step - Configure Policies" button to configure Access and Usage policies and then you need to click on Submit button from policy dialog to upload the data. You can upload the data for multiple submodels by selecting the respective submodel from the top level Select submodel dropdown.
-We also can delete multiple rows by selecting which rows we want to delete and then click on Delete Row(s) button.
+User can add and edit the policies in this page by clicking add policy button. So that policies for manual upload process is possible.
 
-Then you need to configure Access and Usage policies by clicking on "Next Step - Configure Policies" button and after successful configuration, click on Submit button from policy dialog to upload bulk data offers at once.
+<img src="images/add-policy.svg" height="60%" width="60%" />
 
 ## Upload history
 
@@ -238,14 +212,13 @@ The table includes below columns:
 - Asset ID (ID of the Asset);
 - Consumer Counter Party Address (Counter party address of the contract agreement);
 - Signing Date (Signing date of the contract agreement);
-- End Date (End date of the contract agreement, if duration restriction under usage policies is unrestricted while creating data then there is no end date and its unlimited);
 - Status (FINALIZED or TERMINATED or ERROR or DECLINED);
 
 ## Help
 
 <img src="images/sde-help-page.svg" height="60%" width="60%" />
 
-This dynamic help page provides the submodel informations of selected use case in the home page. If no use case selected, it will show all available submodels. User can see the the order of the fields and details of each field by hovering the info icon in each row. User can download the sample csv and csv template for any submodels as well from this page.
+This dynamic help page provides the submodel informations of selected use case in the home page. If no use case selected, it will show all available submodels. User can see the the order of the fields and details of each field by hovering the info icon in each row. User can download the sample csv and csv template for any submodels as well from this page. User can use quick link to navigate on any sub model.
 
 # **Consumer**
 

src/assets/locales/de/main.json

@@ -127,6 +127,8 @@
         "title": "Titel",
         "assetId": "Asset ID",
         "created": "erstellt am",
+        "sematicVersion": "Sematic Version",
+        "publisher": "Publisher",
         "description": "Beschreibung"
       }
     },
@@ -182,6 +184,7 @@
       "value": "Wert",
       "titleText": "Titel",
       "created": "Erstellt am",
+      "sematicVersion": "Sematic Version",
       "dataFormat": "Datenformat",
       "description": "Beschreibung",
       "publisher": "Anbieter",
@@ -194,6 +197,9 @@
       "point1": "Sie sind befugt, Ihre Organisation in diesem Fall zu vertreten.",
       "point2": "Sie haben die Zugangs- und Nutzungspolicies gelesen und verstanden.",
       "point3": "Ihre Organisation ist verpflichtet, die Bedingungen der Zugangs- und Nutzungspolicy einzuhalten."
+    },
+    "prompt": {
+      "confirm": "Bitte bestätigen"
     }
   },
   "button": {

src/assets/locales/en/main.json

@@ -130,6 +130,8 @@
         "title": "Title",
         "assetId": "Asset ID",
         "created": "Created On",
+        "sematicVersion": "Sematic Version",
+        "publisher": "Publisher",
         "description": "Description"
       }
     },
@@ -185,6 +187,7 @@
       "value": "Value",
       "titleText": "Title",
       "created": "Created on",
+      "sematicVersion": "Sematic Version",
       "dataFormat": "Data format",
       "description": "Description",
       "publisher": "Publisher",
@@ -197,6 +200,9 @@
       "point1": "You are entitled to represent your organization.",
       "point2": "You have read and understood the access/usage policy.",
       "point3": "Your organization will be responsible to adhere by the rules stated in the access/usage policy."
+    },
+    "prompt": {
+      "confirm": "Please Confirm"
     }
   },
   "button": {

src/components/dialogs/ConfirmTermsDialog.tsx

@@ -1,6 +1,6 @@
 /********************************************************************************
- * Copyright (c) 2021,2022,2023 T-Systems International GmbH
- * Copyright (c) 2022,2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2022,2024 T-Systems International GmbH
+ * Copyright (c) 2022,2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -23,69 +23,60 @@ import { Button, Dialog, DialogActions, DialogContent, DialogHeader, LoadingButt
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { setOpenOfferConfirmDialog } from '../../features/consumer/slice';
 import { IConsumerDataOffers } from '../../features/consumer/types';
+import { useAppDispatch, useAppSelector } from '../../features/store';
+import { splitWithFirstOcc } from '../../utils/utils';
 
 interface IntConfirmOffer {
   offers?: IConsumerDataOffers[] | [];
   offerCount?: number;
   provider: string;
 }
 interface IntDialogProps {
-  title?: string;
-  open: boolean;
   handleConfirm?: () => void;
-  handleClose?: (state: boolean) => void;
   isProgress?: boolean;
   offerObj?: IntConfirmOffer;
 }
 
-const ConfirmTermsDialog: React.FC<IntDialogProps> = ({
-  title = 'Confirm',
-  open = false,
-  handleConfirm,
-  handleClose,
-  isProgress = false,
-  children,
-  offerObj,
-}) => {
+const ConfirmTermsDialog: React.FC<IntDialogProps> = ({ handleConfirm, isProgress = false, offerObj }) => {
+  const { openOfferConfirmDialog } = useAppSelector(state => state.consumerSlice);
   const [isAgreed, setIsAgreed] = useState(false);
   const { t } = useTranslation();
-
-  function splitWithFirstOcc(str: string) {
-    const regX = /:(.*)/s;
-    return str.split(regX) ? `${str.split(regX)[0]}.` : '-.';
-  }
+  const dispatch = useAppDispatch();
 
   return (
-    <Dialog open={open}>
-      <DialogHeader closeWithIcon onCloseWithIcon={() => handleClose(false)} title={title} />
+    <Dialog open={openOfferConfirmDialog}>
+      <DialogHeader
+        closeWithIcon
+        onCloseWithIcon={() => dispatch(setOpenOfferConfirmDialog(false))}
+        title={t('dialog.prompt.confirm')}
+      />
       <DialogContent dividers sx={{ py: 3 }}>
-        {children || (
-          <>
-            <Box sx={{ mb: 1 }}>
-              {offerObj?.offerCount !== 0 && (
-                <Box>
-                  <Trans i18nKey={'dialog.offerDetails.confirmTermsTitle'} count={offerObj.offerCount} />
-                </Box>
-              )}
+        <>
+          <Box sx={{ mb: 1 }}>
+            {offerObj?.offerCount > 1 && (
               <Box>
-                {t('dialog.offerDetails.cofirmTermsSubtitle')}
-                {offerObj ? <b style={{ margin: '0 5px' }}>{splitWithFirstOcc(offerObj.provider)}</b> : '-.'}
+                <Trans i18nKey={'dialog.offerDetails.confirmTermsTitle'} count={offerObj.offerCount} />
               </Box>
-              <Box>{t('dialog.offerDetails.confirmHeading')}</Box>
+            )}
+            <Box>
+              {t('dialog.offerDetails.cofirmTermsSubtitle')}
+              {offerObj ? <b style={{ margin: '0 5px' }}>{splitWithFirstOcc(offerObj.provider)}</b> : '-.'}
             </Box>
-            <Box>(1) {t('dialog.offerDetails.point1')}</Box>
-            <Box>(2) {t('dialog.offerDetails.point2')}</Box>
-            <Box>(3) {t('dialog.offerDetails.point3')}</Box>
-            <FormControlLabel
-              control={<Checkbox checked={isAgreed} onChange={() => setIsAgreed(!isAgreed)} name="gilad" />}
-              label={t('content.common.agree')}
-            />
-          </>
-        )}
+            <Box>{t('dialog.offerDetails.confirmHeading')}</Box>
+          </Box>
+          <Box>(1) {t('dialog.offerDetails.point1')}</Box>
+          <Box>(2) {t('dialog.offerDetails.point2')}</Box>
+          <Box>(3) {t('dialog.offerDetails.point3')}</Box>
+          <FormControlLabel
+            control={<Checkbox checked={isAgreed} onChange={() => setIsAgreed(!isAgreed)} name="gilad" />}
+            label={t('content.common.agree')}
+          />
+        </>
       </DialogContent>
       <DialogActions>
-        <Button variant="outlined" disabled={isProgress} onClick={() => handleClose(false)}>
+        <Button variant="contained" disabled={isProgress} onClick={() => dispatch(setOpenOfferConfirmDialog(false))}>
           {t('button.cancel')}
         </Button>
         <LoadingButton