@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

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/index.tsx.mustache

@@ -4,7 +4,6 @@ import Popover from '@mui/material/Popover';
 import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
-import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
@@ -12,12 +11,6 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-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
   label: string;
@@ -28,6 +21,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   updateLabel: string;
   updateOperator: { userName: string; userId: string };
   displayLabel?: any;
+  displayMode?: string;
 }
 
 const useStyles = makeStyles(myTheme => ({
@@ -38,6 +32,13 @@ const useStyles = makeStyles(myTheme => ({
   popover: {
     padding: myTheme.spacing(1),
     margin: myTheme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: myTheme.palette.text.secondary
+  },
+  fieldValue: {
+    color: myTheme.palette.text.primary
   }
 }));
 
@@ -85,7 +86,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const localeCategory = 'Operator';
 
-    operatorPreviewPromise.then((res: any) => {
+    operatorPreviewPromise
+      .then((res: any) => {
       const fillerString = '---';
       let fields: any = [];
       if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
@@ -158,7 +160,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       }
       // Whatever the fields are, update the component's popoverFields
       setPopoverFields(fields);
-    });
+      })
+      .catch(e => {
+        console.error(e);
+      });
 
     setPopoverAnchorEl(event.currentTarget);
   }
@@ -184,7 +189,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           return (
             <React.Fragment key={field.id}>
               <Grid2 container size={{ xs: 12 }} spacing={1}>
-                <Grid2 size={{ xs: 12 }}>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='caption'>{field.name}</Typography>
                 </Grid2>
                 <Grid2 size={{ xs: 6 }}>
@@ -201,19 +206,69 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   // End of popover-related
 
+  const { displayMode } = props;
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+        <>
+          {{! pick new delimiters for mustache }}
+          {{=<% %>=}}
+          <Grid2 container spacing={4} justifyContent='space-between'>
+            <Grid2 size={{ xs: 4 }}>
+              <Typography variant='body2' component='span' className={classes.fieldLabel}>
+                {caseOpLabel}
+              </Typography>
+            </Grid2>
+            <Grid2 size={{ xs: 8 }}>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'baseline' }}>
+                <Typography variant='body2' component='span' className={classes.fieldValue} onClick={showOperatorDetails} sx={{ cursor: 'pointer' }}>
+                  {caseOpName}
+                </Typography>
+                <Typography variant='caption' component='span' sx={{ color: 'text.secondary' }}>
+                  {Utils.generateDateTime(caseTime, 'DateTime-Since')}
+                </Typography>
+              </div>
+            </Grid2>
+          </Grid2>
+          <%={{ }}=%>     {{! revert delimiters for mustache }}
+          <Popover
+            id={popoverId}
+            open={popoverOpen}
+            anchorEl={popoverAnchorEl}
+            onClose={handlePopoverClose}
+            {{! pick new delimiters for mustache }}
+            {{=<% %>=}}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            transformOrigin={{ vertical: 'top', horizontal: 'center' }}
+            slotProps={{
+              paper: { style: { maxWidth: '45ch' } }
+            }}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+          >
+            {getPopoverGrid()}
+          </Popover>
+        </>
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <>
         {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         <TextField
+          variant='standard'
           defaultValue={caseOpName}
           label={caseOpLabel}
           onClick={showOperatorDetails}
-          InputProps={{
-            readOnly: true,
-            disableUnderline: true,
-            inputProps: { style: { cursor: 'pointer' } }
+          slotProps={{
+            input: {
+              readOnly: true,
+              disableUnderline: true,
+              inputProps: { style: { cursor: 'pointer' } }
+            }
           }}
         />
         <br />
@@ -228,7 +283,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           {{=<% %>=}}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-          PaperProps={{ style: { maxWidth: '45ch' } }}
+          slotProps={{
+            paper: { style: { maxWidth: '45ch' } }
+          }}
           <%={{ }}=%>     {{! revert delimiters for mustache }}
         >
           {getPopoverGrid()}

package/src/tasks/create-all/index.js

@@ -38,6 +38,7 @@ import {
   updateComponentDefaultLibrary
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
+import { getPrettierFormattedString } from '../map/map.js';
 
 const copy = promisify(ncp);
 
@@ -131,7 +132,7 @@ export const compileMustacheTemplates = async (
   const framework = await getFramework();
 
   // allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
-  files.forEach(file => {
+  for (const file of files) {
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -151,7 +152,10 @@ export const compileMustacheTemplates = async (
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
+
+    const formattedOutput = await getPrettierFormattedString(output, filePath.replace(/\.mustache$/, ''));
+
+    fs.writeFileSync(filePath, formattedOutput);
 
     switch (framework) {
       case "SDK-React":
@@ -168,7 +172,7 @@ export const compileMustacheTemplates = async (
         fs.renameSync(filePath, filePath.replace('.mustache', ''));
         break;
     }
-  });
+  }
 };
 
 
@@ -422,12 +426,16 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
-  console.log(
-    chalk.red(
-      'Custom-constellation are aligned with Pega constellation which is still on react 18.\n' +
-      'Please make sure any changes to custom-constellation should be aligned with React 18 development.'
-    )
-  );
+  const framework = await getFramework();
+
+  if (framework === 'SDK-React') {
+    console.log(
+      chalk.red(
+        'Custom-constellation are aligned with Pega constellation which is still on react 18.\n' +
+        'Please make sure any changes to custom-constellation should be aligned with React 18 development.'
+      )
+    );
+  }
 
   await checkPathAccess(pegaConfigJsonPath);
 

package/src/tasks/delete/helper.js

@@ -178,13 +178,14 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
 
 
   if (serverComponents && serverComponents.pxResults?.length > 0) {
-    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+    const choicesArr = serverComponents.pxResults.map(({ label, customType, pyRuleSet, pyRuleSetVersion }) => {
       const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
         pyRuleSetVersion,
         20
       )}`;
 
-      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+      // customType is holding RuleName value for the component
+      const value = `${customType}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
       const short = `Selected component : ${chalk.redBright(
         `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
       )}`;

package/src/tasks/delete-all/helper.js

@@ -187,13 +187,14 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
   const serverComponents = JSON.parse(data);
   spinner.stop();
   if (serverComponents && serverComponents.pxResults?.length > 0) {
-    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+    const choicesArr = serverComponents.pxResults.map(({ label, customType, pyRuleSet, pyRuleSetVersion }) => {
       const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
         pyRuleSetVersion,
         20
       )}`;
 
-      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+      // customType is holding RuleName value for the component
+      const value = `${customType}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
       const short = `Selected component : ${chalk.redBright(
         `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
       )}`;

package/src/tasks/map/map.js

@@ -38,13 +38,20 @@ const pegaLocalReactComponentMapPath = path.join(path.resolve(), SDK_LOCAL_REACT
 const pegaLocalAngularComponentMapPath = path.join(path.resolve(),  SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
 const prettierConfigJsonPath = path.join(path.resolve(), PRETTIER_CONFIG_FILENAME);
 
-export const getPrettierFormattedString = async (content) => {
+export const getPrettierFormattedString = async (content, filepath) => {
   const options = await prettier.resolveConfig(prettierConfigJsonPath);
 
   // format the contents
   if (options) {
-    options.parser = 'babel';
-    return  prettier.format(content, options);
+    let parser = 'babel';
+    if (filepath) {
+      const { inferredParser } = await prettier.getFileInfo(filepath);
+      if (!inferredParser) return content;
+      parser = inferredParser;
+    }
+
+    const formatOptions = { ...options, parser };
+    return prettier.format(content, formatOptions);
   }
   else {
     return content;

package/src/tasks/override/index.js

@@ -6,7 +6,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
-import { updateComponentMap  } from '../map/map.js';
+import { getPrettierFormattedString, updateComponentMap } from '../map/map.js';
 
 import {
   checkPathAccess,
@@ -19,7 +19,8 @@ import {
   getComponentDefaults
 } from '../../util.js';
 
-import { COMPONENT_SCHEMA,
+import {
+  COMPONENT_SCHEMA,
   CATEGORY_OVERRIDE,
   SDK_CONFIG_JSON_FILENAME,
   DXCB_CONFIG,
@@ -27,7 +28,8 @@ import { COMPONENT_SCHEMA,
   CUSTOM_TEMPLATES,
   OVERRIDE_TEMPLATE_PATH,
   OVERRIDE_REACT_LIB_PATH,
-  OVERRIDE_ANGULAR_LIB_PATH } from '../../constants.js';
+  OVERRIDE_ANGULAR_LIB_PATH
+} from '../../constants.js';
 
 const pegaConfigJsonPath = path.join(path.resolve(), SDK_CONFIG_JSON_FILENAME);
 
@@ -65,15 +67,17 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
+      const configContentFormatted = await getPrettierFormattedString(configContent, configFile);
+
       // update file
-      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+      fs.writeFileSync(configFile, configContentFormatted, { encoding: 'utf8' });
     }
 
   }
   catch (err) {
     // no config-ext.json file, so no update, which is ok
     const arPaths = targetDirectory.split("/");
-    const compName = arPaths[arPaths.length-1] ;
+    const compName = arPaths[arPaths.length - 1];
     console.log(chalk.yellow(`Component ${compName} has no config file for extension.`));
   }
 }
@@ -100,7 +104,7 @@ const getListAvailableComponents = async (type) => {
 
     let listEl = fullList[el].value;
 
-    if (listEl.indexOf("/") >=0) {
+    if (listEl.indexOf("/") >= 0) {
       const arKey = listEl.split("/");
       listEl = arKey[arKey.length - 1];
     }
@@ -190,7 +194,7 @@ const validateCompile = async (
     componentKey = componentKey.split("/")[1];
   }
   const typeLC = type.toLowerCase();
-  const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey), CATEGORY_OVERRIDE);
+  const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/", componentKey), CATEGORY_OVERRIDE);
 
   const components = await getComponents(false, CATEGORY_OVERRIDE);
   if (components.includes(componentKey)) {
@@ -224,28 +228,28 @@ export default async options => {
     let inputType = options.params[3];
 
     switch (inputType.toLowerCase()) {
-      case "field" :
-      case "f" :
+      case "field":
+      case "f":
         promptType = "field";
         break;
-      case "template" :
-      case "t" :
+      case "template":
+      case "t":
         promptType = "template";
         break;
-      case "widget" :
-      case "w" :
+      case "widget":
+      case "w":
         promptType = "widget";
         break;
-      case "designsystemextension" :
-      case "des" :
-      case "d" :
+      case "designsystemextension":
+      case "des":
+      case "d":
         promptType = "designSystemExtension";
         break;
-      case "infra" :
-      case "i" :
+      case "infra":
+      case "i":
         promptType = "infra";
         break;
-      }
+    }
   }
 
   await checkPathAccess(pegaConfigJsonPath);
@@ -262,7 +266,7 @@ export default async options => {
 
   const componentData = data[DXCB_CONFIG][DXCB_COMPONENT_DEFAULTS];
 
-  const { organization, library} = componentData;
+  const { organization, library } = componentData;
 
   let componentDefaults = await getComponentDefaults();
   componentDefaults.library = library;
@@ -294,7 +298,7 @@ export default async options => {
         type: 'rawlist',
         message: 'Enter type of component',
         choices: COMPONENT_SCHEMA.overrideType,
-        when (propmtType) {
+        when(propmtType) {
           return promptType === null;
         }
       },
@@ -325,7 +329,7 @@ export default async options => {
         choices: infraList,
         pageSize: 15,
         when(answers) {
-          return infraList.length > 0 && (answers.type === 'infra'  || promptType === 'infra');
+          return infraList.length > 0 && (answers.type === 'infra' || promptType === 'infra');
         }
       },
       {
@@ -345,7 +349,7 @@ export default async options => {
         choices: widgetList,
         pageSize: 15,
         when(answers) {
-          return widgetList.length > 0 && (answers.type === 'widget'  || promptType === 'widget');
+          return widgetList.length > 0 && (answers.type === 'widget' || promptType === 'widget');
         }
       },