@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/NavBar/NavBar.tsx

@@ -0,0 +1,302 @@
+import React, { useEffect, useState } from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import './NavBar.css';
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  ListItemSecondaryAction,
+  Collapse,
+  Divider,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography
+} from '@material-ui/core';
+
+import PersonOutlineIcon from '@material-ui/icons/PersonOutlineOutlined';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined';
+import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import AddIcon from '@material-ui/icons/Add';
+import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
+import ClearOutlinedIcon from '@material-ui/icons/ClearOutlined';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
+import { logout } from '@pega/react-sdk-components/lib/components/helpers/authManager';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface NavBarProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  // eslint-disable-next-line react/no-unused-prop-types
+  appName?: string,
+  pages?: Array<any>,
+  caseTypes: Array<any>,
+  pConn?: any
+}
+
+
+const iconMap = {
+  'pi pi-headline': <HomeOutlinedIcon fontSize='large' />,
+  'pi pi-flag-solid': <FlagOutlinedIcon fontSize='large' />,
+  'pi pi-home-solid': <HomeOutlinedIcon fontSize='large' />
+};
+
+const drawerWidth = 300;
+
+const useStyles = makeStyles(theme => ({
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    height: '100vh'
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    width: theme.spacing(7),
+    [theme.breakpoints.up('md')]: {
+      width: theme.spacing(9)
+    },
+    height: '100vh'
+  },
+  nested: {
+    paddingLeft: theme.spacing(4)
+  },
+  appListItem: {
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.getContrastText(theme.palette.primary.light)
+  },
+  appListLogo: {
+    marginRight: theme.spacing(2),
+    width: '3.6rem'
+  },
+  appListIcon: {
+    color: theme.palette.getContrastText(theme.palette.primary.light)
+  },
+  appListDiv: {
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.getContrastText(theme.palette.primary.light),
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  applicationLabel: {
+    whiteSpace: 'initial'
+  }
+}));
+
+export default function NavBar(props: NavBarProps) {
+  const { pConn, pages = [], caseTypes = [] } = props;
+
+  const classes = useStyles();
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+
+  const { open, setOpen } = useNavBar();
+  const [navPages, setNavPages] = useState(JSON.parse(JSON.stringify(pages)));
+  const [bShowCaseTypes, setBShowCaseTypes] = useState(true);
+  const [bShowOperatorButtons, setBShowOperatorButtons] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
+  const portalLogoImage = Utils.getIconPath(Utils.getSDKStaticConentUrl()).concat(
+    'pzpega-logo-mark.svg'
+  );
+  const portalOperator = PCore.getEnvironmentInfo().getOperatorName();
+  const portalApp = PCore.getEnvironmentInfo().getApplicationLabel();
+
+  useEffect(() => {
+    setNavPages(JSON.parse(JSON.stringify(pages)));
+  }, [pages]);
+
+  function navPanelButtonClick(oPageData: any) {
+    const { pyClassName, pyRuleName } = oPageData;
+
+    pConn
+      .getActionsApi()
+      .showPage(pyRuleName, pyClassName)
+      .then(() => {
+        // eslint-disable-next-line no-console
+        console.log(`${localizedVal('showPage completed', localeCategory)}`);
+      });
+  }
+
+  function navPanelCreateCaseType(sCaseType: string, sFlowType: string) {
+    setOpen(false);
+    const actionInfo = {
+      containerName: 'primary',
+      flowType: sFlowType || 'pyStartCase'
+    };
+
+    pConn
+      .getActionsApi()
+      .createWork(sCaseType, actionInfo)
+      .then(() => {
+        // eslint-disable-next-line no-console
+        console.log(`${localizedVal('createWork completed', localeCategory)}`);
+      });
+  }
+
+  // Toggle showing the Operator buttons
+  function navPanelOperatorButtonClick(evt) {
+    setBShowOperatorButtons(!bShowOperatorButtons);
+    if (!bShowOperatorButtons) setAnchorEl(evt.currentTarget);
+    else setAnchorEl(null);
+  }
+
+  const handleDrawerOpen = () => {
+    setOpen(!open);
+  };
+
+  const handleCaseItemClick = () => {
+    if (!open) {
+      setOpen(true);
+      setBShowCaseTypes(true);
+    } else setBShowCaseTypes(!bShowCaseTypes);
+  };
+
+  useEffect(() => {
+    if (!isDesktop) setOpen(false);
+    else setOpen(true);
+  }, [isDesktop]);
+
+  return (
+    <Drawer
+      variant='permanent'
+      classes={{
+        paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose)
+      }}
+      open={open && isDesktop}
+    >
+      {open ? (
+        <List className={classes.appListItem}>
+          <ListItem onClick={handleDrawerOpen}>
+            <ListItemIcon>
+              <img src={portalLogoImage} className={classes.appListLogo} />
+            </ListItemIcon>
+            <ListItemText
+              primary={
+                <Typography variant='h6' className={classes.applicationLabel}>
+                  {portalApp}
+                </Typography>
+              }
+            />
+            <ListItemSecondaryAction>
+              <IconButton edge='end' onClick={handleDrawerOpen}>
+                <ChevronLeftIcon className={classes.appListIcon} />
+              </IconButton>
+            </ListItemSecondaryAction>
+          </ListItem>
+        </List>
+      ) : (
+        <div className={classes.appListDiv} onClick={handleDrawerOpen}>
+          <ChevronRightIcon
+            className={classes.appListIcon}
+            id='chevron-right-icon'
+            fontSize='large'
+          />
+        </div>
+      )}
+      <List>
+        <ListItem button onClick={handleCaseItemClick}>
+          <ListItemIcon>
+            {bShowCaseTypes && open ? (
+              <ClearOutlinedIcon fontSize='large' />
+            ) : (
+              <AddIcon fontSize='large' />
+            )}
+          </ListItemIcon>
+          <ListItemText primary='Create' />
+          {bShowCaseTypes ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+      </List>
+      <Collapse in={bShowCaseTypes && open} timeout='auto' unmountOnExit className='scrollable'>
+        <List component='div' disablePadding>
+          {caseTypes.map(caseType => (
+            <ListItem
+              button
+              className={classes.nested}
+              onClick={() => navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)}
+              key={caseType.pyLabel}
+            >
+              <ListItemIcon>
+                <WorkOutlineIcon fontSize='large' />
+              </ListItemIcon>
+              <ListItemText primary={caseType.pyLabel} />
+            </ListItem>
+          ))}
+        </List>
+      </Collapse>
+      <List>
+        {navPages.map(page => (
+          <ListItem button onClick={() => navPanelButtonClick(page)} key={page.pyLabel}>
+            <ListItemIcon>{iconMap[page.pxPageViewIcon]}</ListItemIcon>
+            <ListItemText primary={page.pyLabel} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List className='marginTopAuto'>
+        <>
+          <ListItem onClick={navPanelOperatorButtonClick}>
+            <ListItemIcon>
+              <PersonOutlineIcon fontSize='large' />
+            </ListItemIcon>
+            <ListItemText primary={portalOperator} />
+            {open && (
+              <ListItemSecondaryAction>
+                <IconButton edge='end' onClick={navPanelOperatorButtonClick}>
+                  <ChevronRightIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            )}
+          </ListItem>
+          <Menu
+            anchorEl={anchorEl}
+            keepMounted={bShowOperatorButtons}
+            open={bShowOperatorButtons}
+            onClick={navPanelOperatorButtonClick}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right'
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left'
+            }}
+          >
+            <MenuItem onClick={logout}>
+              <ListItemIcon>
+                <ArrowBackIcon fontSize='large' />
+              </ListItemIcon>
+              <Typography variant='inherit'>{localizedVal('Logout', localeCategory)}</Typography>
+            </MenuItem>
+          </Menu>
+        </>
+      </List>
+    </Drawer>
+  );
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/NavBar/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/Stages/Stages.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+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';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface StagesProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  stages: Array<any>
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
+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 DX Component -
+  the stages should be created as part of the CaseView */
+export default function Stages(props: StagesProps) {
+  const classes = useStyles();
+
+  const { getPConnect, stages } = props;
+  const pConn = getPConnect();
+  const key = `${pConn.getCaseInfo().getClassName()}!CASE!${pConn.getCaseInfo().getName()}`.toUpperCase();
+
+
+  const filteredStages = getFilteredStages(stages);
+  const currentStageID = pConn.getValue(PCore.getConstants().CASE_INFO.STAGEID, '');  // 2nd arg empty string until typedef allows optional
+  const stagesObj = filteredStages.map((stage, index, arr) => {
+    const theID = stage.ID || stage.id;
+    return {
+      name: PCore.getLocaleUtils().getLocaleValue(stage.name, null, key),
+      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>
+  )
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/Stages/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/VerticalTabs/VerticalTabs.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from '@material-ui/core/styles'
+
+import Tabs from '@material-ui/core/Tabs';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// VerticalTabs does NOT have getPConnect. So, no need to extend from PConnProps
+interface VerticalTabsProps {
+  // If any, enter additional props that only exist on this component
+  tabconfig: Array<any>
+}
+
+
+// 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: VerticalTabsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const LeftAlignVerticalTab = getComponentFromMap("LeftAlignVerticalTabs");
+
+  // 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>
+  )
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/VerticalTabs/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/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/tests/assets/components/SDK-React/createAll/override-sdk/infra/View/View.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+// import { FieldGroup } from "@pega/cosmos-react-core";
+// import { LazyMap as LazyComponentMap } from "../../components_map";
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import { getAllFields } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+
+// Need to import any templates that we might render
+
+import './View.css';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface ViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  template?: string,
+  label?: string,
+  showLabel: boolean,
+  mode?: string,
+  title?: string,
+  visibility?: boolean,
+  name?: string,
+  bInForm?: boolean
+}
+
+
+//
+// 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'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation'
+];
+
+export default function View(props: ViewProps) {
+  const { children, template, getPConnect, mode, visibility, name: pageName } = 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: any = getPConnect().getInheritedProps();  // try to remove any when getInheritedProps typedefs are fixed
+  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;
+  }
+
+  const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
+  // As long as the template is defined in the dependencies of the view
+  // it will be loaded, otherwise fall back to single column
+  if (visibility === false) {
+    return '';
+  }
+
+  // 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];
+    const ViewTemplate: any = getComponentFromMap(template);
+
+    if (template === 'ListView') {
+      // special case for ListView - add in a prop
+      const bInForm = true;
+      props = { ...props, bInForm };
+    }
+
+    // for debugging/investigation
+    // console.log(`View rendering template: ${template}`);
+
+    // spreading because all props should go to the template
+    let RenderedTemplate = <ViewTemplate key={key} {...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 && !NO_HEADER_TEMPLATES.includes(template) && (
+          <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}</>;
+  }
+
+  return null;
+}
+
+
+// Adapted from Constellation DX Component 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/tests/assets/components/SDK-React/createAll/override-sdk/infra/View/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/_infra.md

@@ -0,0 +1,6 @@
+# The **override-sdk/infra** directory
+
+The **src/components/override-sdk/infra** directory contains the code for **infrastructure** components for which you want to override the default implementation for use with the **React SDK**.
+
+When run the **npm run  create** command to override the default implementation of an **infrastructure** component, the generated code that you can use as a
+starting point for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk/infra**.