added create new instance page and moved model run to a component w/ burnettk cullerton

spiffworkflow-frontend/src/components/ProcessGroupListTiles.tsx

@@ -60,10 +60,10 @@ export default function ProcessGroupListTiles({
               <div className="tile-process-group-display-name">
                 {row.display_name}
               </div>
-              <p className="tile-process-group-description">
+              <p className="tile-description">
                 {truncateString(row.description || '', 25)}
               </p>
-              <p className="tile-process-group-children-count">
+              <p className="tile-process-group-children-count tile-pin-bottom">
                 Total Sub Items: {processGroupDirectChildrenCount(row)}
               </p>
             </div>

spiffworkflow-frontend/src/components/ProcessInstanceRun.tsx

@@ -0,0 +1,64 @@
+import { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Button,
+  // @ts-ignore
+} from '@carbon/react';
+import { ProcessModel } from '../interfaces';
+import HttpService from '../services/HttpService';
+import ErrorContext from '../contexts/ErrorContext';
+import { modifyProcessModelPath } from '../helpers';
+
+type OwnProps = {
+  processModel: ProcessModel;
+  onSuccessCallback: Function;
+  className?: string;
+};
+
+export default function ProcessInstanceRun({
+  processModel,
+  onSuccessCallback,
+  className,
+}: OwnProps) {
+  const navigate = useNavigate();
+  const setErrorMessage = (useContext as any)(ErrorContext)[1];
+  const modifiedProcessModelId = modifyProcessModelPath(processModel.id);
+
+  const onProcessInstanceRun = (processInstance: any) => {
+    // FIXME: ensure that the task is actually for the current user as well
+    const processInstanceId = (processInstance as any).id;
+    const nextTask = (processInstance as any).next_task;
+    if (nextTask && nextTask.state === 'READY') {
+      navigate(`/tasks/${processInstanceId}/${nextTask.id}`);
+    }
+    onSuccessCallback(processInstance);
+  };
+
+  const processModelRun = (processInstance: any) => {
+    setErrorMessage(null);
+    HttpService.makeCallToBackend({
+      path: `/process-instances/${processInstance.id}/run`,
+      successCallback: onProcessInstanceRun,
+      failureCallback: setErrorMessage,
+      httpMethod: 'POST',
+    });
+  };
+
+  const processInstanceCreateAndRun = () => {
+    HttpService.makeCallToBackend({
+      path: `/process-models/${modifiedProcessModelId}/process-instances`,
+      successCallback: processModelRun,
+      httpMethod: 'POST',
+    });
+  };
+
+  return (
+    <Button
+      onClick={processInstanceCreateAndRun}
+      variant="primary"
+      className={className}
+    >
+      Run
+    </Button>
+  );
+}

spiffworkflow-frontend/src/components/ProcessModelForm.tsx

@@ -42,7 +42,7 @@ export default function ProcessModelForm({
   const handleFormSubmission = (event: any) => {
     event.preventDefault();
     let hasErrors = false;
-    if (!hasValidIdentifier(processModel.id)) {
+    if (mode === 'new' && !hasValidIdentifier(processModel.id)) {
       setIdentifierInvalid(true);
       hasErrors = true;
     }

spiffworkflow-frontend/src/components/ProcessModelListTiles.tsx

@@ -0,0 +1,105 @@
+import { ReactElement, useEffect, useState } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import {
+  Tile,
+  // @ts-ignore
+} from '@carbon/react';
+import HttpService from '../services/HttpService';
+import { ProcessModel, ProcessInstance } from '../interfaces';
+import { modifyProcessModelPath, truncateString } from '../helpers';
+import ProcessInstanceRun from './ProcessInstanceRun';
+
+type OwnProps = {
+  headerElement?: ReactElement;
+};
+
+export default function ProcessModelListTiles({ headerElement }: OwnProps) {
+  const [searchParams] = useSearchParams();
+  const [processModels, setProcessModels] = useState<ProcessModel[] | null>(
+    null
+  );
+  const [processInstance, setProcessInstance] =
+    useState<ProcessInstance | null>(null);
+
+  useEffect(() => {
+    const setProcessModelsFromResult = (result: any) => {
+      setProcessModels(result.results);
+    };
+    // only allow 10 for now until we get the backend only returnin certain models for user execution
+    const queryParams = '?per_page=10';
+    HttpService.makeCallToBackend({
+      path: `/process-models${queryParams}`,
+      successCallback: setProcessModelsFromResult,
+    });
+  }, [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/${modifyProcessModelPath(
+                processInstance.process_model_identifier
+              )}/process-instances/${processInstance.id}`}
+              data-qa="process-instance-show-link"
+            >
+              view
+            </Link>
+            ).
+          </p>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const processModelsDisplayArea = () => {
+    let displayText = null;
+    if (processModels && processModels.length > 0) {
+      displayText = (processModels || []).map((row: ProcessModel) => {
+        return (
+          <Tile
+            id="tile-1"
+            className="tile-process-group"
+            href={`/admin/process-models/${modifyProcessModelPath(row.id)}`}
+          >
+            <div className="tile-process-group-content-container">
+              <div className="tile-title-top">{row.display_name}</div>
+              <p className="tile-description">
+                {truncateString(row.description || '', 25)}
+              </p>
+              <ProcessInstanceRun
+                processModel={row}
+                onSuccessCallback={setProcessInstance}
+                className="tile-pin-bottom"
+              />
+            </div>
+          </Tile>
+        );
+      });
+    } else {
+      displayText = <p>No Models To Display</p>;
+    }
+    return displayText;
+  };
+
+  const processModelArea = () => {
+    if (processModels && processModels.length > 0) {
+      return (
+        <>
+          {headerElement}
+          {processInstanceRunResultTag()}
+          {processModelsDisplayArea()}
+        </>
+      );
+    }
+    return null;
+  };
+
+  if (processModels) {
+    return <>{processModelArea()}</>;
+  }
+  return null;
+}

spiffworkflow-frontend/src/index.css

@@ -215,7 +215,15 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
   order: 0;
 }
 
-.tile-process-group-description {
+.tile-title-top {
+  margin-bottom: 2em;
+  font-size: 20px;
+  line-height: 28px;
+  color: #161616;
+  order: 0;
+}
+
+.tile-description {
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.16px;
@@ -229,6 +237,9 @@ in on this with the react-jsonschema-form repo. This is just a patch fix to allo
   letter-spacing: 0.16px;
   color: #161616;
   order: 1;
+}
+
+.tile-pin-bottom {
   position: absolute;
   bottom: 1em;
 }

spiffworkflow-frontend/src/interfaces.ts

@@ -36,6 +36,11 @@ export interface ProcessFile {
   file_contents?: string;
 }
 
+export interface ProcessInstance {
+  id: number;
+  process_model_identifier: string;
+}
+
 export interface ProcessModel {
   id: string;
   description: string;

spiffworkflow-frontend/src/routes/CreateNewInstance.tsx

@@ -0,0 +1,9 @@
+import ProcessModelListTiles from '../components/ProcessModelListTiles';
+
+export default function CreateNewInstance() {
+  return (
+    <ProcessModelListTiles
+      headerElement={<h1>Process models available to you</h1>}
+    />
+  );
+}

spiffworkflow-frontend/src/routes/HomePageRoutes.tsx

@@ -7,6 +7,7 @@ import ErrorContext from '../contexts/ErrorContext';
 import MyTasks from './MyTasks';
 import GroupedTasks from './GroupedTasks';
 import CompletedInstances from './CompletedInstances';
+import CreateNewInstance from './CreateNewInstance';
 
 export default function HomePageRoutes() {
   const location = useLocation();
@@ -21,6 +22,8 @@ export default function HomePageRoutes() {
       newSelectedTabIndex = 1;
     } else if (location.pathname.match(/^\/tasks\/completed-instances\b/)) {
       newSelectedTabIndex = 2;
+    } else if (location.pathname.match(/^\/tasks\/create-new-instance\b/)) {
+      newSelectedTabIndex = 3;
     }
     setSelectedTabIndex(newSelectedTabIndex);
   }, [location, setErrorMessage]);
@@ -34,6 +37,9 @@ export default function HomePageRoutes() {
           <Tab onClick={() => navigate('/tasks/completed-instances')}>
             Completed Instances
           </Tab>
+          <Tab onClick={() => navigate('/tasks/create-new-instance')}>
+            Create New Instance +
+          </Tab>
         </TabList>
       </Tabs>
       <br />
@@ -43,6 +49,7 @@ export default function HomePageRoutes() {
         <Route path=":process_instance_id/:task_id" element={<TaskShow />} />
         <Route path="grouped" element={<GroupedTasks />} />
         <Route path="completed-instances" element={<CompletedInstances />} />
+        <Route path="create-new-instance" element={<CreateNewInstance />} />
       </Routes>
     </>
   );

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -38,6 +38,7 @@ import {
 import {
   PermissionsToCheck,
   ProcessFile,
+  ProcessInstance,
   ProcessModel,
   RecentProcessModel,
 } from '../interfaces';
@@ -45,6 +46,7 @@ import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
+import ProcessInstanceRun from '../components/ProcessInstanceRun';
 
 const storeRecentProcessModelInLocalStorage = (
   processModelForStorage: ProcessModel
@@ -100,7 +102,8 @@ export default function ProcessModelShow() {
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
 
   const [processModel, setProcessModel] = useState<ProcessModel | null>(null);
-  const [processInstanceResult, setProcessInstanceResult] = useState(null);
+  const [processInstance, setProcessInstance] =
+    useState<ProcessInstance | null>(null);
   const [reloadModel, setReloadModel] = useState<boolean>(false);
   const [filesToUpload, setFilesToUpload] = useState<any>(null);
   const [showFileUploadModal, setShowFileUploadModal] =
@@ -132,38 +135,14 @@ export default function ProcessModelShow() {
     });
   }, [reloadModel, modifiedProcessModelId]);
 
-  const processModelRun = (processInstance: any) => {
-    setErrorMessage(null);
-    HttpService.makeCallToBackend({
-      path: `/process-instances/${processInstance.id}/run`,
-      successCallback: setProcessInstanceResult,
-      failureCallback: setErrorMessage,
-      httpMethod: 'POST',
-    });
-  };
-
-  const processInstanceCreateAndRun = () => {
-    HttpService.makeCallToBackend({
-      path: `/process-models/${modifiedProcessModelId}/process-instances`,
-      successCallback: processModelRun,
-      httpMethod: 'POST',
-    });
-  };
-
   const processInstanceRunResultTag = () => {
-    if (processModel && processInstanceResult) {
+    if (processInstance) {
-      // FIXME: ensure that the task is actually for the current user as well
-      const processInstanceId = (processInstanceResult as any).id;
-      const nextTask = (processInstanceResult as any).next_task;
-      if (nextTask && nextTask.state === 'READY') {
-        navigate(`/tasks/${processInstanceId}/${nextTask.id}`);
-      }
       return (
         <div className="alert alert-success" role="alert">
           <p>
-            Process Instance {processInstanceId} kicked off (
+            Process Instance {processInstance.id} kicked off (
             <Link
-              to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${processInstanceId}`}
+              to={`/admin/process-models/${modifiedProcessModelId}/process-instances/${processInstance.id}`}
               data-qa="process-instance-show-link"
             >
               view
@@ -572,9 +551,10 @@ export default function ProcessModelShow() {
             a={targetUris.processInstanceActionPath}
             ability={ability}
           >
-            <Button onClick={processInstanceCreateAndRun} variant="primary">
+            <ProcessInstanceRun
-              Run
+              processModel={processModel}
-            </Button>
+              onSuccessCallback={setProcessInstance}
+            />
           </Can>
           <Can I="PUT" a={targetUris.processModelShowPath} ability={ability}>
             <Button