AB#1223 Use the confidentialityLabel choices for the site classification

NCI-Agency · Jan 28, 2025 · 3ec362f · 3ec362f
1 parent ee12da5
commit 3ec362f
Show file tree

Hide file tree

Showing 27 changed files with 237 additions and 203 deletions.
diff --git a/anet-dictionary.yml b/anet-dictionary.yml
@@ -46,15 +46,26 @@ confidentialityLabel:
   label: Security Marking
   choices:
     public:
+      color: green
       policy: Public
     NU:
+      color: green
       policy: NATO
       classification: UNCLASSIFIED
     NU_rel_EU:
+      color: green
       policy: NATO
       classification: UNCLASSIFIED
       releasableTo:
         - EU
+    demo:
+      color: green
+      policy: DEMO
+      classification: USE ONLY
+      releasableTo:
+        - DEMO MISSION
+
+siteClassification: demo
 
 fields:
 

diff --git a/client/public/index.hbs b/client/public/index.hbs
@@ -31,11 +31,6 @@
 				role:"<#if (currentUser.position)?? >${currentUser.position.type!'ADVISOR'}<#else>ADVISOR</#if>",
 				rank: "${currentUser.rank!}",
 			},
-			adminSettings: [
-				{ key: "SECURITY_BANNER_CLASSIFICATION", value: "${securityBannerClassification!\"Set SECURITY_BANNER_CLASSIFICATION adminSetting\"}" },
-				{ key: "SECURITY_BANNER_RELEASABILITY", value: "${securityBannerReleasability!\"Set SECURITY_BANNER_RELEASABILITY adminSetting\"}" },
-				{ key: "SECURITY_BANNER_COLOR", value: "${securityBannerColor!\"green\"}" }
-			],
 			dictionary : "${serializedDictionary?no_esc}"
 		}
 		</script>

diff --git a/client/src/components/Compact.tsx b/client/src/components/Compact.tsx
@@ -4,14 +4,12 @@ import { IconNames } from "@blueprintjs/icons"
 import styled from "@emotion/styled"
 import AppContext from "components/AppContext"
 import LinkTo from "components/LinkTo"
-import {
-  CompactSecurityBanner,
-  SETTING_KEY_COLOR
-} from "components/SecurityBanner"
+import { CompactSecurityBanner } from "components/SecurityBanner"
 import moment from "moment"
 import React, { useContext } from "react"
 import { Link, useLocation } from "react-router-dom"
 import Settings from "settings"
+import utils from "utils"
 import anetLogo from "../../public/favicon/logo.svg"
 
 export const PAGE_SIZES = {
@@ -118,21 +116,28 @@ const CompactViewS = styled.div`
 `
 
 interface CompactHeaderContentProps {
-  classification?: string
+  color?: string
+  policyAndClassification?: string
+  releasableTo?: string
   sensitiveInformation?: boolean
 }
 
 export const CompactHeaderContent = ({
-  classification,
+  color = utils.getColorForChoice(Settings.siteClassification),
+  policyAndClassification = utils.getPolicyAndClassificationForChoice(
+    Settings.siteClassification
+  ),
+  releasableTo = utils.getReleasableToForChoice(Settings.siteClassification),
   sensitiveInformation
 }: CompactHeaderContentProps) => {
-  const { appSettings } = useContext(AppContext)
   return (
-    <HeaderContentS bgc={appSettings[SETTING_KEY_COLOR]}>
+    <HeaderContentS bgc={color}>
       <img src={anetLogo} alt="logo" width="50" height="12" />
       <ClassificationBoxS>
         <ClassificationBanner
-          classification={classification}
+          color={color}
+          policyAndClassification={policyAndClassification}
+          releasableTo={releasableTo}
           bannerId="header-banner"
         />
         {sensitiveInformation && <SensitivityInformation />}
@@ -143,25 +148,33 @@ export const CompactHeaderContent = ({
 
 interface CompactFooterContentProps {
   object?: any
-  classification?: string
+  color?: string
+  policyAndClassification?: string
+  releasableTo?: string
 }
 
 export const CompactFooterContent = ({
   object,
-  classification
+  color = utils.getColorForChoice(Settings.siteClassification),
+  policyAndClassification = utils.getPolicyAndClassificationForChoice(
+    Settings.siteClassification
+  ),
+  releasableTo = utils.getReleasableToForChoice(Settings.siteClassification)
 }: CompactFooterContentProps) => {
   const location = useLocation()
-  const { currentUser, appSettings } = useContext(AppContext)
+  const { currentUser } = useContext(AppContext)
   return (
-    <FooterContentS bgc={appSettings[SETTING_KEY_COLOR]}>
+    <FooterContentS bgc={color}>
       <span style={{ fontSize: "10px" }}>
         uuid:{" "}
         <Link to={location.pathname} style={{ fontSize: "10px" }}>
           {object.uuid}
         </Link>
       </span>
       <ClassificationBanner
-        classification={classification}
+        color={color}
+        policyAndClassification={policyAndClassification}
+        releasableTo={releasableTo}
         bannerId="footer-banner"
       />
       <PrintedByBoxS>
@@ -279,18 +292,24 @@ const FooterContentS = styled.div`
 `
 
 interface ClassificationBannerProps {
-  classification?: string
+  color: string
+  policyAndClassification: string
+  releasableTo: string
   bannerId?: string
 }
 
 const ClassificationBanner = ({
-  classification,
+  color,
+  policyAndClassification,
+  releasableTo,
   bannerId
 }: ClassificationBannerProps) => {
   return (
     <ClassificationBannerS>
       <CompactSecurityBanner
-        classification={classification}
+        color={color}
+        policyAndClassification={policyAndClassification}
+        releasableTo={releasableTo}
         bannerId={bannerId}
       />
     </ClassificationBannerS>

diff --git a/client/src/components/SecurityBanner.tsx b/client/src/components/SecurityBanner.tsx
@@ -9,10 +9,6 @@ import Settings from "settings"
 import utils from "utils"
 import Version from "version"
 
-export const SETTING_KEY_CLASSIFICATION = "SECURITY_BANNER_CLASSIFICATION"
-export const SETTING_KEY_RELEASABILITY = "SECURITY_BANNER_RELEASABILITY"
-export const SETTING_KEY_COLOR = "SECURITY_BANNER_COLOR"
-
 const CONNECTION_INFO_COLORS = {
   newVersion: "black",
   error: "red"
@@ -33,8 +29,7 @@ const SecurityBanner = ({
   onLogout,
   handleSecurityBannerBottom
 }: SecurityBannerProps) => {
-  const { appSettings, currentUser, connection } = useContext(AppContext)
-  const background = appSettings[SETTING_KEY_COLOR]
+  const { currentUser, connection } = useContext(AppContext)
   const securityTextRef = useRef(null)
   const [bannerSideHeight, setBannerSideHeight] = useState(0)
   const securityTextHeight = securityTextRef.current?.clientHeight || 0
@@ -73,14 +68,16 @@ const SecurityBanner = ({
         <SecurityTextContainer
           id="bannerSecurityText"
           ref={securityTextRef}
-          bgc={background}
+          bgc={utils.getColorForChoice(Settings.siteClassification)}
           sideHeight={bannerSideHeight}
         >
-          <span className="classificationText">
-            {appSettings[SETTING_KEY_CLASSIFICATION]?.toUpperCase() || ""}
-          </span>{" "}
-          <span className="releasabilityText">
-            {utils.titleCase(appSettings[SETTING_KEY_RELEASABILITY] || "")}
+          <span className="fw-bold me-1">
+            {utils.getPolicyAndClassificationForChoice(
+              Settings.siteClassification
+            )}
+          </span>
+          <span>
+            {utils.getReleasableToForChoice(Settings.siteClassification)}
           </span>
         </SecurityTextContainer>
         <UserBox id="bannerUser">
@@ -150,9 +147,6 @@ const SecurityTextContainer = styled.div`
   align-self: start;
   text-align: center;
   position: relative;
-  & > span.classificationText {
-    font-weight: bold;
-  }
   &:before {
     content: "";
     border-right: ${props => `20px solid ${props.bgc}`};
@@ -161,6 +155,7 @@ const SecurityTextContainer = styled.div`
     left: -20px;
     top: 0;
   }
+
   &:after {
     content: "";
     border-left: ${props => `20px solid ${props.bgc}`};
@@ -213,39 +208,30 @@ const ConnectionBanner = ({ connection }: ConnectionBannerProps) => {
 }
 
 interface CompactSecurityBannerProps {
-  classification?: string
+  color: string
+  policyAndClassification: string
+  releasableTo: string
   bannerId?: string
 }
 
 export const CompactSecurityBanner = ({
-  classification,
+  color,
+  policyAndClassification,
+  releasableTo,
   bannerId
 }: CompactSecurityBannerProps) => {
-  const { appSettings } = useContext(AppContext)
   return (
-    <CompactBannerS className="banner" bgc={appSettings[SETTING_KEY_COLOR]}>
-      {(classification && (
-        <span className="classificationText" id={bannerId}>
-          {classification}
-        </span>
-      )) || (
-        <>
-          <span className="classificationText" id={bannerId}>
-            {appSettings[SETTING_KEY_CLASSIFICATION]?.toUpperCase() || ""}
-          </span>{" "}
-          <span className="releasabilityText">
-            {utils.titleCase(appSettings[SETTING_KEY_RELEASABILITY] || "")}
-          </span>
-        </>
-      )}
+    <CompactBannerS className="banner" bgc={color}>
+      <span className="fw-bold me-1" id={bannerId}>
+        {policyAndClassification}
+      </span>
+      <span>{releasableTo}</span>
     </CompactBannerS>
   )
 }
 
 const CompactBannerS = styled.div`
-  & > span.classificationText {
-    font-weight: bold;
-  }
+  background: ${props => props.bgc};
 `
 
 export default SecurityBanner
diff --git a/client/src/pages/reports/Compact.tsx b/client/src/pages/reports/Compact.tsx
@@ -314,7 +314,11 @@ const CompactReportView = ({ pageDispatchers }: CompactReportViewProps) => {
             backgroundText={backgroundText}
           >
             <CompactHeaderContent
-              classification={utils.getConfidentialityLabelForChoice(
+              color={utils.getColorForChoice(report.classification)}
+              policyAndClassification={utils.getPolicyAndClassificationForChoice(
+                report.classification
+              )}
+              releasableTo={utils.getReleasableToForChoice(
                 report.classification
               )}
             />
@@ -417,7 +421,8 @@ const CompactReportView = ({ pageDispatchers }: CompactReportViewProps) => {
             </CompactTable>
             <CompactFooterContent
               object={report}
-              classification={utils.getConfidentialityLabelForChoice(
+              color={utils.getColorForChoice(report.classification)}
+              policyAndClassification={utils.getPolicyAndClassificationForChoice(
                 report.classification
               )}
             />

diff --git a/client/src/pages/reports/Show.tsx b/client/src/pages/reports/Show.tsx
@@ -481,11 +481,14 @@ const ReportShow = ({ setSearchQuery, pageDispatchers }: ReportShowProps) => {
               <div
                 style={{ width: "100%", fontSize: "18px", textAlign: "center" }}
               >
-                <span style={{ fontWeight: "bold" }} id="report-classification">
-                  {utils.getConfidentialityLabelForChoice(
+                <span className="fw-bold me-1" id="report-classification">
+                  {utils.getPolicyAndClassificationForChoice(
                     report.classification
                   )}
                 </span>
+                <span>
+                  {utils.getReleasableToForChoice(report.classification)}
+                </span>
               </div>
             )}
 

diff --git a/client/src/utils.tsx b/client/src/utils.tsx
@@ -432,26 +432,52 @@ export default {
     }))
   },
 
-  getConfidentialityLabelForChoice: function(choice) {
+  getColorForChoice: function(choice) {
+    return Settings.confidentialityLabel.choices[choice]?.color
+  },
+
+  getPolicyAndClassificationForChoice: function(choice) {
     let label
     const props = Settings.confidentialityLabel.choices[choice]
     if (props) {
       label = props.policy
       if (props.classification) {
         label = `${label} ${props.classification}`
       }
-      if (props.releasableTo) {
-        label = `${label} Releasable to ${props.releasableTo.join(", ")}`
+    }
+    return label
+  },
+
+  getReleasableToForChoice: function(choice) {
+    const props = Settings.confidentialityLabel.choices[choice]
+    if (props?.releasableTo) {
+      return `Releasable to ${props.releasableTo.join(", ")}`
+    }
+    return undefined
+  },
+
+  getConfidentialityLabelForChoice: function(choice) {
+    let label
+    const policyAndClassification =
+      this.getPolicyAndClassificationForChoice(choice)
+    if (policyAndClassification) {
+      label = policyAndClassification
+      const releasableTo = this.getReleasableToForChoice(choice)
+      if (releasableTo) {
+        label = `${label} ${releasableTo}`
       }
     }
     return label
   },
 
   getConfidentialityLabelChoices: function() {
-    return Object.keys(Settings.confidentialityLabel.choices).map(choice => ({
-      value: choice,
-      label: this.getConfidentialityLabelForChoice(choice)
-    }))
+    return Object.entries(Settings.confidentialityLabel.choices).map(
+      ([choice, props]) => ({
+        value: choice,
+        label: this.getConfidentialityLabelForChoice(choice),
+        color: props?.color
+      })
+    )
   }
 }
 

diff --git a/client/tests/jest/models/securityBanner.test.tsx b/client/tests/jest/models/securityBanner.test.tsx
@@ -2,24 +2,16 @@ import { render, screen } from "@testing-library/react"
 import React from "react"
 import { BrowserRouter } from "react-router-dom"
 import AppContext from "../../../src/components/AppContext"
-import SecurityBanner, {
-  SETTING_KEY_CLASSIFICATION,
-  SETTING_KEY_COLOR,
-  SETTING_KEY_RELEASABILITY
-} from "../../../src/components/SecurityBanner"
+import SecurityBanner from "../../../src/components/SecurityBanner"
 
 const Wrapper = connection => {
-  const appSettings = {}
-  appSettings[SETTING_KEY_COLOR] = "green"
-  appSettings[SETTING_KEY_CLASSIFICATION] = "DEMO USE ONLY"
-  appSettings[SETTING_KEY_RELEASABILITY] = "Releasable to DEMO MISSION"
   const currentUser = {}
   currentUser.name = "unit_test"
   currentUser.uuid = "unit_test_uuid"
 
   return (
     <BrowserRouter>
-      <AppContext.Provider value={{ connection, appSettings, currentUser }}>
+      <AppContext.Provider value={{ connection, currentUser }}>
         <SecurityBanner />
       </AppContext.Provider>
     </BrowserRouter>