Improved seperation in nested node

OWASP · Jul 10, 2023 · 6feb745 · 6feb745
1 parent cd27c02
commit 6feb745
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/application/frontend/src/components/DocumentNode/DocumentNode.tsx b/application/frontend/src/components/DocumentNode/DocumentNode.tsx
@@ -133,14 +133,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/>}
@@ -149,8 +151,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}
@@ -159,7 +162,10 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
                           />
                           <FilterButton document={link.document} />
                         </div>
-                      ))}
+                      )
+                      lastDocumentName = link.document.name
+                      return temp;
+                      })}
                     </div>
                   </div>
                 </div>

diff --git a/application/frontend/src/components/DocumentNode/documentNode.scss b/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;
+  }
+}
diff --git a/application/frontend/src/pages/Search/SearchName.tsx b/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>
       )}

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