@pega/react-sdk-overrides 0.23.17 → 0.23.19

package/lib/infra/Stages/Stages.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-// import { Stages as CosmosStages } from "@pega/cosmos-react-work";
 import PropTypes from "prop-types";
 import { Breadcrumbs, Card, Typography } from "@material-ui/core";
 import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
@@ -54,7 +53,7 @@ function getFilteredStages(stages) {
   );
 }
 
-/* TODO - this component should be refactored and not exposed as top level Nebula component -
+/* TODO - this component should be refactored and not exposed as top level DX Component -
   the stages should be created as part of the CaseView */
 export default function Stages(props) {
   const classes = useStyles();

package/lib/infra/View/View.tsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { SdkComponentMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import ErrorBoundary from '@pega/react-sdk-components/lib/components/infra/ErrorBoundary';
 
-import { getAllFields } from '@pega/react-sdk-components/lib/components/template/utils';
+import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 
 // Need to import any templates that we might render
 
@@ -18,6 +18,15 @@ import './View.css';
 //
 
 const FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
 
 export default function View(props) {
   const { children, template, getPConnect, mode } = props;
@@ -45,35 +54,33 @@ export default function View(props) {
     if (SdkComponentMap) {
       // This is the node_modules version of react_pconnect!
       const theLocalComponent = SdkComponentMap.getLocalComponentMap()[template];
-      if ( theLocalComponent !== undefined) {
-          // eslint-disable-next-line no-console
-          console.log(`View component found ${template}: Local`);
-          ViewTemplate = theLocalComponent
+      if (theLocalComponent !== undefined) {
+        // eslint-disable-next-line no-console
+        console.log(`View component found ${template}: Local`);
+        ViewTemplate = theLocalComponent;
       } else {
-          const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];
-          if ( thePegaProvidedComponent !== undefined) {
-            // console.log(`View component found ${template}: Pega-provided`);
-            ViewTemplate = thePegaProvidedComponent;
-          } else {
-              // eslint-disable-next-line no-console
-              console.error(`View component can't find template type ${template}`);
-              ViewTemplate = ErrorBoundary;
-          }
+        const thePegaProvidedComponent = SdkComponentMap.getPegaProvidedComponentMap()[template];
+        if (thePegaProvidedComponent !== undefined) {
+          // console.log(`View component found ${template}: Pega-provided`);
+          ViewTemplate = thePegaProvidedComponent;
+        } else {
+          // eslint-disable-next-line no-console
+          console.error(`View component can't find template type ${template}`);
+          ViewTemplate = ErrorBoundary;
+        }
       }
 
-      if (template === "ListView") {
+      if (template === 'ListView') {
         // special case for ListView - add in a prop
         const bInForm = true;
-        props = { ...props, bInForm};
+        props = { ...props, bInForm };
       }
     } else {
-
       // eslint-disable-next-line no-console
-      console.warn(`View: SdkComponentMap expected but not found.`)
+      console.warn(`View: SdkComponentMap expected but not found.`);
 
       // eslint-disable-next-line no-console
       console.error(`View: Trying to render an unknown template: ${template}`);
-
     }
 
     // for debugging/investigation
@@ -104,7 +111,7 @@ export default function View(props) {
 
     return (
       <div className='grid-column'>
-        {showLabel && template !== 'SubTabs' && template !== 'SimpleTable' && template !== 'Details' && (
+        {showLabel && !NO_HEADER_TEMPLATES.includes(template) && (
           <div className='template-title-container'>
             <span>{label}</span>
           </div>
@@ -143,7 +150,7 @@ View.propTypes = {
   title: PropTypes.string
 };
 
-// Adapted from Nebula/Constellation to add in additional props for some templates
+// Adapted from Constellation DX Component to add in additional props for some templates
 View.additionalProps = (state, getPConnect) => {
   const thePConn = getPConnect();
   const { template } = thePConn.getConfigProps();

package/lib/template/AppShell/AppShell.tsx

@@ -3,20 +3,9 @@ import PropTypes from "prop-types";
 import { makeStyles } from '@material-ui/core/styles';
 
 import { NavContext } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
-
-// import {
-//   Avatar,
-//   Toaster,
-//   Banner,
-//   AppShell as CosmosAppShell
-// } from "@pega/cosmos-react-core";
-
-// import createPConnectComponent from "../../../bridge/react_pconnect";
-// import { buildRecentList, onRecentClickHandler } from "./Recents/utils";
-
 import './AppShell.css';
 
-// AppShell can emit NavBar and ViewContainer
+// AppShell can emit NavBar
 import NavBar from '@pega/react-sdk-components/lib/components/infra/NavBar';
 
 const useStyles = makeStyles((theme) => ({
@@ -35,10 +24,6 @@ const useStyles = makeStyles((theme) => ({
 declare const PCore;
 
 
-/*
- * The wrapper handles knowing how to take in just children and mapping
- * to the Cosmos template. This could be a combination of things but it knows...
- */
 export default function AppShell(props) {
   const {
     pages,
@@ -50,298 +35,11 @@ export default function AppShell(props) {
   const [open, setOpen] = useState(true);
 
   const pConn = getPConnect();
-  // const actionsAPI = pConn.getActionsApi();
   const envInfo = PCore.getEnvironmentInfo();
 
-  // const bannerRef = useRef(null);
-  // const hasBanner = httpMessages && httpMessages.length ? httpMessages.length > 0 : false;
-
   const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : "";
 
   const classes = useStyles();
-  // let banners = null;
-  // banners = hasBanner && (
-  //   <Banner
-  //     ref={bannerRef}
-  //     id="appShellBanner"
-  //     variant="urgent"
-  //     heading="Error"
-  //     onDismiss={() =>
-  //       pConn.clearErrorMessages({
-  //         category: "HTTP",
-  //         context: null
-  //       })
-  //     }
-  //     messages={httpMessages}
-  //   />
-  // );
-
-  // useEffect(() => {
-  //   if (hasBanner && bannerRef.current) {
-  //     bannerRef.current.focus();
-  //     window.scrollTo(0, bannerRef.current.offsetTop);
-  //   }
-  // }, [hasBanner]);
-
-  /**
-   *
-   * Function to dispatch a show page action for the page links in
-   * the left nav of the app shell
-   *
-   * @param {string} searchString Name of view to show
-   */
-  // function showSearchResults(searchString) {
-  //   if (searchString === "") {
-  //     actionsAPI.showPage("pySearchPage", "Data-Portal");
-  //     return;
-  //   }
-  //   const searchTerm = searchString.replace(/['"]+/g, "");
-  //   PCore.getDataApiUtils()
-  //     .getData(
-  //       "D_pySearch",
-  //       `{"dataViewParameters": {"SearchString": "${encodeURIComponent(
-  //         searchTerm
-  //       )}"}}`
-  //     )
-  //     .then((response) => {
-  //       if (
-  //         response.data.data !== null &&
-  //         response.data.resultCount === 1 &&
-  //         response.data.data[0].pyID === searchTerm
-  //       ) {
-  //         /* This is a match for a work item - then we will open it */
-  //         pConn
-  //           .getActionsApi()
-  //           .openWorkByHandle(
-  //             response.data.data[0].pzInsKey,
-  //             response.data.data[0].pzCategoryActionKeys
-  //           );
-  //         return;
-  //       }
-  //       // window.searchResults = {
-  //       //   searchString: searchTerm,
-  //       //   results: response.data
-  //       // };
-  //       actionsAPI.showPage("pySearchPage", "Data-Portal");
-  //     });
-  // }
-
-  /**
-   *
-   * Function to dispatch a show page action for the page links in
-   * the left nav of the app shell
-   *
-   * @param {string} viewName Name of view to show
-   * @param {string} className Pega Applies to class of the page
-   */
-  // function showPage(viewName, className) {
-  //   actionsAPI.showPage(viewName, className);
-  // }
-
-  /**
-   *
-   * Function to dispatch a create work action
-   * @param {string} className - placeholder string of case type being created
-   */
-  // function createWork(className) {
-  //   actionsAPI
-  //     .createWork(className)
-  //     .catch((error) =>
-  //       // eslint-disable-next-line no-console
-  //       console.log("Error in case creation: ", error?.message)
-  //     );
-  // }
-
-  /**
-   * Returns the Custome Component for each active case
-   */
-  // const VisualComponent = useCallback(
-  //   (context) => {
-  //     if (activeCases && activeCases.length > 0) {
-  //       const meta = PCore.getViewResources().fetchViewResources(
-  //         "pyCaseVisual",
-  //         getPConnect(),
-  //         PCore.getStoreValue(".caseTypeID", "caseInfo", context)
-  //       );
-  //       if (meta?.config && !meta.config.defaultVisual) {
-  //         const config = {
-  //           meta,
-  //           options: {
-  //             context,
-  //             pageReference: "caseInfo.content"
-  //           }
-  //         };
-  //         const visualConfig = PCore.createPConnect(config);
-  //         return React.createElement(createPConnectComponent(), visualConfig);
-  //       }
-  //     }
-  //     return undefined;
-  //   },
-  //   [getPConnect, activeCases]
-  // );
-
-  /**
-   * Transforms the active cases information into the model that cosmos expect.
-   */
-  // function getActiveCases() {
-  //   if (activeCases) {
-  //     const activeCaseLinks = [];
-  //     activeCases.forEach((activeCase) => {
-  //       const { caseID, className, workID, active, context } = activeCase;
-  //       // activeCaseLinks.push({
-  //       //   onDismiss: () => {
-  //       //     PCore.getContainerUtils().closeContainerItem(
-  //       //       activeCase.containerItemID
-  //       //     );
-  //       //   },
-  //       //   key: caseID,
-  //       //   name: caseID,
-  //       //   onClick: () => {
-  //       //     actionsAPI.openWorkByHandle(workID, className);
-  //       //   },
-  //       //   active,
-  //       //   visual: VisualComponent(context)
-  //       // });
-  //     });
-  //     return activeCaseLinks;
-  //   }
-  //   return activeCases;
-  // }
-
-  /**
-   * Translate Pega Data Page into the model that Cosmos expects
-   *
-   * Example:
-   *   pxPageViewIcon: "pi pi-home-solid"
-   *   pxURLPath: "Home"
-   *   pyClassName: "Data-Portal"
-   *   pyLabel: "Home"
-   *   pyRuleName: "pyHome"
-   */
-  // const links = !pages
-  //   ? []
-  //   : pages.map((page) => {
-  //       return {
-  //         name: page.pyLabel,
-  //         icon: page.pxPageViewIcon.replace("pi pi-", ""),
-  //         onClick: () => showPage(page.pyRuleName, page.pyClassName)
-  //       };
-  //     });
-
-  // const userName = envInfo.getOperatorName();
-  // const imageKey = envInfo.getOperatorImageInsKey();
-
-  // const logOffAction = () => {
-  //   actionsAPI.logout().then(() => window?.top?.location?.reload());
-  // };
-
-  // const getOperator = () => {
-  //   const operatorActions = [
-  //     [{ text: "Logoff", id: "1", onClick: logOffAction }]
-  //   ];
-  //   if (imageKey) {
-  //     return {
-  //       avatar: (
-  //         <div id="AvatarWithImageKey">Avatar with image key</div>
-  //         // <Avatar
-  //         //   name={userName}
-  //         //   imageSrc={getPConnect().getImagePath(imageKey)}
-  //         // />
-  //       ),
-  //       actions: operatorActions,
-  //       name: userName
-  //     };
-  //   }
-  //   return {
-  //     avatar: (
-  //       <div id="Avatar">Avatar</div>
-  //       // <Avatar name={userName}>
-  //       //   {userName
-  //       //     .split(" ")
-  //       //     .map((i) => i.charAt(0))
-  //       //     .join("")
-  //       //     .toUpperCase()}
-  //       // </Avatar>
-  //     ),
-  //     actions: operatorActions,
-  //     name: userName
-  //   };
-  // };
-
-  /**
-   * Translate Case Types page into what is expected by Cosmos
-   *
-   * Example:
-   *   pyClassName: ""
-   *   pyFlowType: ""
-   *   pyLabel: "No case types defined"
-   */
-  // const cases = !caseTypes
-  //   ? []
-  //   : caseTypes.map((caseType) => {
-  //       let action = {};
-  //       // Only add actions to entries with a class name to create so in case of empty message no action is added
-  //       if (caseType.pyClassName) {
-  //         action = { onClick: () => createWork(caseType.pyClassName) };
-  //       }
-  //       return {
-  //         name: caseType.pyLabel,
-  //         ...action
-  //       };
-  //     });
-
-  // const [recents, setRecents] = useState([]);
-
-  // const [searchVal, setSearchVal] = useState("");
-
-  // // default the icon to be empty. This will cause the image to be initially broken.
-  // const [iconURL, setIconURL] = useState("");
-  // useEffect(() => {
-  //   // using the default icon then fetch it from the static folder (not auth involved)
-  //   if (
-  //     !portalLogo ||
-  //     portalLogo.toLowerCase().includes("pzpega-logo-mark") ||
-  //     portalLogo.toLowerCase().includes("py-logo")
-  //   ) {
-  //     setIconURL(
-  //       `${PCore.getAssetLoader().getStaticServerUrl()}static/py-logo.svg`
-  //     );
-  //   }
-  //   // not using default icon to fetch it using the way which uses authentication
-  //   else {
-  //     PCore.getAssetLoader()
-  //       .getSvcImage(portalLogo)
-  //       .then((data) => {
-  //         setIconURL(window.URL.createObjectURL(data));
-  //       })
-  //       .catch(() => {
-  //         console.error(
-  //           `Unable to load the image for the portal logo/icon with the insName:${portalLogo}`
-  //         );
-  //       });
-  //   }
-  // }, [portalLogo]);
-
-  /**
-   * To fetch recents and translate items into what Cosmos expects
-   */
-  // const fetchRecents = () => {
-  //   actionsAPI.getRecents(15).then((response) => {
-  //     const recentsitems = response.data.recents;
-  //     // setRecents(buildRecentList(recentsitems));
-  //   });
-  // };
-
-  /**
-   * To handle on click of any recent item after the drawer is open
-   *
-   * @param {*} id : Recent item unique id
-   */
-
-  // const onItemClick = (id, e) => {
-  //   e.preventDefault();
-  //   // onRecentClickHandler(id, actionsAPI);
-  // };
 
   // useState for appName and mapChildren - note these are ONLY updated once (on component mount!)
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
@@ -382,57 +80,18 @@ export default function AppShell(props) {
         </div>
       </div>
     </NavContext.Provider>
-
-    // <Toaster dismissAfter={3000}>
-    //   <CosmosAppShell
-    //     {...{
-    //       appInfo: {
-    //         imageSrc: `${iconURL}`,
-    //         appName: `${appNameToDisplay}`,
-    //         portalName
-    //       },
-    //       recents: {
-    //         items: recents,
-    //         onDrawerOpen: fetchRecents,
-    //         onItemClick
-    //       },
-    //       searchInput: {
-    //         onSearchChange: (value) => {
-    //           setSearchVal(value);
-    //         },
-    //         onSearchSubmit: (value) => {
-    //           showSearchResults(value.trim());
-    //           setSearchVal("");
-    //         },
-    //         value: searchVal
-    //       },
-    //       caseTypes: cases,
-    //       links,
-    //       cases: getActiveCases(),
-    //       operator: getOperator()
-    //     }}
-    //     main={[children]}
-    //     banners={banners}
-    //     className="app-shell"
-    //   />
-    // </Toaster>
   );
 }
+
 AppShell.defaultProps = {
   pages: [],
   caseTypes: [],
   children: [],
-  // httpMessages: [],
-  // activeCases: null
 };
 AppShell.propTypes = {
-  // portalName: PropTypes.string/* .isRequired */,
-  // portalLogo: PropTypes.string/* .isRequired */,
   showAppName: PropTypes.bool/* .isRequired */,
   pages: PropTypes.arrayOf(PropTypes.object),
   caseTypes: PropTypes.arrayOf(PropTypes.object),
   children: PropTypes.arrayOf(PropTypes.node),
   getPConnect: PropTypes.func.isRequired,
-  // httpMessages: PropTypes.arrayOf(PropTypes.string),
-  // activeCases: PropTypes.arrayOf(PropTypes.object)
 };

package/lib/template/CaseSummary/CaseSummary.tsx

@@ -9,7 +9,7 @@ export default function CaseSummary(props) {
   const theConfigProps = thePConn.getConfigProps();
   const { status, showStatus } = theConfigProps;
 
-  // from Nebula
+  // from Constellation DX Components
   // get the primary and secondary fields with the raw data (which has the non-resolved property values)
   // const regionsRaw = getPConnect().getRawMetadata().children;
   // const primaryFieldsRaw = regionsRaw[0].children;

package/lib/template/CaseView/CaseView.tsx

@@ -62,6 +62,7 @@ export default function CaseView(props) {
 
   const classes = useStyles();
 
+  const editAction = availableActions.find((action) => action.ID === 'pyUpdateCaseDetails');
 
   /**
    *
@@ -163,9 +164,6 @@ export default function CaseView(props) {
 
   function _editClick() {
 
-    const editAction = availableActions.find(
-      (action) => action.ID === "pyUpdateCaseDetails"
-    );
     const actionsAPI = thePConn.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
@@ -176,8 +174,7 @@ export default function CaseView(props) {
   function getActionButtonsHtml(): any {
 
     const aBHtml = <Box>
-            <Button onClick={() => {_editClick()}}>Edit</Button>
-            &nbsp;
+            {editAction && (<Button onClick={() => {_editClick()}}>Edit</Button>)}
             <CaseViewActionsMenu getPConnect={getPConnect} availableActions={availableActions} availableProcesses={availableProcesses} />
         </Box>;
 

package/lib/template/DefaultForm/DefaultForm.tsx

@@ -1,12 +1,15 @@
 import React, { createElement } from "react";
 import PropTypes from "prop-types";
 
+import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
 import './DefaultForm.css';
 
 export default function DefaultForm(props) {
   const { getPConnect, NumCols } = props;
+  const instructions = getInstructions(getPConnect(), props.instructions);
+  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, '');
 
   let divClass: string;
 
@@ -37,6 +40,7 @@ export default function DefaultForm(props) {
 
   return (
     <div className={divClass}>
+      <div>{instructionText}</div>
       {dfChildren}
     </div>
   )

package/lib/template/Details/Details/Details.tsx

@@ -1,46 +1,77 @@
-import React from 'react';
+import React, { createElement } 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 createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 
 export default function Details(props) {
-  const { children, label, showLabel, getPConnect } = 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() };
 
-  for (const child of children) {
-    const theChildPConn = child.props.getPConnect();
-    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
-    theChildPConn.setInheritedProp('readOnly', true);
-    const theChildrenOfChild = theChildPConn.getChildren();
-    arFields.push(theChildrenOfChild);
+  // 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 (
-    <div id='DetailsOneColumn'>
-      {propsToUse.showLabel && (
-        <div className='template-title-container'>
-          <span>{propsToUse.label}</span>
-        </div>
+    <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}>
-        <Grid item xs={12}>
-          <DetailsFields fields={arFields[0]} />
-        </Grid>
+        {children.map((child, i) => (
+          <Grid item xs={12} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
       </Grid>
-    </div>
+    </FieldGroup>
   );
 }
 
 Details.defaultProps = {
   label: undefined,
-  showLabel: true
+  showLabel: true,
+  showHighlightedData: false
 };
 
 Details.propTypes = {
   showLabel: PropTypes.bool,
   label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
 };