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

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -18,13 +18,16 @@ interface CaseSummaryFieldsProps {
   status?: string;
   showStatus?: boolean;
   theFields: any[] | any | never;
+  variant?: 'primary' | 'secondary';
 }
 
 export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const Operator = getComponentFromMap('Operator');
-
-  const { status, showStatus, theFields } = props;
+  const ObjectReference = getComponentFromMap('ObjectReference');
+  const Reference = getComponentFromMap('reference');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const { status, showStatus, theFields, variant = 'primary' } = props;
 
   const [theFieldsToRender, setFieldsToRender] = useState([]);
   const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<any[]>([]);
@@ -212,6 +215,19 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       case 'caseoperator':
         return <Operator {...field.config} />;
 
+      case 'objectreference':
+        return (
+          <div className='psdk-case-summary-object-ref'>
+            <label className='label'>{field.config.displayLabel}</label>
+            <div className='psdk-case-summary-object-ref-value'>
+              <ObjectReference {...field.config} getPConnect={field.getPConnect} />
+            </div>
+          </div>
+        );
+
+      case 'reference':
+        return <Reference {...field.config} getPConnect={field.getPConnect} displayMode='DISPLAY_ONLY' />;
+
       default:
         return (
           <span>
@@ -221,14 +237,50 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
     }
   }
 
+  function renderSecondaryField(field: any) {
+    const fieldTypeLower = field.type.toLowerCase();
+
+    if (fieldTypeLower === 'caseoperator') {
+      return <Operator {...field.config} displayMode='DISPLAY_ONLY' />;
+    }
+
+    // ObjectReference: render label from CaseSummaryFields, value from component
+    if (fieldTypeLower === 'objectreference') {
+      const name = field.config.label || field.config.displayLabel || '';
+      const value = field.getPConnect ? (
+        <ObjectReference {...field.config} getPConnect={field.getPConnect} displayMode='DISPLAY_ONLY' hideLabel />
+      ) : (
+        (field.config.value ?? '---')
+      );
+
+      return <FieldValueList name={name} value={value} variant='inline' />;
+    }
+
+    if (!field.getPConnect) {
+      // Fallback if no getPConnect — render using FieldValueList directly
+      const name = field.config.label || field.config.displayLabel || '';
+      const value = field.config.value ?? '---';
+      return <FieldValueList name={name} value={value} variant='inline' />;
+    }
+
+    const pConnect = field.getPConnect();
+    return pConnect.createComponent({
+      type: field.type,
+      config: {
+        ...field.config,
+        displayMode: 'DISPLAY_ONLY'
+      }
+    });
+  }
+
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
     const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (
-          <Grid2 size={{ xs: 6 }} key={field.config.label}>
-            {getFieldValue(field)}
+          <Grid2 size={{ xs: variant === 'secondary' ? 12 : 6 }} key={field.config.label}>
+            {variant === 'secondary' ? renderSecondaryField(field) : getFieldValue(field)}
           </Grid2>
         );
       }
@@ -236,7 +288,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
       return null;
     });
     setFieldsAsGridItems(arGridItems);
-  }, [theFieldsToRender]);
+  }, [theFieldsToRender, variant]);
 
   const theFieldsModifiable = theFields;
 

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren } from 'react';
 import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
@@ -9,8 +9,11 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 interface FieldGroupProps {
   // If any, enter additional props that only exist on this component
   name?: string;
-  collapsible?: boolean;
   instructions?: string;
+  defaultCollapsed?: any;
+  collapsed?: any;
+  onToggleCollapsed?: () => void;
+  isCollapsibleMode?: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -32,7 +35,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     gap: '5px',
-    cursor: collapsible => (collapsible ? 'pointer' : 'auto')
+    cursor: isCollapsibleMode => (isCollapsibleMode ? 'pointer' : 'auto')
   },
   instructionText: {
     padding: '5px 0'
@@ -40,9 +43,8 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
-  const { children, name, collapsible = false, instructions } = props;
-  const classes = useStyles(collapsible);
-  const [collapsed, setCollapsed] = useState(false);
+  const { children, name, instructions, collapsed, isCollapsibleMode, onToggleCollapsed } = props;
+  const classes = useStyles(isCollapsibleMode);
 
   const descAndChildren = (
     <Grid2 container>
@@ -51,7 +53,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   );
 
   const headerClickHandler = () => {
-    setCollapsed(current => !current);
+    onToggleCollapsed?.();
   };
 
   return (
@@ -59,7 +61,7 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
       <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
-            {collapsible ? (
+            {isCollapsibleMode ? (
               <span id='field-group-header' className={classes.fieldGroupHeader} onClick={headerClickHandler}>
                 {collapsed ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
                 <b>{name}</b>
@@ -69,10 +71,15 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
             )}
           </div>
         )}
-        {instructions && instructions !== 'none' && (
-          <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+
+        {!collapsed && (
+          <>
+            {instructions && instructions !== 'none' && (
+              <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
+            )}
+            {descAndChildren}
+          </>
         )}
-        {!collapsed && descAndChildren}
       </Grid2>
     </Grid2>
   );

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -24,7 +24,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
       <Grid2 style={{ width: '100%' }}>
         <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid2 style={{ width: '100%' }}>
+            <Grid2 key={item.name} style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -31,6 +31,16 @@ const useStyles = makeStyles(theme => ({
   },
   noPaddingBottom: {
     paddingBottom: '0 !important'
+  },
+  htmlContent: {
+    '& ul': {
+      paddingLeft: '30px',
+      listStyleType: 'disc'
+    },
+    '& ol': {
+      paddingLeft: '30px',
+      listStyleType: 'decimal'
+    }
   }
 }));
 
@@ -48,12 +58,14 @@ function formatItemValue(value) {
 export default function FieldValueList(props: FieldValueListProps) {
   const { name, value, variant = 'inline', isHtml = false } = props;
   const classes = useStyles();
+  const isCompact = variant === 'inline-compact';
 
   function getGridItemLabel() {
     return (
-      <Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' ? 12 : isCompact ? 'auto' : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
+          {isCompact ? ':' : ''}
         </Typography>
       </Grid2>
     );
@@ -63,9 +75,12 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid2
+        size={{ xs: variant === 'stacked' || !name ? 12 : isCompact ? 'grow' : 8 }}
+        className={variant === 'stacked' ? classes.noPaddingTop : ''}
+      >
         {isHtml ? (
-          <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
+          <div className={classes.htmlContent} dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
           <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
             {formattedValue}
@@ -76,7 +91,7 @@ export default function FieldValueList(props: FieldValueListProps) {
   }
 
   return (
-    <Grid2 container spacing={4} justifyContent='space-between'>
+    <Grid2 container spacing={isCompact ? 1 : 4} justifyContent={isCompact ? undefined : 'space-between'}>
       {name ? getGridItemLabel() : null}
       {getGridItemValue()}
     </Grid2>

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -20,6 +20,7 @@ interface OperatorProps extends PConnProps {
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
   displayLabel?: any;
+  displayMode?: string;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -30,6 +31,13 @@ const useStyles = makeStyles(theme => ({
   popover: {
     padding: theme.spacing(1),
     margin: theme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    color: theme.palette.text.primary
   }
 }));
 
@@ -72,80 +80,84 @@ export default function Operator(props: OperatorProps) {
     const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const localeCategory = 'Operator';
 
-    operatorPreviewPromise.then((res: any) => {
-      const fillerString = '---';
-      let fields: any = [];
-      if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
-        fields = [
-          {
-            id: 'pyPosition',
-            name: localizedVal('Position', localeCategory),
-            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
-          },
-          {
-            id: 'pyOrganization',
-            name: localizedVal('Organization', localeCategory),
-            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
-          },
-          {
-            id: 'ReportToUserName',
-            name: localizedVal('Reports to', localeCategory),
-            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
-          },
-          {
-            id: 'pyTelephone',
-            name: localizedVal('Telephone', localeCategory),
-            value: res.data.pyOperatorInfo.pyTelephone ? (
-              <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>
-            ) : (
-              fillerString
-            )
-          },
-          {
-            id: 'pyEmailAddress',
-            name: localizedVal('Email address', localeCategory),
-            value: res.data.pyOperatorInfo.pyEmailAddress ? (
-              <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a>
-            ) : (
-              fillerString
-            )
-          }
-        ];
-      } else {
-        console.log(
-          `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
-        );
-        fields = [
-          {
-            id: 'pyPosition',
-            name: localizedVal('Position', localeCategory),
-            value: fillerString
-          },
-          {
-            id: 'pyOrganization',
-            name: localizedVal('Organization', localeCategory),
-            value: fillerString
-          },
-          {
-            id: 'ReportToUserName',
-            name: localizedVal('Reports to', localeCategory),
-            value: fillerString
-          },
-          {
-            id: 'pyTelephone',
-            name: localizedVal('Telephone', localeCategory),
-            value: fillerString
-          },
-          {
-            id: 'pyEmailAddress',
-            name: localizedVal('Email address', localeCategory),
-            value: fillerString
-          }
-        ];
-      }
-      // Whatever the fields are, update the component's popoverFields
-      setPopoverFields(fields);
-    });
+    operatorPreviewPromise
+      .then((res: any) => {
+        const fillerString = '---';
+        let fields: any = [];
+        if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+          fields = [
+            {
+              id: 'pyPosition',
+              name: localizedVal('Position', localeCategory),
+              value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+            },
+            {
+              id: 'pyOrganization',
+              name: localizedVal('Organization', localeCategory),
+              value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+            },
+            {
+              id: 'ReportToUserName',
+              name: localizedVal('Reports to', localeCategory),
+              value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+            },
+            {
+              id: 'pyTelephone',
+              name: localizedVal('Telephone', localeCategory),
+              value: res.data.pyOperatorInfo.pyTelephone ? (
+                <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a>
+              ) : (
+                fillerString
+              )
+            },
+            {
+              id: 'pyEmailAddress',
+              name: localizedVal('Email address', localeCategory),
+              value: res.data.pyOperatorInfo.pyEmailAddress ? (
+                <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a>
+              ) : (
+                fillerString
+              )
+            }
+          ];
+        } else {
+          console.log(
+            `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
+          );
+          fields = [
+            {
+              id: 'pyPosition',
+              name: localizedVal('Position', localeCategory),
+              value: fillerString
+            },
+            {
+              id: 'pyOrganization',
+              name: localizedVal('Organization', localeCategory),
+              value: fillerString
+            },
+            {
+              id: 'ReportToUserName',
+              name: localizedVal('Reports to', localeCategory),
+              value: fillerString
+            },
+            {
+              id: 'pyTelephone',
+              name: localizedVal('Telephone', localeCategory),
+              value: fillerString
+            },
+            {
+              id: 'pyEmailAddress',
+              name: localizedVal('Email address', localeCategory),
+              value: fillerString
+            }
+          ];
+        }
+        // Whatever the fields are, update the component's popoverFields
+        setPopoverFields(fields);
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     setPopoverAnchorEl(event.currentTarget);
   }
@@ -185,6 +197,45 @@ export default function Operator(props: OperatorProps) {
 
   // End of popover-related
 
+  const { displayMode } = props;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return (
+      <>
+        <Grid2 container spacing={4} justifyContent='space-between'>
+          <Grid2 size={{ xs: 4 }}>
+            <Typography variant='body2' component='span' className={classes.fieldLabel}>
+              {caseOpLabel}
+            </Typography>
+          </Grid2>
+          <Grid2 size={{ xs: 8 }}>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'baseline' }}>
+              <Typography variant='body2' component='span' className={classes.fieldValue} onClick={showOperatorDetails} sx={{ cursor: 'pointer' }}>
+                {caseOpName}
+              </Typography>
+              <Typography variant='caption' component='span' sx={{ color: 'text.secondary' }}>
+                {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+              </Typography>
+            </div>
+          </Grid2>
+        </Grid2>
+        <Popover
+          id={popoverId}
+          open={popoverOpen}
+          anchorEl={popoverAnchorEl}
+          onClose={handlePopoverClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+          slotProps={{
+            paper: { style: { maxWidth: '45ch' } }
+          }}
+        >
+          {getPopoverGrid()}
+        </Popover>
+      </>
+    );
+  }
+
   return (
     <>
       <TextField