@pega/react-sdk-overrides 0.23.6

package/lib/infra/RootContainer/RootContainer.tsx

@@ -0,0 +1,336 @@
+import React, { useMemo, useRef, useState, useEffect, useContext, createElement } from "react";
+// import { Banner, ModalManager } from "@pega/cosmos-react-core";
+import PropTypes, { object } from "prop-types";
+import isEqual from 'lodash.isequal';
+// import ReAuthMessageModal from "../ReAuthenticationModal";
+import { Box, CircularProgress } from "@material-ui/core";
+import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
+import { LazyMap as LazyComponentMap } from "@pega/react-sdk-components/lib/components_map";
+import StoreContext from "@pega/react-sdk-components/lib/bridge/Context/StoreContext";
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+declare const PCore;
+
+//
+// WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+// Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+// is totally at your own risk.
+//
+
+
+const renderingModes = ["portal", "view"];
+
+function usePrevious(value) {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+function getItemView(routingInfo, renderingMode) {
+  const viewConfigs: any = [];
+  if (routingInfo && renderingModes.includes(renderingMode)) {
+    const { accessedOrder, items }: {accessedOrder: any, items:any } = routingInfo;
+    if (accessedOrder && items) {
+      const key = accessedOrder[accessedOrder.length - 1];
+      if (
+        items[key] &&
+        items[key].view &&
+        !Utils.isEmptyObject(items[key].view)
+      ) {
+        viewConfigs.push(items[key]);
+      }
+    }
+  }
+  return viewConfigs;
+}
+
+const RootContainer = (props) => {
+  const {
+    getPConnect,
+    renderingMode,
+    children,
+    skeleton,
+    httpMessages,
+    routingInfo
+  } = props;
+
+  const { displayOnlyFA, isMashup } = useContext(StoreContext);
+
+
+  const pConn = getPConnect();
+
+  const options = { "context": "app" };
+  if (isMashup) {
+    options["context"] = "root";
+  }
+
+  // Used for embedded mode
+  // let newPConn: any;
+  const [componentName, setComponentName] = useState("");
+
+  useEffect( () => {
+    // debugging/investigation help
+    // console.log(`componentName change: ${componentName} triggering a re-render`);
+  }, [componentName] );
+
+  // 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
+    ? httpMessages.map((msg) => msg.message)
+    : httpMessages;
+
+  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(
+      createPConnectComponent(),
+      PCore.createPConnect({
+        meta: {
+          type: "ModalViewContainer",
+          config: {
+            name: "modal"
+          }
+        },
+        options
+      })
+    );
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const MemoizedPreviewViewContainer = useMemo(() => {
+    return createElement(
+      createPConnectComponent(),
+      PCore.createPConnect({
+        meta: {
+          type: "PreviewViewContainer",
+          config: {
+            name: "preview"
+          }
+        },
+        options
+      })
+    );
+  }, []);
+
+
+  //
+  function getNoPortalContent() {
+    let noPortalContent: any;
+
+    switch (componentName) {
+      case "View":
+        noPortalContent = <div>getNoPortalContent: RootContainer wants to render View in noPortal mode</div>
+        break;
+
+      case "ViewContainer": {
+        const configProps = pConn.getConfigProps();
+        const viewContConfig = {
+          "meta": {
+            "type": "ViewContainer",
+            "config": configProps
+          },
+        options
+        };
+        const theViewCont = PCore.createPConnect(viewContConfig);
+        // Add in displayOnlyFA if prop is on RootContainer
+        if (displayOnlyFA) {
+          theViewCont["displayOnlyFA"] = true;
+        }
+
+        const theViewContainerAsReact = createElement(createPConnectComponent(), theViewCont);
+
+        noPortalContent = theViewContainerAsReact;
+        break;
+      }
+
+      default:
+        noPortalContent = <div>getNoPortalContent: RootContainer wants to render NO componentName in noPortal mode</div>
+        break;
+
+    }
+
+    return noPortalContent;
+  }
+
+
+  // const rootViewRef: any = useRef(null);
+  let rootView : any;
+  let rootViewConfig: any = null;
+
+  useEffect(() => {
+    const { containers } = PCore.getStore().getState();
+    const items = Object.keys(containers).filter((item) =>
+      item.includes("root")
+    );
+    PCore.getContainerUtils().getContainerAPI().addContainerItems(items);
+  }, [routingInfo]);
+
+  // const { store } = useConstellationContext();
+  const items: any = getItemView(routingInfo, renderingMode);
+
+  if (items.length > 0) {
+    rootViewConfig = {
+      meta: items[0].view,
+      options: {
+        context: items[0].context
+      }
+    };
+  }
+  const prevRootConfig = usePrevious(rootViewConfig);
+
+  if (
+    renderingModes.includes(renderingMode) &&
+    messages &&
+    routingInfo &&
+    routingInfo?.accessedOrder.length === 0
+  ) {
+    return <div id="root-container">{banners}</div>;
+  }
+
+  if (items.length > 0) {
+    const itemView = items[0].view;
+    const currentRootConfig = {
+      meta: itemView,
+      options: {
+        context: items[0].context
+      }
+    };
+
+    if (!isEqual(currentRootConfig, prevRootConfig)) {
+      rootView = createElement(
+          createPConnectComponent(),
+          PCore.createPConnect(currentRootConfig)
+        );
+    }
+
+    // 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()}`);
+
+    return (
+      <div id="ModalManager">
+          {rootView}
+          {MemoizedModalViewContainer}
+          <div id="MemoizedPreviewViewContainer"></div>
+          <div id="ReAuthMessageModal"></div>
+      </div>
+    );
+
+  }
+  else if (renderingMode === "noPortal") {
+    // eslint-disable-next-line no-console
+    console.log(`RootContainer rendering in noPortal mode`);
+
+    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);
+      }
+    }
+
+    const noPortalContent = getNoPortalContent();
+
+    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>
+        {children}
+        {MemoizedModalViewContainer}
+      </React.Fragment>
+
+    );
+  } 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>
+
+    return (
+      <div id="root-container">
+        {/* <div>RootContainer: Trying to show skeleton</div> */}
+        <Box textAlign="center"><CircularProgress /></Box>
+      </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>
+      </div>
+    );
+  }
+};
+
+RootContainer.defaultProps = {
+  getPConnect: null,
+  renderingMode: null,
+  children: null,
+  routingInfo: object
+};
+
+RootContainer.propTypes = {
+  getPConnect: PropTypes.func,
+  renderingMode: PropTypes.string,
+  routingInfo: PropTypes.shape({
+    type: PropTypes.string,
+    accessedOrder: PropTypes.array,
+    items: PropTypes.object
+  }),
+  children: PropTypes.arrayOf(PropTypes.oneOfType( [PropTypes.object, PropTypes.string ]))
+};
+
+export default RootContainer;

package/lib/infra/RootContainer/index.tsx

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

package/lib/infra/Stages/Stages.tsx

@@ -0,0 +1,120 @@
+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';
+import DoneIcon from '@material-ui/icons/Done';
+import { makeStyles } from '@material-ui/core/styles';
+
+declare const PCore: any;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  completedStage: {
+    color: theme.palette.text.primary,
+  },
+  currentStage: {
+    color: theme.palette.info.dark,
+    fontWeight: 600,
+  },
+  futureStage: {
+    color: theme.palette.text.secondary,
+  },
+  separatorIcon: {
+    color: theme.palette.text.disabled,
+  }
+
+}));
+
+
+/**
+ * API to filter out the alternate stages which are not in active and return all other stages
+ * @param {Array} stages - Stages of a case type
+ *
+ * @returns {Array} - Returns stages which are non alternate stages and alternate stage which is active.
+ */
+function getFilteredStages(stages) {
+  if (!Array.isArray(stages)) {
+    return [];
+  }
+
+  return stages.filter(
+    (stage) =>
+      stage.type !== "Alternate" ||
+      (stage.type === "Alternate" && stage.visited_status === "active")
+  );
+}
+
+/* TODO - this component should be refactored and not exposed as top level Nebula component -
+  the stages should be created as part of the CaseView */
+export default function Stages(props) {
+  const classes = useStyles();
+
+  const { getPConnect, stages } = props;
+  const pConn = getPConnect();
+
+  const filteredStages = getFilteredStages(stages);
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID);
+  const stagesObj = filteredStages.map((stage, index, arr) => {
+    const theID = stage.ID || stage.id;
+    return {
+      name: stage.name,
+      id: theID,
+      complete: stage.visited_status === "completed",
+      current: (theID === currentStageID),
+      last: (index === arr.length - 1),
+    };
+  });
+
+  // debugging/investigation help
+  // console.log(`Stages: current: ${currentStageID} stagesObj: ${JSON.stringify(stagesObj)}`);
+
+  function getStage(stage, index) {
+    //  Removing nested ternary for lint
+    // const theClass = stage.current ? classes.currentStage : (stage.complete ? classes.completedStage : classes.futureStage);
+    let theClass;
+    if (stage.current) {
+      theClass = classes.currentStage;
+    } else if (stage.complete) {
+      theClass = classes.completedStage;
+    } else {
+      theClass = classes.futureStage;
+    }
+
+    return <span key={index}>
+        {stage.complete ? <DoneIcon color="disabled" fontSize="small" /> : null}
+        <Typography variant="h5" component="span" display="inline" className={theClass}>{stage.name}</Typography>
+      </span>;
+  }
+
+  function getStages(inStages) {
+    return <Breadcrumbs aria-label="stages" separator={<DoubleArrowIcon className={classes.separatorIcon} />}>
+      {inStages.map((stage, index) => {
+        return getStage(stage, index);
+      })}
+    </Breadcrumbs>
+  }
+
+  return (
+    <Card id="Stages" className={classes.root}>
+      {/* Stages<br />
+      currentStageID: {currentStageID}<br />
+      {JSON.stringify(stagesObj)}<br /><br /> */}
+      {getStages(stagesObj)}
+    </Card>
+  )
+}
+
+Stages.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  stages: PropTypes.arrayOf(PropTypes.object).isRequired
+};

package/lib/infra/Stages/index.tsx

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

package/lib/infra/ToDo/ToDo.css

@@ -0,0 +1,87 @@
+.psdk-display-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-todo {
+  padding: 0.5rem;
+}
+
+.psdk-todo-header {
+  display: inline-flex;
+}
+
+.psdk-todo-text {
+  padding: 0.5rem 0.625rem;
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+.psdk-assignment-count {
+  background-color: var(--app-primary-light-color);
+  margin: .5rem;
+  border-radius: 45%;
+  padding: 0.15rem .4rem;
+}
+
+.psdk-todo-id {
+  color: var(--app-primary-color);
+  cursor: pointer;
+}
+
+.psdk-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem; 
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  background: var(--app-primary-color);
+  color: white;
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.psdk-todo-assignment {
+  display: inline-flex; 
+  width:100%; 
+  padding: 0.625rem 0rem;
+}
+
+.psdk-todo-assignment-data {
+  display: inline-flex;
+}
+
+.psdk-todo-assignment-status {
+  background-color: var(--app-neutral-light-color);
+  border-radius: 0.125rem;
+  color: darkslategray;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-todo-assignment-task {
+  color: var(--app-neutral-color);
+}
+
+.psdk-todo-assignment-action {
+  display: inline-flex;
+}
+
+.psdk-todo-card {
+  width: 100%; 
+  padding-left: 0.625rem;
+}
+
+.psdk-todo-show-more {
+  width: 100%;
+  text-align: center;
+}