@pega/dx-component-builder-sdk 0.23.14 → 0.23.15

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

@@ -30,6 +30,7 @@ import { getReferenceList } from '@pega/react-sdk-components/lib/components/help
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import { buildFieldsForTable, filterData, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 
 interface SimpleTableManualProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -171,6 +172,10 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
 
+  const fieldsWithPropNames = rawFields.map((field, index) => {
+    return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
+  });
+
   useEffect(() => {
     if (editableMode && !allowEditingInModal) {
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -197,6 +202,19 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     return field.name ? field.name : field.cellRenderer;
   });
 
+  const getFormattedValue = (val, key) => {
+    const rawField = fieldsWithPropNames.find(item => item.propName === key);
+    let options = {};
+    if (rawField && ['Boolean', 'Checkbox'].includes(rawField.type)) {
+      const { trueLabel, falseLabel } = rawField.config;
+      options = {
+        trueLabel,
+        falseLabel
+      };
+    }
+    return rawField ? format(val, rawField.type, options) : val;
+  };
+
   // console.log(`SimpleTable displayedColumns:`);
   // console.log(displayedColumns);
 
@@ -209,7 +227,7 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
     for (const key of refKeys) {
       valBuilder = valBuilder[key];
     }
-    return valBuilder;
+    return getFormattedValue(valBuilder, inColKey);
   }
 
   const formatRowsData = data => {

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

@@ -346,23 +346,29 @@ export default function FileUtility(props: FileUtilityProps) {
     if (fileData.attachedFiles && fileData.attachedFiles.length > 0) {
       setProgress(true);
     }
-    for (const file of fileData.attachedFiles) {
-      attachmentUtils
-        .uploadAttachment(file, onUploadProgress, errorHandler, thePConn.getContextName())
-        .then((fileResponse: any) => {
-          if (fileResponse.type === 'File') {
-            (attachmentUtils.linkAttachmentsToCase(caseID, [fileResponse], 'File', thePConn.getContextName()) as Promise<any>)
-              .then(() => {
-                setFileData(current => {
-                  return { ...current, fileList: [], attachedFiles: [] };
-                });
-                getAttachments();
-              })
-              .catch();
+
+    Promise.allSettled(
+      fileData.attachedFiles.map(file => attachmentUtils.uploadAttachment(file, onUploadProgress, errorHandler, thePConn.getContextName()))
+    )
+      .then((fileResponses: any) => {
+        const uploadedFiles: any = [];
+        fileResponses.forEach(fileResponse => {
+          if (fileResponse.status === 'fulfilled') {
+            uploadedFiles.push(fileResponse.value);
           }
-        })
-        .catch();
-    }
+        });
+        if (uploadedFiles.length > 0) {
+          (attachmentUtils.linkAttachmentsToCase(caseID, uploadedFiles, 'File', thePConn.getContextName()) as Promise<any>)
+            .then(() => {
+              setFileData(current => {
+                return { ...current, fileList: [], attachedFiles: [] };
+              });
+              getAttachments();
+            })
+            .catch();
+        }
+      })
+      .catch();
   }
 
   function onAddLinksClick() {

package/tests/assets/sdk-r/components/createAll/custom-constellation/field/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

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

@@ -0,0 +1,54 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyTestText from './index';
+
+export default {
+  title: 'PegaDxilMyTestText',
+  decorators: [withKnobs],
+  component: PegaDxilMyTestText
+};
+
+export const BasePegaDxilMyTestText = () => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} />
+    </>
+  );
+};

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

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { Input } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import StyledPegaDxilMyTestTextWrapper from './styles';
+
+// interface for props
+interface PegaDxilMyTestTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+
+}
+
+// interface for StateProps object
+interface StateProps {
+  value: string;
+  hasSuggestions: boolean;
+}
+
+// Duplicated runtime code from Constellation Design System Component
+
+// 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 PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const stateProps = pConn.getStateProps() as StateProps;
+  const propName: string = stateProps.value;
+
+  const handleOnChange = (event: any) => {
+    const { value: updatedValue } = event.target;
+    actions.updateFieldValue(propName, updatedValue);
+  };
+
+  return (
+    <StyledPegaDxilMyTestTextWrapper>
+      <Input
+        type='text'
+        value={value}
+        label={label}
+        labelHidden={hideLabel}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        onChange={handleOnChange}
+        testId={testId}
+      />
+    </StyledPegaDxilMyTestTextWrapper>
+  );
+};
+
+PegaDxilMyTestText.defaultProps = {
+  value: '',
+  placeholder: '',
+  disabled: false,
+  readOnly: false,
+  required: false,
+  testId: ''
+};
+
+PegaDxilMyTestText.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  getPConnect: PropTypes.func.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
+};

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

@@ -0,0 +1,15 @@
+
+// @ts-nocheck
+export const configProps = {
+  value: '',
+  label: 'Text Sample',
+  placeholder: 'Text Placeholder',
+  helperText: 'Text Helper Text',
+  testId: 'Text-12345678',
+  hasSuggestions: false
+};
+
+export const stateProps = {
+  value: '.TextSample',
+  hasSuggestions: false
+};

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

@@ -0,0 +1,15 @@
+
+// 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;
+//  `;
+// });

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof PegaDxilMyBoolean> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyBoolean>;
 
-export const BasePegaDxilMyBoolean: Story = (args) => {
+export const BasePegaDxilMyBoolean: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -35,12 +35,16 @@ export const BasePegaDxilMyBoolean: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => { /* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => { /* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         }
       };
@@ -60,5 +64,5 @@ BasePegaDxilMyBoolean.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

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

@@ -2,28 +2,28 @@ import { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import StyledPegaDxilMyBooleanWrapper from './styles';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import StyledPegaDxilMyBooleanWrapper from './styles';
 
 interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on this componentName
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 // Duplicated runtime code from React SDK
 
 // 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) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -33,7 +33,9 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -50,11 +52,11 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -62,7 +64,7 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   };
 
   const handleBlur = event => {
-    thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional
+    thePConn.getValidationApi().validate(event.target.checked);
   };
 
   let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
@@ -75,20 +77,20 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
-    <FormControl required={required} error={status === 'error'}>
-      <FormGroup>
-        <FormControlLabel
-          control={theCheckbox}
-          checked={checked}
-          onChange={!readOnly ? handleChange : undefined}
-          onBlur={!readOnly ? handleBlur : undefined}
-          label={caption}
-          labelPlacement='end'
-          data-test-id={testId}
-        />
-      </FormGroup>
-      <FormHelperText>{helperTextToDisplay}</FormHelperText>
-    </FormControl>
+      <FormControl required={required} error={status === 'error'}>
+        <FormGroup>
+          <FormControlLabel
+            control={theCheckbox}
+            checked={checked}
+            onChange={!readOnly ? handleChange : undefined}
+            onBlur={!readOnly ? handleBlur : undefined}
+            label={caption}
+            labelPlacement='end'
+            data-test-id={testId}
+          />
+        </FormGroup>
+        <FormHelperText>{helperTextToDisplay}</FormHelperText>
+      </FormControl>
     </StyledPegaDxilMyBooleanWrapper>
   );
 }

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

@@ -7,14 +7,14 @@ import { configProps, fieldMetadata } from './mock';
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
 }
 };
 
@@ -27,7 +27,7 @@ const meta: Meta<typeof PegaDxilMyCurrency> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyCurrency>;
 
-export const BasePegaDxilMyCurrency: Story = (args) => {
+export const BasePegaDxilMyCurrency: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -41,7 +41,9 @@ export const BasePegaDxilMyCurrency: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue?.toString());
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const BasePegaDxilMyCurrency: Story = (args) => {
     }
   };
 
-  return <PegaDxilMyCurrency {...props} {...args} />
+  return <PegaDxilMyCurrency {...props} {...args} />;
 };
 
 BasePegaDxilMyCurrency.args = {
@@ -73,5 +75,5 @@ BasePegaDxilMyCurrency.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

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

@@ -19,7 +19,6 @@ interface PegaDxilMyCurrencyProps extends PConnFieldProps {
 // Duplicated runtime code from React SDK
 
 // 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 PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');

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

@@ -9,21 +9,21 @@ window.PCore = {
   ...window.PCore,
   getLocaleUtils: (): any => {
     return {
-      getLocaleValue: (value) => {
+      getLocaleValue: value => {
         return value;
       }
-    }
+    };
   },
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
- }
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof PegaDxilMyDate> = {
@@ -35,7 +35,7 @@ const meta: Meta<typeof PegaDxilMyDate> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDate>;
 
-export const BasePegaDxilMyDate: Story = (args) => {
+export const BasePegaDxilMyDate: Story = args => {
   const [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -47,7 +47,9 @@ export const BasePegaDxilMyDate: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const BasePegaDxilMyDate: Story = (args) => {
     }
   };
 
-  return <PegaDxilMyDate {...props} {...args} />
+  return <PegaDxilMyDate {...props} {...args} />;
 };
 
 BasePegaDxilMyDate.args = {
@@ -73,5 +75,5 @@ BasePegaDxilMyDate.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

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

@@ -16,11 +16,9 @@ interface PegaDxilMyDateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // Duplicated runtime code from React SDK
 
 // 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 PegaDxilMyDate(props: PegaDxilMyDateProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const TextInput = getComponentFromMap('TextInput');
@@ -96,27 +94,27 @@ export default function PegaDxilMyDate(props: PegaDxilMyDateProps) {
   return (
     <StyledPegaDxilMyDateWrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
-    <KeyboardDatePicker
-      disableToolbar
-      variant='inline'
-      inputVariant='outlined'
-      placeholder={dateFormatInfo.dateFormatStringLC}
-      format={dateFormatInfo.dateFormatString}
-      mask={dateFormatInfo.dateFormatMask}
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      onAccept={handleAccept}
-      InputProps={{ ...testProp }}
-    />
+        <KeyboardDatePicker
+          disableToolbar
+          variant='inline'
+          inputVariant='outlined'
+          placeholder={dateFormatInfo.dateFormatStringLC}
+          format={dateFormatInfo.dateFormatString}
+          mask={dateFormatInfo.dateFormatMask}
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onBlur={!readOnly ? onBlur : undefined}
+          onAccept={handleAccept}
+          InputProps={{ ...testProp }}
+        />
      </MuiPickersUtilsProvider>
     </StyledPegaDxilMyDateWrapper>
   );