added tabs to find by id page and install pre commit libraries if they fail to run help w/ burnettk

bin/run_pyl

@@ -38,12 +38,19 @@ function run_fix_docstrings() {
 }
 
 function run_autoflake() {
-  if ! command -v autoflake8 >/dev/null ; then
+  # checking command -v autoflake8 is not good enough, since the asdf shim may be installed, which will make command -v succeed,
+  # but autoflake8 may not have been pip installed inside the correct version of python.
+  if ! autoflake8 --help >/dev/null ; then
     pip install autoflake8
     asdf reshim python
   fi
 
-  if ! command -v autopep8 >/dev/null ; then
+  if ! autoflake --help >/dev/null ; then
+    pip install autoflake
+    asdf reshim python
+  fi
+
+  if ! autopep8 --help >/dev/null ; then
     pip install autopep8
     asdf reshim python
   fi

spiffworkflow-frontend/src/components/ProcessInstanceListTabs.tsx

@@ -0,0 +1,63 @@
+// @ts-ignore
+import { Tabs, TabList, Tab } from '@carbon/react';
+import { Can } from '@casl/react';
+import { useNavigate } from 'react-router-dom';
+import { usePermissionFetcher } from '../hooks/PermissionService';
+import { useUriListForPermissions } from '../hooks/UriListForPermissions';
+import { PermissionsToCheck } from '../interfaces';
+
+type OwnProps = {
+  variant: string;
+};
+
+export default function ProcessInstanceListTabs({ variant }: OwnProps) {
+  const navigate = useNavigate();
+  const { targetUris } = useUriListForPermissions();
+  const permissionRequestData: PermissionsToCheck = {
+    [targetUris.processInstanceListPath]: ['GET'],
+  };
+  const { ability } = usePermissionFetcher(permissionRequestData);
+
+  let selectedTabIndex = 0;
+  if (variant === 'all') {
+    selectedTabIndex = 1;
+  } else if (variant === 'find-by-id') {
+    selectedTabIndex = 2;
+  }
+
+  return (
+    <Tabs selectedIndex={selectedTabIndex}>
+      <TabList aria-label="List of tabs">
+        <Tab
+          title="Only show process instances for the current user."
+          data-qa="process-instance-list-for-me"
+          onClick={() => {
+            navigate('/admin/process-instances/for-me');
+          }}
+        >
+          For Me
+        </Tab>
+        <Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>
+          <Tab
+            title="Show all process instances for all users."
+            data-qa="process-instance-list-all"
+            onClick={() => {
+              navigate('/admin/process-instances/all');
+            }}
+          >
+            All
+          </Tab>
+        </Can>
+        <Tab
+          title="Search for a process instance by id."
+          data-qa="process-instance-list-find-by-id"
+          onClick={() => {
+            navigate('/admin/process-instances/find-by-id');
+          }}
+        >
+          Find By Id
+        </Tab>
+      </TabList>
+    </Tabs>
+  );
+}

spiffworkflow-frontend/src/routes/ProcessInstanceFindById.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button, ButtonSet, Form, Stack, TextInput } from '@carbon/react';
 import { isInteger, modifyProcessIdentifierForPathParam } from '../helpers';
 import HttpService from '../services/HttpService';
+import ProcessInstanceListTabs from '../components/ProcessInstanceListTabs';
 import { ProcessInstance } from '../interfaces';
 
 export default function ProcessInstanceFindById() {
@@ -69,11 +70,15 @@ export default function ProcessInstanceFindById() {
   };
 
   return (
-    <Form onSubmit={handleFormSubmission}>
+    <>
-      <Stack gap={5}>
+      <ProcessInstanceListTabs variant="find-by-id" />
-        {formElements()}
+      <br />
-        {formButtons()}
+      <Form onSubmit={handleFormSubmission}>
-      </Stack>
+        <Stack gap={5}>
-    </Form>
+          {formElements()}
+          {formButtons()}
+        </Stack>
+      </Form>
+    </>
   );
 }

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -1,18 +1,13 @@
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
 import 'react-bootstrap-typeahead/css/Typeahead.css';
 import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
-// @ts-ignore
-import { Tabs, TabList, Tab } from '@carbon/react';
-import { Can } from '@casl/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import ProcessInstanceListTable from '../components/ProcessInstanceListTable';
 import { getProcessModelFullIdentifierFromSearchParams } from '../helpers';
-import { useUriListForPermissions } from '../hooks/UriListForPermissions';
+import ProcessInstanceListTabs from '../components/ProcessInstanceListTabs';
-import { PermissionsToCheck } from '../interfaces';
-import { usePermissionFetcher } from '../hooks/PermissionService';
 
 type OwnProps = {
   variant: string;
@@ -20,13 +15,6 @@ type OwnProps = {
 
 export default function ProcessInstanceList({ variant }: OwnProps) {
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-
-  const { targetUris } = useUriListForPermissions();
-  const permissionRequestData: PermissionsToCheck = {
-    [targetUris.processInstanceListPath]: ['GET'],
-  };
-  const { ability } = usePermissionFetcher(permissionRequestData);
 
   const processInstanceBreadcrumbElement = () => {
     const processModelFullIdentifier =
@@ -57,45 +45,9 @@ export default function ProcessInstanceList({ variant }: OwnProps) {
     return <h1>My Process Instances</h1>;
   };
 
-  let selectedTabIndex = 0;
-  if (variant === 'all') {
-    selectedTabIndex = 1;
-  }
   return (
     <>
-      <Tabs selectedIndex={selectedTabIndex}>
+      <ProcessInstanceListTabs variant={variant} />
-        <TabList aria-label="List of tabs">
-          <Tab
-            title="Only show process instances for the current user."
-            data-qa="process-instance-list-for-me"
-            onClick={() => {
-              navigate('/admin/process-instances/for-me');
-            }}
-          >
-            For Me
-          </Tab>
-          <Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>
-            <Tab
-              title="Show all process instances for all users."
-              data-qa="process-instance-list-all"
-              onClick={() => {
-                navigate('/admin/process-instances/all');
-              }}
-            >
-              All
-            </Tab>
-          </Can>
-          <Tab
-            title="Search for a process instance by id."
-            data-qa="process-instance-list-find-by-id"
-            onClick={() => {
-              navigate('/admin/process-instances/find-by-id');
-            }}
-          >
-            Find By Id
-          </Tab>
-        </TabList>
-      </Tabs>
       <br />
       {processInstanceBreadcrumbElement()}
       {processInstanceTitleElement()}