@pega/dx-component-builder-sdk 0.8.1 → 0.8.3

package/tests/assets/components/SDK-React/createAll/override-sdk/template/BannerPage/BannerPage.tsx

@@ -0,0 +1,53 @@
+import { useMemo, Children } from 'react';
+import Banner from '@pega/react-sdk-components/lib/components/designSystemExtension/Banner';
+import React from 'react';
+
+// BannerPage does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface BannerPageProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  layout?: string,
+  heading?: string,
+  message?: string,
+  imageTheme?: string,
+  backgroundImage?: string,
+  backgroundColor?: string,
+  tintImage?: boolean
+}
+
+/*
+ * BannerPage template.
+ */
+export default function BannerPage(props: BannerPageProps) {
+  const {
+    children,
+    layout = 'two-column',
+    heading = '',
+    message = '',
+    imageTheme = 'light',
+    backgroundImage = '',
+    backgroundColor = '',
+    tintImage = false
+  } = props;
+
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  return (
+    <Banner
+      variant={layout}
+      a={childArray[0]}
+      b={childArray[1]}
+      banner={{
+        variant: imageTheme,
+        backgroundColor,
+        title: heading,
+        message,
+        backgroundImage,
+        tintImage
+      }}
+    />
+  );
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/template/BannerPage/index.tsx

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

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

@@ -0,0 +1,52 @@
+import React from "react";
+
+import CaseSummaryFields from '@pega/react-sdk-components/lib/components/designSystemExtension/CaseSummaryFields';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface CaseSummaryProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>
+}
+
+
+export default function CaseSummary(props: CaseSummaryProps) {
+  const { getPConnect, children } = props;
+  const thePConn = getPConnect();
+  const theConfigProps = thePConn.getConfigProps();
+  const { status, showStatus } = theConfigProps;
+
+  // 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:Array<any> = [];
+  let arSecondaryFields:Array<any> = [];
+
+  for (const child of children) {
+    const childPConn = child.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/components/SDK-React/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/components/SDK-React/createAll/override-sdk/template/CaseSummary/index.tsx

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

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

@@ -0,0 +1,292 @@
+/* eslint-disable react/jsx-boolean-value */
+
+import React, { useState, useEffect, useContext } from 'react';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { Card, CardHeader, Avatar, Typography, Divider } 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 StoreContext from '@pega/react-sdk-components/lib/bridge/Context/StoreContext';
+import CaseViewActionsMenu from '@pega/react-sdk-components/lib/components/template/CaseViewActionsMenu';
+import VerticalTabs from '@pega/react-sdk-components/lib/components/infra/VerticalTabs/VerticalTabs';
+import DeferLoad from '@pega/react-sdk-components/lib/components/infra/DeferLoad';
+
+import type { 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,
+  children: Array<any>,
+  subheader: string,
+  header: string,
+  showIconInHeader: boolean,
+  caseInfo: any,
+}
+
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+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)
+  },
+  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: CaseViewProps) {
+  const {
+    getPConnect,
+    icon = '',
+    header,
+    subheader,
+    children = [],
+    // eslint-disable-next-line no-unused-vars, @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) {
+      const theMetadataType: string = child.props
+        .getPConnect()
+        .getRawMetadata()
+        ['type'].toLowerCase();
+      const theMetadataName: string = child.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: Array<Object> = [];
+
+  // deferLoadInfo is sent to DeferLoad component (currently selected entry)
+  const deferLoadInfo: Array<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) {
+      PCore.getPubSubUtils().publish(
+        PCore.getEvents().getCaseEvent().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 {
+    const aBHtml = (
+      <Box>
+        {editAction && (
+          <Button
+            onClick={() => {
+              _editClick();
+            }}
+          >
+            {localizedVal('Edit', localeCategory)}
+          </Button>
+        )}
+        <CaseViewActionsMenu
+          getPConnect={getPConnect}
+          availableActions={availableActions}
+          availableProcesses={availableProcesses}
+          caseTypeName={caseTypeName}
+          caseTypeID={caseTypeID}
+        />
+      </Box>
+    );
+
+    return aBHtml;
+  }
+
+  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>
+      );
+    } else {
+      // displayOnlyFA - only show the "todo" region
+      return (
+        <Grid container>
+          <Grid item xs={12}>
+            {theTodoRegion}
+          </Grid>
+        </Grid>
+      );
+    }
+  }
+
+  return getContainerContents();
+}

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

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

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

@@ -0,0 +1,73 @@
+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 type { 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: Array<any>,
+  availableProcesses: Array<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: Array<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 (
+    <React.Fragment>
+      <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>
+    </React.Fragment>
+  );
+}

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

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

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

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-nested-ternary */
+import { Fragment, useState } from 'react';
+import React from 'react';
+import { getToDoAssignments } from '@pega/react-sdk-components/lib/components/infra/Containers/FlowContainer/helpers';
+import ToDo from '@pega/react-sdk-components/lib/components/widget/ToDo';
+import Details from '@pega/react-sdk-components/lib/components/template/Details/Details';
+import { Button, Card, makeStyles } from '@material-ui/core';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// XX does NOT have getPConnect. So, no need to extend from PConnProps
+
+interface ConfirmationProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  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: ConfirmationProps) {
+  const classes = useStyles();
+  const CONSTS = PCore.getConstants();
+  const [showConfirmView, setShowConfirmView] = useState(true);
+  const { showTasks, getPConnect, datasource } = 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/components/SDK-React/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/components/SDK-React/createAll/override-sdk/template/Confirmation/index.tsx

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