@pega/custom-dx-components 0.23.48 → 0.23.50

package/src/util.js

@@ -9,7 +9,7 @@ import chalk from 'chalk';
 import mustache from 'mustache';
 import pascalCase from 'pascalcase';
 import fetch from 'node-fetch';
-import checkGit from 'check-git';
+// import checkGit from 'check-git';
 
 import * as currentPath from './currentPath.cjs';
 import {
@@ -33,14 +33,12 @@ export const checkPathAccess = async (path, options = {}, throwError = false) =>
   } catch (err) {
     if (throwError) {
       throw new Error(err);
-    }
-    else {
+    } else {
       const message =
         errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
       console.error(message);
       process.exit(1);
     }
-
   }
 };
 
@@ -51,8 +49,7 @@ export const getUseWebPackPromotion = async () => {
   try {
     // force to throw error and not console log
     await checkPathAccess(pegaConfigJsonPath, {}, true);
-  }
-  catch (ex) {
+  } catch (ex) {
     // when can't find it, always be false, assume no webpack override.
     // This is IMPORTANT for init (npx install)
     return false;
@@ -75,10 +72,9 @@ export const getUseWebPackPromotion = async () => {
   }
 
   return data[USE_PROMOTED_WEB_PACK];
+};
 
-}
-
-export const updateUseWebPackPromotion = async ( useValue = false ) => {
+export const updateUseWebPackPromotion = async (useValue = false) => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -94,11 +90,10 @@ export const updateUseWebPackPromotion = async ( useValue = false ) => {
     process.exit(1);
   }
 
-  data["usePromotedWebPack"] = useValue;
+  data.usePromotedWebPack = useValue;
 
   fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(data, null, 4), { encoding: 'utf8' });
-
-}
+};
 
 export const deleteLocalComponent = async componentKey => {
   const currentDirectory = process.cwd();
@@ -262,6 +257,23 @@ export const getComponentDefaults = async () => {
   return config.component;
 };
 
+export const getServerType = async () => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  return defaultPegaServerConfig.serverType;
+};
+
+export const setServerType = async serverType => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+  const configData = await getPegaConfig();
+  const serverConfig = configData['server-config'];
+  serverConfig.serverType = serverType;
+
+  // update file
+  // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
+  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(configData, null, 4), { encoding: 'utf8' });
+};
+
 export const getComponentDirectoryPath = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
@@ -350,12 +362,12 @@ export const showVersion = () => {
     process.exit(1);
   }
 
-  const hasGit = checkGit(process.cwd());
+  // const hasGit = checkGit(process.cwd());
 
-  if (!hasGit) {
-    console.log(chalk.redBright('DX Component Builder - Git needs to be installed.'));
-    process.exit(1);
-  }
+  // if (!hasGit) {
+  //   console.log(chalk.redBright('DX Component Builder - Git needs to be installed.'));
+  //   process.exit(1);
+  // }
 };
 
 export const getOOTBComponents = async () => {
@@ -435,55 +447,37 @@ export const deleteInfinityServerComponent = async componentKey => {
       status = response.status;
       if (!response.ok) {
         if (status === 401) {
-          throw new Error(
-            'Error occurred in authentication. Please regenerate using authenticate'
-          );
+          throw new Error('Error occurred in authentication. Please regenerate using authenticate');
           // console.log(accessTokenUri, refreshToken);
           /* TODO - Handle refresh_token */
-        }
-        else if (status === 404){
+        } else if (status === 404) {
           throw new Error('404: Server resource not found');
-        }
-        else if (status === 405){
+        } else if (status === 405) {
           throw new Error('405: Server method not allowed');
-        }
-        else if (status === 408){
+        } else if (status === 408) {
           throw new Error('408: Server timed out');
+        } else if (response.status === 403) {
+          throw new Error('Error forbidden: User does not have privileges to Publish.');
         }
-        else if (response.status === 403) {
-          throw new Error(
-            'Error forbidden: User does not have privileges to Publish.'
-          );
-        }
-
-
       }
 
       try {
         const respData = await response.json();
-        console.log(
-              chalk.bold.green(`Success : ${respData.message}`)
-        );
+        console.log(chalk.bold.green(`Success : ${respData.message}`));
 
         if (status === 500) {
           status = 999;
           throw new Error(respData.message);
         }
-      }
-      catch (err) {
+      } catch (err) {
         if (status === 500) {
-            throw new Error(
-             `Error occurred in authentication. Please regenerate using authenticate`
-            );
-        }
-        else if (status === 999) {
-          throw new Error (err);
+          throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
+        } else if (status === 999) {
+          throw new Error(err);
         }
       }
-
     }
   } catch (error) {
-
     throw new Error(error);
   }
 };
@@ -515,7 +509,6 @@ export const deleteLaunchpadServerComponent = async componentKey => {
         componentName
       };
 
-
       const response = await fetch(deleteUrl, {
         method: 'DELETE',
         agent: new https.Agent({ rejectUnauthorized: false }),
@@ -526,47 +519,33 @@ export const deleteLaunchpadServerComponent = async componentKey => {
       status = response.status;
       if (!response.ok) {
         if (status === 401) {
-          throw new Error(
-            'Error occurred in authentication. Please regenerate using authenticate'
-          );
+          throw new Error('Error occurred in authentication. Please regenerate using authenticate');
           // console.log(accessTokenUri, refreshToken);
           /* TODO - Handle refresh_token */
-        }
-        else if (status === 404){
+        } else if (status === 404) {
           throw new Error('404: Server resource not found');
-        }
-        else if (status === 405){
+        } else if (status === 405) {
           throw new Error('405: Server method not allowed');
-        }
-        else if (status === 408){
+        } else if (status === 408) {
           throw new Error('408: Server timed out');
-        }
-        else if (response.status === 403) {
-          throw new Error(
-            'Error forbidden: User does not have privileges to Publish.'
-          );
+        } else if (response.status === 403) {
+          throw new Error('Error forbidden: User does not have privileges to Publish.');
         }
       }
 
       try {
         const respData = await response.text();
-        console.log(
-              chalk.bold.green(`Success : ${respData}`)
-        );
+        console.log(chalk.bold.green(`Success : ${respData}`));
 
         if (status === 500) {
           status = 999;
           throw new Error(respData.message);
         }
-      }
-      catch (err) {
+      } catch (err) {
         if (status === 500) {
-            throw new Error(
-             `Error occurred in authentication. Please regenerate using authenticate`
-            );
-        }
-        else if (status === 999) {
-          throw new Error (err);
+          throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
+        } else if (status === 999) {
+          throw new Error(err);
         }
       }
     }

package/tests/assets/components/create/Pega_DXIL_MyTestText/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/create/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -59,6 +59,7 @@ export const BasePegaDxilMyTestText: Story = args => {
 BasePegaDxilMyTestText.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -1,6 +1,7 @@
 import { Input, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyTestTextWrapper from './styles';
 

package/tests/assets/components/create/_components.md

@@ -0,0 +1 @@
+# directory for components #

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/demo.stories.tsx

@@ -69,6 +69,7 @@ export const BasePegaDxilMyBoolean: Story = args => {
 BasePegaDxilMyBoolean.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  caption: configProps.caption,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -7,6 +7,8 @@ import {
 } from "@pega/cosmos-react-core";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
+
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -104,7 +106,7 @@ function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <StyledPegaDxilMyBooleanWrapper> displayComponent </StyledPegaDxilMyBooleanWrapper>);
+    return ( <StyledPegaDxilMyBooleanWrapper> {displayComponent} </StyledPegaDxilMyBooleanWrapper>);
   }
 
   if (displayMode === "LABELS_LEFT") {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Table, Text, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyCaseWidgetWrapper from './styles';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/demo.stories.tsx

@@ -61,6 +61,10 @@ export const BasePegaDxilMyCurrency: Story = args => {
 BasePegaDxilMyCurrency.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
+  allowDecimals: configProps.allowDecimals,
+  currencyISOCode: configProps.currencyISOCode,
+  alwaysShowISOCode: configProps.alwaysShowISOCode,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -12,6 +12,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';
@@ -86,6 +87,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
   const [currencyValue, setCurrencyValue] = useState(() => formatValue(value));
 
   let { readOnly = false, required = false, disabled = false } = props;
+  let { showGroupSeparators = false } = props;
 
   [readOnly, required, disabled] = [readOnly, required, disabled].map(
     (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
@@ -120,7 +122,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     displayMode === 'DISPLAY_ONLY'
   ) {
     let displayComp;
-    let { showGroupSeparators = false } = props;
+    // let { showGroupSeparators = false } = props;
     if (displayMode === 'LABELS_LEFT' && isTableFormatter) {
       noOfFractionDigits = undefined;
       showGroupSeparators = true;
@@ -188,7 +190,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyCurrencyWrapper> displayComp </StyledPegaDxilMyCurrencyWrapper>) ;
+        return (<StyledPegaDxilMyCurrencyWrapper> {displayComp} </StyledPegaDxilMyCurrencyWrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (
@@ -242,6 +244,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
       showDecimal={allowDecimals}
       currencyISOCode={currencyISOCode}
       alwaysShowISOCode={alwaysShowISOCode}
+      showGroupSeparators={showGroupSeparators}
       placeholder={placeholder}
       disabled={disabled}
       readOnly={readOnly}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/mock.ts

@@ -5,6 +5,7 @@ export const configProps = {
   label: 'Currency Sample',
   currencyISOCode: 'USD',
   allowDecimals: true,
+  showGroupSeparators: true,
   alwaysShowISOCode: true,
   placeholder: 'Currency Placeholder',
   helperText: 'Currency Helper Text',

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/demo.stories.tsx

@@ -85,6 +85,7 @@ export const BasePegaDxilMyDate: Story = args => {
 BasePegaDxilMyDate.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showWeekNumber: configProps.showWeekNumber,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -3,6 +3,7 @@ import { DateInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } f
 import FormattedText from "./FormattedText";
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyDateWrapper from './styles';
 
@@ -175,7 +176,7 @@ function PegaDxilMyDate (props: PegaDxilMyDateProps)  {
     );
     switch(displayMode){
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateWrapper> displayComp </StyledPegaDxilMyDateWrapper>);
+        return ( <StyledPegaDxilMyDateWrapper> {displayComp} </StyledPegaDxilMyDateWrapper>);
       }
       case "LABELS_LEFT" : {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/demo.stories.tsx

@@ -84,6 +84,8 @@ export const BasePegaDxilMyDateTime: Story = args => {
 BasePegaDxilMyDateTime.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  withSeconds: configProps.withSeconds,
+  showWeekNumber: configProps.showWeekNumber,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import DateTimeFormatter from "./date-time";
@@ -181,7 +182,7 @@ function PegaDxilMyDateTime (props: PegaDxilMyDateTimeProps)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyDateTimeWrapper> displayComp </StyledPegaDxilMyDateTimeWrapper>);
+        return ( <StyledPegaDxilMyDateTimeWrapper> {displayComp} </StyledPegaDxilMyDateTimeWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/demo.stories.tsx

@@ -57,6 +57,8 @@ export const BasePegaDxilMyDecimal: Story = args => {
 BasePegaDxilMyDecimal.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { NumberInput, NumberDisplay, CurrencyDisplay, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import StyledPegaDxilMyDecimalWrapper from './styles';
@@ -158,7 +159,7 @@ function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyDecimalWrapper> displayComp </StyledPegaDxilMyDecimalWrapper>);
+        return (<StyledPegaDxilMyDecimalWrapper> {displayComp} </StyledPegaDxilMyDecimalWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

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

@@ -146,7 +146,4 @@ export const BasePegaDxilMyDetails: Story = args => {
   );
 };
 
-BasePegaDxilMyDetails.args = {
-  label: 'Test Details',
-  showLabel: true
-};
+BasePegaDxilMyDetails.args = {};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/index.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from 'react';
 import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyDetailsWrapper from './styles';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/demo.stories.tsx

@@ -56,6 +56,7 @@ export const BasePegaDxilMyEmail: Story = args => {
 BasePegaDxilMyEmail.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { Input, EmailDisplay, FieldValueList, Text, URLDisplay, PhoneDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { suggestionsHandler } from './suggestions-handler';
@@ -128,7 +129,7 @@ function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyEmailWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyEmailWrapper>
     ) : (
       <StyledPegaDxilMyEmailWrapper>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

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

@@ -1,7 +1,7 @@
 import { Grid, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
-
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyFormWrapper from './styles';
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/demo.stories.tsx

@@ -56,6 +56,7 @@ export const BasePegaDxilMyInteger: Story = args => {
 BasePegaDxilMyInteger.args = {
   label: configProps.label,
   helperText: configProps.helperText,
+  showGroupSeparators: configProps.showGroupSeparators,
   testId: configProps.testId,
   readOnly: configProps.readOnly,
   disabled: configProps.disabled,

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

@@ -3,6 +3,7 @@ import { NumberInput, NumberDisplay, Slider, FieldValueList, CurrencyDisplay, Te
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -184,7 +185,7 @@ function PegaDxilMyInteger(props: PegaDxilMyIntegerProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyIntegerWrapper> displayComp </StyledPegaDxilMyIntegerWrapper>);
+        return (<StyledPegaDxilMyIntegerWrapper> {displayComp} </StyledPegaDxilMyIntegerWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/mock.ts

@@ -3,7 +3,6 @@ export const configProps = {
   value: '',
   label: 'Integer Sample',
   showGroupSeparators: true,
-  placeholder: 'Integer Placeholder',
   helperText: 'Integer Helper Text',
   testId: 'integer-12345678',
   hasSuggestions: false,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/index.tsx

@@ -3,7 +3,7 @@ import { OneColumnPage as OneColumn, withConfiguration } from '@pega/cosmos-reac
 import { ConfigurableLayout } from '@pega/cosmos-react-work'
 // import { registerIcon } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
-
+import './create-nonce';
 
 
 // temp

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/create-nonce.ts

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/index.tsx

@@ -4,6 +4,7 @@ import { Fragment } from 'react';
 import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import Operator from './Operator';