@pega/custom-dx-components 23.1.10 → 23.1.12

package/src/util.js

@@ -19,24 +19,66 @@ import {
   OOTB_COMPONENT_SERVICE_REST_ENDPOINT,
   DELETE_COMPONENT_SERVICE_REST_ENDPOINT,
   LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT,
-  OOTB_COMPONENTS
+  OOTB_COMPONENTS,
+  USE_PROMOTED_WEB_PACK
 } from './constants.js';
 
 const access = promisify(fs.access);
 
-export const checkPathAccess = async (path, options = {}) => {
+export const checkPathAccess = async (path, options = {}, throwError = false) => {
   const { errorMessage } = options;
 
   try {
     await access(path, fs.constants.R_OK);
   } catch (err) {
-    const message = errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
-    console.error(message);
-    process.exit(1);
+    if (throwError) {
+      throw new Error(err);
+    }
+    else {
+      const message =
+        errorMessage || `${chalk.red.bold('ERROR')} Could not able to access path - ${path}`;
+      console.error(message);
+      process.exit(1);
+    }
+
   }
 };
 
-export const deleteLocalComponent = async (componentKey) => {
+export const getUseWebPackPromotion = async () => {
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  try {
+    // force to throw error and not console log
+    await checkPathAccess(pegaConfigJsonPath, {}, true);
+  }
+  catch (ex) {
+    // when can't find it, always be false, assume no webpack override.
+    // This is IMPORTANT for init (npx install)
+    return false;
+  }
+
+  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);
+  }
+
+  if (data[USE_PROMOTED_WEB_PACK] == null) {
+    // value doesn't exist in task config, so add it with default of false
+    data[USE_PROMOTED_WEB_PACK] = false;
+    await updateUseWebPackPromotion(false);
+  }
+
+  return data[USE_PROMOTED_WEB_PACK];
+
+}
+
+export const updateUseWebPackPromotion = async ( useValue = false ) => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -46,7 +88,31 @@ export const deleteLocalComponent = async (componentKey) => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
+    process.exit(1);
+  }
+
+  data["usePromotedWebPack"] = useValue;
+
+  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(data, null, 4), { encoding: 'utf8' });
+
+}
+
+export const deleteLocalComponent = async componentKey => {
+  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);
   }
 
@@ -61,7 +127,7 @@ export const deleteLocalComponent = async (componentKey) => {
   }
 };
 
-export const getHttpsAgent = (serverConfig) => {
+export const getHttpsAgent = serverConfig => {
   const agentOptions = { rejectUnauthorized: false };
   if (serverConfig.legacyTLS) {
     agentOptions.secureOptions = crypto.constants.SSL_OP_LEGACY_SERVER_CONNECT;
@@ -69,7 +135,7 @@ export const getHttpsAgent = (serverConfig) => {
   return new https.Agent(agentOptions);
 };
 
-export const deleteServerComponent = async (componentKey) => {
+export const deleteServerComponent = async componentKey => {
   const serverConfig = await getPegaServerConfig();
   const { server, user, password } = serverConfig;
   const url = constructCompleteUrl(server, DELETE_COMPONENT_SERVICE_REST_ENDPOINT);
@@ -79,7 +145,11 @@ export const deleteServerComponent = async (componentKey) => {
     const OauthData = fs.readFileSync(TOKEN_PATH, 'utf8');
 
     if (OauthData) {
-      const { access_token: accessToken, token_type: tokenType, refresh_token: refreshToken } = JSON.parse(OauthData);
+      const {
+        access_token: accessToken,
+        token_type: tokenType,
+        refresh_token: refreshToken
+      } = JSON.parse(OauthData);
       fetch(deleteUrl, {
         method: 'DELETE',
         agent: getHttpsAgent(serverConfig),
@@ -87,8 +157,8 @@ export const deleteServerComponent = async (componentKey) => {
           Authorization: `${tokenType} ${accessToken}`
         }
       })
-        .then((response) => response.text())
-        .then((resp) => {
+        .then(response => response.text())
+        .then(resp => {
           let respData;
           try {
             respData = JSON.parse(resp);
@@ -103,7 +173,7 @@ export const deleteServerComponent = async (componentKey) => {
             throw new Error(`${respData.message}`);
           }
         })
-        .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+        .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
     }
   } catch (error) {
     console.log(`\n${chalk.bold.red(error)}`);
@@ -121,30 +191,32 @@ export const getComponents = async () => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not find components directory path in config.json`
+    );
     process.exit(1);
   }
 
   const directory = join(currentDirectory, data[COMPONENTS_DIRECTORY_PATH]);
   return fs
     .readdirSync(directory, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
 export const getSubComponents = async (directory, type) => {
   const subDirectory = join(directory, type);
   return fs
     .readdirSync(subDirectory, { withFileTypes: true })
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
-export const getDirectoryFiles = async (directory) => {
+export const getDirectoryFiles = async directory => {
   return fs
     .readdirSync(directory, { withFileTypes: true })
-    .filter((dirent) => !dirent.isDirectory())
-    .map((dirent) => dirent.name);
+    .filter(dirent => !dirent.isDirectory())
+    .map(dirent => dirent.name);
 };
 
 export const getComponentsObj = async () => {
@@ -155,7 +227,7 @@ export const getComponentsObj = async () => {
 
   if (componentList.length > 0) {
     compList.push(
-      ...componentList.map((name) => {
+      ...componentList.map(name => {
         const container = {};
         container.name = name;
         container.value = name;
@@ -190,7 +262,7 @@ export const getComponentDefaults = async () => {
   return config.component;
 };
 
-export const getComponentDirectoryPath = async (componentKey) => {
+export const getComponentDirectoryPath = async componentKey => {
   const currentDirectory = process.cwd();
   const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
 
@@ -200,7 +272,9 @@ export const getComponentDirectoryPath = async (componentKey) => {
   data = JSON.parse(data);
 
   if (!data[COMPONENTS_DIRECTORY_PATH]) {
-    console.error(`${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`);
+    console.error(
+      `${chalk.red.bold('ERROR')} Could not able find components directory path in config.json`
+    );
     process.exit(1);
   }
 
@@ -212,11 +286,11 @@ export const compileMustacheTemplate = (file, data) => {
   return mustache.render(content, data);
 };
 
-export const isPascalCase = (string) => {
+export const isPascalCase = string => {
   return string === pascalCase(string);
 };
 
-export const convertIntoPascalCase = (string) => {
+export const convertIntoPascalCase = string => {
   return pascalCase(string);
 };
 
@@ -224,7 +298,7 @@ export const constructCompleteUrl = (baseServer, endPoint) => {
   return baseServer.endsWith('/') ? `${baseServer}${endPoint}` : `${baseServer}/${endPoint}`;
 };
 
-export const sanitize = (str) => {
+export const sanitize = str => {
   /* Allow only numbers and case insensitive alphabets */
   str = str.replace(/[^a-zA-Z0-9 ]/g, '');
   /* spaces will be replaced by - */
@@ -232,13 +306,13 @@ export const sanitize = (str) => {
   return str;
 };
 
-export const validateSemver = (str) => {
+export const validateSemver = str => {
   /* basic semver version validation - 0.0.1-dev */
   const regex = /^[0-9]\d*\.\d+\.\d+(?:-[a-zA-Z0-9]+)?$/g;
   return regex.test(str);
 };
 
-export const validateRulesetVersion = (str) => {
+export const validateRulesetVersion = str => {
   /* Ruleset version range - 01-99 */
   if (str.indexOf('00') !== -1) {
     return false;
@@ -268,20 +342,24 @@ export const showVersion = () => {
   const nodeMinorVersion = parseInt(arNodeVersion[1]);
 
   if (nodeMajorVersion < 18) {
-    console.log(chalk.redBright(`DX Component Builder - SDK requires node v18 or greater, current version: ${process.version}`));
+    console.log(
+      chalk.redBright(
+        `DX Component Builder - SDK requires node v18 or greater, current version: ${process.version}`
+      )
+    );
     process.exit(1);
   }
 
   const hasGit = checkGit(process.cwd());
 
   if (!hasGit) {
-    console.log(chalk.redBright('DX Component Builder - SDK git to be installed.'));
+    console.log(chalk.redBright('DX Component Builder - Git needs to be installed.'));
     process.exit(1);
   }
 };
 
 export const getOOTBComponents = async () => {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     fs.readFile(OOTB_COMPONENTS, 'utf-8', async (error, ootbComponentsData) => {
       if (error) {
         try {
@@ -298,12 +376,12 @@ export const getOOTBComponents = async () => {
                 Authorization: `${tokenType} ${accessToken}`
               }
             })
-              .then((response) => response.text())
-              .then((data) => {
+              .then(response => response.text())
+              .then(data => {
                 if (data.charAt() === '[') {
                   data = data.slice(1, -1);
                   data = data.replace(/\s/g, '');
-                  fs.writeFile(OOTB_COMPONENTS, data, (err) => {
+                  fs.writeFile(OOTB_COMPONENTS, data, err => {
                     if (err) {
                       console.error(err);
                     }
@@ -313,14 +391,14 @@ export const getOOTBComponents = async () => {
                   data = JSON.parse(data);
                   if (data && data.errors) {
                     const errMessages = data.errors;
-                    errMessages.forEach((msgArr) => {
+                    errMessages.forEach(msgArr => {
                       throw new Error(`Failed with error - ${JSON.stringify(msgArr.message)}`);
                     });
                   }
                 }
               })
               // eslint-disable-next-line prefer-promise-reject-errors
-              .catch((e) => Promise.reject(`${chalk.bold.red(e)}`));
+              .catch(e => Promise.reject(`${chalk.bold.red(e)}`));
           }
         } catch (e) {
           throw new Error('Error occurred in validation', e);
@@ -332,7 +410,7 @@ export const getOOTBComponents = async () => {
   });
 };
 
-export const deleteInfinityServerComponent = async (componentKey) => {
+export const deleteInfinityServerComponent = async componentKey => {
   const serverConfig = await getPegaServerConfig();
   const { server } = serverConfig;
   const url = constructCompleteUrl(server, DELETE_COMPONENT_SERVICE_REST_ENDPOINT);
@@ -345,50 +423,77 @@ export const deleteInfinityServerComponent = async (componentKey) => {
 
     if (OauthData) {
       const { access_token: accessToken, token_type: tokenType } = JSON.parse(OauthData);
-      fetch(deleteUrl, {
+
+      const response = await fetch(deleteUrl, {
         method: 'DELETE',
         agent: getHttpsAgent(serverConfig),
         headers: {
           Authorization: `${tokenType} ${accessToken}`
         }
-      })
-        .then((response) => {
-          status = response.status;
-          return response.text();
-        })
-        .then((resp) => {
-          let respData;
-          try {
-            respData = JSON.parse(resp);
-          } catch (e) {
-            console.log(chalk.bold.redBright(`Failure : ${resp}`));
-            process.exit(1);
-          }
+      });
+
+      status = response.status;
+      if (!response.ok) {
+        if (status === 401) {
+          throw new Error(
+            'Error occurred in authentication. Please regenerate using authenticate'
+          );
+          // console.log(accessTokenUri, refreshToken);
+          /* TODO - Handle refresh_token */
+        }
+        else if (status === 404){
+          throw new Error('404: Server resource not found');
+        }
+        else if (status === 405){
+          throw new Error('405: Server method not allowed');
+        }
+        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.'
+          );
+        }
+
+
+      }
+
+      try {
+        const respData = await response.json();
+        console.log(
+              chalk.bold.green(`Success : ${respData.message}`)
+        );
+
+        if (status === 500) {
+          status = 999;
+          throw new Error(respData.message);
+        }
+      }
+      catch (err) {
+        if (status === 500) {
+            throw new Error(
+             `Error occurred in authentication. Please regenerate using authenticate`
+            );
+        }
+        else if (status === 999) {
+          throw new Error (err);
+        }
+      }
 
-          if (status === 200) {
-            console.log(chalk.bold.green(`Success : ${respData.message}`));
-          } else {
-            throw new Error(`${respData.message}`);
-          }
-        })
-        .catch((e) => {
-          if (status === 403) {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`);
-          } else {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red(e)}`);
-          }
-        });
     }
   } catch (error) {
-    console.log(`\n${chalk.bold.red(error)}`);
+
+    throw new Error(error);
   }
 };
 
-export const deleteLaunchpadServerComponent = async (componentKey) => {
+export const deleteLaunchpadServerComponent = async componentKey => {
   const { server, isolationId } = await getPegaServerConfig();
-  const deleteUrl = constructCompleteUrl(server, LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT.replace('{isolationId}', isolationId));
+  const deleteUrl = constructCompleteUrl(
+    server,
+    LP_DELETE_COMPONENT_SERVICE_REST_ENDPOINT.replace('{isolationId}', isolationId || 'undefined')
+  );
   const [componentName] = componentKey.split('~|~');
 
   try {
@@ -410,38 +515,62 @@ export const deleteLaunchpadServerComponent = async (componentKey) => {
         componentName
       };
 
-      fetch(deleteUrl, {
+
+      const response = await fetch(deleteUrl, {
         method: 'DELETE',
         agent: new https.Agent({ rejectUnauthorized: false }),
         headers,
         body: JSON.stringify(apiBody)
-      })
-        .then((response) => {
-          status = response.status;
-          return response.text();
-        })
-        .then((response) => {
-          if (status === 401) {
-            throw new Error('Error occurred in authentication. Please regenerate using authenticate');
-            // console.log(accessTokenUri, refreshToken);
-            /* TODO - Handle refresh_token */
-          } else if (status === 200 || status === 201) {
-            console.log(chalk.bold.green(`Success : ${response}`));
-          } else {
-            throw new Error(`${response.message}`);
-          }
-        })
-        .catch((e) => {
-          if (status === 403) {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red('Error forbidden: User does not have privileges to Delete.')}`);
-          } else {
-            // eslint-disable-next-line prefer-promise-reject-errors
-            Promise.reject(`${chalk.bold.red(e)}`);
-          }
-        });
+      });
+
+      status = response.status;
+      if (!response.ok) {
+        if (status === 401) {
+          throw new Error(
+            'Error occurred in authentication. Please regenerate using authenticate'
+          );
+          // console.log(accessTokenUri, refreshToken);
+          /* TODO - Handle refresh_token */
+        }
+        else if (status === 404){
+          throw new Error('404: Server resource not found');
+        }
+        else if (status === 405){
+          throw new Error('405: Server method not allowed');
+        }
+        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.'
+          );
+        }
+      }
+
+      try {
+        const respData = await response.text();
+        console.log(
+              chalk.bold.green(`Success : ${respData}`)
+        );
+
+        if (status === 500) {
+          status = 999;
+          throw new Error(respData.message);
+        }
+      }
+      catch (err) {
+        if (status === 500) {
+            throw new Error(
+             `Error occurred in authentication. Please regenerate using authenticate`
+            );
+        }
+        else if (status === 999) {
+          throw new Error (err);
+        }
+      }
     }
   } catch (error) {
-    console.log(`\n${chalk.bold.red(error)}`);
+    throw new Error(error);
   }
 };

package/tests/assets/components/create/Pega_DXIL_MyTestText/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

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

@@ -0,0 +1,71 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { stateProps, configProps } from './mock';
+
+import PegaDxilMyTestText from './index';
+
+const meta: Meta<typeof PegaDxilMyTestText> = {
+  title: 'PegaDxilMyTestText',
+  component: PegaDxilMyTestText,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTestText>;
+
+export const BasePegaDxilMyTestText: Story = args => {
+
+  const [value, setValue] = useState(configProps.value);
+
+  const props = {
+    value,
+    placeholder: configProps.placeholder,
+    label: configProps.label,
+    testId: configProps.testId,
+    hasSuggestions: configProps.hasSuggestions,
+
+    getPConnect: () => {
+      return {
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, theValue) => {
+              setValue(theValue);
+            },
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+  };
+
+  return (
+    <>
+      <PegaDxilMyTestText {...props} {...args} />
+    </>
+  );
+};
+
+BasePegaDxilMyTestText.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};