@pega/react-sdk-overrides 0.23.17 → 0.23.19

package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,53 +1,80 @@
-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 React, { createElement } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { GridSize } from '@material-ui/core/Grid';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+
+const COLUMN_WIDTHS = [4, 8];
 
 export default function NarrowWideDetails(props) {
-  const { a, b, 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() };
 
-  if (arFields.length !== 2) {
-    // eslint-disable-next-line no-console
-    console.error(`NarrowWideDetails expects 2 children and received ${arFields.length}`);
-  }
+  // 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;
+      }
+
+      return getPConnect().createComponent(field);
+    });
+  }
 
   return (
-    <React.Fragment>
-    {children && children.length === 2 &&
-      <div className="psdk-narrow-wide-column">
-        <div className="psdk-narrow-column-column">
-          <DetailsFields fields={arFields[0]} />
-        </div>
-        <div className="psdk-wide-column-column">
-          <DetailsFields fields={arFields[1]} />
-        </div>
-      </div>
-    }
-    {a && b &&
-      <div className="psdk-narrow-wide-column">
-        <div className="psdk-narrow-column-column">
-          {a}
-        </div>
-        <div className="psdk-wide-column-column">
-          {b}
-        </div>
-      </div>
-    }
-    </React.Fragment>
-  )
+    <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={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
 }
 
+NarrowWideDetails.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
 NarrowWideDetails.propTypes = {
-  // showLabel: PropTypes.bool,
-  // label: PropTypes.string,
-  // getPConnect: PropTypes.func.isRequired,
-  // template: PropTypes.string.isRequired
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
 };

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -147,14 +147,12 @@ export default function SimpleTableManual(props) {
     }
   }, [referenceList.length]);
 
-  // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
-  //  so ignoring that for now...
   // fieldDefs will be an array where each entry will have a "name" which will be the
   //  "resolved" property name (that we can use as the colId) though it's not really
   //  resolved. The buildFieldsForTable helper just removes the "@P " (which is what
-  //  Nebula does). It will also have the "label", and "meta" contains the original,
+  //  Constellation DX Components do). It will also have the "label", and "meta" contains the original,
   //  unchanged config info. For now, much of the info here is carried over from
-  //  Nebula and we may not end up using it all.
+  //  Constellation DX Components.
   const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
   const displayedColumns = fieldDefs.map(field => {
@@ -164,18 +162,6 @@ export default function SimpleTableManual(props) {
   // console.log(`SimpleTable displayedColumns:`);
   // console.log(displayedColumns);
 
-  // And now we can process the resolvedFields to add in the "name"
-  //  from from the fieldDefs. This "name" is the value that
-  //  we'll share to connect things together in the table.
-
-  // const processedFields = resolvedFields.map((field, i) => {
-  //   field.config['name'] = displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
-  //   return field;
-  // });
-
-  // console.log("SimpleTable processedFields:");
-  // console.log(processedFields);
-
   // return the value that should be shown as the contents for the given row data
   //  of the given row field
   function getRowValue(inRowData: Object, inColKey: string): any {
@@ -226,25 +212,18 @@ export default function SimpleTableManual(props) {
     }
   }
 
+  // May be useful for debugging or understanding how it works.
   // These are the data structures referred to in the html file.
   //  These are the relationships that make the table work
   //  displayedColumns: key/value pairs where key is order of column and
   //    value is the property shown in that column. Ex: 1: "FirstName"
-  //  processedFields: key/value pairs where each key is order of column
-  //    and each value is an object of more detailed information about that
-  //    column.
   //  rowData: array of each row's key/value pairs. Inside each row,
   //    each key is an entry in displayedColumns: ex: "FirstName": "Charles"
   //    Ex: { 1: {config: {label: "First Name", readOnly: true: name: "FirstName"}}, type: "TextInput" }
   //    The "type" indicates the type of component that should be used for editing (when editing is enabled)
   //
-  //  Note that the "property" shown in the column ("FirstName" in the above examples) is what
-  //  ties the 3 data structures together.
-
   // console.log("SimpleTable displayedColumns:");
   // console.log(displayedColumns);
-  // console.log("SimpleTable processedFields:");
-  // console.log(processedFields);
   // console.log(`SimpleTable rowData (${rowData.length} row(s)):`);
   // console.log(JSON.stringify(rowData));
 

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,54 +1,80 @@
-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 React, { createElement } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { GridSize } from '@material-ui/core/Grid';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+
+const COLUMN_WIDTHS = [8, 4];
 
 export default function WideNarrowDetails(props) {
-  const { a, b, 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() };
 
-  if (arFields.length !== 2) {
-    // eslint-disable-next-line no-console
-    console.error(`WideNarrowDetails expects 2 children and received ${arFields.length}`);
-  }
+  // 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';
 
-  return (
-    <React.Fragment>
-    {children && children.length === 2 &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          <DetailsFields fields={arFields[0]} />
-        </div>
-        <div className="psdk-narrow-column-column">
-          <DetailsFields fields={arFields[1]} />
-        </div>
-      </div>
-    }
-    {a && b &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {a}
-        </div>
-        <div className="psdk-narrow-column-column">
-          {b}
-        </div>
-      </div>
-    }
-    </React.Fragment>
-  )
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
 
+      return getPConnect().createComponent(field);
+    });
+  }
+
+  return (
+    <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={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
 }
 
+WideNarrowDetails.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
 WideNarrowDetails.propTypes = {
-  // showLabel: PropTypes.bool,
-  // label: PropTypes.string,
-  // getPConnect: PropTypes.func.isRequired,
-  // template: PropTypes.string.isRequired
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
 };

package/lib/widget/Attachment/Attachment.css

@@ -16,3 +16,10 @@
   position: absolute;
   left: 47%;
 }
+
+file-label::after {
+  display: inline;
+  content: " *";
+  vertical-align: top;
+  color: rgb(217, 28, 41);
+}

package/lib/widget/Attachment/Attachment.tsx

@@ -23,7 +23,7 @@ export default function Attachment(props) {
   );
   let arFileList$: Array<any> = [];
   const pConn = getPConnect();
-
+  const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
   let fileTemp: any = {};
 
   let categoryName = '';
@@ -35,6 +35,13 @@ export default function Attachment(props) {
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
   const [file, setFile] = useState(fileTemp);
 
+  const resetAttachmentStoredState = () => {
+    PCore.getStateUtils().updateState(pConn.getContextName(), 'attachmentsList', undefined, {
+      pageReference: 'context_data',
+      isArrayDeepMerge: false
+    });
+  };
+
   const fileDownload = (data, fileName, ext) => {
     const fileData = ext ? `${fileName}.${ext}` : fileName;
     download(atob(data), fileData);
@@ -396,9 +403,36 @@ export default function Attachment(props) {
           };
         });
       }
+
+      if (fileTemp) {
+        const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName());
+        const index = currentAttachmentList.findIndex(element => element.props.ID === fileTemp.props.ID);
+        let tempFiles: any = [];
+        if (index < 0) {
+          tempFiles = [fileTemp];
+        }
+        PCore.getStateUtils().updateState(
+          pConn.getContextName(),
+          'attachmentsList',
+          [...currentAttachmentList, ...tempFiles],
+          {
+            pageReference: 'context_data',
+            isArrayDeepMerge: false
+          }
+        );
+      }
+
+      PCore.getPubSubUtils().subscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
+        resetAttachmentStoredState,
+        caseID
+      );
+      return () => {
+        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+      };
     }
   }
-  }, [""]);
+  }, []);
 
   let content = (
     <div className='file-div'>
@@ -432,7 +466,7 @@ export default function Attachment(props) {
 
   return (
     <div className='file-upload-container'>
-      <span className='label'>{label}</span>
+      <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
       <section>{content}</section>
     </div>
   );

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -68,7 +68,7 @@ export default function SummaryItem(props) {
             onClose={handleClose}
           >
           {item.actions && item.actions.map((option) => (
-            <MenuItem style={{fontSize: '14px'}} key={option.id} onClick={option.onClick}>
+            <MenuItem style={{fontSize: '14px'}} key={option.id || option.text} onClick={option.onClick}>
               {option.text}
             </MenuItem>
           ))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.17",
+  "version": "0.23.19",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

package/lib/template/utils.ts

@@ -1,23 +0,0 @@
-//  This file is adapted from React DX components/template/utils.js
-
-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
-    }));
-}