@pega/dx-component-builder-sdk 24.2.11 → 24.2.12

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-page/demo.stories.tsx

@@ -7,54 +7,42 @@ const meta: Meta<PegaDxilMyPageComponent> = {
   title: 'PegaDxilMyPage',
   component: PegaDxilMyPageComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getContextTreeManager: (): any => {
-        return {
-          removeContextTreeNode: () => {
-            /* nothing */
-          }
-        };
-      }
-    };
-    return {
-      props: {
-        ...args,
-        pConn$: {
-          getChildren: () => {
-            return [
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'Region';
-                    },
-                    getChildren: () => {
-                      return children;
-                    }
-                  };
-                }
+  render: (args) => ({
+    props: {
+      ...args,
+      pConn$: {
+        getChildren: () => {
+          return [
+            {
+              getPConnect: () => {
+                return {
+                  getComponentName: () => {
+                    return 'Region';
+                  },
+                  getChildren: () => {
+                    return children;
+                  }
+                };
               }
-            ];
-          },
-          getConfigProps: () => {
-            return {
-              title: 'Announcements',
-              operator: ''
-            };
-          },
-          resolveConfigProps: () => {
-            return {
-              title: 'Announcements',
-              operator: ''
-            };
-          },
-          getContextName: () => ''
-        } as any
-      }
-    };
-  }
+            }
+          ];
+        },
+        getConfigProps: () => {
+          return {
+            title: 'Announcements',
+            operator: ''
+          };
+        },
+        resolveConfigProps: () => {
+          return {
+            title: 'Announcements',
+            operator: ''
+          };
+        },
+        getContextName: () => ''
+      } as any
+    }
+  })
 };
 
 export default meta;

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/demo.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<PegaDxilMyTwoColumnDetailsComponent> = {
   title: 'PegaDxilMyTwoColumnDetails',
   component: PegaDxilMyTwoColumnDetailsComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTwoColumnDetailsComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/demo.stories.tsx

@@ -10,21 +10,12 @@ class MockingDatapageService {
   getDataPageData = () => Promise.resolve({});
 }
 
-window.PCore = {
-  ...window.PCore,
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
-      }
-    };
-  },
-  setBehaviorOverride: () => {},
-  getStore: () => {
-    return {
-      subscribe: () => {}
-    };
-  }
+window.PCore.getContextTreeManager = (): any => {
+  return {
+    removeContextTreeNode: () => {
+      /* nothing */
+    }
+  };
 };
 
 const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
@@ -36,7 +27,7 @@ const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
   ],
   component: PegaDxilMyTwoColumnFormComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTwoColumnFormComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/mock.ts

@@ -44,6 +44,9 @@ export const child1 = [
             label: 'First Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -93,6 +96,9 @@ export const child1 = [
             label: 'Middle Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -142,6 +148,9 @@ export const child1 = [
             label: 'Last Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -194,6 +203,9 @@ export const child2 = [
             label: 'Email',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -243,6 +255,9 @@ export const child2 = [
             label: 'Phone Number',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -349,7 +364,10 @@ export const child2 = [
         getContextName: () => {
           return 'app/primary_1/workarea_9';
         },
-        getDataObject: () => {}
+        getDataObject: () => {},
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     }
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/demo.stories.tsx

@@ -8,23 +8,13 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyCaseWidgetComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getConstants: () => {
-        return {
-          CASE_INFO: {
-            CASE_INFO_ID: 'caseInfo.ID'
-          }
-        } as any;
-      },
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(historyData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(historyData);
+        }
+      };
     };
     return {
       props: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/demo.stories.tsx

@@ -4,29 +4,21 @@ import { configProps, operatorDetails } from './mock';
 
 import { PegaDxilMyPageCaseWidgetComponent } from './pega-dxil-my-page-case-widget.component';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: () => {
-    return {
-      getOperatorDetails: () => {
-        return Promise.resolve(operatorDetails);
-      }
-    };
-  },
-  getLocaleUtils: () => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    } as any;
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 const meta: Meta<PegaDxilMyPageCaseWidgetComponent> = {
   title: 'PegaDxilMyPageCaseWidget',
   component: PegaDxilMyPageCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageCaseWidgetComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/demo.stories.tsx

@@ -8,16 +8,13 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   title: 'PegaDxilMyPageWidget',
   component: PegaDxilMyPageWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageWidgetComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(worklistData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(worklistData);
+        }
+      };
     };
     return {
       props: {

package/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.html

@@ -8,13 +8,7 @@
     </div>
     <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-select
-          [value]="value$"
-          [required]="bRequired$"
-          [formControl]="fieldControl"
-          [attr.data-test-id]="testId"
-          (selectionChange)="fieldOnChange($event)"
-        >
+        <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ opt.value }}
           </mat-option>
@@ -32,14 +26,12 @@
           matInput
           [placeholder]="placeholder"
           [formControl]="fieldControl"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
-        <mat-autocomplete #auto="matAutocomplete">
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
           <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
             <span>{{ opt.value }}</span>
           </mat-option>

package/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.ts

@@ -23,6 +23,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   value?: any;
   showAsFormattedText?: boolean;
   additionalProps?: object;
+  onRecordChange?: any;
 }
 
 @Component({
@@ -66,6 +67,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   fieldControl = new FormControl('', null);
   actionsApi: Object;
   propName: string;
+  onRecordChange: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -83,11 +85,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      this.fieldControl.setValue(this.getValue(this.value$));
     }
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
-      startWith(''),
+      startWith(this.getValue(this.value$) || ''),
       map(value => this._filter(value || ''))
     );
   }
@@ -126,6 +128,21 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
+  isUserNameAvailable = user => {
+    return typeof user === 'object' && user !== null && user.userName;
+  };
+
+  getUserName = user => {
+    return user.userName;
+  };
+
+  getValue = user => {
+    if (this.displayAs$ === DROPDOWN_LIST) {
+      return this.utils.getUserId(user) || this.getUserName(user);
+    }
+    return this.isUserNameAvailable(user) ? this.getUserName(user) : this.utils.getUserId(user);
+  };
+
   async checkAndUpdate() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
@@ -140,6 +157,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   async updateSelf() {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
+    this.onRecordChange = props?.onRecordChange;
 
     const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
@@ -150,20 +168,18 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
+    this.value$ = this.pConn$.getConfigProps()?.value;
+
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 
-    const isUserNameAvailable = user => {
-      return typeof user === 'object' && user !== null && user.userName;
-    };
-
     this.userID$ = this.utils.getUserId(value);
 
     if (this.userID$ && this.bReadonly$ && this.showAsFormattedText$) {
-      if (isUserNameAvailable(value)) {
+      if (this.isUserNameAvailable(value)) {
         this.userName$ = value.userName;
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
@@ -201,7 +217,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.target) {
       this.filterValue = (event.target as HTMLInputElement).value;
     }
-    const value = event?.target?.value;
+    const value = event?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
+  }
+
+  optionChanged(event: any) {
+    const value = event?.option?.value;
     handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
@@ -211,11 +232,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
-
-    const value = {
-      value: key
-    };
+    const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    if (this.onRecordChange) {
+      event.target.value = value;
+      this.onRecordChange(event);
+    }
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/view/view.component.ts

@@ -8,6 +8,20 @@ import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+const DETAILS_TEMPLATES = [
+  'Details',
+  'DetailsFields',
+  'DetailsOneColumn',
+  'DetailsSubTabs',
+  'DetailsThreeColumn',
+  'DetailsTwoColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
+
+function isDetailsTemplate(template) {
+  return DETAILS_TEMPLATES.includes(template);
+}
 
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -146,7 +160,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.templateName$ = this.configProps$.template || '';
     this.title$ = this.configProps$.title || '';
     this.label$ = this.configProps$.label || '';
-    this.showLabel$ = this.configProps$.showLabel || this.showLabel$;
+    this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.label$;
     this.showLabel$ = this.inheritedProps$.showLabel || this.showLabel$;

package/tests/assets/sdk-r/components/create/custom-sdk/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -26,6 +26,9 @@ export const BasePegaDxilMyTestText: Story = args => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

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

@@ -51,7 +51,7 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
           // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <MuiTelInput
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
-          defaultCountry='us'
+          defaultCountry='US'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}