@pega/custom-dx-components 23.1.12 → 23.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "23.1.12",
+  "version": "23.1.14",
   "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-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/index.tsx.mustache

@@ -104,7 +104,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/index.tsx.mustache

@@ -175,7 +175,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/index.tsx.mustache

@@ -181,7 +181,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/index.tsx.mustache

@@ -161,7 +161,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/index.tsx.mustache

@@ -192,7 +192,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/index.tsx.mustache

@@ -168,7 +168,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/index.tsx.mustache

@@ -187,7 +187,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/index.tsx.mustache

@@ -256,7 +256,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-Email/index.tsx.mustache

@@ -128,7 +128,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/index.tsx.mustache

@@ -143,7 +143,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/index.tsx.mustache

@@ -126,7 +126,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/index.tsx.mustache

@@ -164,7 +164,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/TimeofDay/index.tsx.mustache

@@ -140,7 +140,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/index.js

@@ -15,3 +15,4 @@ export { default as authenticate } from './authenticate/index.js';
 export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build-comp/index.js';
 export { default as buildAllComponents } from './build-all/index.js';
+export { default as buildJestAssets } from './build-jest-assets/index.js';

package/src/tasks/init/template/package.json.mustache

@@ -28,6 +28,7 @@
     "_internal-test-full": "npm run _internal-test-functional && npm run _internal-test-unit",
     "_internal-test-functional": "npm run test:functional:local --prefix node_modules/@pega/custom-dx-components",
     "_internal-test-unit": "npm run test:unit:local --prefix node_modules/@pega/custom-dx-components",
+    "_internal-build-jest-assets": "custom-dx-components buildJestAssets",
     "_lint:styles": "stylelint \"./**/*.@(js|jsx|ts|tsx)\"",
     "_lint:format": "prettier -c .",
     "_lint:spelling": "cspell --no-progress **/*",
@@ -68,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "23.1.12",
+    "@pega/custom-dx-components": "23.1.14",
     "@pega/pcore-pconnect-typedefs": "~2.1.1",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/src/tasks/publish/helper.js

@@ -84,11 +84,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

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

@@ -70,11 +70,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/revert-webpack/index.js

@@ -1,50 +1,32 @@
-
 import fs from 'fs';
-import path, { join } from 'path';
-import { URL, fileURLToPath } from 'url';
+import path from 'path';
 
 import chalk from 'chalk';
-import { up } from 'inquirer/lib/utils/readline.js';
-
-import {
-  convertIntoPascalCase,
-  showVersion,
-  updateUseWebPackPromotion
-} from '../../util.js';
-import {
-  WEBPACK_CONFIG_JS_FILENAME,
-  BUILDER_INDEX_FILE_PATH
-} from '../../constants.js';
-
 
+import { showVersion, updateUseWebPackPromotion } from '../../util.js';
+import { WEBPACK_CONFIG_JS_FILENAME } from '../../constants.js';
 
 export const renamePromotedWebPack = async () => {
-
   // call this function from top level
   // fs.copyFileSync("./webpack.config.js", "webpack.config.js")
 
   const promoteWebPackDir = path.resolve(WEBPACK_CONFIG_JS_FILENAME);
-  const renamedPromoteWebPackDir = path.resolve(`${WEBPACK_CONFIG_JS_FILENAME  }.notused`);
+  const renamedPromoteWebPackDir = path.resolve(`${WEBPACK_CONFIG_JS_FILENAME}.notused`);
 
   try {
     fs.renameSync(promoteWebPackDir, renamedPromoteWebPackDir);
-  }
-  catch (ex) {
+  } catch (ex) {
     console.log(chalk.bold.red(`File ${promoteWebPackDir} not found.`));
     process.exit();
   }
 
-  console.log(chalk.bold.green("Bundler reverted to using internal webpack.config.js."));
+  console.log(chalk.bold.green('Bundler reverted to using internal webpack.config.js.'));
   console.log(chalk.bold.green(`File ${promoteWebPackDir} marked as not used.`));
+};
 
-}
-
-
-
-export default async options => {
+export default async () => {
   showVersion();
 
   await renamePromotedWebPack();
   await updateUseWebPackPromotion(false);
-
 };

package/src/util.js

@@ -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);
@@ -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/_components.md

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

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

@@ -104,7 +104,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_MyCurrency/index.tsx

@@ -189,7 +189,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyCurrencyWrapper> displayComp </StyledPegaDxilMyCurrencyWrapper>) ;
+        return (<StyledPegaDxilMyCurrencyWrapper> {displayComp} </StyledPegaDxilMyCurrencyWrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (

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

@@ -175,7 +175,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/index.tsx

@@ -181,7 +181,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/index.tsx

@@ -158,7 +158,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_MyEmail/index.tsx

@@ -128,7 +128,7 @@ function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyEmailWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyEmailWrapper>
     ) : (
       <StyledPegaDxilMyEmailWrapper>

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

@@ -184,7 +184,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_MyParagraph/index.tsx

@@ -126,7 +126,7 @@ function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyParagraphWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyParagraphWrapper>
     ) : (
       <StyledPegaDxilMyParagraphWrapper>

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

@@ -165,7 +165,7 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPercentageWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPercentageWrapper>
     ) : (
       <StyledPegaDxilMyPercentageWrapper>

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

@@ -164,7 +164,7 @@ function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPhoneWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPhoneWrapper>
     ) : (
       <StyledPegaDxilMyPhoneWrapper>

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

@@ -256,7 +256,7 @@ function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPicklistWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPicklistWrapper>
     ) : (
       <StyledPegaDxilMyPicklistWrapper>

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

@@ -143,7 +143,7 @@ function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
       displayComp = textFormatter(formatter, value);
     }
     return displayMode === 'DISPLAY_ONLY' ? (
-      <StyledPegaDxilMyTextInputWrapper> displayComp </StyledPegaDxilMyTextInputWrapper>
+      <StyledPegaDxilMyTextInputWrapper> {displayComp} </StyledPegaDxilMyTextInputWrapper>
     ) : (
       <StyledPegaDxilMyTextInputWrapper>
       <FieldValueList

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

@@ -140,7 +140,7 @@ function PegaDxilMyTimeOfDay (props: PegaDxilMyTimeOfDayProps)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyTimeOfDayWrapper> displayComp </StyledPegaDxilMyTimeOfDayWrapper>);
+        return ( <StyledPegaDxilMyTimeOfDayWrapper> {displayComp} </StyledPegaDxilMyTimeOfDayWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Constellation/_components.md

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

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

@@ -104,7 +104,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/Launchpad/Pega_DXIL_MyCurrency/index.tsx

@@ -189,7 +189,7 @@ function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return (<StyledPegaDxilMyCurrencyWrapper> displayComp </StyledPegaDxilMyCurrencyWrapper>) ;
+        return (<StyledPegaDxilMyCurrencyWrapper> {displayComp} </StyledPegaDxilMyCurrencyWrapper>) ;
       }
       case 'LABELS_LEFT': {
         return (

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

@@ -175,7 +175,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/Launchpad/Pega_DXIL_MyDateTime/index.tsx

@@ -181,7 +181,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/Launchpad/Pega_DXIL_MyDecimal/index.tsx

@@ -158,7 +158,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/Launchpad/Pega_DXIL_MyEmail/index.tsx

@@ -128,7 +128,7 @@ function PegaDxilMyEmail(props: PegaDxilMyEmailProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyEmailWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyEmailWrapper>
     ) : (
       <StyledPegaDxilMyEmailWrapper>

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

@@ -184,7 +184,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/Launchpad/Pega_DXIL_MyParagraph/index.tsx

@@ -126,7 +126,7 @@ function PegaDxilMyParagraph(props: PegaDxilMyParagraphProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyParagraphWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyParagraphWrapper>
     ) : (
       <StyledPegaDxilMyParagraphWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPercentage/index.tsx

@@ -165,7 +165,7 @@ function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPercentageWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPercentageWrapper>
     ) : (
       <StyledPegaDxilMyPercentageWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPhone/index.tsx

@@ -164,7 +164,7 @@ function PegaDxilMyPhone(props: PegaDxilMyPhoneProps) {
     }
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPhoneWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPhoneWrapper>
     ) : (
       <StyledPegaDxilMyPhoneWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPicklist/index.tsx

@@ -256,7 +256,7 @@ function PegaDxilMyPicklist(props: PegaDxilMyPicklistProps) {
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <StyledPegaDxilMyPicklistWrapper>
-      displayComp
+      {displayComp}
       </StyledPegaDxilMyPicklistWrapper>
     ) : (
       <StyledPegaDxilMyPicklistWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/index.tsx

@@ -143,7 +143,7 @@ function PegaDxilMyTextInput(props: PegaDxilMyTextInputProps) {
       displayComp = textFormatter(formatter, value);
     }
     return displayMode === 'DISPLAY_ONLY' ? (
-      <StyledPegaDxilMyTextInputWrapper> displayComp </StyledPegaDxilMyTextInputWrapper>
+      <StyledPegaDxilMyTextInputWrapper> {displayComp} </StyledPegaDxilMyTextInputWrapper>
     ) : (
       <StyledPegaDxilMyTextInputWrapper>
       <FieldValueList

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/index.tsx

@@ -140,7 +140,7 @@ function PegaDxilMyTimeOfDay (props: PegaDxilMyTimeOfDayProps)  {
     );
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
-        return ( <StyledPegaDxilMyTimeOfDayWrapper> displayComp </StyledPegaDxilMyTimeOfDayWrapper>);
+        return ( <StyledPegaDxilMyTimeOfDayWrapper> {displayComp} </StyledPegaDxilMyTimeOfDayWrapper>);
       }
       case 'LABELS_LEFT': {
         return (

package/tests/assets/components/createAll/Launchpad/_components.md

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