fix(control): controls display id instead of label #746
+105
−25
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Controls would display the `id` field a lot except for the like one place where we did properly lookup the label. This adds a new generic way to query for props by name (ignoring value). This retains `id` as a fallback as a bridge way to move to identifying whether that is better or if we should instead just not display anything label-like at all. The latter requires far larger refactoring.
tuckerzp
approved these changes
Mar 27, 2023
kylelaker
commented
Mar 27, 2023
| @@ -24,7 +24,7 @@ function testOSCALProfile(parentElementName, renderer) { | |||
| jest.setTimeout(6000); | |||
| test(`${parentElementName} displays controls`, async () => { | |||
| renderer(); | |||
| const result = await screen.findByText("ac-1", { | |||
| const result = await screen.findByText("AC-1", { | |||
There was a problem hiding this comment.
This changes because we now properly use the label which does specify the value in uppercase.
| @@ -58,7 +74,7 @@ describe("OSCALCatalogGroup", () => { | |||
| fireEvent.click(expand2); | |||
|
|
|||
| const expand3 = screen.getByText( | |||
| "CONTROL-ID Access Control Policy and Procedures" | |||
| getTextByChildren("control-id Access Control Policy and Procedures") | |||
There was a problem hiding this comment.
This is now lowercase because we make the text uppercase in CSS instead of by calling toUppercase.
| @@ -35,6 +35,22 @@ const testGroups = [ | |||
| }, | |||
| ]; | |||
|
|
|||
| function getTextByChildren(text) { | |||
There was a problem hiding this comment.
This is necessary because we're now potentially pulling text across multiple <span>s.
| @@ -488,7 +486,7 @@ export function OSCALReplacedProseWithByComponentParameterValue(props) { | |||
| <Link underline="hover" href={`#${props.label}`}> | |||
| {props.label} | |||
| </Link> | |||
| </StyledTooltip> | |||
| </StyledTooltip>{" "} | |||
There was a problem hiding this comment.
This fixes the issue with the label being "squished" up against the actual text. Same for the changes above where {props.label} and {prose} are now on the same line.
Bronstrom
approved these changes
Mar 27, 2023
| @@ -58,7 +74,7 @@ describe("OSCALCatalogGroup", () => { | |||
| fireEvent.click(expand2); | |||
|
|
|||
| const expand3 = screen.getByText( | |||
| "CONTROL-ID Access Control Policy and Procedures" | |||
| getTextByChildren("control-id Access Control Policy and Procedures") | |||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently, controls are often displayed with their
idin uppercase instead of using thelabelproperty. This means that the display is not necessarily always what a document author may intend (even if it perhaps is close).The label is displayed matching the surrounding content. If the ID is used, it falls back to displaying using the ID (in our standard grey color).
This also fixes an issue where, for prose, the label was squished up against the text without a space.
Screenshots - Test Catalog
Before
After
Screenshots - SP 800-53
Before
After