Fix: Rebase issues

.gitignore

@@ -35,4 +35,4 @@ standards_cache.sqlite
 
 ### Neo4j
 neo4j/
-.neo4j/
+.neo4j/

CONTRIBUTING.md

@@ -103,4 +103,4 @@ We use eslint and black to enforce style. `make lint` should fix most style prob
 * Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
 * Limit the first line to 72 characters or less
 * Reference issues and pull requests liberally after the first line
-* When only changing documentation, include `[ci skip]` in the commit title.
+* When only changing documentation, include `[ci skip]` in the commit title.

Makefile

@@ -35,7 +35,8 @@ e2e:
 test:
 	[ -d "./venv" ] && . ./venv/bin/activate
 	export FLASK_APP=$(CURDIR)/cre.py
-	flask routes && flask test
+	flask routes
+	flask test
 
 cover:
 	. ./venv/bin/activate && FLASK_APP=cre.py FLASK_CONFIG=testing flask test --cover

application/cmd/cre_main.py

@@ -14,19 +14,18 @@
 from application.defs import osib_defs as odefs
 from application.utils import spreadsheet as sheet_utils
 from application.utils import spreadsheet_parsers
-
-# from application.utils.external_project_parsers import (
-#     capec_parser,
-#     cwe,
-#     ccmv4,
-#     cheatsheets_parser,
-#     misc_tools_parser,
-#     zap_alerts_parser,
-#     iso27001,
-#     secure_headers,
-#     pci_dss,
-#     juiceshop,
-# )
+from application.utils.external_project_parsers import (
+    capec_parser,
+    cwe,
+    ccmv4,
+    cheatsheets_parser,
+    misc_tools_parser,
+    zap_alerts_parser,
+    iso27001,
+    secure_headers,
+    pci_dss,
+    juiceshop,
+)
 from application.prompt_client import prompt_client as prompt_client
 from dacite import from_dict
 from dacite.config import Config

application/frontend/src/pages/BrowseRootCres/browseRootCres.tsx

@@ -1,7 +1,8 @@
 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';
@@ -16,29 +17,30 @@ export const BrowseRootCres = () => {
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
   const [display, setDisplay] = useState<Document[]>();
-  const [error, setError] = useState<string | Object | null>(null);
+  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);
+      },
+    }
+  );
 
   useEffect(() => {
-    setLoading(true);
     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);
-      });
+    setLoading(true);
+    refetch();
   }, []);
+
   return (
     <div className="cre-page">
       <h1 className="standard-page__heading">Root CREs:</h1>

application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx

@@ -1,7 +1,7 @@
 import './commonRequirementEnumeration.scss';
 
-import axios from 'axios';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 
 import { DocumentNode } from '../../components/DocumentNode';
@@ -17,32 +17,27 @@ export const CommonRequirementEnumeration = () => {
   const { id } = 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 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);
+      },
+    }
+  );
 
   useEffect(() => {
-    setLoading(true);
     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);
-      });
+    setLoading(true);
+    refetch();
   }, [id]);
 
-  const cre = data;
+  const cre = data?.data;
   let filteredCRE;
   if (cre != undefined) {
     filteredCRE = applyFilters(JSON.parse(JSON.stringify(cre))); // dirty deepcopy

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,8 +10,6 @@ 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');
@@ -29,28 +27,25 @@ 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);
-    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);
-      });
+    refetch();
   }, [type, nodeName]);
+  // const { error, data, } = useQuery<{ standards: Document[]; }, string>('deeplink', () => fetch(url).then((res) => res.json()), {});
 
-  const documents = data || [];
+  const documents = data?.standards || [];
   return (
     <>
       <div className="standard-page">

application/frontend/src/pages/Graph/Graph.tsx

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import Elk, { ElkEdge, ElkNode, ElkPort, ElkPrimitiveEdge } from 'elkjs';
 import React, { useEffect, useState } from 'react';
 import ReactFlow, {
@@ -15,6 +14,7 @@ import ReactFlow, {
   isNode,
   removeElements,
 } from 'react-flow-renderer';
+import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { FlowNode } from 'typescript';
 
@@ -94,29 +94,22 @@ 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(() => {
-    setLoading(true);
     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);
-      });
+    setLoading(true);
+    refetch();
   }, [id]);
 
   const [layout, setLayout] = useState<(Node<ReactFlowNode> | Edge<ReactFlowNode>)[]>();
@@ -126,7 +119,7 @@ export const Graph = () => {
       if (data) {
         console.log('flow running:', id);
 
-        let cre = data;
+        let cre = data.data;
         let graph = documentToReactFlowNode(cre);
         const els = await createGraphLayoutElk(graph.nodes, graph.edges);
         setLayout(els);

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 | Object | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setLoading(true);
@@ -27,13 +27,9 @@ export const SearchName = () => {
         setDocuments(response.data);
       })
       .catch(function (axiosError) {
-        // TODO: backend errors if no matches, should return
+        // TODO: backend errors if no matches, shoudl return
         //       proper error instead.
-        if (axiosError.response.status === 404) {
-          setError('No results match your search term');
-        } else {
-          setError(axiosError.response);
-        }
+        setError(axiosError);
       })
       .finally(() => {
         setLoading(false);

application/frontend/src/pages/Search/components/BodyText.tsx

@@ -8,7 +8,7 @@ export const SearchBody = () => {
       <h1>OpenCRE</h1>
       <p>
         <b>
-          OpenCRE is the interactive content linking platform for uniting security standards and guidelines
+          OpenCRE is an interactive content linking platform for uniting security standards and guidelines
           into one overview. It offers easy and robust access to relevant information when designing,
           developing, testing, procuring and organising secure software.
         </b>
@@ -24,12 +24,12 @@ export const SearchBody = () => {
           topics.
         </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.
-      </b>
+      <h3>
+        Use <a href="/chatbot">OpenCRE Chat</a> to ask any security question (Google account required). We
+        injected all the standards from OpenCRE in 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.
+      </h3>
       <h2>HOW?</h2>
       <p>
         OpenCRE links each section of a resource (like a standard or guideline) to a shared topic, known as a
@@ -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 independent 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,22 +61,18 @@ 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) to join the movement. Currently, a stakeholder group is
+        being formed.
       </p>
       <p>
         For more details, see this
-        <a href="https://www.youtube.com/watch?v=TwNroVARmB0"> interview and demo video</a>, read the
+        <a href="https://www.youtube.com/watch?v=7knF14t0Svg"> presentation video</a>, read the
         <a href="https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/CRE-Explained6.pdf">
           {' '}
-          OpenCRE explanation document{' '}
+          CRE 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> or click the diagram below.
       </p>
 
       <a href="/opencregraphic2.png" target="_blank">