@pega/react-sdk-overrides 0.23.6

package/lib/infra/ToDo/ToDo.tsx

@@ -0,0 +1,285 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Avatar,
+  Typography,
+  Badge,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction
+} from '@material-ui/core';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+import ArrowForwardIosOutlinedIcon from '@material-ui/icons/ArrowForwardIosOutlined';
+import { makeStyles } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+import './ToDo.css';
+
+declare const PCore: any;
+
+const isChildCase = (assignment) => {
+  return assignment.isChild;
+};
+
+function topThreeAssignments(assignmentsSource: Array<any>): Array<any> {
+  return Array.isArray(assignmentsSource) ? assignmentsSource.slice(0, 3) : [];
+}
+
+function getID(assignment: any) {
+  if (assignment.value) {
+    const refKey = assignment.value;
+    return refKey.substring(refKey.lastIndexOf(' ') + 1);
+  } else {
+    const refKey = assignment.ID;
+    const arKeys = refKey.split('!')[0].split(' ');
+    return arKeys[2];
+  }
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    borderLeft: '6px solid',
+    borderLeftColor: theme.palette.primary.light
+  },
+  avatar: {
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.getContrastText(theme.palette.primary.light)
+  }
+}));
+
+export default function ToDo(props) {
+  const { datasource, getPConnect, headerText, showTodoList, myWorkList, type } = props;
+
+  const CONSTS = PCore.getConstants();
+
+  const bLogging = true;
+  let assignmentCount = 0;
+  const currentUser = PCore.getEnvironmentInfo().getOperatorName();
+  const currentUserInitials = Utils.getInitials(currentUser);
+  const assignmentsSource = datasource?.source || myWorkList?.source;
+
+  const [bShowMore, setBShowMore] = useState(true);
+  const [showSnackbar, setShowSnackbar] = useState(false);
+  const [snackbarMessage, setSnackbarMessage]: any = useState('');
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
+  const [assignments, setAssignments] = useState<Array<any>>(initAssignments());
+
+  const thePConn = getPConnect();
+  const classes = useStyles();
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+  // const { setOpen } = useNavBar();
+
+  function initAssignments(): Array<any> {
+    if (assignmentsSource) {
+      assignmentCount = assignmentsSource.length;
+      return topThreeAssignments(assignmentsSource);
+    } else {
+      // turn off todolist
+      return [];
+    }
+  }
+
+  const getAssignmentId = assignment => {
+    return type === CONSTS.TODO ? assignment.ID : assignment.id;
+  };
+
+  const getPriority = assignment => {
+    return type === CONSTS.TODO ? assignment.urgency : assignment.priority;
+  };
+
+  const getAssignmentName = assignment => {
+    return type === CONSTS.TODO ? assignment.name : assignment.stepName;
+  };
+
+  function showToast(message: string) {
+    const theMessage = `Assignment: ${message}`;
+    // eslint-disable-next-line no-console
+    console.error(theMessage);
+    setSnackbarMessage(message);
+    setShowSnackbar(true);
+  }
+
+  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setShowSnackbar(false);
+  }
+
+  function _showMore() {
+    setBShowMore(false);
+    setAssignments(assignmentsSource);
+  }
+
+  function _showLess() {
+    setBShowMore(true);
+    setAssignments(topThreeAssignments(assignmentsSource));
+  }
+
+  function clickGo(assignment) {
+    const id = getAssignmentId(assignment);
+    let { classname = '' } = assignment;
+    const sTarget = thePConn.getContainerName();
+    const sTargetContainerName = sTarget;
+
+    const options = { containerName: sTargetContainerName };
+
+    if (classname === null || classname === '') {
+      classname = thePConn.getCaseInfo().getClassName();
+    }
+
+    if (sTarget === 'workarea') {
+      options['isActionFromToDoList'] = true;
+      options['target'] = '';
+      options['context'] = null;
+      options['isChild'] = isChildCase(assignment);
+    } else {
+      options['isActionFromToDoList'] = false;
+      options['target'] = sTarget;
+    }
+
+    thePConn
+      .getActionsApi()
+      .openAssignment(id, classname, options)
+      .then(() => {
+        if (bLogging) {
+          // eslint-disable-next-line no-console
+          console.log(`openAssignment completed`);
+        }
+      })
+      .catch(() => {
+        showToast(`Submit failed!`);
+      });
+  }
+
+  const getListItemComponent = assignment => {
+    if (isDesktop) {
+      return (
+        <>
+          Task in
+          <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
+          {` \u2022 `}
+          <span className='psdk-todo-assignment-status'>{assignment.status}</span>
+          {` \u2022  Urgency  ${getPriority(assignment)}`}
+        </>
+      );
+    }
+    return (
+      <>
+        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
+        {` \u2022  Urgency  ${getPriority(assignment)}`}
+      </>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      <Card className={classes.root}>
+        {showTodoList && (
+          <CardHeader
+            title={
+              <Badge badgeContent={assignmentCount} color='primary'>
+                <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+              </Badge>
+            }
+            avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
+          ></CardHeader>
+        )}
+        <CardContent>
+          <List>
+            {assignments.map(assignment => (
+              <ListItem
+                key={getAssignmentId(assignment)}
+                dense
+                divider
+                onClick={() => clickGo(assignment)}
+              >
+                <ListItemText
+                  primary={getAssignmentName(assignment)}
+                  secondary={getListItemComponent(assignment)}
+                />
+                <ListItemSecondaryAction>
+                  <IconButton onClick={() => clickGo(assignment)}>
+                    <ArrowForwardIosOutlinedIcon />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+            ))}
+          </List>
+        </CardContent>
+        {assignmentCount > 3 && (
+          <Box display='flex' justifyContent='center'>
+            {bShowMore ? (
+              <Button color='primary' onClick={_showMore}>
+                Show more
+              </Button>
+            ) : (
+              <Button onClick={_showLess}>Show less</Button>
+            )}
+          </Box>
+        )}
+      </Card>
+
+      <Snackbar
+        open={showSnackbar}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+        action={
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      />
+    </React.Fragment>
+  );
+}
+
+ToDo.propTypes = {
+  datasource: PropTypes.instanceOf(Object),
+  myWorkList: PropTypes.instanceOf(Object),
+  // eslint-disable-next-line react/no-unused-prop-types
+  caseInfoID: PropTypes.string,
+  // buildName: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  headerText: PropTypes.string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey: PropTypes.string,
+  showTodoList: PropTypes.bool,
+  // target: PropTypes.string,
+  type: PropTypes.string,
+  // pageMessages: PropTypes.arrayOf(PropTypes.any),
+  // eslint-disable-next-line react/no-unused-prop-types
+  context: PropTypes.string
+  // hideActionButtons: PropTypes.bool
+};
+
+ToDo.defaultProps = {
+  caseInfoID: '',
+  datasource: [],
+  myWorkList: {},
+  // buildName: "",
+  headerText: 'To do',
+  itemKey: '',
+  showTodoList: true,
+  // target: "",
+  type: 'worklist',
+  // pageMessages: null,
+  context: ''
+  // hideActionButtons: false
+};

package/lib/infra/ToDo/index.tsx

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

package/lib/infra/VerticalTabs/LeftAlignVerticalTab.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { withStyles } from '@material-ui/core/styles'
+import {
+  Tab,
+  Divider,
+} from '@material-ui/core';
+
+// LeftAlignVerticalTab is a specialized Tab that has styles to make it
+//  left aligned and full width of the container Tabs
+
+// Aligning the Tab labels left (with & .<class name> syntax) inspired by:
+//  https://stackoverflow.com/questions/63307723/how-to-modify-the-wrapper-css-rule-of-a-tabs-component-to-make-the-text-aligned
+
+// In this styling, "root" is the top-level "Tab" object (which is the button)
+//  and the button contains spans that will match on the '> span'
+const LeftAlignVerticalTab: any = withStyles((/* theme */) => ({
+  root: {
+    width: '100%',
+    maxWidth: '100%',
+  },
+  wrapper: {
+    display: 'block',
+    textAlign: 'left',
+  },
+}))((props) => <div><Tab {...props} /><Divider /></div>);
+
+export default LeftAlignVerticalTab;

package/lib/infra/VerticalTabs/VerticalTabs.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from '@material-ui/core/styles'
+
+import Tabs from '@material-ui/core/Tabs';
+import LeftAlignVerticalTab from './LeftAlignVerticalTab';
+
+
+// The MuiTabs-indicator class is in a span whose parent is div (under the Tabs root component)
+//  So, we're going to make the selected vertical tab indicator use a color from our theme.
+const useStyles = makeStyles((theme) => (
+    {
+    tabs: {
+      '& div > span': {
+        backgroundColor: theme.palette.info.dark,
+        width: "3px"
+      },
+    },
+}));
+
+// Implementation of custom event inspired by:
+//  https://betterprogramming.pub/master-your-react-skills-with-event-listeners-ebc01dde4fad
+const createCustomEvent = (eventName: string, additionalData: {[key: string]: string}): CustomEvent | null => {
+  if (window) {
+    return new CustomEvent(eventName, {
+      detail: { additionalData }
+    });
+  }
+
+  return null;
+};
+
+
+export default function VerticalTabs(props) {
+  // Get a React warning when we use tabConfig as mixed case. So all lowercase tabconfig
+  const { tabconfig } = props;
+  const classes = useStyles();
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+
+    const eventData = {"itemClicked": value.toString()};
+    const myEvent = createCustomEvent('VerticalTabClick', eventData);
+
+    if (myEvent !== null) {
+      document.dispatchEvent( myEvent );
+    }
+
+  }, [value]);
+
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div id="VerticalTabs">
+      {/* VerticalTabs: {JSON.stringify(tabconfig)} */}
+      <Tabs
+        className={classes.tabs}
+        orientation="vertical"
+        value={value}
+        onChange={handleChange}>
+        {tabconfig.map((tab) => <LeftAlignVerticalTab {...props} label={tab.name} key={tab.name} />)}
+      </Tabs>
+    </div>
+  )
+}
+
+VerticalTabs.defaultProps = {
+  tabconfig: []
+};
+
+VerticalTabs.propTypes = {
+  tabconfig: PropTypes.arrayOf(PropTypes.object)
+};

package/lib/infra/VerticalTabs/index.tsx

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

package/lib/infra/View/View.css

@@ -0,0 +1,8 @@
+.template-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  margin-bottom: 5px;
+}

package/lib/infra/View/View.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+// import { FieldGroup } from "@pega/cosmos-react-core";
+// import { LazyMap as LazyComponentMap } from "../../components_map";
+
+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/templates/utils';
+
+// Need to import any templates that we might render
+
+import './View.css';
+//
+// 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 FORMTEMPLATES = ['OneColumn', 'TwoColumn', 'DefaultForm', 'WideNarrow', 'NarrowWide'];
+
+export default function View(props) {
+  const { children, template, getPConnect, mode } = props;
+  let { label, showLabel = false } = props;
+
+  // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
+  // Putting this logic here instead of copy/paste in every Form template index.js
+
+  const inheritedProps = getPConnect().getInheritedProps();
+  label = inheritedProps.label || label;
+  showLabel = inheritedProps.showLabel || showLabel;
+
+  const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
+  if (isEmbeddedDataView && showLabel === undefined) {
+    showLabel = true;
+  }
+
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  //  JA - React SDK not using LazyComponentMap yet
+  if (template /* && LazyComponentMap[template] */) {
+    // const ViewTemplate = LazyComponentMap[template];
+    let ViewTemplate: any;
+
+    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
+      } 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;
+          }
+      }
+
+      if (template === "ListView") {
+        // special case for ListView - add in a prop
+        const bInForm = true;
+        props = { ...props, bInForm};
+      }
+    } else {
+
+      // eslint-disable-next-line no-console
+      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
+    // console.log(`View rendering template: ${template}`);
+
+    // spreading because all props should go to the template
+    let RenderedTemplate = <ViewTemplate {...props}>{children}</ViewTemplate>;
+
+    if (FORMTEMPLATES.includes(template) && showLabel) {
+      // Original:
+      // RenderedTemplate = (
+      //   <FieldGroup name={label} style={{ marginBlockStart: "1rem" }}>
+      //     {RenderedTemplate}
+      //   </FieldGroup>
+      // );
+      RenderedTemplate = (
+        <div
+          data-name='RenderedTemplate'
+          data-template-type={template}
+          /* name */ id='label'
+          style={{ marginBlockStart: '1rem' }}
+          className='grid-column'
+        >
+          {RenderedTemplate}
+        </div>
+      );
+    }
+
+    return (
+      <div className='grid-column'>
+        {showLabel && template !== 'SubTabs' && template !== 'SimpleTable' && (
+          <div className='template-title-container'>
+            <span>{label}</span>
+          </div>
+        )}
+        {RenderedTemplate}
+      </div>
+    );
+  }
+
+  // debugging/investigation help
+  // console.log(`View about to render React.Fragment for children: ${children}`);
+
+  if (children) {
+    return <>{children}</>;
+  } else {
+    return <div id='View'>View has no children.</div>;
+  }
+}
+
+View.defaultProps = {
+  label: undefined,
+  showLabel: undefined,
+  mode: undefined
+};
+
+View.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.array
+  ]) /* array might be empty */,
+  template: PropTypes.string /* .isRequired */,
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  showLabel: PropTypes.bool,
+  mode: PropTypes.string,
+  title: PropTypes.string
+};
+
+// Adapted from Nebula/Constellation to add in additional props for some templates
+View.additionalProps = (state, getPConnect) => {
+  const thePConn = getPConnect();
+  const { template } = thePConn.getConfigProps();
+
+  let propObj = {};
+  let allFields = {};
+
+  switch (template) {
+    case 'CaseSummary':
+      allFields = getAllFields(thePConn);
+      // eslint-disable-next-line no-case-declarations
+      const unresFields = {
+        primaryFields: allFields[0],
+        secondaryFields: allFields[1]
+      };
+      propObj = thePConn.resolveConfigProps(unresFields);
+      break;
+
+    case 'Details':
+      allFields = getAllFields(thePConn);
+      propObj = { fields: allFields[0] };
+      break;
+
+    default:
+      break;
+  }
+
+  return propObj;
+};

package/lib/infra/View/index.tsx

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

package/lib/templates/AppShell/AppShell.css

@@ -0,0 +1,40 @@
+.appshell-top {
+    display: flex;
+    background-color: var(--app-background-color);
+}
+
+
+.appshell-main {
+    position: relative;
+    min-height: 100vh;
+    display: block;
+    width: 100%;
+}
+
+.psdk-icon {
+    padding: 0rem 0.125rem;
+    min-width: unset;
+}
+
+.progress-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    background-color: whitesmoke;
+    position: fixed;
+    z-index: 999;
+    top: 0rem;
+    left: 0rem;
+    opacity: 0.5;
+}
+
+.progress-spinner {
+    text-align: center;
+}
+
+::ng-deep snack-bar-container.snackbar-newline {
+    white-space: pre-line;
+}