@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/tests/assets/sdk-r/components/create/override-sdk/field/TextInput/TextInput.tsx

@@ -4,10 +4,18 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface TextInputProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   fieldMetadata?: any;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function TextInput(props: TextInputProps) {
@@ -21,7 +29,6 @@ export default function TextInput(props: TextInputProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur */
     readOnly,
     testId,
@@ -29,14 +36,23 @@ export default function TextInput(props: TextInputProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
   const maxLength = fieldMetadata?.maxLength;
@@ -48,7 +64,7 @@ export default function TextInput(props: TextInputProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -87,6 +103,7 @@ export default function TextInput(props: TextInputProps) {
       slotProps={{
         input: { ...readOnlyProp, inputProps: { maxLength, ...testProps } }
       }}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Time/Time.tsx

@@ -5,9 +5,17 @@ import dayjs from 'dayjs';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface TimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Time here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Time(props: TimeProps) {
@@ -15,13 +23,35 @@ export default function Time(props: TimeProps) {
   const FieldValueList = getComponentFromMap('FieldValueList');
   const TextInput = getComponentFromMap('TextInput');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, helperText, displayMode, hideLabel, testId } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    readOnly,
+    helperText,
+    displayMode,
+    hideLabel,
+    testId,
+    showFieldMessage,
+    messageConfig = {}
+  } = props;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -71,7 +101,8 @@ export default function Time(props: TimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProps }
+          InputProps: { ...testProps },
+          sx: getFieldSx(status)
         }
       }}
     />

package/tests/assets/sdk-r/components/create/override-sdk/field/URL/URL.tsx

@@ -4,9 +4,17 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface URLComponentProps extends PConnFieldProps {
   // If any, enter additional props that only exist on URLComponent here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 // NOTE: that we had to change the name from URL to URLComponent
@@ -24,15 +32,17 @@ export default function URLComponent(props: URLComponentProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
   const [inputValue, setInputValue] = useState('');
 
@@ -40,12 +50,19 @@ export default function URLComponent(props: URLComponentProps) {
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
 
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
+
   useEffect(() => {
     setInputValue(value);
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -84,6 +101,7 @@ export default function URLComponent(props: URLComponentProps) {
       slotProps={{
         input: { inputProps: { ...testProps } }
       }}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/UserReference/UserReference.tsx

@@ -68,11 +68,15 @@ const UserReference = (props: UserReferenceProps) => {
         // if same user ref field is referred in view as editable & readonly formatted text
         // referenced users won't be available, so get user details from dx api
         const { getOperatorDetails } = PCore.getUserApi();
-        getOperatorDetails(userId).then((res: any) => {
-          if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
-            setUserName(res.data.pyOperatorInfo.pyUserName);
-          }
-        });
+        getOperatorDetails(userId)
+          .then((res: any) => {
+            if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+              setUserName(res.data.pyOperatorInfo.pyUserName);
+            }
+          })
+          .catch(e => {
+            console.error(e);
+          });
       }
     } else if (displayAs === DROPDOWN_LIST) {
       const queryPayload = {
@@ -97,7 +101,7 @@ const UserReference = (props: UserReferenceProps) => {
   let userReferenceComponent: any = null;
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={userName || ''} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {

package/tests/assets/sdk-r/components/create/override-sdk/infra/Assignment/Assignment.tsx

@@ -5,6 +5,8 @@ import CloseIcon from '@mui/icons-material/Close';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { useFocusFirstField, useScrolltoTop } from '@pega/react-sdk-components/lib/hooks';
+import AlertBanner from '@pega/react-sdk-components/lib/components/designSystemExtension/AlertBanner/AlertBanner';
+import { useValidationBanner } from './useValidationBanner';
 
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
@@ -23,18 +25,19 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   const MultiStep = getComponentFromMap('MultiStep');
 
   const { getPConnect, children, itemKey = '', isInModal = false, banners = [] } = props;
+  const validationMessages = useValidationBanner(itemKey);
   const thePConn = getPConnect();
 
   const [bHasNavigation, setHasNavigation] = useState(false);
   const [actionButtons, setActionButtons] = useState([]);
-  const [bIsVertical, setIsVertical] = useState(false);
+  const [stepIndicator, setStepIndicator] = useState<'horizontal' | 'vertical' | 'vertical-start'>('horizontal');
   const [arCurrentStepIndicies, setArCurrentStepIndicies] = useState<any[]>([]);
   const [arNavigationSteps, setArNavigationSteps] = useState<any[]>([]);
 
   const actionsAPI = thePConn.getActionsApi();
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localizationService = thePConn.getLocalizationService();
   const localeCategory = 'Assignment';
-  const localeReference = `${getPConnect().getCaseInfo().getClassName()}!CASE!${getPConnect().getCaseInfo().getName()}`.toUpperCase();
 
   // store off bound functions to above pointers
   const finishAssignment = actionsAPI.finishAssignment.bind(actionsAPI);
@@ -76,7 +79,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   function getStepsInfo(steps, formedSteps: any = []) {
     steps.forEach(step => {
       if (step.name) {
-        step.name = PCore.getLocaleUtils().getLocaleValue(step.name, undefined, localeReference);
+        step.name = localizationService.getLocalizedText(step.name);
       }
       if (step.steps) {
         formedSteps = getStepsInfo(step.steps, formedSteps);
@@ -88,8 +91,9 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   const scrollId = window.location.href.includes('embedded') ? '#pega-part-of-page' : '#portal';
+  const currentAssignmentViewName = getPConnect().getCaseInfo().getCurrentAssignmentViewName();
   useScrolltoTop(scrollId, children);
-  useFocusFirstField('Assignment', children);
+  useFocusFirstField('Assignment', currentAssignmentViewName);
 
   useEffect(() => {
     if (children) {
@@ -124,9 +128,15 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
         return;
       }
 
-      // set vertical navigation
-      const isVerticalTemplate = navigation.template?.toLowerCase() === 'vertical';
-      setIsVertical(isVerticalTemplate);
+      // set navigation mode
+      const navTemplate = navigation.template?.toLowerCase();
+      if (navTemplate === 'vertical') {
+        setStepIndicator('vertical');
+      } else if (navTemplate === 'vertical-left') {
+        setStepIndicator('vertical-start');
+      } else {
+        setStepIndicator('horizontal');
+      }
 
       if (navigation.steps) {
         const steps = JSON.parse(JSON.stringify(navigation.steps));
@@ -154,9 +164,14 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   function onSaveActionSuccess(data) {
-    actionsAPI.cancelAssignment(itemKey, false).then(() => {
-      PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
-    });
+    actionsAPI
+      .cancelAssignment(itemKey, false)
+      .then(() => {
+        PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CREATE_STAGE_SAVED, data);
+      })
+      .catch(e => {
+        console.error(e);
+      });
   }
 
   function buttonPress(sAction: string, sButtonType: string) {
@@ -297,10 +312,12 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
     refreshProps.forEach(prop => {
       PCore.getRefreshManager().registerForRefresh(
         'PROP_CHANGE',
-        thePConn.getActionsApi().refreshCaseView.bind(thePConn.getActionsApi(), caseKey, '', pageReference, {
-          ...refreshOptions,
-          refreshFor: prop[0]
-        }),
+        matchedPath => {
+          thePConn.getActionsApi().refreshCaseView(caseKey, '', pageReference, {
+            ...refreshOptions,
+            refreshFor: matchedPath || prop[0]
+          });
+        },
         `${pageReference}.${prop[1]}`,
         `${context}/${pageReference}`,
         context
@@ -310,7 +327,12 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   return (
     <div id='Assignment'>
-      {banners}
+      {validationMessages.length > 0 && (
+        <div style={{ marginBottom: '1rem' }}>
+          <AlertBanner id={`validation-banner-${itemKey}`} variant='urgent' messages={validationMessages} />
+        </div>
+      )}
+      {banners && banners.length > 0 && <div style={{ marginBottom: '1rem' }}>{banners}</div>}
       {bHasNavigation ? (
         <>
           <MultiStep
@@ -318,7 +340,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
             itemKey={itemKey}
             actionButtons={actionButtons}
             onButtonPress={buttonPress}
-            bIsVertical={bIsVertical}
+            stepIndicator={stepIndicator}
             arCurrentStepIndicies={arCurrentStepIndicies}
             arNavigationSteps={arNavigationSteps}
           >

package/tests/assets/sdk-r/components/create/override-sdk/infra/Assignment/useValidationBanner.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect, useCallback } from 'react';
+
+function formatError(error: any, localizedVal: Function): string {
+  if (typeof error === 'string') return localizedVal(error, 'Messages');
+  const label = error.label?.endsWith(':') ? error.label : `${error.label}:`;
+  return localizedVal(`${label} ${error.description}`, 'Messages');
+}
+
+/**
+ * Subscribes to the PCore store and returns formatted validation error messages
+ * for the given itemKey. Reacts to any ADD_MESSAGES / CLEAR_MESSAGES dispatch
+ * (blur, tab, submit, etc.) so the banner appears and clears in real time.
+ */
+export function useValidationBanner(itemKey: string): string[] {
+  const [messages, setMessages] = useState<string[]>([]);
+
+  const readMessages = useCallback(() => {
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const errors: any[] = PCore.getMessageManager().getValidationErrorMessages(itemKey) || [];
+    setMessages(errors.map(error => formatError(error, localizedVal)));
+  }, [itemKey]);
+
+  useEffect(() => {
+    readMessages();
+    return PCore.getStore().subscribe(readMessages);
+  }, [readMessages]);
+
+  return messages;
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/DeferLoad/DeferLoad.tsx

@@ -13,13 +13,13 @@ interface DeferLoadProps extends PConnProps {
   isTab: boolean;
   deferLoadId: string;
   lastUpdateCaseTime: any;
+  template?: string;
 }
 
-//
-// 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.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -35,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function DeferLoad(props: DeferLoadProps) {
-  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime } = props;
+  const { getPConnect, name, deferLoadId, isTab, lastUpdateCaseTime, template } = props;
   const [content, setContent] = useState<any>(null);
   const [isLoading, setLoading] = useState(true);
   const [currentLoadedAssignment, setCurrentLoadedAssignment] = useState('');
@@ -69,13 +69,13 @@ export default function DeferLoad(props: DeferLoadProps) {
 
   const getViewOptions = () => ({
     viewContext: resourceType,
-    pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal.classID, // 2nd arg empty string until typedef allows optional
+    pageClass: loadViewCaseID ? '' : (pConnect.getDataObject('') as any).pyPortal?.classID, // 2nd arg empty string until typedef allows optional
     container: isContainerPreview ? 'preview' : undefined,
     containerName: isContainerPreview ? 'preview' : undefined,
     updateData: isContainerPreview
   });
 
-  const onResponse = data => {
+  const onResponse = (data: any, isEditable = false) => {
     setLoading(false);
     if (deferLoadId) {
       PCore.getDeferLoadManager().start(
@@ -92,11 +92,16 @@ export default function DeferLoad(props: DeferLoadProps) {
         meta: data,
         options: {
           context: pConnect.getContextName(),
-          pageReference: pConnect.getPageReference()
+          pageReference: pConnect.getPageReference(),
+          target: pConnect.getTarget(),
+          hasForm: true,
+          viewName: (pConnect as any).viewName
         }
       };
       const configObject = PCore.createPConnect(config);
-      configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+      if (!isEditable) {
+        configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+      }
       setContent(createElement(createPConnectComponent(), configObject));
       if (deferLoadId) {
         PCore.getDeferLoadManager().stop(deferLoadId, getPConnect().getContextName());
@@ -120,6 +125,9 @@ export default function DeferLoad(props: DeferLoadProps) {
           })
           .then(data => {
             onResponse(data);
+          })
+          .catch(e => {
+            console.error(e);
           });
       } else {
         console.error('Cannot load the defer loaded view without container information');
@@ -131,7 +139,20 @@ export default function DeferLoad(props: DeferLoadProps) {
         .loadView(encodeURI(loadViewCaseID), name, getViewOptions())
         .then(data => {
           onResponse(data);
+        })
+        .catch(e => {
+          console.error(e);
         });
+    } else if (template === 'HierarchicalForm') {
+      const root = {
+        config: {
+          context: pConnect.getPageReference(),
+          name,
+          type: 'view'
+        },
+        type: 'reference'
+      };
+      onResponse(root, true);
     } else {
       getPConnect()
         .getActionsApi()

package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/FlowContainer.tsx

@@ -22,11 +22,10 @@ interface FlowContainerProps extends PConnProps {
   activeContainerItemID: string;
 }
 
-//
-// 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.
-//
+/**
+ * WARNING: This file is part of the infrastructure component responsible for working with Redux and managing the creation and update of Redux containers and PConnect.
+ * You may override Material components within this component if needed, but do not modify any container-related logic. Changing this logic can lead to unexpected behavior.
+ */
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -96,7 +95,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
   const localeCategory = 'Messages';
 
-  const key = `${thePConn.getCaseInfo().getClassName()}!CASE!${thePConn.getCaseInfo().getName()}`.toUpperCase();
+  const key = getPConnect()?.getCaseLocaleReference();
   const classes = useStyles();
 
   function getBuildName(): string {
@@ -199,7 +198,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
   }, [props]);
 
   const caseId = thePConn.getCaseSummary().content.pyID;
-  const urgency = getPConnect().getCaseSummary().assignments ? getPConnect().getCaseSummary().assignments?.[0].urgency : '';
+  const urgency = getPConnect().getCaseSummary().assignments ? getPConnect().getCaseSummary().assignments?.[0]?.urgency : '';
   const operatorInitials = Utils.getInitials(PCore.getEnvironmentInfo().getOperatorName() || '');
 
   const displayPageMessages = () => {
@@ -218,7 +217,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
               <CardHeader
                 id='assignment-header'
                 title={<Typography variant='h6'>{localizedVal(containerName, undefined, key)}</Typography>}
-                subheader={`${localizedVal('Task in', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
+                subheader={`${localizedVal('In', 'Todo')} ${caseId} \u2022 ${localizedVal('Priority', 'Todo')} ${urgency}`}
                 avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}

package/tests/assets/sdk-r/components/create/override-sdk/infra/LeftAlignVerticalTabs/LeftAlignVerticalTabs.tsx

@@ -27,7 +27,7 @@ const LeftAlignVerticalTabs: any = withStyles((/* theme */) => ({
   }
 }))((props: LeftAlignVerticalTabsProps) => (
   <div>
-    <Tab {...props} />
+    <Tab style={{ textAlign: 'left' }} {...props} />
     <Divider />
   </div>
 ));