@pega/custom-dx-components 8.8.20 → 23.1.10

package/src/tasks/list/helper.js

@@ -7,15 +7,7 @@ import ora from 'ora';
 
 import inquirer from 'inquirer';
 
-import {
-  LIST_COMPONENT_SERVICE_REST_ENDPOINT,
-  LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT,
-  TOKEN_PATH,
-  COMPONENT_SCHEMA,
-  TASKS_CONFIG_JSON_FILENAME,
-  COMPONENTS_DIRECTORY_PATH,
-  COMPONENTS_PATH
-} from '../../constants.js';
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT, LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH, COMPONENT_SCHEMA, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
 import { constructCompleteUrl, getComponents, getPegaServerConfig, getHttpsAgent, sanitize } from '../../util.js';
 
 export const SOURCE_OF_COMPONENT_TYPES = {
@@ -23,6 +15,8 @@ export const SOURCE_OF_COMPONENT_TYPES = {
   LOCAL: 'Local'
 };
 
+
+
 export const getListComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -49,7 +43,9 @@ export const getLaunchPadFilterQuestions = async () => {
   data = data && JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -63,7 +59,7 @@ export const getLaunchPadFilterQuestions = async () => {
       name: 'organization',
       message: 'Enter component organization (required)',
       default: organization,
-      validate: (value) => {
+      validate: value => {
         if (value) {
           return true;
         }
@@ -74,7 +70,7 @@ export const getLaunchPadFilterQuestions = async () => {
       name: 'library',
       message: 'Enter library name (required)',
       default: library,
-      validate: (value) => {
+      validate: value => {
         if (value) {
           return true;
         }
@@ -82,7 +78,7 @@ export const getLaunchPadFilterQuestions = async () => {
       }
     }
   ];
-};
+}
 
 export const listLocalComponents = async (sourceOfComponents) => {
   let localComponents = await getComponents();
@@ -173,6 +169,8 @@ export const getComponentsFromServer = async (library, organization) => {
     isLaunchpad ? LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT : LIST_COMPONENT_SERVICE_REST_ENDPOINT
   );
 
+
+
   return new Promise((resolve, reject) => {
     try {
       fs.readFile(TOKEN_PATH, 'utf8', (err, data) => {
@@ -190,12 +188,9 @@ export const getComponentsFromServer = async (library, organization) => {
 
             fetchComponentsFromLaunchpad(url, headers)
               .then((response) => {
-                response = response.filter(
-                  (component) =>
-                    (component.library === library || library === '*') && (component.organization === organization || organization === '*')
-                );
-                resolve(response);
-              })
+                response = response.filter(component => (component.library === library || library === "*" ) && (component.organization === organization || organization === "*"));
+                resolve(response); }
+              )
               .catch((e) => reject(e));
           } else {
             headers.Authorization = `${tokenType} ${accessToken}`;

package/tests/assets/components/create/Pega_DXIL_MyTestText/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Input, Label } from '@pega/cosmos-react-core';
+import { Input } from '@pega/cosmos-react-core';
 
 import StyledPegaDxilMyTestTextWrapper from './styles';
 
@@ -9,7 +9,7 @@ import StyledPegaDxilMyTestTextWrapper from './styles';
 // 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
 const PegaDxilMyTestText = props => {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, testId } = props;
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -22,10 +22,11 @@ const PegaDxilMyTestText = props => {
 
   return (
     <StyledPegaDxilMyTestTextWrapper>
-      <Label>{label}</Label>
       <Input
         type='text'
         value={value}
+        label={label}
+        labelHidden={hideLabel}
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readOnly}
@@ -43,7 +44,7 @@ PegaDxilMyTestText.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null
+  testId: ''
 };
 
 PegaDxilMyTestText.propTypes = {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/index.jsx

@@ -65,7 +65,7 @@ const PegaDxilMyBoolean = props => {
     />
   );
 
-  const parentTestId = testId ? `${testId}-parent` : testId;
+  const parentTestId = testId === '' ? `${testId}-parent` : testId;
 
   let displayComponent;
   if (displayMode) {
@@ -138,13 +138,13 @@ PegaDxilMyBoolean.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   additionalProps: {},
   displayMode: null,
   variant: 'inline',
   displayValue: 'Yes/No',
   trueLabel: '',
-  falseLabel: ''
+  falseLabel: '',
 };
 
 PegaDxilMyBoolean.propTypes = {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/config.json

@@ -18,6 +18,6 @@
     }
   ],
   "defaultConfig": {
-     "label": "@L $this.label"
+     "label": "@L My Case Widget"
   }
 }

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/index.jsx

@@ -248,7 +248,7 @@ PegaDxilMyCurrency.defaultProps = {
   allowDecimals: true,
   currencyISOCode: 'USD',
   isoCodeSelection: 'constant',
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/config.json

@@ -141,7 +141,11 @@
             },
             {
               "key": "DateTime-Long",
-              "value": "Date Time"
+              "value": "Date (Long)"
+            },
+            {
+              "key": "DateTime-Short",
+              "value": "Date (Short)"
             },
             {
               "key": "DateTime-Since",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/index.jsx

@@ -182,6 +182,7 @@ const PegaDxilMyDate = props => {
       </StyledPegaDxilMyDateWrapper>
     );
   } else {
+
     dateComponent = (
       <StyledPegaDxilMyDateWrapper>
       <DateInput
@@ -222,7 +223,7 @@ PegaDxilMyDate.defaultProps = {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   showAsFormattedText: false,
   additionalProps: {},
   displayMode: null,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/index.jsx

@@ -218,7 +218,7 @@ PegaDxilMyDateTime.defaultProps = {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   additionalProps: {},
   displayMode: null,
   variant: "inline",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/index.jsx

@@ -222,7 +222,7 @@ PegaDxilMyDecimal.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: "",
   decimalPrecision: '',
   showGroupSeparators: false,
   displayMode: null,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.jsx

@@ -88,6 +88,9 @@ export const basePegaDxilMyDetails = () => {
         getRawMetadata: () => {
           return pyReviewRaw;
         },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
         getInheritedProps: () => {
           return pyReviewRaw.config.inheritedProps;
         },

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/index.jsx

@@ -76,6 +76,7 @@ const PegaDxilMyEmail = props => {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
+
   const hasValueChange = useRef(false);
 
 
@@ -199,7 +200,7 @@ PegaDxilMyEmail.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/demo.stories.jsx

@@ -133,6 +133,9 @@ export const basePegaDxilMyForm = () => {
         getChildren: () => {
           return pyReviewRaw.children;
         },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
         createComponent: config => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.jsx

@@ -1,4 +1,4 @@
-import { Grid } from '@pega/cosmos-react-core';
+import { Grid, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import StyledPegaDxilMyFormWrapper from './styles';
@@ -11,24 +11,30 @@ import StyledPegaDxilMyFormWrapper from './styles';
 export default function PegaDxilMyForm(props) {
 
 
-  const { children, NumCols } = props;
+  const { children, NumCols, label, showLabel, getPConnect } = props;
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const nCols = parseInt(NumCols, 10);
 
   // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
 
+
+
   return (
     <StyledPegaDxilMyFormWrapper>
-    <Grid container={{
-          cols: `repeat(${nCols}, minmax(0, 1fr))`,
-          gap: 2,
-          wrap: `wrap`
-        }}>
-          {children}
-    </Grid>
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      <Grid container={{
+            cols: `repeat(${nCols}, minmax(0, 1fr))`,
+            gap: 2,
+            wrap: `wrap`
+          }}>
+            {children}
+      </Grid>
+    </FieldGroup>
     </StyledPegaDxilMyFormWrapper>
   );
 
+
 }
 
 PegaDxilMyForm.defaultProps = {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/index.jsx

@@ -46,6 +46,7 @@ const PegaDxilMyInteger = props => {
   const propName = pConn.getStateProps().value;
   const [integerValue, setIntegerValue] = useState(value?.toString());
   const sliderDefaultValue = !defaultValue && defaultValue !== 0 ? max : defaultValue;
+
   const hasValueChange = useRef(false);
 
 
@@ -272,7 +273,7 @@ PegaDxilMyInteger.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   showGroupSeparators: false,
   displayMode: null,
   displayAs: 'input',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/index.jsx

@@ -80,7 +80,6 @@ const PegaDxilMyParagraph = props => {
   const maxLength = fieldMetadata?.maxLength;
   const hasValueChange = useRef(false);
 
-
  // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
   let { readOnly, required, disabled } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
@@ -197,7 +196,7 @@ PegaDxilMyParagraph.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   fieldMetadata: {},
   additionalProps: {},

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/index.jsx

@@ -42,6 +42,7 @@ const PegaDxilMyPercentage = props => {
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
   const [percentageValue, setPercentageValue] = useState(value?.toString());
+
   const hasValueChange = useRef(false);
 
   let { readOnly, required, disabled } = props;
@@ -237,7 +238,7 @@ PegaDxilMyPercentage.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   decimalPrecision: '',
   showGroupSeparators: false,
   additionalProps: {},

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/index.jsx

@@ -232,7 +232,7 @@ PegaDxilMyPhone.defaultProps = {
   readOnly: false,
   required: false,
   showCountryCode: true,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/index.jsx

@@ -262,6 +262,7 @@ const PegaDxilMyPicklist = props => {
     suggestionsHandler(accepted, pConnect, setStatus);
   };
 
+
   return (
     <StyledPegaDxilMyPicklistWrapper>
     <Select
@@ -305,7 +306,7 @@ PegaDxilMyPicklist.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   helperText: '',
   datasource: [],
   listType: '',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyText/index.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Input, Label } from '@pega/cosmos-react-core';
+import { Input } from '@pega/cosmos-react-core';
 
 import StyledPegaDxilMyTextWrapper from './styles';
 
@@ -9,7 +9,7 @@ import StyledPegaDxilMyTextWrapper from './styles';
 // 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
 const PegaDxilMyText = props => {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, testId } = props;
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -22,10 +22,11 @@ const PegaDxilMyText = props => {
 
   return (
     <StyledPegaDxilMyTextWrapper>
-      <Label>{label}</Label>
       <Input
         type='text'
         value={value}
+        label={label}
+        labelHidden={hideLabel}
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readOnly}
@@ -43,7 +44,7 @@ PegaDxilMyText.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null
+  testId: ''
 };
 
 PegaDxilMyText.propTypes = {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/index.jsx

@@ -204,7 +204,7 @@ PegaDxilMyTextInput.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   fieldMetadata: {},
   additionalProps: {},
   displayMode: null,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/index.jsx

@@ -38,7 +38,6 @@ const PegaDxilMyTimeOfDay = props => {
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
 
-
   // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
   let { readOnly, required, disabled } = props;
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
@@ -183,11 +182,12 @@ PegaDxilMyTimeOfDay.defaultProps = {
   required: false,
   pickerInterval: "30",
   clockFormat: 0,
-  testId: null,
+  testId: '',
   additionalProps: {},
   displayMode: null,
   variant: "inline",
-  formatter:"defaultTime"
+  formatter:"defaultTime",
+  hasSuggestions: false
 };
 
 PegaDxilMyTimeOfDay.propTypes = {
@@ -207,7 +207,8 @@ PegaDxilMyTimeOfDay.propTypes = {
   additionalProps: PropTypes.objectOf(PropTypes.any),
   displayMode: PropTypes.string,
   variant: PropTypes.string,
-  formatter : PropTypes.string
+  formatter : PropTypes.string,
+  hasSuggestions: PropTypes.bool
 };
 
 export default PegaDxilMyTimeOfDay;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.stories.jsx

@@ -88,6 +88,9 @@ export const basePegaDxilMyTwoColumnDetails = () => {
         getRawMetadata: () => {
           return pyReviewRaw;
         },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
         getInheritedProps: () => {
           return pyReviewRaw.config.inheritedProps;
         },

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx

@@ -138,6 +138,9 @@ export const basePegaDxilMyTwoColumnForm = () => {
         getChildren: () => {
           return pyReviewRaw.children;
         },
+        getInheritedProps: () => {
+          return pyReviewRaw.config.inheritedProps;
+        },
         createComponent: config => {
           // eslint-disable-next-line default-case
           switch (config.config.value) {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.jsx

@@ -1,4 +1,4 @@
-import { Grid, Flex } from '@pega/cosmos-react-core';
+import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
 
 import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
@@ -11,7 +11,8 @@ import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
 export default function PegaDxilMyTwoColumnForm(props) {
 
 
-  const { children } = props;
+  const { children, label, showLabel, getPConnect } = props;
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const numRegions = children?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
@@ -24,13 +25,15 @@ export default function PegaDxilMyTwoColumnForm(props) {
 
   return (
     <StyledPegaDxilMyTwoColumnFormWrapper>
-      <Grid container={gridContainer}>
-       {children.map((child, i) => (
-        <Flex container={flexContainer} key={`r-${i + 1}`}>
-        {child}
-        </Flex>
-       ))}
-      </Grid>
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+        <Grid container={gridContainer}>
+        {children.map((child, i) => (
+          <Flex container={flexContainer} key={`r-${i + 1}`}>
+          {child}
+          </Flex>
+        ))}
+        </Grid>
+      </FieldGroup>
     </StyledPegaDxilMyTwoColumnFormWrapper>
   );
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/index.jsx

@@ -180,7 +180,7 @@ PegaDxilMyUrl.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyBoolean/index.jsx

@@ -65,7 +65,7 @@ const PegaDxilMyBoolean = props => {
     />
   );
 
-  const parentTestId = testId ? `${testId}-parent` : testId;
+  const parentTestId = testId === '' ? `${testId}-parent` : testId;
 
   let displayComponent;
   if (displayMode) {
@@ -138,13 +138,13 @@ PegaDxilMyBoolean.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   additionalProps: {},
   displayMode: null,
   variant: 'inline',
   displayValue: 'Yes/No',
   trueLabel: '',
-  falseLabel: ''
+  falseLabel: '',
 };
 
 PegaDxilMyBoolean.propTypes = {

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCaseWidget/config.json

@@ -18,6 +18,6 @@
     }
   ],
   "defaultConfig": {
-     "label": "@L $this.label"
+     "label": "@L My Case Widget"
   }
 }

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCurrency/index.jsx

@@ -248,7 +248,7 @@ PegaDxilMyCurrency.defaultProps = {
   allowDecimals: true,
   currencyISOCode: 'USD',
   isoCodeSelection: 'constant',
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/config.json

@@ -141,7 +141,11 @@
             },
             {
               "key": "DateTime-Long",
-              "value": "Date Time"
+              "value": "Date (Long)"
+            },
+            {
+              "key": "DateTime-Short",
+              "value": "Date (Short)"
             },
             {
               "key": "DateTime-Since",

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/index.jsx

@@ -182,6 +182,7 @@ const PegaDxilMyDate = props => {
       </StyledPegaDxilMyDateWrapper>
     );
   } else {
+
     dateComponent = (
       <StyledPegaDxilMyDateWrapper>
       <DateInput
@@ -222,7 +223,7 @@ PegaDxilMyDate.defaultProps = {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   showAsFormattedText: false,
   additionalProps: {},
   displayMode: null,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDateTime/index.jsx

@@ -218,7 +218,7 @@ PegaDxilMyDateTime.defaultProps = {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   additionalProps: {},
   displayMode: null,
   variant: "inline",

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDecimal/index.jsx

@@ -222,7 +222,7 @@ PegaDxilMyDecimal.defaultProps = {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: "",
   decimalPrecision: '',
   showGroupSeparators: false,
   displayMode: null,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/demo.stories.jsx

@@ -88,6 +88,9 @@ export const basePegaDxilMyDetails = () => {
         getRawMetadata: () => {
           return pyReviewRaw;
         },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
         getInheritedProps: () => {
           return pyReviewRaw.config.inheritedProps;
         },