@pega/dx-component-builder-sdk 0.1.30 → 0.1.32

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

@@ -1,53 +1,89 @@
+import React, { createElement } from "react";
+import PropTypes from "prop-types";
+import Grid from "@material-ui/core/Grid";
+import FieldGroup from "@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup";
+import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
 
-import React from "react";
-// import PropTypes from "prop-types";
-import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
-
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-
+// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+import StyledYourOrgRequiredDxilDetailsWrapper from "./styles";
 
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
-  const { children } = props;
-  const arFields: Array<any> = [];
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
-  for (const child of children) {
-    const theChildPConn = child.props.getPConnect();
-    const theChildrenOfChild = theChildPConn.getChildren();
-    arFields.push(theChildrenOfChild);
-  }
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // 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
+  getPConnect().setInheritedProp("displayMode", "LABELS_LEFT");
+  getPConnect().setInheritedProp("readOnly", true);
+  const children = getPConnect()
+    .getChildren()
+    .map((configObject, index) =>
+      createElement(createPConnectComponent(), {
+        ...configObject,
+        // eslint-disable-next-line react/no-array-index-key
+        key: index.toString(),
+      })
+    );
 
-  if (arFields.length !== 2) {
-    // eslint-disable-next-line no-console
-    console.error(`DetailsTwoColumn expects 2 children and received ${arFields.length}`);
+  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    highlightedDataArr = highlightedData.map((field) => {
+      field.config.displayMode = "STACKED_LARGE_VAL";
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === "@P .pyStatusWork") {
+        field.type = "TextInput";
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field);
+    });
   }
 
+   {{! pick new delimiteres for mustache }}
+{{=<% %>=}}
 
   return (
-    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <div id="DetailsTwoColumn">
-      <Grid container spacing={1}>
-        <Grid item xs={6}>
-          <DetailsFields fields={arFields[0]} />
-        </Grid>
-        <Grid item xs={6}>
-          <DetailsFields fields={arFields[1]} />
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ""}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: "0 0 1em" }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={12} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
         </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={6} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
       </Grid>
-    </div>
-    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-  )
-
+    </FieldGroup>
+  );
 }
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
 
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false,
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
-
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool,
 };

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/mock.stories.js.mustache

@@ -1,34 +1,290 @@
 const operatorDetails = {
   data: {
-    "pzLoadTime": "March 13, 2023 10:58:15 AM EDT",
-    "pzPageNameHash": "_pa134221491644431pz",
-    "pyOperatorInfo": {
-        "pyUserName": "User DigV2",
-        "pyPosition": "",
-        "pyImageInsKey": "",
-        "pySkills": [
-            {
-                "pySkillName": "",
-                "pzIndexOwnerKey": "DATA-ADMIN-OPERATOR-ID USER.DIGV2",
-                "pySkillRating": 0
-            }
-        ],
-        "pyReportToUserName": "",
-        "pyReportTo": "",
-        "pyOrganization": "DXIL",
-        "pyTitle": "",
-        "pyLabel": "User.DigV2",
-        "pyEmailAddress": "User@DigV2",
-        "pyTelephone": ""
-    }
+    pzLoadTime: "January 18, 2023 10:33:19 AM EST",
+    pzPageNameHash: "_pa1519192551088960pz",
+    pyOperatorInfo: {
+      pyUserName: "french DigV2",
+      pyPosition: "",
+      pyImageInsKey: "",
+      pySkills: [
+        {
+          pySkillName: "",
+          pzIndexOwnerKey: "DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2",
+          pySkillRating: 0,
+        },
+      ],
+      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",
+  config: {
+    template: "Details",
+    ruleClass: "MyCo-MyCompon-Work-MyComponents",
+    showLabel: true,
+    label: "@L Details",
+    localeReference: "@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+    showHighlightedData: true,
+    highlightedData: [
+      {
+        type: "TextInput",
+        config: {
+          value: "@P .pyStatusWork",
+          label: "@L Work Status",
+          displayMode: "STACKED_LARGE_VAL",
+          displayAsStatus: true,
+        },
+      },
+      {
+        type: "TextInput",
+        config: {
+          value: "@P .pyID",
+          label: "@L Case ID",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+      {
+        type: "DateTime",
+        config: {
+          value: "@P .pxCreateDateTime",
+          label: "@L Create date/time",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+      {
+        type: "UserReference",
+        config: {
+          label: "@L Create Operator",
+          value: "@USER .pxCreateOperator",
+          placeholder: "Select...",
+          displayMode: "STACKED_LARGE_VAL",
+        },
+      },
+    ],
+    inheritedProps: [
+      {
+        prop: "label",
+        value: "@L Details",
+      },
+      {
+        prop: "showLabel",
+        value: true,
+      },
+    ],
+  },
+  children: [
+    {
+      name: "A",
+      type: "Region",
+      getPConnect: () => {
+        return {
+          getRawMetadata: () => {
+            return pyReviewRaw.children[0];
+          },
+        };
+      },
+      children: [
+        {
+          readOnly: undefined,
+          placeholder: "First Name",
+          value: "John",
+          label: "First Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Middle Name",
+          value: "",
+          label: "Middle Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Last Name",
+          value: "Doe",
+          label: "Last Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          value: "john@doe.com",
+          label: "Email",
+          required: true,
+          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          value: "+16397975093",
+          label: "Phone",
+          displayMode: "LABELS_LEFT",
+          hasSuggestions: false,
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Price",
+          value: "90.99",
+          label: "Price",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "currency";
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          value: "100 Mbps",
+          label: "Internet Plan",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "radio";
+              },
+              getConfigProps: () => {
+                return {};
+              },
+              getDataObject: () => {
+                return {};
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Middle Name",
+          value: "",
+          label: "Middle Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Last Name",
+          value: "Doe",
+          label: "Last Name",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          value: "john@doe.com",
+          label: "Email",
+          required: true,
+          testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+        },
+        {
+          readOnly: undefined,
+          value: "+16397975093",
+          label: "Phone",
+          displayMode: "LABELS_LEFT",
+          hasSuggestions: false,
+        },
+        {
+          readOnly: undefined,
+          placeholder: "Price",
+          value: "90.89",
+          label: "Price",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "currency";
+              },
+            };
+          },
+        },
+        {
+          readOnly: undefined,
+          value: "100 Mbps",
+          label: "Internet Plan",
+          hasSuggestions: false,
+          displayMode: "LABELS_LEFT",
+          getPConnect: () => {
+            return {
+              getActionsApi: () => {/* nothing */},
+              getStateProps: () => {
+                return {
+                  value: "",
+                };
+              },
+              getComponentName: () => {
+                return "radio";
+              },
+              getConfigProps: () => {
+                return {};
+              },
+              getDataObject: () => {
+                return {};
+              },
+            };
+          },
+        },
+        {
+          caseOpConfig: {
+            label: "Create operator",
+            createLabel: "Created",
+            updateLabel: "Updated",
+            updateDateTime: "2023-03-10T15:45:56.919Z",
+            createDateTime: "2023-03-10T15:45:40.154Z",
+            updateOperator: {
+              userId: "rep@mediaco",
+              userName: "representative",
+            },
+            createOperator: {
+              userId: "rep@mediaco",
+              userName: "representative",
+            },
+          },
+        },
+      ],
+    },
+  ],
+  classID: "MyCo-MyCompon-Work-MyComponents",
+};

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

@@ -14,13 +14,19 @@ if (!window.PCore) {
   window.PCore = {};
 }
 
-window.PCore = {
-  getErrorHandler() {
+window.PCore.getErrorHandler = () => {
     return {
       getGenericFailedMessage() {
         /* nothing */
       }
     };
+};
+
+window.PCore.getConstants = () => {
+  return {
+    CASE_INFO: {
+      INSTRUCTIONS: ""
+    }
   }
 };
 
@@ -187,6 +193,15 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
               }
             }
           ];
+        },
+        getValue: (val) => {
+          return val;
+        },
+        getCurrentView: () => {
+          return "";
+        },
+        getCurrentClassID: () => {
+          return "";
         }
       };
     }

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

@@ -1,63 +1,63 @@
-
+/* eslint-disable react/no-array-index-key */
 import React, { createElement } from "react";
-import PropTypes from 'prop-types';
-
-import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import './DefaultForm.css';
+import PropTypes from "prop-types";
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+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";
 
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 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";
   switch (numCols) {
-    case "1" :
+    case "1":
       divClass = "psdk-default-form-one-column";
       break;
-    case "2" :
+    case "2":
       divClass = "psdk-default-form-two-column";
       break;
-    case "3" :
+    case "3":
       divClass = "psdk-default-form-three-column";
       break;
-    default :
+    default:
       divClass = "psdk-default-form-one-column";
       break;
   }
 
-
   // repoint the children because they are in a region and we need to not render the region
   // to take the children and create components for them, put in an array and pass as the
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
-  // eslint-disable-next-line react/no-array-index-key
-  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));
+  const dfChildren = arChildren.map((kid, idx) =>
+    createElement(createPConnectComponent(), { ...kid, key: idx })
+  );
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <div className={divClass}>
-      {dfChildren}
-    </div>
+      <div className={divClass}>
+        <div>{instructionText}</div>
+        {dfChildren}
+      </div>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-  )
-
+  );
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  NumCols: "1"
+  NumCols: "1",
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   // children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  NumCols: PropTypes.string
+  NumCols: PropTypes.string,
 };

package/src/tasks/create/templates/SDK-React/template/FORM/utils.ts.mustache

@@ -0,0 +1,76 @@
+//  This file is adapted from React components/Templates/utils.js
+declare const PCore: any;
+export function getAllFields(pConnect: any) {
+  const metadata = pConnect.getRawMetadata();
+  let allFields = [];
+  if (metadata.children && metadata.children.map) {
+    allFields = metadata.children.map((fields) => {
+      const children = fields.children instanceof Array ? fields.children : [];
+      return children.map((field) => field.config);
+    });
+  }
+  return allFields;
+}
+
+export function filterForFieldValueList(fields : any) {
+  return fields
+    .filter(({ visibility }) => visibility !== false)
+    .map(({ value, label }) => ({
+      id: label.toLowerCase(),
+      name: label,
+      value
+    }));
+}
+
+/**
+ * Determine if the current view is the view of the case step/assignment.
+ * @param {Function} pConnect PConnect object for the component
+ */
+ export function getIsAssignmentView(pConnect) {
+  // Get caseInfo content from the store which contains the view info about the current assignment/step
+  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
+  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+
+  return assignmentViewId === currentViewId;
+}
+
+/**
+ * A hook that gets the instructions content for a view.
+ * @param {Function} pConnect PConnect object for the component
+ * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
+ */
+export function getInstructions(pConnect, instructions = 'casestep') {
+  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+
+  // Determine if this view is the current assignment/step view
+  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
+
+  // Case step instructions
+  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
+    return caseStepInstructions;
+  }
+
+  // No instructions
+  if (instructions === 'none') {
+    return undefined;
+  }
+
+  // If the annotation wasn't processed correctly, don't return any instruction text
+  if (instructions?.startsWith('@PARAGRAPH')) {
+    return undefined;
+  }
+
+  // Custom instructions from the view
+  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
+  // it is evaluated by core logic to the content
+  if (instructions !== 'casestep' && instructions !== 'none') {
+    return instructions;
+  }
+  return undefined;
+}

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 
-import AppAnnouncement from '@pega/react-sdk-components/lib/components/widgets/AppAnnouncement';
+import AppAnnouncement from "@pega/react-sdk-components/lib/components/widget/AppAnnouncement";
 
 import { pyHome1Resolved, pyHome1Raw } from './mock.stories';
 

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

@@ -27,7 +27,14 @@ window.PCore.getUserApi = () => {
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    caseOpConfig: configProps,
+    label: configProps.label,
+    createLabel: configProps.createLabel,
+    updateLabel: configProps.updateLabel,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+    hideLabel: configProps.hideLabel,
 
     getPConnect: () => {
       return {