fix(package.json): fix broken prettier config, add other useful scripts

.github/workflows/ci.yaml

@@ -30,7 +30,7 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - uses: bahmutov/npm-install@v1
-    - run: yarn license:check
+    - run: yarn format:check
   # - run: yarn lint
     - run: yarn build
     - run: yarn test:ci

package.json

@@ -7,18 +7,26 @@
   "license": "UPL",
   "private": true,
   "scripts": {
-    "build": "webpack --config webpack.prod.js && npm run test",
+    "build": "npm-run-all -l build:notests test",
     "build:notests": "webpack --config webpack.prod.js",
     "clean": "rimraf dist",
     "start:dev": "webpack serve --hot --color --progress --config webpack.dev.js",
     "test": "jest --maxWorkers=50% --coverage=true",
     "test:ci": "jest --maxWorkers=50%",
-    "eslint": "eslint --ext .tsx,.js ./src/",
+    "eslint": "npm-run-all eslint:check",
+    "eslint:check": "eslint --ext .ts,.tsx,.js ./src/",
+    "eslint:apply": "eslint --ext .ts,.tsx,.js --fix ./src/",
     "license:check": "license-check-and-add check -f license-config.json",
-    "lint": "npm run license-check-and-add && npm run eslint",
-    "format": "prettier --check --write ./src/**/*.{tsx,ts} && license-check-and-add add -f license-config.json",
+    "license:apply": "license-check-and-add add -f license-config.json",
+    "lint": "npm-run-all -l -p format eslint",
+    "format": "npm-run-all format:check",
+    "format:check": "npm-run-all -l license:check prettier:check",
+    "format:apply": "npm-run-all -l -p license:apply prettier:apply",
+    "prettier:check": "prettier --check './src/**/*.{tsx,ts}'",
+    "prettier:apply": "prettier --write './src/**/*.{tsx,ts}'",
     "build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
-    "bundle-profile:analyze": "npm run build:bundle-profile && webpack-bundle-analyzer ./stats.json",
+    "build:bundle-analyze": "webpack-bundle-analyzer ./stats.json",
+    "build:bundle-profile-analyze": "npm-run-all -l build:bundle-profile build:bundle-analyze",
     "yarn:install": "yarn install",
     "yarn:frzinstall": "yarn install --frozen-lockfile"
   },
@@ -54,6 +62,7 @@
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.3.0",
     "nanoid": "^3.1.31",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.4.1",
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",

src/app/About/AboutCryostatModal.tsx

@@ -36,22 +36,23 @@
  * SOFTWARE.
  */
 
-import { AboutModal } from "@patternfly/react-core"
-import React from "react"
+import { AboutModal } from '@patternfly/react-core';
+import React from 'react';
 import cryostatLogoWhite from '@app/assets/logo-cryostat-3.svg';
-import { AboutDescription, CRYOSTAT_TRADEMARK } from "./AboutDescription";
+import { AboutDescription, CRYOSTAT_TRADEMARK } from './AboutDescription';
 
-export const AboutCryostatModal = ({isOpen, onClose}) => {
-
-  return(<>
-    <AboutModal
+export const AboutCryostatModal = ({ isOpen, onClose }) => {
+  return (
+    <>
+      <AboutModal
         isOpen={isOpen}
         onClose={onClose}
         trademark={CRYOSTAT_TRADEMARK}
         brandImageSrc={cryostatLogoWhite}
-        brandImageAlt='Cryostat Logo'
+        brandImageAlt="Cryostat Logo"
       >
-      <AboutDescription />
-    </AboutModal>
-    </>);
-}
+        <AboutDescription />
+      </AboutModal>
+    </>
+  );
+};

src/app/About/AboutDescription.tsx

@@ -36,10 +36,10 @@
  * SOFTWARE.
  */
 
-import { Text, TextContent, TextList, TextListItem, TextVariants } from "@patternfly/react-core"
-import React from "react"
-import { ServiceContext } from "@app/Shared/Services/Services";
-import { NotificationsContext } from "@app/Notifications/Notifications";
+import { Text, TextContent, TextList, TextListItem, TextVariants } from '@patternfly/react-core';
+import React from 'react';
+import { ServiceContext } from '@app/Shared/Services/Services';
+import { NotificationsContext } from '@app/Notifications/Notifications';
 
 export const CRYOSTAT_TRADEMARK = 'Copyright The Cryostat Authors, The Universal Permissive License (UPL), Version 1.0';
 
@@ -51,7 +51,7 @@ export const AboutDescription = () => {
   React.useEffect(() => {
     const sub = serviceContext.api.cryostatVersion().subscribe(setCryostatVersion);
     return () => sub.unsubscribe();
-  }, [serviceContext])
+  }, [serviceContext]);
 
   const cryostatCommitHash = React.useMemo(() => {
     if (!cryostatVersion) {
@@ -60,60 +60,69 @@ export const AboutDescription = () => {
     const expr = /^(?<describe>[a-zA-Z0-9-_.]+-[0-9]+-[a-z0-9]+)(?:-dirty)?$/;
     const result = cryostatVersion.match(expr);
     if (!result) {
-      notificationsContext.warning('Cryostat Version Parse Failure', `Could not parse Cryostat version string '${cryostatVersion}'.`);
+      notificationsContext.warning(
+        'Cryostat Version Parse Failure',
+        `Could not parse Cryostat version string '${cryostatVersion}'.`
+      );
       return 'main';
     }
     return result.groups?.describe || 'main';
   }, [cryostatVersion, notificationsContext]);
 
-  return(<>
+  return (
+    <>
       <TextContent>
-      <TextList component="dl">
-        <TextListItem component="dt">
-          Version
-        </TextListItem>
-        <TextListItem component="dd">
-          <Text
-            component={TextVariants.a}
-            target="_blank"
-            href={`https://github.com/cryostatio/cryostat/commits/${cryostatCommitHash}`}
-          >{cryostatVersion}</Text>
-        </TextListItem>
-        <TextListItem component="dt">
-          Homepage
-        </TextListItem>
-        <TextListItem component="dd">
-          <Text component={TextVariants.a} target="_blank" href='https://cryostat.io'>cryostat.io</Text>
-        </TextListItem>
-        <TextListItem component="dt">
-          Bugs
-        </TextListItem>
-        <TextListItem component="dd">
-          <Text>
-          <Text component={TextVariants.a} target="_blank" href='https://github.com/cryostatio/cryostat/issues'>Known Issues</Text>
-          &nbsp;|&nbsp;
-          <Text
-            component={TextVariants.a}
-            target="_blank"
-            href={`https://github.com/cryostatio/cryostat/issues/new?labels=user+report,bug&body=Affects+${cryostatVersion}`}
-          >
-            File a Report
-          </Text>
-          </Text>
-        </TextListItem>
-        <TextListItem component="dt">
-          Mailing List
-        </TextListItem>
-        <TextListItem component="dd">
-          <Text component={TextVariants.a} target="_blank" href='https://groups.google.com/g/cryostat-development'>Google Groups</Text>
-        </TextListItem>
-        <TextListItem component="dt">
-          Open Source License
-        </TextListItem>
-        <TextListItem component="dd">
-          <Text component={TextVariants.a} target="_blank" href='https://github.com/cryostatio/cryostat/blob/main/LICENSE'>License</Text>
-        </TextListItem>
-      </TextList>
-    </TextContent>
-    </>);
-}
+        <TextList component="dl">
+          <TextListItem component="dt">Version</TextListItem>
+          <TextListItem component="dd">
+            <Text
+              component={TextVariants.a}
+              target="_blank"
+              href={`https://github.com/cryostatio/cryostat/commits/${cryostatCommitHash}`}
+            >
+              {cryostatVersion}
+            </Text>
+          </TextListItem>
+          <TextListItem component="dt">Homepage</TextListItem>
+          <TextListItem component="dd">
+            <Text component={TextVariants.a} target="_blank" href="https://cryostat.io">
+              cryostat.io
+            </Text>
+          </TextListItem>
+          <TextListItem component="dt">Bugs</TextListItem>
+          <TextListItem component="dd">
+            <Text>
+              <Text component={TextVariants.a} target="_blank" href="https://github.com/cryostatio/cryostat/issues">
+                Known Issues
+              </Text>
+              &nbsp;|&nbsp;
+              <Text
+                component={TextVariants.a}
+                target="_blank"
+                href={`https://github.com/cryostatio/cryostat/issues/new?labels=user+report,bug&body=Affects+${cryostatVersion}`}
+              >
+                File a Report
+              </Text>
+            </Text>
+          </TextListItem>
+          <TextListItem component="dt">Mailing List</TextListItem>
+          <TextListItem component="dd">
+            <Text component={TextVariants.a} target="_blank" href="https://groups.google.com/g/cryostat-development">
+              Google Groups
+            </Text>
+          </TextListItem>
+          <TextListItem component="dt">Open Source License</TextListItem>
+          <TextListItem component="dd">
+            <Text
+              component={TextVariants.a}
+              target="_blank"
+              href="https://github.com/cryostatio/cryostat/blob/main/LICENSE"
+            >
+              License
+            </Text>
+          </TextListItem>
+        </TextList>
+      </TextContent>
+    </>
+  );
+};