@pega/dx-component-builder-sdk 0.242.14 → 0.242.16

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

@@ -0,0 +1,80 @@
+import React, { Children, useMemo, useState } from 'react';
+import { Tab, Tabs } from '@mui/material';
+import { TabContext, TabPanel } from '@mui/lab';
+import makeStyles from '@mui/styles/makeStyles';
+
+import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const useStyles = makeStyles(() => ({
+  tab: {
+    minWidth: '72px'
+  }
+}));
+
+interface DynamicTabsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  showLabel: boolean;
+  label: string;
+  referenceList?: any[];
+}
+
+function DynamicTabs(props: DynamicTabsProps) {
+  const classes = useStyles();
+  const { referenceList, showLabel, label, getPConnect } = props;
+  const pConnect = getPConnect();
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
+  const defaultTabIndex = 0;
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
+  const { tablabel } = pConnect.getComponentConfig();
+  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+  const referenceListData: any = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+  const memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+    pConnect.setInheritedProp('readOnly', true);
+
+    return (
+      referenceListData &&
+      Children.toArray(
+        referenceListData.map((item, index) => {
+          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;
+        })
+      )
+    );
+  }, [referenceListData]);
+  const [panelShown, changePanel] = useState(defaultTabIndex);
+  const handleTabClick = (e, id) => {
+    changePanel(parseInt(id, 10));
+  };
+  // Loop over the tab contents and and pull out the labels for the navigation
+  const tabItems =
+    referenceListData?.map((item, i) => {
+      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      return {
+        name: currentTabLabel,
+        id: i
+      };
+    }) || [];
+
+  return (
+    <>
+      {propsToUse.label && <h3 id='dynamic-tabs-title'>{propsToUse.label}</h3>}
+      <TabContext value={panelShown.toString()}>
+        <Tabs onChange={handleTabClick} value={panelShown} variant='scrollable' scrollButtons='auto' indicatorColor='primary' id='dynamic-tabs'>
+          {tabItems.map((tab: any) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />
+          ))}
+        </Tabs>
+
+        {tabItems.map((tab: any) => (
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id='dynamic-tabpanel'>
+            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+
+export default DynamicTabs;

package/tests/assets/sdk-r/components/createAll/override-sdk/template/DynamicTabs/config.json

@@ -0,0 +1,36 @@
+{
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

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

@@ -0,0 +1 @@
+export { default } from './DynamicTabs';

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
@@ -378,6 +383,9 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   };
 
   function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
+    if (!orderedBy || (!a[orderedBy] && !b[orderedBy])) {
+      return 0;
+    }
     if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
       return -1;
     }

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run createAll Local custom', async () => {
     const script = `npm run createAll "My" 0.0.1 DXIL "" Pega --prefix ../../..`;
@@ -42,7 +42,7 @@ describe('createAll list and deleteAll local custom', () => {
     //   // remove it
     //   fs.rmdirSync(fileDir, { recursive: true });
     // }
-  }, 10000);
+  }, 900000);
 
   it('npm run list Local custom', async () => {
     const script = 'npm run list Local custom --prefix ../../..';
@@ -77,7 +77,7 @@ describe('createAll list and deleteAll local custom', () => {
     expect(stdout).toContain('Pega_DXIL_MyCaseWidget');
     expect(stdout).toContain('Pega_DXIL_MyPageWidget');
     expect(stdout).toContain('Pega_DXIL_MyPageCaseWidget');
-  }, 10000);
+  }, 900000);
 
   it('compare created to default', async () => {
     const compList = [
@@ -129,7 +129,7 @@ describe('createAll list and deleteAll local custom', () => {
         expect(componentFileData).toEqual(assetFileData);
       });
     });
-  }, 10000);
+  }, 900000);
 
   it('npm run deleteAll Local custom', async () => {
     const script = `npm run deleteAll Local custom Y --prefix ../../..`;
@@ -156,5 +156,5 @@ describe('createAll list and deleteAll local custom', () => {
     // const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
     // const doesExist = fs.existsSync(createFile);
     // expect(doesExist).not.toBeTruthy();
-  }, 10000);
+  }, 900000);
 });

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run overrideAll Local', async () => {
     const script = `npm run overrideAll --prefix ../../..`;
@@ -42,7 +42,7 @@ describe('overrideAll list and deleteAll local override', () => {
     //   // remove it
     //   fs.rmdirSync(fileDir, { recursive: true });
     // }
-  }, 20000);
+  }, 900000);
 
   it('npm run list Local override', async () => {
     const script = 'npm run list Local override --prefix ../../..';
@@ -62,7 +62,7 @@ describe('overrideAll list and deleteAll local override', () => {
     expect(stdout).toContain('navbar');
 
     // done();
-  }, 10000);
+  }, 900000);
 
   it('compare created to default', async () => {
     let assetDir;
@@ -103,7 +103,7 @@ describe('overrideAll list and deleteAll local override', () => {
         });
       });
     });
-  }, 20000);
+  }, 900000);
 
   it('npm run deleteAll Local override', async () => {
     const script = `npm run deleteAll Local override Y --prefix ../../..`;
@@ -130,5 +130,5 @@ describe('overrideAll list and deleteAll local override', () => {
     // const createFile = path.resolve('../../..', path.join(`src/components/${newFileName}`, 'index.jsx'));
     // const doesExist = fs.existsSync(createFile);
     // expect(doesExist).not.toBeTruthy();
-  }, 10000);
+  }, 900000);
 });

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local text custom', async () => {
     const fileName = 'MyTestText';
@@ -138,7 +138,7 @@ describe('create buildAll and deleteAll local custom', () => {
     expect(stdout).toContain('Pega_DXIL_MyTestPage');
     expect(stdout).toContain('Pega_DXIL_MyTestDetails');
     // done();
-  }, 100000);
+  }, 900000);
 
   it('npm run deleteAll Local custom', async () => {
     const script = `npm run deleteAll Local custom Y --prefix ../../..`;

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';
@@ -62,7 +62,7 @@ describe('create build and delete local custom', () => {
     expect(stdout).toContain(`${newFileNameConstellation} schema is valid`);
     // expect(stdout).toContain('Compiled successfully.');
     // done();
-  }, 60000);
+  }, 900000);
 
   it('npm run delete Local custom', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local override', async () => {
     const fileName = 'auto-complete';
@@ -49,7 +49,7 @@ describe('create build and delete local override', () => {
     // expect(stdout).toContain(`${newFileNameConstellation} schema is valid`);
     // expect(stdout).toContain('Compiled successfully.');
     // done();
-  }, 50000);
+  }, 900000);
 
   it('npm run delete Local override', async () => {
     const fileName = 'auto-complete';

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local override', async () => {
     const fileName = 'auto-complete';

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

@@ -12,7 +12,7 @@ describe('create mapAll clearMap custom local', () => {
     // console.log(stdout);
     expect(stdout).not.toBeNull();
     expect(stderr).not.toBeNull();
-  });
+  }, 100000);
 
   it('npm run create Local text custom', async () => {
     const fileName = 'MyTestText';
@@ -203,7 +203,7 @@ describe('create mapAll clearMap custom local', () => {
     const blankMapData = fs.readFileSync(blankMap, { encoding: 'utf8' });
 
     expect(mapDataAng).toEqual(blankMapData);
-  }, 10000);
+  }, 100000);
 
   it('npm run deleteAll Local verify not in map custom', async () => {
     const script = `npm run deleteAll Local custom Y --prefix ../../..`;

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

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

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run override auto complete override', async () => {
     const fileName = 'auto-complete';
@@ -133,7 +133,7 @@ describe('override publish and deleteAll local override', () => {
     }
 
     expect(isInMap).toBeTruthy();
-  }, 100000);
+  }, 900000);
 
   it('npm run deleteAll Local override verify removed from map', async () => {
     const script = `npm run deleteAll Local override Y --prefix ../../..`;

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local custom', async () => {
     const fileName = 'MyTestText';
@@ -91,7 +91,7 @@ describe('create publish and delete local custom', () => {
     expect(isInMap).toBeTruthy();
 
     // done();
-  }, 60000);
+  }, 900000);
 
   it('npm run delete Local custom verify removed from map', async () => {
     const fileName = 'MyTestText';

package/tests/functional/sdk-a/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();
-  });
+  }, 50000);
 
   it('npm run create Local override', async () => {
     const fileName = 'auto-complete';
@@ -66,7 +66,7 @@ describe('create publish and delete local override', () => {
     }
 
     expect(isInMap).toBeTruthy();
-  }, 50000);
+  }, 900000);
 
   it('npm run delete Local override verify removed from map', async () => {
     const fileName = 'auto-complete';

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

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