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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseSummary/CaseSummary.tsx

@@ -0,0 +1,55 @@
+import { PropsWithChildren, ReactElement } 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';
+
+interface CaseSummaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function CaseSummary(props: PropsWithChildren<CaseSummaryProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const CaseSummaryFields = getComponentFromMap('CaseSummaryFields');
+
+  const { getPConnect, children } = props;
+
+  const thePConn = getPConnect();
+  const theConfigProps: any = thePConn.getConfigProps();
+  // const { status, showStatus } = theConfigProps;
+  const status = theConfigProps.status;
+  const showStatus = theConfigProps.showStatus;
+
+  // from Constellation DX Components
+  // get the primary and secondary fields with the raw data (which has the non-resolved property values)
+  // const regionsRaw = getPConnect().getRawMetadata().children;
+  // const primaryFieldsRaw = regionsRaw[0].children;
+  // const secondaryFieldsRaw = regionsRaw[1].children;
+
+  // From other SDKs
+  // may want to move these into useEffect/useState combo
+  let arPrimaryFields: any[] = [];
+  let arSecondaryFields: any[] = [];
+
+  for (const child of children as ReactElement[]) {
+    const childPConn = (child as ReactElement).props.getPConnect();
+    const childPConnData = childPConn.resolveConfigProps(childPConn.getRawMetadata());
+    if (childPConnData.name.toLowerCase() === 'primary fields') {
+      arPrimaryFields = childPConnData.children;
+    } else if (childPConnData.name.toLowerCase() === 'secondary fields') {
+      arSecondaryFields = childPConnData.children;
+    }
+  }
+
+  // At this point, should hand off to another component for layout and rendering
+  //  of primary and secondary fields in the Case Summary
+
+  // debugging/investigation help
+  // console.log(`CaseSummary: arPrimaryFields: ${JSON.stringify(arPrimaryFields)}`);
+  // console.log(`CaseSummary: arSecondaryFields: ${JSON.stringify(arSecondaryFields)}`);
+
+  return (
+    <div id='CaseSummary'>
+      <CaseSummaryFields status={status} showStatus={showStatus} theFields={arPrimaryFields} />
+      <CaseSummaryFields theFields={arSecondaryFields} />
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseSummary/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "CaseSummary",
+    "name": "CaseSummary",
+    "label": "Summary data",
+    "description": "Case summary template",
+    "type": "Template",
+    "subtype": "SUMMARY",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseSummary/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseView/CaseView.tsx

@@ -0,0 +1,266 @@
+/* eslint-disable react/jsx-boolean-value */
+
+import { PropsWithChildren, ReactElement, useContext, useEffect, useState } from 'react';
+import { Avatar, Card, CardHeader, Divider, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface CaseViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  icon: string;
+  subheader: string;
+  header: string;
+  showIconInHeader: boolean;
+  caseInfo: 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)
+  },
+  caseViewHeader: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.getContrastText(theme.palette.info.light),
+    borderRadius: 'inherit'
+  },
+  caseViewIconBox: {
+    backgroundColor: theme.palette.info.dark,
+    width: theme.spacing(8),
+    height: theme.spacing(8),
+    padding: theme.spacing(1)
+  },
+  caseViewIconImage: {
+    filter: 'invert(100%)'
+  }
+}));
+
+export default function CaseView(props: PropsWithChildren<CaseViewProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const CaseViewActionsMenu = getComponentFromMap('CaseViewActionsMenu');
+  const VerticalTabs = getComponentFromMap('VerticalTabs');
+  const DeferLoad = getComponentFromMap('DeferLoad');
+
+  const {
+    getPConnect,
+    icon = '',
+    header,
+    subheader,
+    children = [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    showIconInHeader = true,
+    caseInfo: { availableActions = [], availableProcesses = [], hasNewAttachments, caseTypeID = '', caseTypeName = '' }
+  } = props;
+
+  const currentCaseID = props.caseInfo.ID;
+  let isComponentMounted = true;
+
+  const { displayOnlyFA } = useContext<any>(StoreContext);
+
+  const thePConn = getPConnect();
+
+  const classes = useStyles();
+
+  const editAction = availableActions.find(action => action.ID === 'pyUpdateCaseDetails');
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CaseView';
+  const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
+
+  /**
+   *
+   * @param inName the metadata <em>name</em> that will cause a region to be returned
+   */
+  function getChildRegionByName(inName: string): any {
+    for (const child of children as ReactElement[]) {
+      const theMetadataType: string = (child as ReactElement).props.getPConnect().getRawMetadata().type.toLowerCase();
+      const theMetadataName: string = (child as ReactElement).props.getPConnect().getRawMetadata().name.toLowerCase();
+
+      if (theMetadataType === 'region' && theMetadataName === inName) {
+        return child;
+      }
+    }
+
+    return null;
+  }
+
+  const theSummaryRegion = getChildRegionByName('summary');
+  const theStagesRegion = getChildRegionByName('stages');
+  const theTodoRegion = getChildRegionByName('todo');
+  const theUtilitiesRegion = getChildRegionByName('utilities');
+  const theTabsRegion = getChildRegionByName('tabs');
+
+  const svgCase = Utils.getImageSrc(icon, Utils.getSDKStaticConentUrl());
+
+  const [activeVertTab, setActiveVertTab] = useState(0);
+
+  // const tmpLoadData1 = { config: { label: "Details", name: "pyDetailsTabContent" }, type: "DeferLoad" };
+  // const tmpLoadData2 = { config: { label: "Case History", name: "CaseHistory" }, type: "DeferLoad" };
+
+  // Extract the tabs we need to display from theTabsRegion (one tab per entry in theTabsRegionChildren)
+  const theTabsRegionChildren = theTabsRegion.props.getPConnect().getChildren();
+
+  // vertTabInfo is sent to VerticalTabs component
+  const vertTabInfo: Object[] = [];
+
+  // deferLoadInfo is sent to DeferLoad component (currently selected entry)
+  const deferLoadInfo: any[] = [];
+
+  if (theTabsRegionChildren) {
+    // populate vertTabInfo and deferLoadInfo
+    theTabsRegionChildren.forEach((tabComp, index) => {
+      const theTabCompConfig = tabComp.getPConnect().getConfigProps();
+      // eslint-disable-next-line prefer-const
+      let { label, inheritedProps } = theTabCompConfig;
+      // For some tabs, "label" property is not avaialable in theTabCompConfig, so will get them from inheritedProps
+      if (!label) {
+        inheritedProps.forEach(inheritedProp => {
+          if (inheritedProp.prop === 'label') {
+            label = inheritedProp.value;
+          }
+        });
+      }
+      // We'll display the tabs when either visibility property doesn't exist or is true(if exists)
+      if (theTabCompConfig.visibility === undefined || theTabCompConfig.visibility === true) {
+        vertTabInfo.push({ name: label, id: index });
+        deferLoadInfo.push({ type: 'DeferLoad', config: theTabCompConfig });
+      }
+    });
+  }
+
+  function handleVerticalTabClick(eventDetail: any) {
+    const theItem = parseInt(eventDetail.additionalData.itemClicked, 10);
+
+    // only call useEffectSetter if the component is mounted
+    if (isComponentMounted) {
+      setActiveVertTab(theItem);
+    }
+  }
+
+  // Add and Remove event listener for VerticalTabClick only at startup and teardown
+  useEffect(() => {
+    document.addEventListener('VerticalTabClick', (event: any) => {
+      handleVerticalTabClick(event.detail);
+    });
+
+    return (): void => {
+      // inform that the component is unmounted so other code can
+      //  know not to try to call useState setters (to avoid console warnings)
+      isComponentMounted = false;
+
+      document.removeEventListener('VerticalTabClick', (event: any) => {
+        handleVerticalTabClick(event.detail);
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    if (hasNewAttachments) {
+      // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
+      PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+    }
+  }, [hasNewAttachments]);
+
+  function _editClick() {
+    const actionsAPI = thePConn.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(editAction.ID, { ...editAction });
+  }
+
+  function getActionButtonsHtml(): any {
+    return (
+      <Box>
+        {editAction && (
+          <Button
+            onClick={() => {
+              _editClick();
+            }}
+          >
+            {localizedVal('Edit', localeCategory)}
+          </Button>
+        )}
+        <CaseViewActionsMenu
+          getPConnect={getPConnect}
+          availableActions={availableActions}
+          availableProcesses={availableProcesses}
+          caseTypeName={caseTypeName}
+          caseTypeID={caseTypeID}
+        />
+      </Box>
+    );
+  }
+
+  function getContainerContents() {
+    if (!displayOnlyFA) {
+      // show full portal
+      return (
+        <Grid container>
+          <Grid item xs={3}>
+            <div hidden={true} id='current-caseID'>
+              {currentCaseID}
+            </div>
+            <Card className={classes.root}>
+              <CardHeader
+                className={classes.caseViewHeader}
+                title={
+                  <Typography variant='h6' component='div'>
+                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                  </Typography>
+                }
+                subheader={
+                  <Typography variant='body1' component='div' id='caseId'>
+                    {subheader}
+                  </Typography>
+                }
+                avatar={
+                  <Avatar className={classes.caseViewIconBox} variant='square'>
+                    <img src={svgCase} className={classes.caseViewIconImage} />
+                  </Avatar>
+                }
+              />
+              {getActionButtonsHtml()}
+              <Divider />
+              {theSummaryRegion}
+              <Divider />
+              {vertTabInfo.length > 1 && <VerticalTabs tabconfig={vertTabInfo} />}
+            </Card>
+          </Grid>
+
+          <Grid item xs={6}>
+            {theStagesRegion}
+            {theTodoRegion}
+            {deferLoadInfo.length > 0 && <DeferLoad getPConnect={getPConnect} name={deferLoadInfo[activeVertTab].config.name} isTab />}
+          </Grid>
+
+          <Grid item xs={3}>
+            {theUtilitiesRegion}
+          </Grid>
+        </Grid>
+      );
+    }
+    // displayOnlyFA - only show the "todo" region
+    return (
+      <Grid container>
+        <Grid item xs={12}>
+          {theTodoRegion}
+        </Grid>
+      </Grid>
+    );
+  }
+
+  return getContainerContents();
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseView/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "CaseView",
+    "name": "CaseView",
+    "label": "Object page",
+    "description": "Standard case page",
+    "type": "Template",
+    "subtype": "CASEVIEW",
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseView/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseViewActionsMenu/CaseViewActionsMenu.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface CaseViewActionsMenuProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  availableActions: any[];
+  availableProcesses: any[];
+  caseTypeID: string;
+  caseTypeName: string;
+}
+
+export default function CaseViewActionsMenu(props: CaseViewActionsMenuProps) {
+  const { getPConnect, availableActions, availableProcesses, caseTypeID, caseTypeName } = props;
+  const thePConn = getPConnect();
+
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CaseView';
+  const localeKey = `${caseTypeID}!CASE!${caseTypeName}`.toUpperCase();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const arMenuItems: any[] = [];
+
+  function _actionMenuActionsClick(data) {
+    const actionsAPI = thePConn.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(data.ID, {
+      ...data,
+      containerName: 'modal',
+      type: 'express'
+    });
+    // after doing the action, close the menu...
+    handleClose();
+  }
+
+  availableActions.forEach(action => {
+    arMenuItems.push(
+      <MenuItem key={action.ID} onClick={() => _actionMenuActionsClick(action)}>
+        {localizedVal(action.name, '', localeKey)}
+      </MenuItem>
+    );
+  });
+
+  availableProcesses.forEach(process => {
+    arMenuItems.push(<MenuItem onClick={handleClose}>{process.name}</MenuItem>);
+  });
+
+  return (
+    <>
+      <Button aria-controls='simple-menu' aria-haspopup='true' onClick={handleClick}>
+        {localizedVal('Actions...', localeCategory)}
+      </Button>
+      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+        {arMenuItems}
+      </Menu>
+    </>
+  );
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/CaseViewActionsMenu/index.tsx

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

package/tests/assets/sdk-r/components/createAll/override-sdk/template/Confirmation/Confirmation.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable no-nested-ternary */
+import { PropsWithChildren, useState } from 'react';
+import { Button, Card, makeStyles } from '@material-ui/core';
+
+import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ConfirmationProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  datasource: { source: any };
+  label: string;
+  showLabel: boolean;
+  showTasks: boolean;
+}
+
+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)
+  }
+}));
+
+export default function Confirmation(props: PropsWithChildren<ConfirmationProps>) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ToDo = getComponentFromMap('Todo'); // NOTE: ConstellationJS Engine uses "Todo" and not "ToDo"!!!
+  const Details = getComponentFromMap('Details');
+
+  const classes = useStyles();
+  const CONSTS = PCore.getConstants();
+  const [showConfirmView, setShowConfirmView] = useState(true);
+  const { showTasks, getPConnect } = props;
+  // Get the inherited props from the parent to determine label settings
+  // Not using whatsNext at the moment, need to figure out the use of it
+  // const whatsNext = datasource?.source;
+  // const items = whatsNext.length > 0 ? whatsNext.map(item => item.label) : '';
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(getPConnect().getTarget());
+  const rootInfo = PCore.getContainerUtils().getContainerItemData(getPConnect().getTarget(), activeContainerItemID);
+  const onConfirmViewClose = () => {
+    setShowConfirmView(false);
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, rootInfo);
+  };
+  const todoProps = { ...props, renderTodoInConfirm: true };
+  const toDoList = getToDoAssignments(getPConnect());
+  const detailProps = { ...props, showLabel: false };
+  const showDetails = detailProps?.children?.[0]?.props?.getPConnect()?.getChildren()?.length > 0;
+  return showConfirmView ? (
+    <Card className={classes.root}>
+      <h2 id='confirm-label'>{props.showLabel ? props.label : ''}</h2>
+      {showDetails ? <Details {...detailProps} /> : undefined}
+      {showTasks ? (
+        toDoList && toDoList.length > 0 ? (
+          <ToDo {...todoProps} datasource={{ source: toDoList }} getPConnect={getPConnect} type={CONSTS.TODO} headerText='Open Tasks' isConfirm />
+        ) : undefined
+      ) : undefined}
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Button variant='contained' color='primary' onClick={onConfirmViewClose}>
+          Done
+        </Button>
+      </div>
+    </Card>
+  ) : toDoList && toDoList.length > 0 ? (
+    <Card className={classes.root}>
+      <ToDo {...props} datasource={{ source: toDoList }} getPConnect={getPConnect} type={CONSTS.TODO} headerText='Tasks' isConfirm />
+    </Card>
+  ) : null;
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/Confirmation/config-ext.json

@@ -0,0 +1,12 @@
+{
+    "componentKey": "Confirmation",
+    "name": "Confirmation",
+    "label": "Confirmation",
+    "description": "Confirmation template",
+    "type": "Template",
+    "subtype": "CASE",
+    "icon": "confirm-view.svg",
+    "hideTemplateEdit": true,
+    "hideViewName": true,
+    "properties": []
+}

package/tests/assets/sdk-r/components/createAll/override-sdk/template/Confirmation/index.tsx

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