Merge branch 'main' into doc_type_text_standardisation

application/frontend/src/components/DocumentNode/DocumentNode.tsx

@@ -131,14 +131,16 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
     return (
       <>
         <LoadingAndErrorIndicator loading={loading} error={error} />
-        <div className={`title${active} document-node`} onClick={() => setExpanded(!expanded)}>
+        <div className={`title ${active} document-node`} onClick={() => setExpanded(!expanded)}>
           <i aria-hidden="true" className="dropdown icon"></i>
           <Link to={getInternalUrl(usedNode)}>{getDocumentDisplayName(usedNode)}</Link>
         </div>
         <div className={`content${active} document-node`}>
           <Hyperlink hyperlink={usedNode.hyperlink} />
           {expanded &&
             getTopicsToDisplayOrderdByLinkType().map(([type, links], idx) => {
+              const sortedResults = links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document)))
+              let lastDocumentName = sortedResults[0].document.name
               return (
                 <div className="document-node__link-type-container" key={type}>
                   {idx > 0 && <hr/>}
@@ -147,8 +149,9 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
                   </div>
                   <div>
                     <div className="accordion ui fluid styled f0">
-                      {links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))).map((link, i) => (
+                      {sortedResults.map((link, i) =>{const temp = (
                         <div key={Math.random()}>
+                          {lastDocumentName !== (link.document.name) &&<hr style={{margin:"10px"}}/>}
                           <DocumentNode
                             node={link.document}
                             linkType={type}
@@ -157,7 +160,10 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
                           />
                           <FilterButton document={link.document} />
                         </div>
-                      ))}
+                      )
+                      lastDocumentName = link.document.name
+                      return temp;
+                      })}
                     </div>
                   </div>
                 </div>

application/frontend/src/components/DocumentNode/documentNode.scss

@@ -36,3 +36,24 @@
     margin: 15px 0;
   }
 }
+
+
+.document-node__link-type-container .accordion.ui.styled 
+{
+  div>.title.external-link {
+    padding-top: 0;
+    padding-bottom: .25em;
+  }
+  div:first-child>.title.external-link {
+    padding-top: .75em;
+    padding-bottom: .25em;
+  }
+
+  div>hr+.title.external-link {
+    border-top: none;
+  }
+
+  div:last-child>.title.external-link {
+    padding-bottom: .75em;
+  }
+}

application/frontend/src/pages/Search/SearchName.tsx

@@ -65,7 +65,7 @@ export const SearchName = () => {
           </div>
           <div className="eight wide column">
             <h1 className="standard-page__heading">Matching sources</h1>
-            {nodes && <SearchResults results={nodes} grouped />}
+            {nodes && <SearchResults results={nodes} />}
           </div>
         </div>
       )}

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

@@ -51,22 +51,22 @@ export const SearchBody = () => {
       </p>
       <p>
         OpenCRE currently links OWASP standards (Top 10, ASVS, Proactive Controls, Cheat sheets, Testing
-        guide, ZAP), plus several other sources (CWE, CAPEC, NIST-800 53, NIST-800 63b, Cloud Control Matrix,
-        ISO27001, ISO27002 and PCI-DSS).
+        guide, ZAP, SAMM), plus several other sources (CWE, CAPEC, NIST-800 53, NIST-800 63b, Cloud Control Matrix,
+        ISO27001, ISO27002, NIST SSDF, and PCI-DSS).
       </p>
       <p>
         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=7knF14t0Svg"> presentation video</a>, or read the
-        <a href="https://github.com/OWASP/www-project-integration-standards/raw/master/writeups/CRE-Explained6.pdf">
-          {' '}
-          CRE explanation document
-        </a>
-        .
+        <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">{' '}CRE explanation document{' '}</a>  or click the diagram below.
       </p>
+
+      <a href="/opencregraphic2.png" target="_blank">
+        <img className="align-middle mx-auto " src="/tn_opencregraphic2.jpg" alt="Diagram" />
+      </a>
     </div>
   );
 };

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

@@ -2,16 +2,17 @@ import React from 'react';
 
 import { DocumentNode } from '../../../components/DocumentNode';
 import { getDocumentDisplayName } from 'application/frontend/src/utils/document';
+import { DOCUMENT_TYPES } from 'application/frontend/src/const';
 
-export const SearchResults = ({ results, grouped=false }) => {
+export const SearchResults = ({ results }) => {
   if (results && results.length != 0) {
     const sortedResults = results.sort((a, b) => getDocumentDisplayName(a).localeCompare(getDocumentDisplayName(b)))
-    let lastDocumentName = sortedResults[0].id ?? sortedResults[0].name
+    let lastDocumentName = sortedResults[0].name
     return (
       <>
         {sortedResults.map((document, i) => {let temp = (
           <>
-            {grouped && lastDocumentName !== (document.id ?? document.name) &&<hr style={{marginBottom: "40px"}} />}
+            {document.doctype != DOCUMENT_TYPES.TYPE_CRE && lastDocumentName !== document.name &&<hr style={{marginBottom: "40px"}} />}
             <div key={i} className="accordion ui fluid styled standard-page__links-container">
               <DocumentNode node={document} linkType={'Standard'} />
             </div>