@pega/custom-dx-components 0.23.49 → 0.23.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.23.49",
+  "version": "0.23.50",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/cli.js

@@ -18,7 +18,8 @@ import {
   promoteWebPack,
   updateComponent,
   validate,
-  upgrade
+  upgrade,
+  buildJestAssets
 } from './tasks/index.js';
 
 const TASKS = {
@@ -36,9 +37,10 @@ const TASKS = {
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
   DELETE: 'delete',
-  DELETE_ALL: "deleteAll",
+  DELETE_ALL: 'deleteAll',
   AUTHENTICATE: 'authenticate',
-  UPGRADE: 'upgrade'
+  UPGRADE: 'upgrade',
+  BUILD_JEST_ASSETS: 'buildJestAssets'
 };
 
 const parseArgumentsIntoOptions = rawArgs => {
@@ -132,6 +134,10 @@ export default async (args = []) => {
       upgrade(options);
       break;
     }
+    case TASKS.BUILD_JEST_ASSETS: {
+      buildJestAssets(options);
+      break;
+    }
     default: {
       console.log(chalk.red(`No task matched with ${task}`));
       break;

package/src/constants.js

@@ -39,6 +39,11 @@ export const BUILDER_DIR_FILE_PATH = '../bundle/builder';
 
 export const CATEGORY_CONSTELLATION = 'constellation';
 
+export const JEST_ASSETS_PATH = 'node_modules/@pega/custom-dx-components/tests/assets/components/';
+export const JEST_CREATE_PATH = 'create/';
+export const JEST_CREATE_ALL_CONSTELLATION_PATH = 'createAll/Constellation/';
+export const JEST_CREATE_ALL_LAUNCHPAD_PATH = 'createAll/Launchpad';
+
 export const AUTHENTICATE_DEFAULTS = {
   serverType: 'infinity',
   server: 'https://localhost:1080/prweb',

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

@@ -37,7 +37,7 @@ export const getBuildComponentQuestions = async ()  => {
 
   if (components.length == 0) {
     console.log(chalk.redBright("No components to build"));
-    process.exit(1);
+    process.exit();
   }
 
   return [

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

@@ -8,7 +8,7 @@ import chalk from 'chalk';
 import { constructCompleteUrl, getComponentDirectoryPath, getComponents, getPegaServerConfig, getHttpsAgent } from '../../util.js';
 import { PUBLISH_COMPONENT_SERVICE_REST_ENDPOINT, TOKEN_PATH } from '../../constants.js';
 
-export const getPublishComponentQuestions = async () => {
+export const getPublishComponentQuestions = async (componentKey) => {
   const components = await getComponents();
 
   if (components.length === 0) {
@@ -23,7 +23,9 @@ export const getPublishComponentQuestions = async () => {
       name: 'componentKey',
       type: 'rawlist',
       message: 'Select component to build',
-      choices: components
+      choices: components,
+      default: componentKey,
+      when: () => !componentKey
     },
     {
       name: 'sourceMap',

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

@@ -29,9 +29,15 @@ export default async options => {
     content = { componentKey, sourceMap, devBuild};
   }
   else {
-    const questions = await getPublishComponentQuestions();
+    // VS Code pluggin would send in the component
+    let paramComponentKey;
+    if (options.params.length == 4) {
+      paramComponentKey = options.params[3];
+    }
+
+    const questions = await getPublishComponentQuestions(paramComponentKey);
     const answers = await inquirer.prompt(questions);
-    ({ componentKey, sourceMap, devBuild } = answers);
+    ({ componentKey = paramComponentKey, sourceMap, devBuild } = answers);
 
     content = {
       ...answers

package/src/tasks/build-jest-assets/index.js

@@ -0,0 +1,171 @@
+import fs from 'fs';
+import path from 'path';
+import { join } from 'path';
+import inquirer from 'inquirer';
+import { Listr } from 'listr2';
+import chalk from 'chalk';
+
+import { showVersion, getServerType, setServerType, getSubComponents, deleteLocalComponent, checkPathAccess, getComponents } from '../../util.js';
+import createAll from '../create-all/index.js';
+import create from '../create/index.js';
+
+import { JEST_ASSETS_PATH, JEST_CREATE_PATH, JEST_CREATE_ALL_CONSTELLATION_PATH, JEST_CREATE_ALL_LAUNCHPAD_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH } from '../../constants.js';
+
+
+const getBuildAssetsQuestions = async ()  => {
+  const message = "\n**IMPORTANT** Building Jest Assets will remove any local components in your components directory!\n";
+  console.log(`${chalk.green.bold(message)}`);
+
+  return [
+    {
+      name: 'buildAssets',
+      type: 'confirm',
+      message: 'Generate Jest Assets ?',
+      default: false
+    }
+  ];
+};
+
+const deleteTestComponent = async(path, componentKey) => {
+  const directory = join(path, componentKey);
+
+  try {
+    fs.rmSync(directory, { recursive: true });
+    console.log(`${chalk.red.bold(componentKey)} is deleted from assets`);
+  } catch (err) {
+    console.log('no file');
+    throw new Error(`No such file ${componentKey}`);
+  }
+}
+
+const copyAssets = async(destinationPath) => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  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`
+    );
+    process.exit(1);
+  }
+
+  const srcDir = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
+
+  fs.cpSync(srcDir, destinationPath, { recursive: true});
+}
+
+const deleteAssets = async() => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  await checkPathAccess(pegaConfigJsonPath);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  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`
+    );
+    process.exit(1);
+  }
+  const localComponents = await getComponents();
+
+  for (const index in localComponents) {
+    const componentToDelete = localComponents[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH], componentToDelete);
+
+    try {
+      fs.rmSync(directory, { recursive: true });
+      console.log(`${chalk.red.bold(componentToDelete)} is deleted from Local`);
+    } catch (err) {
+        console.log('no file');
+        throw new Error(`No such file ${componentToDelete}`);
+    }
+  }
+}
+
+const createJestAssets = async(isLaunchPad = false) => {
+
+  // initially delete local assets
+  await deleteAssets();
+
+  // const framework = await getFramework();
+  let args  = [ '','', '', 'My', '0.0.1', 'DXIL', '', 'Pega'];
+  let myOptions = {};
+  myOptions["params"] = args;
+
+  await createAll(myOptions);
+
+  const jestCreateAllPath = isLaunchPad ? JEST_CREATE_ALL_LAUNCHPAD_PATH : JEST_CREATE_ALL_CONSTELLATION_PATH;
+
+  // goto Constellation
+  // get current test assets and delete them
+  let createAllPath = path.join(path.resolve(), JEST_ASSETS_PATH, jestCreateAllPath);
+  const fileList = await getSubComponents(createAllPath, '');
+
+  for (const index in fileList) {
+    const componentToDelete = fileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createAllPath, componentToDelete);
+  }
+
+  await copyAssets(createAllPath);
+  await deleteAssets();
+
+  args  = [ '','', '', 'Field', 'Text', 'MyTestText', 'My Test Text', '0.0.1','DXIL', '', 'My Test Text Description', 'Pega'];
+  myOptions = {};
+  myOptions["params"] = args;
+
+  await create(myOptions);
+
+  let createPath = path.join(path.resolve(), JEST_ASSETS_PATH, JEST_CREATE_PATH);
+  const myFileList = await getSubComponents(createPath, '');
+
+  for (const index in myFileList) {
+    const componentToDelete = myFileList[index];
+    // console.log(chalk.bold.green("Deleting: " + componentToDelete));
+    // eslint-disable-next-line no-await-in-loop
+    await deleteTestComponent(createPath, componentToDelete);
+  }
+
+  await copyAssets(createPath);
+  await deleteAssets();
+}
+
+
+export default async options => {
+  showVersion();
+
+  const questions = await getBuildAssetsQuestions();
+  const answers = await inquirer.prompt(questions);
+  const {  buildAssets } = answers;
+
+  if (buildAssets) {
+    // get current server type
+    const savedServerType = await getServerType();
+
+    // Constellation
+    await setServerType("infinity");
+    await createJestAssets(false);
+
+    //Launchpad
+    await setServerType("launchpad");
+    await createJestAssets(true);
+
+
+    // restore serverType
+    await setServerType(savedServerType);
+  }
+
+
+
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComponent </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+    return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComponent} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
   }
 
   if (displayMode === "LABELS_LEFT") {

package/src/tasks/create/templates/Constellation/Field/Date/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Date/index.tsx.mustache

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

package/src/tasks/create/templates/Constellation/Field/DateTime/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/DateTime/index.tsx.mustache

@@ -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 {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/Decimal/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal/index.tsx.mustache

@@ -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 Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -161,7 +162,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -12,6 +12,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';
@@ -192,7 +193,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>) ;
+        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';
@@ -168,7 +169,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Integer/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Integer/index.tsx.mustache

@@ -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";
@@ -187,7 +188,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
+        return (<Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/src/tasks/create/templates/Constellation/Field/Picklist/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Picklist/index.tsx.mustache

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -256,7 +257,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/index.tsx.mustache

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetSt
 import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Picklist-RadioButtons/index.tsx.mustache

@@ -2,6 +2,7 @@
 import { useMemo } from 'react';
 import { RadioButton, RadioButtonGroup, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { formatExists, textFormatter } from './textformat-utils';

package/src/tasks/create/templates/Constellation/Field/Text/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text/index.tsx.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Email/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Email/index.tsx.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Text-Input/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Input/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { Input, FieldValueList, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // include in bundle
 import handleEvent from "./event-utils";
@@ -143,7 +144,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       displayComp = textFormatter(formatter, value);
     }
     return displayMode === 'DISPLAY_ONLY' ? (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper> displayComp </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <FieldValueList

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/index.tsx.mustache

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { TextArea as CosmosTextArea, FieldValueList, ParagraphDisplay, Text, EmailDisplay, PhoneDisplay, URLDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import { suggestionsHandler } from './suggestions-handler';
@@ -126,7 +127,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Text-Phone/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
   withConfiguration
 } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -164,7 +165,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      displayComp
+      {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     ) : (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/Constellation/Field/Text-URL/create-nonce.ts.mustache

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

package/src/tasks/create/templates/Constellation/Field/Text-URL/index.tsx.mustache

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef} from "react";
 import { Input, FieldValueList, Text, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import {formatExists,textFormatter, urlFormatter} from "./text-url";