Merge branch 'main' into integrate-zeljkos-magic

Signed-off-by: Spyros <[email protected]>
OWASP · Oct 27, 2023 · a924775 · a924775
2 parents 1cbad01 + b4d4882
commit a924775
Show file tree

Hide file tree

Showing 16 changed files with 196 additions and 150 deletions.
diff --git a/Makefile b/Makefile
@@ -18,6 +18,7 @@ e2e:
 	yarn test:e2e
 	killall yarn
 	killall flask
+
 test:
 	[ -d "./venv" ] && . ./venv/bin/activate
 	export FLASK_APP=$(CURDIR)/cre.py

diff --git a/application/frontend/src/components/LoadingAndErrorIndicator/LoadingAndErrorIndicator.tsx b/application/frontend/src/components/LoadingAndErrorIndicator/LoadingAndErrorIndicator.tsx
@@ -10,6 +10,8 @@ export const LoadingAndErrorIndicator: FunctionComponent<LoadingAndErrorIndicato
   loading,
   error,
 }) => {
+  console.log(loading);
+  console.log(error);
   return (
     <>
       {loading && <Loader inline="centered" size="huge" active={loading} />}

diff --git a/application/frontend/src/pages/BrowseRootCres/browseRootCres.tsx b/application/frontend/src/pages/BrowseRootCres/browseRootCres.tsx
@@ -1,8 +1,7 @@
 import './browseRootCres.scss';
 
+import axios from 'axios';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useParams } from 'react-router-dom';
 
 import { DocumentNode } from '../../components/DocumentNode';
 import { ClearFilterButton, FilterButton } from '../../components/FilterButton/FilterButton';
@@ -17,30 +16,29 @@ export const BrowseRootCres = () => {
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
   const [display, setDisplay] = useState<Document[]>();
-  const { error, data, refetch } = useQuery<{ data: Document }, string>(
-    'cre',
-    () =>
-      fetch(`${apiUrl}/root_cres`)
-        .then((res) => res.json())
-        .then((resjson) => {
-          setDisplay(resjson.data);
-          return resjson;
-        }),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
+  const [error, setError] = useState<string | Object | null>(null);
 
   useEffect(() => {
-    window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
-  }, []);
+    window.scrollTo(0, 0);
 
+    axios
+      .get(`${apiUrl}/root_cres`)
+      .then(function (response) {
+        setError(null);
+        setDisplay(response?.data?.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('Standard does not exist in the DB, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
   return (
     <div className="cre-page">
       <h1 className="standard-page__heading">Root CREs:</h1>

diff --git a/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx b/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
@@ -1,7 +1,7 @@
 import './commonRequirementEnumeration.scss';
 
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import axios from 'axios';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DocumentNode } from '../../components/DocumentNode';
@@ -17,27 +17,32 @@ export const CommonRequirementEnumeration = () => {
   const { id } = useParams();
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
-  const globalState = useContext(filterContext);
-
-  const { error, data, refetch } = useQuery<{ data: Document }, string>(
-    'cre',
-    () => fetch(`${apiUrl}/id/${id}`).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
+  const [error, setError] = useState<string | Object | null>(null);
+  const [data, setData] = useState<Document | null>();
 
   useEffect(() => {
-    window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
+    window.scrollTo(0, 0);
+
+    axios
+      .get(`${apiUrl}/id/${id}`)
+      .then(function (response) {
+        setError(null);
+        setData(response?.data?.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('CRE does not exist in the DB, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [id]);
 
-  const cre = data?.data;
+  const cre = data;
   let filteredCRE;
   if (cre != undefined) {
     filteredCRE = applyFilters(JSON.parse(JSON.stringify(cre))); // dirty deepcopy

diff --git a/application/frontend/src/pages/Deeplink/Deeplink.tsx b/application/frontend/src/pages/Deeplink/Deeplink.tsx
@@ -1,5 +1,5 @@
+import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useLocation, useParams } from 'react-router-dom';
 
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
@@ -10,6 +10,8 @@ export const Deeplink = () => {
   let { type, nodeName, section, subsection, tooltype, sectionID } = useParams();
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | Object | null>(null);
+  const [data, setData] = useState<Document[] | null>();
   const search = useLocation().search;
   section = section ? section : new URLSearchParams(search).get('section');
   subsection = subsection ? subsection : new URLSearchParams(search).get('subsection');
@@ -27,25 +29,28 @@ export const Deeplink = () => {
     (tooltype != null ? `tooltype=${tooltype}&` : '') +
     (sectionID != null ? `sectionID=${sectionID}&` : '');
 
-  const { error, data, refetch } = useQuery<{ standards: Document[] }, string>(
-    'deeplink',
-    () => fetch(url).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
   useEffect(() => {
     window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
+    axios
+      .get(url)
+      .then(function (response) {
+        setError(null);
+        setData(response.data?.standard);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('Standard does not exist, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [type, nodeName]);
-  // const { error, data, } = useQuery<{ standards: Document[]; }, string>('deeplink', () => fetch(url).then((res) => res.json()), {});
 
-  const documents = data?.standards || [];
+  const documents = data || [];
   return (
     <>
       <div className="standard-page">

diff --git a/application/frontend/src/pages/Graph/Graph.tsx b/application/frontend/src/pages/Graph/Graph.tsx
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import Elk, { ElkEdge, ElkNode, ElkPort, ElkPrimitiveEdge } from 'elkjs';
 import React, { useEffect, useState } from 'react';
 import ReactFlow, {
@@ -14,7 +15,6 @@ import ReactFlow, {
   isNode,
   removeElements,
 } from 'react-flow-renderer';
-import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { FlowNode } from 'typescript';
 
@@ -94,22 +94,29 @@ export const Graph = () => {
   const { id } = useParams();
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | Object | null>(null);
+  const [data, setData] = useState<Document | null>();
 
-  const { error, data, refetch } = useQuery<{ data: Document }, string>(
-    'cre',
-    () => fetch(`${apiUrl}/id/${id}`).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
   useEffect(() => {
-    window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
+    window.scrollTo(0, 0);
+
+    axios
+      .get(`${apiUrl}/id/${id}`)
+      .then(function (response) {
+        setError(null);
+        setData(response?.data?.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('CRE does not exist in the DB, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [id]);
 
   const [layout, setLayout] = useState<(Node<ReactFlowNode> | Edge<ReactFlowNode>)[]>();
@@ -119,7 +126,7 @@ export const Graph = () => {
       if (data) {
         console.log('flow running:', id);
 
-        let cre = data.data;
+        let cre = data;
         let graph = documentToReactFlowNode(cre);
         const els = await createGraphLayoutElk(graph.nodes, graph.edges);
         setLayout(els);

diff --git a/application/frontend/src/pages/Search/SearchName.tsx b/application/frontend/src/pages/Search/SearchName.tsx
@@ -16,7 +16,7 @@ export const SearchName = () => {
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
   const [documents, setDocuments] = useState<Document[]>([]);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | Object | null>(null);
 
   useEffect(() => {
     setLoading(true);
@@ -27,9 +27,13 @@ export const SearchName = () => {
         setDocuments(response.data);
       })
       .catch(function (axiosError) {
-        // TODO: backend errors if no matches, shoudl return
+        // TODO: backend errors if no matches, should return
         //       proper error instead.
-        setError(axiosError);
+        if (axiosError.response.status === 404) {
+          setError('No results match your search term');
+        } else {
+          setError(axiosError.response);
+        }
       })
       .finally(() => {
         setLoading(false);

diff --git a/application/frontend/src/pages/Search/components/BodyText.tsx b/application/frontend/src/pages/Search/components/BodyText.tsx
@@ -25,10 +25,10 @@ export const SearchBody = () => {
         </b>
       </p>
       <b>
-        Use <a href="/chatbot">OpenCRE Chat</a> to ask any security question (Google account required to maximize queries per minute). In collaboration 
-        with Google, we injected all the standards in OpenCRE into an AI model to create the world's first
-        security-specialized chatbot. This ensures you get a more reliable answer, and also a reference to a
-        reputable source.
+        Use <a href="/chatbot">OpenCRE Chat</a> to ask any security question (Google account required to
+        maximize queries per minute). In collaboration with Google, we injected all the standards in OpenCRE
+        into an AI model to create the world's first security-specialized chatbot. This ensures you get a more
+        reliable answer, and also a reference to a reputable source.
       </b>
       <h2>HOW?</h2>
       <p>
@@ -48,10 +48,10 @@ export const SearchBody = () => {
       </p>
       <h2>WHO?</h2>
       <p>
-        OpenCRE is the brainchild of software security professionals Spyros Gasteratos and Rob van
-        der Veer, who joined forces to tackle the complexities and segmentation in current security standards
-        and guidelines. They collaborated closely with many initiatives, including SKF, OpenSSF and the Owasp
-        Top 10 project. OpenCRE is an open-source platform overseen by the OWASP foundation through the
+        OpenCRE is the brainchild of software security professionals Spyros Gasteratos and Rob van der Veer,
+        who joined forces to tackle the complexities and segmentation in current security standards and
+        guidelines. They collaborated closely with many initiatives, including SKF, OpenSSF and the Owasp Top
+        10 project. OpenCRE is an open-source platform overseen by the OWASP foundation through the
         <a href="https://owasp.org/www-project-integration-standards/"> OWASP Integration standard project</a>
         . The goal is to foster better coordination among security initiatives.
       </p>
@@ -61,8 +61,8 @@ export const SearchBody = () => {
         Cloud Control Matrix, ISO27001, ISO27002, and NIST SSDF).
       </p>
       <p>
-        Contact us via (rob.vanderveer [at] owasp.org) for any questions, remarks or to join the movement. Currently, a stakeholder group is
-        being formed.
+        Contact us via (rob.vanderveer [at] owasp.org) for any questions, remarks or to join the movement.
+        Currently, a stakeholder group is being formed.
       </p>
       <p>
         For more details, see this
@@ -72,7 +72,11 @@ export const SearchBody = () => {
           OpenCRE explanation document{' '}
         </a>
         , follow our
-        <a href="https://www.linkedin.com/company/96695329"> LinkedIn page </a>, click the diagram below, or <a href="https://zeljkoobrenovic.github.io/opencre-explorer/">browse our catalogue textually or graphically</a>.
+        <a href="https://www.linkedin.com/company/96695329"> LinkedIn page </a>, click the diagram below, or{' '}
+        <a href="https://zeljkoobrenovic.github.io/opencre-explorer/">
+          browse our catalogue textually or graphically
+        </a>
+        .
       </p>
 
       <a href="/opencregraphic2.png" target="_blank">

diff --git a/application/frontend/src/pages/Search/components/SearchBar.tsx b/application/frontend/src/pages/Search/components/SearchBar.tsx
@@ -45,7 +45,7 @@ export const SearchBar = () => {
               });
             }}
             label={
-              <Button primary onSubmit={onSubmit}>
+              <Button id="SearchButton" primary onSubmit={onSubmit}>
                 <Icon name="search" />
                 Search
               </Button>