@pega/dx-component-builder-sdk 8.23.12 → 8.23.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "8.23.12",
+  "version": "8.23.14",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/build/helper.js

@@ -73,6 +73,7 @@ export const getBuildComponentQuestions = async (category) => {
     },
     {
       name: 'devBuild',
+      type: 'confirm',
       message: 'Generate development build ?',
       default: defaultPegaConfig.devBuild
     }

package/src/tasks/build/index.js

@@ -30,6 +30,8 @@ export default async options => {
     ...answers
   };
 
+  const sDevBuild = devBuild ? '(dev build)' : '';
+
   const customTasks = new Listr(
     [
       {
@@ -47,7 +49,7 @@ export default async options => {
         }
       },
       {
-        title: 'Bundle component',
+        title: `Bundle component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
       },
       {
@@ -59,7 +61,7 @@ export default async options => {
         }
       },
       {
-        title: 'Bundle associated component',
+        title: `Bundle associated component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, "constellation")
       }
     ],
@@ -85,7 +87,7 @@ export default async options => {
         }
       },
       {
-        title: 'Bundle Component',
+        title: `Bundle Component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
       }
     ],

package/src/tasks/build-all/helper.js

@@ -54,6 +54,7 @@ export const getBuildComponentQuestions = async (category) => {
   return [
     {
       name: 'devBuild',
+      type: 'confirm',
       message: 'Generate development build ?',
       default: defaultPegaConfig.devBuild
     }

package/src/tasks/build-all/index.js

@@ -13,7 +13,8 @@ import { CATEGORY_CUSTOM } from '../../constants.js';
 
 export function getCustomTasks(componentKey, category, sourceMap, devBuild, content, options) {
 
-  const customTasks = new Listr(
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  return new Listr(
     [
       {
         title: 'Validate config schema',
@@ -30,7 +31,7 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
         }
       },
       {
-        title: 'Bundle component',
+        title: `Bundle component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
       },
       {
@@ -42,7 +43,7 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
         }
       },
       {
-        title: 'Bundle associated component',
+        title: `Bundle associated component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, "constellation")
       }
     ],
@@ -51,13 +52,12 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
     }
   );
 
-  return customTasks;
 }
 
 
 export function getOverrideTasks(componentKey, category, sourceMap, devBuild, content, options) {
-
-  const overrideTasks = new Listr(
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  return new Listr(
     [
       {
         title: 'Validate config schema',
@@ -74,7 +74,7 @@ export function getOverrideTasks(componentKey, category, sourceMap, devBuild, co
         }
       },
       {
-        title: 'Bundle Component',
+        title: `Bundle Component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
       }
     ],
@@ -83,7 +83,6 @@ export function getOverrideTasks(componentKey, category, sourceMap, devBuild, co
     }
   );
 
-  return overrideTasks;
 }
 
 export default async options => {
@@ -106,13 +105,13 @@ export default async options => {
     ...answers
   };
 
-  var componentKey;
 
 
   if (category === CATEGORY_CUSTOM) {
-    for (var index in components) {
-      componentKey = components[index].value;
-      console.log(chalk.bold.green("Building: " + components[index].name));
+    for (const component of components) {
+      const componentKey = component.value;
+      const componentKeyName = component.name;
+      console.log(chalk.bold.green(`Building: ${componentKeyName}`));
 
       let myCustomTasks = getCustomTasks(componentKey, category, sourceMap, devBuild, content, options);
 
@@ -122,19 +121,20 @@ export default async options => {
     }
   }
   else {
-    for (var index in components) {
-      componentKey = components[index].value;
-      console.log(chalk.bold.green("Building: " + components[index].name));
+    for (const component of components) {
+      const componentKey = component.value;
+      const componentKeyName = component.name;
+      console.log(chalk.bold.green(`Building: ${componentKeyName}`));
 
       let myOverrideTasks = getOverrideTasks(componentKey, category, sourceMap, devBuild, content, options);
 
-      await mOverrideTasks.run().catch(err => {
+      await myOverrideTasks.run().catch(err => {
          console.log(chalk.bold.red(err.toString()));
       });
     }
   }
 
-  cleanUp();
+  await cleanUp();
 
   return true;
 };

package/src/tasks/bundle/builder/webpack.config.js

@@ -125,7 +125,8 @@ export default (
         name: componentKey,
         type: 'umd',
         export: 'default'
-      }
+      },
+      publicPath: ''
     },
     optimization: {
       minimize: isEnvProduction,
@@ -318,7 +319,7 @@ export default (
       }),
 
       new webpack.optimize.LimitChunkCountPlugin({
-        maxChunks: 5
+        maxChunks: 1
       }),
       new webpack.optimize.MinChunkSizePlugin({
         minChunkSize: 100000 // Minimum number of characters

package/src/tasks/create/templates/SDK-React/field/Boolean/index.tsx.mustache

@@ -25,6 +25,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     required,
+    disabled,
     status,
     helperText,
     validatemessage,
@@ -61,15 +62,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
-  let theCheckbox = <Checkbox color='primary' />;
+  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
 
   if (readOnly) {
     // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043
     //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!
-    theCheckbox = <Checkbox value={value || false} onChange={handleChange} readOnly={readOnly} />;
+    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;
   }
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <FormControl required={required} error={status === 'error'}>

package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache

@@ -47,19 +47,18 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
 
   if (displayMode === 'LABELS_LEFT') {
-    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
+    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;
   }
 
   if (readOnly) {
-    const formattedDate = format(props.value, 'datetime');
-    props.value = formattedDate;
-    return <TextInput {...props} />;
+    const formattedDateTime = format(props.value, 'datetime');
+    return <TextInput {...props} value={formattedDateTime} />;
   }
 
   const handleChange = date => {

package/src/tasks/create/templates/SDK-React/field/Decimal/demo.stories.jsx.mustache

@@ -31,6 +31,9 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getStateProps: () => {
           return { value: '.name' };
+        },
+        getComponentName: () => {
+          return 'Decimal';
         }
       };
     },

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache

@@ -1,13 +1,16 @@
-
-import React from 'react';
-import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+/* eslint-disable react/no-unused-prop-types */
+import React, { useState, useEffect } from 'react';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
 import PropTypes from 'prop-types';
 
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+// Using control from: https://github.com/unicef/material-ui-currency-textfield
 
 // Duplicated runtime code from React SDK
 
@@ -15,55 +18,102 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    /* onChange, onBlur, */
     readOnly,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    currencyISOCode = "USD",
+    decimalPrecision = 2,
+    showGroupSeparators = true,
+    testId
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const [decValue, setDecimalvalue] = useState();
+  const [theCurrDec, setCurrDec] = useState(".");
+  const [theCurrSep, setCurrSep] = useState(",");
+
+  useEffect(() => {
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    setCurrDec(theSymbols.theDecimalIndicator);
+    setCurrSep(theSymbols.theDigitGroupSeparator);
+  }, [currencyISOCode]);
+
+  useEffect(() => {
+    setDecimalvalue(value.toString());
+  }, [value]);
+
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
   if (readOnly) {
-    return <TextInput {...props} />;
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function decimalOnChange(event) {
+    // update internal value
+    setDecimalvalue(event?.target?.value);
   }
 
+  function decimalOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-     <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder=''
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-      type='text'
+      <CurrencyTextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder=''
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={decimalOnChange}
+        onBlur={!readOnly ? decimalOnBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={decValue}
+        type='text'
+        outputFormat='number'
+        textAlign='left'
 {{! pick new delimiteres for mustache }}
 {{=<% %>=}}
-      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+        InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}
 <%={{ }}=%>     {{! revert delimiteres for mustache }}
-    />
+        currencySymbol=''
+        decimalCharacter={theCurrDec}
+        digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
+        decimalPlaces={decimalPrecision}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Picklist/demo.stories.jsx.mustache

@@ -39,6 +39,19 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
               return undefined;
             }
           };
+        },
+        getCaseInfo: () => {
+          return {
+            getClassName: () => {
+              return undefined;
+            }
+          };
+        },
+        getLocalizedValue: val => {
+          return val;
+        },
+        getLocaleRuleNameFromKeys: () => {
+          return undefined;
         }
       };
     }

package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache

@@ -24,7 +24,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     label,
     required,
     disabled,
-    placeholder,
     value = '',
     datasource = [],
     validatemessage,
@@ -34,21 +33,38 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     helperText,
     displayMode,
     hideLabel,
-    onRecordChange
+    onRecordChange,
+    fieldMetadata
   } = props;
+  let { placeholder } = props;
+  placeholder = placeholder || 'Select...';
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = thePConn.getStateProps().value;
+  const className = thePConn.getCaseInfo().getClassName();
+  const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
   useEffect(() => {
-    const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());
-    optionsList.unshift({ key: 'Select', value: 'Select...' });
+    const list = Utils.getOptionList(props, getPConnect().getDataObject());
+    const optionsList = [...list];
+    optionsList.unshift({ key: placeholder, value: placeholder });
     setOptions(optionsList);
   }, [datasource]);
 
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter((field) => field?.classID === className)[0]
+    : fieldMetadata;
+
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : refName;
+  const localePath = localeContext === 'datapage' ? displayName : '';
+
   let readOnlyProp = {};
 
   if (displayMode === 'LABELS_LEFT') {
@@ -70,7 +86,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   };
 
   const handleChange = evt => {
-    const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
+    const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
     if (onRecordChange) {
       onRecordChange(evt);
@@ -85,14 +101,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder={placeholder}
+      placeholder={thePConn.getLocalizedValue(placeholder)}
       size='small'
       required={required}
       disabled={disabled}
       onChange={!readOnly ? handleChange : undefined}
       error={status === 'error'}
       label={label}
-      value={value === '' && !readOnly ? 'Select' : value}
+      value={value === '' && !readOnly ? placeholder : value}
       select
 {{! pick new delimiteres for mustache }}
 {{=<% %>=}}
@@ -101,7 +117,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
-          {option.value}
+          {thePConn.getLocalizedValue(
+            option.value,
+            localePath,
+            thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
+          )}
         </MenuItem>
       ))}
     </TextField>

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -63,7 +63,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           {{! pick new delimiteres for mustache }}
           {{=<% %>=}}
           InputProps={{
-            readOnly: true
+            readOnly: true,
+            inputProps: { ...testProp }
           }}
           <%={{ }}=%>     {{! revert delimiteres for mustache }}
           disableDropdown={disableDropdown}

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -24,6 +24,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     onChange,
     onBlur,
     readOnly,
+    testId,
     helperText,
     displayMode,
     hideLabel
@@ -42,6 +43,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <TextField
@@ -58,6 +65,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       error={status === 'error'}
       label={label}
       value={value}
+    {{! pick new delimiteres for mustache }}
+    {{=<% %>=}}
+      InputProps={{ inputProps: { ...testProp } }}
+    <%={{ }}=%>     {{! revert delimiteres for mustache }}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -26,7 +26,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    testId
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -42,6 +43,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     return <TextInput {...props} />;
   }
 
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
   const handleChange = date => {
     const theValue = date && date.isValid() ? date.format('HH:mm') : null;
     onChange({ value: theValue });
@@ -79,6 +86,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           format='hh:mm a'
           value={timeValue}
           onChange={handleChange}
+      {{! pick new delimiteres for mustache }}
+      {{=<% %>=}}
+          InputProps={{ inputProps: { ...testProp } }}
+      <%={{ }}=%>     {{! revert delimiteres for mustache }}
         />
       </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache

@@ -1,10 +1,10 @@
-/* eslint-disable react/no-array-index-key */
-import React, { createElement } from "react";
-import PropTypes from "prop-types";
+/* eslint-disable react/no-danger */
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
 
-import { getInstructions } from "./utils";
-import createPConnectComponent from "@pega/react-sdk-components/lib/bridge/react_pconnect";
-import "./DefaultForm.css";
+import { getInstructions } from './utils';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import './DefaultForm.css';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
 
@@ -15,23 +15,22 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from "./styles";
 export default function {{COMPONENT_CLASS_NAME}}(props) {
   const { getPConnect, NumCols } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
-  const instructionText = instructions?.replace(/<\/?[^>]+(>|$)/g, "");
 
   let divClass: string;
 
-  const numCols = NumCols || "1";
+  const numCols = NumCols || '1';
   switch (numCols) {
-    case "1":
-      divClass = "psdk-default-form-one-column";
+    case '1':
+      divClass = 'psdk-default-form-one-column';
       break;
-    case "2":
-      divClass = "psdk-default-form-two-column";
+    case '2':
+      divClass = 'psdk-default-form-two-column';
       break;
-    case "3":
-      divClass = "psdk-default-form-three-column";
+    case '3':
+      divClass = 'psdk-default-form-three-column';
       break;
     default:
-      divClass = "psdk-default-form-one-column";
+      divClass = 'psdk-default-form-one-column';
       break;
   }
 
@@ -40,21 +39,32 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   // defaultForm kids
   const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
   const dfChildren = arChildren.map((kid, idx) =>
+    // eslint-disable-next-line react/no-array-index-key
     createElement(createPConnectComponent(), { ...kid, key: idx })
   );
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <div className={divClass}>
-        <div>{instructionText}</div>
-        {dfChildren}
-      </div>
+    <>
+      {instructions && (
+        <div className='psdk-default-form-instruction-text'>
+          {/* server performs sanitization method for instructions html content */}
+          <div key="instructions" 
+    {{! pick new delimiteres for mustache }}
+    {{=<% %>=}}
+          dangerouslySetInnerHTML={{ __html: instructions }} 
+    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+          />
+        </div>
+      )}
+      <div className={divClass}>{dfChildren}</div>
+    </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  NumCols: "1",
+  NumCols: '1',
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -45,9 +45,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   // let waitingForData = true;
 
   const displayedColumns = [
-    { label: "Date", type: "DateTime", fieldName: "pxTimeCreated" },
-    { label: "Description", type: "TextInput", fieldName: "pyMessageKey" },
-    { label: "User", type: "TextInput", fieldName: "pyPerformer" }
+    { label: thePConn.getLocalizedValue('Date'), type: "DateTime", fieldName: "pxTimeCreated" },
+    { label: thePConn.getLocalizedValue('Description'), type: "TextInput", fieldName: "pyMessageKey" },
+    { label: thePConn.getLocalizedValue('Performed by'), type: "TextInput", fieldName: "pyPerformer" }
    ];
 
   const rowData: any = useRef([]);
@@ -59,6 +59,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   const dataViewName = "D_pyWorkHistory";
   const context = thePConn.getContextName();
 
+
   function computeRowData(rows: Array<Object>): void {
     const theRowData: Array<Object> = [];
 

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 
-import { configProps, operatorDetails } from './mock.stories';
+import { caseOpConfig, operatorDetails } from './mock.stories';
 
 import {{COMPONENT_CLASS_NAME}} from './index.tsx';
 
@@ -27,15 +27,7 @@ window.PCore.getUserApi = () => {
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    label: configProps.label,
-    createLabel: configProps.createLabel,
-    updateLabel: configProps.updateLabel,
-    createOperator: configProps.createOperator,
-    updateOperator: configProps.updateOperator,
-    createDateTime: configProps.createDateTime,
-    updateDateTime: configProps.updateDateTime,
-    hideLabel: configProps.hideLabel,
-
+    caseOpConfig,
     getPConnect: () => {
       return {
         getActionsApi: () => {

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -32,33 +32,25 @@ const useStyles = makeStyles((theme) => ({
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
   // const componentName = "Operator";
-  const {
-    label,
-    createLabel,
-    updateLabel,
-    createOperator,
-    updateOperator,
-    createDateTime,
-    updateDateTime
-  } = props;
+  const { caseOpConfig } = props;
   const classes = useStyles();
 
-  const fieldLabel = label.toLowerCase();
+  const fieldLabel = caseOpConfig.label.toLowerCase();
   let caseOpLabel = "---";
   let caseOpName = "---";
   let caseOpId = "";
   let caseTime = null;
 
   if (fieldLabel === "create operator") {
-    caseOpLabel = createLabel;
-    caseOpName = createOperator.userName;
-    caseTime = createDateTime;
-    caseOpId = createOperator.userId;
+    caseOpLabel = caseOpConfig.createLabel;
+    caseOpName = caseOpConfig.createOperator.userName;
+    caseTime = caseOpConfig.createDateTime;
+    caseOpId = caseOpConfig.createOperator.userId;
   } else if (fieldLabel === "update operator") {
-    caseOpLabel = updateLabel;
-    caseOpName = updateOperator.userName;
-    caseTime = updateDateTime;
-    caseOpId = updateOperator.userId;
+    caseOpLabel = caseOpConfig.updateLabel;
+    caseOpName = caseOpConfig.updateOperator.userName;
+    caseTime = caseOpConfig.updateDateTime;
+    caseOpId = caseOpConfig.updateOperator.userId;
   }
 
   // Popover-related
@@ -75,6 +67,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   function showOperatorDetails(event) {
 
     const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
 
     operatorPreviewPromise.then((res) => {
       const fillerString = "---";
@@ -87,27 +81,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         fields = [
           {
             id: "pyPosition",
-            name: "Position",
+            name: localizedVal("Position", localeCategory),
             value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
           },
           {
             id: "pyOrganization",
-            name: "Organization",
+            name: localizedVal("Organization", localeCategory),
             value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
           },
           {
             id: "ReportToUserName",
-            name: "Reports to",
+            name: localizedVal('Reports to', localeCategory),
             value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
           },
           {
             id: "pyTelephone",
-            name: "Telephone",
+            name: localizedVal('Telephone', localeCategory),
             value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
           },
           {
             id: "pyEmailAddress",
-            name: "Email address",
+            name: localizedVal('Email address', localeCategory),
             value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
           }
         ];
@@ -117,27 +111,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         fields = [
           {
             id: "pyPosition",
-            name: "Position",
+            name: localizedVal("Position", localeCategory),
             value: fillerString
           },
           {
             id: "pyOrganization",
-            name: "Organization",
+            name: localizedVal("Organization", localeCategory),
             value: fillerString
           },
           {
             id: "ReportToUserName",
-            name: "Reports to",
+            name: localizedVal('Reports to', localeCategory),
             value: fillerString
           },
           {
             id: "pyTelephone",
-            name: "Telephone",
+            name: localizedVal('Telephone', localeCategory),
             value: fillerString
           },
           {
             id: "pyEmailAddress",
-            name: "Email address",
+            name: localizedVal('Email address', localeCategory),
             value: fillerString
           }
         ];

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.stories.js.mustache

@@ -1,5 +1,5 @@
 
-export const configProps = {
+export const caseOpConfig = {
   label: 'Create operator',
   createLabel: 'Created',
   updateLabel: 'Updated',

package/src/tasks/publish/helper.js

@@ -15,10 +15,10 @@ import {
   getOptionsCategory
 } from '../../util.js';
 
-import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, 
-  TOKEN_PATH, 
-  COMPONENT_SCHEMA, 
-  CATEGORY_CONSTELLATION, 
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT,
+  TOKEN_PATH,
+  COMPONENT_SCHEMA,
+  CATEGORY_CONSTELLATION,
   CATEGORY_CUSTOM } from '../../constants.js';
 
 
@@ -95,6 +95,7 @@ export const getPublishComponentQuestions = async (category) => {
     },
     {
       name: 'devBuild',
+      type: 'confirm',
       message: 'Generate development build ?',
       default: defaultPegaConfig.devBuild
     }

package/src/tasks/publish/index.js

@@ -10,11 +10,11 @@ import { lintComponent } from '../linter/index.js';
 import { CATEGORY_CONSTELLATION, CATEGORY_CUSTOM } from '../../constants.js';
 
 
-import { getPublishComponentQuestions, 
-  publishComponentToServer, 
-  zipComponent, 
-  getBuildCategory, 
-  mapConfigJsonToCompanion, 
+import { getPublishComponentQuestions,
+  publishComponentToServer,
+  zipComponent,
+  getBuildCategory,
+  mapConfigJsonToCompanion,
   removeCompanionConfigJson} from './helper.js';
 
 
@@ -37,6 +37,8 @@ export default async options => {
     ...answers
   };
 
+  const sDevBuild = devBuild ? '(dev build)' : '';
+
   const customTasks = new Listr(
     [
 
@@ -55,7 +57,7 @@ export default async options => {
         }
       },
       {
-        title: 'Bundle component',
+        title: `Bundle component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       },
@@ -80,7 +82,7 @@ export default async options => {
         }
       },
       {
-        title: 'Bundle associated component',
+        title: `Bundle associated component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, CATEGORY_CONSTELLATION),
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       },
@@ -126,7 +128,7 @@ export default async options => {
         }
       },
       {
-        title: 'Bundle component',
+        title: `Bundle component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       },

package/src/tasks/publish-all/helper.js

@@ -15,10 +15,10 @@ import {
   getOptionsCategory
 } from '../../util.js';
 
-import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, 
-  TOKEN_PATH, 
-  COMPONENT_SCHEMA, 
-  CATEGORY_CONSTELLATION, 
+import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT,
+  TOKEN_PATH,
+  COMPONENT_SCHEMA,
+  CATEGORY_CONSTELLATION,
   CATEGORY_CUSTOM } from '../../constants.js';
 
 
@@ -89,6 +89,7 @@ export const getPublishComponentQuestions = async () => {
     },
     {
       name: 'devBuild',
+      type: 'confirm',
       message: 'Generate development build ?',
       default: defaultPegaConfig.devBuild
     }

package/src/tasks/publish-all/index.js

@@ -10,10 +10,10 @@ import { lintComponent } from '../linter/index.js';
 import { CATEGORY_CONSTELLATION, CATEGORY_CUSTOM } from '../../constants.js';
 
 
-import { getPublishComponentQuestions, 
-  publishComponentToServer, 
-  zipComponent, 
-  getBuildCategory, 
+import { getPublishComponentQuestions,
+  publishComponentToServer,
+  zipComponent,
+  getBuildCategory,
   mapConfigJsonToCompanion,
   removeCompanionConfigJson,
   cleanUp
@@ -21,7 +21,8 @@ import { getPublishComponentQuestions,
 
 
 export function getCustomTasks(componentKey, category, sourceMap, devBuild, content, options) {
-  const customTasks = new Listr(
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  return new Listr(
     [
 
       {
@@ -59,7 +60,7 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
         }
       },
       {
-        title: 'Bundle associated component',
+        title: `Bundle associated component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, CATEGORY_CONSTELLATION),
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       },
@@ -88,12 +89,11 @@ export function getCustomTasks(componentKey, category, sourceMap, devBuild, cont
     }
   );
 
-  return customTasks;
 }
 
 export function getOverrideTasks(componentKey, category, sourceMap, devBuild, content, options) {
-
-  const overrideTasks = new Listr(
+  const sDevBuild = devBuild ? '(dev build)' : '';
+  return new Listr(
     [
       {
         title: 'Validate config schema',
@@ -110,7 +110,7 @@ export function getOverrideTasks(componentKey, category, sourceMap, devBuild, co
         }
       },
       {
-        title: 'Bundle component',
+        title: `Bundle component ${sDevBuild}`,
         task: async () => await bundleComponent(componentKey, sourceMap, devBuild, category),
         skip: () => (options.skipBundle ? 'Skipped bundling component' : undefined)
       },
@@ -139,7 +139,6 @@ export function getOverrideTasks(componentKey, category, sourceMap, devBuild, co
     }
   );
 
-  return overrideTasks;
 }
 
 
@@ -163,14 +162,14 @@ export default async options => {
     ...answers
   };
 
-  var componentKey;
 
 
   if (category === CATEGORY_CUSTOM) {
 
-      for (var index in components) {
-        componentKey = components[index].value;
-        console.log(chalk.bold.green("Publishing: " + components[index].name));
+    for (const component of components) {
+        const componentKey = component.value;
+        const componentKeyName = component.name;
+        console.log(chalk.bold.green(`Publishing: ${componentKeyName}`));
 
         let myCustomTasks = getCustomTasks(componentKey, category, sourceMap, devBuild, content, options);
 
@@ -181,9 +180,10 @@ export default async options => {
 
   }
   else {
-    for (var index in components) {
-      componentKey = components[index].value;
-      console.log(chalk.bold.green("Publishing: " + components[index].name));
+    for (const component of components) {
+      const componentKey = component.value;
+      const componentKeyName = component.name;
+      console.log(chalk.bold.green(`Publishing: ${componentKeyName}`));
 
       let myOverrideTasks = getOverrideTasks(componentKey, category, sourceMap, devBuild, content, options);
 
@@ -196,7 +196,7 @@ export default async options => {
 
 
   // once done, remove leftover directories
-  cleanUp();
+  await cleanUp();
 
 
   return true;