chore(ws): added cspell to enforce spelling check (#469)

Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com>

workspaces/frontend/.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     'no-relative-import-paths',
     'prettier',
     'local-rules',
+    '@cspell',
   ],
   extends: [
     'eslint:recommended',
@@ -233,6 +234,10 @@ module.exports = {
     'func-names': 'warn',
     'local-rules/no-react-hook-namespace': 'error',
     'local-rules/no-raw-react-router-hook': 'error',
+    '@cspell/spellchecker': [
+      'error',
+      { configFile: 'config/cspell.json', customWordListFile: 'config/cspell-ignore-words.txt' },
+    ],
   },
   overrides: [
     {

workspaces/frontend/config/cspell-ignore-words.txt

@@ -0,0 +1,8 @@
+scipy
+kubeflow
+mochawesome
+jovyan
+millicores
+workspacekind
+workspacekinds
+healthcheck

workspaces/frontend/config/cspell.config.cjs

@@ -0,0 +1,51 @@
+/*
+ * Workaround suggested in https://github.com/streetsidesoftware/cspell/issues/3215
+ * while the fix for the library is in progress
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Search for `package.json`
+ * @param {string} from - search `from` directory.
+ * @returns {string} - path to package.json
+ */
+function findNearestPackageJson(from) {
+  from = path.resolve(from);
+  const parent = path.dirname(from);
+  if (!from || parent === from) {
+    return;
+  }
+
+  const pkg = path.join(from, 'package.json');
+  if (fs.existsSync(pkg)) {
+    return pkg;
+  }
+  return findNearestPackageJson(parent);
+}
+
+/**
+ * Load the nearest package.json
+ * @param {string} cwd
+ * @returns
+ */
+function loadPackage(cwd) {
+  const pkgFile = findNearestPackageJson(cwd);
+  if (!pkgFile) return;
+  return JSON.parse(fs.readFileSync(pkgFile, 'utf-8'));
+}
+
+function determinePackageNamesAndMethods(cwd = process.cwd()) {
+  const pkg = loadPackage(cwd) || {};
+  const packageNames = Object.keys(pkg.dependencies || {}).concat(
+    Object.keys(pkg.devDependencies || {}),
+  );
+  const setOfWords = new Set(packageNames.flatMap((name) => name.replace(/[@]/g, '').split('/')));
+  const words = [...setOfWords];
+  return { words };
+}
+
+module.exports = {
+  words: determinePackageNamesAndMethods().words,
+};

workspaces/frontend/config/cspell.json

@@ -0,0 +1,3 @@
+{
+  "import": ["./cspell.config.cjs"]
+}

workspaces/frontend/package.json

@@ -32,11 +32,12 @@
     "cypress:run:mock": "CY_MOCK=1 npm run cypress:run -- ",
     "cypress:server:build": "POLL_INTERVAL=9999999 FAST_POLL_INTERVAL=9999999 npm run build",
     "cypress:server": "serve ./dist -p 9001 -s -L",
-    "prettier": "prettier --ignore-path .gitignore --write \"**/*{.ts,.tsx,.js,.jsx,.css,.json}\"",
-    "prettier:check": "prettier --ignore-path .gitignore --check \"**/*{.ts,.tsx,.js,.jsx,.css,.json}\"",
+    "prettier": "prettier --ignore-path .gitignore --write \"**/*{.ts,.tsx,.js,.cjs,.jsx,.css,.json}\"",
+    "prettier:check": "prettier --ignore-path .gitignore --check \"**/*{.ts,.tsx,.js,.cjs,.jsx,.css,.json}\"",
     "prepare": "cd ../../ && husky workspaces/frontend/.husky"
   },
   "devDependencies": {
+    "@cspell/eslint-plugin": "^9.1.2",
     "@cypress/code-coverage": "^3.13.5",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",

workspaces/frontend/src/app/pages/WorkspaceKinds/Form/EditableLabels.tsx

@@ -81,7 +81,7 @@ export const EditableLabels: React.FC<EditableLabelsProps> = ({ rows, setRows })
 
   return (
     <FormFieldGroupExpandable
-      className="form-label-fieldgroup"
+      className="form-label-field-group"
       toggleAriaLabel="Labels"
       header={
         <FormFieldGroupHeader

workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormResource.tsx

@@ -184,7 +184,7 @@ export const WorkspaceKindFormResource: React.FC<WorkspaceKindFormResourceProps>
         <FormFieldGroupHeader
           titleText={{
             text: 'Resources',
-            id: 'workspace-kind-podconfig-resource',
+            id: 'workspace-kind-pod-config-resource',
           }}
           titleDescription={
             <>

workspaces/frontend/src/app/pages/notFound/NotFound.tsx

@@ -24,7 +24,7 @@ const NotFound: React.FunctionComponent = () => {
     <PageSection>
       <EmptyState titleText="404 Page not found" variant="full" icon={ExclamationTriangleIcon}>
         <EmptyStateBody>
-          We didn&apos;t find a page that matches the address you navigated to.
+          We did not find a page that matches the address you navigated to.
         </EmptyStateBody>
         <EmptyStateFooter>
           <GoHomeBtn />

workspaces/frontend/src/shared/components/DeleteModal.tsx

@@ -90,7 +90,7 @@ const DeleteModal: React.FC<DeleteModalProps> = ({
             {showWarning && (
               <HelperText data-testid="delete-modal-helper-text">
                 <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                  The name doesn&apos;t match. Please enter exactly: {resourceName}
+                  The name does not match. Please enter exactly: {resourceName}
                 </HelperTextItem>
               </HelperText>
             )}

workspaces/frontend/src/shared/mock/mockBuilder.ts

@@ -365,7 +365,7 @@ export const buildMockWorkspaceList = (args: {
               current: {
                 id: podConfig.id,
                 displayName: podConfig.displayName,
-                description: `Pod with ${i}00 Milicores, ${i} GiB RAM`,
+                description: `Pod with ${i}00 Millicores, ${i} GiB RAM`,
                 labels: [
                   {
                     key: 'cpu',

workspaces/frontend/src/shared/style/MUI-theme.scss

@@ -648,7 +648,7 @@
   align-self: start;
 }
 /* CSS workaround for spacing in labels in Workspace Kind */
-.form-label-fieldgroup .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+.form-label-field-group .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
   padding-block-start: 0px;
 }
 /* CSS workaround to use MUI icon for sort icon */

workspaces/frontend/src/shared/utilities/useFetchState.ts

@@ -207,7 +207,7 @@ const useFetchState = <Type>(
     return [doRequest(), unload];
   }, [fetchCallbackPromise]);
 
-  // Use a memmo to update the `changePendingRef` immediately on change.
+  // Use a memo to update the `changePendingRef` immediately on change.
   useMemo(() => {
     changePendingRef.current = true;
     // React to changes to the `call` reference.