use a black background for the view filterable table button and fixed process model show instances table w/ burnettk

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -85,7 +85,6 @@ import Filters from './Filters';
 
 type OwnProps = {
   filtersEnabled?: boolean;
-  processModelFullIdentifier?: string;
   paginationQueryParamPrefix?: string;
   perPageOptions?: number[];
   showReports?: boolean;
@@ -107,7 +106,6 @@ interface dateParameters {
 
 export default function ProcessInstanceListTable({
   filtersEnabled = true,
-  processModelFullIdentifier,
   paginationQueryParamPrefix,
   perPageOptions,
   additionalReportFilters,
@@ -341,7 +339,6 @@ export default function ProcessInstanceListTable({
       // this is the code to re-populate the widgets on the page
       // with values from the report metadata, which is derived
       // from the searchParams (often report_hash)
-      let selectedProcessModelIdentifier = processModelFullIdentifier;
       reportMetadataBodyToUse.filter_by.forEach(
         (reportFilter: ReportFilter) => {
           if (reportFilter.field_name === 'process_status') {
@@ -357,8 +354,15 @@ export default function ProcessInstanceListTable({
           } else if (systemReportOptions.includes(reportFilter.field_name)) {
             setSystemReport(reportFilter.field_name);
           } else if (reportFilter.field_name === 'process_model_identifier') {
-            selectedProcessModelIdentifier =
+            if (reportFilter.field_value) {
-              reportFilter.field_value || undefined;
+              processModelSelectionItemsForUseEffect.current.forEach(
+                (processModel: ProcessModel) => {
+                  if (processModel.id === reportFilter.field_value) {
+                    setProcessModelSelection(processModel);
+                  }
+                }
+              );
+            }
           } else if (dateParametersToAlwaysFilterBy[reportFilter.field_name]) {
             const dateFunctionToCall =
               dateParametersToAlwaysFilterBy[reportFilter.field_name][0];
@@ -377,13 +381,6 @@ export default function ProcessInstanceListTable({
           }
         }
       );
-      processModelSelectionItemsForUseEffect.current.forEach(
-        (processModel: ProcessModel) => {
-          if (processModel.id === selectedProcessModelIdentifier) {
-            setProcessModelSelection(processModel);
-          }
-        }
-      );
 
       if (reportMetadataBodyToUse.filter_by.length > 1) {
         setShowFilterOptions(true);
@@ -435,7 +432,6 @@ export default function ProcessInstanceListTable({
       paginationQueryParamPrefix,
       perPageOptions,
       processInstanceApiSearchPath,
-      processModelFullIdentifier,
       searchParams,
       setProcessInstancesFromResult,
       stopRefreshing,
@@ -1682,7 +1678,7 @@ export default function ProcessInstanceListTable({
       return null;
     }
     let filterButtonLink = null;
-    if (showLinkToReport) {
+    if (showLinkToReport && processInstances.length > 0) {
       filterButtonLink = (
         <Column
           sm={{ span: 1, offset: 3 }}
@@ -1691,7 +1687,6 @@ export default function ProcessInstanceListTable({
         >
           <Button
             data-qa="process-instance-list-link"
-            kind="ghost"
             renderIcon={ArrowRight}
             iconDescription="View Filterable List"
             hasIconOnly

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -561,38 +561,6 @@ export default function ProcessModelShow() {
     );
   };
 
-  const processInstanceListTableButton = () => {
-    if (processModel) {
-      return (
-        <Grid fullWidth condensed>
-          <Column sm={{ span: 3 }} md={{ span: 4 }} lg={{ span: 3 }}>
-            <h2>My Process Instances</h2>
-          </Column>
-          <Column
-            sm={{ span: 1, offset: 3 }}
-            md={{ span: 1, offset: 7 }}
-            lg={{ span: 1, offset: 15 }}
-          >
-            <Button
-              data-qa="process-instance-list-link"
-              kind="ghost"
-              renderIcon={ArrowRight}
-              iconDescription="Go to Filterable List"
-              hasIconOnly
-              size="lg"
-              onClick={() =>
-                navigate(
-                  `/admin/process-instances?process_model_identifier=${processModel.id}`
-                )
-              }
-            />
-          </Column>
-        </Grid>
-      );
-    }
-    return null;
-  };
-
   const processModelPublishMessage = () => {
     if (processModelPublished) {
       const prUrl: string = processModelPublished.pr_url;
@@ -683,11 +651,17 @@ export default function ProcessModelShow() {
         </Stack>
         {processModelFilesSection()}
         <Can I="GET" a={targetUris.processInstanceListPath} ability={ability}>
-          {processInstanceListTableButton()}
           <ProcessInstanceListTable
+            headerElement={<h2>My Process Instances</h2>}
             filtersEnabled={false}
+            showLinkToReport
             variant="for-me"
-            processModelFullIdentifier={processModel.id}
+            additionalReportFilters={[
+              {
+                field_name: 'process_model_identifier',
+                field_value: processModel.id,
+              },
+            ]}
             perPageOptions={[2, 5, 25]}
             showReports={false}
           />