Fix more rebase issues

OWASP · Nov 5, 2023 · c2600cb · c2600cb
1 parent 31aba94
commit c2600cb
Show file tree

Hide file tree

Showing 13 changed files with 322 additions and 217 deletions.
diff --git a/application/frontend/src/pages/BrowseRootCres/browseRootCres.tsx b/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>

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 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

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,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">

diff --git a/application/frontend/src/pages/Graph/Graph.tsx b/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);

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 | 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);

diff --git a/application/frontend/src/pages/Search/components/BodyText.tsx b/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">