Merge pull request #75 from SolidLabResearch/verify-source

Add source verification

Author: axellorreyne

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Source verification (#73).
+
 ### Changed
 
 ### Fixed

cypress/e2e/verify-source.cy.js

@@ -0,0 +1,16 @@
+describe("Verify source", () => {
+  it("Verification button exists and returns correct result", () => {
+    cy.visit("/");
+
+    cy.contains("My favourite musicians").click();
+
+    cy.get('[aria-label="Sources info"]').click();
+
+    cy.get('[aria-label="Verify source"]').each(($button) => {
+      cy.wrap($button).click();
+    });
+
+    cy.get('[aria-label="Verification succeeded"]').should("exist");
+    cy.get('[aria-label="Verification failed"]').should("exist")
+  });
+});

src/components/ActionBar/ActionBar.jsx

@@ -18,6 +18,7 @@ import {
 import InfoIcon from "@mui/icons-material/Info";
 import SourceAuthenticationIcon from "./SourceAuthenticationIcon/SourceAuthenticationIcon";
 import SourceFetchStatusIcon from "./SourceFetchStatusIcon/SourceFetchStatusIcon";
+import SourceVerificationIcon from "./SourceVerificationIcon/SourceVerificationIcon.jsx";
 
 /**
  *
@@ -95,6 +96,7 @@ function ActionBar() {
                   <TableCell>Source</TableCell>
                   <TableCell>Authentication needed</TableCell>
                   <TableCell>Fetch status</TableCell>
+                  <TableCell>Verified</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -107,6 +109,9 @@ function ActionBar() {
                     <TableCell>
                       <SourceFetchStatusIcon proxyUrl={config.httpProxy} context={context} source={source} />
                     </TableCell>
+                    <TableCell>
+                      <SourceVerificationIcon proxyUrl={config.httpProxy} context={context} source={source} />
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>

src/components/ActionBar/SourceVerificationIcon/SourceVerificationIcon.jsx

@@ -0,0 +1,82 @@
+import CheckIcon from "@mui/icons-material/Check";
+import {CircularProgress, Tooltip} from "@mui/material";
+import {Component, useState} from "react";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import {Button} from "react-admin";
+import CancelIcon from "@mui/icons-material/Cancel";
+import PropTypes from "prop-types";
+
+/**
+ * @param {object} props - the props passed to the component
+ * @param {object} props.context - the query context
+ * @param {string} props.source - the source to check
+ * @param {string} props.proxyUrl - the proxy url to use if the resource is accessed through a proxy
+ * @returns {Component} an icon indicating whether the source was verified or not
+ */
+function SourceVerificationIcon({context, source, proxyUrl}) {
+  let sourceUrl = source;
+  if (context.useProxy) {
+    sourceUrl = `${proxyUrl}${source}`;
+  }
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isVerified, setIsVerified] = useState(false);
+  const [needsVerification, setNeedsVerification] = useState(false);
+
+  // This function should be replaced by the actual verification function
+  const verifyFunction = async (source, fetchFunction) => {
+    try {
+      const response = await fetchFunction(source);
+      return response.ok;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  /**
+   * Handle the request for source verification
+   */
+  function verify() {
+    setNeedsVerification(true);
+    verifyFunction(sourceUrl, context.underlyingFetchFunction).then((result) => {
+      setIsVerified(result);
+      setIsLoading(false);
+    })
+  }
+
+  if (needsVerification) {
+    if (isLoading) {
+      return <CircularProgress size={20}/>;
+    } else {
+      if (isVerified) {
+        return (
+          <Tooltip title="Verification succeeded">
+            <CheckIcon size="small"/>
+          </Tooltip>
+        );
+      } else {
+        return (
+          <Tooltip title="Verification failed">
+            <CancelIcon size="small"/>
+          </Tooltip>
+        );
+      }
+    }
+  } else {
+    return (
+      <Tooltip title="Verify source">
+        <Button onClick={verify}>
+          <QuestionMarkIcon size="small"/>
+        </Button>
+      </Tooltip>
+    );
+  }
+}
+
+SourceVerificationIcon.propTypes = {
+  context: PropTypes.object.isRequired,
+  source: PropTypes.string.isRequired,
+  proxyUrl: PropTypes.string.isRequired,
+}
+
+export default SourceVerificationIcon;

src/dataProvider/SparqlDataProvider.js

@@ -213,12 +213,13 @@ function generateContext(context) {
     }
   }
 
-  let fetchFunction = fetch;
+  let underlyingFetchFunction = fetch;
   if (getDefaultSession().info.isLoggedIn) {
-    fetchFunction = authFetch;
+    underlyingFetchFunction = authFetch;
   }
 
-  context.fetch = statusFetch(fetchFunction, context);
+  context.underlyingFetchFunction = underlyingFetchFunction;
+  context.fetch = statusFetch(underlyingFetchFunction, context);
 
   if (context.useProxy) {
     context.httpProxyHandler = proxyHandler;
@@ -234,7 +235,7 @@ function generateContext(context) {
  * @returns {Function} a function that wraps the fetch function and sets the fetchSuccess flag in the context.
  */
 function statusFetch(customFetch, context) {
-  const fetchFunction = async (arg) => {
+  const wrappedFetchFunction = async (arg) => {
     try{
       const response = await customFetch(arg);
       context.fetchSuccess[arg] = true;
@@ -245,7 +246,7 @@ function statusFetch(customFetch, context) {
       throw error;
     }
   }
-  return fetchFunction;
+  return wrappedFetchFunction;
 }
 
 /**