Mod/dec/26 fixes

packages/react-sdk-components/src/bridge/react_pconnect.jsx

@@ -212,6 +212,15 @@ class PConnect extends Component {
       this.c11nEnv.removeFormField();
       setVisibilityForList(this.c11nEnv, false);
     }
+    // Remove the component's field node from the context tree on unmount.
+    // Without this, field references (e.g. Dropdowns, AutoComplete) from a previous
+    // step persist in ContextTreeManager.rootNodes.references and get incorrectly
+    // included in subsequent step submission payloads, causing 400 errors.
+    try {
+      this.c11nEnv.removeNode();
+    } catch {
+      // Ignore if already removed
+    }
   }
 
   /*

packages/react-sdk-components/src/components/field/SelectableCard/SelectableCard.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Radio, Checkbox, FormControlLabel, Card, CardContent, Typography } from '@mui/material';
 import { resolveReferenceFields } from './utils';
 
@@ -42,7 +43,13 @@ export default function SelectableCard(props) {
     if (input) input.click();
   };
 
-  let radioItemSelected = false;
+  const radioItemSelected = type === 'radio' && (cardDataSource || []).some(item => radioBtnValue === item[recordKey]);
+
+  useEffect(() => {
+    if (type === 'radio' && setIsRadioCardSelected) {
+      setIsRadioCardSelected(radioItemSelected);
+    }
+  }, [radioItemSelected, type, setIsRadioCardSelected]);
 
   return (
     <>
@@ -176,14 +183,8 @@ export default function SelectableCard(props) {
           </div>
         );
 
-        if (type === 'radio' && radioBtnValue === item[recordKey]) {
-          radioItemSelected = true;
-        }
-
         return component;
       })}
-
-      {type === 'radio' && setIsRadioCardSelected && setIsRadioCardSelected(radioItemSelected)}
     </>
   );
 }

packages/react-sdk-components/src/components/helpers/simpleTableHelpers.ts

@@ -114,9 +114,12 @@ const SUPPORTED_FIELD_TYPES = [
 export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
   let primaryFields: any = [];
   let configFields: any = [];
+  const safeRawFields = rawFields || [];
 
   if (primaryFieldsViewIndex > -1) {
-    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    // @ts-ignore
+    const qualifiedName = PCore.getNameSpaceUtils().getDefaultQualifiedName(PRIMARY_FIELDS);
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(qualifiedName);
     if (Array.isArray(primaryFieldVMD)) {
       primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
       primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
@@ -129,7 +132,7 @@ export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex)
     }
   }
 
-  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  configFields = [...safeRawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...safeRawFields.slice(primaryFieldsViewIndex + 1)];
   // filter duplicate fields after combining raw fields and primary fields
   return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
 };
@@ -198,9 +201,11 @@ export function getFieldLabel(fieldConfig) {
 export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
   const labelsOfFields: any = [];
   const { columnsRawConfig = [] } = options;
+  // @ts-ignore
+  const qualifiedPrimaryFields = PCore.getNameSpaceUtils().getDefaultQualifiedName(PRIMARY_FIELDS);
   fields.forEach((field, idx) => {
     const rawColumnConfig = columnsRawConfig[idx]?.config;
-    if (field.config.value === PRIMARY_FIELDS) {
+    if (field.config.value === PRIMARY_FIELDS || field.config.value === qualifiedPrimaryFields) {
       labelsOfFields.push('');
     } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
       labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
@@ -217,7 +222,7 @@ export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex,
         let label = configFields[i].config?.label;
         if (isFLProperty(label)) {
           label = getFieldLabel(configFields[i].config);
-        } else if (label.startsWith('@')) {
+        } else if (label?.startsWith('@')) {
           label = label.substring(3);
         }
         if (pConnect) {
@@ -242,12 +247,19 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
   });
 
   const fieldDefs = configFields.map((field, index) => {
+    let name = field.config.value;
+    if (name.startsWith('@')) {
+      name = name.substring(name.indexOf(' ') + 1);
+    }
+    if (name.startsWith('.')) {
+      name = name.substring(1);
+    }
     return {
       type: 'text',
       label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
-      name: field.config.value.substr(4),
+      name,
       cellRenderer: TABLE_CELL,
       sort: false,
       noContextMenu: true,
@@ -256,7 +268,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
         ...field
       },
       // BUG-615253: Workaround for autosize in table with lazy loading components
-      width: getFieldWidth(field, fields[index].config.label)
+      width: getFieldWidth(field, fieldsLabels[index])
     };
   });
 

packages/react-sdk-components/src/components/helpers/template-utils.ts

@@ -61,6 +61,11 @@ export function getInstructions(pConnect, instructions: string = 'casestep'): st
     return undefined;
   }
 
+  // Handle instructions as object (returned from paragraph processing)
+  if (typeof instructions === 'object' && instructions !== null) {
+    return (instructions as any).htmlContent;
+  }
+
   // If the annotation wasn't processed correctly, don't return any instruction text
   if (instructions?.startsWith('@PARAGRAPH')) {
     return undefined;

packages/react-sdk-components/src/components/infra/Assignment/Assignment.tsx

@@ -30,7 +30,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
 
   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[]>([]);
 
@@ -128,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));
@@ -301,10 +307,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
@@ -327,7 +335,7 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
             itemKey={itemKey}
             actionButtons={actionButtons}
             onButtonPress={buttonPress}
-            bIsVertical={bIsVertical}
+            stepIndicator={stepIndicator}
             arCurrentStepIndicies={arCurrentStepIndicies}
             arNavigationSteps={arNavigationSteps}
           >

packages/react-sdk-components/src/components/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -315,7 +315,7 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
 
   return (
     <>
-      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth='sm' fullWidth>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title' maxWidth='md' fullWidth>
         <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>

packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.css

@@ -146,6 +146,69 @@ mat-horizontal-stepper {
   border-left-color: var(--app-neutral-color);
 }
 
+.psdk-vertical-stepper-container {
+  display: grid;
+  gap: 2rem;
+}
+
+.psdk-vertical-stepper-container.stepper-end {
+  grid-template-columns: 1fr minmax(12rem, auto);
+  grid-template-areas: 'content stepper';
+}
+
+.psdk-vertical-stepper-container.stepper-start {
+  grid-template-columns: minmax(12rem, auto) 1fr;
+  grid-template-areas: 'stepper content';
+}
+
+.psdk-stepper-rail {
+  grid-area: stepper;
+}
+
+.psdk-stepper-content {
+  grid-area: content;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-header {
+  height: auto;
+  overflow: visible;
+  padding: 0.75rem 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-icon {
+  flex-shrink: 0;
+}
+
+.psdk-stepper-rail .psdk-vertical-step {
+  position: relative;
+}
+
+.psdk-stepper-rail .psdk-vertical-step-body {
+  display: none;
+}
+
+.psdk-stepper-rail .psdk-vertical-step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 12px;
+  top: calc(0.75rem + 24px + 4px);
+  bottom: -4px;
+  width: 1px;
+  background-color: var(--app-neutral-color);
+}
+
+.psdk-stepper-rail .psdk-vertical-step-label {
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--text-secondary-color);
+}
+
+.psdk-stepper-rail .current .psdk-vertical-step-label {
+  font-weight: 700;
+  color: var(--app-text-color);
+}
+
 .psdk-horizontal-stepper {
   background-color: transparent;
   display: block;

packages/react-sdk-components/src/components/infra/MultiStep/MultiStep.tsx

@@ -10,7 +10,7 @@ interface MultiStepProps extends PConnProps {
   itemKey: string;
   actionButtons: any[];
   onButtonPress: any;
-  bIsVertical: boolean;
+  stepIndicator?: 'horizontal' | 'vertical' | 'vertical-start';
   arNavigationSteps: any;
 }
 
@@ -19,7 +19,9 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
   const AssignmentCard = getComponentFromMap('AssignmentCard');
 
   const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
-  const { bIsVertical, arNavigationSteps } = props;
+  const { stepIndicator = 'horizontal', arNavigationSteps } = props;
+
+  const isVertical = stepIndicator === 'vertical' || stepIndicator === 'vertical-start';
 
   let currentStep = arNavigationSteps.find(({ visited_status: vs }) => vs === 'current');
   if (!currentStep) {
@@ -56,59 +58,28 @@ export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
 
   return (
     <div>
-      {bIsVertical ? (
-        <div className='psdk-vertical-stepper'>
-          {arNavigationSteps.map((mainStep, index) => {
-            return (
-              <React.Fragment key={mainStep.actionID}>
-                <div className='psdk-vertical-step'>
-                  <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
-                    <div className={`psdk-vertical-step-icon`}>
-                      <div className='psdk-vertical-step-icon-content'>
-                        <span>{index + 1}</span>
-                      </div>
+      {isVertical ? (
+        <div className={`psdk-vertical-stepper-container ${stepIndicator === 'vertical-start' ? 'stepper-start' : 'stepper-end'}`}>
+          <div className='psdk-stepper-rail'>
+            {arNavigationSteps.map((mainStep, index) => (
+              <div key={mainStep.actionID} className='psdk-vertical-step'>
+                <div className={`psdk-vertical-step-header ${mainStep.visited_status}`}>
+                  <div className='psdk-vertical-step-icon'>
+                    <div className='psdk-vertical-step-icon-content'>
+                      <span>{index + 1}</span>
                     </div>
-                    <div className='psdk-vertical-step-label'>{mainStep.visited_status === 'current' && mainStep.name}</div>
-                  </div>
-                  <div className={_getVBodyClass(index)}>
-                    {mainStep?.steps && (
-                      <ul
-                        style={{
-                          paddingInlineStart: '0rem',
-                          marginLeft: '-7px'
-                        }}
-                      >
-                        {mainStep.steps.forEach(subStep => {
-                          <li className='psdk-sub-step-list'>
-                            <div style={{ display: 'inline-flex' }}>
-                              {subStep.visited_status === 'current' && <img className='psdk-current-svg-icon' src='{svgCurrent}' />}
-                              {subStep.visited_status !== 'current' && <img className='psdk-not-current-svg-icon' src='{svgNotCurrent}' />}
-                              {subStep.visited_status === 'current' && <label className='psdk-sub-step-current'>{subStep.name}</label>}
-                              {subStep.visited_status !== 'current' && <label className='psdk-sub-step-not-current'>{subStep.name}</label>}
-                            </div>
-                            {subStep.visited_status === 'current' && (
-                              <div>
-                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                                  {children}
-                                </AssignmentCard>
-                              </div>
-                            )}
-                          </li>;
-                        })}
-                      </ul>
-                    )}
-                    {!mainStep?.steps && mainStep.visited_status === 'current' && (
-                      <div style={{ paddingLeft: 20 }}>
-                        <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
-                          {children}
-                        </AssignmentCard>
-                      </div>
-                    )}
                   </div>
+                  <div className='psdk-vertical-step-label'>{mainStep.name}</div>
                 </div>
-              </React.Fragment>
-            );
-          })}
+                {!isLastStep(index) && <div className={_getVBodyClass(index)} />}
+              </div>
+            ))}
+          </div>
+          <div className='psdk-stepper-content'>
+            <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+              {children}
+            </AssignmentCard>
+          </div>
         </div>
       ) : (
         <div className='psdk-horizontal-stepper'>

packages/react-sdk-components/src/components/infra/NavBar/NavBar.tsx

@@ -56,7 +56,8 @@ const iconMap = {
   'pi pi-tablet': <TabletAndroidOutlineIcon fontSize='large' />,
   'pi pi-ambulance': <AirportShuttleOutlinedIcon fontSize='large' />,
   'pi pi-ink-solid': <EditOutlinedIcon fontSize='large' />,
-  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />
+  'pi pi-columns': <HomeOutlinedIcon fontSize='large' />,
+  'case-solid': <WorkOutlineIcon fontSize='large' />
 };
 
 const drawerWidth = 300;