@pega/react-sdk-overrides 0.23.7 → 0.23.9

package/lib/designSystemExtensions/DetailsFields/DetailsFields.tsx

@@ -40,26 +40,21 @@ export default function DetailsFields(props) {
   fields?.forEach((field, index) => {
     const thePConn = field.getPConnect();
     const theCompType = thePConn.getComponentName().toLowerCase();
-    const { label, value } = thePConn.getConfigProps();
-    // If value is "" then also we would have to get viewMetadata using getReferencedView.
-    if (theCompType === 'reference' || value === '') {
-      const configObj = thePConn?.getReferencedView();
-      configObj.config.readOnly = theCompType === 'reference';
-      configObj.config.displayMode = 'LABELS_LEFT';
-      const propToUse = { ...thePConn.getInheritedProps() };
-      configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
-      fieldComponents.push({
-        type: theCompType,
-        label,
-        value: (
-          <React.Fragment key={index}>
-            {createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}
-          </React.Fragment>
-        )
-      });
-    } else {
-      fieldComponents.push({ type: theCompType, value, label });
-    }
+    const { label } = thePConn.getConfigProps();
+    const configObj = thePConn?.getReferencedView();
+    configObj.config.readOnly = theCompType === 'reference';
+    configObj.config.displayMode = 'LABELS_LEFT';
+    const propToUse = { ...thePConn.getInheritedProps() };
+    configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
+    fieldComponents.push({
+      type: theCompType,
+      label,
+      value: (
+        <React.Fragment key={index}>
+          {createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}
+        </React.Fragment>
+      )
+    });
   });
 
   function getGridItemLabel(field: any, keyVal: string) {
@@ -110,7 +105,6 @@ export default function DetailsFields(props) {
   }
 
   function getGridItem(field: any, keyVal: string) {
-
     return (
       <Grid item xs={12} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>

package/lib/designSystemExtensions/FieldGroupList/FieldGroupList.tsx

@@ -24,26 +24,30 @@ const FieldGroupList = props => {
           {props.items.map(item => (
             <Grid item style={{ width: '100%' }}>
               <b>{item.name}</b>
-              <button
-                type='button'
-                style={{ float: 'right' }}
-                className='psdk-utility-button'
-                id={`delete-row-${Utils.getLastChar(item.name)}`}
-                onClick={() => {
-                  props.onDelete(item.id);
-                }}
-              >
-                <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
-              </button>
+              {props.onDelete && (
+                <button
+                  type='button'
+                  style={{ float: 'right' }}
+                  className='psdk-utility-button'
+                  id={`delete-row-${Utils.getLastChar(item.name)}`}
+                  onClick={() => {
+                    props.onDelete(item.id);
+                  }}
+                >
+                  <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
+                </button>
+              )}
               {item.children}
               <br />
-              <Divider />
+              {props.onAdd && <Divider />}
               <br />
             </Grid>
           ))}
-          <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
-            +Add
-          </Link>
+          {props.onAdd && (
+            <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+              +Add
+            </Link>
+          )}
         </Grid>
       </Grid>
     </Grid>

package/lib/forms/AutoComplete/AutoComplete.tsx

@@ -5,6 +5,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
 import isDeepEqual from 'fast-deep-equal/react';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface IOption {
   key: string;
@@ -42,7 +43,6 @@ export default function AutoComplete(props) {
     placeholder,
     value = '',
     validatemessage,
-    onChange,
     readOnly,
     testId,
     displayMode,
@@ -60,6 +60,11 @@ export default function AutoComplete(props) {
   let selectedValue: any = '';
   const helperTextToDisplay = validatemessage || helperText;
 
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = thePConn.getStateProps().value;
+
+
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -137,7 +142,8 @@ export default function AutoComplete(props) {
   }
 
   const handleChange = (event: object, newValue) => {
-    onChange({ value: newValue ? newValue.key : '' });
+    const val = newValue ? newValue.key : '' ;
+    handleEvent(actionsApi, 'changeNblur', propName, val);
   };
 
   const handleInputValue = (event, newInputValue) => {

package/lib/forms/AutoComplete/config-ext.json

@@ -0,0 +1,11 @@
+{
+  "name": "AutoComplete",
+  "label": "Search box",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "componentKey" : "AutoComplete",
+  "icon": "",
+  "properties": [
+  ]
+}

package/lib/forms/Checkbox/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "Checkbox",
+  "label": "Checkbox",
+  "description": "Boolean",
+  "type": "Field",
+  "subtype": "Boolean",
+  "componentKey" : "Checkbox",
+  "properties": [
+  ]
+}

package/lib/forms/Currency/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "Currency",
+  "label": "Currency",
+  "description": "Currency",
+  "type": "Field",
+  "subtype": "Decimal-Currency",
+  "componentKey" : "Currency",
+  "properties": [
+  ]
+}

package/lib/forms/Date/config-ext.json

@@ -0,0 +1,10 @@
+{
+  "name": "Date",
+  "label": "Date only",
+  "description": "Date only",
+  "type": "Field",
+  "subtype": "Date",
+  "componentKey" : "Date",
+  "properties": [
+  ]
+}

package/lib/helpers/reactContextHelpers.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+
+// This file contains a shared access point for any React contexts that may need to be
+//  defined/used across various components.
+
+//  For example, the AppShell wants to use a NavContext that interacts with
+//  that context's consumption in the NavBar to handle clicks for opening/closing
+//  aspects of the NavBar
+export const NavContext = createContext({open: false, setOpen: f => f});
+export const useNavBar = () => useContext(NavContext);

package/lib/infra/Assignment/Assignment.tsx

@@ -10,7 +10,7 @@ import CloseIcon from '@material-ui/icons/Close';
 declare const PCore: any;
 
 export default function Assignment(props) {
-  const { getPConnect, children, itemKey, isCreateStage } = props;
+  const { getPConnect, children, itemKey, isInModal } = props;
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
@@ -164,7 +164,9 @@ export default function Assignment(props) {
           // check if create stage (modal)
           const { PUB_SUB_EVENTS } = PCore.getConstants();
           const { publish } = PCore.getPubSubUtils();
-          if (isCreateStage) {
+          const isAssignmentInCreateStage = thePConn.getCaseInfo().isAssignmentInCreateStage();
+          const isLocalAction = thePConn.getCaseInfo().isLocalAction() || getPConnect().getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+          if (isAssignmentInCreateStage && isInModal && !isLocalAction) {
             const cancelPromise = cancelCreateStageAssignment(itemKey);
 
             cancelPromise
@@ -289,13 +291,13 @@ Assignment.propTypes = {
   children: PropTypes.node.isRequired,
   getPConnect: PropTypes.func.isRequired,
   itemKey: PropTypes.string,
-  isCreateStage: PropTypes.bool
+  isInModal: PropTypes.bool
   // actionButtons: PropTypes.object
   // buildName: PropTypes.string
 };
 
 Assignment.defaultProps = {
   itemKey: null,
-  isCreateStage: false
+  isInModal: false
   // buildName: null
 };

package/lib/infra/Attachment/Attachment.tsx

@@ -133,12 +133,13 @@ export default function Attachment(props) {
       },
       primary: {
         type: att.type,
-        name: att.name,
+        name: att.error ? att.fileName : att.name,
         icon: "trash",
         click: removeFile,
       },
       secondary: {
-        text: att.meta
+        text: att.meta,
+        error: att.error
       },
       actions
     };
@@ -158,7 +159,41 @@ export default function Attachment(props) {
 
     const onUploadProgress = () => {};
 
-    const errorHandler = () => {};
+    const errorHandler = (isFetchCanceled) => {
+      return (error) => {
+        if (!isFetchCanceled(error)) {
+          let uploadFailMsg = pConn.getLocalizedValue('Something went wrong');
+          if (error.response && error.response.data && error.response.data.errorDetails) {
+            uploadFailMsg = pConn.getLocalizedValue(error.response.data.errorDetails[0].localizedValue);
+          }
+          myFiles[0].meta = uploadFailMsg;
+          myFiles[0].error = true;
+          myFiles[0].fileName = pConn.getLocalizedValue('Unable to upload file');
+          arFileList$ = myFiles.map((att) => {
+            return getNewListUtilityItemProps({
+              att,
+              downloadFile: null,
+              cancelFile: null,
+              deleteFile: null,
+              removeFile: null
+            });
+          });
+          setFile((current) => {
+            return {
+              ...current,
+              props: {
+                ...current.props,
+                arFileList$
+              },
+              inProgress: false,
+              attachmentUploaded: true,
+              showMenuIcon: false
+            };
+          });
+        }
+        throw error;
+      };
+    };
 
     PCore.getAttachmentUtils()
       .uploadAttachment(

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -286,7 +286,7 @@ const ModalViewContainer = props => {
         </DialogTitle>
         <DialogContent className={classes.dlgContent}>
           {bShowModal ? (
-            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isCreateStage>
+            <Assignment getPConnect={createdView.getPConnect} itemKey={itemKey} isInModal>
               {arNewChildrenAsReact}
             </Assignment>
           ) : (

package/lib/infra/NavBar/NavBar.tsx

@@ -34,7 +34,7 @@ import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import { useNavBar } from "@pega/react-sdk-components/lib/components/templates/AppShell/AppShell";
+import { useNavBar } from "@pega/react-sdk-components/lib/components/helpers/reactContextHelpers";
 import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
 
 declare const PCore;

package/lib/infra/VerticalTabs/{LeftAlignVerticalTab.tsx → LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx}

@@ -13,7 +13,7 @@ import {
 
 // In this styling, "root" is the top-level "Tab" object (which is the button)
 //  and the button contains spans that will match on the '> span'
-const LeftAlignVerticalTab: any = withStyles((/* theme */) => ({
+const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   root: {
     width: '100%',
     maxWidth: '100%',
@@ -24,4 +24,4 @@ const LeftAlignVerticalTab: any = withStyles((/* theme */) => ({
   },
 }))((props) => <div><Tab {...props} /><Divider /></div>);
 
-export default LeftAlignVerticalTab;
+export default LeftAlignVerticalTabs;

package/lib/infra/VerticalTabs/LeftAlignVerticalTabs/index.tsx

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

package/lib/infra/VerticalTabs/{VerticalTabs.tsx → VerticalTabs/VerticalTabs.tsx}

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles'
 
 import Tabs from '@material-ui/core/Tabs';
-import LeftAlignVerticalTab from './LeftAlignVerticalTab';
+import LeftAlignVerticalTab from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/LeftAlignVerticalTabs';
 
 
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)

package/lib/templates/AppShell/AppShell.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState, createContext, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles';
 
+import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
+
 // import {
 //   Avatar,
 //   Toaster,
@@ -33,9 +35,6 @@ const useStyles = makeStyles((theme) => ({
 declare const PCore;
 
 
-const NavContext = createContext({open: false, setOpen: f => f});
-export const useNavBar = () => useContext(NavContext);
-
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template. This could be a combination of things but it knows...

package/lib/templates/AppShell/index.tsx

@@ -1 +1 @@
-export { default } from './AppShell';
+export { default } from './AppShell';

package/lib/templates/CaseView/CaseView.tsx

@@ -10,8 +10,8 @@ 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 CaseViewActionsMenu from "@pega/react-sdk-components/lib/components/templates/CaseViewActionsMenu";
+import VerticalTabs from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/VerticalTabs';
 import DeferLoad from '@pega/react-sdk-components/lib/components/infra/DeferLoad';
 
 

package/lib/templates/{CaseView → CaseViewActionsMenu}/CaseViewActionsMenu.tsx

@@ -27,7 +27,7 @@ export default function CaseViewActionsMenu(props) {
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction( data.ID, { ...data});
+    openLocalAction( data.ID, { ...data, containerName: 'modal', type: 'express'});
     // after doing the action, close the menu...
     handleClose();
 

package/lib/templates/CaseViewActionsMenu/index.tsx

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

package/lib/templates/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -16,7 +16,8 @@ export default function FieldGroupTemplate(props) {
     getPConnect,
     lookForChildInConfig,
     heading,
-    displayMode
+    displayMode,
+    allowTableEdit: allowAddEdit
   } = props;
   const pConn = getPConnect();
   const resolvedList = getReferenceList(pConn);
@@ -44,7 +45,7 @@ export default function FieldGroupTemplate(props) {
         pConn.getListActions().deleteEntry(index);
       }
     };
-    if (referenceList.length === 0) {
+    if (referenceList.length === 0 && allowAddEdit !== false) {
       addFieldGroupItem();
     }
 
@@ -59,8 +60,8 @@ export default function FieldGroupTemplate(props) {
     return (
       <FieldGroupList
         items={MemoisedChildren}
-        onAdd={addFieldGroupItem}
-        onDelete={deleteFieldGroupItem}
+        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
+        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
       />
     );
   }

package/lib/templates/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -189,6 +189,8 @@ export default function SimpleTableManual(props) {
   }
 
   const formatRowsData = data => {
+    if(!data) return {};
+
     return data.map(item => {
       return displayedColumns.reduce((dataForRow, colKey) => {
         dataForRow[colKey] = getRowValue(item, colKey);
@@ -585,7 +587,7 @@ export default function SimpleTableManual(props) {
                 .slice(0)
                 .map(row => {
                   return (
-                    <TableRow key={row[1]}>
+                    <TableRow key={row[displayedColumns[0]]}>
                       {displayedColumns.map(colKey => {
                         return (
                           <TableCell key={colKey} className={classes.tableCell}>

package/lib/widgets/FileUtility/ActionButtonsForFileUtil/index.tsx

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

package/lib/widgets/FileUtility/{FileUtility.tsx → FileUtility/FileUtility.tsx}

@@ -3,7 +3,7 @@ import TextField from '@material-ui/core/TextField';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import download from "downloadjs";
 import SummaryList from '@pega/react-sdk-components/lib/components/widgets/SummaryList';
-import ActionButtonsForFileUtil from './ActionButtonsForFileUtil';
+import ActionButtonsForFileUtil from '@pega/react-sdk-components/lib/components/widgets/FileUtility/ActionButtonsForFileUtil';
 import './FileUtility.css';
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';

package/lib/widgets/FileUtility/FileUtility/index.tsx

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

package/lib/widgets/SummaryItem/SummaryItem.tsx

@@ -44,7 +44,7 @@ export default function SummaryItem(props) {
             <img className="psdk-utility-card-actions-svg-icon" src={`${imagePath$}${item.primary.icon}.svg`}></img>
           </button>
         </div>)}
-        {item.secondary.text && (<div>{item.secondary.text}</div>)}
+        {item.secondary.text && (<div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>)}
       </div>
       <div className="psdk-utility-action">
         {menuIconOverride$ && (<button type="button" className="psdk-utility-button" onClick={removeAttachment}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.7",
+  "version": "0.23.9",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [