@pega/react-sdk-overrides 0.23.6

package/lib/templates/CaseView/CaseView.tsx

@@ -0,0 +1,261 @@
+/* eslint-disable react/jsx-boolean-value */
+
+import React, { useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { Card, CardHeader, Avatar, Typography, Divider } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+
+import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
+import CaseViewActionsMenu from "./CaseViewActionsMenu";
+import VerticalTabs from '@pega/react-sdk-components/lib/components/infra/VerticalTabs';
+import DeferLoad from '@pega/react-sdk-components/lib/components/infra/DeferLoad';
+
+
+declare const PCore;
+
+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),
+  },
+  caseViewHeader: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.getContrastText(theme.palette.info.light),
+    borderRadius: "inherit",
+  },
+  caseViewIconBox: {
+    backgroundColor: theme.palette.info.dark,
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+    padding: theme.spacing(1),
+  },
+  caseViewIconImage: {
+    filter: 'invert(100%)'
+  }
+}));
+
+export default function CaseView(props) {
+  const {
+    getPConnect,
+    icon,
+    header,
+    subheader,
+    children,
+    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments }
+  } = props;
+  const currentCaseID = props.caseInfo.ID;
+  let isComponentMounted = true;
+
+  const { displayOnlyFA } = useContext(StoreContext);
+
+  const thePConn = getPConnect();
+
+  const classes = useStyles();
+
+
+  /**
+   *
+   * @param inName the metadata <em>name</em> that will cause a region to be returned
+   */
+   function getChildRegionByName(inName: string): any {
+
+    for (const child of children) {
+      const theMetadataType: string = child.props.getPConnect().getRawMetadata()['type'].toLowerCase();
+      const theMetadataName: string = child.props.getPConnect().getRawMetadata()['name'].toLowerCase();
+
+      if ((theMetadataType === "region") && (theMetadataName === inName )) {
+        return child;
+      }
+    }
+
+    return null;
+  }
+
+
+  const theSummaryRegion = getChildRegionByName("summary");
+  const theStagesRegion = getChildRegionByName("stages");
+  const theTodoRegion = getChildRegionByName("todo");
+  const theUtilitiesRegion = getChildRegionByName("utilities");
+  const theTabsRegion = getChildRegionByName("tabs");
+
+  const svgCase = Utils.getImageSrc(icon, PCore.getAssetLoader().getStaticServerUrl());
+
+  const [activeVertTab, setActiveVertTab] = useState(0);
+
+  // const tmpLoadData1 = { config: { label: "Details", name: "pyDetailsTabContent" }, type: "DeferLoad" };
+  // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
+
+  // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
+  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+
+  // vertTabInfo is sent to VerticalTabs component
+  const vertTabInfo: Array<Object> = [];
+
+  // deferLoadInfo is sent to DeferLoad component (currently selected entry)
+  const deferLoadInfo: Array<any> = [];
+
+  if (theTabsRegionChildren) {
+    // populate vertTabInfo and deferLoadInfo
+    theTabsRegionChildren.forEach((tabComp, index) => {
+      const theTabCompConfig = tabComp.getPConnect().getConfigProps();
+      // eslint-disable-next-line prefer-const
+      let { label, inheritedProps } = theTabCompConfig;
+      // For some tabs, "label" property is not avaialable in theTabCompConfig, so will get them from inheritedProps
+      if (!label) {
+        inheritedProps.forEach(inheritedProp => {
+          if (inheritedProp.prop === 'label') {
+            label = inheritedProp.value;
+          }
+        });
+      }
+      // We'll display the tabs when either visibility property doesn't exist or is true(if exists)
+      if (theTabCompConfig.visibility === undefined || theTabCompConfig.visibility === true) {
+        vertTabInfo.push({ name: label, id: index });
+        deferLoadInfo.push({ type: 'DeferLoad', config: theTabCompConfig });
+      }
+    });
+  }
+
+
+
+  function handleVerticalTabClick(eventDetail: any) {
+    const theItem = parseInt(eventDetail.additionalData.itemClicked, 10);
+
+    // only call useEffectSetter if the component is mounted
+    if (isComponentMounted) {
+      setActiveVertTab(theItem);
+    }
+  }
+
+
+  // Add and Remove event listener for VerticalTabClick only at startup and teardown
+  useEffect(() => {
+    document.addEventListener('VerticalTabClick', (event: any) => {
+      handleVerticalTabClick(event.detail);
+    });
+
+    return ():void => {
+      // inform that the component is unmounted so other code can
+      //  know not to try to call useState setters (to avoid console warnings)
+      isComponentMounted = false;
+
+      document.removeEventListener('VerticalTabClick', (event: any) => {
+        handleVerticalTabClick(event.detail);
+      });
+    }
+  }, [])
+
+  useEffect(() => {
+    if (hasNewAttachments) {
+      PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+    }
+  }, [hasNewAttachments]);
+
+  function _editClick() {
+
+    const editAction = availableActions.find(
+      (action) => action.ID === "pyUpdateCaseDetails"
+    );
+    const actionsAPI = thePConn.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction( editAction.ID, { ...editAction});
+  }
+
+
+  function getActionButtonsHtml(): any {
+
+    const aBHtml = <Box>
+            <Button onClick={() => {_editClick()}}>Edit</Button>
+            &nbsp;
+            <CaseViewActionsMenu getPConnect={getPConnect} availableActions={availableActions} availableProcesses={availableProcesses} />
+        </Box>;
+
+
+    return aBHtml;
+
+  }
+
+
+  function getContainerContents() {
+
+    if (!displayOnlyFA) {
+      // show full portal
+      return (
+        <Grid container>
+          <Grid item xs={3}>
+          <div hidden={true} id="current-caseID">{currentCaseID}</div>
+          <Card className={classes.root} >
+            <CardHeader className={classes.caseViewHeader}
+              title={<Typography variant="h6" component="div">{header}</Typography>}
+              subheader={<Typography variant="body1" component="div" id="caseId">{subheader}</Typography>}
+              avatar={
+                <Avatar className={classes.caseViewIconBox} variant="square">
+                  <img src={svgCase} className={classes.caseViewIconImage}/>
+                </Avatar>
+              }
+            />
+            {getActionButtonsHtml()}
+            <Divider />
+            {theSummaryRegion}
+            <Divider />
+            { vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
+          </Card>
+        </Grid>
+
+        <Grid item xs={6}>
+          {theStagesRegion}
+          {theTodoRegion}
+          { deferLoadInfo.length > 0 && <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name } isTab />}
+        </Grid>
+
+        <Grid item xs={3}>
+          {theUtilitiesRegion}
+        </Grid>
+      </Grid>
+      )
+    } else {
+      // displayOnlyFA - only show the "todo" region
+      return (
+        <Grid container>
+          <Grid item xs={12}>
+            {theTodoRegion}
+          </Grid>
+        </Grid>
+      )
+    }
+  }
+
+
+  return (
+      getContainerContents()
+  );
+}
+
+CaseView.defaultProps = {
+  icon: "",
+  children: [],
+  caseInfo: {},
+  showIconInHeader: true,
+  getPConnect: null
+};
+
+CaseView.propTypes = {
+  icon: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.node),
+  subheader: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  showIconInHeader: PropTypes.bool,
+  caseInfo: PropTypes.objectOf(PropTypes.any),
+  getPConnect: PropTypes.func
+};

package/lib/templates/CaseView/CaseViewActionsMenu.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import PropTypes from "prop-types";
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+export default function CaseViewActionsMenu(props) {
+  const {getPConnect, availableActions, availableProcesses} = props;
+  const thePConn = getPConnect();
+
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const arMenuItems: Array<any> = [];
+
+
+  function _actionMenuActionsClick(data) {
+
+    const actionsAPI = thePConn.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction( data.ID, { ...data});
+    // after doing the action, close the menu...
+    handleClose();
+
+  }
+
+
+  availableActions.forEach( (action) => {
+    arMenuItems.push( <MenuItem key={action.ID} onClick={() => _actionMenuActionsClick(action)}>{action.name}</MenuItem> )
+  });
+
+  availableProcesses.forEach( (process) => {
+    arMenuItems.push( <MenuItem onClick={handleClose}>{process.name}</MenuItem> )
+  });
+
+
+  return (
+    <React.Fragment>
+      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+        Actions...
+      </Button>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        {arMenuItems}
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+CaseViewActionsMenu.defaultProps = {
+  availableActions: [],
+  availableProcesses: []
+}
+
+CaseViewActionsMenu.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  availableActions: PropTypes.arrayOf(PropTypes.object),
+  availableProcesses: PropTypes.arrayOf(PropTypes.any)
+};

package/lib/templates/CaseView/index.tsx

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

package/lib/templates/DataReference/DataReference.tsx

@@ -0,0 +1,290 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import SingleReferenceReadonly from '@pega/react-sdk-components/lib/components/templates/SingleReferenceReadOnly';
+import MultiReferenceReadonly from '@pega/react-sdk-components/lib/components/templates/MultiReferenceReadOnly';
+
+const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+declare const PCore: any;
+
+export default function DataReference(props) {
+  const {
+    children,
+    getPConnect,
+    label,
+    showLabel,
+    displayMode,
+    allowAndPersistChangesInReviewMode,
+    referenceType,
+    selectionMode,
+    displayAs,
+    ruleClass,
+    parameters,
+    hideLabel
+  } = props;
+  let childrenToRender = children;
+  const pConn = getPConnect();
+  const [dropDownDataSource, setDropDownDataSource] = useState(null);
+  const propsToUse = { label, showLabel, ...pConn.getInheritedProps() };
+  if (propsToUse.showLabel === false) {
+    propsToUse.label = '';
+  }
+  const rawViewMetadata = pConn.getRawMetadata();
+  const viewName = rawViewMetadata.name;
+  const [firstChildMeta] = rawViewMetadata.children;
+  const refList = rawViewMetadata.config.referenceList;
+  const canBeChangedInReviewMode = allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
+  let propName;
+  const isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+  let firstChildPConnect;
+
+  /* Only for dropdown when it has param use data api to get the data back and add it to datasource */
+  useEffect(() => {
+    if (
+      firstChildMeta?.type === "Dropdown" &&
+      rawViewMetadata.config?.parameters
+    ) {
+      const { value, key, text } = firstChildMeta.config.datasource.fields;
+      PCore.getDataApiUtils()
+        .getData(refList, {
+          dataViewParameters: parameters
+        })
+        .then((res) => {
+          if (res.data.data !== null) {
+            const ddDataSource = res.data.data
+              .map((listItem) => ({
+                key: listItem[key.split(" .", 2)[1]],
+                text: listItem[text.split(" .", 2)[1]],
+                value: listItem[value.split(" .", 2)[1]]
+              }))
+              .filter((item) => item.key);
+            // Filtering out undefined entries that will break preview
+            setDropDownDataSource(ddDataSource);
+          } else {
+            const ddDataSource: any = []
+            setDropDownDataSource(ddDataSource);
+          }
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error(err?.stack);
+          return Promise.resolve({
+            data: { data: [] }
+          });
+        });
+    }
+  }, [firstChildMeta, rawViewMetadata, parameters]);
+
+  if (firstChildMeta?.type !== 'Region') {
+    firstChildPConnect = getPConnect().getChildren()[0].getPConnect;
+    /* remove refresh When condition from those old view so that it will not be used for runtime */
+    if (firstChildMeta.config?.readOnly) {
+      delete firstChildMeta.config.readOnly;
+    }
+    if (firstChildMeta?.type === 'Dropdown') {
+      firstChildMeta.config.datasource.source = rawViewMetadata.config?.parameters
+        ? dropDownDataSource
+        : '@DATASOURCE '.concat(refList).concat('.pxResults');
+    } else if (firstChildMeta?.type === 'AutoComplete') {
+      firstChildMeta.config.datasource = refList;
+
+      /* Insert the parameters to the component only if present */
+      if (rawViewMetadata.config?.parameters) {
+        firstChildMeta.config.parameters = parameters;
+      }
+    }
+    // set displayMode conditionally
+    if (!canBeChangedInReviewMode) {
+      firstChildMeta.config.displayMode = displayMode;
+    }
+    if (firstChildMeta.type === 'SimpleTableSelect' && selectionMode === SELECTION_MODE.MULTI) {
+      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.selectionList);
+    } else {
+      propName = PCore.getAnnotationUtils().getPropertyName(firstChildMeta.config.value);
+    }
+  }
+
+  const handleSelection = event => {
+    const caseKey = pConn.getCaseInfo().getKey();
+    const refreshOptions = { autoDetectRefresh: true };
+    if (canBeChangedInReviewMode && pConn.getValue('__currentPageTabViewName')) {
+      getPConnect()
+        .getActionsApi()
+        .refreshCaseView(caseKey, pConn.getValue('__currentPageTabViewName'), null, refreshOptions);
+      PCore.getDeferLoadManager().refreshActiveComponents(pConn.getContextName());
+    } else {
+      const pgRef = pConn.getPageReference().replace('caseInfo.content', '');
+      getPConnect().getActionsApi().refreshCaseView(caseKey, viewName, pgRef, refreshOptions);
+    }
+
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
+    const propValue = event?.id || event?.target.value;
+    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+      PCore.getDataApiUtils()
+        .getCaseEditLock(caseKey)
+        .then(caseResponse => {
+          const pageTokens = pConn.getPageReference().replace('caseInfo.content', '').split('.');
+          let curr = {};
+          const commitData = curr;
+
+          pageTokens.forEach(el => {
+            if (el !== '') {
+              curr[el] = {};
+              curr = curr[el];
+            }
+          });
+
+          // expecting format like {Customer: {pyID:"C-100"}}
+          const propArr = propName.split('.');
+          propArr.forEach((element, idx) => {
+            if (idx + 1 === propArr.length) {
+              curr[element] = propValue;
+            } else {
+              curr[element] = {};
+              curr = curr[element];
+            }
+          });
+
+          PCore.getDataApiUtils()
+            .updateCaseEditFieldsData(
+              caseKey,
+              { [caseKey]: commitData },
+              caseResponse.headers.etag,
+              pConn.getContextName()
+            )
+            .then(response => {
+              PCore.getContainerUtils().updateChildContainersEtag(
+                pConn.getContextName(),
+                response.headers.etag
+              );
+            });
+        });
+    }
+  };
+
+  // Re-create first child with overridden props
+  // Memoized child in order to stop unmount and remount of the child component when data reference
+  // rerenders without any actual change
+  const recreatedFirstChild = useMemo(() => {
+    const { type, config } = firstChildMeta;
+    if (firstChildMeta?.type !== 'Region') {
+      pConn.clearErrorMessages({
+        property: propName
+      });
+      if (!canBeChangedInReviewMode && isDisplayModeEnabled && selectionMode === SELECTION_MODE.SINGLE) {
+        return (
+          <SingleReferenceReadonly
+            config={config}
+            getPConnect={firstChildPConnect}
+            label={propsToUse.label}
+            type={type}
+            displayAs={displayAs}
+            displayMode={displayMode}
+            ruleClass={ruleClass}
+            referenceType={referenceType}
+            hideLabel={hideLabel}
+            dataRelationshipContext={
+              rawViewMetadata.config.contextClass && rawViewMetadata.config.name ? rawViewMetadata.config.name : null
+            }
+          />
+        );
+      }
+
+      if (isDisplayModeEnabled && selectionMode === SELECTION_MODE.MULTI) {
+        return (
+          <MultiReferenceReadonly
+            config={config}
+            getPConnect={firstChildPConnect}
+            label={propsToUse.label}
+            hideLabel={hideLabel}
+          />
+        );
+      }
+
+      // In the case of a datasource with parameters you cannot load the dropdown before the parameters
+      if (
+        type === 'Dropdown' &&
+        rawViewMetadata.config?.parameters &&
+        dropDownDataSource === null
+      ) {
+        return null;
+      }
+
+      return firstChildPConnect().createComponent({
+        type,
+        config: {
+          ...config,
+          required: propsToUse.required,
+          visibility: propsToUse.visibility,
+          disabled: propsToUse.disabled,
+          label: propsToUse.label,
+          viewName: getPConnect().getCurrentView(),
+          parameters: rawViewMetadata.config.parameters,
+          readOnly: false,
+          localeReference: rawViewMetadata.config.localeReference,
+          ...(selectionMode === SELECTION_MODE.SINGLE ? { referenceType } : ''),
+          dataRelationshipContext:
+            rawViewMetadata.config.contextClass && rawViewMetadata.config.name
+              ? rawViewMetadata.config.name
+              : null,
+          hideLabel,
+          onRecordChange: handleSelection
+        }
+      });
+    }
+  }, [
+    firstChildMeta.config?.datasource?.source,
+    parameters,
+    dropDownDataSource,
+    propsToUse.required,
+    propsToUse.disabled
+  ]);
+
+  // Only include the views region for rendering when it has content
+  if (firstChildMeta?.type !== 'Region') {
+    const viewsRegion = rawViewMetadata.children[1];
+    if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+      childrenToRender = [recreatedFirstChild, ...children.slice(1)];
+    } else {
+      childrenToRender = [recreatedFirstChild];
+    }
+  }
+
+  return childrenToRender.length === 1 ? (
+    childrenToRender[0] ?? null
+  ) : (
+    <div>
+      {childrenToRender.map(child => (
+        <React.Fragment>{child}</React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+DataReference.defaultProps = {
+  label: undefined,
+  showLabel: undefined,
+  displayMode: undefined,
+  allowAndPersistChangesInReviewMode: false,
+  referenceType: '',
+  selectionMode: '',
+  displayAs: '',
+  ruleClass: '',
+  parameters: undefined,
+  hideLabel: false
+};
+
+DataReference.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  showLabel: PropTypes.func,
+  displayMode: PropTypes.string,
+  allowAndPersistChangesInReviewMode: PropTypes.bool,
+  referenceType: PropTypes.string,
+  selectionMode: PropTypes.string,
+  displayAs: PropTypes.string,
+  ruleClass: PropTypes.string,
+  parameters: PropTypes.arrayOf(PropTypes.string), // need to fix
+  hideLabel: PropTypes.bool
+};

package/lib/templates/DataReference/index.tsx

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

package/lib/templates/DefaultForm/DefaultForm.css

@@ -0,0 +1,25 @@
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column .grid-column {
+  grid-column: 1 / span 2;
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}