updated recently viewed table to be recently run and added run button w/ burnettk cullerton

spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx

@@ -4,11 +4,60 @@ import {
   Button,
   // @ts-ignore
 } from '@carbon/react';
-import { ProcessModel } from '../interfaces';
+import { ProcessModel, RecentProcessModel } from '../interfaces';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
 import { modifyProcessIdentifierForPathParam } from '../helpers';
 
+const storeRecentProcessModelInLocalStorage = (
+  processModelForStorage: ProcessModel
+) => {
+  // All values stored in localStorage are strings.
+  // Grab our recentProcessModels string from localStorage.
+  const stringFromLocalStorage = window.localStorage.getItem(
+    'recentProcessModels'
+  );
+
+  // adapted from https://stackoverflow.com/a/59424458/6090676
+  // If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, use the value we parse out.
+  let array: RecentProcessModel[] = [];
+  if (stringFromLocalStorage !== null) {
+    // Then parse that string into an actual value.
+    array = JSON.parse(stringFromLocalStorage);
+  }
+
+  // Here's the value we want to add
+  const value = {
+    processModelIdentifier: processModelForStorage.id,
+    processModelDisplayName: processModelForStorage.display_name,
+  };
+
+  // anything with a processGroupIdentifier is old and busted. leave it behind.
+  array = array.filter((item) => item.processGroupIdentifier === undefined);
+
+  // If our parsed/empty array doesn't already have this value in it...
+  const matchingItem = array.find(
+    (item) => item.processModelIdentifier === value.processModelIdentifier
+  );
+  if (matchingItem === undefined) {
+    // add the value to the beginning of the array
+    array.unshift(value);
+
+    // Keep the array to 3 items
+    if (array.length > 3) {
+      array.pop();
+    }
+  }
+
+  // once the old and busted serializations are gone, we can put these two statements inside the above if statement
+
+  // turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage
+  const stringRepresentingArray = JSON.stringify(array);
+
+  // and store it in localStorage as "recentProcessModels"
+  window.localStorage.setItem('recentProcessModels', stringRepresentingArray);
+};
+
 type OwnProps = {
   processModel: ProcessModel;
   onSuccessCallback: Function;
@@ -38,6 +87,7 @@ export default function ProcessInstanceRun({
 
   const processModelRun = (processInstance: any) => {
     setErrorMessage(null);
+    storeRecentProcessModelInLocalStorage(processModel);
     HttpService.makeCallToBackend({
       path: `/process-instances/${modifiedProcessModelId}/${processInstance.id}/run`,
       successCallback: onProcessInstanceRun,
@@ -55,11 +105,7 @@ export default function ProcessInstanceRun({
   };
 
   return (
-    <Button
+    <Button onClick={processInstanceCreateAndRun} className={className}>
-      onClick={processInstanceCreateAndRun}
-      variant="primary"
-      className={className}
-    >
       Run
     </Button>
   );

spiffworkflow-frontend/src/routes/MyTasks.tsx

@@ -9,7 +9,13 @@ import {
   refreshAtInterval,
 } from '../helpers';
 import HttpService from '../services/HttpService';
-import { PaginationObject, RecentProcessModel } from '../interfaces';
+import {
+  PaginationObject,
+  ProcessInstance,
+  ProcessModel,
+  RecentProcessModel,
+} from '../interfaces';
+import ProcessInstanceRun from '../components/ProcessInstanceRun';
 
 const PER_PAGE_FOR_TASKS_ON_HOME_PAGE = 5;
 const REFRESH_INTERVAL = 10;
@@ -19,6 +25,8 @@ export default function MyTasks() {
   const [searchParams] = useSearchParams();
   const [tasks, setTasks] = useState([]);
   const [pagination, setPagination] = useState<PaginationObject | null>(null);
+  const [processInstance, setProcessInstance] =
+    useState<ProcessInstance | null>(null);
 
   useEffect(() => {
     const getTasks = () => {
@@ -40,6 +48,28 @@ export default function MyTasks() {
     refreshAtInterval(REFRESH_INTERVAL, REFRESH_TIMEOUT, getTasks);
   }, [searchParams]);
 
+  const processInstanceRunResultTag = () => {
+    if (processInstance) {
+      return (
+        <div className="alert alert-success" role="alert">
+          <p>
+            Process Instance {processInstance.id} kicked off (
+            <Link
+              to={`/admin/process-models/${modifyProcessIdentifierForPathParam(
+                processInstance.process_model_identifier
+              )}/process-instances/${processInstance.id}`}
+              data-qa="process-instance-show-link"
+            >
+              view
+            </Link>
+            ).
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
   let recentProcessModels: RecentProcessModel[] = [];
   const recentProcessModelsString = localStorage.getItem('recentProcessModels');
   if (recentProcessModelsString !== null) {
@@ -107,33 +137,44 @@ export default function MyTasks() {
   };
 
   const buildRecentProcessModelSection = () => {
-    const rows = recentProcessModels.map((row) => {
+    const rows = recentProcessModels.map((row: RecentProcessModel) => {
-      const rowToUse = row as any;
+      const processModel: ProcessModel = {
+        id: row.processModelIdentifier,
+        description: '',
+        display_name: '',
+        primary_file_name: '',
+        files: [],
+      };
       const modifiedProcessModelId = modifyProcessIdentifierForPathParam(
-        rowToUse.processModelIdentifier
+        row.processModelIdentifier
       );
       return (
-        <tr
+        <tr key={`${row.processGroupIdentifier}/${row.processModelIdentifier}`}>
-          key={`${rowToUse.processGroupIdentifier}/${rowToUse.processModelIdentifier}`}
-        >
           <td>
             <Link
               data-qa="process-model-show-link"
               to={`/admin/process-models/${modifiedProcessModelId}`}
             >
-              {rowToUse.processModelDisplayName}
+              {row.processModelDisplayName}
             </Link>
           </td>
+          <td>
+            <ProcessInstanceRun
+              processModel={processModel}
+              onSuccessCallback={setProcessInstance}
+            />
+          </td>
         </tr>
       );
     });
     return (
       <>
-        <h1>Recently viewed process models</h1>
+        <h1>Recently instantiated process models</h1>
         <Table striped bordered>
           <thead>
             <tr>
               <th>Process Model</th>
+              <th>Actions</th>
             </tr>
           </thead>
           <tbody>{rows}</tbody>
@@ -175,6 +216,7 @@ export default function MyTasks() {
     }
     return (
       <>
+        {processInstanceRunResultTag()}
         {tasksWaitingForMe}
         <br />
         {relevantProcessModelSection}

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -41,7 +41,6 @@ import {
   ProcessFile,
   ProcessInstance,
   ProcessModel,
-  RecentProcessModel,
 } from '../interfaces';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
@@ -49,55 +48,6 @@ import { usePermissionFetcher } from '../hooks/PermissionService';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
 import ProcessInstanceRun from '../components/ProcessInstanceRun';
 
-const storeRecentProcessModelInLocalStorage = (
-  processModelForStorage: ProcessModel
-) => {
-  // All values stored in localStorage are strings.
-  // Grab our recentProcessModels string from localStorage.
-  const stringFromLocalStorage = window.localStorage.getItem(
-    'recentProcessModels'
-  );
-
-  // adapted from https://stackoverflow.com/a/59424458/6090676
-  // If that value is null (meaning that we've never saved anything to that spot in localStorage before), use an empty array as our array. Otherwise, use the value we parse out.
-  let array: RecentProcessModel[] = [];
-  if (stringFromLocalStorage !== null) {
-    // Then parse that string into an actual value.
-    array = JSON.parse(stringFromLocalStorage);
-  }
-
-  // Here's the value we want to add
-  const value = {
-    processModelIdentifier: processModelForStorage.id,
-    processModelDisplayName: processModelForStorage.display_name,
-  };
-
-  // anything with a processGroupIdentifier is old and busted. leave it behind.
-  array = array.filter((item) => item.processGroupIdentifier === undefined);
-
-  // If our parsed/empty array doesn't already have this value in it...
-  const matchingItem = array.find(
-    (item) => item.processModelIdentifier === value.processModelIdentifier
-  );
-  if (matchingItem === undefined) {
-    // add the value to the beginning of the array
-    array.unshift(value);
-
-    // Keep the array to 3 items
-    if (array.length > 3) {
-      array.pop();
-    }
-  }
-
-  // once the old and busted serializations are gone, we can put these two statements inside the above if statement
-
-  // turn the array WITH THE NEW VALUE IN IT into a string to prepare it to be stored in localStorage
-  const stringRepresentingArray = JSON.stringify(array);
-
-  // and store it in localStorage as "recentProcessModels"
-  window.localStorage.setItem('recentProcessModels', stringRepresentingArray);
-};
-
 export default function ProcessModelShow() {
   const params = useParams();
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
@@ -130,7 +80,6 @@ export default function ProcessModelShow() {
     const processResult = (result: ProcessModel) => {
       setProcessModel(result);
       setReloadModel(false);
-      storeRecentProcessModelInLocalStorage(result);
     };
     HttpService.makeCallToBackend({
       path: `/process-models/${modifiedProcessModelId}`,