repair lint after refactor (#2229)

* feat: Fix linting errors and add prop types to components. * feat: Fix: Move imports of PropTypes to the top of files. * refactor: Improve type safety and fix linting errors in ProcessModelShow.tsx * lint * Revert "lint" This reverts commit 9ee9488. * functions * lint * types * lint * fixed lint issues w/ burnettk * fix file upload on model show page w/ burnettk --------- Co-authored-by: burnettk (aider) <[email protected]> Co-authored-by: jasquat <[email protected]>
sartography · Feb 5, 2025 · eea607d · eea607d
1 parent 6effb73
commit eea607d
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 63 deletions.
diff --git a/spiffworkflow-frontend/src/components/ProcessModelFileList.tsx b/spiffworkflow-frontend/src/components/ProcessModelFileList.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
 import { Download, Edit, Favorite, TrashCan, View } from '@carbon/icons-react';
 import {
@@ -10,30 +11,30 @@ import {
   TableRow,
 } from '@carbon/react';
 import { Can } from '@casl/react';
-import { Ability } from '@casl/ability';
+import { PureAbility } from '@casl/ability';
 import ButtonWithConfirmation from './ButtonWithConfirmation';
 import ProcessModelTestRun from './ProcessModelTestRun';
 import { ProcessFile } from '../interfaces';
 
 interface ProcessModelFileListProps {
   processModel: any;
-  ability: Ability;
+  ability: PureAbility;
   targetUris: any;
   modifiedProcessModelId: string;
   onDeleteFile: (fileName: string) => void;
   onSetPrimaryFile: (fileName: string) => void;
   isTestCaseFile: (processModelFile: ProcessFile) => boolean;
 }
 
-const ProcessModelFileList: React.FC<ProcessModelFileListProps> = ({
+export default function ProcessModelFileList({
   processModel,
   ability,
   targetUris,
   modifiedProcessModelId,
   onDeleteFile,
   onSetPrimaryFile,
   isTestCaseFile,
-}) => {
+}: ProcessModelFileListProps) {
   const profileModelFileEditUrl = (processModelFile: ProcessFile) => {
     if (processModel) {
       if (processModelFile.name.match(/\.(dmn|bpmn)$/)) {
@@ -214,6 +215,4 @@ const ProcessModelFileList: React.FC<ProcessModelFileListProps> = ({
       <TableBody>{tags}</TableBody>
     </Table>
   );
-};
-
-export default ProcessModelFileList;
+}
diff --git a/spiffworkflow-frontend/src/components/ProcessModelFileUploadModal.tsx b/spiffworkflow-frontend/src/components/ProcessModelFileUploadModal.tsx
@@ -1,67 +1,61 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { FileUploader, Modal } from '@carbon/react';
 
 interface ProcessModelFileUploadModalProps {
   showFileUploadModal: boolean;
   processModel: any;
-  onFileUpload: (event: any) => void;
   handleFileUploadCancel: () => void;
-  checkDuplicateFile: (event: any) => void;
-}
-interface FileUploadState {
-  filesToUpload: File[] | null;
+  checkDuplicateFile: (files: File[], forceOverwrite?: boolean) => void;
+  doFileUpload: Function;
+  setShowFileUploadModal: Function;
 }
 
-const ProcessModelFileUploadModal: React.FC<
-  ProcessModelFileUploadModalProps
-> = ({
+export default function ProcessModelFileUploadModal({
   showFileUploadModal,
   processModel,
-  onFileUpload,
   handleFileUploadCancel,
   checkDuplicateFile,
-}) => {
+  doFileUpload,
+  setShowFileUploadModal,
+}: ProcessModelFileUploadModalProps) {
   const [filesToUpload, setFilesToUpload] = useState<File[] | null>(null);
   const [duplicateFilename, setDuplicateFilename] = useState<string>('');
   const [showOverwriteConfirmationPrompt, setShowOverwriteConfirmationPrompt] =
     useState(false);
-  const [fileUploadEvent, setFileUploadEvent] = useState(null);
 
   const handleOverwriteFileConfirm = () => {
     setShowOverwriteConfirmationPrompt(false);
-    if (fileUploadEvent) {
-      checkDuplicateFile(fileUploadEvent, true); // Force overwrite
-    }
+    doFileUpload(filesToUpload);
   };
 
   const handleOverwriteFileCancel = () => {
+    setShowFileUploadModal(true);
     setShowOverwriteConfirmationPrompt(false);
-    setFilesToUpload(null);
   };
 
   const displayOverwriteConfirmation = (filename: string) => {
     setDuplicateFilename(filename);
+    setShowFileUploadModal(false);
     setShowOverwriteConfirmationPrompt(true);
   };
 
-  const handleLocalFileUpload = (event: any) => {
-    const newFiles: File[] = Array.from(event.target.files);
-    setFilesToUpload(newFiles);
-
+  const handleLocalFileUpload = () => {
+    if (!filesToUpload) {
+      return;
+    }
     if (processModel) {
       let foundExistingFile = false;
-      if (processModel.files.length > 0) {
+      if (processModel.files && processModel.files.length > 0) {
         processModel.files.forEach((file: { name: string }) => {
-          if (file.name === newFiles[0].name) {
+          if (file.name === filesToUpload[0].name) {
             foundExistingFile = true;
           }
         });
       }
       if (foundExistingFile) {
-        displayOverwriteConfirmation(newFiles[0].name);
-        setFileUploadEvent(event);
+        displayOverwriteConfirmation(filesToUpload[0].name);
       } else {
-        checkDuplicateFile(event);
+        checkDuplicateFile(filesToUpload);
         setShowOverwriteConfirmationPrompt(false);
       }
     }
@@ -96,12 +90,7 @@ const ProcessModelFileUploadModal: React.FC<
         secondaryButtonText="Cancel"
         onSecondarySubmit={handleFileUploadCancel}
         onRequestClose={handleFileUploadCancel}
-        onRequestSubmit={() => {
-          if (filesToUpload) {
-            checkDuplicateFile(filesToUpload);
-          }
-          setShowOverwriteConfirmationPrompt(false);
-        }}
+        onRequestSubmit={handleLocalFileUpload}
       >
         <FileUploader
           labelTitle="Upload files"
@@ -117,11 +106,9 @@ const ProcessModelFileUploadModal: React.FC<
           name=""
           multiple={false}
           onDelete={() => setFilesToUpload(null)}
-          onChange={handleLocalFileUpload}
+          onChange={(event: any) => setFilesToUpload(event.target.files)}
         />
       </Modal>
     </>
   );
-};
-
-export default ProcessModelFileUploadModal;
+}
diff --git a/spiffworkflow-frontend/src/components/ProcessModelReadmeArea.tsx b/spiffworkflow-frontend/src/components/ProcessModelReadmeArea.tsx
@@ -1,23 +1,24 @@
+import React from 'react';
 import { Button, Column, Grid } from '@carbon/react';
 import { Can } from '@casl/react';
 import { Edit } from '@carbon/icons-react';
-import { Ability } from '@casl/ability';
+import { PureAbility } from '@casl/ability';
 import MarkdownDisplayForFile from './MarkdownDisplayForFile';
 import { ProcessFile } from '../interfaces';
 
 interface ProcessModelReadmeAreaProps {
   readmeFile: ProcessFile | null;
-  ability: Ability;
+  ability: PureAbility;
   targetUris: any;
   modifiedProcessModelId: string;
 }
 
-const ProcessModelReadmeArea: React.FC<ProcessModelReadmeAreaProps> = ({
+export default function ProcessModelReadmeArea({
   readmeFile,
   ability,
   targetUris,
   modifiedProcessModelId,
-}) => {
+}: ProcessModelReadmeAreaProps) {
   if (readmeFile) {
     return (
       <div className="readme-container">
@@ -64,6 +65,4 @@ const ProcessModelReadmeArea: React.FC<ProcessModelReadmeAreaProps> = ({
       </Can>
     </>
   );
-};
-
-export default ProcessModelReadmeArea;
+}
diff --git a/spiffworkflow-frontend/src/components/ProcessModelTabs.tsx b/spiffworkflow-frontend/src/components/ProcessModelTabs.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Column,
   Dropdown,
@@ -10,15 +11,15 @@ import {
 } from '@carbon/react';
 import { Can } from '@casl/react'; // Corrected import
 import { useNavigate } from 'react-router-dom';
-import { Ability } from '@casl/ability';
+import { PureAbility } from '@casl/ability';
 import ProcessInstanceListTable from './ProcessInstanceListTable';
 import ProcessModelFileList from './ProcessModelFileList';
 import { ProcessFile } from '../interfaces';
 import ProcessModelReadmeArea from './ProcessModelReadmeArea';
 
 interface ProcessModelTabsProps {
   processModel: any;
-  ability: Ability;
+  ability: PureAbility;
   targetUris: any;
   modifiedProcessModelId: string;
   selectedTabIndex: number;
@@ -27,9 +28,10 @@ interface ProcessModelTabsProps {
   onSetPrimaryFile: (fileName: string) => void;
   isTestCaseFile: (processModelFile: ProcessFile) => boolean;
   readmeFile: ProcessFile | null;
+  setShowFileUploadModal: Function;
 }
 
-const ProcessModelTabs: React.FC<ProcessModelTabsProps> = ({
+export default function ProcessModelTabs({
   processModel,
   ability,
   targetUris,
@@ -40,7 +42,8 @@ const ProcessModelTabs: React.FC<ProcessModelTabsProps> = ({
   onSetPrimaryFile,
   isTestCaseFile,
   readmeFile,
-}) => {
+  setShowFileUploadModal,
+}: ProcessModelTabsProps) {
   const navigate = useNavigate();
 
   if (!processModel) {
@@ -88,7 +91,7 @@ const ProcessModelTabs: React.FC<ProcessModelTabsProps> = ({
             // Handled by parent component via prop
             updateSelectedTab({ selectedIndex: 1 }); // Switch to Files tab
             // Open file upload modal (handled by parent)
-            // setShowFileUploadModal(true);
+            setShowFileUploadModal(true);
           } else if (a.selectedItem.text === 'New DMN File') {
             navigate(
               `/editor/process-models/${modifiedProcessModelId}/files?file_type=dmn`,
@@ -181,6 +184,4 @@ const ProcessModelTabs: React.FC<ProcessModelTabsProps> = ({
       </TabPanels>
     </Tabs>
   );
-};
-
-export default ProcessModelTabs;
+}
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Upload, Edit, TrashCan } from '@carbon/icons-react';
 import { Button, Stack } from '@carbon/react';
@@ -56,7 +56,7 @@ export default function ProcessModelShow() {
   let hasTestCaseFiles: boolean = false;
 
   const isTestCaseFile = (processModelFile: ProcessFile) => {
-    return processModelFile.name.match(/^test_.*\.json$/);
+    return !!processModelFile.name.match(/^test_.*\.json$/);
   };
 
   if (processModel) {
@@ -212,9 +212,7 @@ export default function ProcessModelShow() {
           a={targetUris.processInstanceCreatePath}
           ability={ability}
         >
-          <>
-            <ProcessInstanceRun processModel={processModel} />
-          </>
+          <ProcessInstanceRun processModel={processModel} />
         </Can>
       </Stack>
     );
@@ -223,9 +221,10 @@ export default function ProcessModelShow() {
         <ProcessModelFileUploadModal
           showFileUploadModal={showFileUploadModal}
           processModel={processModel}
-          onFileUpload={doFileUpload}
+          doFileUpload={doFileUpload}
           handleFileUploadCancel={handleFileUploadCancel}
           checkDuplicateFile={checkDuplicateFile}
+          setShowFileUploadModal={setShowFileUploadModal}
         />
         <ProcessBreadcrumb
           hotCrumbs={[
@@ -305,6 +304,7 @@ export default function ProcessModelShow() {
           onSetPrimaryFile={onSetPrimaryFile}
           isTestCaseFile={isTestCaseFile}
           readmeFile={readmeFile}
+          setShowFileUploadModal={setShowFileUploadModal}
         />
         {permissionsLoaded ? (
           <span data-qa="process-model-show-permissions-loaded" />