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.
EasyDynamics · Apr 10, 2023 · 51da849 · 51da849
1 parent e357459
commit 51da849
Show file tree

Hide file tree

Showing 74 changed files with 366 additions and 1,031 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,7 @@
 {
-  "printWidth": 80,
+  "printWidth": 100,
   "singleQuote": false,
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true
-}
+}
diff --git 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)$)":
-      "<rootDir>/tests/fileTransform.js",
+    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/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
@@ -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 (
     <StyledTooltip
-      title={
-        <OSCALMarkupMultiLine>
-          {props.resource.description}
-        </OSCALMarkupMultiLine>
-      }
+      title={<OSCALMarkupMultiLine>{props.resource.description}</OSCALMarkupMultiLine>}
     >
       <DescriptionIcon
         color="primary"
@@ -75,9 +68,7 @@ function CitationDisplay(props) {
     );
   }
   return (
-    <StyledTooltip
-      title={<OSCALMarkupLine>{props.resource.citation.text}</OSCALMarkupLine>}
-    >
+    <StyledTooltip title={<OSCALMarkupLine>{props.resource.citation.text}</OSCALMarkupLine>}>
       <FormatQuoteIcon
         color="primary"
         fontSize="small"
@@ -93,8 +84,7 @@ export default function OSCALBackMatter(props) {
   }
 
   const getMediaType = (rlink) =>
-    rlink["media-type"] ||
-    guessExtensionFromHref(getAbsoluteUrl(rlink.href, props.parentUrl));
+    rlink["media-type"] || guessExtensionFromHref(getAbsoluteUrl(rlink.href, props.parentUrl));
 
   const backMatterDisplay = (resource) => (
     <Grid item xs={3} key={resource.uuid}>
@@ -149,9 +139,7 @@ export default function OSCALBackMatter(props) {
             </Grid>
           </Grid>
           <Grid container spacing={2} padding={2}>
-            {props.backMatter.resources.map((resource) =>
-              backMatterDisplay(resource)
-            )}
+            {props.backMatter.resources.map((resource) => backMatterDisplay(resource))}
           </Grid>
         </CardContent>
       </Card>

diff --git 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(
-    <OSCALBackMatter
-      backMatter={backMatterTestData}
-      parentUrl={parentUrlTestData}
-    />
-  );
+  render(<OSCALBackMatter backMatter={backMatterTestData} parentUrl={parentUrlTestData} />);
 }
 
 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
@@ -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) {
 
       <OSCALCatalogGroups groups={catalog.groups} urlFragment={urlFragment} />
 
-      <OSCALBackMatter
-        backMatter={catalog["back-matter"]}
-        parentUrl={parentUrl}
-      />
+      <OSCALBackMatter backMatter={catalog["back-matter"]} parentUrl={parentUrl} />
     </OSCALDocumentRoot>
   );
 }
diff --git a/packages/oscal-react-library/src/components/OSCALCatalogGroup.js b/packages/oscal-react-library/src/components/OSCALCatalogGroup.js
@@ -75,29 +75,16 @@ 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 (
     <StyledListItemPaper>
       <StyledListItem onClick={handleClick}>
         <ListItemText primary={itemText} />
         {isOpen ? <ExpandLess /> : <ExpandMore />}
       </StyledListItem>
-      <Collapse
-        in={isOpen}
-        timeout="auto"
-        onEntered={() => setListItemOpened(true)}
-        unmountOnExit
-      >
-        <StyledControlDescriptionWrapper>
-          {children}
-        </StyledControlDescriptionWrapper>
+      <Collapse in={isOpen} timeout="auto" onEntered={() => setListItemOpened(true)} unmountOnExit>
+        <StyledControlDescriptionWrapper>{children}</StyledControlDescriptionWrapper>
       </Collapse>
     </StyledListItemPaper>
   );
@@ -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 = (
-    <OSCALAnchorLinkHeader
-      value={appendToFragmentPrefix(fragmentPrefix, control.id).toLowerCase()}
-    >
+    <OSCALAnchorLinkHeader value={appendToFragmentPrefix(fragmentPrefix, control.id).toLowerCase()}>
       <OSCALControlLabel
         label={propWithName(control.props, "label")?.value}
         id={control.id}
@@ -198,10 +182,7 @@ function OSCALCatalogGroupList(props) {
             control={groupControl}
             key={groupControl.id}
             urlFragment={urlFragment}
-            fragmentPrefix={appendToFragmentPrefix(
-              fragmentPrefix,
-              groupControl
-            )}
+            fragmentPrefix={appendToFragmentPrefix(fragmentPrefix, groupControl)}
             fragmentSuffix={shiftFragmentSuffix(fragmentSuffix)}
             isControlListItemOpened={isControlListItemOpened}
             setIsControlListItemOpened={setIsControlListItemOpened}
@@ -213,12 +194,7 @@ function OSCALCatalogGroupList(props) {
 }
 
 export default function OSCALCatalogGroup(props) {
-  const {
-    group,
-    urlFragment,
-    isControlListItemOpened,
-    setIsControlListItemOpened,
-  } = props;
+  const { group, urlFragment, isControlListItemOpened, setIsControlListItemOpened } = props;
   // Note: "fragmentPrefix" is specific to setting up a fragment in the url, by adding groupings;
   // while "fragmentSuffix" is specific to finding a control from a fragment, trimming found groups
   const fragmentPrefix = group.id ?? conformLinkIdText(group.title) ?? "";

diff --git a/packages/oscal-react-library/src/components/OSCALCatalogGroups.js b/packages/oscal-react-library/src/components/OSCALCatalogGroups.js
@@ -76,26 +76,22 @@ TabPanel.propTypes = {
 function determineControlExists(groups, controlLayers, rootLayer) {
   // Ensure catalog tab grouping exists
   let upperLayer = groups?.find(
-    (group) =>
-      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;
 }
 
 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
@@ -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
@@ -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]) => (
-        <OSCALComponentDefinitionControlImplementation
-          controlImplementations={component["control-implementations"]}
-          components={props.componentDefinition.components}
-          controls={props.componentDefinition.resolvedControls}
-          key={key}
-          isEditable={props.isEditable}
-          onRestSuccess={props.onRestSuccess}
-          onRestError={props.onRestError}
-          partialRestData={partialRestData}
-        />
-      )
-    );
+    controlImpl = Object.entries(props.componentDefinition.components).map(([key, component]) => (
+      <OSCALComponentDefinitionControlImplementation
+        controlImplementations={component["control-implementations"]}
+        components={props.componentDefinition.components}
+        controls={props.componentDefinition.resolvedControls}
+        key={key}
+        isEditable={props.isEditable}
+        onRestSuccess={props.onRestSuccess}
+        onRestError={props.onRestError}
+        partialRestData={partialRestData}
+      />
+    ));
   }
 
   return (
@@ -70,18 +67,14 @@ export default function OSCALComponentDefinition(props) {
         partialRestData={partialRestData}
         urlFragment={props.urlFragment}
       />
-      <OSCALProfileCatalogInheritance
-        inheritedProfilesAndCatalogs={inheritedProfilesAndCatalogs}
-      />
-      {Object.entries(props.componentDefinition.components).map(
-        ([key, component]) => (
-          <OSCALComponentDefinitionComponent
-            component={component}
-            parties={props.componentDefinition.metadata.parties}
-            key={key}
-          />
-        )
-      )}
+      <OSCALProfileCatalogInheritance inheritedProfilesAndCatalogs={inheritedProfilesAndCatalogs} />
+      {Object.entries(props.componentDefinition.components).map(([key, component]) => (
+        <OSCALComponentDefinitionComponent
+          component={component}
+          parties={props.componentDefinition.metadata.parties}
+          key={key}
+        />
+      ))}
       {controlImpl}
       <OSCALBackMatter
         backMatter={props.componentDefinition["back-matter"]}

diff --git a/packages/oscal-react-library/src/components/OSCALComponentDefinition.test.js b/packages/oscal-react-library/src/components/OSCALComponentDefinition.test.js
@@ -10,11 +10,7 @@ test("OSCALComponentDefinition loads", () => {
 });
 
 function componentDefinitionRenderer() {
-  render(
-    <OSCALComponentDefinition
-      componentDefinition={componentDefinitionTestData}
-    />
-  );
+  render(<OSCALComponentDefinition componentDefinition={componentDefinitionTestData} />);
 }
 
 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
@@ -39,17 +39,13 @@ export default function OSCALComponentDefinitionComponent(props) {
                     <TableRow key={props.component.uuid}>
                       <TableCell component="th" scope="row">
                         <StyledTooltip title={props.component.description}>
-                          <Typography variant="body2">
-                            {props.component.title}
-                          </Typography>
+                          <Typography variant="body2">{props.component.title}</Typography>
                         </StyledTooltip>
                       </TableCell>
                       <TableCell>{props.component.type}</TableCell>
                       <TableCell>
                         <OSCALResponsibleRoles
-                          responsibleRoles={
-                            props.component["responsible-roles"]
-                          }
+                          responsibleRoles={props.component["responsible-roles"]}
                           parties={props.parties}
                         />
                       </TableCell>