From 7349a563a39f6a9e3ed64c938d1c0fe5fe112337 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 15 Jun 2022 11:35:07 -0700
Subject: [PATCH] feat: Add pinning compliance links (#1943)

* feat: File pinningModal shows link to compliance reports

* feat: PinningManagerModal shows link to service's compliance report if available

* fix: use transifex string with interpolation

* chore: add magnifying glass emoji to string
---
 public/locales/en/files.json                  |  1 +
 public/locales/en/settings.json               |  3 ++-
 .../PinningManagerModal.js                    |  2 +-
 .../PinningManagerServiceModal.js             |  3 ++-
 src/constants/pinning.js                      | 23 ++++++++++++++++++-
 .../modals/pinning-modal/PinningModal.js      |  2 ++
 6 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 7ae96d234..7a9b090ef 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -45,6 +45,7 @@
   },
   "pinningModal": {
     "title": "Select where you would like to pin these items.",
+    "complianceLabel": "🔍 Check pinning services' compliance",
     "footer": "Need to add or configure a pinning service? Go to <1>Settings</1>.",
     "localNode": "Local node",
     "totalSize": "Total size: {size}"
diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
index 291f1524d..d9aeb8cad 100644
--- a/public/locales/en/settings.json
+++ b/public/locales/en/settings.json
@@ -41,7 +41,8 @@
     "apiEndpointPlaceholder": "URL for its API endpoint",
     "secretApiKey": "Secret access token",
     "secretApiKeyHowToLink": "How to generate a new token",
-    "autoUpload": "Auto upload"
+    "autoUpload": "Auto upload",
+    "complianceLabel": "🔍 {nickname} pinning compliance report"
   },
   "autoUploadModal": {
     "title": "Change upload policy for {name}",
diff --git a/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js b/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js
index 298987096..eb29ddd39 100644
--- a/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js
+++ b/src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js
@@ -46,7 +46,7 @@ const PinningManagerModal = ({ t, tReady, onLeave, className, remoteServiceTempl
       </ModalActions>
 
       <Overlay show={!!selectedService} onLeave={onModalClose} hidden>
-        <PinningServiceModal className='outline-0' service={selectedService} onSuccess={onSuccess} onLeave={onModalClose} nickname={selectedServiceInfo.nickname} apiEndpoint={selectedServiceInfo.apiEndpoint} visitServiceUrl={selectedServiceInfo.visitServiceUrl} t={t} />
+        <PinningServiceModal className='outline-0' service={selectedService} onSuccess={onSuccess} onLeave={onModalClose} nickname={selectedServiceInfo.nickname} apiEndpoint={selectedServiceInfo.apiEndpoint} visitServiceUrl={selectedServiceInfo.visitServiceUrl} complianceReportUrl={selectedServiceInfo.complianceReportUrl} t={t} />
       </Overlay>
     </Modal>
   )
diff --git a/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js b/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
index bb6a96df7..d7b615dcc 100644
--- a/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
+++ b/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
@@ -10,7 +10,7 @@ import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
 import Button from '../../button/Button'
 import './PinningManagerServiceModal.css'
 
-const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service, tReady, doAddPinningService, nickname, apiEndpoint, visitServiceUrl, secretApiKey, ...props }) => {
+const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service, tReady, doAddPinningService, nickname, apiEndpoint, visitServiceUrl, secretApiKey, complianceReportUrl, ...props }) => {
   const { register, errors, clearErrors, setError, handleSubmit } = useForm({
     defaultValues: {
       nickname,
@@ -40,6 +40,7 @@ const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service,
       <form onSubmit={handleSubmit(onSubmit)} onChange={cleanErrors}>
         <ModalBody>
           <p>{ t('pinningServiceModal.title') }</p>
+          {complianceReportUrl && (<a className="mb1 tl f7 charcoal-muted no-underline underline-hover" target="_blank" rel="noreferrer" href={complianceReportUrl}>{t('pinningServiceModal.complianceLabel', { nickname })}</a>) }
 
           <div className='pa2 pinningManagerServiceModalContainer'>
             { service.icon && service.name && (
diff --git a/src/constants/pinning.js b/src/constants/pinning.js
index 43923b738..ed7afc5ab 100644
--- a/src/constants/pinning.js
+++ b/src/constants/pinning.js
@@ -1,6 +1,22 @@
+// @ts-check
 // This is a list of predefined templates for popular services from the IPFS
 // community.  We are open to reviewing PRs that add more entries here,
 // but only well-established and mission-aligned services will be accepted.
+
+const complianceReportsHomepage = 'https://ipfs-shipyard.github.io/pinning-service-compliance'
+
+/**
+ * @typedef {object} PinningServiceTemplate
+ * @property {string} name
+ * @property {string} icon
+ * @property {string} apiEndpoint
+ * @property {string} visitServiceUrl
+ * @property {string} [complianceReportUrl]
+ */
+
+/**
+ * @type {PinningServiceTemplate[]}
+ */
 const pinningServiceTemplates = [
   {
     name: 'Pinata',
@@ -8,8 +24,13 @@ const pinningServiceTemplates = [
     apiEndpoint: 'https://api.pinata.cloud/psa',
     visitServiceUrl: 'https://pinata.cloud/documentation#PinningServicesAPI'
   }
-]
+].map((service) => {
+  const domain = new URL(service.apiEndpoint).hostname
+  service.complianceReportUrl = `${complianceReportsHomepage}/${domain}.html`
+  return service
+})
 
 export {
+  complianceReportsHomepage,
   pinningServiceTemplates
 }
diff --git a/src/files/modals/pinning-modal/PinningModal.js b/src/files/modals/pinning-modal/PinningModal.js
index bc88cb2d7..43975075c 100644
--- a/src/files/modals/pinning-modal/PinningModal.js
+++ b/src/files/modals/pinning-modal/PinningModal.js
@@ -6,6 +6,7 @@ import Button from '../../../components/button/Button'
 import Checkbox from '../../../components/checkbox/Checkbox'
 import GlyphPin from '../../../icons/GlyphPin'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal'
+import { complianceReportsHomepage } from '../../../constants/pinning'
 import { connect } from 'redux-bundler-react'
 import './PinningModal.css'
 
@@ -69,6 +70,7 @@ export const PinningModal = ({ t, tReady, onCancel, onPinningSet, file, pinningS
             Need to add or configure a pinning service? Go to <a href="#/settings" className="link blue">Settings.</a>
           </Trans>
         </p> */}
+        <a className="mb1 tl f7 charcoal-muted no-underline underline-hover" target="_blank" rel="noreferrer" href={complianceReportsHomepage}>{ t('pinningModal.complianceLabel') }</a>
         <p className="f6 charcoal">{t('pinningModal.totalSize', { size: humanSize(size) })}</p>
       </ModalBody>