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

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

@@ -1,45 +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 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 { children } = props;
-  const arFields: Array<any> = [];
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
+
+  // 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(),
+      })
+    );
+
+  // 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;
+      }
 
-  for (const child of children) {
-    const theChildPConn = child.props.getPConnect();
-    const theChildrenOfChild = theChildPConn.getChildren();
-    arFields.push(theChildrenOfChild);
+      return getPConnect().createComponent(field);
+    });
   }
 
+{{! pick new delimiteres for mustache }}
+{{=<% %>=}}
+
   return (
-    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <div id="DetailsOneColumn">
-        <Grid container spacing={1}>
-          <Grid item xs={12}>
-            <DetailsFields fields={arFields[0]} />
-          </Grid>
+    <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>
-      </div>
-    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={12} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </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/mock.stories.js.mustache

@@ -1,34 +1,294 @@
 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",
+  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 {};
+              },
+            };
+          },
+        },
+        {
+          caseOpConfig: {
+            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",
+};
+
+export const pyReviewResolved = {
+  readOnly: true,
+  template: "Details",
+  ruleClass: "MyCo-MyCompon-Work-MyComponents",
+  showLabel: true,
+  label: "Details",
+  localeReference: "MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+  showHighlightedData: true,
+  highlightedData: [
+    {
+      type: "TextInput",
+      config: {
+        value: "New",
+        label: "Work Status",
+        displayMode: "STACKED_LARGE_VAL",
+        displayAsStatus: true,
+      },
+    },
+    {
+      type: "TextInput",
+      config: {
+        value: "M-1002",
+        label: "Case ID",
+        displayMode: "STACKED_LARGE_VAL",
+      },
+    },
+    {
+      type: "DateTime",
+      config: {
+        value: "2022-12-11T20:06:27.232Z",
+        label: "Create date/time",
+        displayMode: "STACKED_LARGE_VAL",
+      },
+    },
+    {
+      type: "UserReference",
+      config: {
+        label: "Create Operator",
+        value: {
+          userId: "conns",
+          userName: "Sara Connor",
+        },
+        placeholder: "Select...",
+        displayMode: "STACKED_LARGE_VAL",
+      },
+    },
+  ],
+  displayMode: "LABELS_LEFT",
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: true,
+    value: "",
+    label: "SLA Deadline",
+    displayMode: "LABELS_LEFT",
+  },
+  {
+    readOnly: true,
+    value: "",
+    label: "SLA Goal",
+    displayMode: "LABELS_LEFT",
+  },
+  {
+    readOnly: true,
+    value: "",
+    label: "SLA Start Time",
+    listType: "associated",
+    datasource: [
+      {
+        key: "AssignmentCreation",
+        value: "The creation time of the Assignment",
+      },
+      {
+        key: "CurrentTime",
+        value: "Current Date Time",
+      },
+    ],
+    displayMode: "LABELS_LEFT",
+  },
+];