@pega/sdk 0.0.2 → 0.0.4

package/templates/react-sdk-reference/src/components/template/ListView/ListView.tsx

@@ -91,7 +91,7 @@ export default function ListView(props: ListViewProps) {
     readonlyContextList: selectedValues,
     value,
     displayAs,
-    localeReference
+    localeReference,
   } = props;
   let { showRecords } = props;
   const ref = useRef({}).current;
@@ -106,7 +106,7 @@ export default function ListView(props: ListViewProps) {
     setListContext,
     ref,
     showDynamicFields,
-    cosmosTableRef
+    cosmosTableRef,
   });
 
   useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName });
@@ -156,7 +156,7 @@ export default function ListView(props: ListViewProps) {
   const useStyles = makeStyles((theme: Theme) =>
     createStyles({
       root: {
-        width: '100%'
+        width: '100%',
       },
       paper: {
         width: '100%',
@@ -164,24 +164,24 @@ export default function ListView(props: ListViewProps) {
         marginBottom: theme.spacing(2),
         display: 'grid',
         borderRadius: 16,
-        padding: 20
+        padding: 20,
       },
       table: {
-        minWidth: 750
+        minWidth: 750,
       },
       tableInForm: {
         minWidth: 750,
         maxHeight: 550,
-        overflow: 'auto'
+        overflow: 'auto',
       },
       moreIcon: {
-        verticalAlign: 'bottom'
+        verticalAlign: 'bottom',
       },
       filteredIcon: {
-        verticalAlign: 'bottom'
+        verticalAlign: 'bottom',
       },
       cell: {
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
       },
       visuallyHidden: {
         border: 0,
@@ -192,9 +192,9 @@ export default function ListView(props: ListViewProps) {
         padding: 0,
         position: 'absolute',
         top: 20,
-        width: 1
-      }
-    })
+        width: 1,
+      },
+    }),
   );
 
   const classes = useStyles();
@@ -218,7 +218,7 @@ export default function ListView(props: ListViewProps) {
           }
         }
       },
-      [getPConnect, viewName]
+      [getPConnect, viewName],
     );
 
     useEffect(() => {
@@ -259,7 +259,9 @@ export default function ListView(props: ListViewProps) {
   }
 
   function getComparator<T, Key extends keyof T>(theOrder: Order, orderedBy: Key): Comparator<T> {
-    return theOrder === 'desc' ? (a: T, b: T) => descendingComparator(a, b, orderedBy) : (a: T, b: T) => -descendingComparator(a, b, orderedBy);
+    return theOrder === 'desc'
+      ? (a: T, b: T) => descendingComparator(a, b, orderedBy)
+      : (a: T, b: T) => -descendingComparator(a, b, orderedBy);
   }
 
   function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
@@ -269,7 +271,7 @@ export default function ListView(props: ListViewProps) {
       if (order !== 0) return order;
       return a[1] - b[1];
     });
-    return stabilizedThis.map(el => el[0]);
+    return stabilizedThis.map((el) => el[0]);
   }
 
   const [page, setPage] = useState(0);
@@ -291,7 +293,7 @@ export default function ListView(props: ListViewProps) {
       if (theField.indexOf('.') === 0) {
         theField = theField.substring(1);
       }
-      const colIndex = fields.findIndex(ele => ele.name === theField);
+      const colIndex = fields.findIndex((ele) => ele.name === theField);
       // const displayAsLink = field.config.displayAsLink;
       const { additionalDetails = {} } = field.config;
       let shouldDisplayAsSemanticLink = additionalDetails.type === 'DISPLAY_LINK';
@@ -303,7 +305,12 @@ export default function ListView(props: ListViewProps) {
       headerRow.id = fields[index].id;
       headerRow.type = field.type;
       headerRow.displayAsLink = shouldDisplayAsSemanticLink;
-      headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
+      headerRow.numeric =
+        field.type === 'Decimal' ||
+        field.type === 'Integer' ||
+        field.type === 'Percentage' ||
+        field.type === 'Currency' ||
+        false;
       headerRow.disablePadding = false;
       headerRow.label = fields[index].label;
       if (colIndex > -1) {
@@ -351,8 +358,8 @@ export default function ListView(props: ListViewProps) {
     let dashboardFilterPayload: any = {
       query: {
         filter: {},
-        select: []
-      }
+        select: [],
+      },
     };
     if (displayAs === 'advancedSearch') {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -368,9 +375,9 @@ export default function ListView(props: ListViewProps) {
       field = getFieldFromFilter(filterExpression, isDateRange);
       selectParam = [];
       // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-      columnList.current.forEach(col => {
+      columnList.current.forEach((col) => {
         selectParam.push({
-          field: col
+          field: col,
         });
       });
 
@@ -410,7 +417,7 @@ export default function ListView(props: ListViewProps) {
         dashboardFilterPayload.query.filter.filterConditions = {
           ...dashboardFilterPayload.query.filter.filterConditions,
           [`T${index++}`]: { ...filter[relationalOp][0].condition },
-          [`T${index++}`]: { ...filter[relationalOp][1].condition }
+          [`T${index++}`]: { ...filter[relationalOp][1].condition },
         };
         if (dashboardFilterPayload.query.filter.logic) {
           dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} (T${
@@ -424,7 +431,10 @@ export default function ListView(props: ListViewProps) {
       } else {
         dashboardFilterPayload.query.filter.filterConditions = {
           ...dashboardFilterPayload.query.filter.filterConditions,
-          [`T${index++}`]: { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}) }
+          [`T${index++}`]: {
+            ...filter.condition,
+            ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}),
+          },
         };
 
         if (dashboardFilterPayload.query.filter.logic) {
@@ -462,7 +472,7 @@ export default function ListView(props: ListViewProps) {
       if (filterPayload.current) {
         query = {
           select: fields,
-          filter: filterPayload.current?.query?.filter
+          filter: filterPayload.current?.query?.filter,
         };
       } else {
         query = { select: fields };
@@ -476,7 +486,13 @@ export default function ListView(props: ListViewProps) {
       ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
         PCore.getDataApiUtils().getData(referenceList, payload)
       : // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'object'
-        PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+        PCore.getDataPageUtils().getDataAsync(
+          referenceList,
+          context,
+          payload ? payload.dataViewParameters : dataViewParameters,
+          null,
+          query,
+        );
   }
 
   const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
@@ -484,31 +500,31 @@ export default function ListView(props: ListViewProps) {
     if (colId) {
       const field = getField(fieldDefs, colId);
       listFields.push({
-        field: field.name
+        field: field.name,
       });
     } else {
       // NOTE: If we ever decide to not set up all the `fieldDefs` on select, ensure that the fields
       //  corresponding to `state.groups` are set up. Needed in Client-mode grouping/pagination.
-      fieldDefs.forEach(field => {
-        if (!listFields.find(f => f.field === field.name)) {
+      fieldDefs.forEach((field) => {
+        if (!listFields.find((f) => f.field === field.name)) {
           listFields.push({
-            field: field.name
+            field: field.name,
           });
         }
       });
-      patchQueryFields.forEach(k => {
-        if (!listFields.find(f => f.field === k)) {
+      patchQueryFields.forEach((k) => {
+        if (!listFields.find((f) => f.field === k)) {
           listFields.push({
-            field: k
+            field: k,
           });
         }
       });
     }
 
-    compositeKeys.forEach(k => {
-      if (!listFields.find(f => f.field === k)) {
+    compositeKeys.forEach((k) => {
+      if (!listFields.find((f) => f.field === k)) {
         listFields.push({
-          field: k
+          field: k,
         });
       }
     });
@@ -523,13 +539,13 @@ export default function ListView(props: ListViewProps) {
       !elementFound &&
       Array.isArray(select) &&
       !(compositeKeys !== null && compositeKeys?.length) &&
-      !select.find(sel => sel.field === itemKey)
+      !select.find((sel) => sel.field === itemKey)
     ) {
       return [
         ...select,
         {
-          field: itemKey
-        }
+          field: itemKey,
+        },
       ];
     }
 
@@ -541,9 +557,9 @@ export default function ListView(props: ListViewProps) {
     return fieldsMap.get(columnId);
   };
 
-  const getFieldsMap = fieldDefs => {
+  const getFieldsMap = (fieldDefs) => {
     const fieldsMap = new Map();
-    fieldDefs.forEach(element => {
+    fieldDefs.forEach((element) => {
       fieldsMap.set(element.id, element);
     });
     return fieldsMap;
@@ -565,16 +581,16 @@ export default function ListView(props: ListViewProps) {
 
     const selectParams: any = [];
 
-    myColumns.forEach(column => {
+    myColumns.forEach((column) => {
       column.label = PCore.getLocaleUtils().getLocaleValue(column.label, localeReference);
       selectParams.push({
-        field: column.id
+        field: column.id,
       });
     });
 
     const colList: any = [];
 
-    selectParams.forEach(col => {
+    selectParams.forEach((col) => {
       colList.push(col.field);
     });
 
@@ -597,7 +613,7 @@ export default function ListView(props: ListViewProps) {
       if (selectionMode === SELECTION_MODE.MULTI && selectedValues?.length > 0) {
         const readonlyIds = new Set<string>(selectedValues.map((element: any) => element[rowID]));
         const initialSet = new Set<string>();
-        myRows?.forEach(row => {
+        myRows?.forEach((row) => {
           if (readonlyIds.has(row[rowID])) {
             initialSet.add(row[rowID]);
           }
@@ -621,7 +637,7 @@ export default function ListView(props: ListViewProps) {
     return Object.entries(data.payload).reduce((acc, [field, value]) => {
       if (value) {
         let comparator = 'EQ';
-        const filterRecord = listContext.meta.fieldDefs.filter(item => item.id === field);
+        const filterRecord = listContext.meta.fieldDefs.filter((item) => item.id === field);
         if (filterRecord?.[0]?.meta.type === 'TextInput') {
           comparator = 'CONTAINS';
         }
@@ -629,15 +645,15 @@ export default function ListView(props: ListViewProps) {
           filterExpression: {
             condition: {
               lhs: {
-                field
+                field,
               },
               comparator,
               rhs: {
-                value
-              }
-            }
+                value,
+              },
+            },
           },
-          filterId: field
+          filterId: field,
         };
       }
       return acc;
@@ -651,12 +667,12 @@ export default function ListView(props: ListViewProps) {
       setTimeout(() => {
         PCore.getPubSubUtils().subscribe(
           PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
-          data => {
+          (data) => {
             processFilterChange(data);
           },
           `dashboard-component-${'id'}`,
           false,
-          getPConnect().getContextName()
+          getPConnect().getContextName(),
         );
         PCore.getPubSubUtils().subscribe(
           PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
@@ -666,16 +682,16 @@ export default function ListView(props: ListViewProps) {
           },
           `dashboard-component-${'id'}`,
           false,
-          getPConnect().getContextName()
+          getPConnect().getContextName(),
         );
         PCore.getPubSubUtils().subscribe(
           PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
-          data => {
+          (data) => {
             showRecords = data.showRecords;
             const filterData = prepareFilters(data);
             processFilterChange(filterData);
           },
-          identifier
+          identifier,
         );
       }, 0);
 
@@ -683,12 +699,12 @@ export default function ListView(props: ListViewProps) {
         PCore.getPubSubUtils().unsubscribe(
           PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
           `dashboard-component-${'id'}`,
-          getPConnect().getContextName()
+          getPConnect().getContextName(),
         );
         PCore.getPubSubUtils().unsubscribe(
           PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
           `dashboard-component-${'id'}`,
-          getPConnect().getContextName()
+          getPConnect().getContextName(),
         );
         PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, identifier);
       };
@@ -696,12 +712,12 @@ export default function ListView(props: ListViewProps) {
   }, [listContext]);
 
   function searchFilter(value: string, rows: any[]) {
-    const cols = arColumns.map(ele => {
+    const cols = arColumns.map((ele) => {
       return ele.id;
     });
 
     function filterArray(el: any): boolean {
-      return Object.keys(el).some(key => {
+      return Object.keys(el).some((key) => {
         // only search columns that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
         if (cols.includes(key)) {
           const myVal = el[key];
@@ -975,7 +991,7 @@ export default function ListView(props: ListViewProps) {
       if (column.isAssignmentLink) {
         thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
-          channelName: ''
+          channelName: '',
         });
       } else {
         thePConn.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
@@ -1019,9 +1035,9 @@ export default function ListView(props: ListViewProps) {
     const value = event.target.value;
     const reqObj = {};
     if (compositeKeys?.length > 1) {
-      const index = response.findIndex(element => element[rowID] === value);
+      const index = response.findIndex((element) => element[rowID] === value);
       const selectedRow = response[index];
-      compositeKeys.forEach(element => {
+      compositeKeys.forEach((element) => {
         reqObj[element] = selectedRow[element];
       });
     } else {
@@ -1035,9 +1051,9 @@ export default function ListView(props: ListViewProps) {
     const rowValue = row[rowID];
     const reqObj: any = {};
     if (compositeKeys?.length > 1) {
-      const index = response.findIndex(element => element[rowID] === rowValue);
+      const index = response.findIndex((element) => element[rowID] === rowValue);
       const selectedRow = response[index];
-      compositeKeys.forEach(element => {
+      compositeKeys.forEach((element) => {
         reqObj[element] = selectedRow[element];
       });
       reqObj.$selected = checked;
@@ -1078,9 +1094,9 @@ export default function ListView(props: ListViewProps) {
       getPConnect()?.getListActions()?.clearSelectedRows();
     }
     const newSet = new Set<string>();
-    arRows.forEach(row => newSet.add(row[rowID]));
+    arRows.forEach((row) => newSet.add(row[rowID]));
     setSelectedRowSet(newSet);
-    const requiredValues = arRows.map(row => getSelectedValue(row, true));
+    const requiredValues = arRows.map((row) => getSelectedValue(row, true));
     getPConnect()?.getListActions()?.setSelectedRows(requiredValues);
   };
 
@@ -1094,7 +1110,10 @@ export default function ListView(props: ListViewProps) {
       case 'Date':
       case 'DateTime':
         theDateFormatInfo = getDateFormatInfo();
-        theFormat = type === 'DateTime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;
+        theFormat =
+          type === 'DateTime'
+            ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a`
+            : theDateFormatInfo.dateFormatStringLong;
         val = format(value, column.type, { format: theFormat });
         break;
 
@@ -1113,12 +1132,12 @@ export default function ListView(props: ListViewProps) {
     <>
       {arColumns && arColumns.length > 0 && (
         <Paper className={classes.paper}>
-          <Grid container justifyContent='space-between'>
-            <Typography variant='h6' color='textPrimary' gutterBottom>
+          <Grid container justifyContent="space-between">
+            <Typography variant="h6" color="textPrimary" gutterBottom>
               {_listTitle()}
             </Typography>
             {globalSearch && (
-              <Grid container spacing={1} alignItems='flex-end'>
+              <Grid container spacing={1} alignItems="flex-end">
                 <Grid>
                   <SearchIcon />
                 </Grid>
@@ -1126,10 +1145,10 @@ export default function ListView(props: ListViewProps) {
                   <TextField
                     label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
                     fullWidth
-                    variant='outlined'
-                    placeholder=''
-                    size='small'
-                    id='search'
+                    variant="outlined"
+                    placeholder=""
+                    size="small"
+                    id="search"
                     onChange={_onSearch}
                   />
                 </Grid>
@@ -1137,13 +1156,17 @@ export default function ListView(props: ListViewProps) {
             )}
           </Grid>
           {!bInForm ? (
-            <TableContainer id='list-view' className={classes.tableInForm}>
-              <Table stickyHeader aria-label='sticky table'>
+            <TableContainer id="list-view" className={classes.tableInForm}>
+              <Table stickyHeader aria-label="sticky table">
                 <TableHead>
                   <TableRow>
-                    {arColumns.map(column => {
+                    {arColumns.map((column) => {
                       return (
-                        <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
+                        <TableCell
+                          className={classes.cell}
+                          key={column.id}
+                          sortDirection={orderBy === column.id ? order : false}
+                        >
                           <TableSortLabel
                             active={orderBy === column.id}
                             direction={orderBy === column.id ? order : 'asc'}
@@ -1152,12 +1175,14 @@ export default function ListView(props: ListViewProps) {
                             {column.label}
                             {_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
                             {orderBy === column.id ? (
-                              <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
+                              <span className={classes.visuallyHidden}>
+                                {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                              </span>
                             ) : null}
                           </TableSortLabel>
                           <MoreIcon
                             className={classes.moreIcon}
-                            onClick={event => {
+                            onClick={(event) => {
                               _menuClick(event, column.id, column.type, column.label);
                             }}
                           />
@@ -1170,25 +1195,29 @@ export default function ListView(props: ListViewProps) {
                   {arRows &&
                     stableSort(arRows, getComparator(order, orderBy))
                       .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map(row => {
+                      .map((row) => {
                         return (
                           <TableRow key={row.pxRefObjectInsName || row.pyID}>
-                            {arColumns.map(column => {
+                            {arColumns.map((column) => {
                               const value = row[column.id];
                               return (
                                 <TableCell key={column.id} align={column.align} className={classes.cell}>
                                   {_showButton(column.id, row) || column.displayAsLink ? (
                                     <Link
-                                      component='button'
+                                      component="button"
                                       onClick={() => {
                                         _listViewClick(row, column);
                                       }}
-                                      underline='hover'
+                                      underline="hover"
                                     >
                                       {column.format && typeof value === 'number' ? column.format(value) : value}
                                     </Link>
                                   ) : (
-                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                    <>
+                                      {column.format && typeof value === 'number'
+                                        ? column.format(value)
+                                        : value || '---'}
+                                    </>
                                   )}
                                 </TableCell>
                               );
@@ -1200,13 +1229,13 @@ export default function ListView(props: ListViewProps) {
               </Table>
             </TableContainer>
           ) : (
-            <TableContainer id='list-view'>
+            <TableContainer id="list-view">
               <Table>
                 <TableHead>
                   <TableRow>
-                    {selectionMode === SELECTION_MODE.SINGLE && <TableCell padding='checkbox' />}
+                    {selectionMode === SELECTION_MODE.SINGLE && <TableCell padding="checkbox" />}
                     {selectionMode === SELECTION_MODE.MULTI && (
-                      <TableCell padding='checkbox'>
+                      <TableCell padding="checkbox">
                         <Checkbox
                           indeterminate={selectedRowSet.size > 0 && !isAllSelected()}
                           checked={arRows?.length > 0 && isAllSelected()}
@@ -1214,9 +1243,13 @@ export default function ListView(props: ListViewProps) {
                         />
                       </TableCell>
                     )}
-                    {arColumns.map(column => {
+                    {arColumns.map((column) => {
                       return (
-                        <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
+                        <TableCell
+                          className={classes.cell}
+                          key={column.id}
+                          sortDirection={orderBy === column.id ? order : false}
+                        >
                           <TableSortLabel
                             active={orderBy === column.id}
                             direction={orderBy === column.id ? order : 'asc'}
@@ -1224,7 +1257,9 @@ export default function ListView(props: ListViewProps) {
                           >
                             {column.label}
                             {orderBy === column.id ? (
-                              <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
+                              <span className={classes.visuallyHidden}>
+                                {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                              </span>
                             ) : null}
                           </TableSortLabel>
                         </TableCell>
@@ -1237,26 +1272,29 @@ export default function ListView(props: ListViewProps) {
                     arRows.length > 0 &&
                     stableSort(arRows, getComparator(order, orderBy))
                       .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map(row => {
+                      .map((row) => {
                         return (
                           <TableRow key={row[rowID]}>
                             {selectionMode === SELECTION_MODE.SINGLE && (
-                              <TableCell padding='checkbox'>
+                              <TableCell padding="checkbox">
                                 <Radio
                                   onChange={handleChange}
                                   value={row[rowID]}
-                                  name='radio-buttons'
+                                  name="radio-buttons"
                                   inputProps={{ 'aria-label': 'A' }}
                                   checked={selectedValue === row[rowID]}
                                 />
                               </TableCell>
                             )}
                             {selectionMode === SELECTION_MODE.MULTI && (
-                              <TableCell padding='checkbox'>
-                                <Checkbox onChange={() => onCheckboxClick(row)} checked={selectedRowSet.has(row[rowID])} />
+                              <TableCell padding="checkbox">
+                                <Checkbox
+                                  onChange={() => onCheckboxClick(row)}
+                                  checked={selectedRowSet.has(row[rowID])}
+                                />
                               </TableCell>
                             )}
-                            {arColumns.map(column => {
+                            {arColumns.map((column) => {
                               const value = row[column.id];
                               return (
                                 <TableCell className={classes.cell} key={column.id} align={column.align}>
@@ -1270,15 +1308,17 @@ export default function ListView(props: ListViewProps) {
                 </TableBody>
               </Table>
               {(!arRows || arRows.length === 0) && (
-                <div className='no-records'>{getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}</div>
+                <div className="no-records">
+                  {getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}
+                </div>
               )}
             </TableContainer>
           )}
           {arRows && arRows.length > 0 && (
             <TablePagination
-              id='pagination'
+              id="pagination"
               rowsPerPageOptions={[10, 25, 100]}
-              component='div'
+              component="div"
               count={arRows.length}
               rowsPerPage={rowsPerPage}
               page={page}
@@ -1288,7 +1328,7 @@ export default function ListView(props: ListViewProps) {
           )}
         </Paper>
       )}
-      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={_menuClose}>
+      <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={_menuClose}>
         <MenuItem onClick={_filterMenu}>
           <FilterListIcon /> Filter
         </MenuItem>
@@ -1296,25 +1336,25 @@ export default function ListView(props: ListViewProps) {
           <SubjectIcon /> Group
         </MenuItem>
       </Menu>
-      <Dialog open={open} onClose={_closeDialog} aria-labelledby='form-dialog-title'>
-        <DialogTitle id='form-dialog-title'>Filter: {filterBy}</DialogTitle>
+      <Dialog open={open} onClose={_closeDialog} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">Filter: {filterBy}</DialogTitle>
         <DialogContent>
           {containsDateOrTime ? (
             <>
-              <Select variant='standard' value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
-                <MenuItem value='notequal'>is not equal to</MenuItem>
-                <MenuItem value='after'>after</MenuItem>
-                <MenuItem value='before'>before</MenuItem>
-                <MenuItem value='null'>is null</MenuItem>
-                <MenuItem value='notnull'>is not null</MenuItem>
+              <Select variant="standard" value={displayDialogDateFilter} onChange={_dialogDateFilter} fullWidth>
+                <MenuItem value="notequal">is not equal to</MenuItem>
+                <MenuItem value="after">after</MenuItem>
+                <MenuItem value="before">before</MenuItem>
+                <MenuItem value="null">is null</MenuItem>
+                <MenuItem value="notnull">is not null</MenuItem>
               </Select>
               {filterType === 'Date' && (
                 <TextField
-                  variant='standard'
+                  variant="standard"
                   autoFocus
-                  margin='dense'
-                  id='containsFilter'
-                  type='date'
+                  margin="dense"
+                  id="containsFilter"
+                  type="date"
                   fullWidth
                   value={displayDialogDateValue}
                   onChange={_dialogDateValue}
@@ -1322,11 +1362,11 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'DateTime' && (
                 <TextField
-                  variant='standard'
+                  variant="standard"
                   autoFocus
-                  margin='dense'
-                  id='containsFilter'
-                  type='datetime-local'
+                  margin="dense"
+                  id="containsFilter"
+                  type="datetime-local"
                   fullWidth
                   value={displayDialogDateValue}
                   onChange={_dialogDateValue}
@@ -1334,11 +1374,11 @@ export default function ListView(props: ListViewProps) {
               )}
               {filterType === 'Time' && (
                 <TextField
-                  variant='standard'
+                  variant="standard"
                   autoFocus
-                  margin='dense'
-                  id='containsFilter'
-                  type='time'
+                  margin="dense"
+                  id="containsFilter"
+                  type="time"
                   fullWidth
                   value={displayDialogDateValue}
                   onChange={_dialogDateValue}
@@ -1347,17 +1387,17 @@ export default function ListView(props: ListViewProps) {
             </>
           ) : (
             <>
-              <Select variant='standard' fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
-                <MenuItem value='contains'>Contains</MenuItem>
-                <MenuItem value='equals'>Equals</MenuItem>
-                <MenuItem value='startswith'>Starts with</MenuItem>
+              <Select variant="standard" fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
+                <MenuItem value="contains">Contains</MenuItem>
+                <MenuItem value="equals">Equals</MenuItem>
+                <MenuItem value="startswith">Starts with</MenuItem>
               </Select>
               <TextField
-                variant='standard'
+                variant="standard"
                 autoFocus
-                margin='dense'
-                id='containsFilter'
-                type='text'
+                margin="dense"
+                id="containsFilter"
+                type="text"
                 fullWidth
                 value={displayDialogContainsValue}
                 onChange={_dialogContainsValue}
@@ -1366,10 +1406,10 @@ export default function ListView(props: ListViewProps) {
           )}
         </DialogContent>
         <DialogActions>
-          <Button onClick={_closeDialog} color='secondary'>
+          <Button onClick={_closeDialog} color="secondary">
             Cancel
           </Button>
-          <Button onClick={_submitFilter} color='primary'>
+          <Button onClick={_submitFilter} color="primary">
             Submit
           </Button>
         </DialogActions>
@@ -1381,8 +1421,8 @@ export default function ListView(props: ListViewProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />