@pega/dx-component-builder-sdk 0.242.4 → 0.242.6

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyTwoColumnForm/demo.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { TextField } from '@mui/material';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import { MuiTelInput } from 'mui-tel-input';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
@@ -23,11 +23,17 @@ export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnForm>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange } = resolvedProps;
+  const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
 
+  const helperTextToDisplay = validatemessage || helperText;
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
   const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
   let val: any = '';
-  
+
   if (label === 'Service Date')
     val = (
       <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -64,18 +70,27 @@ const renderField = resolvedProps => {
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
     val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
 
+  const disableDropdown = true;
   if (label === 'Phone Number')
     val = (
-      <MuiPhoneNumber
-        value={value}
-        fullWidth
-        variant='outlined'
-        size='small'
-        style={{ fontSize: '14px' }}
-        defaultCountry='us'
-        label={label}
-        onChange={onChange}
-      />
+      <MuiTelInput
+      fullWidth
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='US'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{
+        readOnly: true,
+        inputProps: { ...testProp }
+      }}
+      disableDropdown={disableDropdown}
+    />
     );
 
   if (variant === 'inline') {

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

@@ -51,7 +51,7 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 4} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
@@ -63,7 +63,7 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid item xs={variant === 'stacked' ? 12 : 8} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
           // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />

package/tests/assets/sdk-r/components/createAll/override-sdk/field/Phone/Phone.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import { MuiTelInput } from 'mui-tel-input';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -57,12 +57,12 @@ export default function Phone(props: PhoneProps) {
     const disableDropdown = true;
     return (
       <div>
-        <MuiPhoneNumber
+        <MuiTelInput
           fullWidth
           helperText={helperTextToDisplay}
           placeholder={placeholder ?? ''}
           size='small'
-          defaultCountry='us'
+          defaultCountry='US'
           required={required}
           disabled={disabled}
           onChange={onChange}
@@ -91,13 +91,13 @@ export default function Phone(props: PhoneProps) {
   };
 
   return (
-    <MuiPhoneNumber
+    <MuiTelInput
       fullWidth
       variant='outlined'
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
       size='small'
-      defaultCountry='us'
+      defaultCountry='US'
       required={required}
       disabled={disabled}
       onChange={handleChange}

package/tests/assets/sdk-r/components/createAll/override-sdk/infra/NavBar/NavBar.css

@@ -165,4 +165,5 @@
 
 .scrollable {
   overflow-y: scroll !important;
+  min-height: 200px !important;
 }

package/tests/assets/sdk-r/components/createAll/override-sdk/template/ListView/ListView.tsx

@@ -1034,34 +1034,35 @@ export default function ListView(props: ListViewProps) {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {stableSort(arRows, getComparator(order, orderBy))
-                      .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                      .map(row => {
-                        return (
-                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
-                            {arColumns.map(column => {
-                              const value = row[column.id];
-                              return (
-                                <TableCell key={column.id} align={column.align} className={classes.cell}>
-                                  {_showButton(column.id, row) || column.displayAsLink ? (
-                                    <Link
-                                      component='button'
-                                      onClick={() => {
-                                        _listViewClick(row, column);
-                                      }}
-                                      underline='hover'
-                                    >
-                                      {column.format && typeof value === 'number' ? column.format(value) : value}
-                                    </Link>
-                                  ) : (
-                                    <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
-                                  )}
-                                </TableCell>
-                              );
-                            })}
-                          </TableRow>
-                        );
-                      })}
+                    {arRows &&
+                      stableSort(arRows, getComparator(order, orderBy))
+                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                        .map(row => {
+                          return (
+                            <TableRow key={row.pxRefObjectInsName || row.pyID}>
+                              {arColumns.map(column => {
+                                const value = row[column.id];
+                                return (
+                                  <TableCell key={column.id} align={column.align} className={classes.cell}>
+                                    {_showButton(column.id, row) || column.displayAsLink ? (
+                                      <Link
+                                        component='button'
+                                        onClick={() => {
+                                          _listViewClick(row, column);
+                                        }}
+                                        underline='hover'
+                                      >
+                                        {column.format && typeof value === 'number' ? column.format(value) : value}
+                                      </Link>
+                                    ) : (
+                                      <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'}</>
+                                    )}
+                                  </TableCell>
+                                );
+                              })}
+                            </TableRow>
+                          );
+                        })}
                   </TableBody>
                 </Table>
               </TableContainer>

package/tests/assets/sdk-r/components/createAll/override-sdk/template/SimpleTableManual/SimpleTableManual.tsx

@@ -258,11 +258,16 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   function generateRowsData() {
     // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
     if (!referenceList.length && dataPageName) {
-      getDataPage(dataPageName, parameters, context).then(listData => {
-        const data = formatRowsData(listData);
-        myRows = data;
-        setRowData(data);
-      });
+      getDataPage(dataPageName, parameters, context)
+        .then(listData => {
+          const data = formatRowsData(listData);
+          myRows = data;
+          setRowData(data);
+        })
+        .catch(e => {
+          // eslint-disable-next-line no-console
+          console.log(e);
+        });
     } else {
       // The referenceList prop has the JSON data for each row to be displayed
       //  in the table. So, iterate over referenceList to create the dataRows that

package/tests/functional/sdk-r/localCreateAllListDeleteAllCustom.test.js

@@ -12,7 +12,7 @@ describe('createAll list and deleteAll local custom', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run createAll Local custom', async () => {
     const script = `npm run createAll "My" 0.0.1 DXIL "" Pega --prefix ../../..`;

package/tests/functional/sdk-r/localCreateAllListDeleteAllOverride.test.js

@@ -12,7 +12,7 @@ describe('overrideAll list and deleteAll local override', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run overrideAll Local', async () => {
     const script = `npm run overrideAll --prefix ../../..`;

package/tests/functional/sdk-r/localCreateBuildAllDeleteAllCustom.test.js

@@ -12,7 +12,7 @@ describe('create buildAll and deleteAll local custom', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local text custom', async () => {
     const fileName = 'MyTestText';
@@ -133,7 +133,7 @@ describe('create buildAll and deleteAll local custom', () => {
     expect(stdout).toContain('Pega_DXIL_MyTestPage');
     expect(stdout).toContain('Pega_DXIL_MyTestDetails');
     // done();
-  }, 100000);
+  }, 200000);
 
   it('npm run deleteAll Local custom', async () => {
     const script = `npm run deleteAll Local custom Y --prefix ../../..`;

package/tests/functional/sdk-r/localCreateBuildDeleteCustom.test.js

@@ -12,7 +12,7 @@ describe('create build and delete local custom', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-r/localCreateBuildDeleteOverride.test.js

@@ -12,7 +12,7 @@ describe('create build and delete local override', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local override', async () => {
     const fileName = 'AutoComplete';
@@ -49,7 +49,7 @@ describe('create build and delete local override', () => {
     // expect(stdout).toContain(`${newFileNameConstellation} schema is valid`);
     // expect(stdout).toContain('Compiled successfully.');
     // done();
-  }, 30000);
+  }, 200000);
 
   it('npm run delete Local override', async () => {
     const fileName = 'AutoComplete';

package/tests/functional/sdk-r/localCreateListDeleteCustom.test.js

@@ -12,7 +12,7 @@ describe('create list and delete local custom', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-r/localCreateListDeleteOverride.test.js

@@ -12,7 +12,7 @@ describe('create list and delete local override', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local override', async () => {
     const fileName = 'AutoComplete';

package/tests/functional/sdk-r/localCreateMapAllClearMap.test.js

@@ -12,7 +12,7 @@ describe('create mapAll clearMap custom local', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local text custom', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-r/localCreatePublishAllDeleteAllCustom.test.js

@@ -12,7 +12,7 @@ describe('create publish and deleteAll local', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local text custom', async () => {
     const fileName = 'MyTestText';
@@ -165,7 +165,7 @@ describe('create publish and deleteAll local', () => {
     expect(isInMap).toBeTruthy();
 
     // done();
-  }, 100000);
+  }, 500000);
 
   it('npm run deleteAll Local verify not in map custom', async () => {
     const script = `npm run deleteAll Local custom Y --prefix ../../..`;

package/tests/functional/sdk-r/localCreatePublishAllDeleteAllOverride.test.js

@@ -12,7 +12,7 @@ describe('override publish and deleteAll local override', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 20000);
 
   it('npm run override auto complete override', async () => {
     const fileName = 'AutoComplete';

package/tests/functional/sdk-r/localCreatePublishDeleteCustom.test.js

@@ -12,7 +12,7 @@ describe('create publish and delete local custom', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-r/localCreatePublishDeleteOverride.test.js

@@ -12,7 +12,7 @@ describe('create publish and delete local override', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local override', async () => {
     const fileName = 'AutoComplete';
@@ -61,7 +61,7 @@ describe('create publish and delete local override', () => {
 
 
     expect(isInMap).toBeTruthy();
-  }, 30000);
+  }, 200000);
 
   it('npm run delete Local override verify removed from map', async () => {
     const fileName = 'AutoComplete';

package/tests/functional/sdk-r/localCreateRenameDeleteCustom.test.js

@@ -12,7 +12,7 @@ describe('create rename and delete local', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 10000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';