@pega/react-sdk-overrides 0.23.18 → 0.23.20

package/lib/infra/RootContainer/RootContainer.tsx

@@ -66,8 +66,6 @@ const RootContainer = (props) => {
     options["context"] = "root";
   }
 
-  // Used for embedded mode
-  // let newPConn: any;
   const [componentName, setComponentName] = useState("");
 
   useEffect( () => {
@@ -78,7 +76,6 @@ const RootContainer = (props) => {
   // debugging/investigation help
   // console.log(`RootContainer props.routingInfo: ${JSON.stringify(routingInfo)}`);
 
-  // const bannerRef = useRef(null);
   let hasBanner = false;
   let banners: any = null;
   const messages = httpMessages
@@ -87,21 +84,6 @@ const RootContainer = (props) => {
 
   hasBanner = messages && messages.length > 0;
   banners = hasBanner && (<div>RootContainer: trying to emit Banner with {messages}</div>);
-    // && (
-    // <Banner
-    //   ref={bannerRef}
-    //   id="appShellBanner"
-    //   variant="urgent"
-    //   heading="Error"
-    //   onDismiss={() =>
-    //     pConn.clearErrorMessages({
-    //       category: "HTTP",
-    //       context: "root"
-    //     })
-    //   }
-    //   messages={messages}
-    // />
-    // );
 
   const MemoizedModalViewContainer = useMemo(() => {
     return createElement(
@@ -175,7 +157,6 @@ const RootContainer = (props) => {
   }
 
 
-  // const rootViewRef: any = useRef(null);
   let rootView : any;
   let rootViewConfig: any = null;
 
@@ -187,7 +168,6 @@ const RootContainer = (props) => {
     PCore.getContainerUtils().getContainerAPI().addContainerItems(items);
   }, [routingInfo]);
 
-  // const { store } = useConstellationContext();
   const items: any = getItemView(routingInfo, renderingMode);
 
   if (items.length > 0) {
@@ -225,14 +205,6 @@ const RootContainer = (props) => {
         );
     }
 
-    // interior was
-    // <ModalManager>
-    //   {rootViewRef.current}
-    //   {MemoisedModalViewContainer}
-    //   {MemoizedPreviewViewContainer}
-    //   <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    // </ModalManager> */}
-
     // debugging/investigation help
     // console.log(`rootView.props.getPConnect().getComponentName(): ${rootView.props.getPConnect().getComponentName()}`);
 
@@ -252,10 +224,7 @@ const RootContainer = (props) => {
 
     const theChildren = pConn.getChildren();
     if (theChildren && (theChildren.length === 1)) {
-      // this.createdPConnect =  theChildren[0];
-      // this.createdPConnect = null;
       const localPConn = theChildren[0].getPConnect();
-      // newPConn = pConn;
       const localCompName = localPConn.getComponentName()
       if (componentName !== localCompName) {
         setComponentName(localCompName);
@@ -267,15 +236,6 @@ const RootContainer = (props) => {
     return noPortalContent;
   }
   else if (children && children.length > 0) {
-    // interior was
-    // <ModalManager>
-    //       {httpMessages ? <div id="root-container">{banners}</div> : ""}
-    //       {children}
-    //       {MemoizedModalViewContainer}
-    //       <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    //       {MemoizedPreviewViewContainer}
-    //     </ModalManager>
-
     return (
       <React.Fragment>
         <div>RootContainer: Has children. Trying to show ModalManager with children, etc.</div>
@@ -285,14 +245,8 @@ const RootContainer = (props) => {
 
     );
   } else if (skeleton) {
-    // TODO: need to update once skeletons are available
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  const LoadingComponent = LazyComponentMap[skeleton];
-    // interior was
-    // <ModalManager>
-    //   <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    //   <LoadingComponent />
-    // </ModalManager>
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    const LoadingComponent = LazyComponentMap[skeleton];
 
     return (
       <div id="root-container">
@@ -301,12 +255,6 @@ const RootContainer = (props) => {
       </div>
     );
   } else {
-    // interior was
-    // <ModalManager>
-    //   {MemoisedModalViewContainer}
-    //   {MemoizedPreviewViewContainer}
-    //   <ReAuthMessageModal openModal={false} key="reauthMessageModel" />
-    // </ModalManager>
     return (
       <div id="root-container">
         <div>RootContainer: Should be ModalManager, etc.</div>

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

@@ -25,7 +25,8 @@ const NO_HEADER_TEMPLATES = [
   'DetailsTwoColumn',
   'DetailsThreeColumn',
   'NarrowWideDetails',
-  'WideNarrowDetails'
+  'WideNarrowDetails',
+  'Confirmation'
 ];
 
 export default function View(props) {
@@ -150,7 +151,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/Confirmation/Confirmation.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-nested-ternary */
+import { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
+import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
+import Details from '@pega/react-sdk-components/lib/components/template/Details/Details';
+import { Button } from '@material-ui/core';
+
+declare const PCore;
+
+export default function Confirmation(props) {
+  const CONSTS = PCore.getConstants();
+  const [showConfirmView, setShowConfirmView] = useState(true);
+  const { showTasks, getPConnect, datasource } = props;
+  // Get the inherited props from the parent to determine label settings
+  // Not using whatsNext at the moment, need to figure out the use of it
+  const whatsNext = datasource?.source;
+  const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(
+    getPConnect().getTarget()
+  );
+  const rootInfo = PCore.getContainerUtils().getContainerItemData(
+    getPConnect().getTarget(),
+    activeContainerItemID
+  );
+  const onConfirmViewClose = () => {
+    setShowConfirmView(false);
+    PCore.getPubSubUtils().publish(
+      PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW,
+      rootInfo
+    );
+  };
+  const todoProps = { ...props, renderTodoInConfirm: true };
+  const toDoList = getToDoAssignments(getPConnect());
+  const detailProps = { ...props, showLabel: false };
+  const showDetails = detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
+  return showConfirmView ? (
+    <Fragment>
+      <h2>{props.showLabel ? props.label : ''}</h2>
+      {showDetails ? <Details {...detailProps} /> : undefined}
+      {showTasks ? (
+        toDoList && toDoList.length > 0 ? (
+          <ToDo
+            {...todoProps}
+            datasource={{ source: toDoList }}
+            getPConnect={getPConnect}
+            type={CONSTS.TODO}
+            headerText='Open Tasks'
+          />
+        ) : undefined
+      ) : undefined}
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button variant='contained' color='primary' onClick={onConfirmViewClose}>
+          Done
+        </Button>
+      </div>
+    </Fragment>
+  ) : toDoList && toDoList.length > 0 ? (
+    <ToDo
+      {...props}
+      datasource={{ source: toDoList }}
+      getPConnect={getPConnect}
+      type={CONSTS.TODO}
+      headerText='Tasks'
+    />
+  ) : null;
+}
+
+Confirmation.defaultProps = {
+  datasource: undefined,
+  label: '',
+  showLabel: true
+};
+
+Confirmation.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  datasource: PropTypes.objectOf(PropTypes.any),
+  label: PropTypes.string,
+  showLabel: PropTypes.bool
+};

package/lib/template/Confirmation/config-ext.json

@@ -0,0 +1,12 @@
+{
+  "name": "Confirmation",
+  "label": "Confirmation",
+  "description": "Confirmation template",
+  "type": "Template",
+  "subtype": "CASE",
+  "icon": "confirm-view.svg",
+  "hideTemplateEdit": true,
+  "hideViewName": true,
+  "properties": [
+  ]
+}

package/lib/template/Confirmation/index.tsx

@@ -0,0 +1 @@
+export { default } from './Confirmation';