EasyDynamics / oscal-react-library

A library of React components and an example user interface application that provides a direct UI into NIST's Open Security Controls Assessment Language (OSCAL) data in JSON format.
https://viewer.oscal.io
MIT License
54 stars 14 forks source link

Control Prose not displaying newline characters properly #619

Closed tuckerzp closed 1 year ago

tuckerzp commented 2 years ago

Description

Control prose do not properly display line breaks despite \n being written in prose.

{
  "id": "sr-2.1_asm-examine",
  "name": "assessment-method",
  "props": [
    {
      "name": "method",
      "ns": "http://csrc.nist.gov/ns/rmf",
      "value": "EXAMINE"
    },
    {
      "name": "label",
      "value": "SR-02(01)-Examine",
      "class": "sp800-53a"
    }
  ],
  "parts": [
    {
      "name": "assessment-objects",
      "prose": "Supply chain risk management policy\n\nsupply chain risk management procedures\n\nsupply chain risk management team charter documentation\n\nsupply chain risk management strategy\n\nsupply chain risk management implementation plan\n\nprocedures addressing supply chain protection\n\nsystem security plan\n\nprivacy plan\n\nother relevant documents or records"
    }
  ]
},

Environment

OSCAL Viewer

Steps to Reproduce

Go to https://oscal-viewer.msd.easydynamics.com/profile/?url=https://raw.githubusercontent.com/EasyDynamics/oscal-demo-content/main/profiles/NIST_SP-800-53_rev5_MODERATE-baseline_profile.json and scroll down to SR-2.1 Establish SCRM Team.

Expected behavior

SR-02(01) text is displayed with new lines to separate content.

Actual Behavior

image

Additional Notes

I unfortunately have not been able to look into this bug a ton. But it seems it may be related to "assessment-objects" specifically.

mpemy commented 1 year ago

Why are we using Regex to parse parameter label and description #696

Below are the lines of code that are causing the issue with new line. In fact, we are using the same function "getTextSegment()" to retrieve both labels and parameters description and then using OSCALMarkupLine in getTextSegment() to process the json string. This is why when; I select the proper MarkupLine function I break other parts of the code. I want to know why use Regex to parse the props? before I go ahead and adjust that part to properly parse the label and description separately.

Thanks for you insights.

export function OSCALReplacedProseWithParameterLabel(props) { if (!props.prose) { return null; }

const prose = props.parameters ? props.prose .split(RegExp(prosePlaceholderRegexpString, "g")) .map((segment, index) => { if (index % 2 === 0) { return getTextSegment(segment, index); } return getParameterLabelSegment( props.parameters, segment, props.modificationSetParameters, index ); }) : getTextSegment(props.prose, 0);