Merge branch 'main' into add-ssdf

OWASP · Jul 4, 2023 · 9b96c1c · 9b96c1c
2 parents 4cae6bb + c81c0aa
commit 9b96c1c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/application/frontend/src/components/DocumentNode/DocumentNode.tsx b/application/frontend/src/components/DocumentNode/DocumentNode.tsx
@@ -18,6 +18,7 @@ import { getDocumentDisplayName, groupLinksByType } from '../../utils';
 import { getApiEndpoint, getInternalUrl } from '../../utils/document';
 import { FilterButton } from '../FilterButton/FilterButton';
 import { LoadingAndErrorIndicator } from '../LoadingAndErrorIndicator';
+import { Icon } from 'semantic-ui-react';
 
 export interface DocumentNode {
   node: Document;
@@ -101,14 +102,27 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
       </>
     );
   };
+
+  const HyperlinkIcon = (hyperlink) => {
+    if (!hyperlink.hyperlink) {
+      return <></>;
+    }
+
+    return (
+        <a href={hyperlink.hyperlink} target="_blank">
+          <Icon name="external" />
+        </a>
+    );
+  };
   const SimpleView = () => {
     return (
       <>
         <div className={`title external-link document-node f2`}>
           <Link to={getInternalUrl(usedNode)}>
             <i aria-hidden="true" className="circle icon"></i>
-            {getDocumentDisplayName(usedNode)}
+            {getDocumentDisplayName(usedNode)} 
           </Link>
+          <HyperlinkIcon hyperlink={usedNode.hyperlink} />
         </div>
         <div className={`content`}></div>
       </>
@@ -131,8 +145,7 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
                 <div className="document-node__link-type-container" key={type}>
                   {idx > 0 && <hr/>}
                   <div>
-                    <span>{getDocumentDisplayName(usedNode)}</span>
-                    <b> {DOCUMENT_TYPE_NAMES[type]}</b>:
+                    <b>Which {DOCUMENT_TYPE_NAMES[type]}</b>:
                   </div>
                   <div>
                     <div className="accordion ui fluid styled f0">

diff --git a/application/frontend/src/components/DocumentNode/documentNode.scss b/application/frontend/src/components/DocumentNode/documentNode.scss
@@ -8,15 +8,19 @@
   }
 
   .icon.external {
-    display: none;
+    color: #4183c4;
     font-size: 0.9em;
     padding-left: 0.5em;
   }
 
+.external:hover::before {
+    color: #115c96;
+    padding: 1px;
+  }
+
   .external-link,
   &.external-link {
     a {
-      display: flex;
       color: rgba(0, 0, 0, 0.4);
     }
   }
@@ -26,9 +30,6 @@
     a {
       color: rgba(0, 0, 0, 0.87);
     }
-    .icon.external {
-      display: inline-block;
-    }
   }
 
   &__link-type-container hr {

diff --git a/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx b/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
@@ -82,8 +82,7 @@ export const CommonRequirementEnumeration = () => {
               Object.entries(linksByType).map(([type, links]) => (
                 <div className="cre-page__links" key={type}>
                   <div className="cre-page__links-eader">
-                    {getDocumentDisplayName(display)}
-                    <b>{DOCUMENT_TYPE_NAMES[type]}</b>:
+                    <b>Which {DOCUMENT_TYPE_NAMES[type]}</b>:
                   </div>
                   {links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))).map((link, i) => (
                     <div key={i} className="accordion ui fluid styled cre-page__links-container">

diff --git a/application/frontend/src/pages/Standard/StandardSection.tsx b/application/frontend/src/pages/Standard/StandardSection.tsx
@@ -56,15 +56,8 @@ export const StandardSection = () => {
   return (
     <>
       <div className="standard-page section-page">
-        <h4 className="standard-page__heading">
-          {id}
-          {version ? '-' + version : ''}
-        </h4>
-        <h5 className="standard-page__sub-heading">
-          {getDocumentDisplayName(document)
-            .replace(document?.name, '')
-            .replace(document?.doctype, '')
-            .replace('::', '')}
+        <h5 className="standard-page__heading">
+          {getDocumentDisplayName(document)}
         </h5>
         {document && document.hyperlink && (
           <>
@@ -82,8 +75,7 @@ export const StandardSection = () => {
               Object.entries(linksByType).map(([type, links]) => (
                 <div className="cre-page__links" key={type}>
                   <div className="cre-page__links-header">
-                    {getDocumentDisplayName(document)}
-                    <b>{DOCUMENT_TYPE_NAMES[type]}</b>:
+                    <b>Which {DOCUMENT_TYPE_NAMES[type]}</b>:
                   </div>
                   {links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))).map((link, i) => (
                     <div key={i} className="accordion ui fluid styled cre-page__links-container">