@pega/custom-dx-components 2.0.24 → 8.4.2

package/package.json

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

package/src/auth.js

@@ -58,8 +58,8 @@ class PegaAuth {
 
     // For PKCE the authorize includes a code_challenge & code_challenge_method as well
     async #buildAuthorizeUrl(state) {
-        const { serverType, clientId, redirectUri, authorizeUri, authService, sessionIndex, appAlias, userIdentifier, password, noPKCE } =
-            this.config;
+        const { serverType, clientId, redirectUri, authorizeUri, authService, sessionIndex, appAlias,
+            userIdentifier, password, noPKCE, isolationId } = this.config;
 
         if (!noPKCE) {
             // Generate random string of 64 chars for verifier.  RFC 7636 says from 43-128 chars
@@ -93,7 +93,7 @@ class PegaAuth {
             (sessionIndex && this.config.sessionIndexAttempts < 3 ? `&session_index=${sessionIndex}` : '') +
             (userIdentifier
                 ? `&UserIdentifier=${encodeURIComponent(userIdentifier)}${password ? `&Password=${encodeURIComponent(this.#atob(password))}` : ''}` : '')
-            : '');
+            : `&isolationID=${isolationId}`);
 
         let pkceArgs = '';
         if (!noPKCE) {
@@ -285,10 +285,10 @@ class PegaAuth {
                         const nSlash = redirectUri.indexOf('/', nLocalhost + 10);
                         const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash));
                         if (-1 !== nLocalhost) {
-                            const options = isHttp ? {} : {
+                            const options = key && cert && !isHttp ? {
                                 key: fs.readFileSync(key),
                                 cert: fs.readFileSync(cert)
-                            };
+                            } : {};
                             const server = (isHttp ? http : https).createServer(options, (req, res) => {
                                 const { method, url } = req;
                                 const { winTitle, winBodyHtml } = this.config;

package/src/cli.js

@@ -4,13 +4,16 @@ import chalk from 'chalk';
 import {
   authenticate,
   buildComponent,
+  buildAllComponents,
   createComponent,
+  createAllComponents,
   deleteComponent,
   deleteAllComponents,
   initProject,
   listComponents,
   publishComponent,
   publishAllComponents,
+  renameComponent,
   updateComponent,
   validate,
   upgrade
@@ -19,9 +22,12 @@ import {
 const TASKS = {
   INIT: 'init',
   CREATE: 'create',
+  CREATE_ALL: 'createAll',
   BUILD: 'buildComponent',
+  BUILD_ALL: 'buildAllComponents',
   PUBLISH: 'publish',
   PUBLISH_All: 'publishAll',
+  RENAME: 'rename',
   LIST: 'list',
   VALIDATE_SCHEMA: 'validateSchema',
   UPDATE: 'update',
@@ -62,6 +68,10 @@ export default async (args = []) => {
       createComponent(options);
       break;
     }
+    case TASKS.CREATE_ALL: {
+      createAllComponents(options);
+      break;
+    }
     case TASKS.PUBLISH: {
       publishComponent(options);
       break;
@@ -70,10 +80,18 @@ export default async (args = []) => {
       publishAllComponents(options);
       break;
     }
+    case TASKS.RENAME: {
+      renameComponent(options);
+      break;
+    }
     case TASKS.BUILD: {
       buildComponent(options);
       break;
     }
+    case TASKS.BUILD_ALL: {
+      buildAllComponents(options);
+      break;
+    }
     case TASKS.LIST: {
       listComponents(options);
       break;

package/src/constants.js

@@ -2,6 +2,7 @@
 export const TASKS_CONFIG_JSON_FILENAME = 'tasks.config.json';
 export const BUILD_CONFIG_JSON_FILENAME = 'build.config.json';
 export const COMPONENTS_DIRECTORY_PATH = 'components-directory-path';
+export const COMPONENTS_PATH = 'component'
 export const TOKEN_PATH = 'node_modules/@pega/custom-dx-components/.access_token';
 export const OOTB_COMPONENTS = 'node_modules/@pega/custom-dx-components/.ootb_components';
 
@@ -14,6 +15,18 @@ export const INF_TOKEN_URL_V1 = 'PRRestService/oauth2/v1/token';
 export const INF_AUTHORIZE_URL_V1 = 'PRRestService/oauth2/v1/authorize';
 export const LP_TOKEN_URL = 'uas/oauth/token';
 export const LP_AUTHORIZE_URL = 'uas/oauth/authorize';
+export const LP_LIST_COMPONENT_SERVICE_REST_ENDPOINT = 'pegalaunchpad/c11n/v103/app/appstudiox/componentslist';
+
+
+export const FIELD_PATH = '/field';
+export const TEMPLATE_PATH = '/template';
+export const WIDGET_PATH = '/widget';
+
+export const COMPONENT_PREFIX_FIELD_PATH = "field/";
+export const COMPONENT_PREFIX_TEMPLATE_PATH = "template/";
+export const COMPONENT_PREFIX_WIDGET_PATH = "widget/";
+
+export const CATEGORY_CONSTELLATION = "constellation";
 
 export const AUTHENTICATE_SCHEMA = {
   serverType: [
@@ -138,7 +151,28 @@ export const COMPONENT_SCHEMA = {
         value: 'Picklist'
       }
     ],
-    template: ['DETAILS', 'DETAILS-region', 'FORM', 'FORM-region', 'PAGE'],
+    template: [
+      {
+        name: 'DETAILS',
+        value: 'DETAILS'
+      },
+      {
+        name: 'DETAILS region',
+        value: 'DETAILS-region'
+      },
+      {
+        name: 'FORM',
+        value: 'FORM'
+      },
+      {
+        name: 'FORM region',
+        value: 'FORM-region'
+      },
+      {
+        name: 'PAGE',
+        value: 'PAGE'
+      }
+    ],
     widget: [
       {
         name: 'CASE',

package/src/tasks/authenticate/index.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import fs from 'fs';
+import fs from 'node:fs';
 
 import chalk from 'chalk';
 import inquirer from 'inquirer';
@@ -18,13 +18,37 @@ let server = null;
 const generateAccessToken = async config => {
 
   let authSuccess = false;
-  const { serverType, isolationId, grantType, clientId, clientSecret, user, password } = config;
+  const { serverType, authService, isolationId, grantType, clientId, clientSecret, user, password } = config;
+  // Try to gracefully deal with missing trailing slashes for server (and later conditionally for redirectUri)
   const server = config.server.endsWith('/') ? config.server : `${config.server}/`;
 
   return new Promise((resolve, reject) => {
     const sTokenUri = `${server}${serverType === 'infinity' ? INF_TOKEN_URL_V1 : LP_TOKEN_URL}`;
     const sAuthorizeUri = `${server}${serverType === 'infinity' ? INF_AUTHORIZE_URL_V1 : LP_AUTHORIZE_URL}`;
     // console.log(`grantType: ${config.grantType}`);
+    const browserAuthSuccessMarkup = `<div style="width: 300px; padding: 10px;">
+    <svg xmlns="http://www. w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 311 68" version="1.1">
+    <title>Logo</title>
+    <defs/>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <g id="pega_logo_horizontal_positive_rgb">
+                <path d="M136.36,17.098 L136.173,17.009 C136.154,16.998 133.96,16.01 132.245,17.815 L132.026,18.046 L135.539,19.768 L136.36,17.098 Z M152.441,36.389 C152.441,36.389 150.91,39.13 150.224,40.143 C149.535,41.164 147.38,41.798 145.517,40.908 C144.665,40.503 136.694,35.854 133.644,36.12 C118.205,37.466 113.999,31.105 113.503,30.527 C113.005,29.949 112.077,30.218 112.74,31.355 C116.127,37.163 126.15,39.856 126.15,39.856 C128.771,46.172 129.085,50.597 129.085,50.597 C126.489,48.574 123.687,46.869 120.714,45.453 C112.768,40.121 100.329,33.518 83.207,29.379 C84.191,15.797 91.044,-3.837 123.092,0.806 C123.092,0.806 129.522,1.86 133.809,4.824 C133.809,4.824 132.779,5.904 131.425,7.256 C130.071,8.605 131.569,9.471 131.569,9.471 L138.338,14.792 C138.417,17.607 138.533,18.396 140.651,20.944 C142.769,23.487 151.004,32.112 152.081,33.266 C153.329,34.6 152.441,36.389 152.441,36.389 Z M78.633,9.915 C76.938,16.897 77.068,23.049 77.939,28.221 C76.33,27.901 74.697,27.594 73.014,27.32 C37.94,21.612 27.361,38.899 31.455,52.916 C19.86,57.274 8.963,62.263 0.214,67.162 C13.98,34.146 43.896,5.087 69.145,1.268 C77.389,0.181 79.708,5.529 78.633,9.915 L78.633,9.915 Z" id="Fill-1" fill="#1F2555"/>
+                <path d="M83.492,40.09 C97.157,39.01 110.054,40.381 120.713,45.453 C112.768,40.121 100.329,33.518 83.206,29.379 C82.864,34.111 83.23,38.107 83.492,40.09 Z M81.52,40.262 C66.209,41.723 48.105,46.663 31.455,52.916 C27.361,38.899 37.941,21.612 73.014,27.32 C74.697,27.594 76.33,27.901 77.938,28.221 C78.77,33.166 80.276,37.228 81.52,40.262 L81.52,40.262 Z" id="Fill-2" fill="#00A6A7"/>
+                <path d="M286.63,35.039 L291.379,23.446 L296.129,35.039 L286.63,35.039 Z M287.854,14 L272.536,50 L280.553,50 L283.819,41.985 L298.938,41.985 L302.204,50 L310.427,50 L295.108,14 L287.854,14 Z M188.647,26.704 C188.647,29.787 186.335,32.153 182.375,32.153 L176.1,32.153 L176.1,21.149 L182.219,21.149 C186.181,21.149 188.647,23.052 188.647,26.601 L188.647,26.704 Z M182.889,14 L168.18,14 L168.18,50 L176.1,50 L176.1,39.2 L182.115,39.2 C190.19,39.2 196.673,34.878 196.673,26.547 L196.673,26.444 C196.673,19.09 191.48,14 182.889,14 Z M239.764,18.02 C235.989,21.708 234.075,26.376 234.075,31.896 C234.075,37.421 235.953,42.054 239.663,45.675 C243.366,49.292 248.022,51.123 253.503,51.123 C259.992,51.123 265.064,49.159 268.587,45.284 L268.769,45.08 L268.769,28.556 L253.112,28.556 L253.112,35.244 L261.279,35.244 L261.279,41.993 C259.164,43.252 256.525,43.891 253.429,43.891 C250.221,43.891 247.454,42.792 245.203,40.62 C242.958,38.458 241.819,35.527 241.819,31.926 C241.819,28.322 242.992,25.379 245.304,23.18 C247.624,20.972 250.538,19.852 253.966,19.852 C255.769,19.852 257.366,20.074 258.711,20.512 C259.973,20.922 261.251,21.667 262.517,22.712 L266.897,17.183 C264.586,15.147 260.427,12.467 253.503,12.467 C248.162,12.467 243.539,14.336 239.764,18.02 Z M210.336,35.604 L225.842,35.604 L225.842,28.556 L210.336,28.556 L210.336,21.042 L229.623,21.042 L229.623,14 L202.466,14 L202.466,50 L229.879,50 L229.879,42.955 L210.336,42.955 L210.336,35.604 L210.336,35.604 Z" id="Fill-3" fill="#1F2555"/>
+            </g>
+        </g>
+    </g>
+    </svg>
+    </div>
+    <div style="font-size: 2em; font-family: Arial; padding: 10px">
+    Authentication is complete!!
+    </div>
+    <div style="font-size: 13m; font-family: Arial; padding: 10px">
+    This browser tab or window may be closed.
+    </div>
+    <div style="padding: 10px;">
+    </div>`;
 
     const authCodeConfig = grantType === 'authCode' ? {
       authorizeUri: sAuthorizeUri,
@@ -32,12 +56,13 @@ const generateAccessToken = async config => {
       cert: config.cert,
       key: config.key,
       winTitle: 'DX Component Dev',
-      winBodyHtml: `Authentication is complete.  This browser window may be closed.`
+      winBodyHtml: browserAuthSuccessMarkup
     } : {};
 
     // Build auth config structure
     const authConfig = {
       serverType: serverType,
+      authService: authService,
       grantType: grantType,
       tokenUri: sTokenUri,
       clientId: clientId,
@@ -46,7 +71,6 @@ const generateAccessToken = async config => {
       ...authCodeConfig
     };
     if (serverType === 'infinity') {
-      authConfig.authService = 'pega';
       if (grantType !== 'clientCreds' && user && password) {
         authConfig.userIdentifier = user;
         authConfig.password = Buffer.from(password).toString('base64');
@@ -54,32 +78,43 @@ const generateAccessToken = async config => {
     }
     if (serverType === 'launchpad') {
       authConfig.isolationId = isolationId;
-      // authConfig.noPKCE = true;
+      authConfig.noPKCE = true;
     }
-    const auth = new PegaAuth(authConfig);
-    // console.log(`...about to invoke auth.login\n${JSON.stringify(authConfig)}`);
-
-    auth.login()
-      .then((token) => {
-        if (token?.token_type) {
-          fs.writeFile(TOKEN_PATH, JSON.stringify(token), err => {
-            if (err) {
-              console.error(err);
-              return reject(authSuccess);
-            }
-            console.log(`${chalk.bold.green('Authenticated successfully !!')}`);
-            authSuccess = true;
-            return resolve(authSuccess);
-          });
-        } else {
-          console.log(`${chalk.bold.red('Authentication failed:' + JSON.stringify(token.errors ? token.errors : token))}`);
+
+    try {
+      const auth = new PegaAuth(authConfig);
+      if (grantType === 'authCode') {
+        console.log(`${chalk.green('Awaiting authorization to complete (Ctrl-C to exit).  You may need to enter credentials within your default browser.')}`);
+      }
+      // console.log(`authConfig: ${JSON.stringify(authConfig)}`);
+
+      auth.login()
+        .then((token) => {
+          if (token?.token_type) {
+            fs.writeFile(TOKEN_PATH, JSON.stringify(token), err => {
+              if (err) {
+                console.error(err);
+                return reject(authSuccess);
+              }
+              console.log(`${chalk.bold.green('Authenticated successfully !!')}`);
+              authSuccess = true;
+              return resolve(authSuccess);
+            });
+          } else {
+            console.log(`${chalk.bold.red('Authentication failed:' + JSON.stringify(token.errors ? token.errors : token))}`);
+            return reject(authSuccess);
+          }
+        })
+        .catch((e) => {
+          console.log(`${chalk.bold.red('Authentication failed:' + e)}`);
           return reject(authSuccess);
-        }
-      })
-      .catch((e) => {
-        console.log(`${chalk.bold.red(e)}`);
-        return reject(authSuccess);
-      });
+        });
+
+    } catch (e) {
+      console.log(`Authentication failed: Problem initializing OAuth library`);
+      return reject(authSuccess);
+    }
+
   });
 };
 
@@ -110,13 +145,17 @@ export default async options => {
   // console.log(`questions: ${JSON.stringify(questions)}`);
   const answers = await inquirer.prompt(questions);
   const aProps = ['serverType', 'server', 'isolationId', 'clientId', 'grantType', 'clientSecret', 'user', 'password'];
+  serverConfig.authService = serverConfig.authService || 'pega';
   const isLaunchPad = answers.serverType === "launchpad";
   let bWriteUpdate = false;
   for (let i = 0; i < aProps.length; i += 1) {
     const prop = aProps[i];
-    if (serverConfig[prop] !== answers[prop]) {
-      // console.log(`property ${prop} changed from ${serverConfig[prop]} to ${answers[prop]}`);
-      serverConfig[prop] = answers[prop];
+    const configValue = serverConfig[prop];
+    const answerValue = answers[prop];
+    // Treat an empty serverConfig property value as same as an undefined answer response
+    if (configValue !== answerValue && !(configValue === '' && answerValue === undefined)) {
+      // console.log(`property ${prop} changed from ${configValue} to ${answerValue}`);
+      serverConfig[prop] = answerValue;
       if (prop !== 'password' || isPwdNonEmpty) {
         bWriteUpdate = true;
       }
@@ -127,6 +166,7 @@ export default async options => {
     // console.log(`serverConfig: ${JSON.stringify(serverConfig)}`);
     authOK = await generateAccessToken(serverConfig);
   } catch (e) {
+    console.log(`${chalk.bold.red('Authentication failed:' + JSON.stringify(e))}`);
   }
 
   if (authOK & bWriteUpdate) {
@@ -138,6 +178,7 @@ export default async options => {
     let updCfg = null;
     try {
       updCfg = JSON.stringify(data, null, 2);
+      // console.log(`updated config: ${updCfg}`);
       fs.writeFileSync(pegaConfigJsonPath, updCfg, err => {
         if (err) throw err;
       });

package/src/tasks/build/helper.js

@@ -103,7 +103,7 @@ export const publishComponentToServer = async data => {
           const respData = JSON.parse(resp);
           if (status === 401) {
             throw new Error(
-              'Error occured in authentication. Please regenerate using authenticate'
+              'Error occurred in authentication. Please regenerate using authenticate'
             );
             // console.log(accessTokenUri, refreshToken);
             /* TODO - Handle refresh_token */
@@ -115,9 +115,9 @@ export const publishComponentToServer = async data => {
         })
         .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
     } else {
-      throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+      throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
     }
   } catch (err) {
-    throw new Error(`Error occured in authentication. Please regenerate using authenticate`);
+    throw new Error(`Error occurred in authentication. Please regenerate using authenticate`);
   }
 };

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

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+
+import AdmZip from 'adm-zip';
+import chalk from 'chalk';
+
+import {
+  getComponentDirectoryPath,
+  getComponents,
+  getPegaServerConfig
+} from '../../util.js';
+import { COMPONENT_SCHEMA } from '../../constants.js';
+
+export const cleanUp = async () => {
+  fs.rm('dist/components', { recursive: true }, err => {
+    if (err) {
+      throw err;
+    }
+  });
+
+  fs.rm('lib', { recursive: true }, err => {
+    if (err) {
+      throw err;
+    }
+  });
+}
+
+
+
+export const getBuildComponentQuestions = async ()  => {
+  const components = await getComponents();
+  const defaultPegaConfig = await getPegaServerConfig();
+
+  if (components.length == 0) {
+    console.log(chalk.bold.yellow(`No components to build`));
+    process.exit(1);
+  }
+
+  return [
+    {
+      name: 'devBuild',
+      message: 'Generate development build ?',
+      default: defaultPegaConfig.devBuild
+    }
+  ];
+};
+
+
+
+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 zip = new AdmZip();
+
+  zip.addLocalFolder(srcDirectory, 'src/');
+  zip.addLocalFile(configJson);
+  zip.addLocalFolder(buildDirectory);
+  const zipContent = zip.toBuffer().toString('base64');
+
+  const configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
+  // fs.rmd('dist/components', { recursive: true }, err => {
+  //   if (err) {
+  //     throw err;
+  //   }
+  // });
+  return { zipContent, configContent };
+};

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

@@ -0,0 +1,79 @@
+import inquirer from 'inquirer';
+import Listr from 'listr';
+import chalk from 'chalk';
+
+import validate from '../validator/index.js';
+
+import bundleComponent from '../bundle/index.js';
+import lintComponent from '../linter/index.js';
+import { getBuildComponentQuestions, cleanUp } from './helper.js';
+import { getComponentDirectoryPath, showVersion, getComponentsObj } from '../../util.js';
+
+import { CATEGORY_CONSTELLATION } from '../../constants.js';
+
+
+export function getCustomTasks(componentKey, sourceMap, devBuild) {
+
+  const customTasks = new Listr(
+    [
+      {
+        title: 'Validate config schema',
+        task: async () => {
+          await validate(componentKey);
+        }
+      },
+      {
+        title: 'Lint component',
+        task: async () => {
+          const targetDirectory = await getComponentDirectoryPath(componentKey);
+          // console.log(`in buildComponent Lint component task: componentKey: ${componentKey} targetDirectory: ${targetDirectory}`);
+          await lintComponent(targetDirectory);
+        }
+      },
+      {
+        title: 'Bundle component',
+        task: async () => await bundleComponent(componentKey, sourceMap, devBuild),
+      }
+    ],
+    {
+      exitOnError: true
+    }
+  );
+
+  return customTasks;
+}
+
+
+
+
+export default async options => {
+  showVersion();
+
+  let category = CATEGORY_CONSTELLATION;
+
+  const components = await getComponentsObj();
+  const questions = await getBuildComponentQuestions();
+  const answers = await inquirer.prompt(questions);
+  const { sourceMap, devBuild } = answers;
+
+
+
+  var componentKey;
+
+
+  for (var index in components) {
+    componentKey = components[index].value;
+    console.log(chalk.bold.green("Building: " + components[index].name));
+
+    let myCustomTasks = getCustomTasks(componentKey, sourceMap, devBuild );
+
+    await myCustomTasks.run().catch(err => {
+        console.log(chalk.bold.red(err.toString()));
+    });
+  }
+
+
+  cleanUp();
+
+  return true;
+};

package/src/tasks/create/templates/Constellation/Field/Boolean/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Date/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/DateTime/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Decimal/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Integer/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Picklist/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Text/config.json.mustache

@@ -37,6 +37,20 @@
       "name": "required",
       "label": "Required",
       "format": "REQUIRED"
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
     }
   ],
   "defaultConfig": {

package/src/tasks/create/templates/Constellation/Field/Text/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Text-Email/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Text-Input/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Text-Phone/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/Text-URL/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });

package/src/tasks/create/templates/Constellation/Field/TimeofDay/styles.js.mustache

@@ -2,6 +2,6 @@ import styled, { css } from 'styled-components';
 
 export default styled.div(() => {
   return css`
-    margin: 8px 0;
+    margin: 0px 0px;
   `;
 });