updated configs so eslint and typecheck both run and return errors (#1704)

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/.eslintrc.cjs

@@ -4,13 +4,14 @@ module.exports = {
     es2021: true,
   },
   extends: [
-    'plugin:react/recommended',
     'airbnb',
-    'plugin:prettier/recommended',
-    'plugin:sonarjs/recommended-legacy',
     'plugin:import/errors',
-    'plugin:import/warnings',
     'plugin:import/typescript',
+    'plugin:import/warnings',
+    'plugin:prettier/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:react/recommended',
+    'plugin:sonarjs/recommended-legacy',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -20,7 +21,13 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['react', 'sonarjs', '@typescript-eslint', 'unused-imports'],
+  plugins: [
+    '@typescript-eslint',
+    'react',
+    'react-hooks',
+    'sonarjs',
+    'unused-imports',
+  ],
   rules: {
     // according to https://github.com/typescript-eslint/typescript-eslint/issues/2621, You should turn off the eslint core rule and turn on the typescript-eslint rule
     // but not sure which of the above "extends" statements is maybe bringing in eslint core
@@ -29,6 +36,8 @@ module.exports = {
     '@typescript-eslint/no-shadow': ['error'],
     'jest/expect-expect': 'off',
     'react/jsx-no-bind': 'off',
+    // FIXME: turn this back on someday
+    'react/jsx-key': 'off',
     'jsx-a11y/no-autofocus': 'off',
     'jsx-a11y/label-has-associated-control': 'off',
     'no-console': 'off',
@@ -70,4 +79,12 @@ module.exports = {
     ],
     curly: ['error', 'all'],
   },
+  overrides: [
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
 };

spiffworkflow-frontend/package.json

@@ -71,14 +71,14 @@
     }
   },
   "scripts": {
-    "start": "VITE_VERSION_INFO='{\"version\":\"local\"}' vite",
     "build": "vite build",
-    "serve": "vite preview",
-    "test": "vitest run --coverage",
+    "eslint": "./node_modules/.bin/eslint src --ext .js,.jsx,.ts,.tsx",
+    "eslint:fix": "./node_modules/.bin/eslint --fix src --ext .js,.jsx,.ts,.tsx",
     "format": "prettier --write src/**/*.[tj]s{,x}",
-    "eslint": "./node_modules/.bin/eslint src",
     "lint": "npm run eslint && npm run typecheck",
-    "lint:fix": "./node_modules/.bin/eslint --fix src",
+    "serve": "vite preview",
+    "start": "VITE_VERSION_INFO='{\"version\":\"local\"}' vite",
+    "test": "vitest run --coverage",
     "typecheck": "./node_modules/.bin/tsc --noEmit"
   },
   "eslintConfig": {

spiffworkflow-frontend/src/components/CustomForm.tsx

@@ -269,7 +269,7 @@ export default function CustomForm({
     propertyKey: string,
     errors: any,
     _jsonSchema: any,
-    _uiSchemaPassedIn?: any
+    _uiSchemaPassedIn?: any,
   ) => {
     if (propertyKey in formDataToCheck) {
       try {
@@ -426,14 +426,14 @@ export default function CustomForm({
         if (
           currentUiSchema &&
           'ui:options' in currentUiSchema &&
-          currentUiSchema['ui:options']['validateJson'] === true
+          currentUiSchema['ui:options'].validateJson === true
         ) {
           checkJsonField(
             formDataToCheck,
             propertyKey,
             errors,
             jsonSchemaToUse,
-            currentUiSchema
+            currentUiSchema,
           );
         }
 

spiffworkflow-frontend/src/components/ExtensionUxElementForDisplay.tsx

@@ -38,5 +38,6 @@ export default function ExtensionUxElementForDisplay(
   if (result === null) {
     return null;
   }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{result}</>;
 }

spiffworkflow-frontend/src/components/ProcessInstanceListTableWithFilters.tsx

@@ -1002,6 +1002,7 @@ export default function ProcessInstanceListTableWithFilters({
         <ComboBox
           onChange={updateReportColumn}
           id="report-column-selection"
+          key="report-column-selection"
           data-qa="report-column-selection"
           data-modal-primary-focus
           items={availableReportColumns}
@@ -1021,6 +1022,7 @@ export default function ProcessInstanceListTableWithFilters({
     formElements.push([
       <TextInput
         id="report-column-display-name"
+        key="report-column-display-name"
         name="report-column-display-name"
         labelText="Display Name"
         disabled={!reportColumnToOperateOn}
@@ -1042,6 +1044,7 @@ export default function ProcessInstanceListTableWithFilters({
           titleText="Display type"
           label="Display type"
           id="report-column-display-type"
+          key="report-column-display-type"
           items={[''].concat(Object.values(filterDisplayTypes))}
           selectedItem={
             reportColumnToOperateOn.display_type
@@ -1492,19 +1495,18 @@ export default function ProcessInstanceListTableWithFilters({
 
   const reportSearchComponent = () => {
     if (showReports) {
-      const columns = [
-        <Column sm={4} md={8} lg={16}>
-          <ProcessInstanceReportSearch
-            onChange={processInstanceReportDidChange}
-            selectedItem={processInstanceReportSelection}
-            selectedReportId={searchParams.get('report_id')}
-            handleSetSelectedReportCallback={setProcessInstanceReportSelection}
-          />
-        </Column>,
-      ];
       return (
         <Grid className="with-tiny-bottom-margin" fullWidth>
-          {columns}
+          <Column sm={4} md={8} lg={16}>
+            <ProcessInstanceReportSearch
+              onChange={processInstanceReportDidChange}
+              selectedItem={processInstanceReportSelection}
+              selectedReportId={searchParams.get('report_id')}
+              handleSetSelectedReportCallback={
+                setProcessInstanceReportSelection
+              }
+            />
+          </Column>
         </Grid>
       );
     }

spiffworkflow-frontend/src/components/ProcessModelForm.tsx

@@ -259,6 +259,7 @@ export default function ProcessModelForm({
     const textInputs = [
       <TextInput
         id="process-model-display-name"
+        key="process-model-display-name"
         name="display_name"
         invalidText="Display Name is required."
         invalid={displayNameInvalid}
@@ -274,6 +275,7 @@ export default function ProcessModelForm({
       textInputs.push(
         <TextInput
           id="process-model-identifier"
+          key="process-model-identifier"
           name="id"
           invalidText="Identifier is required and must be all lowercase characters and hyphens."
           invalid={identifierInvalid}
@@ -294,6 +296,7 @@ export default function ProcessModelForm({
     textInputs.push(
       <TextArea
         id="process-model-description"
+        key="process-model-description"
         name="description"
         labelText="Description"
         value={processModel.description}
@@ -306,6 +309,7 @@ export default function ProcessModelForm({
     textInputs.push(
       <Select
         id="notification-type"
+        key="notification-type"
         defaultValue={processModel.fault_or_suspend_on_exception}
         labelText="Notification Type"
         onChange={(event: any) => {

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -6,7 +6,8 @@ import {
   BpmnPropertiesProviderModule,
   // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'bpmn... RemoFve this comment to see the full error message
 } from 'bpmn-js-properties-panel';
-import CliModule  from 'bpmn-js-cli';
+// @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'bpmn... RemoFve this comment to see the full error message
+import CliModule from 'bpmn-js-cli';
 
 // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module 'dmn-... Remove this comment to see the full error message
 import DmnModeler from 'dmn-js/lib/Modeler';
@@ -251,7 +252,7 @@ export default function ReactDiagramEditor({
           CliModule,
         ],
         cli: {
-          bindTo: 'cli'
+          bindTo: 'cli',
         },
         moddleExtensions: {
           spiffworkflow: spiffModdleExtension,
@@ -621,7 +622,7 @@ export default function ReactDiagramEditor({
         return undefined;
       }
       let newDiagramFileName = 'new_bpmn_diagram.bpmn';
-      let textHandler = undefined;
+      let textHandler;
       if (diagramType === 'dmn') {
         newDiagramFileName = 'new_dmn_diagram.dmn';
         textHandler = dmnTextHandler;
@@ -702,7 +703,7 @@ export default function ReactDiagramEditor({
       >
         <UnorderedList>
           {callers.map((ref: ProcessReference) => (
-            <li>
+            <li key={`list-${ref.relative_location}`}>
               <Link
                 size="lg"
                 href={`/process-models/${modifyProcessIdentifierForPathParam(

spiffworkflow-frontend/src/components/messages/MessageEditor.tsx

@@ -53,7 +53,7 @@ export function MessageEditor({
         processGroupIdentifier: unModifyProcessIdentifierForPathParam(
           modifiedProcessGroupIdentifier,
         ),
-        messageId: messageId,
+        messageId,
         correlation_properties: newCorrelationProperties,
         schema: JSON.stringify(jsonSchema, null, 2),
       };
@@ -69,7 +69,7 @@ export function MessageEditor({
       path: `/process-groups/${modifiedProcessGroupIdentifier}`,
       successCallback: processResult,
     });
-  }, [modifiedProcessGroupIdentifier]);
+  }, [modifiedProcessGroupIdentifier, correlationProperties, messageId]);
 
   const handleProcessGroupUpdateResponse = (
     response: ProcessGroup,
@@ -152,6 +152,8 @@ export function MessageEditor({
     try {
       updatedMessagesForId.schema = JSON.parse(formData.schema || '{}');
     } catch (e) {
+      // TODO: display error in a tag like we normally do
+      // eslint-disable-next-line no-alert
       alert(`Invalid schema: ${e}`);
       return;
     }

spiffworkflow-frontend/src/components/messages/MessageHelper.tsx

@@ -1,12 +1,5 @@
 import { ProcessGroup } from '../../interfaces';
 
-const arrayCompare = (array1: string[], array2: string[]) => {
-  return (
-    array1.length === array2.length &&
-    array1.every((value, index) => value === array2[index])
-  );
-};
-
 export const getPropertiesForMessage = (
   messageId: string,
   processGroup: ProcessGroup,

spiffworkflow-frontend/src/components/messages/MessageModelList.tsx

@@ -29,7 +29,7 @@ export default function MessageModelList({ processGroupId }: OwnProps) {
     let modifiedProcessIdentifierForPathParam = '';
     if (processGroupId) {
       modifiedProcessIdentifierForPathParam = `/${modifyProcessIdentifierForPathParam(
-        processGroupId
+        processGroupId,
       )}`;
     }
 
@@ -64,7 +64,7 @@ export default function MessageModelList({ processGroupId }: OwnProps) {
           <td>
             <a
               href={`/process-groups/${modifyProcessIdentifierForPathParam(
-                row.relative_location
+                row.relative_location,
               )}`}
             >
               {row.relative_location}

spiffworkflow-frontend/src/helpers.tsx

@@ -314,4 +314,3 @@ export const renderElementsForArray = (elements: ElementForArray[]) => {
     <div key={element.key}>{element.component}</div>
   ));
 };
-

spiffworkflow-frontend/src/rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { DatePickerInput, DatePicker } from '@carbon/react';
+import { useDebouncedCallback } from 'use-debounce';
 import {
   DATE_FORMAT_CARBON,
   DATE_FORMAT_FOR_DISPLAY,
@@ -7,7 +8,6 @@ import {
 } from '../../../config';
 import { getCommonAttributes } from '../../helpers';
 import DateAndTimeService from '../../../services/DateAndTimeService';
-import { useDebouncedCallback } from 'use-debounce';
 
 interface widgetArgs {
   id: string;
@@ -88,6 +88,7 @@ export default function DateRangePickerWidget({
 
   const addDebouncedOnChangeDate = useDebouncedCallback(
     (fullObject: React.ChangeEvent<HTMLInputElement>) => {
+      // eslint-disable-next-line no-param-reassign
       fullObject.target.value =
         DateAndTimeService.attemptToConvertUnknownDateStringFormatToKnownFormat(
           fullObject.target.value,