@pega/dx-component-builder-sdk 0.1.47 → 0.1.48

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

@@ -1,10 +1,10 @@
-/* eslint-disable react/no-array-index-key */
-import React, { createElement } from "react";
-import PropTypes from "prop-types";
+/* eslint-disable react/no-danger */
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 
-import { getInstructions } from "./utils";
-import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
-import "./DefaultForm.css";
+import { getInstructions } from './utils';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import './DefaultForm.css';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
 
@@ -15,23 +15,22 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
 export default function {{COMPONENT_CLASS_NAME}}(props) {
   const { getPConnect, NumCols } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
-  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, "");
 
   let divClass: string;
 
-  const numCols = NumCols || "1";
+  const numCols = NumCols || '1';
   switch (numCols) {
-    case "1":
-      divClass = "psdk-default-form-one-column";
+    case '1':
+      divClass = 'psdk-default-form-one-column';
       break;
-    case "2":
-      divClass = "psdk-default-form-two-column";
+    case '2':
+      divClass = 'psdk-default-form-two-column';
       break;
-    case "3":
-      divClass = "psdk-default-form-three-column";
+    case '3':
+      divClass = 'psdk-default-form-three-column';
       break;
     default:
-      divClass = "psdk-default-form-one-column";
+      divClass = 'psdk-default-form-one-column';
       break;
   }
 
@@ -40,21 +39,32 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren.map((kid, idx) =>
+    // eslint-disable-next-line react/no-array-index-key
     createElement(createPConnectComponent(), { ...kid, key: idx })
   );
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <div className={divClass}>
-        <div>{instructionText}</div>
-        {dfChildren}
-      </div>
+    <>
+      {instructions && (
+        <div className='psdk-default-form-instruction-text'>
+          {/* server performs sanitization method for instructions html content */}
+          <div key="instructions" 
+    {{! pick new delimiters for mustache }}
+    {{=<% %>=}}
+          dangerouslySetInnerHTML={{ __html: instructions }} 
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
+          />
+        </div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  NumCols: "1",
+  NumCols: '1',
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {

package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.jsx.mustache

@@ -31,7 +31,7 @@ const renderField = resolvedProps => {
     />
     </MuiPickersUtilsProvider>
 
-{{! pick new delimiteres for mustache }}
+{{! pick new delimiters for mustache }}
 {{=<% %>=}}
 
   if (label === 'Email')
@@ -43,7 +43,7 @@ const renderField = resolvedProps => {
   if (label === 'Phone Number')
     val = <MuiPhoneNumber value={value} variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange}></MuiPhoneNumber>;
 
-<%={{ }}=%>     {{! revert delimiteres for mustache }}
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {
     val = value || <span aria-hidden='true'>&ndash;&ndash;</span>;

package/src/tasks/create/templates/SDK-React/template/PAGE/demo.stories.jsx.mustache

@@ -49,6 +49,7 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
          if(config.type === 'AppAnnouncement') {
               return (
                 <AppAnnouncement
+                  key='announcement'
                   header='Announcements'
                   description={configProps.description}
                   image={configProps.image.replace(/ /g, '+')}

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -45,9 +45,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   // let waitingForData = true;
 
   const displayedColumns = [
-    { label: "Date", type: "DateTime", fieldName: "pxTimeCreated" },
-    { label: "Description", type: "TextInput", fieldName: "pyMessageKey" },
-    { label: "User", type: "TextInput", fieldName: "pyPerformer" }
+    { label: thePConn.getLocalizedValue('Date'), type: "DateTime", fieldName: "pxTimeCreated" },
+    { label: thePConn.getLocalizedValue('Description'), type: "TextInput", fieldName: "pyMessageKey" },
+    { label: thePConn.getLocalizedValue('Performed by'), type: "TextInput", fieldName: "pyPerformer" }
    ];
 
   const rowData: any = useRef([]);
@@ -59,6 +59,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   const dataViewName = "D_pyWorkHistory";
   const context = thePConn.getContextName();
 
+
   function computeRowData(rows: Array<Object>): void {
     const theRowData: Array<Object> = [];
 

package/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -62,16 +62,16 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  header: PropTypes.string,
-  description: PropTypes.string,
-  datasource: PropTypes.instanceOf(Object),
-  whatsnewlink: PropTypes.string
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
   header: "",
   description: "",
   // image: "",
   datasource: [],
   whatsnewlink: ""
 };
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  header: PropTypes.string,
+  description: PropTypes.string,
+  datasource: PropTypes.instanceOf(Object),
+  whatsnewlink: PropTypes.string
+};

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { configProps, operatorDetails } from './mock.stories';
+import { caseOpConfig, operatorDetails } from './mock.stories';
 
 import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 
@@ -27,15 +27,7 @@ window.PCore.getUserApi = () => {
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    label: configProps.label,
-    createLabel: configProps.createLabel,
-    updateLabel: configProps.updateLabel,
-    createOperator: configProps.createOperator,
-    updateOperator: configProps.updateOperator,
-    createDateTime: configProps.createDateTime,
-    updateDateTime: configProps.updateDateTime,
-    hideLabel: configProps.hideLabel,
-
+    caseOpConfig,
     getPConnect: () => {
       return {
         getActionsApi: () => {

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -32,34 +32,33 @@ const useStyles = makeStyles((theme) => ({
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
   // const componentName = "Operator";
-  const {
-    label,
-    createLabel,
-    updateLabel,
-    createOperator,
-    updateOperator,
-    createDateTime,
-    updateDateTime
-  } = props;
   const classes = useStyles();
 
-  const fieldLabel = label.toLowerCase();
+  // const versionAr = pCoreVersion.split(".");
+  // let fieldLabel;
   let caseOpLabel = "---";
   let caseOpName = "---";
   let caseOpId = "";
   let caseTime = null;
 
-  if (fieldLabel === "create operator") {
-    caseOpLabel = createLabel;
-    caseOpName = createOperator.userName;
-    caseTime = createDateTime;
-    caseOpId = createOperator.userId;
-  } else if (fieldLabel === "update operator") {
-    caseOpLabel = updateLabel;
-    caseOpName = updateOperator.userName;
-    caseTime = updateDateTime;
-    caseOpId = updateOperator.userId;
-  }
+  let updateOpLabel = "---";
+  let updateOpName = "---";
+  let updateOpId = "";
+  let updateTime = null;
+
+  // fieldLabel = props.fieldLabel;
+  caseOpLabel = props.createLabel;
+  caseOpName = props.createOperator.userName;
+  caseTime = props.createDateTime;
+  caseOpId = props.createOperator.userId;
+
+  updateOpLabel = props.updateLabel;
+  updateOpName = props.updateOperator.userName;
+  updateTime = props.updateDateTimeDateTime;
+  updateOpId = props.updateOperator.userId;
+
+
+
 
   // Popover-related
   const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
@@ -75,6 +74,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   function showOperatorDetails(event) {
 
     const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
 
     operatorPreviewPromise.then((res) => {
       const fillerString = "---";
@@ -87,27 +88,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         fields = [
           {
             id: "pyPosition",
-            name: "Position",
+            name: localizedVal("Position", localeCategory),
             value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
           },
           {
             id: "pyOrganization",
-            name: "Organization",
+            name: localizedVal("Organization", localeCategory),
             value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
           },
           {
             id: "ReportToUserName",
-            name: "Reports to",
+            name: localizedVal('Reports to', localeCategory),
             value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
           },
           {
             id: "pyTelephone",
-            name: "Telephone",
+            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: "Email address",
+            name: localizedVal('Email address', localeCategory),
             value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
           }
         ];
@@ -117,27 +118,106 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         fields = [
           {
             id: "pyPosition",
-            name: "Position",
+            name: localizedVal("Position", localeCategory),
             value: fillerString
           },
           {
             id: "pyOrganization",
-            name: "Organization",
+            name: localizedVal("Organization", localeCategory),
             value: fillerString
           },
           {
             id: "ReportToUserName",
-            name: "Reports to",
+            name: localizedVal('Reports to', localeCategory),
             value: fillerString
           },
           {
             id: "pyTelephone",
-            name: "Telephone",
+            name: localizedVal('Telephone', localeCategory),
             value: fillerString
           },
           {
             id: "pyEmailAddress",
-            name: "Email address",
+            name: localizedVal('Email address', localeCategory),
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function showUpdateOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(updateOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+
+    operatorPreviewPromise.then((res) => {
+      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 {
+        // eslint-disable-next-line no-console
+        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
           }
         ];
@@ -177,33 +257,55 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 
   return <Styled{{COMPONENT_CLASS_NAME}}Wrapper><React.Fragment>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+    <Grid container spacing={2}>
+      <Grid item>
       <TextField
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}
-        {{! pick new delimiteres for mustache }}
-        {{=<% %>=}}
+
         InputProps={{
           readOnly: true,
           disableUnderline: true,
           inputProps: {style: {cursor: 'pointer'}}
         }}
-        <%={{ }}=%>     {{! revert delimiteres for mustache }}
+
       />
       <br />
       {Utils.generateDateTime(caseTime, "DateTime-Since")}
+     </Grid>
+     <Grid item>
+      <TextField
+        defaultValue={updateOpName}
+        label={updateOpLabel}
+        onClick={showUpdateOperatorDetails}
+
+        InputProps={{
+          readOnly: true,
+          disableUnderline: true,
+          inputProps: {style: {cursor: 'pointer'}}
+        }}
+
+      />
+      <br />
+      {Utils.generateDateTime(updateTime, "DateTime-Since")}
+     </Grid>
+    </Grid>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
       <Popover
         id={popoverId}
         open={popoverOpen}
         anchorEl={popoverAnchorEl}
         onClose={handlePopoverClose}
-        {{! pick new delimiteres for mustache }}
+        {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}
         transformOrigin={{ vertical: 'top', horizontal: 'center'}}
         PaperProps={{ style: {maxWidth: '45ch'}}}
-        <%={{ }}=%>     {{! revert delimiteres for mustache }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
       >
         {getPopoverGrid()}
       </Popover>

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.stories.js.mustache

@@ -1,5 +1,5 @@
 
-export const configProps = {
+export const caseOpConfig = {
   label: 'Create operator',
   createLabel: 'Created',
   updateLabel: 'Updated',