Feat: #16 There shall be an option to view data sources

decentralised-dataexchange · Sep 30, 2024 · 03e6884 · 03e6884
1 parent 4de5995
commit 03e6884
Show file tree

Hide file tree

Showing 8 changed files with 180 additions and 48 deletions.
diff --git a/src/Components/CollapseUsage/PanelHeader.jsx b/src/Components/CollapseUsage/PanelHeader.jsx
@@ -4,6 +4,7 @@ import { withNamespaces } from "react-i18next";
 import { Popover } from "antd";
 import { ModalComponentWithNamespace } from "../modals/modal";
 import { DataAgreementDetailsWithNamespace } from "../modals/detailsContainer/dataAgreementDetails";
+import { DataSourcesDetailsWithNamespace } from "../modals/detailsContainer/dataSourcesDetails";
 
 const content = (description) => (
   <div>
@@ -32,10 +33,18 @@ export const PanelHeader = ({
   geographicRestriction,
   retentionPeriod,
   storageLocation,
+  methodOfUse,
+  dataAgreement,
 }) => {
   const [openViewDataAgreementModal, setOpenViewDataAgreementModal] = useState(
     false
   );
+  const [openDataSources, setOpenViewDataSources] = useState(false);
+
+  const disableDataAttrubutes =
+    methodOfUse !== "data_using_service" ||
+    (!dataAgreement["dataSources"] ||
+      dataAgreement["dataSources"] === undefined || dataAgreement["dataSources"].length === 0);
 
   return (
     <>
@@ -75,13 +84,34 @@ export const PanelHeader = ({
               </p>
             )}
             <div className="panel-header-count">
-              {t("userRequests.panelAllow")}
-              {` ${consented} of ${total}`}
+              <p>
+                {" "}
+                {t("userRequests.panelAllow")}
+                {` ${consented} of ${total}`}
+              </p>
+              {showDescription && (
+                <p
+                  style={{
+                    textDecoration: "underline",
+                    color: disableDataAttrubutes ? "grey" : "#1890FF",
+                    cursor: disableDataAttrubutes ? "not-allowed" : "pointer",
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    if (!disableDataAttrubutes) {
+                      setOpenViewDataSources(true);
+                    }
+                  }}
+                >
+                  {t("dataAgreements.dataSources")}
+                </p>
+              )}
             </div>
           </div>
         </div>
       </Popover>
 
+      {/* View Data agreements */}
       <ModalComponentWithNamespace
         open={openViewDataAgreementModal}
         setOpen={setOpenViewDataAgreementModal}
@@ -100,6 +130,15 @@ export const PanelHeader = ({
           storageLocation={storageLocation}
         />
       </ModalComponentWithNamespace>
+
+      {/* View Data Sources */}
+      <ModalComponentWithNamespace
+        open={openDataSources}
+        setOpen={setOpenViewDataSources}
+        header={t("dataAgreements.dataSources")}
+      >
+        <DataSourcesDetailsWithNamespace dataAgreement={dataAgreement} />
+      </ModalComponentWithNamespace>
     </>
   );
 };

diff --git a/src/Components/CollapseUsage/collapse.css b/src/Components/CollapseUsage/collapse.css
@@ -69,6 +69,10 @@
   margin: 0;
   padding: 0;
   color: gray;
+  display: flex;
+  justify-content: space-between;
+  align-items: top;
+  width:97%
 }
 
 .panel-header > button {

diff --git a/src/Components/CollapseUsage/index.js b/src/Components/CollapseUsage/index.js
@@ -94,7 +94,6 @@ class CollapseUsage extends Component {
         {!data
           ? null
           : data.map((dataAgreement, i) => {
-              console.log("dataAgreement", dataAgreement["consentRecords"]);
               const consented =
                 dataAgreement["consentRecords"] === null
                   ? 0
@@ -150,6 +149,7 @@ class CollapseUsage extends Component {
                         storageLocation={
                           dataAgreement["policy"]["storageLocation"]
                         }
+                        methodOfUse={`${dataAgreement["methodOfUse"]}`}
                       />
                     </Spin>
                   }

diff --git a/src/Components/modals/detailsContainer/dataSourcesDetails.js b/src/Components/modals/detailsContainer/dataSourcesDetails.js
@@ -0,0 +1,81 @@
+import React, { useState, useMemo } from "react";
+import { withNamespaces } from "react-i18next";
+import "antd/dist/antd.css";
+import { Menu, Dropdown, Icon } from "antd";
+
+const cardStyle = {
+  width: "100%",
+  border: "none",
+  borderRadius: "10px",
+  backgroundColor: "#F7F6F6",
+  marginTop: "10px",
+  padding: 10,
+  paddingLeft: "30px",
+  paddingRight: "30px",
+};
+
+export const DataSourcesDetails = ({ t, dataAgreement }) => {
+  const [selectedSector, setSelectedSector] = useState(null);
+
+  const sectors = useMemo(() => {
+    if (!dataAgreement.dataSources) return [];
+    const sectorSet = new Set(dataAgreement.dataSources.map((ds) => ds.sector));
+    return Array.from(sectorSet);
+  }, [dataAgreement.dataSources]);
+
+  const menu = (
+    <Menu onClick={({ key }) => setSelectedSector(key === "all" ? null : key)}>
+      <Menu.Item key="all">All Sectors</Menu.Item>
+      {sectors.map((sector) => (
+        <Menu.Item key={sector}>{sector}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  const filteredDataSources = useMemo(() => {
+    if (!selectedSector) return dataAgreement.dataSources;
+    return dataAgreement.dataSources.filter(
+      (ds) => ds.sector === selectedSector
+    );
+  }, [dataAgreement.dataSources, selectedSector]);
+
+  return (
+    <div>
+      <Dropdown overlay={menu} trigger={["click"]}>
+        <p
+          style={{ color: "grey", fontSize: "15px", cursor: "pointer" }}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+        >
+          {t("dataAgreements.sector")}: {selectedSector || "All"}{" "}
+          <Icon type="down" />
+        </p>
+      </Dropdown>
+
+      {filteredDataSources &&
+        filteredDataSources.map((dataSource, i) => (
+          <div style={cardStyle} key={i}>
+            <p style={{ fontSize: "14px" }}>{dataSource.name}</p>
+
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
+              <p style={{ margin: 0, color: "grey" }}>{dataSource.sector},</p>
+              <p style={{ margin: 0, color: "grey", marginLeft: 5 }}>
+                {dataSource.location},
+              </p>
+              <p style={{ margin: 0, color: "grey", marginLeft: 5 }}>
+                {dataSource.privacyDashboardUrl}
+              </p>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export const DataSourcesDetailsWithNamespace = withNamespaces()(
+  DataSourcesDetails
+);
+
+export default DataSourcesDetails;
diff --git a/src/Provider/store.js b/src/Provider/store.js
@@ -446,6 +446,8 @@ class Store {
                 consentRecords: associatedConsentRecords.length === 0 ? null : associatedConsentRecords[0],
                 isDisabled: isNotConsentOrLegitimateInterest,
                 isUpdate: associatedConsentRecords.length !== 0,
+                methodOfUse: dataAgreement.methodOfUse,
+                dataSources: dataAgreement.dataSources,
             };
         }));
 

diff --git a/src/localization/locales/en/translation.json b/src/localization/locales/en/translation.json
@@ -84,20 +84,22 @@
     "logs": "History",
     "userRequest": "User requests"
   },
-  "dataAgreements" : {
-    "read" : "Read",
-    "daDetails" : "data agreement details.",
-    "daataAgreement" : "Data Agreement",
+  "dataAgreements": {
+    "read": "Read",
+    "daDetails": "data agreement details.",
+    "daataAgreement": "Data Agreement",
     "close": "Close",
-    "purpose" : "Purpose",
-    "purposeDescription" : "Purpose Description",
-    "lawfulBasisOfProcessing" : "Lawful Basis of Processing",
-    "policyURL" : "Policy URL",
-    "jurisdiction" : "Jurisdiction",
-    "thirdPartyDisclosure" : "Third Party Disclosure",
-    "industryScope" : "Industry Scope",
-    "geographicRestriction" : "Geographic Restriction",
-    "retentionPeriod" : "Retention Period",
-    "storageLocation" : "Storage location"
+    "purpose": "Purpose",
+    "purposeDescription": "Purpose Description",
+    "lawfulBasisOfProcessing": "Lawful Basis of Processing",
+    "policyURL": "Policy URL",
+    "jurisdiction": "Jurisdiction",
+    "thirdPartyDisclosure": "Third Party Disclosure",
+    "industryScope": "Industry Scope",
+    "geographicRestriction": "Geographic Restriction",
+    "retentionPeriod": "Retention Period",
+    "storageLocation": "Storage location",
+    "dataSources": "Data Sources",
+    "sector": "Sector"
   }
-}
+}
diff --git a/src/localization/locales/pt/translation.json b/src/localization/locales/pt/translation.json
@@ -84,20 +84,22 @@
   "userPurposes": {
     "fetchingMessage": "Objetivos de busca..."
   },
-  "dataAgreements" : {
-    "read" : "Read",
-    "daDetails" : "data agreement details.",
-    "daataAgreement" : "Data Agreement",
+  "dataAgreements": {
+    "read": "Read",
+    "daDetails": "data agreement details.",
+    "daataAgreement": "Data Agreement",
     "close": "Close",
-    "purpose" : "Purpose",
-    "purposeDescription" : "Purpose Description",
-    "lawfulBasisOfProcessing" : "Lawful Basis of Processing",
-    "policyURL" : "Policy URL",
-    "jurisdiction" : "Jurisdiction",
-    "thirdPartyDisclosure" : "Third Party Disclosure",
-    "industryScope" : "Industry Scope",
-    "geographicRestriction" : "Geographic Restriction",
-    "retentionPeriod" : "Retention Period",
-    "storageLocation" : "Storage location"
+    "purpose": "Purpose",
+    "purposeDescription": "Purpose Description",
+    "lawfulBasisOfProcessing": "Lawful Basis of Processing",
+    "policyURL": "Policy URL",
+    "jurisdiction": "Jurisdiction",
+    "thirdPartyDisclosure": "Third Party Disclosure",
+    "industryScope": "Industry Scope",
+    "geographicRestriction": "Geographic Restriction",
+    "retentionPeriod": "Retention Period",
+    "storageLocation": "Storage location",
+    "dataSources": "Data Sources",
+    "sector": "Sector"
   }
-}
+}
diff --git a/src/localization/locales/sv/translation.json b/src/localization/locales/sv/translation.json
@@ -84,20 +84,22 @@
     "logs": "Historik",
     "userRequest": "Användarförfrågningar"
   },
-  "dataAgreements" : {
-    "read" : "Read",
-    "daDetails" : "data agreement details.",
-    "daataAgreement" : "Data Agreement",
+  "dataAgreements": {
+    "read": "Read",
+    "daDetails": "data agreement details.",
+    "daataAgreement": "Data Agreement",
     "close": "Close",
-    "purpose" : "Purpose",
-    "purposeDescription" : "Purpose Description",
-    "lawfulBasisOfProcessing" : "Lawful Basis of Processing",
-    "policyURL" : "Policy URL",
-    "jurisdiction" : "Jurisdiction",
-    "thirdPartyDisclosure" : "Third Party Disclosure",
-    "industryScope" : "Industry Scope",
-    "geographicRestriction" : "Geographic Restriction",
-    "retentionPeriod" : "Retention Period",
-    "storageLocation" : "Storage location"
+    "purpose": "Purpose",
+    "purposeDescription": "Purpose Description",
+    "lawfulBasisOfProcessing": "Lawful Basis of Processing",
+    "policyURL": "Policy URL",
+    "jurisdiction": "Jurisdiction",
+    "thirdPartyDisclosure": "Third Party Disclosure",
+    "industryScope": "Industry Scope",
+    "geographicRestriction": "Geographic Restriction",
+    "retentionPeriod": "Retention Period",
+    "storageLocation": "Storage location",
+    "dataSources": "Data Sources",
+    "sector": "Sector"
   }
-}
+}