Save as report component

spiffworkflow-frontend/src/components/ProcessInstanceListSaveAsReport.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+// TODO: carbon controls
+/*
+import {
+  Button,
+  Textbox,
+  // @ts-ignore
+} from '@carbon/react';
+*/
+import HttpService from '../services/HttpService';
+
+type OwnProps = {
+  onSuccess: (..._args: any[]) => any;
+  columns: string;
+  orderBy: string;
+  filterBy: string;
+  buttonText?: string;
+};
+
+export default function ProcessInstanceListSaveAsReport({
+  onSuccess,
+  columns,
+  orderBy,
+  filterBy,
+  buttonText = 'Save as New Perspective',
+}: OwnProps) {
+  const [identifier, setIdentifier] = useState('');
+
+  const hasIdentifier = () => {
+    return identifier?.length > 0;
+  };
+
+  const addProcessInstanceReport = (event: any) => {
+    event.preventDefault();
+
+    const columnArray = columns.split(',').map((column) => {
+      return { Header: column, accessor: column };
+    });
+    const orderByArray = orderBy.split(',').filter((n) => n);
+
+    const filterByArray = filterBy
+      .split(',')
+      .map((filterByItem) => {
+        const [fieldName, fieldValue] = filterByItem.split('=');
+        if (fieldValue) {
+          return {
+            field_name: fieldName,
+            operator: 'equals',
+            field_value: fieldValue,
+          };
+        }
+        return null;
+      })
+      .filter((n) => n);
+
+    HttpService.makeCallToBackend({
+      path: `/process-instances/reports`,
+      successCallback: onSuccess,
+      httpMethod: 'POST',
+      postBody: {
+        identifier,
+        report_metadata: {
+          columns: columnArray,
+          order_by: orderByArray,
+          filter_by: filterByArray,
+        },
+      },
+    });
+  };
+
+  return (
+    <form onSubmit={addProcessInstanceReport}>
+      <label htmlFor="identifier">
+        identifier:
+        <input
+          name="identifier"
+          id="identifier"
+          type="text"
+          value={identifier}
+          onChange={(e) => setIdentifier(e.target.value)}
+        />
+      </label>
+      <button disabled={!hasIdentifier()} type="submit">{buttonText}</button>
+    </form>
+  );
+}

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -52,6 +52,7 @@ import {
 } from '../interfaces';
 import ProcessModelSearch from './ProcessModelSearch';
 import ProcessInstanceReportSearch from './ProcessInstanceReportSearch';
+import ProcessInstanceListSaveAsReport from './ProcessInstanceListSaveAsReport';
 
 const REFRESH_INTERVAL = 5;
 const REFRESH_TIMEOUT = 600;
@@ -764,6 +765,18 @@ export default function ProcessInstanceListTable({
     return null;
   };
 
+  const saveAsReportComponent = () => {
+    const callback = (_: any) => {};
+    return (
+      <ProcessInstanceListSaveAsReport
+        onSuccess={callback}
+        columns=""
+        orderBy=""
+        filterBy=""
+      />
+    );
+  };
+
   const filterComponent = () => {
     if (!filtersEnabled) {
       return null;
@@ -788,6 +801,7 @@ export default function ProcessInstanceListTable({
           </Column>
         </Grid>
         {filterOptions()}
+        {saveAsReportComponent()}
       </>
     );
   };