finished adding at test for date ranges and moved some common stuff to configs for use in tests as well w/ burnettk

cypress.config.js

@@ -4,7 +4,7 @@ module.exports = defineConfig({
   projectId: "crax1q",
   e2e: {
     baseUrl: "http://localhost:7001",
-    setupNodeEvents(on, config) {
+    setupNodeEvents(_on, _config) {
       // implement node event listeners here
     },
   },

cypress/e2e/process_instances.cy.js

@@ -1,3 +1,6 @@
+import { DATE_FORMAT, PROCESS_STATUSES } from '../../src/config';
+import { format } from 'date-fns';
+
 describe('process-instances', () => {
   beforeEach(() => {
     cy.visit('/');
@@ -83,22 +86,58 @@ describe('process-instances', () => {
   it.only('can filter', () => {
     cy.contains('Process Instances').click();
     assertAtLeastOneItemInPaginatedResults();
+
+    for (const processStatus of PROCESS_STATUSES) {
+      if (processStatus === "all"){
+        continue;
+      }
+      cy.getBySel("process-status-dropdown")
+        .type("typing_to_open_dropdown_box....FIXME")
+        .find('.dropdown-item')
+        .contains(new RegExp(`^${processStatus}$`))
+        .click();
+      cy.contains('Filter').click();
+      assertAtLeastOneItemInPaginatedResults();
+      cy.getBySel("process-instance-status").first().contains(processStatus);
+    }
     cy.getBySel("process-status-dropdown")
       .type("typing_to_open_dropdown_box....FIXME")
       .find('.dropdown-item')
-      .contains(/^waiting$/)
+      .contains("all")
       .click();
-    cy.contains('Filter').click();
+
+    let date = new Date();
+    date.setHours(date.getHours() - 1);
+    filterByDate(date);
+    assertAtLeastOneItemInPaginatedResults();
+    cy.getBySel("process-instance-status").contains("not_started");
+
+    date.setHours(date.getHours() + 2);
+    filterByDate(date);
+    assertNoItemInPaginatedResults();
+    cy.getBySel("process-instance-status").should('not.exist');
   });
 })
 
+const filterByDate = ((fromDate) => {
+  cy.get("#date-picker-start-from").clear().type(format(fromDate, DATE_FORMAT));
+  cy.contains('Start Range').click();
+  cy.get("#date-picker-end-from").clear().type(format(fromDate, DATE_FORMAT));
+  cy.contains('Start Range').click();
+  cy.contains('Filter').click();
+});
+
 const assertAtLeastOneItemInPaginatedResults = (() => {
-  cy.get('[data-qa="total-paginated-items"')
+  cy.getBySel('total-paginated-items')
     .invoke('text')
     .then(parseFloat)
     .should('be.gt', 0)
 });
 
+const assertNoItemInPaginatedResults = (() => {
+  cy.getBySel('total-paginated-items').contains('0')
+});
+
 const updateDmnText = ((oldText, newText, elementId="wonderful_process") => {
   // this will break if there are more elements added to the drd
   cy.get(`g[data-element-id=${elementId}]`).click().should('exist');

package-lock.json

@@ -21,6 +21,7 @@
         "bpmn-js-properties-panel": "^1.1.1",
         "bpmn-js-spiffworkflow": "^0.0.3",
         "craco": "^0.0.3",
+        "date-fns": "^2.28.0",
         "dmn-js": "^12.1.1",
         "dmn-js-properties-panel": "^1.0.0",
         "dmn-js-shared": "^12.1.1",

package.json

@@ -16,6 +16,7 @@
     "bpmn-js-properties-panel": "^1.1.1",
     "bpmn-js-spiffworkflow": "^0.0.3",
     "craco": "^0.0.3",
+    "date-fns": "^2.28.0",
     "dmn-js": "^12.1.1",
     "dmn-js-properties-panel": "^1.0.0",
     "dmn-js-shared": "^12.1.1",

src/config.js

@@ -9,3 +9,15 @@ export const STANDARD_HEADERS = {
   'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
   })
 }
+
+export const PROCESS_STATUSES = [
+  "all",
+  "not_started",
+  "user_input_required",
+  "waiting",
+  "complete",
+  "faulted",
+  "suspended",
+]
+
+export const DATE_FORMAT = "yyyy-MM-dd HH:mm:ss"

src/helpers.js

@@ -9,6 +9,10 @@ export const slugifyString = ((str) => {
 });
 
 export const convertDateToSeconds = ((date, onChangeFunction) => {
+  if (date === null) {
+    return;
+  }
+
   let dateInMilliseconds = date;
   if (typeof(date.getTime) === "function") {
     dateInMilliseconds = date.getTime();

src/routes/ProcessInstanceList.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
 
-import { BACKEND_BASE_URL } from '../config';
+import { BACKEND_BASE_URL, PROCESS_STATUSES, DATE_FORMAT } from '../config';
 import { HOT_AUTH_TOKEN } from '../config';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import { Button, Table, Stack, Dropdown }  from 'react-bootstrap';
@@ -10,6 +10,7 @@ import { convertDateToSeconds } from "../helpers";
 
 import PaginationForTable, { DEFAULT_PER_PAGE, DEFAULT_PAGE } from '../components/PaginationForTable'
 import "react-datepicker/dist/react-datepicker.css";
+import { format } from "date-fns";
 
 export default function ProcessInstanceList() {
   const params = useParams();
@@ -26,14 +27,6 @@ export default function ProcessInstanceList() {
   const [endFrom, setEndFrom] = useState(convertDateToSeconds(new Date()) - oneMonthInSeconds);
   const [endTill, setEndTill] = useState(convertDateToSeconds(new Date()) + oneHourInSeconds);
 
-  const PROCESS_STATUSES = [
-    "all",
-    "not_started",
-    "user_input_required",
-    "waiting",
-    "complete",
-    "erroring",
-  ]
   const [processStatus, setProcessStatus] = useState(PROCESS_STATUSES[0]);
   const parametersToAlwaysFilterBy = useMemo(() => {
     return {
@@ -117,15 +110,16 @@ export default function ProcessInstanceList() {
     navigate(`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances?${queryParamString}`)
   });
 
-  const dateComponent = ((labelString, initialDate, onChangeFunction) => {
+  const dateComponent = ((labelString, name, initialDate, onChangeFunction) => {
     return (
       <Stack className="ms-auto" direction="horizontal" gap={3}>
         <label className="text-nowrap">{labelString}</label>
         <DatePicker
+          id={`date-picker-${name}`}
           selected={new Date(initialDate * 1000)}
           onChange={(date) => convertDateToSeconds(date, onChangeFunction)}
           showTimeSelect
-          dateFormat="MMMM d, yyyy h:mm aa"
+          dateFormat={DATE_FORMAT}
         />
       </Stack>
     )
@@ -157,13 +151,13 @@ export default function ProcessInstanceList() {
           <div className="col">
             <form onSubmit={handleFilter}>
               <Stack direction="horizontal" gap={3}>
-                {dateComponent("Start Range: ", startFrom, setStartFrom)}
-                {dateComponent("-", startTill, setStartTill)}
+                {dateComponent("Start Range: ", "start-from", startFrom, setStartFrom)}
+                {dateComponent("-", "start-till", startTill, setStartTill)}
               </Stack>
               <br />
               <Stack direction="horizontal" gap={3}>
-                {dateComponent("End Range: ", endFrom, setEndFrom)}
-                {dateComponent("-", endTill, setEndTill)}
+                {dateComponent("End Range: ", "end-from", endFrom, setEndFrom)}
+                {dateComponent("-", "end-till", endTill, setEndTill)}
               </Stack>
               <br />
               <Stack direction="horizontal" gap={3}>
@@ -204,8 +198,8 @@ export default function ProcessInstanceList() {
           </td>
           <td>{row.process_model_identifier}</td>
           <td>{row.process_group_id}</td>
-          <td>{start_date.toString()}</td>
-          <td>{end_date.toString()}</td>
+          <td>{format(start_date, DATE_FORMAT)}</td>
+          <td>{format(end_date, DATE_FORMAT)}</td>
           <td data-qa="process-instance-status">{row.status}</td>
           </tr>
         )