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

package/tests/assets/sdk-r/components/create/override-sdk/widget/Followers/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Followers",
+    "name": "Followers",
+    "label": "Followers",
+    "description": "Followers",
+    "type": "Widget",
+    "subtype": "CASE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/Followers/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/QuickCreate/QuickCreate.tsx

@@ -0,0 +1,62 @@
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface QuickCreateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  heading: string;
+  showCaseIcons: boolean;
+  classFilter: any[];
+}
+
+export default function QuickCreate(props: QuickCreateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WssQuickCreate = getComponentFromMap('WssQuickCreate');
+
+  const { getPConnect, heading, showCaseIcons, classFilter } = props;
+  const pConn = getPConnect();
+  const createCase = className => {
+    pConn
+      .getActionsApi()
+      .createWork(className, {} as any)
+      .catch(error => {
+        // eslint-disable-next-line no-console
+        console.log('Error in case creation: ', error?.message);
+      });
+  };
+
+  const cases: any = [];
+  const envInfo = PCore.getEnvironmentInfo();
+  if (
+    classFilter &&
+    envInfo.environmentInfoObject &&
+    envInfo.environmentInfoObject.pyCaseTypeList &&
+    envInfo.environmentInfoObject.pyCaseTypeList.length > 0
+  ) {
+    classFilter.forEach(item => {
+      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
+      let label = '';
+      envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
+        if (casetype.pyWorkTypeImplementationClassName === item) {
+          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
+          label = casetype.pyWorkTypeName ?? '';
+        }
+      });
+      if (label !== '') {
+        cases.push({
+          label,
+          onClick: () => {
+            createCase(item);
+          },
+          ...(showCaseIcons && { icon })
+        });
+      }
+    });
+  }
+
+  return (
+    <div>
+      <WssQuickCreate heading={heading} actions={cases} />
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/QuickCreate/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryItem/SummaryItem.css

@@ -0,0 +1,78 @@
+.psdk-utility {
+  width: 100%;
+  padding: 0.625rem 0rem;
+  text-align: left;
+  border-radius: 0.6125rem;
+  margin: 0.3125rem 0rem;
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+  align-content: center;
+  display: flex;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-utility-card-actions-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: middle;
+  filter: invert(28%) sepia(20%) saturate(3903%) hue-rotate(209deg) brightness(101%) contrast(87%);
+}
+
+.psdk-link-button {
+  background: none;
+  border: none;
+  align-items: center;
+  display: flex;
+  padding: 0;
+  color: #3f51b5;
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryItem/SummaryItem.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './SummaryItem.css';
+
+interface SummaryItemProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  menuIconOverride$: string;
+  menuIconOverrideAction$: any;
+  arItems$: any[] | any;
+}
+
+export default function SummaryItem(props: SummaryItemProps) {
+  let imagePath$ = '';
+  let menuIconOverride$;
+  menuIconOverride$ = props.menuIconOverride$;
+  imagePath$ = Utils.getIconPath(Utils.getSDKStaticConentUrl());
+  const item = props.arItems$;
+  const srcImg = `${imagePath$}${item.visual.icon}.svg`;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  if (menuIconOverride$) {
+    menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, Utils.getSDKStaticConentUrl());
+  }
+
+  function removeAttachment() {
+    props.menuIconOverrideAction$(item);
+  }
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div className='psdk-utility-card'>
+      <div className='psdk-utility-card-icon'>
+        <img className='psdk-utility-card-svg-icon' src={srcImg} />
+      </div>
+      <div className='psdk-utility-card-main'>
+        {item.primary.type !== 'URL' && <div className='psdk-utility-card-main-primary-label'>{item.primary.name}</div>}
+        {item.primary.type === 'URL' && (
+          <div className='psdk-utility-card-main-primary-url'>
+            <button type='button' className='psdk-link-button'>
+              {item.primary.name}&nbsp;
+              <img className='psdk-utility-card-actions-svg-icon' src={`${imagePath$}${item.primary.icon}.svg`} />
+            </button>
+          </div>
+        )}
+        {item.secondary.text && <div style={{ color: item.secondary.error ? 'red' : undefined }}>{item.secondary.text}</div>}
+      </div>
+      <div className='psdk-utility-action'>
+        {menuIconOverride$ && (
+          <button type='button' className='psdk-utility-button' aria-label='Delete Attachment' onClick={removeAttachment}>
+            <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
+          </button>
+        )}
+        {!menuIconOverride$ && (
+          <div>
+            <IconButton
+              id='setting-button'
+              aria-controls={open ? 'file-menu' : undefined}
+              aria-expanded={open ? 'true' : undefined}
+              aria-haspopup='true'
+              onClick={handleClick}
+            >
+              <MoreVertIcon />
+            </IconButton>
+            <Menu style={{ marginTop: '3rem' }} id='file-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+              {item.actions &&
+                item.actions.map(option => (
+                  <MenuItem style={{ fontSize: '14px' }} key={option.id || option.text} onClick={option.onClick}>
+                    {option.text}
+                  </MenuItem>
+                ))}
+            </Menu>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryItem/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryList/SummaryList.tsx

@@ -0,0 +1,23 @@
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface SummaryListProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  arItems$: any[];
+  menuIconOverride$?: string;
+  menuIconOverrideAction$?: any;
+}
+
+export default function SummaryList(props: SummaryListProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryItem = getComponentFromMap('SummaryItem');
+
+  const { menuIconOverride$: menuOverride = '' } = props;
+  return (
+    <div>
+      {props.arItems$.map(file => (
+        <SummaryItem key={file.id} menuIconOverride$={menuOverride} arItems$={file} menuIconOverrideAction$={props.menuIconOverrideAction$} />
+      ))}
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/SummaryList/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/ToDo.css

@@ -0,0 +1,93 @@
+.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: 0.5rem;
+  border-radius: 45%;
+  padding: 0.15rem 0.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;
+}
+
+.psdk-todo-avatar-header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+}

package/tests/assets/sdk-r/components/create/override-sdk/widget/ToDo/ToDo.tsx

@@ -0,0 +1,322 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import React, { useState } from 'react';
+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, useTheme } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import './ToDo.css';
+
+interface ToDoProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  datasource?: any;
+  myWorkList?: any;
+  // eslint-disable-next-line react/no-unused-prop-types
+  caseInfoID?: string;
+  headerText?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  itemKey?: string;
+  showTodoList?: boolean;
+  type?: string;
+  // eslint-disable-next-line react/no-unused-prop-types
+  context?: string;
+  isConfirm?: boolean;
+}
+
+const isChildCase = assignment => {
+  return assignment.isChild;
+};
+
+function topThreeAssignments(assignmentsSource: any[]): 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);
+  }
+  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)
+  },
+  todoWrapper: {
+    borderLeft: '6px solid',
+    borderLeftColor: theme.palette.primary.light,
+    padding: theme.spacing(1),
+    margin: theme.spacing(1)
+  }
+}));
+
+export default function ToDo(props: ToDoProps) {
+  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = 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<any[]>(initAssignments());
+
+  const thePConn = getPConnect();
+  const classes = useStyles();
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Todo';
+  const showlessLocalizedValue = localizedVal('show_less', 'CosmosFields');
+  const showMoreLocalizedValue = localizedVal('show_more', 'CosmosFields');
+  const canPerform = assignments?.[0]?.canPerform === 'true' || assignments?.[0]?.canPerform === true;
+  // const { setOpen } = useNavBar();
+
+  function initAssignments(): any[] {
+    if (assignmentsSource) {
+      assignmentCount = assignmentsSource.length;
+      return topThreeAssignments(assignmentsSource);
+    }
+    // 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: any = {
+      containerName: sTargetContainerName,
+      channelName: ''
+    };
+
+    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 renderTaskId = (type, getPConnect, showTodoList, assignment) => {
+    const displayID = getID(assignment);
+
+    if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
+      /* Supress link for todo inside flow step */
+      return <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>;
+    }
+    return displayID;
+  };
+
+  const getListItemComponent = assignment => {
+    if (isDesktop) {
+      return (
+        <>
+          {localizedVal('Task in', localeCategory)}
+          {renderTaskId(type, getPConnect, showTodoList, assignment)}
+          {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? <span className='psdk-todo-assignment-status'>{assignment.status}</span> : undefined}
+          {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
+        </>
+      );
+    }
+    return (
+      <>
+        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
+        {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
+      </>
+    );
+  };
+
+  const toDoContent = (
+    <>
+      {showTodoList && (
+        <CardHeader
+          title={
+            <Badge badgeContent={assignmentCount} overlap='rectangular' color='primary'>
+              <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+            </Badge>
+          }
+        />
+      )}
+      <List>
+        {assignments.map(assignment => (
+          <div className='psdk-todo-avatar-header' key={getAssignmentId(assignment)}>
+            <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
+              {currentUserInitials}
+            </Avatar>
+            <div style={{ display: 'block' }}>
+              <Typography variant='h6'>{assignment?.name}</Typography>
+              {`${localizedVal('Task in', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
+                'Urgency',
+                localeCategory
+              )}  ${getPriority(assignment)}`}
+            </div>
+            {(!isConfirm || canPerform) && (
+              <div style={{ marginLeft: 'auto' }}>
+                <IconButton id='go-btn' onClick={() => clickGo(assignment)}>
+                  <ArrowForwardIosOutlinedIcon />
+                </IconButton>
+              </div>
+            )}
+          </div>
+        ))}
+      </List>
+    </>
+  );
+
+  return (
+    <>
+      {type === CONSTS.WORKLIST && (
+        <Card className={classes.root}>
+          {showTodoList && (
+            <CardHeader
+              title={
+                <Badge badgeContent={assignmentCount} overlap='rectangular' color='primary'>
+                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                </Badge>
+              }
+              avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
+            />
+          )}
+          <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>
+        </Card>
+      )}
+
+      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
+      {type === CONSTS.TODO && isConfirm && <>{toDoContent}</>}
+
+      {assignmentCount > 3 && (
+        <Box display='flex' justifyContent='center'>
+          {bShowMore ? (
+            <Button color='primary' onClick={_showMore}>
+              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
+            </Button>
+          ) : (
+            <Button onClick={_showLess}>{showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}</Button>
+          )}
+        </Box>
+      )}
+
+      <Snackbar
+        open={showSnackbar}
+        autoHideDuration={3000}
+        onClose={handleSnackbarClose}
+        message={snackbarMessage}
+        action={
+          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
+            <CloseIcon fontSize='small' />
+          </IconButton>
+        }
+      />
+    </>
+  );
+}