@pega/dx-component-builder-sdk 25.1.16 → 26.1.10

package/tests/assets/sdk-r/components/create/override-sdk/template/CaseSummary/CaseSummary.tsx

@@ -12,51 +12,15 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
   // Get emitted components from map (so we can get any override that may exist)
   const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
 
-  const { getPConnect, children } = props;
+  const { children } = props;
   let { arPrimaryFields = [], arSecondaryFields = [] } = props;
 
-  const thePConn = getPConnect && getPConnect();
-  const theConfigProps: any = thePConn?.getConfigProps();
-
-  const status = theConfigProps?.status;
-  const showStatus = theConfigProps?.showStatus;
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'ModalContainer';
 
-  function prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
-    const { config, children } = pConnectMeta;
-    const pConnect = getPConnect();
-
-    const caseSummaryComponentObject: any = {};
-
-    const { type } = pConnectMeta;
-    const createdComponent = pConnect.createComponent({
-      type,
-      children: children ? [...children] : [],
-      config: {
-        ...config
-      }
-    });
-
-    caseSummaryComponentObject.value = createdComponent;
-    return caseSummaryComponentObject;
-  }
-
-  function prepareCaseSummaryData(summaryFieldChildren) {
-    const convertChildrenToSummaryData = kid => {
-      return kid?.map((childItem, index) => {
-        const childMeta = childItem.getPConnect().meta;
-        const caseSummaryComponentObject = prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
-        caseSummaryComponentObject.id = index + 1;
-        return caseSummaryComponentObject;
-      });
-    };
-    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
-  }
-
   if (arPrimaryFields.length === 0 && arSecondaryFields.length === 0) {
     for (const child of children as ReactElement[]) {
-      const childPConn = (child as ReactElement).props.getPConnect();
+      const childPConn = (child as ReactElement<any>).props.getPConnect();
       const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
       if (childPConnData.name.toLowerCase() === 'primary fields') {
         arPrimaryFields = childPConnData.children;
@@ -66,10 +30,13 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
           }
         });
       } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
-        const secondarySummaryFields = prepareCaseSummaryData(childPConn);
+        const secondaryChildren = childPConn.getChildren();
         arSecondaryFields = childPConnData.children;
         arSecondaryFields.forEach((field, index) => {
-          field.config.displayLabel = secondarySummaryFields[index]?.value?.props?.label;
+          const childItemPConnect = secondaryChildren[index]?.getPConnect();
+          const resolvedProps = childItemPConnect?.resolveConfigProps(childItemPConnect.getRawMetadata()?.config);
+          field.config.displayLabel = resolvedProps?.label || field.config.label;
+          field.getPConnect = secondaryChildren[index]?.getPConnect;
         });
       }
     }
@@ -77,8 +44,8 @@ export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>)
 
   return (
     <div id='CaseSummary'>
-      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
-      <CaseSummaryFields theFields={arSecondaryFields} />
+      <CaseSummaryFields theFields={arPrimaryFields} variant='primary' />
+      <CaseSummaryFields theFields={arSecondaryFields} variant='secondary' />
     </div>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/template/CaseView/CaseView.tsx

@@ -67,6 +67,10 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
 
   const classes = useStyles();
 
+  const dataObjectActions: any = thePConn.getValue('.actions', 'dataInfo') || {};
+  const dataObjectAvailableActions: any[] = dataObjectActions.availableActions || [];
+  const dataObjectCreateCaseActions: any[] = dataObjectActions.availableCreateCaseActions || [];
+
   const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
@@ -79,8 +83,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
    */
   function getChildRegionByName(inName: string): any {
     for (const child of children as ReactElement[]) {
-      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type?.toLowerCase();
-      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name?.toLowerCase();
+      const theMetadataType: string = (child as ReactElement<any>).props.getPConnect().getRawMetadata().type?.toLowerCase();
+      const theMetadataName: string = (child as ReactElement<any>).props.getPConnect().getRawMetadata().name?.toLowerCase();
       if (theMetadataType === 'region' && theMetadataName === inName) {
         return child;
       }
@@ -194,6 +198,8 @@ export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
           getPConnect={getPConnect}
           availableActions={availableActions}
           availableProcesses={availableProcesses}
+          dataObjectAvailableActions={dataObjectAvailableActions}
+          dataObjectCreateCaseActions={dataObjectCreateCaseActions}
           caseTypeName={caseTypeName}
           caseTypeID={caseTypeID}
         />

package/tests/assets/sdk-r/components/create/override-sdk/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -12,12 +12,23 @@ interface CaseViewActionsMenuProps extends PConnProps {
   // If any, enter additional props that only exist on this component
   availableActions: any[];
   availableProcesses: any[];
+  // Data object review actions (sourced from dataInfo.actions by the parent CaseView)
+  dataObjectAvailableActions?: any[];
+  dataObjectCreateCaseActions?: any[];
   caseTypeID: string;
   caseTypeName: string;
 }
 
 export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
-  const { getPConnect, availableActions, availableProcesses, caseTypeID, caseTypeName } = props;
+  const {
+    getPConnect,
+    availableActions,
+    availableProcesses,
+    dataObjectAvailableActions = [],
+    dataObjectCreateCaseActions = [],
+    caseTypeID,
+    caseTypeName
+  } = props;
   const thePConn = getPConnect();
 
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
@@ -77,6 +88,31 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     handleClose();
   }
 
+  function _dataObjectActionClick(action) {
+    const actionsAPI = thePConn.getActionsApi();
+    const openDataObjectAction = actionsAPI.openDataObjectAction.bind(actionsAPI);
+    const className = thePConn.getValue('.classID', 'dataInfo.content');
+    const dataRecord = thePConn.getValue('.content', 'dataInfo');
+    openDataObjectAction(className, dataRecord, action.ID, localizedVal(action.name, '', localeKey));
+    handleClose();
+  }
+
+  function _dataObjectCreateCaseClick(action) {
+    const actionsAPI = thePConn.getActionsApi();
+    const createWork = actionsAPI.createWork.bind(actionsAPI);
+    const targetDataReferenceField = action.targetDataReferenceField;
+    const field = targetDataReferenceField?.field;
+    const startingFields: any = {};
+    (targetDataReferenceField?.inputs || []).forEach(input => {
+      if (!startingFields[field]) {
+        startingFields[field] = {};
+      }
+      startingFields[field][input.linkedField] = thePConn.getValue(`.${input.linkedField}`, '');
+    });
+    createWork(action.ID, { startingFields });
+    handleClose();
+  }
+
   availableActions.forEach(action => {
     arMenuItems.push(
       <MenuItem key={action.ID} onClick={() => _actionMenuActionsClick(action)}>
@@ -93,12 +129,31 @@ export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
     );
   });
 
+  dataObjectAvailableActions.forEach(action => {
+    arMenuItems.push(
+      <MenuItem key={action.ID} onClick={() => _dataObjectActionClick(action)}>
+        {localizedVal(action.name, '', localeKey)}
+      </MenuItem>
+    );
+  });
+
+  dataObjectCreateCaseActions.forEach(action => {
+    arMenuItems.push(
+      <MenuItem key={action.ID} onClick={() => _dataObjectCreateCaseClick(action)}>
+        {localizedVal(action.name, '', localeKey)}
+      </MenuItem>
+    );
+  });
+
+  // Guard against opening an empty menu
+  const isMenuOpen = Boolean(anchorEl) && arMenuItems.length > 0;
+
   return (
     <>
-      <Button id='actions-menu' aria-controls='simple-menu' aria-haspopup='true' onClick={handleClick}>
+      <Button id='actions-menu' aria-controls='simple-menu' aria-haspopup='true' disabled={arMenuItems.length === 0} onClick={handleClick}>
         {localizedVal('Actions...', localeCategory)}
       </Button>
-      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={isMenuOpen} onClose={handleClose}>
         {arMenuItems}
       </Menu>
       <Snackbar

package/tests/assets/sdk-r/components/create/override-sdk/template/DataReference/DataReference.tsx

@@ -206,42 +206,65 @@ export default function DataReference(props: PropsWithChildren<DataReferenceProp
           .refreshCaseView(caseKey, viewName, pgRef, refreshOptions)
           .catch(() => {});
       }
-    } else if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
-      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).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];
-          }
-        });
+    } else if (hasAssociatedViewConfigured || allowImplicitRefresh) {
+      const pageReference = pConn.getPageReference();
+      let pgRef: any = null;
+      if (pageReference.startsWith('objectInfo')) {
+        pgRef = pageReference.replace('objectInfo.content', '');
+      } else {
+        pgRef = pageReference.replace('caseInfo.content', '');
+      }
+      const viewName = rawViewMetadata.name;
+      getPConnect()
+        .getActionsApi()
+        .refreshCaseView(caseKey, viewName, pgRef, refreshOptions)
+        .catch(() => {});
+    }
 
-        // 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];
-          }
-        });
+    if (propValue && canBeChangedInReviewMode && isDisplayModeEnabled) {
+      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>)
+        .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];
+            }
+          });
 
-        (
-          PCore.getDataApiUtils().updateCaseEditFieldsData(
-            caseKey,
-            { [caseKey]: commitData },
-            caseResponse.headers.etag,
-            pConn.getContextName()
-          ) as Promise<any>
-        ).then(response => {
-          PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), response.data.data.caseInfo.lastUpdateTime);
-          PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
+          // 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()
+            ) as Promise<any>
+          )
+            .then(response => {
+              PCore.getContainerUtils().updateParentLastUpdateTime(pConn.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+              PCore.getContainerUtils().updateRelatedContextEtag(pConn.getContextName(), response.headers.etag);
+            })
+            .catch(e => {
+              console.error(e);
+            });
+        })
+        .catch(e => {
+          console.error(e);
         });
-      });
     }
   };
 

package/tests/assets/sdk-r/components/create/override-sdk/template/DataReference/SearchForm.tsx

@@ -41,9 +41,8 @@ const checkIfSelectionsExist = getPConnect => {
 };
 
 const SearchForm = props => {
-  const { children, getPConnect, searchSelectCacheKey } = props;
-
-  const deferLoadedTabs = children[2];
+  const { children, getPConnect, searchSelectCacheKey, type, label } = props;
+  const deferLoadedTabs = type === 'ObjectReference' ? { props: { getPConnect } } : children[2];
   const cache: any = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
   const { selectedCategory } = cache;
   const firstTabId = getFirstVisibleTabId(deferLoadedTabs, selectedCategory);
@@ -114,7 +113,7 @@ const SearchForm = props => {
 
   return (
     <Box display='flex' flexDirection='column' gap={2}>
-      <Typography variant='h5'>{propsToUse.label}</Typography>
+      <Typography variant='h5'>{label ?? propsToUse.label}</Typography>
       {searchCategoriesComp}
       <TabContext value={currentTabId}>
         <Tabs style={{ display: 'none' }} value={currentTabId} onChange={(e, newValue) => setCurrentTabId(newValue)}>

package/tests/assets/sdk-r/components/create/override-sdk/template/DefaultForm/DefaultForm.css

@@ -32,3 +32,74 @@
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
 }
+
+.psdk-default-form-instruction-text ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+.psdk-default-form-instruction-text ol {
+  padding-left: 30px;
+  list-style-type: decimal;
+}
+
+/* Banner styles */
+.psdk-banner {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  gap: 0.75rem;
+}
+
+.psdk-banner-info {
+  background-color: color-mix(in srgb, var(--app-neutral-color) 12%, var(--app-form-bg-color));
+  border-color: var(--app-neutral-color);
+  color: var(--banner-text-color);
+}
+
+.psdk-banner-warning {
+  background-color: color-mix(in srgb, var(--app-warning-color-dark) 12%, var(--app-form-bg-color));
+  border-color: var(--app-warning-color-dark);
+  color: var(--app-warning-color-dark);
+}
+
+.psdk-banner-success {
+  background-color: color-mix(in srgb, var(--stepper-completed-bg-color) 12%, var(--app-form-bg-color));
+  border-color: var(--stepper-completed-bg-color);
+  color: var(--stepper-completed-bg-color);
+}
+
+.psdk-banner-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.psdk-banner-content {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.psdk-banner-content p {
+  margin: 0;
+}
+
+.psdk-banner-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-banner-dismiss:hover {
+  opacity: 1;
+}

package/tests/assets/sdk-r/components/create/override-sdk/template/DefaultForm/DefaultForm.tsx

@@ -1,6 +1,11 @@
-import { createElement, type PropsWithChildren } from 'react';
+import { createElement, useState, type PropsWithChildren } from 'react';
 
-import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { getInstructions, getInstructionsType, getDismissBanner, mapInstructionsTypeToBannerVariant } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
@@ -21,9 +26,21 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
+const bannerIconMap = {
+  info: <InfoOutlinedIcon fontSize='small' />,
+  warning: <WarningAmberIcon fontSize='small' />,
+  success: <CheckCircleOutlineIcon fontSize='small' />
+};
+
 export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const instructionsType = getInstructionsType(props.instructions);
+  const isBanner = typeof props.instructions === 'object' && (props.instructions as any)?.isBanner;
+  const dismissBanner = getDismissBanner(props.instructions);
+  const bannerVariant = mapInstructionsTypeToBannerVariant(instructionsType);
 
   let divClass: string;
 
@@ -51,15 +68,34 @@ export default function DefaultForm(props: PropsWithChildren<DefaultFormProps>)
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
+  const renderInstructions = () => {
+    if (!instructions || bannerDismissed) return null;
+
+    if (isBanner) {
+      return (
+        <div className={`psdk-banner psdk-banner-${bannerVariant}`}>
+          <div className='psdk-banner-icon'>{bannerIconMap[bannerVariant]}</div>
+          <div className='psdk-banner-content' dangerouslySetInnerHTML={{ __html: instructions }} />
+          {dismissBanner && (
+            <button type='button' className='psdk-banner-dismiss' aria-label='Dismiss banner' onClick={() => setBannerDismissed(true)}>
+              <CloseIcon fontSize='small' />
+            </button>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className='psdk-default-form-instruction-text'>
+        {/* server performs sanitization method for instructions html content */}
+        <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+      </div>
+    );
+  };
+
   return (
     <>
-      {instructions && (
-        <div className='psdk-default-form-instruction-text'>
-          {/* server performs sanitization method for instructions html content */}
-          {}
-          <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
-        </div>
-      )}
+      {renderInstructions()}
       <div className={divClass}>{dfChildren}</div>
     </>
   );

package/tests/assets/sdk-r/components/create/override-sdk/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -14,6 +14,7 @@ interface FieldGroupTemplateProps extends PConnProps {
   displayMode?: string;
   fieldHeader?: string;
   allowTableEdit: boolean;
+  allowActions?: any;
 }
 
 export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
@@ -30,6 +31,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     heading = '',
     displayMode,
     fieldHeader,
+    allowActions,
     allowTableEdit: allowAddEdit
   } = props;
   const pConn = getPConnect();
@@ -39,6 +41,11 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
   const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
   const HEADING = heading ?? 'Row';
 
+  const hasAllowActions = Object.keys(allowActions ?? {}).length > 0;
+  const { allowAdd: actionAdd, allowDelete: actionDelete } = allowActions ?? {};
+  const allowAdd = hasAllowActions ? (actionAdd ?? true) : (allowAddEdit ?? true);
+  const allowDelete = hasAllowActions ? (actionDelete ?? true) : (allowAddEdit ?? true);
+
   useLayoutEffect(() => {
     if (!isReadonlyMode) {
       // @ts-expect-error - Expected 3 arguments, but got 1
@@ -72,7 +79,7 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
         pConn.getListActions().deleteEntry(index);
       }
     };
-    if (referenceList.length === 0 && allowAddEdit !== false) {
+    if (referenceList.length === 0 && allowAdd) {
       addFieldGroupItem();
     }
 
@@ -87,8 +94,8 @@ export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
     return (
       <FieldGroupList
         items={MemoisedChildren}
-        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
-        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
+        onAdd={allowAdd ? addFieldGroupItem : undefined}
+        onDelete={allowDelete ? deleteFieldGroupItem : undefined}
       />
     );
   }