@pega/react-sdk-overrides 0.23.6

package/lib/infra/DashboardFilter/DashboardFilter.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable no-shadow */
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable operator-assignment */
+import { useRef, useEffect, useState, Fragment, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'throttle-debounce';
+import { createFilter, combineFilters, getFormattedDate } from './filterUtils';
+import { getFilterExpression } from './filterUtils';
+import { TextField } from '@material-ui/core';
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+declare const PCore: any;
+
+export default function DashboardFilter(props) {
+  const { children, name, filterProp, type, metadata, getPConnect } = props;
+  const { current: filterId } = useRef(uuidv4());
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  useEffect(() => {
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+      () => {
+        if (type === 'Dropdown') {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, '');
+        } else if (type === 'RadioButtons') {
+          const reference = getPConnect().getFullReference() + filterProp;
+          const radList = document.getElementsByName(reference);
+          for (let i = 0; i < radList.length; i = i + 1) {
+            if ((radList[i] as HTMLInputElement).value === '') {
+              (radList[i] as HTMLInputElement).checked = true;
+            } else {
+              (radList[i] as HTMLInputElement).checked = false;
+            }
+          }
+        } else {
+          getPConnect().getActionsApi().updateFieldValue(filterProp, undefined);
+          if (type === 'DateTime') {
+            setStartDate(null);
+            setEndDate(null);
+          }
+        }
+      },
+      filterId,
+      false,
+      getPConnect().getContextName()
+    );
+    return function cleanup() {
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+        filterId,
+        getPConnect().getContextName()
+      );
+    };
+  });
+
+  const fireFilterChange = filterValue => {
+    const filterData = {
+      filterId,
+      filterExpression: getFilterExpression(filterValue, name, metadata)
+    };
+
+    PCore.getPubSubUtils().publish(
+      PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+      filterData
+    );
+  };
+
+  const fireFilterChangeDebounced = debounce(500, fireFilterChange);
+  const dateRangeChangeHandler = value => {
+    const { start, end } = value;
+
+    let startDate = getFormattedDate(start);
+    let endDate = getFormattedDate(end);
+
+    if (startDate && endDate) {
+      startDate = `${startDate}T00:00:00`;
+      endDate = `${endDate}T00:00:00`;
+      const startFilter = createFilter(startDate, name, 'GT');
+      const endFilter = createFilter(endDate, name, 'LT');
+
+      const filterData = {
+        filterId,
+        filterExpression: combineFilters([startFilter, endFilter], null)
+      };
+      PCore.getPubSubUtils().publish(
+        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+        filterData
+      );
+    }
+  };
+
+  const renderAutoComplete = () => {
+    metadata.config.onRecordChange = e => {
+      fireFilterChange(e.id);
+    };
+    return getPConnect().createComponent(metadata);
+  };
+
+  const onChange = dates => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    dateRangeChangeHandler({ start, end });
+  };
+
+  type TextProps = React.HTMLProps<HTMLInputElement>;
+
+  const label = metadata.config.label.substring(3);
+
+  const CustomDateInput = forwardRef<HTMLInputElement, TextProps>(
+    ({ value, onClick }, ref: any) => (
+      <TextField
+        label={label}
+        variant='outlined'
+        fullWidth
+        value={value}
+        size='small'
+        onClick={onClick}
+        ref={ref}
+      >
+        {value}
+      </TextField>
+    )
+  );
+
+  return (
+    <Fragment>
+      {type === 'DateTime' && (
+        <DatePicker
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          enableTabLoop={false}
+          customInput={<CustomDateInput />}
+        />
+      )}
+      {type === 'AutoComplete' && (
+        <span
+          onChange={event => {
+            if (event && event.target && !(event.target as HTMLInputElement).value) {
+              fireFilterChange('ALL');
+            }
+          }}
+        >
+          {renderAutoComplete()}
+        </span>
+      )}
+      {children && (
+        <span
+          onChange={event => {
+            fireFilterChangeDebounced((event.target as HTMLInputElement).value);
+          }}
+        >
+          {children}
+        </span>
+      )}
+    </Fragment>
+  );
+}
+
+DashboardFilter.defaultProps = {
+  children: null,
+  type: null,
+  metadata: null
+};
+
+DashboardFilter.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  children: PropTypes.object,
+  name: PropTypes.string.isRequired,
+  filterProp: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  metadata: PropTypes.objectOf(PropTypes.any)
+};

package/lib/infra/DashboardFilter/filterUtils.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable prefer-template */
+/** This file contains various utility methods to generate filter components, regionLayout data, filter expressions, etc.  */
+
+import { Grid, Link } from '@material-ui/core';
+import React from 'react';
+import DashboardFilter from './DashboardFilter';
+
+declare const PCore: any;
+
+export const createFilter = (value, fieldId, comparator = 'EQ') => {
+  return {
+    condition: {
+      lhs: {
+        field: fieldId
+      },
+      comparator,
+      rhs: {
+        value
+      }
+    }
+  };
+};
+
+export const combineFilters = (filterList, existingFilters) => {
+  if (filterList && filterList.length) {
+    // Need to combine them
+    if (existingFilters) {
+      return { AND: [existingFilters, ...filterList] };
+    }
+
+    // No existing, just return the one(s) from the list
+    if (filterList.length > 1) {
+      return { AND: [...filterList] };
+    }
+
+    return filterList[0];
+  }
+
+  // No filter list,
+  return existingFilters;
+};
+
+export const createFilterComponent = (getPConnect, filterMeta, index) => {
+  const name = filterMeta.config.value.substring(4);
+  let cleanedName = name;
+  if (name.indexOf('.') !== -1) {
+    cleanedName = name.substring(name.indexOf('.') + 1);
+  }
+  let propInfo = PCore.getMetadataUtils().getPropertyMetadata(
+    cleanedName,
+    filterMeta.config.ruleClass
+  );
+  if (!propInfo) {
+    propInfo = PCore.getMetadataUtils().getPropertyMetadata(cleanedName);
+  }
+  const { type: propertyType } = propInfo || { type: 'Text' };
+  const isNumber = propertyType && (propertyType === 'Decimal' || propertyType === 'Integer');
+  filterMeta.isNumber = isNumber;
+  const { filterType, datasource } = filterMeta.config;
+  const type = filterType || filterMeta.type;
+  const filterProp = `.pyDashboardFilter${index}`;
+  if (type === 'DateTime') {
+    return (
+      <DashboardFilter
+        key={name}
+        getPConnect={getPConnect}
+        name={name}
+        filterProp={filterProp}
+        metadata={filterMeta}
+        type={filterMeta.type}
+      ></DashboardFilter>
+    );
+  }
+  if (datasource && datasource.fields) {
+    datasource.fields.key = datasource.fields.value;
+  }
+  if (filterMeta.config.listType === 'associated' && propInfo && propInfo.datasource) {
+    filterMeta.config.datasource = propInfo.datasource.records;
+  }
+  filterMeta.config.value = `@P ${filterProp}`;
+  filterMeta.type = filterMeta.config.displayAs || type;
+  filterMeta.config.placeholder = 'ALL';
+  return (
+    <DashboardFilter
+      key={name}
+      getPConnect={getPConnect}
+      name={name}
+      filterProp={filterProp}
+      metadata={filterMeta}
+      type={filterMeta.type}
+    >
+      {getPConnect().createComponent(filterMeta)}
+    </DashboardFilter>
+  );
+};
+
+export const buildFilterComponents = (getPConnect, allFilters) => {
+  const filterComponents = allFilters.children.map((filter, index) =>
+    createFilterComponent(getPConnect, filter, index)
+  );
+  if (filterComponents && filterComponents.length > 0) {
+    filterComponents.push(
+      <Grid>
+        <Link
+          style={{ cursor: 'pointer' }}
+          onClick={() => {
+            PCore.getPubSubUtils().publish(
+              PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL
+            );
+          }}
+        >
+          Clear All
+        </Link>
+      </Grid>
+    );
+  }
+  return filterComponents;
+};
+
+export const convertDateToGMT = value => {
+  const { valueAsISOString: date } = value;
+  return date ? date.substring(0, date.indexOf('T')) : date;
+};
+
+export const getFilterExpression = (filterValue, name, metadata) => {
+  if (filterValue === '') {
+    return null;
+  }
+  let comparator = 'EQ';
+  if (metadata.type === 'TextInput' && !metadata.isNumber) {
+    comparator = 'CONTAINS';
+  }
+
+  if (metadata.config.filterType && metadata.config.filterType === 'RelativeDates') {
+    const fieldSource = metadata.config.datasource.filter(source => source.key === filterValue)[0];
+    const relativeDateExpression = JSON.parse(fieldSource.json);
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    const fields = [
+      {
+        name: relativeDateExpression.condition.lhs.field,
+        type: 'DATE_TIME'
+      }
+    ];
+    return '';
+  }
+
+  return createFilter(filterValue, name, comparator);
+};
+
+/**
+ * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
+ * @returns {object[]} ConfigurableLayout content.
+ */
+export function getLayoutDataFromRegion(regionData) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item, index) => {
+      const itemPConnect = item?.getPConnect();
+
+      return {
+        id: itemPConnect?.getComponentName()
+          ? `${itemPConnect.getComponentName()}--${index}`
+          : `item--${index}`,
+        content: itemPConnect?.getComponent(),
+        layoutConfig: {
+          ...defaultLayoutConfig,
+          ...itemPConnect?.getConfigProps().layoutConfig
+        }
+      };
+    });
+}
+
+export const getFormattedDate = date => {
+  if (!date) {
+    return date;
+  }
+  const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${(
+    '0' + date.getDate()
+  ).slice(-2)}`;
+  return formattedDate;
+};

package/lib/infra/DashboardFilter/index.tsx

@@ -0,0 +1 @@
+export { default } from './DashboardFilter';

package/lib/infra/DeferLoad/DeferLoad.tsx

@@ -0,0 +1,175 @@
+import React, { useState, useEffect, createElement } from 'react';
+import PropTypes from 'prop-types';
+import { Box, Card, CircularProgress } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+
+declare const PCore;
+
+//
+// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+// is totally at your own risk.
+//
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  }
+}));
+
+export default function DeferLoad(props) {
+  const { getPConnect, name, deferLoadId, isTab } = props;
+  const [content, setContent] = useState<any>(null);
+  const [isLoading, setLoading] = useState(true);
+  const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState("");
+
+  const classes = useStyles();
+
+  const pConnect = getPConnect();
+  const constants = PCore.getConstants();
+
+  const theRequestedAssignment = pConnect.getValue( PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
+  if (theRequestedAssignment !== currentLoadedAssignment)  {
+    // console.log(`DeferLoad: currentLoadedAssignment about to change from ${currentLoadedAssignment} to ${theRequestedAssignment}`);
+    setCurrentLoadedAssignment(theRequestedAssignment);
+  }
+
+  const { CASE, PAGE, DATA } = constants.RESOURCE_TYPES;
+  const loadViewCaseID =
+    pConnect.getValue(constants.PZINSKEY) || pConnect.getValue(constants.CASE_INFO.CASE_INFO_ID);
+  let containerName;
+  let containerItemData;
+  const targetName = pConnect.getTarget();
+  if (targetName) {
+    containerName = PCore.getContainerUtils().getActiveContainerItemName(targetName);
+
+    containerItemData = PCore.getContainerUtils().getContainerItemData(targetName, containerName);
+  }
+
+  const { resourceType = CASE } = containerItemData || {
+    resourceType: loadViewCaseID ? CASE : PAGE
+  };
+  const isContainerPreview = /preview_[0-9]*/g.test(pConnect.getContextName());
+
+  const getViewOptions = () => ({
+    viewContext: resourceType,
+    pageClass: loadViewCaseID ? '' : pConnect.getDataObject().pyPortal.classID,
+    container: isContainerPreview ? 'preview' : null,
+    containerName: isContainerPreview ? 'preview' : null,
+    updateData: isContainerPreview
+  });
+
+  const onResponse = data => {
+    setLoading(false);
+    if (deferLoadId) {
+      PCore.getDeferLoadManager().start(
+        name,
+        getPConnect().getCaseInfo().getKey(),
+        getPConnect().getPageReference().replace('caseInfo.content', ''),
+        getPConnect().getContextName(),
+        deferLoadId
+      );
+    }
+
+    if (data && !(data.type && data.type === 'error')) {
+      const config = {
+        meta: data,
+        options: {
+          context: pConnect.getContextName(),
+          pageReference: pConnect.getPageReference()
+        }
+      };
+      const configObject = PCore.createPConnect(config);
+      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      setContent(createElement(createPConnectComponent(), configObject));
+      if (deferLoadId) {
+        PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (resourceType === DATA) {
+      // Rendering defer loaded tabs in data context
+      if (containerName) {
+        const dataContext = PCore.getStoreValue('.dataContext', 'dataInfo', containerName);
+        const dataContextParameters = PCore.getStoreValue(
+          '.dataContextParameters',
+          'dataInfo',
+          containerName
+        );
+
+        getPConnect()
+          .getActionsApi()
+          .showData(name, dataContext, dataContextParameters, {
+            skipSemanticUrl: true,
+            isDeferLoaded: true
+          })
+          .then(data => {
+            onResponse(data);
+          });
+      } else {
+        // eslint-disable-next-line no-console
+        console.error('Cannot load the defer loaded view without container information');
+      }
+    } else if (resourceType === PAGE) {
+      // Rendering defer loaded tabs in case/ page context
+      getPConnect()
+        .getActionsApi()
+        .loadView(encodeURI(loadViewCaseID), name, getViewOptions())
+        .then(data => {
+          onResponse(data);
+        });
+    } else {
+      getPConnect()
+        .getActionsApi()
+        .refreshCaseView(encodeURI(loadViewCaseID), name)
+        .then(data => {
+          onResponse(data.root);
+        });
+    }
+  }, [name, getPConnect, currentLoadedAssignment]);
+  /* TODO Cosmos need to handle for now added a wrapper div with pos relative */
+  let deferLoadContent;
+  if (isLoading) {
+    deferLoadContent = (
+      <div style={{ position: 'relative', height: '100px' }}>
+        <Box textAlign='center'>
+          <CircularProgress />
+        </Box>
+      </div>
+    );
+  } else {
+    deferLoadContent = !isTab ? (
+      <div className={classes.root}>
+        <React.Fragment>{content}</React.Fragment>
+      </div>
+    ) : (
+      <Card id='DeferLoad' className={classes.root}>
+        <React.Fragment>{content}</React.Fragment>
+      </Card>
+    );
+  }
+
+  return deferLoadContent;
+}
+
+DeferLoad.defaultProps = {
+  isChildDeferLoad: false
+};
+
+DeferLoad.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  isChildDeferLoad: PropTypes.bool,
+  isTab: PropTypes.bool
+};

package/lib/infra/DeferLoad/index.tsx

@@ -0,0 +1 @@
+export { default } from './DeferLoad';

package/lib/infra/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,103 @@
+// Adapted from nebula ErrorBoundary (remove Cosmos dependencies)
+
+import React from "react";
+import PropTypes from "prop-types";
+
+declare const PCore;
+
+function ErrorBoundary(props) {
+  const ERROR_TEXT = PCore.getErrorHandler().getGenericFailedMessage();
+  const WORK_AREA = "workarea";
+  const ERROR_WHILE_RENDERING = "ERROR_WHILE_RENDERING";
+  const { getPConnect, isInternalError } = props;
+
+  const theErrorDiv = <div>{ERROR_TEXT}</div>
+
+  if (!getPConnect) {
+    return (
+      theErrorDiv
+      // <Flex
+      //   container={{
+      //     alignItems: "center",
+      //     justify: "center",
+      //     itemGap: 1
+      //   }}
+      // >
+      //   <Text status="error">
+      //     <Icon name="warn-solid" />
+      //   </Text>
+      //   <Text data-testid="errorText">{ERROR_TEXT}</Text>
+      // </Flex>
+    );
+  }
+
+  const pConn = getPConnect();
+
+  if (!isInternalError) {
+    // eslint-disable-next-line no-console
+    console.error(`Unable to load the component ${pConn.getComponentName()}
+    This might be due to the view meta data getting corrupted or the component file missing.
+    Raw meta data for the component: ${JSON.stringify(pConn.getRawMetadata())}`);
+  }
+
+  if (pConn.getConfigProps().type === "page") {
+    return (
+      theErrorDiv
+      // <Banner
+      //   data-testid="errorBanner"
+      //   variant="urgent"
+      //   heading="Error"
+      //   messages={[ERROR_TEXT]}
+      // />
+    );
+  }
+
+  if (
+    pConn.getContainerName() === WORK_AREA ||
+    pConn.isInsideList() === true ||
+    pConn.getContainerName() === "modal"
+  ) {
+    const { publish } = PCore.getPubSubUtils();
+    publish(ERROR_WHILE_RENDERING);
+    return null;
+  }
+
+  return (
+    theErrorDiv
+    // <Card>
+    //   <CardHeader>
+    //     <Text variant="h3">
+    //       {pConn.getConfigProps().label || pConn.getComponentName()}
+    //     </Text>
+    //   </CardHeader>
+    //   <CardContent
+    //     direction="row"
+    //     style={{ minHeight: "5rem", justifyContent: "center" }}
+    //   >
+    //     <Flex
+    //       container={{
+    //         alignItems: "center",
+    //         justify: "center",
+    //         itemGap: 1
+    //       }}
+    //     >
+    //       <Text status="error">
+    //         <Icon name="warn-solid" />
+    //       </Text>
+    //       <Text>{ERROR_TEXT}</Text>
+    //     </Flex>
+    //   </CardContent>
+    // </Card>
+  );
+}
+ErrorBoundary.propTypes = {
+  getPConnect: PropTypes.func,
+  isInternalError: PropTypes.bool
+};
+
+ErrorBoundary.defaultProps = {
+  getPConnect: null,
+  isInternalError: false
+};
+
+export default ErrorBoundary;

package/lib/infra/ErrorBoundary/index.tsx

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';