@pega/react-sdk-overrides 24.2.11 → 25.1.10

package/lib/template/ListView/ListView.tsx

@@ -1,10 +1,5 @@
-/* eslint-disable no-plusplus */
-
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable @typescript-eslint/no-shadow */
-
-import React, { useState, useEffect, useRef } from 'react';
-import { Theme } from '@mui/material/styles';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import type { Theme } from '@mui/material/styles';
 import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
 import Table from '@mui/material/Table';
@@ -21,7 +16,7 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import SubjectIcon from '@mui/icons-material/Subject';
 import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Dialog from '@mui/material/Dialog';
@@ -37,7 +32,6 @@ import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import { Radio } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
-
 import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 
 import './ListView.css';
@@ -47,7 +41,7 @@ import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/c
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 import useInit from './hooks';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface ListViewProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -63,6 +57,9 @@ interface ListViewProps extends PConnProps {
   showDynamicFields?: boolean;
   readonlyContextList?: any;
   value: any;
+  viewName?: string;
+  showRecords?: boolean;
+  displayAs?: string;
 }
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -89,26 +86,29 @@ export default function ListView(props: ListViewProps) {
     parameters,
     compositeKeys,
     showDynamicFields,
+    viewName,
     readonlyContextList: selectedValues,
-    value
+    value,
+    displayAs
   } = props;
+  let { showRecords } = props;
   const ref = useRef({}).current;
   const cosmosTableRef = useRef();
   // List component context
   const [listContext, setListContext] = useState<any>({});
   const { meta } = listContext;
-  const xRayApis = PCore.getDebugger().getXRayRuntime();
-  const xRayUid = xRayApis.startXRay();
+  const { current: uniqueId } = useRef(crypto.randomUUID());
 
   useInit({
     ...props,
     setListContext,
     ref,
     showDynamicFields,
-    xRayUid,
     cosmosTableRef
   });
 
+  useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName });
+
   const thePConn = getPConnect();
   const componentConfig = thePConn.getComponentConfig();
   const resolvedConfigProps: any = thePConn.getConfigProps() as ListViewProps;
@@ -157,10 +157,9 @@ export default function ListView(props: ListViewProps) {
         width: '100%',
         marginTop: theme.spacing(2),
         marginBottom: theme.spacing(2),
-        display: 'grid'
-      },
-      search: {
-        padding: '5px 5px'
+        display: 'grid',
+        borderRadius: 16,
+        padding: 20
       },
       table: {
         minWidth: 750
@@ -189,16 +188,43 @@ export default function ListView(props: ListViewProps) {
         position: 'absolute',
         top: 20,
         width: 1
-      },
-      title: {
-        marginTop: theme.spacing(1),
-        marginLeft: theme.spacing(1)
       }
     })
   );
 
   const classes = useStyles();
 
+  // Hook to clear the selections and update table in AdvancedSearch template when switching between search views
+  function useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName }) {
+    const clearSelectionsAndRefreshList = useCallback(
+      ({ viewName: name, clearSelections }) => {
+        if (name === viewName) {
+          const { selectionMode } = getPConnect().getRawConfigProps();
+          if (!selectionMode) {
+            return;
+          }
+          if (clearSelections) {
+            if (selectionMode === 'single') {
+              getPConnect().getListActions().setSelectedRows({});
+            } else {
+              getPConnect().getListActions().clearSelectedRows();
+            }
+          }
+        }
+      },
+      [getPConnect, viewName]
+    );
+
+    useEffect(() => {
+      const identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+      PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, identifier);
+
+      return () => {
+        PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', identifier);
+      };
+    }, [uniqueId, clearSelectionsAndRefreshList]);
+  }
+
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof any) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -260,18 +286,24 @@ export default function ListView(props: ListViewProps) {
         theField = theField.substring(1);
       }
       const colIndex = fields.findIndex(ele => ele.name === theField);
-      const displayAsLink = field.config.displayAsLink;
+      // const displayAsLink = field.config.displayAsLink;
+      const { additionalDetails = {} } = field.config;
+      let shouldDisplayAsSemanticLink = additionalDetails.type === 'DISPLAY_LINK';
+      // TODO: This "if" check has been added for backward compatibility, to be removed once the users are notified about the changes in view metadata of US-517164
+      if (!shouldDisplayAsSemanticLink) {
+        shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
+      }
       const headerRow: any = {};
       headerRow.id = fields[index].id;
       headerRow.type = field.type;
-      headerRow.displayAsLink = displayAsLink;
+      headerRow.displayAsLink = shouldDisplayAsSemanticLink;
       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) {
         headerRow.classID = fields[colIndex].classID;
       }
-      if (displayAsLink) {
+      if (shouldDisplayAsSemanticLink) {
         headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
         if (field.config.value?.startsWith('@CA')) {
           headerRow.isAssociation = true;
@@ -285,7 +317,6 @@ export default function ListView(props: ListViewProps) {
     if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
       const record = arTableData?.length > 0 ? arTableData[0] : '';
       if (typeof record === 'object' && !('pyGUID' in record) && !('pyID' in record)) {
-        // eslint-disable-next-line no-console
         console.error('pyGUID or pyID values are mandatory to select the required row from the list');
       }
     }
@@ -307,32 +338,43 @@ export default function ListView(props: ListViewProps) {
 
   // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
   function processFilterChange(data) {
-    const { filterId, filterExpression } = data;
+    let filterId;
+    let filterExpression;
+    let isDateRange;
+    let field;
     let dashboardFilterPayload: any = {
       query: {
         filter: {},
         select: []
       }
     };
-
-    filters.current[filterId] = filterExpression;
-    let isDateRange = data.filterExpression?.AND;
-    // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-    const relationalOp = 'AND';
-
-    let field = getFieldFromFilter(filterExpression, isDateRange);
-    selectParam = [];
-    // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-    columnList.current.forEach(col => {
-      selectParam.push({
-        field: col
+    if (displayAs === 'advancedSearch') {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      Object.entries(data).reduce((acc, [item, value]) => {
+        const { filterId, filterExpression } = value as any;
+        filters.current[filterId] = filterExpression;
+        return acc; // Ensure the accumulator is returned
+      }, {});
+    } else {
+      ({ filterId, filterExpression } = data);
+      filters.current[filterId] = filterExpression;
+      isDateRange = data.filterExpression?.AND;
+      field = getFieldFromFilter(filterExpression, isDateRange);
+      selectParam = [];
+      // Constructing the select parameters list (will be sent in dashboardFilterPayload)
+      columnList.current.forEach(col => {
+        selectParam.push({
+          field: col
+        });
       });
-    });
 
-    // Checking if the triggered filter is applicable for this list
-    if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
-      return;
+      // Checking if the triggered filter is applicable for this list
+      if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
+        return;
+      }
     }
+    // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
+    const relationalOp = 'AND';
     // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
     let validFilter = false;
 
@@ -342,7 +384,6 @@ export default function ListView(props: ListViewProps) {
       const filter = filters.current[filterExp];
       // If the filter is null then we can skip this iteration
       if (filter === null) {
-        // eslint-disable-next-line no-continue
         continue;
       }
 
@@ -351,7 +392,6 @@ export default function ListView(props: ListViewProps) {
       field = getFieldFromFilter(filter, isDateRange);
 
       if (!(columnList.current.length && columnList.current.includes(field))) {
-        // eslint-disable-next-line no-continue
         continue;
       }
       // If we reach here that implies we've at least one valid filter, hence setting the flag
@@ -378,7 +418,7 @@ export default function ListView(props: ListViewProps) {
       } else {
         dashboardFilterPayload.query.filter.filterConditions = {
           ...dashboardFilterPayload.query.filter.filterConditions,
-          [`T${index++}`]: { ...filter.condition, ignoreCase: true }
+          [`T${index++}`]: { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}) }
         };
 
         if (dashboardFilterPayload.query.filter.logic) {
@@ -406,6 +446,9 @@ export default function ListView(props: ListViewProps) {
   }
 
   function fetchAllData(fields): any {
+    if (displayAs === 'advancedSearch' && !showRecords) {
+      return Promise.resolve({ data: null });
+    }
     let query: any = null;
     if (payload) {
       query = payload.query;
@@ -556,8 +599,36 @@ export default function ListView(props: ListViewProps) {
     };
   }
 
+  function prepareFilters(data) {
+    return Object.entries(data.payload).reduce((acc, [field, value]) => {
+      if (value) {
+        let comparator = 'EQ';
+        const filterRecord = listContext.meta.fieldDefs.filter(item => item.id === field);
+        if (filterRecord?.[0]?.meta.type === 'TextInput') {
+          comparator = 'CONTAINS';
+        }
+        acc[field] = {
+          filterExpression: {
+            condition: {
+              lhs: {
+                field
+              },
+              comparator,
+              rhs: {
+                value
+              }
+            }
+          },
+          filterId: field
+        };
+      }
+      return acc;
+    }, {});
+  }
+
   useEffect(() => {
     if (listContext.meta) {
+      const identifier = `promoted-filters-queryable-${uniqueId}`;
       fetchDataFromServer();
       setTimeout(() => {
         PCore.getPubSubUtils().subscribe(
@@ -579,6 +650,15 @@ export default function ListView(props: ListViewProps) {
           false,
           getPConnect().getContextName()
         );
+        PCore.getPubSubUtils().subscribe(
+          PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
+          data => {
+            showRecords = data.showRecords;
+            const filterData = prepareFilters(data);
+            processFilterChange(filterData);
+          },
+          identifier
+        );
       }, 0);
 
       return function cleanupSubscriptions() {
@@ -592,6 +672,7 @@ export default function ListView(props: ListViewProps) {
           `dashboard-component-${'id'}`,
           getPConnect().getContextName()
         );
+        PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, identifier);
       };
     }
   }, [listContext]);
@@ -629,7 +710,7 @@ export default function ListView(props: ListViewProps) {
 
   function showToast(message: string) {
     const theMessage = `Assignment: ${message}`;
-    // eslint-disable-next-line no-console
+
     console.error(theMessage);
     setSnackbarMessage(message);
     setShowSnackbar(true);
@@ -759,7 +840,6 @@ export default function ListView(props: ListViewProps) {
   function _showFilteredIcon(columnId) {
     for (const filterObj of filterByColumns) {
       if (filterObj.ref === columnId) {
-        // eslint-disable-next-line sonarjs/prefer-single-boolean-return
         if (filterObj.containsFilterValue !== '') {
           return true;
         }
@@ -980,162 +1060,162 @@ export default function ListView(props: ListViewProps) {
     <>
       {arColumns && arColumns.length > 0 && (
         <Paper className={classes.paper}>
-          <Typography className={classes.title} variant='h6' color='textPrimary' gutterBottom>
-            {_listTitle()}
-          </Typography>
-          {globalSearch && (
-            <Grid container spacing={1} alignItems='flex-end' className={classes.search}>
-              <Grid item>
-                <SearchIcon />
-              </Grid>
-              <Grid item>
-                <TextField
-                  label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
-                  fullWidth
-                  variant='outlined'
-                  placeholder=''
-                  size='small'
-                  id='search'
-                  onChange={_onSearch}
-                />
-              </Grid>
-            </Grid>
-          )}
-          <>
-            {!bInForm ? (
-              <TableContainer id='list-view' className={classes.tableInForm}>
-                <Table stickyHeader aria-label='sticky table'>
-                  <TableHead>
-                    <TableRow>
-                      {arColumns.map(column => {
+          <Grid2 container justifyContent='space-between'>
+            <Typography variant='h6' color='textPrimary' gutterBottom>
+              {_listTitle()}
+            </Typography>
+            {globalSearch && (
+              <Grid2 container spacing={1} alignItems='flex-end'>
+                <Grid2>
+                  <SearchIcon />
+                </Grid2>
+                <Grid2>
+                  <TextField
+                    label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
+                    fullWidth
+                    variant='outlined'
+                    placeholder=''
+                    size='small'
+                    id='search'
+                    onChange={_onSearch}
+                  />
+                </Grid2>
+              </Grid2>
+            )}
+          </Grid2>
+          {!bInForm ? (
+            <TableContainer id='list-view' className={classes.tableInForm}>
+              <Table stickyHeader aria-label='sticky table'>
+                <TableHead>
+                  <TableRow>
+                    {arColumns.map(column => {
+                      return (
+                        <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
+                          <TableSortLabel
+                            active={orderBy === column.id}
+                            direction={orderBy === column.id ? order : 'asc'}
+                            onClick={createSortHandler(column.id)}
+                          >
+                            {column.label}
+                            {_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
+                            {orderBy === column.id ? (
+                              <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
+                            ) : null}
+                          </TableSortLabel>
+                          <MoreIcon
+                            className={classes.moreIcon}
+                            onClick={event => {
+                              _menuClick(event, column.id, column.type, column.label);
+                            }}
+                          />
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {arRows &&
+                    stableSort(arRows, getComparator(order, orderBy))
+                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                      .map(row => {
                         return (
-                          <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
-                            <TableSortLabel
-                              active={orderBy === column.id}
-                              direction={orderBy === column.id ? order : 'asc'}
-                              onClick={createSortHandler(column.id)}
-                            >
-                              {column.label}
-                              {_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
-                              {orderBy === column.id ? (
-                                <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
-                              ) : null}
-                            </TableSortLabel>
-                            <MoreIcon
-                              className={classes.moreIcon}
-                              onClick={event => {
-                                _menuClick(event, column.id, column.type, column.label);
-                              }}
-                            />
-                          </TableCell>
+                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                            {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'
+                                      onClick={() => {
+                                        _listViewClick(row, column);
+                                      }}
+                                      underline='hover'
+                                    >
+                                      {column.format && typeof value === 'number' ? column.format(value) : value}
+                                    </Link>
+                                  ) : (
+                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
                         );
                       })}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {arRows &&
-                      stableSort(arRows, getComparator(order, orderBy))
-                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                        .map(row => {
-                          return (
-                            <TableRow key={row.pxRefObjectInsName || row.pyID}>
-                              {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'
-                                        onClick={() => {
-                                          _listViewClick(row, column);
-                                        }}
-                                        underline='hover'
-                                      >
-                                        {column.format && typeof value === 'number' ? column.format(value) : value}
-                                      </Link>
-                                    ) : (
-                                      <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
-                                    )}
-                                  </TableCell>
-                                );
-                              })}
-                            </TableRow>
-                          );
-                        })}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            ) : (
-              <TableContainer id='list-view'>
-                <Table>
-                  <TableHead>
-                    <TableRow>
-                      {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
-                      {arColumns.map(column => {
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <TableContainer id='list-view'>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
+                    {arColumns.map(column => {
+                      return (
+                        <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
+                          <TableSortLabel
+                            active={orderBy === column.id}
+                            direction={orderBy === column.id ? order : 'asc'}
+                            onClick={createSortHandler(column.id)}
+                          >
+                            {column.label}
+                            {orderBy === column.id ? (
+                              <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
+                            ) : null}
+                          </TableSortLabel>
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {arRows &&
+                    arRows.length > 0 &&
+                    stableSort(arRows, getComparator(order, orderBy))
+                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                      .map(row => {
                         return (
-                          <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
-                            <TableSortLabel
-                              active={orderBy === column.id}
-                              direction={orderBy === column.id ? order : 'asc'}
-                              onClick={createSortHandler(column.id)}
-                            >
-                              {column.label}
-                              {orderBy === column.id ? (
-                                <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
-                              ) : null}
-                            </TableSortLabel>
-                          </TableCell>
+                          <TableRow key={row[rowID]}>
+                            {selectionMode === SELECTION_MODE.SINGLE && (
+                              <TableCell>
+                                <Radio
+                                  onChange={handleChange}
+                                  value={row[rowID]}
+                                  name='radio-buttons'
+                                  inputProps={{ 'aria-label': 'A' }}
+                                  checked={selectedValue === row[rowID]}
+                                />
+                              </TableCell>
+                            )}
+                            {selectionMode === SELECTION_MODE.MULTI && (
+                              <TableCell>
+                                <Checkbox
+                                  onChange={onCheckboxClick}
+                                  checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
+                                  value={row[rowID]}
+                                />
+                              </TableCell>
+                            )}
+                            {arColumns.map(column => {
+                              const value = row[column.id];
+                              return (
+                                <TableCell className={classes.cell} key={column.id} align={column.align}>
+                                  {processColumnValue(column, value)}
+                                </TableCell>
+                              );
+                            })}
+                          </TableRow>
                         );
                       })}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {arRows &&
-                      arRows.length > 0 &&
-                      stableSort(arRows, getComparator(order, orderBy))
-                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                        .map(row => {
-                          return (
-                            <TableRow key={row[rowID]}>
-                              {selectionMode === SELECTION_MODE.SINGLE && (
-                                <TableCell>
-                                  <Radio
-                                    onChange={handleChange}
-                                    value={row[rowID]}
-                                    name='radio-buttons'
-                                    inputProps={{ 'aria-label': 'A' }}
-                                    checked={selectedValue === row[rowID]}
-                                  />
-                                </TableCell>
-                              )}
-                              {selectionMode === SELECTION_MODE.MULTI && (
-                                <TableCell>
-                                  <Checkbox
-                                    onChange={onCheckboxClick}
-                                    checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
-                                    value={row[rowID]}
-                                  />
-                                </TableCell>
-                              )}
-                              {arColumns.map(column => {
-                                const value = row[column.id];
-                                return (
-                                  <TableCell className={classes.cell} key={column.id} align={column.align}>
-                                    {processColumnValue(column, value)}
-                                  </TableCell>
-                                );
-                              })}
-                            </TableRow>
-                          );
-                        })}
-                  </TableBody>
-                </Table>
-                {arRows && arRows.length === 0 && (
-                  <div className='no-records'>{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}</div>
-                )}
-              </TableContainer>
-            )}
-          </>
+                </TableBody>
+              </Table>
+              {(!arRows || arRows.length === 0) && (
+                <div className='no-records'>{getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.')}</div>
+              )}
+            </TableContainer>
+          )}
           {arRows && arRows.length > 0 && (
             <TablePagination
               id='pagination'