@pega/dx-component-builder-sdk 0.23.6 → 0.23.8

package/tests/assets/components/SDK-React/createAll/override-sdk/widget/FileUtility/FileUtility.tsx

@@ -2,14 +2,16 @@ import React, { useEffect, useState } from "react";
 import TextField from '@material-ui/core/TextField';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import download from "downloadjs";
-import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList';
-import ActionButtonsForFileUtil from '@pega/react-sdk-components/lib/components/widget/FileUtility/ActionButtonsForFileUtil';
+// import SummaryList from '../../SummaryList';
+// import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { Button } from '@material-ui/core';
 import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { CircularProgress } from "@material-ui/core";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 
@@ -23,6 +25,10 @@ declare const PCore: any;
 
 
 export default function FileUtility(props:FileUtilityProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryList = getComponentFromMap('SummaryList');
+  const ActionButtonsForFileUtil = getComponentFromMap('ActionButtonsForFileUtil');
+
   const { getPConnect } = props;
   const thePConn = getPConnect();
   const required = true;

package/tests/assets/components/SDK-React/createAll/override-sdk/widget/QuickCreate/QuickCreate.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import WssQuickCreate from '@pega/react-sdk-components/lib/components/designSystemExtension/WssQuickCreate';
 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 type { PConnProps } from '../../../types/PConnProps';
 
 // Can't add PConnTypes until we can resolve type problems with
@@ -11,6 +11,9 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 
 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) => {

package/tests/assets/components/SDK-React/createAll/override-sdk/widget/SummaryList/SummaryList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SummaryItem from '@pega/react-sdk-components/lib/components/widget/SummaryItem/index'
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // SummaryList does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -12,6 +12,9 @@ interface SummaryListProps {
 
 
 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>

package/tests/assets/components/SDK-React/createAll/override-sdk/widget/ToDo/ToDo.tsx

@@ -31,22 +31,21 @@ import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps
 
 interface ToDoProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  datasource?: any,
-  myWorkList?: any,
+  datasource?: any;
+  myWorkList?: any;
   // eslint-disable-next-line react/no-unused-prop-types
-  caseInfoID?: string,
-  headerText?: string,
+  caseInfoID?: string;
+  headerText?: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  itemKey?: string,
-  showTodoList?: boolean,
-  type?: string,
+  itemKey?: string;
+  showTodoList?: boolean;
+  type?: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  context?: string,
-  isConfirm?: boolean
+  context?: string;
+  isConfirm?: boolean;
 }
 
-
-const isChildCase = assignment => {
+const isChildCase = (assignment) => {
   return assignment.isChild;
 };
 
@@ -65,7 +64,7 @@ function getID(assignment: any) {
   }
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
@@ -86,15 +85,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ToDo(props: ToDoProps) {
-  const {
-    getPConnect,
-    datasource = [],
-    headerText = 'To do',
-    showTodoList = true,
-    myWorkList = {},
-    type = 'worklist',
-    isConfirm = false
-  } = props;
+  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = props;
 
   const CONSTS = PCore.getConstants();
 
@@ -130,15 +121,15 @@ export default function ToDo(props: ToDoProps) {
     }
   }
 
-  const getAssignmentId = assignment => {
+  const getAssignmentId = (assignment) => {
     return type === CONSTS.TODO ? assignment.ID : assignment.id;
   };
 
-  const getPriority = assignment => {
+  const getPriority = (assignment) => {
     return type === CONSTS.TODO ? assignment.urgency : assignment.priority;
   };
 
-  const getAssignmentName = assignment => {
+  const getAssignmentName = (assignment) => {
     return type === CONSTS.TODO ? assignment.name : assignment.stepName;
   };
 
@@ -173,7 +164,7 @@ export default function ToDo(props: ToDoProps) {
     const sTarget = thePConn.getContainerName();
     const sTargetContainerName = sTarget;
 
-    const options = { containerName: sTargetContainerName, channelName: "" };
+    const options = { containerName: sTargetContainerName, channelName: '' };
 
     if (classname === null || classname === '') {
       classname = thePConn.getCaseInfo().getClassName();
@@ -208,30 +199,26 @@ export default function ToDo(props: ToDoProps) {
 
     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 <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>;
     }
     return displayID;
   };
 
-  const getListItemComponent = assignment => {
+  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}
+          {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>
+        <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>
         {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
       </>
     );
@@ -242,37 +229,33 @@ export default function ToDo(props: ToDoProps) {
       {showTodoList && (
         <CardHeader
           title={
-            <Badge badgeContent={assignmentCount} color='primary'>
-              <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+            <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
+              <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
         ></CardHeader>
       )}
       <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 && (
-                <div style={{ marginLeft: 'auto' }}>
-                  <IconButton onClick={() => clickGo(assignment)}>
-                    <ArrowForwardIosOutlinedIcon />
-                  </IconButton>
-                </div>
-              )}
+        {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 && (
+              <div style={{ marginLeft: 'auto' }}>
+                <IconButton onClick={() => clickGo(assignment)}>
+                  <ArrowForwardIosOutlinedIcon />
+                </IconButton>
+              </div>
+            )}
+          </div>
         ))}
       </List>
     </>
@@ -285,8 +268,8 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge badgeContent={assignmentCount} color='primary'>
-                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
+                  <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
               avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
@@ -294,17 +277,9 @@ export default function ToDo(props: ToDoProps) {
           )}
           <CardContent>
             <List>
-              {assignments.map(assignment => (
-                <ListItem
-                  key={getAssignmentId(assignment)}
-                  dense
-                  divider
-                  onClick={() => clickGo(assignment)}
-                >
-                  <ListItemText
-                    primary={getAssignmentName(assignment)}
-                    secondary={getListItemComponent(assignment)}
-                  />
+              {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 />
@@ -317,21 +292,17 @@ export default function ToDo(props: ToDoProps) {
         </Card>
       )}
 
-      {type === CONSTS.TODO && !isConfirm && (
-        <Card className={classes.todoWrapper}>{toDoContent}</Card>
-      )}
+      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <Fragment>{toDoContent}</Fragment>}
 
       {assignmentCount > 3 && (
-        <Box display='flex' justifyContent='center'>
+        <Box display="flex" justifyContent="center">
           {bShowMore ? (
-            <Button color='primary' onClick={_showMore}>
-              {showMoreLocalizedValue ===  'show_more' ? 'Show more': showMoreLocalizedValue}
+            <Button color="primary" onClick={_showMore}>
+              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
             </Button>
           ) : (
-            <Button onClick={_showLess}>
-              {showlessLocalizedValue ===  'show_less' ? 'Show less': showlessLocalizedValue}
-            </Button>
+            <Button onClick={_showLess}>{showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}</Button>
           )}
         </Box>
       )}
@@ -342,8 +313,8 @@ export default function ToDo(props: ToDoProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />

package/tests/functional/localCreateBuildAllDeleteAllCustom.test.js

@@ -180,9 +180,9 @@ describe('create buildAll and deleteAll local custom', () => {
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
 
-    expect(stdout).toContain('Compiled successfully.');
     // expect(stdout).not.toContain('Compiled with warnings.');
     // expect(stdout).toContain('error');
+    
     // expect(stdout).not.toContain('Error');
 
     expect(stdout).toContain('Pega_DXIL_MyTestText');

package/tests/functional/localCreateBuildDeleteOverride.test.js

@@ -100,10 +100,11 @@ describe('create build and delete local override', () => {
       case "SDK-Angular":
         // expect(stdout).toContain(`${fileNameAngular} schema is valid`);
         // expect(stdout).toContain('Compiled successfully.');
+        expect(stdout).toContain("Bundle React component  [completed]");
         break;
       case "SDK-React":
         expect(stdout).toContain(`${fileName} schema is valid`);
-        expect(stdout).toContain('Compiled successfully.');
+
         break;
       case "SDK-WebComponents":
         break;

package/tests/functional/localCreatePublishAllDeleteAllCustom.test.js

@@ -22,7 +22,7 @@ switch (framework) {
 
 describe('create publish and deleteAll local', () => {
   it('initial delete/cleanup', async () => {
-    const script = `npm run deleteAll Local Y --prefix ../../..`;
+    const script = `npm run deleteAll Local custom Y --prefix ../../..`;
 
     const { stdout, stderr } = await exec(script);
     // console.log(stdout);
@@ -178,7 +178,6 @@ describe('create publish and deleteAll local', () => {
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
 
-    expect(stdout).toContain('Compiled successfully.');
     // expect(stdout).not.toContain('Compiled with warnings.');
     // expect(stdout).not.toContain('error');
     // expect(stdout).not.toContain('Error');

package/tests/functional/localCreatePublishAllDeleteAllOverride.test.js

@@ -201,10 +201,6 @@ describe('override publish and deleteAll local override', () => {
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
 
-    // get to work with angular
-    if (framework === "SDK-React") {
-      expect(stdout).toContain('Compiled successfully.');
-    }
 
 
     // expect(stdout).not.toContain('Compiled with warnings.');

package/tests/functional/localCreatePublishDeleteOverride.test.js

@@ -99,11 +99,7 @@ describe('create publish and delete local override', () => {
 
     expect(stdout).toContain(fileName);
 
-    // get to work in angular
-    if (framework === "SDK-React") {
-      expect(stdout).toContain('Compiled successfully.');
-    }
-    
+ 
 
     // verify in map
     const pegaLocalReactComponentMapPath = path.join(path.resolve('../../..'),  'sdk-local-component-map.js');
@@ -115,6 +111,7 @@ describe('create publish and delete local override', () => {
         mapData= fs.readFileSync(pegaLocalAngularComponentMapPath, { encoding: 'utf8' });
         break;
       case "SDK-React":
+        expect(stdout).toContain("Bundle React component  [completed]");
         mapData= fs.readFileSync(pegaLocalReactComponentMapPath, { encoding: 'utf8' });
         break;
       case "SDK-WebComponents":