@pega/dx-component-builder-sdk 23.1.13 → 23.1.15

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

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -141,7 +141,6 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   // Getting current context
   const context = getPConnect().getContextName();
   const resolvedList = getReferenceList(pConn);
-  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
   pConn.setReferenceList(resolvedList);
   const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
 
@@ -198,6 +197,20 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   //  Constellation DX Components.
   const fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+  useLayoutEffect(() => {
+    if (allowEditingInModal) {
+      getPConnect()
+        .getListActions()
+        .initDefaultPageInstructions(
+          getPConnect().getReferenceList(),
+          fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+    } else {
+      // @ts-ignore - An argument for 'fields' was not provided
+      getPConnect().getListActions().initDefaultPageInstructions(getPConnect().getReferenceList());
+    }
+  }, []);
+
   const displayedColumns = fieldDefs.map(field => {
     return field.name ? field.name : field.cellRenderer;
   });
@@ -288,11 +301,13 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
       pConn
         .getActionsApi()
         .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
-    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, ''); // 3rd arg null until typedef marked correctly as optional
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
     }
+
+    getPConnect().clearErrorMessages({
+      property: (getPConnect().getStateProps() as any)?.referenceList?.substring(1)
+    } as any);
   };
 
   const editRecord = () => {
@@ -312,11 +327,11 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
 
   const deleteRecord = () => {
     setEditAnchorEl(null);
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      pConn.getListActions().deleteEntry(selectedRowIndex.current, pageReference);
-    } else {
-      pConn.getListActions().deleteEntry(selectedRowIndex.current, ''); // 2nd arg empty string until typedef marked correctly as optional
-    }
+    pConn.getListActions().deleteEntry(selectedRowIndex.current);
+  };
+
+  const deleteRecordFromInlineEditable = (index: number) => {
+    pConn.getListActions().deleteEntry(index);
   };
 
   function buildElementsForTable() {
@@ -359,10 +374,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   };
 
   function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
-    if (b[orderedBy] < a[orderedBy]) {
+    if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
       return -1;
     }
-    if (b[orderedBy] > a[orderedBy]) {
+    if (!a[orderedBy] || b[orderedBy] > a[orderedBy]) {
       return 1;
     }
     return 0;
@@ -573,7 +588,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                           direction={orderBy === displayedColumns[index] ? order : 'asc'}
                           onClick={createSortHandler(displayedColumns[index])}
                         >
-                          {field.label}
+                          {field.label || '---'}
                           {_showFilteredIcon(field.name) && <FilterListIcon className={classes.moreIcon} />}
                           {orderBy === displayedColumns[index] ? (
                             <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
@@ -616,7 +631,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                           className='psdk-utility-button'
                           id='delete-button'
                           aria-label='Delete Cell'
-                          onClick={() => deleteRecord()}
+                          onClick={() => deleteRecordFromInlineEditable(index)}
                         >
                           <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$} />
                         </button>
@@ -632,7 +647,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                 .slice(0)
                 .map((row, index) => {
                   return (
-                    <TableRow key={row[displayedColumns[0]]}>
+                    // eslint-disable-next-line react/no-array-index-key
+                    <TableRow key={index}>
                       {displayedColumns.map(colKey => {
                         return (
                           <TableCell key={colKey} className={classes.tableCell}>
@@ -655,7 +671,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
                             ) : typeof row[colKey] === 'boolean' && row[colKey] ? (
                               'True'
                             ) : (
-                              row[colKey]
+                              row[colKey] || '---'
                             )}
                           </TableCell>
                         );

package/tests/assets/sdk-r/components/create/override-sdk/template/WideNarrow/WideNarrow.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { PConnProps } from 'packages/react-sdk-components/src/types/PConnProps';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './WideNarrow.css';
 
 interface WideNarrowProps extends PConnProps {

package/tests/assets/sdk-r/components/create/override-sdk/template/WssNavBar/WssNavBar.tsx

@@ -54,6 +54,9 @@ export default function WssNavBar(props: WssNavBarProps) {
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
 
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'AppShell';
+
   const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -144,7 +147,7 @@ export default function WssNavBar(props: WssNavBarProps) {
                 onClose={handleCloseUserMenu}
               >
                 <MenuItem onClick={logout}>
-                  <Typography>Logout</Typography>
+                  <Typography>{localizedVal('Log off', localeCategory)}</Typography>
                 </MenuItem>
               </Menu>
             </Box>

package/tests/assets/sdk-r/components/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-boolean-value */
 /* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
 import { useState, useEffect, useCallback } from 'react';
 import { CircularProgress, IconButton, Menu, MenuItem, Button } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -39,7 +40,10 @@ export default function Attachment(props: AttachmentProps) {
   [required, disabled] = [required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
   const pConn = getPConnect();
   const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
-
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
+  const uploadMultipleFilesLabel = localizedVal('file_upload_text_multiple', localeCategory);
+  const uploadSingleFileLabel = localizedVal('file_upload_text_one', localeCategory);
   let categoryName = '';
   if (value && value.pyCategoryName) {
     categoryName = value.pyCategoryName;
@@ -379,7 +383,13 @@ export default function Attachment(props: AttachmentProps) {
             onChange={onFileAdded}
           />
           <Button style={{ textTransform: 'none' }} variant='outlined' color='primary' component='span'>
-            {allowMultiple === 'true' ? 'Upload files' : 'Upload a file'}
+            {allowMultiple === 'true'
+              ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+                ? 'Choose files'
+                : uploadMultipleFilesLabel
+              : uploadSingleFileLabel === 'file_upload_text_one'
+                ? 'Choose a file'
+                : uploadSingleFileLabel}
           </Button>
         </label>
       </div>

package/tests/assets/sdk-r/components/create/override-sdk/widget/QuickCreate/QuickCreate.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
@@ -25,38 +26,64 @@ export default function QuickCreate(props: QuickCreateProps) {
       });
   };
 
-  const cases: any = [];
-  const envInfo = PCore.getEnvironmentInfo();
-  if (
-    classFilter &&
-    envInfo.environmentInfoObject &&
-    envInfo.environmentInfoObject.pyCaseTypeList &&
-    envInfo.environmentInfoObject.pyCaseTypeList.length > 0
-  ) {
-    classFilter.forEach(item => {
-      let icon = Utils.getImageSrc('polaris-solid', Utils.getSDKStaticConentUrl());
-      let label = '';
+  const [quickCreatecases, setCases] = useState([]);
+
+  /* If the classFilter is empty and has no entries - we will default to the default set of case types
+     It will usually come from the envInfo but for Launchpad, this is not populated - instead get the list of cases from the store */
+  useEffect(() => {
+    const cases: any = [];
+    const defaultCases: any = [];
+    const envInfo = PCore.getEnvironmentInfo();
+    if (envInfo?.environmentInfoObject?.pyCaseTypeList) {
       envInfo.environmentInfoObject.pyCaseTypeList.forEach(casetype => {
-        if (casetype.pyWorkTypeImplementationClassName === item) {
-          icon = casetype.pxIcon && Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl());
-          label = casetype.pyWorkTypeName ?? '';
+        if (casetype.pyWorkTypeName && casetype.pyWorkTypeImplementationClassName) {
+          defaultCases.push({
+            classname: casetype.pyWorkTypeImplementationClassName,
+            onClick: () => {
+              createCase(casetype.pyWorkTypeImplementationClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyWorkTypeName
+          });
+        }
+      });
+    } else {
+      const pConnectInAppContext = PCore.createPConnect({
+        options: { context: PCore.getConstants().APP.APP }
+      }).getPConnect();
+      const pyPortalInAppContext = pConnectInAppContext.getValue('pyPortal') as any;
+      pyPortalInAppContext?.pyCaseTypesAvailableToCreate?.forEach(casetype => {
+        if (casetype.pyClassName && casetype.pyLabel) {
+          defaultCases.push({
+            classname: casetype.pyClassName,
+            onClick: () => {
+              createCase(casetype.pyClassName);
+            },
+            ...(showCaseIcons && { icon: Utils.getImageSrc(casetype?.pxIcon, Utils.getSDKStaticConentUrl()) }),
+            label: casetype.pyLabel
+          });
         }
       });
-      if (label !== '') {
-        cases.push({
-          label,
-          onClick: () => {
-            createCase(item);
-          },
-          ...(showCaseIcons && { icon })
+    }
+
+    /* If classFilter is not empty - filter from the list of defaultCases */
+    if (classFilter?.length > 0) {
+      classFilter.forEach(item => {
+        defaultCases.forEach(casetype => {
+          if (casetype.classname === item) {
+            cases.push(casetype);
+          }
         });
-      }
-    });
-  }
+      });
+      setCases(cases);
+    } else {
+      setCases(defaultCases);
+    }
+  }, []);
 
   return (
     <div>
-      <WssQuickCreate heading={heading} actions={cases} />
+      <WssQuickCreate heading={heading} actions={quickCreatecases} />
     </div>
   );
 }

package/tests/assets/sdk-r/components/createAll/_components.md

@@ -0,0 +1,6 @@
+# The **components** directory
+
+The **src/components** directory contains the code for the components you want to use with the **React SDK**.
+
+When you run the **npm run  create** or **npm run override** commands to create new components, the generated code that
+you can use as a starting point for your component development will be placed in component-specific folders inside **src/components**.

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/Boolean.ts

@@ -0,0 +1,35 @@
+function Boolean(value: any, { allowEmpty = true, tick = '', cross = '' } = {}) {
+  if (
+    (!allowEmpty && !value) ||
+    value === false ||
+    value?.toString()?.toLowerCase() === 'false' ||
+    value === 0 ||
+    value === '0'
+  ) {
+    return cross || '';
+  }
+  if (
+    value === true ||
+    value?.toString()?.toLowerCase() === 'true' ||
+    value === 1 ||
+    value === '1'
+  ) {
+    return tick || '';
+  }
+  if (
+    allowEmpty &&
+    (value === 'null' || value === '' || value === null || typeof value === 'undefined')
+  ) {
+    return '––';
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value: any, options: Object) =>
+    Boolean(value, {
+      ...options,
+      tick: 'True',
+      cross: 'False'
+    })
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/{demo.stories.jsx → demo.stories.tsx}

@@ -1,38 +1,29 @@
+
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps } from './mock';
 
 import PegaDxilMyBoolean from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyBoolean> = {
   title: 'PegaDxilMyBoolean',
-  decorators: [withKnobs],
-  component: PegaDxilMyBoolean
+  component: PegaDxilMyBoolean,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyBoolean = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyBoolean>;
+
+export const BasePegaDxilMyBoolean: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    caption: configProps.caption,
-    validatemessage: configProps.validatemessage,
-    hideLabel: configProps.hideLabel,
-    testId: configProps.testId,
     additionalProps: configProps.additionalProps,
-    displayMode: configProps.displayMode,
-    variant: configProps.variant,
-    trueLabel: configProps.trueLabel,
-    falseLabel: configProps.falseLabel,
-    disabled: configProps.disabled,
-    readOnly: configProps.readOnly,
-    required: configProps.required,
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -57,7 +48,24 @@ export const BasePegaDxilMyBoolean = () => {
 
   return (
     <>
-      <PegaDxilMyBoolean {...props} />
+      <PegaDxilMyBoolean {...props} {...args} />
     </>
   );
-};
+};
+
+BasePegaDxilMyBoolean.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  caption: configProps.caption,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  trueLabel: configProps.trueLabel,
+  falseLabel: configProps.falseLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/index.tsx

@@ -2,10 +2,9 @@ import {
   Checkbox as CosmosCheckbox,
   CheckboxGroup,
   FieldValueList,
-  Text
+  Text,
+  withConfiguration
 } from "@pega/cosmos-react-core";
-import PropTypes from "prop-types";
-
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -40,19 +39,19 @@ interface ActionsProps {
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
+function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   const {
     getPConnect,
-    value,
-    label,
-    helperText,
+    value = false,
+    label = '',
+    helperText = '',
     caption,
     validatemessage,
     hideLabel,
     testId,
-    additionalProps,
+    additionalProps = {},
     displayMode,
-    variant,
+    variant = 'inline',
     trueLabel,
     falseLabel
   } = props;
@@ -62,7 +61,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
 
-  let { readOnly, required, disabled } = props;
+  let { readOnly = false, required = false, disabled = false } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
   );
@@ -105,7 +104,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> displayComponent </StyledPegaDxilMyBooleanWrapper>);
+    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
   }
 
   if (displayMode === "LABELS_LEFT") {
@@ -161,40 +160,4 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 };
 
 
-PegaDxilMyBoolean.defaultProps = {
-  validatemessage: '',
-  value: false,
-  label: '',
-  hideLabel: false,
-  helperText: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: '',
-  additionalProps: {},
-  displayMode: null,
-  variant: 'inline',
-  displayValue: 'Yes/No',
-  trueLabel: '',
-  falseLabel: ''
-};
-
-PegaDxilMyBoolean.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  validatemessage: PropTypes.string,
-  label: PropTypes.string,
-  hideLabel: PropTypes.bool,
-  helperText: PropTypes.string,
-  value: PropTypes.bool,
-  caption: PropTypes.string.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string,
-  additionalProps: PropTypes.objectOf(PropTypes.any),
-  displayMode: PropTypes.string,
-  variant: PropTypes.string,
-  displayValue: PropTypes.string,
-  trueLabel: PropTypes.string,
-  falseLabel: PropTypes.string
-};
+export default withConfiguration(PegaDxilMyBoolean);

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/mock.ts

@@ -14,7 +14,8 @@ export const configProps = {
   falseLabel: 'False',
   disabled: false,
   readOnly: false,
-  required: true
+  required: true,
+  status: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyBoolean/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyCurrency/demo.stories.tsx

@@ -1,33 +1,27 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';
 
 import PegaDxilMyCurrency from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyCurrency> = {
   title: 'PegaDxilMyCurrency',
-  decorators: [withKnobs],
-  component: PegaDxilMyCurrency
+  component: PegaDxilMyCurrency,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyCurrency = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyCurrency>;
+
+export const BasePegaDxilMyCurrency: Story = args => {
 
   const props = {
     value: Number(configProps.value),
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    helperText: configProps.helperText,
-    showGroupSeparators: configProps.showGroupSeparators,
-    allowDecimals: configProps.allowDecimals,
-    currencyISOCode: configProps.currencyISOCode,
-    alwaysShowISOCode: configProps.alwaysShowISOCode,
     hasSuggestions: configProps.hasSuggestions,
-    testId: configProps.testId,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -50,7 +44,26 @@ export const BasePegaDxilMyCurrency = () => {
 
   return (
     <>
-      <PegaDxilMyCurrency {...props} />
+      <PegaDxilMyCurrency {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyCurrency.args = {
+  label: configProps.label,
+  placeholder: configProps.placeholder,
+  helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
+  allowDecimals: configProps.allowDecimals,
+  currencyISOCode: configProps.currencyISOCode,
+  alwaysShowISOCode: configProps.alwaysShowISOCode,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};