@pega/dx-component-builder-sdk 0.23.10 → 0.23.11

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/MultiStep.tsx

@@ -0,0 +1,189 @@
+import React, { PropsWithChildren } from 'react';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './MultiStep.css';
+
+interface MultiStepProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  itemKey: string;
+  actionButtons: any[];
+  onButtonPress: any;
+  bIsVertical: boolean;
+  arNavigationSteps: any[];
+}
+
+export default function MultiStep(props: PropsWithChildren<MultiStepProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AssignmentCard = getComponentFromMap('AssignmentCard');
+
+  const { getPConnect, children, itemKey = '', actionButtons, onButtonPress } = props;
+  const { bIsVertical, arNavigationSteps } = props;
+
+  // const svgCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
+  // const svgNotCurrent = Utils.getImageSrc("circle-solid", Utils.getSDKStaticConentUrl());
+
+  function _getVIconClass(status): string {
+    if (status === 'current') {
+      return 'psdk-vertical-step-icon-selected';
+    }
+
+    return 'psdk-vertical-step-icon';
+  }
+
+  function _getVLabelClass(status): string {
+    if (status === 'current') {
+      return 'psdk-vertical-step-label-selected';
+    }
+
+    return 'psdk-vertical-step-label';
+  }
+
+  function _getVBodyClass(index: number): string {
+    if (index < arNavigationSteps.length - 1) {
+      return 'psdk-vertical-step-body psdk-vertical-step-line';
+    }
+
+    return 'psdk-vertical-step-body';
+  }
+
+  function _getHIconClass(status): string {
+    if (status === 'current') {
+      return 'psdk-horizontal-step-icon-selected';
+    }
+
+    return 'psdk-horizontal-step-icon';
+  }
+
+  function _getHLabelClass(status): string {
+    if (status === 'current') {
+      return 'psdk-horizontal-step-label-selected';
+    }
+
+    return 'psdk-horizontal-step-label';
+  }
+
+  function _showHLine(index: number): boolean {
+    // eslint-disable-next-line sonarjs/prefer-single-boolean-return
+    if (index < arNavigationSteps.length - 1) {
+      return true;
+    }
+
+    return false;
+  }
+
+  function buttonPress(sAction: string, sButtonType: string) {
+    onButtonPress(sAction, sButtonType);
+  }
+
+  return (
+    <div>
+      {bIsVertical ? (
+        <div className='psdk-vertical-stepper'>
+          {arNavigationSteps.map((mainStep, index) => {
+            return (
+              <React.Fragment key={mainStep.actionID}>
+                <div className='psdk-vertical-step'>
+                  <div className='psdk-vertical-step-header'>
+                    <div className={_getVIconClass(mainStep.visited_status)}>
+                      <div className='psdk-vertical-step-icon-content'>
+                        <span>{index + 1}</span>
+                      </div>
+                    </div>
+                    <div className={_getVLabelClass(mainStep.visited_status)}>{mainStep.name}</div>
+                  </div>
+                  <div className={_getVBodyClass(index)}>
+                    {mainStep?.steps && (
+                      <ul
+                        style={{
+                          paddingInlineStart: '0rem',
+                          marginLeft: '-7px'
+                        }}
+                      >
+                        {mainStep.steps.forEach(subStep => {
+                          <li className='psdk-sub-step-list'>
+                            <div style={{ display: 'inline-flex' }}>
+                              {subStep.visited_status === 'current' && <img className='psdk-current-svg-icon' src='{svgCurrent}' />}
+                              {subStep.visited_status !== 'current' && <img className='psdk-not-current-svg-icon' src='{svgNotCurrent}' />}
+                              {subStep.visited_status === 'current' && <label className='psdk-sub-step-current'>{subStep.name}</label>}
+                              {subStep.visited_status !== 'current' && <label className='psdk-sub-step-not-current'>{subStep.name}</label>}
+                            </div>
+                            {subStep.visited_status === 'current' && (
+                              <div>
+                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                                  {children}
+                                </AssignmentCard>
+                              </div>
+                            )}
+                          </li>;
+                        })}
+                      </ul>
+                    )}
+                    {!mainStep?.steps && mainStep.visited_status === 'current' && (
+                      <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                        {children}
+                      </AssignmentCard>
+                    )}
+                  </div>
+                </div>
+              </React.Fragment>
+            );
+          })}
+        </div>
+      ) : (
+        <div className='psdk-horizontal-stepper'>
+          <div className='psdk-horizontal-stepper-header-container'>
+            {arNavigationSteps.map((mainStep, index) => {
+              return (
+                <React.Fragment key={mainStep.actionID}>
+                  <div className='psdk-horizontal-step-header'>
+                    <div className={_getHIconClass(mainStep.visited_status)}>
+                      <div className='psdk-horizontal-step-icon-content'>
+                        <span>{index + 1}</span>
+                      </div>
+                    </div>
+                    <div className={_getHLabelClass(mainStep.visited_status)}>
+                      <div className='psdk-horizontal-step-text-label'>{mainStep.name}</div>
+                    </div>
+                  </div>
+                  {_showHLine(index) && <div className='psdk-horizontal-step-line' />}
+                </React.Fragment>
+              );
+            })}
+          </div>
+          {arNavigationSteps.map(mainStep => {
+            return (
+              <React.Fragment key={mainStep.actionID}>
+                {mainStep.steps && (
+                  <ul style={{ paddingInlineStart: '0rem', marginLeft: '35px' }}>
+                    {mainStep.steps.map(subStep => (
+                      <li className='psdk-sub-step-list'>
+                        <div style={{ display: 'inline-flex' }}>
+                          {subStep.visited_status === 'current' && <img className='psdk-current-svg-icon' src='{svgCurrent}' />}
+                          {subStep.visited_status !== 'current' && <img className='psdk-not-current-svg-icon' src='{svgNotCurrent}' />}
+                          {subStep.visited_status === 'current' && <label className='psdk-sub-step-current'>{subStep.name}</label>}
+                          {subStep.visited_status !== 'current' && <label className='psdk-sub-step-not-current'>{subStep.name}</label>}
+                        </div>
+                        {subStep.visited_status === 'current' && (
+                          <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                            {children}
+                          </AssignmentCard>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {!mainStep?.steps && mainStep.visited_status === 'current' && (
+                  <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress}>
+                    {children}
+                  </AssignmentCard>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/MultiStep/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css

@@ -0,0 +1,168 @@
+.psdk-nav-divider {
+  border-bottom: 0.0625rem solid var(--app-nav-color);
+  width: 100%;
+}
+
+.psdk-nav-header {
+  display: flex;
+  padding-top: 0.625rem;
+}
+
+.psdk-nav-logo {
+  /* override vertical-align coming in from Bootstrap "reboot" */
+  vertical-align: baseline;
+
+  width: 3.5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+/* background color white */
+/* filter: var(--app-white-color-filter); */
+.psdk-nav-svg-icon {
+  width: 2.6rem;
+  /* padding-right: 0.625rem; */
+  -webkit-filter: invert(0.75); /* safari 6.0 - 9.0 */
+  filter: invert(0.75);
+}
+
+.psdk-nav-portal-info {
+  margin-top: 0.15rem;
+  margin-bottom: 0.25rem;
+  padding-left: 0.15rem;
+  padding-right: 0.5rem;
+}
+
+.psdk-nav-portal-name {
+  font-size: 1rem;
+}
+
+.psdk-nav-portal-app {
+  font-size: 1rem;
+}
+
+.psdk-appshell-nav {
+  top: 0px; /* JEA */
+  position: relative; /* JEA was fixed */
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 100%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
+}
+
+.psdk-appshell-nav:hover {
+  width: var(--app-nav-width-expanded);
+}
+
+.psdk-appshell-topnav {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 15%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
+}
+
+.psdk-appshell-middlenav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 50%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
+}
+
+.psdk-appshell-bottom {
+  /* to make NavBar logout button stay fixed to bottom of window */
+  /* position: fixed; */
+  bottom: 0px;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width); /* inherit; */
+  border-top: 0.0625rem solid var(--app-nav-color);
+}
+
+/* Added for nav bar buttons to be like middlenav but with no additional flex direction and left justify */
+.psdk-appshell-buttonnav {
+  /* display: flex;
+    flex-direction: row; */
+  border: none;
+  justify-content: left;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 50%;
+  color: var(--app-nav-color);
+  /* overflow: hidden; */
+  white-space: nowrap;
+  transition: width var(--transition-medium) var(--natural-ease);
+  will-change: width;
+}
+
+.psdk-nav-ul-middle {
+  display: block;
+  list-style-type: none;
+  margin: 0rem;
+  padding-inline-start: 30px;
+}
+
+.psdk-nav-li-middle {
+  box-sizing: border-box;
+  text-align: left;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-nav-button-span {
+  padding: 1rem;
+}
+
+.psdk-nav-oper-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: inline-flex;
+  background: var(--app-neutral-color);
+  color: white;
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+.marginTopAuto {
+  margin-top: auto !important;
+}
+
+.scrollable {
+  overflow-y: scroll !important;
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.tsx

@@ -0,0 +1,288 @@
+import { useEffect, useState } from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import clsx from 'clsx';
+
+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 { logout } from '@pega/auth/lib/sdk-auth-manager';
+
+import { useNavBar } from '@pega/react-sdk-components/lib/components/helpers/reactContextHelpers';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './NavBar.css';
+
+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?: any[];
+  caseTypes: 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/sdk-r/components/create/override-sdk/infra/NavBar/index.tsx

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