@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

package/src/tasks/create/templates/SDK-React/template/DETAILS/mock.ts.mustache

@@ -1,120 +1,124 @@
 const operatorDetails = {
   data: {
-    pzLoadTime: "January 18, 2023 10:33:19 AM EST",
-    pzPageNameHash: "_pa1519192551088960pz",
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
     pyOperatorInfo: {
-      pyUserName: "french DigV2",
-      pyPosition: "",
-      pyImageInsKey: "",
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
       pySkills: [
         {
-          pySkillName: "",
-          pzIndexOwnerKey: "DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2",
-          pySkillRating: 0,
-        },
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
       ],
-      pyReportToUserName: "",
-      pyReportTo: "",
-      pyOrganization: "DXIL",
-      pyTitle: "",
-      pyLabel: "frenchTest.DigV2",
-      pyEmailAddress: "User@DigV2",
-      pyTelephone: "",
-    },
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
   },
   status: 200,
-  statusText: "",
+  statusText: '',
   headers: {
-    "content-length": "435",
-    "content-type": "application/json;charset=UTF-8",
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
   },
-  request: {},
+  request: {}
 };
 
 export default operatorDetails;
 
 export const pyReviewRaw = {
-  name: "pyReview",
-  type: "View",
+  name: 'pyReview',
+  type: 'View',
   config: {
-    template: "Details",
-    ruleClass: "MyCo-MyCompon-Work-MyComponents",
+    template: 'Details',
+    ruleClass: 'MyCo-MyCompon-Work-MyComponents',
     showLabel: true,
-    label: "@L Details",
-    localeReference: "@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+    label: '@L Details',
+    localeReference: '@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
     showHighlightedData: true,
     highlightedData: [
       {
-        type: "TextInput",
+        type: 'TextInput',
         config: {
-          value: "@P .pyStatusWork",
-          label: "@L Work Status",
-          displayMode: "STACKED_LARGE_VAL",
-          displayAsStatus: true,
-        },
+          value: '@P .pyStatusWork',
+          label: '@L Work Status',
+          displayMode: 'STACKED_LARGE_VAL',
+          displayAsStatus: true
+        }
       },
       {
-        type: "TextInput",
+        type: 'TextInput',
         config: {
-          value: "@P .pyID",
-          label: "@L Case ID",
-          displayMode: "STACKED_LARGE_VAL",
-        },
+          value: '@P .pyID',
+          label: '@L Case ID',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
       },
       {
-        type: "DateTime",
+        type: 'DateTime',
         config: {
-          value: "@P .pxCreateDateTime",
-          label: "@L Create date/time",
-          displayMode: "STACKED_LARGE_VAL",
-        },
+          value: '@P .pxCreateDateTime',
+          label: '@L Create date/time',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
       },
       {
-        type: "UserReference",
+        type: 'UserReference',
         config: {
-          label: "@L Create Operator",
-          value: "@USER .pxCreateOperator",
-          placeholder: "Select...",
-          displayMode: "STACKED_LARGE_VAL",
-        },
-      },
+          label: '@L Create Operator',
+          value: '@USER .pxCreateOperator',
+          placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
+      }
     ],
     inheritedProps: [
       {
-        prop: "label",
-        value: "@L Details",
+        prop: 'label',
+        value: '@L Details'
       },
       {
-        prop: "showLabel",
-        value: true,
-      },
-    ],
+        prop: 'showLabel',
+        value: true
+      }
+    ]
   },
   children: [
     {
-      name: "A",
-      type: "Region",
+      name: 'A',
+      type: 'Region',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
             return pyReviewRaw.children[0];
-          },
+          }
         };
       },
       children: [
         {
           readOnly: undefined,
-          placeholder: "First Name",
-          value: "John",
-          label: "First Name",
+          placeholder: 'First Name',
+          value: 'John',
+          label: 'First Name',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -125,17 +129,21 @@ export const pyReviewRaw = {
         },
         {
           readOnly: undefined,
-          placeholder: "Middle Name",
-          value: "",
-          label: "Middle Name",
+          placeholder: 'Middle Name',
+          value: '',
+          label: 'Middle Name',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -146,17 +154,21 @@ export const pyReviewRaw = {
         },
         {
           readOnly: undefined,
-          placeholder: "Last Name",
-          value: "Doe",
-          label: "Last Name",
+          placeholder: 'Last Name',
+          value: 'Doe',
+          label: 'Last Name',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
               getActionsApi: () => {
                 return {
-                  updateFieldValue: () => {/* nothing */},
-                  triggerFieldChange: () => {/* nothing */}
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
                 };
               },
               getStateProps: () => {
@@ -166,57 +178,78 @@ export const pyReviewRaw = {
           }
         },
         {
-          value: "john@doe.com",
-          label: "Email",
+          value: 'john@doe.com',
+          label: 'Email',
           required: true,
-          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT'
         },
         {
           readOnly: undefined,
-          value: "+16397975093",
-          label: "Phone",
-          displayMode: "LABELS_LEFT",
+          value: '+16397975093',
+          label: 'Phone',
+          displayMode: 'LABELS_LEFT',
           hasSuggestions: false,
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {
+                return {
+                  updateFieldValue: () => {
+                    /* nothing */
+                  },
+                  triggerFieldChange: () => {
+                    /* nothing */
+                  }
+                };
+              },
+              getStateProps: () => {
+                return { value: '' };
+              }
+            };
+          }
         },
         {
           readOnly: undefined,
-          placeholder: "Price",
-          value: "90.99",
-          label: "Price",
+          placeholder: 'Price',
+          value: '90.99',
+          label: 'Price',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
-              getActionsApi: () => {/* nothing */},
+              getActionsApi: () => {
+                /* nothing */
+              },
               getStateProps: () => {
                 return {
-                  value: "",
+                  value: ''
                 };
               },
               getComponentName: () => {
-                return "currency";
-              },
+                return 'currency';
+              }
             };
-          },
+          }
         },
         {
           readOnly: undefined,
-          value: "100 Mbps",
-          label: "Internet Plan",
+          value: '100 Mbps',
+          label: 'Internet Plan',
           hasSuggestions: false,
-          displayMode: "LABELS_LEFT",
+          displayMode: 'LABELS_LEFT',
           getPConnect: () => {
             return {
-              getActionsApi: () => {/* nothing */},
+              getActionsApi: () => {
+                /* nothing */
+              },
               getStateProps: () => {
                 return {
-                  value: "",
+                  value: ''
                 };
               },
               getComponentName: () => {
-                return "radio";
+                return 'radio';
               },
               getContextName: () => {
                 return 'app/primary_1';
@@ -242,109 +275,109 @@ export const pyReviewRaw = {
               },
               getLocalizedValue: val => {
                 return val;
-              },
+              }
             };
-          },
+          }
         },
         {
-            label: "Update operator",
-            createLabel: "Created",
-            updateLabel: "Updated",
-            updateDateTime: "2023-03-10T12:53:04.670Z",
-            createDateTime: "2023-03-10T12:52:20.054Z",
-            updateOperator: {
-              userId: "User.DigV2",
-              userName: "User DigV2",
-            },
-            createOperator: {
-              userId: "User.DigV2",
-              userName: "User DigV2",
-            },
-        },
-      ],
-    },
+          label: 'Update operator',
+          createLabel: 'Created',
+          updateLabel: 'Updated',
+          updateDateTime: '2023-03-10T12:53:04.670Z',
+          createDateTime: '2023-03-10T12:52:20.054Z',
+          updateOperator: {
+            userId: 'User.DigV2',
+            userName: 'User DigV2'
+          },
+          createOperator: {
+            userId: 'User.DigV2',
+            userName: 'User DigV2'
+          }
+        }
+      ]
+    }
   ],
-  classID: "MyCo-MyCompon-Work-MyComponents",
+  classID: 'MyCo-MyCompon-Work-MyComponents'
 };
 
 export const pyReviewResolved = {
   readOnly: true,
-  template: "Details",
-  ruleClass: "MyCo-MyCompon-Work-MyComponents",
+  template: 'Details',
+  ruleClass: 'MyCo-MyCompon-Work-MyComponents',
   showLabel: true,
-  label: "Details",
-  localeReference: "MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+  label: 'Details',
+  localeReference: 'MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
   showHighlightedData: true,
   highlightedData: [
     {
-      type: "TextInput",
+      type: 'TextInput',
       config: {
-        value: "New",
-        label: "Work Status",
-        displayMode: "STACKED_LARGE_VAL",
-        displayAsStatus: true,
-      },
+        value: 'New',
+        label: 'Work Status',
+        displayMode: 'STACKED_LARGE_VAL',
+        displayAsStatus: true
+      }
     },
     {
-      type: "TextInput",
+      type: 'TextInput',
       config: {
-        value: "M-1002",
-        label: "Case ID",
-        displayMode: "STACKED_LARGE_VAL",
-      },
+        value: 'M-1002',
+        label: 'Case ID',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
     },
     {
-      type: "DateTime",
+      type: 'DateTime',
       config: {
-        value: "2022-12-11T20:06:27.232Z",
-        label: "Create date/time",
-        displayMode: "STACKED_LARGE_VAL",
-      },
+        value: '2022-12-11T20:06:27.232Z',
+        label: 'Create date/time',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
     },
     {
-      type: "UserReference",
+      type: 'UserReference',
       config: {
-        label: "Create Operator",
+        label: 'Create Operator',
         value: {
-          userId: "conns",
-          userName: "Sara Connor",
+          userId: 'conns',
+          userName: 'Sara Connor'
         },
-        placeholder: "Select...",
-        displayMode: "STACKED_LARGE_VAL",
-      },
-    },
+        placeholder: 'Select...',
+        displayMode: 'STACKED_LARGE_VAL'
+      }
+    }
   ],
-  displayMode: "LABELS_LEFT",
+  displayMode: 'LABELS_LEFT'
 };
 
 export const regionChildrenResolved = [
   {
     readOnly: true,
-    value: "",
-    label: "SLA Deadline",
-    displayMode: "LABELS_LEFT",
+    value: '',
+    label: 'SLA Deadline',
+    displayMode: 'LABELS_LEFT'
   },
   {
     readOnly: true,
-    value: "",
-    label: "SLA Goal",
-    displayMode: "LABELS_LEFT",
+    value: '',
+    label: 'SLA Goal',
+    displayMode: 'LABELS_LEFT'
   },
   {
     readOnly: true,
-    value: "",
-    label: "SLA Start Time",
-    listType: "associated",
+    value: '',
+    label: 'SLA Start Time',
+    listType: 'associated',
     datasource: [
       {
-        key: "AssignmentCreation",
-        value: "The creation time of the Assignment",
+        key: 'AssignmentCreation',
+        value: 'The creation time of the Assignment'
       },
       {
-        key: "CurrentTime",
-        value: "Current Date Time",
-      },
+        key: 'CurrentTime',
+        value: 'Current Date Time'
+      }
     ],
-    displayMode: "LABELS_LEFT",
-  },
-];
+    displayMode: 'LABELS_LEFT'
+  }
+];

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/demo.stories.tsx.mustache

@@ -6,9 +6,20 @@ import operatorDetails, { pyReviewRaw } from './mock';
 window.PCore = {
   ...window.PCore,
   getUserApi: (): any => {
-    return new Promise(resolve => {
-      resolve(operatorDetails);
-    });
+    return {
+      getOperatorDetails: () => {
+        return new Promise(resolve => {
+          resolve(operatorDetails);
+        });
+      }
+    };
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
   },
   getEnvironmentInfo: (): any => {
     return {
@@ -66,7 +77,5 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
-  showHighlightedData: false,
-  label: 'Details Region',
-  showLabel: true
+  showHighlightedData: false
 };

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -5,12 +5,10 @@ import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
-  showLabel: boolean;
-  label: string;
   showHighlightedData: boolean;
 }
 // Duplicated runtime code from React SDK
@@ -19,10 +17,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
 
-  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
-
-  // Get the inherited props from the parent to determine label settings
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+  const { getPConnect, showHighlightedData = false } = props;
 
   // Set display mode prop and re-create the children so this part of the dom tree renders
   // in a readonly (display) mode instead of a editable
@@ -49,7 +44,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field, '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+      return getPConnect().createComponent(field, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -57,7 +52,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {{! pick new delimiters for mustache }}
       {{=<% %>=}}
-      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      <FieldGroup>
         {showHighlightedData && highlightedDataArr.length > 0 && (
           <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
             {highlightedDataArr.map((child, i) => (