@pega/dx-component-builder-sdk 0.25.6 → 0.26.1

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache

@@ -31,7 +31,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const children = (getPConnect().getChildren() as any[]).map((configObject, index) =>
     createElement(createPConnectComponent(), {
       ...configObject,
-      // eslint-disable-next-line react/no-array-index-key
       key: index.toString()
     })
   );

package/src/tasks/create/templates/SDK-React/template/FORM/DefaultForm.css

@@ -16,10 +16,90 @@
   gap: calc(1rem);
 }
 
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
+}
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-default-form-instruction-text ul {
+  padding-left: 30px;
+  list-style-type: disc;
+}
+
+.psdk-default-form-instruction-text ol {
+  padding-left: 30px;
+  list-style-type: decimal;
+}
+
+/* Banner styles */
+.psdk-banner {
+  display: flex;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid;
+  gap: 0.75rem;
+}
+
+.psdk-banner-info {
+  background-color: color-mix(in srgb, var(--app-neutral-color) 12%, var(--app-form-bg-color));
+  border-color: var(--app-neutral-color);
+  color: var(--banner-text-color);
+}
+
+.psdk-banner-warning {
+  background-color: color-mix(in srgb, var(--app-warning-color-dark) 12%, var(--app-form-bg-color));
+  border-color: var(--app-warning-color-dark);
+  color: var(--app-warning-color-dark);
+}
+
+.psdk-banner-success {
+  background-color: color-mix(in srgb, var(--stepper-completed-bg-color) 12%, var(--app-form-bg-color));
+  border-color: var(--stepper-completed-bg-color);
+  color: var(--stepper-completed-bg-color);
+}
+
+.psdk-banner-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.psdk-banner-content {
+  flex: 1;
+  line-height: 1.5;
+}
+
+.psdk-banner-content p {
+  margin: 0;
+}
+
+.psdk-banner-dismiss {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+}
+
+.psdk-banner-dismiss:hover {
+  opacity: 1;
 }

package/src/tasks/create/templates/SDK-React/template/FORM/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache

@@ -1,6 +1,11 @@
-import { createElement, PropsWithChildren } from 'react';
+import { createElement, PropsWithChildren, useState } from 'react';
 
-import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CloseIcon from '@mui/icons-material/Close';
+
+import { getInstructions, getInstructionsType, getDismissBanner, mapInstructionsTypeToBannerVariant } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 import connectToState from '@pega/react-sdk-components/lib/components/helpers/state-utils';
 
@@ -22,12 +27,24 @@ const Child = connectToState(mapStateToProps)(props => {
   return createElement(createPConnectComponent(), { ...rest, key, visibility });
 });
 
+const bannerIconMap = {
+  info: <InfoOutlinedIcon fontSize='small' />,
+  warning: <WarningAmberIcon fontSize='small' />,
+  success: <CheckCircleOutlineIcon fontSize='small' />
+};
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMPONENT_CLASS_NAME}}Props>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
+  const [bannerDismissed, setBannerDismissed] = useState(false);
+
+  const instructionsType = getInstructionsType(props.instructions);
+  const isBanner = typeof props.instructions === 'object' && (props.instructions as any)?.isBanner;
+  const dismissBanner = getDismissBanner(props.instructions);
+  const bannerVariant = mapInstructionsTypeToBannerVariant(instructionsType);
 
   let divClass: string;
 
@@ -55,19 +72,41 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren?.map(kid => <Child key={getKeyForMappedField(kid)} {...kid} />);
 
+  const renderInstructions = () => {
+    if (!instructions || bannerDismissed) return null;
+
+    if (isBanner) {
+      return (
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <div className={`psdk-banner psdk-banner-${bannerVariant}`}>
+          <div className='psdk-banner-icon'>{bannerIconMap[bannerVariant]}</div>
+          <div className='psdk-banner-content' dangerouslySetInnerHTML={{ __html: instructions }} />
+          {dismissBanner && (
+            <button type='button' className='psdk-banner-dismiss' aria-label='Dismiss banner' onClick={() => setBannerDismissed(true)}>
+              <CloseIcon fontSize='small' />
+            </button>
+          )}
+        </div>
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      );
+    }
+
+    return (
+      <div className='psdk-default-form-instruction-text'>
+        {/* server performs sanitization method for instructions html content */}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      </div>
+    );
+  };
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <>
-        {instructions && (
-          <div className='psdk-default-form-instruction-text'>
-            {/* server performs sanitization method for instructions html content */}
-            {/* eslint-disable react/no-danger */}
-            {{! pick new delimiters for mustache }}
-            {{=<% %>=}}
-            <div key='instructions' id='instruction-text' dangerouslySetInnerHTML={{ __html: instructions }} />
-            <%={{ }}=%>     {{! revert delimiters for mustache }}
-          </div>
-        )}
+        {renderInstructions()}
         <div className={divClass}>{dfChildren}</div>
       </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/FORM-region/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/template/FORM-region/index.tsx.mustache

@@ -28,7 +28,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
   const childrenToRender = children as ReactElement[];
 
   if (childrenToRender.length !== 2) {
-    // eslint-disable-next-line no-console
     console.error(`TwoColumn template sees more than 2 columns: ${childrenToRender.length}`);
   }
 

package/src/tasks/create/templates/SDK-React/template/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -108,18 +108,22 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       context
     ) as Promise<any>;
 
-    historyData.then((historyJSON: any) => {
-      const tableDataResults = historyJSON.data.data;
-
-      // compute the rowData using the tableDataResults
-      computeRowData(tableDataResults);
-
-      // At this point, if we have data ready to render and haven't been asked
-      //  to NOT call setWaitingForData, we can stop progress indicator
-      if (bCallSetWaitingForData) {
-        setWaitingForData(false);
-      }
-    });
+    historyData
+      .then((historyJSON: any) => {
+        const tableDataResults = historyJSON.data.data;
+
+        // compute the rowData using the tableDataResults
+        computeRowData(tableDataResults);
+
+        // At this point, if we have data ready to render and haven't been asked
+        //  to NOT call setWaitingForData, we can stop progress indicator
+        if (bCallSetWaitingForData) {
+          setWaitingForData(false);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     return () => {
       // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
@@ -154,9 +158,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2]) : '---' as any}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? dataRow[0] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? dataRow[1] : ('---' as any)}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? dataRow[2] : ('---' as any)}</StyledTableCell>
           </TableRow>
         );
       });

package/src/tasks/create/templates/SDK-React/widget/CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const historyData = {
   data: {
     fetchDateTime: '2023-01-18T12:04:56.517Z',

package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},

package/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -4,29 +4,12 @@ import {
   CardHeader,
   Typography,
   CardActions,
-  Button,
-  TableContainer,
-  Table,
-  TableBody,
-  TableHead,
-  TableCell,
-  TableRow
+  Button
 } from '@mui/material';
-import { withStyles, createStyles } from '@mui/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
-import isDeepEqual from 'fast-deep-equal/react';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { useRef, useEffect, useState } from 'react';
-import { Theme as MuiTheme } from "@mui/material/styles";
-
-declare module "@mui/private-theming" {
-  interface DefaultTheme extends MuiTheme {
-    spacing: (spacing: number) => string;
-  }
-}
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -45,29 +28,11 @@ const useStyles = makeStyles(myTheme => ({
   }
 }));
 
-const StyledTableCell = withStyles((myTheme) =>
-  createStyles({
-    head: {
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'silver',
-      backgroundColor: myTheme.palette.text.disabled,
-      color: myTheme.palette.getContrastText(myTheme.palette.text.disabled)
-    },
-    body: {
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'silver'
-      // fontSize: 14,
-    }
-  })
-)(TableCell);
-
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
-  const { header = '', description = '', datasource = [], whatsnewlink = '', getPConnect } = props;
+  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
   if (datasource && datasource.source) {
     details = datasource.source.map(item => {
@@ -75,136 +40,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [waitingForData, setWaitingForData] = useState<boolean>(true);
-  const thePConn = getPConnect();
-  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
-  const dataViewName = 'D_pyMyWorkList';
-  const context = thePConn.getContextName();
-
-  const rowData: any = useRef([]);
-
   const classes = useStyles();
 
-  const displayedColumns = [
-    {
-      label: thePConn.getLocalizedValue('Case type', '', ''),
-      type: 'TextInput',
-      fieldName: 'pxProcessName'
-    }, // 2nd and 3rd args empty string until typedef marked correctly
-    {
-      label: thePConn.getLocalizedValue('Key', '', ''),
-      type: 'TextInput',
-      fieldName: 'pxRefObjectInsName'
-    }, // 2nd and 3rd args empty string until typedef marked correctly
-    {
-      label: thePConn.getLocalizedValue('Status', '', ''),
-      type: 'TextInput',
-      fieldName: 'pyAssignmentStatus'
-    }, // 2nd and 3rd args empty string until typedef marked correctly
-    {
-      label: thePConn.getLocalizedValue('Stage', '', ''),
-      type: 'TextInput',
-      fieldName: 'pxTaskLabel'
-    } // 2nd and 3rd args empty string until typedef marked correctly
-  ];
-
-  function computeRowData(rows: object[]): void {
-    const theRowData: object[] = [];
-
-    rows?.forEach((row: any, rowIndex: number) => {
-      // Now, for each property in the index of row properties (displayedColumns), add an object
-      //  to a new array of values
-      const rowDisplayValues: any = [];
-
-      displayedColumns.forEach((column: any, rowValIndex) => {
-        const theType = column.type;
-        const theFieldName = column.fieldName;
-        const theValue =
-          theType === 'Date' || theType === 'DateTime' ? Utils.generateDateTime(row[theFieldName], 'DateTime-Short') : row[theFieldName];
-        rowDisplayValues[rowValIndex] = theValue;
-      });
-
-      theRowData[rowIndex] = rowDisplayValues;
-    });
-
-    if (!isDeepEqual(theRowData, rowData.current)) {
-      // Only update rowData.current when it actually changes (to prevent infinite loop)
-      rowData.current = theRowData;
-    }
-  }
-
   const handleClick = () => {
     window.open(whatsnewlink);
   };
 
-  // Get the case history data when component mounted/initialized
-  useEffect(() => {
-    let bCallSetWaitingForData = true;
-
-    const worklistData = PCore.getDataApiUtils().getData(
-      dataViewName,
-      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
-      context
-    ) as Promise<any>;
-
-    worklistData.then((worklistJSON: any) => {
-      const tableDataResults = worklistJSON.data.data;
-
-      // compute the rowData using the tableDataResults
-      computeRowData(tableDataResults);
-
-      // At this point, if we have data ready to render and haven't been asked
-      //  to NOT call setWaitingForData, we can stop progress indicator
-      if (bCallSetWaitingForData) {
-        setWaitingForData(false);
-      }
-    });
-
-    return () => {
-      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
-      // The useEffect closure lets us have access to the bCallSetWaitingForData
-      //  variable inside the useEffect and inside the "then" clause of the
-      //  historyData promise
-      //  So, if this cleanup code gets run before the promise .then is called,
-      //  we can avoid calling the useState setter which would otherwise show a warning
-      bCallSetWaitingForData = false;
-    };
-  }, []);
-
-  function getTableHeader() {
-    const theRowKey = 'CaseHistory.TableHeader';
-
-    const theHeaderCells: any[] = displayedColumns.map((headerCol, index) => {
-      const theCellKey = `${theRowKey}.${index}`;
-      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>;
-    });
-
-    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
-  }
-
-  function getTableData() {
-    const theDataRows: any[] = [];
-
-    // Note: using rowData.current since we're using useRef as a mutatable
-    //  value that's only updated when it changes.
-    if (rowData.current.length > 0) {
-      rowData.current.forEach((dataRow: object[], index) => {
-        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
-        const theKey = `CaseHistory-${index}`;
-        theDataRows.push(
-          <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? (dataRow[0]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? (dataRow[1]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? (dataRow[2]) : '---' as any}</StyledTableCell>
-            <StyledTableCell>{dataRow[3] ? (dataRow[3]) : '---' as any}</StyledTableCell>
-          </TableRow>
-        );
-      });
-    }
-    return theDataRows;
-  }
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <Card title='AppAnnouncement' className={classes.root}>
@@ -228,12 +69,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           </Button>
         </CardActions>
       </Card>
-      <TableContainer>
-        <Table>
-          <TableHead>{getTableHeader()}</TableHead>
-          <TableBody>{getTableData()}</TableBody>
-        </Table>
-      </TableContainer>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/config.json.mustache

@@ -5,7 +5,6 @@
   "organization": "{{ORGANIZATION}}",
   "version": "{{VERSION}}",
   "library": "{{LIBRARY}}",
-  "allowedApplications": {{{ALLOWEDAPPS}}},
   "componentKey": "{{COMPONENT_KEY}}",
   "type": "{{TYPE}}",
   "subtype": {{{SUB_TYPE}}},