@pega/dx-component-builder-sdk 0.8.6 → 0.8.7

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

@@ -1,7 +1,5 @@
 import React, { Children } from "react";
-
-// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '@pega/react-sdk-components/lib/components/template/WideNarrow/WideNarrow';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // WideNarrowPage does NOT have getPConnect. So, no need to extend from PConnProps
 interface WideNarrowPageProps {
@@ -18,6 +16,9 @@ interface WideNarrowPageProps {
  * to the Cosmos template.
  */
 export default function WideNarrowPage(props: WideNarrowPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WideNarrow = getComponentFromMap('WideNarrow');
+
   const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
   const childArray = Children.toArray(children);
 

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

@@ -4,9 +4,10 @@ import { Button } from '@material-ui/core';
 import React, { useState, useEffect } from 'react';
 import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize, getIconForAttachment } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import './Attachment.css';
-import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList'
 import { CircularProgress } from "@material-ui/core";
 import download from "downloadjs";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
 // import type { PConnProps } from '../../../types/PConnProps';
 
 // Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
@@ -27,6 +28,9 @@ function getCurrentAttachmentsList(key, context) {
 }
 
 export default function Attachment(props /* :AttachmentProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryList = getComponentFromMap('SummaryList');
+
   const PCoreVersion = PCore.getPCoreVersion();
   const {value, getPConnect, label, validatemessage} = props;
   /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */
@@ -44,7 +48,7 @@ export default function Attachment(props /* :AttachmentProps */) {
     categoryName = value.pyCategoryName;
   }
 
-  let valueRef = pConn.getStateProps().value;
+  let valueRef = pConn.getStateProps()["value"];
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
   const [file, setFile] = useState(fileTemp);
 
@@ -254,7 +258,7 @@ export default function Attachment(props /* :AttachmentProps */) {
             }
           );
         }
-        const fieldName = pConn.getStateProps().value;
+        const fieldName = pConn.getStateProps()["value"];
         const context = pConn.getContextName();
 
         PCore.getMessageManager().clearMessages({

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,7 +180,6 @@ 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');

package/tests/functional/localCreateBuildDeleteCustom.test.js

@@ -87,7 +87,7 @@ describe('create build and delete local custom', () => {
     expect(stderr).not.toBeNull();
 
     expect(stdout).toContain(`${newFileNameConstellation} schema is valid`);
-    expect(stdout).toContain('Compiled successfully.');
+
     // done();
   }, 60000);
 

package/tests/functional/localCreateBuildDeleteOverride.test.js

@@ -103,7 +103,7 @@ describe('create build and delete local override', () => {
         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);

package/tests/functional/localCreatePublishAllDeleteAllOverride.test.js

@@ -201,11 +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.');
     // expect(stdout).not.toContain('error');

package/tests/functional/localCreatePublishDeleteOverride.test.js

@@ -99,10 +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