some updates for process instance reports and metadata w/ burnettk

spiffworkflow-backend/src/spiffworkflow_backend/services/process_instance_report_service.py

@@ -76,17 +76,7 @@ class ProcessInstanceReportService:
         # TODO replace with system reports that are loaded on launch (or similar)
         temp_system_metadata_map = {
             "default": {
-                "columns": [
+                "columns": cls.builtin_column_options()
-                    {"Header": "id", "accessor": "id"},
-                    {
-                        "Header": "process_model_display_name",
-                        "accessor": "process_model_display_name",
-                    },
-                    {"Header": "start_in_seconds", "accessor": "start_in_seconds"},
-                    {"Header": "end_in_seconds", "accessor": "end_in_seconds"},
-                    {"Header": "username", "accessor": "username"},
-                    {"Header": "status", "accessor": "status"},
-                ],
             },
             "system_report_instances_initiated_by_me": {
                 "columns": [
@@ -102,33 +92,13 @@ class ProcessInstanceReportService:
                 "filter_by": [{"field_name": "initiated_by_me", "field_value": True}],
             },
             "system_report_instances_with_tasks_completed_by_me": {
-                "columns": [
+                "columns": cls.builtin_column_options(),
-                    {"Header": "id", "accessor": "id"},
-                    {
-                        "Header": "process_model_display_name",
-                        "accessor": "process_model_display_name",
-                    },
-                    {"Header": "start_in_seconds", "accessor": "start_in_seconds"},
-                    {"Header": "end_in_seconds", "accessor": "end_in_seconds"},
-                    {"Header": "username", "accessor": "username"},
-                    {"Header": "status", "accessor": "status"},
-                ],
                 "filter_by": [
                     {"field_name": "with_tasks_completed_by_me", "field_value": True}
                 ],
             },
             "system_report_instances_with_tasks_completed_by_my_groups": {
-                "columns": [
+                "columns": cls.builtin_column_options(),
-                    {"Header": "id", "accessor": "id"},
-                    {
-                        "Header": "process_model_display_name",
-                        "accessor": "process_model_display_name",
-                    },
-                    {"Header": "start_in_seconds", "accessor": "start_in_seconds"},
-                    {"Header": "end_in_seconds", "accessor": "end_in_seconds"},
-                    {"Header": "username", "accessor": "username"},
-                    {"Header": "status", "accessor": "status"},
-                ],
                 "filter_by": [
                     {
                         "field_name": "with_tasks_completed_by_my_group",
@@ -273,13 +243,13 @@ class ProcessInstanceReportService:
     def builtin_column_options(cls) -> list[dict]:
         """Builtin_column_options."""
         return [
-            {"Header": "id", "accessor": "id"},
+            {"Header": "Id", "accessor": "id"},
             {
-                "Header": "process_model_display_name",
+                "Header": "Process",
                 "accessor": "process_model_display_name",
             },
-            {"Header": "start_in_seconds", "accessor": "start_in_seconds"},
+            {"Header": "Start", "accessor": "start_in_seconds"},
-            {"Header": "end_in_seconds", "accessor": "end_in_seconds"},
+            {"Header": "End", "accessor": "end_in_seconds"},
-            {"Header": "username", "accessor": "username"},
+            {"Header": "Username", "accessor": "username"},
-            {"Header": "status", "accessor": "status"},
+            {"Header": "Status", "accessor": "status"},
         ]

spiffworkflow-frontend/src/components/ProcessGroupForm.tsx

@@ -115,7 +115,6 @@ export default function ProcessGroupForm({
         labelText="Display Name*"
         value={processGroup.display_name}
         onChange={(event: any) => onDisplayNameChanged(event.target.value)}
-        onBlur={(event: any) => console.log('event', event)}
       />,
     ];
 

spiffworkflow-frontend/src/components/ProcessInstanceListSaveAsReport.tsx

@@ -1,12 +1,11 @@
 import { useState } from 'react';
-// TODO: carbon controls
-/*
 import {
   Button,
-  Textbox,
+  TextInput,
+  Form,
+  Stack,
   // @ts-ignore
 } from '@carbon/react';
-*/
 import { ProcessModel } from '../interfaces';
 import HttpService from '../services/HttpService';
 
@@ -112,20 +111,21 @@ export default function ProcessInstanceListSaveAsReport({
   };
 
   return (
-    <form onSubmit={addProcessInstanceReport}>
+    <Form onSubmit={addProcessInstanceReport}>
-      <label htmlFor="identifier">
+      <Stack gap={5} orientation="horizontal">
-        identifier:
+        <TextInput
-        <input
-          name="identifier"
           id="identifier"
-          type="text"
+          name="identifier"
+          labelText="Identifier"
+          className="no-wrap"
+          inline
           value={identifier}
-          onChange={(e) => setIdentifier(e.target.value)}
+          onChange={(e: any) => setIdentifier(e.target.value)}
         />
-      </label>
+        <Button disabled={!hasIdentifier()} size="sm">
-      <button disabled={!hasIdentifier()} type="submit">
           {buttonText}
-      </button>
+        </Button>
-    </form>
+      </Stack>
+    </Form>
   );
 }

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 
 // @ts-ignore
-import { Filter } from '@carbon/icons-react';
+import { Filter, Close } from '@carbon/icons-react';
 import {
   Button,
   ButtonSet,
@@ -21,6 +21,7 @@ import {
   TableHead,
   TableRow,
   TimePicker,
+  Tag,
   // @ts-ignore
 } from '@carbon/react';
 import { PROCESS_STATUSES, DATE_FORMAT, DATE_FORMAT_CARBON } from '../config';
@@ -49,6 +50,7 @@ import {
   ProcessModel,
   ProcessInstanceReport,
   ProcessInstance,
+  ReportColumn,
 } from '../interfaces';
 import ProcessModelSearch from './ProcessModelSearch';
 import ProcessInstanceReportSearch from './ProcessInstanceReportSearch';
@@ -127,6 +129,10 @@ export default function ProcessInstanceListTable({
   const [processInstanceReportSelection, setProcessInstanceReportSelection] =
     useState<ProcessInstanceReport | null>(null);
 
+  const [availableReportColumns, setAvailableReportColumns] = useState<
+    ReportColumn[]
+  >([]);
+
   const dateParametersToAlwaysFilterBy: dateParameters = useMemo(() => {
     return {
       start_from: [setStartFromDate, setStartFromTime],
@@ -554,12 +560,99 @@ export default function ProcessInstanceListTable({
     setEndToTime('');
   };
 
+  const processInstanceReportDidChange = (selection: any) => {
+    clearFilters();
+
+    const selectedReport = selection.selectedItem;
+    setProcessInstanceReportSelection(selectedReport);
+
+    const queryParamString = selectedReport
+      ? `&report_identifier=${selectedReport.id}`
+      : '';
+
+    setErrorMessage(null);
+    navigate(`/admin/process-instances?${queryParamString}`);
+  };
+
+  const reportColumns = () => {
+    return (reportMetadata as any).columns;
+  };
+
+  const saveAsReportComponent = () => {
+    // TODO onSuccess reload/select the new report in the report search
+    const callback = (identifier: string) => {
+      processInstanceReportDidChange({
+        selectedItem: { id: identifier, display_name: identifier },
+      });
+    };
+    const {
+      valid,
+      startFromSeconds,
+      startToSeconds,
+      endFromSeconds,
+      endToSeconds,
+    } = calculateStartAndEndSeconds();
+
+    if (!valid) {
+      return null;
+    }
+    return (
+      <ProcessInstanceListSaveAsReport
+        onSuccess={callback}
+        columnArray={reportColumns()}
+        orderBy=""
+        processModelSelection={processModelSelection}
+        processStatusSelection={processStatusSelection}
+        startFromSeconds={startFromSeconds}
+        startToSeconds={startToSeconds}
+        endFromSeconds={endFromSeconds}
+        endToSeconds={endToSeconds}
+      />
+    );
+  };
+
+  const columnSelections = () => {
+    if (reportColumns()) {
+      const tags: any = [];
+
+      (reportColumns() as any).forEach((reportColumn: ReportColumn) => {
+        tags.push(
+          <Tag type="cool-gray" size="sm" title={reportColumn.accessor}>
+            <Button
+              kind="ghost"
+              size="sm"
+              className="button-tag-icon"
+              title="Edit Header"
+            >
+              {reportColumn.Header}
+            </Button>
+            <Button
+              data-qa="remove-report-column"
+              renderIcon={Close}
+              iconDescription="Remove Column"
+              className="button-tag-icon"
+              hasIconOnly
+              size="sm"
+              kind="ghost"
+              onClick={toggleShowFilterOptions}
+            />
+          </Tag>
+        );
+      });
+      return tags;
+    }
+    return null;
+  };
+
   const filterOptions = () => {
     if (!showFilterOptions) {
       return null;
     }
     return (
       <>
+        <Grid fullWidth className="with-bottom-margin">
+          <Column md={8}>{columnSelections()}</Column>
+        </Grid>
         <Grid fullWidth className="with-bottom-margin">
           <Column md={8}>
             <ProcessModelSearch
@@ -642,14 +735,15 @@ export default function ProcessInstanceListTable({
             </ButtonSet>
           </Column>
         </Grid>
+        <Grid fullWidth className="with-bottom-margin">
+          <Column md={7} lg={13} sm={3}>
+            {saveAsReportComponent()}
+          </Column>
+        </Grid>
       </>
     );
   };
 
-  const reportColumns = () => {
-    return (reportMetadata as any).columns;
-  };
-
   const buildTable = () => {
     const headerLabels: Record<string, string> = {
       id: 'Id',
@@ -749,20 +843,10 @@ export default function ProcessInstanceListTable({
 
   const toggleShowFilterOptions = () => {
     setShowFilterOptions(!showFilterOptions);
-  };
+    HttpService.makeCallToBackend({
-
+      path: `/process-instances/reports/columns`,
-  const processInstanceReportDidChange = (selection: any) => {
+      successCallback: setAvailableReportColumns,
-    clearFilters();
+    });
-
-    const selectedReport = selection.selectedItem;
-    setProcessInstanceReportSelection(selectedReport);
-
-    const queryParamString = selectedReport
-      ? `&report_identifier=${selectedReport.id}`
-      : '';
-
-    setErrorMessage(null);
-    navigate(`/admin/process-instances?${queryParamString}`);
   };
 
   const reportSearchComponent = () => {
@@ -777,39 +861,6 @@ export default function ProcessInstanceListTable({
     return null;
   };
 
-  const saveAsReportComponent = () => {
-    // TODO onSuccess reload/select the new report in the report search
-    const callback = (identifier: string) => {
-      processInstanceReportDidChange({
-        selectedItem: { id: identifier, display_name: identifier },
-      });
-    };
-    const {
-      valid,
-      startFromSeconds,
-      startToSeconds,
-      endFromSeconds,
-      endToSeconds,
-    } = calculateStartAndEndSeconds();
-
-    if (!valid) {
-      return null;
-    }
-    return (
-      <ProcessInstanceListSaveAsReport
-        onSuccess={callback}
-        columnArray={reportColumns()}
-        orderBy=""
-        processModelSelection={processModelSelection}
-        processStatusSelection={processStatusSelection}
-        startFromSeconds={startFromSeconds}
-        startToSeconds={startToSeconds}
-        endFromSeconds={endFromSeconds}
-        endToSeconds={endToSeconds}
-      />
-    );
-  };
-
   const filterComponent = () => {
     if (!filtersEnabled) {
       return null;
@@ -834,7 +885,6 @@ export default function ProcessInstanceListTable({
           </Column>
         </Grid>
         {filterOptions()}
-        {saveAsReportComponent()}
       </>
     );
   };

spiffworkflow-frontend/src/index.css

@@ -316,10 +316,21 @@ td.actions-cell {
   padding-bottom: 10px;
 }
 
-.cds--btn--ghost:not([disabled]) svg {
+.cds--btn--ghost:not([disabled]) svg.red-icon {
   fill: red;
 }
 
 .failure-string {
   color: red;
 }
+
+.cds--btn--ghost.cds--btn--sm.button-tag-icon {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+}
+
+/* .no-wrap cds--label cds--label--inline cds--label--inline--md{ */
+.no-wrap .cds--label--inline{
+  word-break: normal;
+}

spiffworkflow-frontend/src/interfaces.ts

@@ -152,3 +152,8 @@ export interface FormField {
   type: string;
   enum: string[];
 }
+
+export interface ReportColumn {
+  Header: string;
+  accessor: string;
+}