@pega/dx-component-builder-sdk 24.2.14 → 25.1.11

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/demo.stories.tsx

@@ -3,6 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyCaseWidget from './index';
 import { historyData } from './mock';
 
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(historyData);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof PegaDxilMyCaseWidget> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidget,
@@ -13,26 +23,6 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyCaseWidget>;
 
 export const BasePegaDxilMyCaseWidget: Story = args => {
-  window.PCore = {
-    ...window.PCore,
-    getDataApiUtils: (): any => {
-      return {
-        getData: (): any => {
-          return new Promise(resolve => {
-            resolve(historyData);
-          });
-        }
-      };
-    },
-    getConstants: (): any => {
-      return {
-        CASE_INFO: {
-          CASE_INFO_ID: 'caseInfo.ID'
-        }
-      };
-    }
-  };
-
   const props = {
     label: 'Case history',
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/index.tsx

@@ -73,8 +73,8 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
   const dataViewName = 'D_pyWorkHistory';
   const context = thePConn.getContextName();
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  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
@@ -149,7 +149,7 @@ export default function PegaDxilMyCaseWidget(props: PegaDxilMyCaseWidgetProps) {
     // 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) => {
+      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(

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyCaseWidget/mock.ts

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

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPageCaseWidget",
   "type": "Widget",
   "subtype": ["PAGE","CASE"],

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/demo.stories.tsx

@@ -3,6 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import PegaDxilMyPageCaseWidget from './index';
 import { caseOpConfig, operatorDetails } from './mock';
 
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
   title: 'PegaDxilMyPageCaseWidget',
   component: PegaDxilMyPageCaseWidget,
@@ -13,26 +23,6 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
 
 export const BasePegaDxilMyPageCaseWidget: Story = args => {
-  window.PCore = {
-    ...window.PCore,
-    getUserApi: (): any => {
-      return {
-        getOperatorDetails: () => {
-          return new Promise(resolve => {
-            resolve(operatorDetails);
-          });
-        }
-      };
-    },
-    getLocaleUtils: (): any => {
-      return {
-        getLocaleValue: val => {
-          return val;
-        }
-      };
-    }
-  };
-  
   const props = {
     getPConnect: () => {
       return {

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Popover from '@mui/material/Popover';
-import Grid from '@mui/material/Grid';
+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";
@@ -125,7 +125,6 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
           }
         ];
       } else {
-        // eslint-disable-next-line no-console
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
         );
@@ -175,25 +174,25 @@ export default function PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidget
 
     // There are fields, so build the grid.
     return (
-      <Grid container className={classes.popover} spacing={1}>
-        <Grid item xs={12}>
+      <Grid2 container className={classes.popover} spacing={1}>
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant='h6'>{caseOpName}</Typography>
-        </Grid>
+        </Grid2>
         {popoverFields.map(field => {
           return (
             <React.Fragment key={field.id}>
-              <Grid container item xs={12} spacing={1}>
-                <Grid item xs={6}>
+              <Grid2 container size={{ xs: 12 }} spacing={1}>
+                <Grid2 size={{ xs: 12 }}>
                   <Typography variant='caption'>{field.name}</Typography>
-                </Grid>
-                <Grid item xs={6}>
+                </Grid2>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='subtitle2'>{field.value}</Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </React.Fragment>
           );
         })}
-      </Grid>
+      </Grid2>
     );
   }
 

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyPageWidget",
   "type": "Widget",
   "subtype": "PAGE",

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -12,27 +12,17 @@ const meta: Meta<typeof PegaDxilMyPageWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
-export const BasePegaDxilMyPageWidget: Story = args => {
-    window.PCore = {
-    ...window.PCore,
-    getDataApiUtils: (): any => {
-      return {
-        getData: () => {
-          return new Promise(resolve => {
-            resolve(worklistData);
-          });
-        }
-      };
-    },
-    getConstants: (): any => {
-      return {
-        CASE_INFO: {
-          INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
-        }
-      };
-    },
+window.PCore.getDataApiUtils = (): any => {
+  return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
   };
+};
 
+export const BasePegaDxilMyPageWidget: Story = args => {
   const props = {
     datasource: configProps.datasource,
     whatsnewlink: configProps.whatsnewlink,

package/tests/assets/sdk-r/components/createAll/custom-sdk/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -109,8 +109,8 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
     } // 2nd and 3rd args empty string until typedef marked correctly
   ];
 
-  function computeRowData(rows: Object[]): void {
-    const theRowData: Object[] = [];
+  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
@@ -189,7 +189,7 @@ export default function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
     // 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) => {
+      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(

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/Banner/Banner.css

@@ -8,7 +8,7 @@
 
 .background-style {
   background-color: transparent;
-  color: rgb(0, 0, 0);
+  color: var(--banner-text-color);
   width: 100%;
   height: 100%;
   text-align: center;

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import './Banner.css';
 
 // AlertBanner is one of the few components that does NOT have getPConnect.
@@ -37,14 +37,17 @@ export default function Banner(props: BannerProps) {
           </div>
         </div>
       </div>
-      <Grid container item xs={12} className='banner-layout' spacing={1}>
-        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+      <Grid2 container size={12} className='banner-layout' spacing={1}>
+        <Grid2
+          size={{ xs: variantMap[variant][0] }}
+          style={{ padding: '1rem', backgroundColor: 'var(--app-form-bg-color)', borderRadius: '16px', height: 'fit-content' }}
+        >
           {a}
-        </Grid>
-        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+        </Grid2>
+        <Grid2 size={{ xs: variantMap[variant][1] }} style={{ padding: '0rem 1rem' }}>
           {b}
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </div>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.css

@@ -7,7 +7,6 @@
   font-weight: bold;
   line-height: calc(0.5rem * 2.5);
   height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
   text-transform: uppercase;
 }
 

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import TextField from '@mui/material/TextField';
 
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
@@ -34,7 +34,7 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
     if (field.config.value === null || field.config.value === '') {
       // Special handling for missing value
-      // eslint-disable-next-line sonarjs/no-small-switch
+
       switch (fieldTypeLower) {
         case 'caseoperator':
           return <Operator {...field.config} />;
@@ -46,9 +46,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value='---'
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true
+                }
               }}
             />
           );
@@ -65,9 +67,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -82,9 +86,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={fieldValue}
             label={fieldLabel}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -97,9 +103,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             className='psdk-csf-status-style'
             value={field.config.value}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -112,11 +120,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                inputProps: {
-                  style: { cursor: 'pointer' },
-                  disableUnderline: true
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
                 }
               }}
             />
@@ -132,10 +140,12 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               variant='standard'
               value={field.config.value}
               label={field.config.label}
-              InputProps={{
-                readOnly: true,
-                disableUnderline: true,
-                inputProps: { style: { cursor: 'pointer' } }
+              slotProps={{
+                input: {
+                  readOnly: true,
+                  disableUnderline: true,
+                  inputProps: { style: { cursor: 'pointer' } }
+                }
               }}
             />
           </a>
@@ -156,9 +166,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
               format: theFormat
             })}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -171,9 +183,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={format(field.config.value, field.type, theCurrencyOptions)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -186,9 +200,11 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
             variant='standard'
             value={format(field.config.value, field.type)}
             label={field.config.label}
-            InputProps={{
-              readOnly: true,
-              disableUnderline: true
+            slotProps={{
+              input: {
+                readOnly: true,
+                disableUnderline: true
+              }
             }}
           />
         );
@@ -207,13 +223,13 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
 
   // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
   useEffect(() => {
-    const arGridItems = theFieldsToRender.map((field: any) => {
+    const arGridItems = theFieldsToRender?.map((field: any) => {
       // display the field when either visibility property doesn't exist or is true(if exists)
       if (field.config.visibility === undefined || field.config.visibility === true) {
         return (
-          <Grid item xs={6} key={field.config.label}>
+          <Grid2 size={{ xs: 6 }} key={field.config.label}>
             {getFieldValue(field)}
-          </Grid>
+          </Grid2>
         );
       }
 
@@ -247,8 +263,8 @@ export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
   }
 
   return (
-    <Grid container className='psdk-case-summary-fields'>
+    <Grid2 container className='psdk-case-summary-fields'>
       {theFieldsAsGridItems}
-    </Grid>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/DetailsFields/DetailsFields.tsx

@@ -1,6 +1,5 @@
-/* eslint-disable react/no-array-index-key */
 import React, { createElement, isValidElement } from 'react';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import makeStyles from '@mui/styles/makeStyles';
 
@@ -62,11 +61,11 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const dispValue = field.label;
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {dispValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -74,7 +73,6 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const { type, value } = inField;
     let formattedVal = value;
 
-    // eslint-disable-next-line sonarjs/no-small-switch
     switch (type) {
       case 'date':
         formattedVal = format(value, type);
@@ -97,21 +95,21 @@ export default function DetailsFields(props: DetailsFieldsProps) {
     const formattedValue = formatItemValue(field);
 
     return (
-      <Grid item xs={6} key={keyVal}>
+      <Grid2 size={{ xs: 6 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {formattedValue}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
   function getGridItem(field: any, keyVal: string) {
     return (
-      <Grid item xs={12} key={keyVal}>
+      <Grid2 size={{ xs: 12 }} key={keyVal}>
         <Typography variant='body2' component='span' className={classes.fieldValue}>
           {field?.value}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -122,16 +120,16 @@ export default function DetailsFields(props: DetailsFieldsProps) {
       }
       if (isValidElement(field?.value)) {
         return (
-          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+          <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
             {getGridItem(field, `${index}-item`)}
-          </Grid>
+          </Grid2>
         );
       }
       return (
-        <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+        <Grid2 container spacing={1} style={{ padding: '4px 0px' }} key={index}>
           {getGridItemLabel(field, `${index}-label`)}
           {getGridItemValue(field, `${index}-value`)}
-        </Grid>
+        </Grid2>
       );
     });
     return gridItems;

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,5 +1,5 @@
-import { PropsWithChildren, useState } from 'react';
-import Grid from '@mui/material/Grid';
+import { type PropsWithChildren, useState } from 'react';
+import Grid2 from '@mui/material/Grid2';
 import makeStyles from '@mui/styles/makeStyles';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -45,9 +45,9 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   const [collapsed, setCollapsed] = useState(false);
 
   const descAndChildren = (
-    <Grid container>
+    <Grid2 container>
       <div className={classes.fullWidth}>{children}</div>
-    </Grid>
+    </Grid2>
   );
 
   const headerClickHandler = () => {
@@ -55,8 +55,8 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
   };
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
         {name && (
           <div className={classes.fieldMargin}>
             {collapsible ? (
@@ -70,11 +70,10 @@ export default function FieldGroup(props: PropsWithChildren<FieldGroupProps>) {
           </div>
         )}
         {instructions && instructions !== 'none' && (
-          // eslint-disable-next-line react/no-danger
           <div key='instructions' className={classes.instructionText} dangerouslySetInnerHTML={{ __html: instructions }} />
         )}
         {!collapsed && descAndChildren}
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Divider from '@mui/material/Divider';
 import Link from '@mui/material/Link';
 
@@ -20,11 +20,11 @@ export default function FieldGroupList(props: FieldGroupListProps) {
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      <Grid item style={{ width: '100%' }}>
-        <Grid container spacing={1}>
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      <Grid2 style={{ width: '100%' }}>
+        <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid item style={{ width: '100%' }}>
+            <Grid2 style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button
@@ -44,15 +44,15 @@ export default function FieldGroupList(props: FieldGroupListProps) {
               <br />
               {props.onAdd && <Divider />}
               <br />
-            </Grid>
+            </Grid2>
           ))}
           {props.onAdd && (
             <Link onClick={props.onAdd} style={{ cursor: 'pointer' }} underline='hover'>
               +Add
             </Link>
           )}
-        </Grid>
-      </Grid>
-    </Grid>
+        </Grid2>
+      </Grid2>
+    </Grid2>
   );
 }