From 51da849362be9c8ff6dfee0303ead0393d2304d6 Mon Sep 17 00:00:00 2001 From: Kyle Laker Date: Mon, 10 Apr 2023 09:38:30 -0400 Subject: [PATCH] chore(lint): allow lines up to 100 characters (#766) This is a pretty trivial linter change but with the addition of TypeScript, lines for function definitions and elsewhere are going to get a bit longer. This gives us some more room on each line before they get split unnecessarily early. The true changes here are: - updating `.prettierrc` for the new line length - updating `packages/oscal-viewer/package.json` to properly reference the config file The remaining changes are just the result of `npm run lint:fix`. After this is merged and we have the commit hash, I will update `.git-blame-ignore-revs`[^1] with that to clean up `git-blame(1)` output in the future. [^1]: While https://github.blog/changelog/2022-03-24-ignore-commits-in-the-blame-view-beta/ isn't the formal documentation for this feature, it covers the intent of the file. The same file is supported by the `git` tool locally. --- .prettierrc | 4 +- packages/oscal-react-library/jest.config.ts | 3 +- .../src/components/OSCALBackMatter.js | 22 +-- .../src/components/OSCALBackMatter.test.js | 15 +- .../src/components/OSCALCatalog.js | 14 +- .../src/components/OSCALCatalogGroup.js | 38 +--- .../src/components/OSCALCatalogGroups.js | 10 +- .../src/components/OSCALCatalogGroups.test.js | 8 +- .../components/OSCALComponentDefinition.js | 49 +++-- .../OSCALComponentDefinition.test.js | 15 +- .../OSCALComponentDefinitionComponent.js | 8 +- ...omponentDefinitionControlImplementation.js | 30 ++-- ...entDefinitionControlImplementation.test.js | 12 +- .../src/components/OSCALControl.js | 40 +---- .../src/components/OSCALControlGuidance.js | 12 +- .../components/OSCALControlGuidance.test.js | 4 +- .../components/OSCALControlImplementation.js | 3 +- .../OSCALControlImplementationAdd.js | 13 +- .../OSCALControlImplementationAdd.test.js | 5 +- .../OSCALControlImplementationImplReq.js | 10 +- .../OSCALControlImplementationImplReq.test.js | 18 +- .../components/OSCALControlModification.js | 40 +---- .../src/components/OSCALControlPart.js | 7 +- .../src/components/OSCALControlProse.js | 102 ++++------- .../src/components/OSCALControlProse.test.js | 36 +--- .../src/components/OSCALDiagram.js | 6 +- .../src/components/OSCALDiagram.test.js | 12 +- .../src/components/OSCALDrawerSelector.js | 29 +-- .../OSCALEditableFieldActions.test.js | 9 +- .../src/components/OSCALEditableTextField.js | 11 +- .../components/OSCALEditableTextField.test.js | 29 +-- .../src/components/OSCALJsonEditor.js | 7 +- .../src/components/OSCALJsonEditor.test.js | 18 +- .../src/components/OSCALLoader.js | 29 +-- .../src/components/OSCALMarkupProse.js | 7 +- .../src/components/OSCALMarkupProse.test.js | 22 +-- .../src/components/OSCALMetadata.js | 125 +++---------- .../src/components/OSCALMetadata.test.js | 12 +- .../src/components/OSCALProfile.js | 23 +-- .../src/components/OSCALProfile.test.js | 7 +- .../OSCALProfileCatalogInheritance.js | 8 +- .../src/components/OSCALResponsibleRoles.js | 4 +- .../components/OSCALResponsibleRoles.test.js | 9 +- .../src/components/OSCALSsp.js | 12 +- .../src/components/OSCALSsp.test.js | 7 +- .../components/OSCALSystemCharacteristics.js | 167 ++++++++---------- .../OSCALSystemCharacteristics.test.js | 10 +- .../components/OSCALSystemImplementation.js | 4 +- ...SCALSystemImplementationComponents.test.js | 28 +-- ...OSCALSystemImplementationInventoryItems.js | 16 +- ...SystemImplementationInventoryItems.test.js | 13 +- .../OSCALSystemImplementationUsers.js | 12 +- .../OSCALSystemImplementationUsers.test.js | 4 +- .../oscal-utils/OSCALBackMatterUtils.js | 9 +- .../oscal-utils/OSCALBackMatterUtils.test.js | 10 +- .../oscal-utils/OSCALControlResolver.js | 6 +- .../components/oscal-utils/OSCALLinkUtils.js | 13 +- .../oscal-utils/OSCALLinkUtils.test.js | 28 +-- .../oscal-utils/OSCALProfileResolver.js | 8 +- .../oscal-utils/OSCALProfileUtils.js | 6 +- .../components/oscal-utils/OSCALRestUtils.js | 21 +-- .../oscal-utils/OSCALSspResolver.js | 7 +- .../src/components/oscal-utils/TestUtils.js | 7 +- .../stories/OSCALEditableTextField.stories.js | 5 +- .../src/stories/OSCALMetadata.stories.js | 5 +- .../stories/OSCALResponsibleRoles.stories.js | 5 +- .../OSCALSystemImplementation.stories.js | 5 +- ...temImplementationInventoryItems.stories.js | 5 +- .../src/test-data/ComponentsData.js | 9 +- .../src/test-data/ControlsData.js | 3 +- .../src/test-data/SystemData.js | 8 +- .../oscal-react-library/src/test-data/Urls.js | 6 +- packages/oscal-viewer/package.json | 2 +- packages/oscal-viewer/src/App.js | 71 ++------ 74 files changed, 366 insertions(+), 1031 deletions(-) diff --git a/.prettierrc b/.prettierrc index 61b6c6370..176d0e08e 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { - "printWidth": 80, + "printWidth": 100, "singleQuote": false, "trailingComma": "es5", "tabWidth": 2, "semi": true -} \ No newline at end of file +} diff --git a/packages/oscal-react-library/jest.config.ts b/packages/oscal-react-library/jest.config.ts index ba2ba8803..50c36dbea 100644 --- a/packages/oscal-react-library/jest.config.ts +++ b/packages/oscal-react-library/jest.config.ts @@ -7,8 +7,7 @@ const config: Config = { "^.+\\.[tj]sx?$": "ts-jest", // For non-code files, use the file transform. This will just return the name of the // file, matching the behavior for these files in `react-scripts`. - "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": - "/tests/fileTransform.js", + "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "/tests/fileTransform.js", }, testMatch: ["**/*.test.(ts|tsx|js|jsx)"], testEnvironment: "jsdom", diff --git a/packages/oscal-react-library/src/components/OSCALBackMatter.js b/packages/oscal-react-library/src/components/OSCALBackMatter.js index 0ec772b86..f37a29cd1 100644 --- a/packages/oscal-react-library/src/components/OSCALBackMatter.js +++ b/packages/oscal-react-library/src/components/OSCALBackMatter.js @@ -9,10 +9,7 @@ import FormatQuoteIcon from "@mui/icons-material/FormatQuote"; import DescriptionIcon from "@mui/icons-material/Description"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import StyledTooltip from "./OSCALStyledTooltip"; -import { - getAbsoluteUrl, - guessExtensionFromHref, -} from "./oscal-utils/OSCALLinkUtils"; +import { getAbsoluteUrl, guessExtensionFromHref } from "./oscal-utils/OSCALLinkUtils"; import { OSCALSection, OSCALSectionHeader } from "../styles/CommonPageStyles"; import { OSCALMarkupLine, OSCALMarkupMultiLine } from "./OSCALMarkupProse"; import OSCALAnchorLinkHeader from "./OSCALAnchorLinkHeader"; @@ -49,11 +46,7 @@ function DescriptionDisplay(props) { } return ( - {props.resource.description} - - } + title={{props.resource.description}} > {props.resource.citation.text}} - > + {props.resource.citation.text}}> - rlink["media-type"] || - guessExtensionFromHref(getAbsoluteUrl(rlink.href, props.parentUrl)); + rlink["media-type"] || guessExtensionFromHref(getAbsoluteUrl(rlink.href, props.parentUrl)); const backMatterDisplay = (resource) => ( @@ -149,9 +139,7 @@ export default function OSCALBackMatter(props) { - {props.backMatter.resources.map((resource) => - backMatterDisplay(resource) - )} + {props.backMatter.resources.map((resource) => backMatterDisplay(resource))} diff --git a/packages/oscal-react-library/src/components/OSCALBackMatter.test.js b/packages/oscal-react-library/src/components/OSCALBackMatter.test.js index 3da267d15..5b5c5ef8f 100644 --- a/packages/oscal-react-library/src/components/OSCALBackMatter.test.js +++ b/packages/oscal-react-library/src/components/OSCALBackMatter.test.js @@ -10,12 +10,7 @@ import { } from "../test-data/BackMatterData"; function backMatterRenderer() { - render( - - ); + render(); } export default function testOSCALBackMatter(parentElementName, renderer) { @@ -27,13 +22,9 @@ export default function testOSCALBackMatter(parentElementName, renderer) { test(`${parentElementName} displays resource description`, async () => { renderer(); - const descriptionDisplay = screen.getByTitle( - "Resource Test Title-description" - ); + const descriptionDisplay = screen.getByTitle("Resource Test Title-description"); await userEvent.hover(descriptionDisplay); - expect( - await screen.findByText("This is a test description for resource") - ).toBeInTheDocument(); + expect(await screen.findByText("This is a test description for resource")).toBeInTheDocument(); }); test(`${parentElementName} displays media-type`, async () => { diff --git a/packages/oscal-react-library/src/components/OSCALCatalog.js b/packages/oscal-react-library/src/components/OSCALCatalog.js index a6f403a6e..56f355ccb 100644 --- a/packages/oscal-react-library/src/components/OSCALCatalog.js +++ b/packages/oscal-react-library/src/components/OSCALCatalog.js @@ -5,14 +5,7 @@ import { OSCALDocumentRoot } from "./OSCALLoaderStyles"; import OSCALMetadata from "./OSCALMetadata"; export default function OSCALCatalog(props) { - const { - onResolutionComplete, - catalog, - isEditable, - onFieldSave, - urlFragment, - parentUrl, - } = props; + const { onResolutionComplete, catalog, isEditable, onFieldSave, urlFragment, parentUrl } = props; useEffect(onResolutionComplete); @@ -34,10 +27,7 @@ export default function OSCALCatalog(props) { - + ); } diff --git a/packages/oscal-react-library/src/components/OSCALCatalogGroup.js b/packages/oscal-react-library/src/components/OSCALCatalogGroup.js index 823022046..8e647d876 100644 --- a/packages/oscal-react-library/src/components/OSCALCatalogGroup.js +++ b/packages/oscal-react-library/src/components/OSCALCatalogGroup.js @@ -75,13 +75,7 @@ function CollapsibleListItem(props) { const elementWithFragment = document.getElementById(control.id); elementWithFragment?.scrollIntoView?.({ behavior: "smooth" }); } - }, [ - urlFragment, - fragmentSuffix, - listItemOpened, - isSetListItemNavigatedTo, - control?.id, - ]); + }, [urlFragment, fragmentSuffix, listItemOpened, isSetListItemNavigatedTo, control?.id]); return ( @@ -89,15 +83,8 @@ function CollapsibleListItem(props) { {isOpen ? : } - setListItemOpened(true)} - unmountOnExit - > - - {children} - + setListItemOpened(true)} unmountOnExit> + {children} ); @@ -112,14 +99,11 @@ function OSCALCatalogControlListItem(props) { isControlListItemOpened, setIsControlListItemOpened, } = props; - const [isListItemNavigatedTo, isSetListItemNavigatedTo] = - React.useState(false); + const [isListItemNavigatedTo, isSetListItemNavigatedTo] = React.useState(false); const withdrawn = isWithdrawn(control); const itemText = ( - + - group?.id === rootLayer || conformLinkIdText(group?.title) === rootLayer + (group) => group?.id === rootLayer || conformLinkIdText(group?.title) === rootLayer ); if (!upperLayer) { return null; } // Ensure lowest/deepest control exists for (let i = 1; i < controlLayers.length && upperLayer; i += 1) { - upperLayer = upperLayer?.controls?.find( - (control) => control.id === controlLayers[i] - ); + upperLayer = upperLayer?.controls?.find((control) => control.id === controlLayers[i]); } return upperLayer; } @@ -94,8 +91,7 @@ function determineControlExists(groups, controlLayers, rootLayer) { export default function OSCALCatalogGroups(props) { const { groups, urlFragment } = props; const [openTab, setOpenTab] = React.useState(groups[0]?.id); - const [isControlListItemOpened, setIsControlListItemOpened] = - React.useState(false); + const [isControlListItemOpened, setIsControlListItemOpened] = React.useState(false); const handleChange = (event, newValue) => { setOpenTab(newValue); diff --git a/packages/oscal-react-library/src/components/OSCALCatalogGroups.test.js b/packages/oscal-react-library/src/components/OSCALCatalogGroups.test.js index 9e168beac..86f6dbc67 100644 --- a/packages/oscal-react-library/src/components/OSCALCatalogGroups.test.js +++ b/packages/oscal-react-library/src/components/OSCALCatalogGroups.test.js @@ -42,9 +42,7 @@ function getTextByChildren(text) { // This is necessary because we are providing a query function to override how // text search is performed. // eslint-disable-next-line testing-library/no-node-access - const childrenDontHaveText = Array.from(node.children).every( - (child) => !hasText(child) - ); + const childrenDontHaveText = Array.from(node.children).every((child) => !hasText(child)); return nodeHasText && childrenDontHaveText; } @@ -84,9 +82,7 @@ describe("OSCALCatalogGroup", () => { const expand1 = screen.getByText("Sibling Title"); fireEvent.click(expand1); - const expand2 = screen.getByText( - getTextByChildren("control2-id Audit Events") - ); + const expand2 = screen.getByText(getTextByChildren("control2-id Audit Events")); fireEvent.click(expand2); }); }); diff --git a/packages/oscal-react-library/src/components/OSCALComponentDefinition.js b/packages/oscal-react-library/src/components/OSCALComponentDefinition.js index 956d7003a..1fbd49cbf 100644 --- a/packages/oscal-react-library/src/components/OSCALComponentDefinition.js +++ b/packages/oscal-react-library/src/components/OSCALComponentDefinition.js @@ -10,8 +10,7 @@ import { OSCALDocumentRoot } from "./OSCALLoaderStyles"; export default function OSCALComponentDefinition(props) { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); - const [inheritedProfilesAndCatalogs, setInheritedProfilesAndCatalogs] = - useState({}); + const [inheritedProfilesAndCatalogs, setInheritedProfilesAndCatalogs] = useState({}); const partialRestData = { "component-definition": { @@ -45,20 +44,18 @@ export default function OSCALComponentDefinition(props) { if (!isLoaded) { controlImpl = null; } else { - controlImpl = Object.entries(props.componentDefinition.components).map( - ([key, component]) => ( - - ) - ); + controlImpl = Object.entries(props.componentDefinition.components).map(([key, component]) => ( + + )); } return ( @@ -70,18 +67,14 @@ export default function OSCALComponentDefinition(props) { partialRestData={partialRestData} urlFragment={props.urlFragment} /> - - {Object.entries(props.componentDefinition.components).map( - ([key, component]) => ( - - ) - )} + + {Object.entries(props.componentDefinition.components).map(([key, component]) => ( + + ))} {controlImpl} { }); function componentDefinitionRenderer() { - render( - - ); + render(); } function testOSCALComponentDefinitionComponent(parentElementName, renderer) { @@ -27,13 +23,8 @@ function testOSCALComponentDefinitionComponent(parentElementName, renderer) { test(`${parentElementName} shows component description`, async () => { renderer(); await userEvent.hover(screen.getByText("Example Component")); - expect( - await screen.findByText("An example component.") - ).toBeInTheDocument(); + expect(await screen.findByText("An example component.")).toBeInTheDocument(); }); } -testOSCALComponentDefinitionComponent( - "OSCALComponentDefinition", - componentDefinitionRenderer -); +testOSCALComponentDefinitionComponent("OSCALComponentDefinition", componentDefinitionRenderer); diff --git a/packages/oscal-react-library/src/components/OSCALComponentDefinitionComponent.js b/packages/oscal-react-library/src/components/OSCALComponentDefinitionComponent.js index b9c9e5b00..3fff76421 100644 --- a/packages/oscal-react-library/src/components/OSCALComponentDefinitionComponent.js +++ b/packages/oscal-react-library/src/components/OSCALComponentDefinitionComponent.js @@ -39,17 +39,13 @@ export default function OSCALComponentDefinitionComponent(props) { - - {props.component.title} - + {props.component.title} {props.component.type} diff --git a/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.js b/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.js index b6971271c..1b788fc64 100644 --- a/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.js +++ b/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.js @@ -30,22 +30,20 @@ export default function OSCALComponentDefinitionControlImplementation(props) { {controlImpl.description} - {controlImpl["implemented-requirements"].map( - (implementedRequirement) => ( - - ) - )} + {controlImpl["implemented-requirements"].map((implementedRequirement) => ( + + ))} diff --git a/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.test.js b/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.test.js index d8fb36e55..cdc95e472 100644 --- a/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.test.js +++ b/packages/oscal-react-library/src/components/OSCALComponentDefinitionControlImplementation.test.js @@ -16,9 +16,7 @@ test("OSCALComponentDefinitionControlImplementation displays component implement controls={controlsData} /> ); - const result = screen.getByText( - "This is an example description for control implementation-1" - ); + const result = screen.getByText("This is an example description for control implementation-1"); expect(result).toBeVisible(); }); @@ -43,13 +41,9 @@ test("OSCALComponentDefinitionControlImplementation displays component parameter /> ); const nonplaceholder1 = getByTextIncludingChildren(/Does something with/i); - const placeholderText1 = getByTextIncludingChildren( - /< control 1 \/ parameter 1 label >/i - ); + const placeholderText1 = getByTextIncludingChildren(/< control 1 \/ parameter 1 label >/i); const nonplaceholder2 = getByTextIncludingChildren(/and/i); - const placeholderText2 = getByTextIncludingChildren( - /< control 1 \/ parameter 2 label >/i - ); + const placeholderText2 = getByTextIncludingChildren(/< control 1 \/ parameter 2 label >/i); expect(nonplaceholder1).toBeVisible(); expect(placeholderText1).toBeVisible(); diff --git a/packages/oscal-react-library/src/components/OSCALControl.js b/packages/oscal-react-library/src/components/OSCALControl.js index 9e739a415..4da4c46bb 100644 --- a/packages/oscal-react-library/src/components/OSCALControl.js +++ b/packages/oscal-react-library/src/components/OSCALControl.js @@ -15,9 +15,7 @@ import { appendToFragmentPrefix } from "./oscal-utils/OSCALLinkUtils"; const OSCALControlCard = styled(Card, { // https://github.com/mui/material-ui/blob/c34935814b81870ca325099cdf41a1025a85d4b5/packages/mui-system/src/createStyled.js#L56 shouldForwardProp: (prop) => - !["childLevel", "withdrawn", "ownerState", "theme", "sx", "as"].includes( - prop - ), + !["childLevel", "withdrawn", "ownerState", "theme", "sx", "as"].includes(prop), })` margin-top: 1em; margin-bottom: 1em; @@ -25,8 +23,7 @@ const OSCALControlCard = styled(Card, { margin-right: ${(props) => (props.childLevel > 0 ? "1.5em" : "0")}; ${(props) => props.childLevel > 0 && "background-color: #fffcf0;"} ${(props) => - props.withdrawn && - `text-decoration: line-through; color: ${props.theme.palette.grey[400]};`} + props.withdrawn && `text-decoration: line-through; color: ${props.theme.palette.grey[400]};`} `; function ControlsList(props) { @@ -114,26 +111,17 @@ export default function OSCALControl(props) { elementWithFragment?.scrollIntoView?.({ behavior: "smooth" }); }, [listItemOpened, isItemNavigatedTo, urlFragment]); - if ( - !includeAll && - (!control || (includeControlIds && !includeControlIds.includes(control.id))) - ) { + if (!includeAll && (!control || (includeControlIds && !includeControlIds.includes(control.id)))) { return null; } - if ( - !control || - (excludeControlIds && excludeControlIds.includes(control.id)) - ) { + if (!control || (excludeControlIds && excludeControlIds.includes(control.id))) { return null; } let modificationDisplay; if (modificationAlters) { modificationDisplay = ( - + ); } @@ -142,30 +130,20 @@ export default function OSCALControl(props) { return showInList ? ( ) : ( - + - {" "} - {control.title} {modificationDisplay} + {control.title}{" "} + {modificationDisplay} diff --git a/packages/oscal-react-library/src/components/OSCALControlGuidance.js b/packages/oscal-react-library/src/components/OSCALControlGuidance.js index c71cabaae..ac7adc0be 100644 --- a/packages/oscal-react-library/src/components/OSCALControlGuidance.js +++ b/packages/oscal-react-library/src/components/OSCALControlGuidance.js @@ -39,11 +39,7 @@ export default function OSCALControlGuidance(props) { return ( <> - + Read Discussion - + {` ${props.title} Discussion`} diff --git a/packages/oscal-react-library/src/components/OSCALControlGuidance.test.js b/packages/oscal-react-library/src/components/OSCALControlGuidance.test.js index a3c8dba17..60d853f0d 100644 --- a/packages/oscal-react-library/src/components/OSCALControlGuidance.test.js +++ b/packages/oscal-react-library/src/components/OSCALControlGuidance.test.js @@ -8,9 +8,7 @@ describe("OSCALControlGuidance", () => { const prose = "Access control policy"; const id = "AC-1"; const title = "Sample Title"; - render( - - ); + render(); await userEvent.click(screen.getByRole("button")); const result = screen.getByText("Access control policy"); expect(result).toBeVisible(); diff --git a/packages/oscal-react-library/src/components/OSCALControlImplementation.js b/packages/oscal-react-library/src/components/OSCALControlImplementation.js index 8675c27d5..a73390986 100644 --- a/packages/oscal-react-library/src/components/OSCALControlImplementation.js +++ b/packages/oscal-react-library/src/components/OSCALControlImplementation.js @@ -18,8 +18,7 @@ import OSCALAnchorLinkHeader from "./OSCALAnchorLinkHeader"; * @returns The corresponding Control Implementation */ export default function OSCALControlImplementation(props) { - const implementedRequirements = - props.controlImplementation["implemented-requirements"]; + const implementedRequirements = props.controlImplementation["implemented-requirements"]; const controlIds = implementedRequirements.map( (implementedControl) => implementedControl["control-id"] ); diff --git a/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.js b/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.js index e6889657c..2674432df 100644 --- a/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.js +++ b/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.js @@ -23,14 +23,9 @@ export default function OSCALControlImplementationAdd(props) { const [inEditState, setInEditState] = useState(false); const [newControl, setNewControl] = useState(""); - const rootOscalObjectName = props.restData - ? Object.keys(props.restData)[0] - : null; + const rootOscalObjectName = props.restData ? Object.keys(props.restData)[0] : null; const editedFieldContents = [rootOscalObjectName, "control-implementation"]; - const controlIdsAndTitles = getControlIdsAndTitles( - props.controls, - props.implementedControls - ); + const controlIdsAndTitles = getControlIdsAndTitles(props.controls, props.implementedControls); return inEditState ? ( @@ -46,9 +41,7 @@ export default function OSCALControlImplementationAdd(props) { setNewControl(event.target.textContent); }} options={Object.keys(controlIdsAndTitles)} - renderInput={(params) => ( - - )} + renderInput={(params) => } /> diff --git a/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.test.js b/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.test.js index 7c0b4f3a3..f5edd0b40 100644 --- a/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.test.js +++ b/packages/oscal-react-library/src/components/OSCALControlImplementationAdd.test.js @@ -20,10 +20,7 @@ function OSCALControlImplementationAddRenderer() { ); } -export default function testOSCALControlImplementationAdd( - parentElementName, - renderer -) { +export default function testOSCALControlImplementationAdd(parentElementName, renderer) { test(`${parentElementName} displays the add button`, () => { renderer(); diff --git a/packages/oscal-react-library/src/components/OSCALControlImplementationImplReq.js b/packages/oscal-react-library/src/components/OSCALControlImplementationImplReq.js index 17955d637..2abe938af 100644 --- a/packages/oscal-react-library/src/components/OSCALControlImplementationImplReq.js +++ b/packages/oscal-react-library/src/components/OSCALControlImplementationImplReq.js @@ -12,9 +12,7 @@ import getControlOrSubControl from "./oscal-utils/OSCALControlResolver"; const OSCALImplReqCard = styled(Card, { // https://github.com/mui/material-ui/blob/c34935814b81870ca325099cdf41a1025a85d4b5/packages/mui-system/src/createStyled.js#L56 shouldForwardProp: (prop) => - !["childLevel", "withdrawn", "ownerState", "theme", "sx", "as"].includes( - prop - ), + !["childLevel", "withdrawn", "ownerState", "theme", "sx", "as"].includes(prop), })` margin-top: 1em; margin-bottom: 1em; @@ -130,11 +128,7 @@ export default function OSCALControlImplementationImplReq(props) { ))} {Object.values(props.components).map((component, index) => ( - + { renderer(); const result = screen.getByText("control-1"); @@ -63,9 +57,7 @@ export default function testOSCALControlImplementationImplReq( }) ); expect( - await screen.findByText( - "Component 1 description of implementing control 1" - ) + await screen.findByText("Component 1 description of implementing control 1") ).toBeInTheDocument(); }); @@ -84,9 +76,7 @@ export default function testOSCALControlImplementationImplReq( timeout: 10000, }) ).toBeInTheDocument(); - await expect(() => screen.findByRole("button")).rejects.toThrow( - 'Unable to find role="button"' - ); + await expect(() => screen.findByRole("button")).rejects.toThrow('Unable to find role="button"'); }); } diff --git a/packages/oscal-react-library/src/components/OSCALControlModification.js b/packages/oscal-react-library/src/components/OSCALControlModification.js index 428f32c63..ca74c2ec0 100644 --- a/packages/oscal-react-library/src/components/OSCALControlModification.js +++ b/packages/oscal-react-library/src/components/OSCALControlModification.js @@ -23,11 +23,7 @@ const OSCALControlModificationsButton = styled(IconButton)( * @param {String} controlPartId Control part ID to match * @returns html object */ -function getAlterAddsOrRemovesDisplay( - addsRemovesElements, - addsRemovesLabel, - controlPartId -) { +function getAlterAddsOrRemovesDisplay(addsRemovesElements, addsRemovesLabel, controlPartId) { if (!addsRemovesElements?.length) { return null; } @@ -37,12 +33,7 @@ function getAlterAddsOrRemovesDisplay( const typographies = addsRemovesElements .flatMap((element) => element.props ?? []) .map((item) => ( - + Name: {item.name}, Value: {item.value} )); @@ -51,21 +42,14 @@ function getAlterAddsOrRemovesDisplay( removedTypographies = addsRemovesElements .flatMap((element) => element ?? []) .map((item) => ( - - Attribute: {Object.keys.length > 0 ? Object.keys(item)[0] : ""}, - Value: {Object.values.length > 0 ? Object.values(item)[0] : ""} + + Attribute: {Object.keys.length > 0 ? Object.keys(item)[0] : ""}, Value:{" "} + {Object.values.length > 0 ? Object.values(item)[0] : ""} )); } - const labelTypograhy = ( - {addsRemovesLabel} - ); + const labelTypograhy = {addsRemovesLabel}; return ( @@ -115,10 +99,7 @@ function getModifications(controlPartId, controlId, modList, modText) { ); // return display & mod length - return [ - getAlterAddsOrRemovesDisplay(controlParts, modText, controlPartId), - controlParts.length, - ]; + return [getAlterAddsOrRemovesDisplay(controlParts, modText, controlPartId), controlParts.length]; } export default function OSCALControlModification(props) { @@ -149,12 +130,7 @@ export default function OSCALControlModification(props) { // Get all add modifications if (alter.adds) { - [addsDisplay, len] = getModifications( - controlPartId, - props.controlId, - alter.adds, - "Adds " - ); + [addsDisplay, len] = getModifications(controlPartId, props.controlId, alter.adds, "Adds "); modLength += len; } // Get all remove modifications diff --git a/packages/oscal-react-library/src/components/OSCALControlPart.js b/packages/oscal-react-library/src/components/OSCALControlPart.js index 03fb5098a..87844169a 100644 --- a/packages/oscal-react-library/src/components/OSCALControlPart.js +++ b/packages/oscal-react-library/src/components/OSCALControlPart.js @@ -9,8 +9,7 @@ import { import { propWithName } from "./oscal-utils/OSCALPropUtils"; const OSCALControlPartWrapper = styled("div", { - shouldForwardProp: (prop) => - !["partName", "ownerState", "theme", "sx", "as"].includes(prop), + shouldForwardProp: (prop) => !["partName", "ownerState", "theme", "sx", "as"].includes(prop), })` padding-left: ${(props) => (props.partName !== "statement" ? "2em" : "0")}; `; @@ -18,9 +17,7 @@ const OSCALControlPartWrapper = styled("div", { export default function OSCALControlPart(props) { // Don't display assessment if we're displaying a control implementation if ( - (props.implementedRequirement || - props.modificationSetParameters || - props.modificationAlters) && + (props.implementedRequirement || props.modificationSetParameters || props.modificationAlters) && (props.part.name === "objective" || props.part.name === "assessment") ) { return null; diff --git a/packages/oscal-react-library/src/components/OSCALControlProse.js b/packages/oscal-react-library/src/components/OSCALControlProse.js index 0c7d42858..896f2bf6c 100644 --- a/packages/oscal-react-library/src/components/OSCALControlProse.js +++ b/packages/oscal-react-library/src/components/OSCALControlProse.js @@ -72,9 +72,7 @@ const styledParamValue = (keyValue, parameterValue) => ( * @returns the parameter label */ function getParameterLabelText(parameters, parameterId) { - const parameter = parameters.find( - (testParameter) => testParameter.id === parameterId - ); + const parameter = parameters.find((testParameter) => testParameter.id === parameterId); if (!parameter) { return `< ${parameterId} >`; @@ -95,17 +93,12 @@ function getParameterLabelText(parameters, parameterId) { * @param {String} parameterId * @returns the parameter label */ -function getParameterValue( - statementByComponent, - implReqSetParameters, - parameterId -) { +function getParameterValue(statementByComponent, implReqSetParameters, parameterId) { function parameterHasGivenId(parameterSetting) { return parameterSetting["param-id"] === parameterId; } // Locate set-parameters when found in the by-component - const setParameters = - statementByComponent?.["set-parameters"] || implReqSetParameters; + const setParameters = statementByComponent?.["set-parameters"] || implReqSetParameters; const foundParameterSetting = setParameters?.find(parameterHasGivenId); // Error checking: Exit function when parameter setting or it's values are not found @@ -155,9 +148,9 @@ function getImplReqSetParameters(implReqStatements, componentId) { return ( implReqStatements ?.find((statement) => statement["statement-id"].endsWith("_smt")) - ?.["by-components"]?.find( - (byComp) => byComp["component-uuid"] === componentId - )?.["set-parameters"] || null + ?.["by-components"]?.find((byComp) => byComp["component-uuid"] === componentId)?.[ + "set-parameters" + ] || null ); } @@ -205,12 +198,7 @@ function SegmentTooltipWrapper(props) { * @param {String} key * @returns the parameter label segment component */ -function getParameterLabelSegment( - parameters, - parameterId, - modificationSetParameters, - key -) { +function getParameterLabelSegment(parameters, parameterId, modificationSetParameters, key) { let paramSegment; // First check for set-parameters in the profile/catalog let parameterValueText; @@ -225,10 +213,7 @@ function getParameterLabelSegment( } } if (parameterValueText) { - paramSegment = styledParamValue( - `param-value-key-${key}`, - parameterValueText - ); + paramSegment = styledParamValue(`param-value-key-${key}`, parameterValueText); } else { const parameterLabelText = getParameterLabelText( parameters, @@ -241,10 +226,7 @@ function getParameterLabelSegment( ); } - const constraintsDisplay = getConstraintsDisplay( - modificationSetParameters, - parameterId - ); + const constraintsDisplay = getConstraintsDisplay(modificationSetParameters, parameterId); if (!constraintsDisplay) { return paramSegment; @@ -277,15 +259,8 @@ function getParameterValueSegment( key, parameters ) { - const parameterValue = getParameterValue( - statementByComponent, - implReqSetParameters, - parameterId - ); - const constraintsDisplay = getConstraintsDisplay( - modificationSetParameters, - parameterId - ); + const parameterValue = getParameterValue(statementByComponent, implReqSetParameters, parameterId); + const constraintsDisplay = getConstraintsDisplay(modificationSetParameters, parameterId); const parameterLabelText = getParameterLabelText( parameters, @@ -329,19 +304,17 @@ export function OSCALReplacedProseWithParameterLabel(props) { 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 - ); - }) + ? 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); if (!props.isImplemented) { @@ -379,13 +352,7 @@ export function OSCALReplacedProseWithParameterLabel(props) { ?.find((item) => item["control-id"] === controlId) ?.removes?.find((object) => object["by-item-name"] === controlPartId); - if ( - removeByIds || - removeByNames || - removeByNS || - removeByClass || - removeByItemNames - ) { + if (removeByIds || removeByNames || removeByNS || removeByClass || removeByItemNames) { return ( {props.label} {prose} @@ -430,17 +397,11 @@ export function OSCALReplacedProseWithByComponentParameterValue(props) { // render." This should be investigated further. // https://github.com/EasyDynamics/oscal-react-library/issues/499 /* eslint-disable react-hooks/rules-of-hooks */ - const statementByComponentDescription = - statementByComponent?.description || null; - const statementByComponentDescriptionMarkup = - statementByComponentDescription ? ( - - {statementByComponentDescription} - - ) : null; - const statementByComponentDescriptionRef = useRef( - statementByComponentDescription - ); + const statementByComponentDescription = statementByComponent?.description || null; + const statementByComponentDescriptionMarkup = statementByComponentDescription ? ( + {statementByComponentDescription} + ) : null; + const statementByComponentDescriptionRef = useRef(statementByComponentDescription); const setParametersRefs = {}; if (props.parameters?.length > 0) { props.parameters.forEach((parameter) => { @@ -526,9 +487,7 @@ export function OSCALReplacedProseWithByComponentParameterValue(props) { return ( - + {props.label} @@ -578,8 +537,7 @@ export function OSCALReplacedProseWithByComponentParameterValue(props) { props.componentId, statementByComponentDescriptionRef.current.value, Object.keys(setParametersRefs).map((setParameterId) => { - const setParameterValue = - setParametersRefs[setParameterId]?.current?.value; + const setParameterValue = setParametersRefs[setParameterId]?.current?.value; return setParameterValue ? { "param-id": setParameterId, diff --git a/packages/oscal-react-library/src/components/OSCALControlProse.test.js b/packages/oscal-react-library/src/components/OSCALControlProse.test.js index 94236c2ce..34ad3c4fd 100644 --- a/packages/oscal-react-library/src/components/OSCALControlProse.test.js +++ b/packages/oscal-react-library/src/components/OSCALControlProse.test.js @@ -24,9 +24,7 @@ const labelTestDataDecimal = "label-1.1"; function proseParamLabelsRenderer() { render( { @@ -106,9 +98,7 @@ function testOSCALControlProseEditing(parentElementName, renderer) { expect(descriptionTextField.value).toBe("Test Description"); screen.getByLabelText("control-1_prm_1"); - expect(paramValueTextField.value).toBe( - "control 1 / component 1 / parameter 1 value" - ); + expect(paramValueTextField.value).toBe("control 1 / component 1 / parameter 1 value"); }); test(`${parentElementName} saves changes to controller name and description values`, async () => { @@ -149,9 +139,7 @@ function proseDecimalParamValuesEditingRenderer() { label={labelTestDataDecimal} prose={controlProseDecimalTestData} parameters={exampleDecimalParams} - implementedRequirement={ - controlImplWithDecSmtTestData["implemented-requirements"][0] - } + implementedRequirement={controlImplWithDecSmtTestData["implemented-requirements"][0]} statementId="control-1.1_smt.a" componentId="component-1.1" modificationSetParameters={exampleModificationSetParametersDecimal} @@ -172,13 +160,9 @@ function testOSCALControlDecimalProseEditing(parentElementName, renderer) { const descriptionTextField = screen.getByLabelText("Description"); const paramValueTextField = screen.getByLabelText("control-1.1_prm_1"); - expect(descriptionTextField.value).toBe( - "Component 1.1 description of implementing control 1" - ); + expect(descriptionTextField.value).toBe("Component 1.1 description of implementing control 1"); - expect(paramValueTextField.value).toBe( - "control 1.1 / component 1.1 / parameter 1 value" - ); + expect(paramValueTextField.value).toBe("control 1.1 / component 1.1 / parameter 1 value"); }); test(`${parentElementName} handles edit with just description edit and keeps placeholders`, async () => { @@ -202,9 +186,7 @@ function testOSCALControlDecimalProseEditing(parentElementName, renderer) { expect(descriptionTextField.value).toBe("Test Description"); screen.getByLabelText("control-1.1_prm_1"); - expect(paramValueTextField.value).toBe( - "control 1.1 / component 1.1 / parameter 1 value" - ); + expect(paramValueTextField.value).toBe("control 1.1 / component 1.1 / parameter 1 value"); }); test(`${parentElementName} saves changes to controller name and description values`, async () => { diff --git a/packages/oscal-react-library/src/components/OSCALDiagram.js b/packages/oscal-react-library/src/components/OSCALDiagram.js index 80e7440a9..c0f95fc67 100644 --- a/packages/oscal-react-library/src/components/OSCALDiagram.js +++ b/packages/oscal-react-library/src/components/OSCALDiagram.js @@ -25,11 +25,7 @@ export default function OSCALDiagram(props) { return ( <> - {props.diagram.caption} + {props.diagram.caption} {props.diagram.caption} diff --git a/packages/oscal-react-library/src/components/OSCALDiagram.test.js b/packages/oscal-react-library/src/components/OSCALDiagram.test.js index f2e814134..9a15c3a4c 100644 --- a/packages/oscal-react-library/src/components/OSCALDiagram.test.js +++ b/packages/oscal-react-library/src/components/OSCALDiagram.test.js @@ -2,10 +2,7 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import OSCALDiagram from "./OSCALDiagram"; import { backMatterTestData } from "../test-data/BackMatterData"; -import { - localReferenceDiagram, - uriReferenceDiagram, -} from "../test-data/DiagramData"; +import { localReferenceDiagram, uriReferenceDiagram } from "../test-data/DiagramData"; function diagramRenderer(testData) { render( @@ -17,12 +14,7 @@ function diagramRenderer(testData) { ); } -export default function testOSCALDiagram( - parentElementName, - renderer, - testData, - expectedSrc -) { +export default function testOSCALDiagram(parentElementName, renderer, testData, expectedSrc) { test(`${parentElementName} displays diagram`, () => { renderer(testData); const result = screen.getByAltText("Authorization Boundary Diagram"); diff --git a/packages/oscal-react-library/src/components/OSCALDrawerSelector.js b/packages/oscal-react-library/src/components/OSCALDrawerSelector.js index c8343233f..b7f29bc54 100644 --- a/packages/oscal-react-library/src/components/OSCALDrawerSelector.js +++ b/packages/oscal-react-library/src/components/OSCALDrawerSelector.js @@ -1,11 +1,4 @@ -import { - Divider, - Drawer, - IconButton, - Typography, - styled, - useTheme, -} from "@mui/material"; +import { Divider, Drawer, IconButton, Typography, styled, useTheme } from "@mui/material"; import React, { useEffect, useState } from "react"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import TreeView from "@mui/lab/TreeView"; @@ -13,10 +6,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import TreeItem from "@mui/lab/TreeItem"; import { Link } from "react-router-dom"; -import { - oscalObjectTypes, - fetchAllResourcesOfType, -} from "./oscal-utils/OSCALRestUtils"; +import { oscalObjectTypes, fetchAllResourcesOfType } from "./oscal-utils/OSCALRestUtils"; import { OSCALMarkupLine } from "./OSCALMarkupProse"; const DrawerHeader = styled("div")(({ theme }) => ({ @@ -85,9 +75,7 @@ function DocumentTree(props) { onClick={handleClose} > - - {oscalObject.metadata.title} - + {oscalObject.metadata.title} } @@ -106,18 +94,11 @@ export default function OSCALDrawerSelector(props) { - {theme.direction === "ltr" ? ( - - ) : ( - - )} + {theme.direction === "ltr" ? : } - + ); diff --git a/packages/oscal-react-library/src/components/OSCALEditableFieldActions.test.js b/packages/oscal-react-library/src/components/OSCALEditableFieldActions.test.js index d3a1ddb2a..c82eb27df 100644 --- a/packages/oscal-react-library/src/components/OSCALEditableFieldActions.test.js +++ b/packages/oscal-react-library/src/components/OSCALEditableFieldActions.test.js @@ -23,10 +23,7 @@ test("OSCALEditableFieldActions loads", () => { ); }); -export default function testOSCALEditableFieldActions( - parentElementName, - renderer -) { +export default function testOSCALEditableFieldActions(parentElementName, renderer) { test(`${parentElementName} displays edit icon`, () => { renderer(); @@ -45,9 +42,7 @@ export default function testOSCALEditableFieldActions( }) .click(); - const textField = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textField = screen.getByTestId("textField-system-security-plan-metadata-title"); expect(textField).toBeVisible(); }); diff --git a/packages/oscal-react-library/src/components/OSCALEditableTextField.js b/packages/oscal-react-library/src/components/OSCALEditableTextField.js index b79ca2542..9ab515213 100644 --- a/packages/oscal-react-library/src/components/OSCALEditableTextField.js +++ b/packages/oscal-react-library/src/components/OSCALEditableTextField.js @@ -1,17 +1,10 @@ import React, { useRef, useState } from "react"; import Typography from "@mui/material/Typography"; import { Grid, TextField } from "@mui/material"; -import OSCALEditableFieldActions, { - getElementLabel, -} from "./OSCALEditableFieldActions"; +import OSCALEditableFieldActions, { getElementLabel } from "./OSCALEditableFieldActions"; import { OSCALMarkupLine } from "./OSCALMarkupProse"; -function textFieldWithEditableActions( - props, - reference, - inEditState, - setInEditState -) { +function textFieldWithEditableActions(props, reference, inEditState, setInEditState) { if (inEditState) { return ( <> diff --git a/packages/oscal-react-library/src/components/OSCALEditableTextField.test.js b/packages/oscal-react-library/src/components/OSCALEditableTextField.test.js index b7f6f945f..9aa1b530c 100644 --- a/packages/oscal-react-library/src/components/OSCALEditableTextField.test.js +++ b/packages/oscal-react-library/src/components/OSCALEditableTextField.test.js @@ -21,10 +21,7 @@ test("OSCALEditableTextField loads", () => { ); }); -export default function testOSCALEditableTextField( - parentElementName, - renderer -) { +export default function testOSCALEditableTextField(parentElementName, renderer) { test(`${parentElementName} displays default value as "Test Title"`, () => { renderer(); @@ -34,9 +31,7 @@ export default function testOSCALEditableTextField( }) .click(); - const textField = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textField = screen.getByTestId("textField-system-security-plan-metadata-title"); expect(textField.value).toEqual("Test Title"); expect(textField).toBeVisible(); }); @@ -50,9 +45,7 @@ export default function testOSCALEditableTextField( }) .click(); - const textField = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textField = screen.getByTestId("textField-system-security-plan-metadata-title"); fireEvent.keyDown(textField, { key: "Escape", @@ -71,18 +64,14 @@ export default function testOSCALEditableTextField( }) .click(); - const textField = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textField = screen.getByTestId("textField-system-security-plan-metadata-title"); fireEvent.keyPress(textField, { key: "Enter", keyCode: 13, }); - const textFieldAfterEvent = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textFieldAfterEvent = screen.getByTestId("textField-system-security-plan-metadata-title"); expect(textFieldAfterEvent.value).toEqual(textField.value); }); @@ -96,18 +85,14 @@ export default function testOSCALEditableTextField( }) .click(); - const textField = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textField = screen.getByTestId("textField-system-security-plan-metadata-title"); fireEvent.change(textField, { target: { value: "New Test Title" } }); fireEvent.keyPress(textField, { key: "Enter", keyCode: 13, }); - const textFieldAfterEvent = screen.getByTestId( - "textField-system-security-plan-metadata-title" - ); + const textFieldAfterEvent = screen.getByTestId("textField-system-security-plan-metadata-title"); expect(textFieldAfterEvent.value).toEqual("New Test Title"); }); } diff --git a/packages/oscal-react-library/src/components/OSCALJsonEditor.js b/packages/oscal-react-library/src/components/OSCALJsonEditor.js index 19b6f6804..d8a055cb0 100644 --- a/packages/oscal-react-library/src/components/OSCALJsonEditor.js +++ b/packages/oscal-react-library/src/components/OSCALJsonEditor.js @@ -52,12 +52,7 @@ export default function OSCALJsonEditor(props) { /> - +