@pega/react-sdk-overrides 0.23.7 → 0.23.8

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/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/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/LeftAlignVerticalTabs';
 
 
 // The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)

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/CaseViewActionsMenu/index.tsx

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

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.8",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [