From 03e68847f8af2ae8b7bc4a5bb1ce50e17e4517e2 Mon Sep 17 00:00:00 2001 From: MARZOOQUE Date: Sun, 29 Sep 2024 12:25:39 +0530 Subject: [PATCH] Feat: #16 There shall be an option to view data sources --- src/Components/CollapseUsage/PanelHeader.jsx | 43 +++++++++- src/Components/CollapseUsage/collapse.css | 4 + src/Components/CollapseUsage/index.js | 2 +- .../detailsContainer/dataSourcesDetails.js | 81 +++++++++++++++++++ src/Provider/store.js | 2 + src/localization/locales/en/translation.json | 32 ++++---- src/localization/locales/pt/translation.json | 32 ++++---- src/localization/locales/sv/translation.json | 32 ++++---- 8 files changed, 180 insertions(+), 48 deletions(-) create mode 100644 src/Components/modals/detailsContainer/dataSourcesDetails.js diff --git a/src/Components/CollapseUsage/PanelHeader.jsx b/src/Components/CollapseUsage/PanelHeader.jsx index 263072a4..2c7533e6 100644 --- 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) => (
@@ -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 = ({

)}
- {t("userRequests.panelAllow")} - {` ${consented} of ${total}`} +

+ {" "} + {t("userRequests.panelAllow")} + {` ${consented} of ${total}`} +

+ {showDescription && ( +

{ + e.stopPropagation(); + if (!disableDataAttrubutes) { + setOpenViewDataSources(true); + } + }} + > + {t("dataAgreements.dataSources")} +

+ )}
+ {/* View Data agreements */} + + {/* View Data Sources */} + + + ); }; diff --git a/src/Components/CollapseUsage/collapse.css b/src/Components/CollapseUsage/collapse.css index 960c9ef9..07e175a7 100644 --- 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 index 42270c4c..8a8c9e10 100644 --- 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"]}`} /> } diff --git a/src/Components/modals/detailsContainer/dataSourcesDetails.js b/src/Components/modals/detailsContainer/dataSourcesDetails.js new file mode 100644 index 00000000..d37cf025 --- /dev/null +++ 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 = ( + setSelectedSector(key === "all" ? null : key)}> + All Sectors + {sectors.map((sector) => ( + {sector} + ))} + + ); + + const filteredDataSources = useMemo(() => { + if (!selectedSector) return dataAgreement.dataSources; + return dataAgreement.dataSources.filter( + (ds) => ds.sector === selectedSector + ); + }, [dataAgreement.dataSources, selectedSector]); + + return ( +
+ +

{ + e.stopPropagation(); + e.preventDefault(); + }} + > + {t("dataAgreements.sector")}: {selectedSector || "All"}{" "} + +

+ + + {filteredDataSources && + filteredDataSources.map((dataSource, i) => ( +
+

{dataSource.name}

+ +
+

{dataSource.sector},

+

+ {dataSource.location}, +

+

+ {dataSource.privacyDashboardUrl} +

+
+
+ ))} +
+ ); +}; + +export const DataSourcesDetailsWithNamespace = withNamespaces()( + DataSourcesDetails +); + +export default DataSourcesDetails; \ No newline at end of file diff --git a/src/Provider/store.js b/src/Provider/store.js index 322803c3..c437cc68 100644 --- 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 index 331e568c..d5dcedd1 100644 --- 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" } -} +} \ No newline at end of file diff --git a/src/localization/locales/pt/translation.json b/src/localization/locales/pt/translation.json index a3ef6669..271e09b8 100644 --- 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" } -} +} \ No newline at end of file diff --git a/src/localization/locales/sv/translation.json b/src/localization/locales/sv/translation.json index 8f4221dd..54984aef 100644 --- 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" } -} +} \ No newline at end of file