@pega/custom-dx-components 0.23.10 → 0.23.11

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/config.json.mustache

@@ -0,0 +1,55 @@
+{
+  "name": "{{COMPONENT_KEY}}",
+  "label": "{{COMPONENT_LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "organization": "{{ORGANIZATION}}",
+  "version": "{{VERSION}}",
+  "library": "{{LIBRARY}}",
+  "allowedApplications": {{{ALLOWEDAPPS}}},
+  "componentKey": "{{COMPONENT_KEY}}",
+  "type": "{{TYPE}}",
+  "subtype": {{{SUB_TYPE}}},
+  "icon": "OneColumnPage.svg",
+   "properties": [
+    {
+      "name": "title",
+      "label": "Label value",
+      "format": "TEXT"
+    },
+    {
+      "format": "SELECT",
+      "label": "Usage",
+      "name": "label",
+      "defaultValue": "Create operator",
+      "localize": true,
+      "source": [
+        {
+          "key": "Create operator",
+          "value": "Create operator"
+        },
+        {
+          "key": "Update operator",
+          "value": "Update operator"
+        }
+      ]
+    },
+
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "Create operator",
+    "title": "Create operator",
+    "createLabel": "@L Created",
+    "updateLabel": "@L Updated"
+  }
+}

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -0,0 +1,74 @@
+import { withKnobs } from '@storybook/addon-knobs';
+
+import {{COMPONENT_CLASS_NAME}} from './index.jsx';
+
+import { configProps, operatorDetails } from './mock.stories';
+
+export default {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  decorators: [withKnobs],
+  component: {{COMPONENT_CLASS_NAME}}
+};
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+export const base{{COMPONENT_CLASS_NAME}} = () => {
+
+  const props = {
+    label: configProps.label,
+    createLabel: configProps.createLabel,
+    updateLabel: configProps.updateLabel,
+    createOperator: configProps.createOperator,
+    updateOperator: configProps.updateOperator,
+    createDateTime: configProps.createDateTime,
+    updateDateTime: configProps.updateDateTime,
+    hideLabel: configProps.hideLabel,
+
+    getPConnect: () => {
+      return {
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {/* nothing */},
+            triggerFieldChange: () => {/* nothing */}
+          };
+        },
+        getCaseSummary: () => {
+          return {
+            user: configProps.updateOperator.userId,
+            dateTimeValue: configProps.updateDateTime
+          }
+        },
+        ignoreSuggestion: () => {/* nothing */},
+        acceptSuggestion: () => {/* nothing */},
+        setInheritedProps: () => {/* nothing */},
+        resolveConfigProps: () => {/* nothing */}
+      };
+    }
+};
+
+return (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} />
+    </>
+  );
+};

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/index.jsx.mustache

@@ -0,0 +1,82 @@
+/* eslint-disable no-nested-ternary */
+import { Fragment } from 'react';
+import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+// includes in bundle
+import Operator from './Operator.jsx';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+
+// Created for Launchpad
+
+// props passed in combination of props from property panel (config.json) and run time props from Constellation
+// any default values in config.pros should be set in defaultProps at bottom of this file
+export default function {{COMPONENT_CLASS_NAME}}(props) {
+
+  const {
+    getPConnect,
+    title,
+    label,
+    createLabel,
+    updateLabel
+  } = props;
+
+
+  const { createTime, createdBy, lastUpdateTime, lastUpdatedBy } = getPConnect().getCaseSummary();
+
+  const [_label, user, dateTimeValue] =
+    label === 'Create operator'
+      ? [createLabel, createdBy, createTime]
+      : [updateLabel, lastUpdatedBy, lastUpdateTime];
+
+
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Card>
+      <CardHeader>{title}</CardHeader>
+      <CardContent>
+{{! pick new delimiteres for mustache }} {{=<% %>=}}
+      <Flex container={{ direction: 'row'}}>
+      <Operator label={_label} name={user} id={user} getPConnect={getPConnect} />
+
+<%={{ }}=%>     {{! revert delimiteres for mustache }}
+      {dateTimeValue && (
+        <Fragment>
+          {' '}
+          <DateTimeDisplay value={dateTimeValue} variant='relative' />
+        </Fragment>
+      )}
+      </Flex>
+      </CardContent>
+      </Card>
+
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  "label": "Create operator",
+  "title": "Create operator",
+  createLabel: null,
+  updateLabel: null
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  title: PropTypes.string,
+  createLabel: PropTypes.string,
+  updateLabel: PropTypes.string
+};
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+// const comparisonFn = (prevProps, nextProps) => {
+//   return prevProps.updateDateTime === nextProps.updateDateTime;
+// };

package/src/tasks/create/templates/Launchpad/Widget/__components.md

@@ -0,0 +1,3 @@
+# The **Widget** directory
+
+The **Launchpad/Widget** directory contains the template code for the field components you want to use with the **WebComponents SDK**.

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

@@ -2,28 +2,28 @@ import path from 'path';
 import { URL, fileURLToPath } from 'url';
 import fs from 'fs';
 import { promisify } from 'util';
-import { join } from 'path';
+
 
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
 
-import { checkPathAccess, showVersion } from '../../util.js';
-
-export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
-
-import {
+// eslint-disable-next-line import/order
+import { checkPathAccess, showVersion ,
   convertIntoPascalCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
-  getPegaConfig,
+  getPegaServerConfig,
   getComponents,
   getComponentDefaults,
   sanitize,
   validateSemver
 } from '../../util.js';
+
 import { COMPONENT_SCHEMA, COMPONENTS_DIRECTORY_PATH, TASKS_CONFIG_JSON_FILENAME, COMPONENTS_PATH, CATEGORY_CONSTELLATION } from '../../constants.js';
 
+export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
+
 const pegaConfigJsonPath = path.join(path.resolve(), TASKS_CONFIG_JSON_FILENAME);
 
 const copy = promisify(ncp);
@@ -64,7 +64,8 @@ export const compileMustacheTemplates = async (
   let mustacheSubType = subtype;
 
   // overrides
-  if (typeof mustacheSubType == 'string') {
+  if (typeof mustacheSubType === 'string') {
+    // eslint-disable-next-line default-case
     switch (mustacheSubType) {
       case 'FORM-region':
         mustacheSubType = 'FORM';
@@ -113,8 +114,87 @@ export const compileMustacheTemplates = async (
   });
 };
 
+export const validateCompile = async (
+  { library, organization, componentName, componentLabel, version, framework, type, subtype, description, allowedApplications },
+  options
+) => {
+  let sSubType = subtype;
+  if (Array.isArray(subtype)) {
+    sSubType = subtype.join('-');
+  }
+
+  // await checkPathAccess(pegaConfigInternalJsonPath);
+
+  framework = convertIntoPascalCase(CATEGORY_CONSTELLATION);
+
+  const templateParentDir = `./templates/${framework}`;
+
+  let templateDir = `${templateParentDir}/${type}/${sSubType}`;
+  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+  templateDirectory = templateDirectory.replace(`${path.sep  }create-all`, `${path.sep  }create`);
+
+  const defaultPegaServerConfig = await getPegaServerConfig();
+  const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
+  const originalFramework = framework;
+
+  if (isLaunchpad) {
+    framework = "Launchpad";
+
+    templateDir = `./templates/${framework}/${type}/${sSubType}`;
+    templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+    templateDirectory = templateDirectory.replace(`${path.sep  }create-all`, `${path.sep  }create`);
+
+    // if doesn't exist, revert
+    if (!fs.existsSync(templateDirectory)) {
+      framework = originalFramework;
+
+      templateDir = `./templates/${framework}/${type}/${sSubType}`;
+      templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
+      templateDirectory = templateDirectory.replace(`${path.sep  }create-all`, `${path.sep  }create`);
+
+    }
+
+  }
+
+
+
+  const componentKey = `${organization}_${library}_${componentName}`;
+
+  const targetDirectory = await getComponentDirectoryPath(componentKey);
+
+  const components = await getComponents(false);
+
+  if (components.includes(componentKey)) {
+    console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
+
+    return;
+  }
+
+  // component
+  await copyComponentTemplate({
+    ...options,
+    targetDirectory,
+    templateDirectory
+  });
+  await compileMustacheTemplates(targetDirectory, {
+    componentKey,
+    componentName,
+    componentLabel,
+    library,
+    version,
+    type,
+    subtype,
+    description,
+    organization,
+    allowedApplications
+  });
+
+  console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));
+};
+
 export const validateCompileAll = async ({ prefix, library, version, allowedApplications, organization }, options) => {
-  for (let fieldIdx in COMPONENT_SCHEMA.subtype.field) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const fieldIdx in COMPONENT_SCHEMA.subtype.field) {
     const type = 'Field';
     const subtype = COMPONENT_SCHEMA.subtype.field[fieldIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
@@ -123,6 +203,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     const componentLabel = ''.concat(prefix).concat(' ').concat(COMPONENT_SCHEMA.subtype.field[fieldIdx].name);
     const description = componentLabel;
 
+    // eslint-disable-next-line no-await-in-loop
     await validateCompile(
       {
         library,
@@ -139,15 +220,16 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     );
   }
 
-  for (let templateIdx in COMPONENT_SCHEMA.subtype.template) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const templateIdx in COMPONENT_SCHEMA.subtype.template) {
     const type = 'Template';
     const subtype = COMPONENT_SCHEMA.subtype.template[templateIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
-    let templateNameOriginal = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
+    const templateNameOriginal = COMPONENT_SCHEMA.subtype.template[templateIdx].name;
     let templateName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
     let templateLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.template[templateIdx].name);
     if (templateNameOriginal.indexOf('region') >= 0) {
-      let templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(' region', ''));
+      const templateNameBase = convertIntoPascalCase(templateNameOriginal.replace(' region', ''));
       templateName = 'TwoColumn'.concat(templateNameBase);
       templateLabel = 'Two Column '.concat(templateNameBase);
     }
@@ -155,6 +237,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     const componentLabel = ''.concat(prefix).concat(' ').concat(templateLabel);
     const description = componentLabel;
 
+    // eslint-disable-next-line no-await-in-loop
     await validateCompile(
       {
         library,
@@ -171,13 +254,14 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     );
   }
 
-  for (let widgetIdx in COMPONENT_SCHEMA.subtype.widget) {
+  // eslint-disable-next-line no-restricted-syntax, guard-for-in
+  for (const widgetIdx in COMPONENT_SCHEMA.subtype.widget) {
     const type = 'Widget';
     const subtype = COMPONENT_SCHEMA.subtype.widget[widgetIdx].value;
     const prefixNoSpace = prefix.replace(/\s+/g, '');
-    let widgetNameOriginal = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
+    const widgetNameOriginal = COMPONENT_SCHEMA.subtype.widget[widgetIdx].name;
     let widgetName = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat('Widget');
-    let widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(' Widget');
+    const widgetLabel = convertIntoPascalCase(COMPONENT_SCHEMA.subtype.widget[widgetIdx].name).concat(' Widget');
     if (widgetName.indexOf('&') >= 0) {
       widgetName = convertIntoPascalCase(widgetNameOriginal.replace(' & ', ''));
     }
@@ -185,6 +269,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
     const componentLabel = ''.concat(prefix).concat(' ').concat(widgetLabel);
     const description = componentLabel;
 
+    // eslint-disable-next-line no-await-in-loop
     await validateCompile(
       {
         library,
@@ -202,61 +287,7 @@ export const validateCompileAll = async ({ prefix, library, version, allowedAppl
   }
 };
 
-export const validateCompile = async (
-  { library, organization, componentName, componentLabel, version, framework, type, subtype, description, allowedApplications },
-  options
-) => {
-  let sSubType = subtype;
-  if (Array.isArray(subtype)) {
-    sSubType = subtype.join('-');
-  }
-
-  const typeLC = type.toLowerCase();
-
-  //await checkPathAccess(pegaConfigInternalJsonPath);
-
-  framework = convertIntoPascalCase(CATEGORY_CONSTELLATION);
-
-  let pegaConfig = await getPegaConfig();
-  let templateParentDir = `./templates/${framework}`;
 
-  const templateDir = `${templateParentDir}/${type}/${sSubType}`;
-  let templateDirectory = fileURLToPath(new URL(templateDir, import.meta.url));
-  templateDirectory = templateDirectory.replace(path.sep + 'create-all', path.sep + 'create');
-
-  const componentKey = `${organization}_${library}_${componentName}`;
-
-  const targetDirectory = await getComponentDirectoryPath(componentKey);
-
-  const components = await getComponents(false);
-
-  if (components.includes(componentKey)) {
-    console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
-
-    return;
-  }
-
-  // component
-  await copyComponentTemplate({
-    ...options,
-    targetDirectory,
-    templateDirectory
-  });
-  await compileMustacheTemplates(targetDirectory, {
-    componentKey,
-    componentName,
-    componentLabel,
-    library,
-    version,
-    type,
-    subtype,
-    description,
-    organization,
-    allowedApplications
-  });
-
-  console.log(chalk.green(`created ${componentKey} component in ${targetDirectory}`));
-};
 
 export default async (options) => {
   showVersion();
@@ -273,16 +304,17 @@ export default async (options) => {
 
   const componentData = data[COMPONENTS_PATH];
 
-  const { library } = componentData;
+  let library;
+  ({ library } = componentData);
   let { organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
 
-  let componentDefaults = await getComponentDefaults();
+  const componentDefaults = await getComponentDefaults();
   componentDefaults.library = library;
 
   if (options.params.length >= 8) {
     const prefix = options.params[3];
     const version = options.params[4];
-    const library = options.params[5];
+    library = options.params[5];
     const allowedApplications = options.params[6];
 
     // overwrite
@@ -339,7 +371,8 @@ export default async (options) => {
     ];
 
     await inquirer.prompt(questions).then(async (answers) => {
-      const { library, version, allowedApplications } = answers;
+      ({library} = answers);
+      const { version, allowedApplications } = answers;
       let { prefix } = answers;
       prefix = prefix.replace(/[^a-zA-Z0-9 ]/g, '');
       await validateCompileAll(

package/src/tasks/delete/helper.js

@@ -1,22 +1,33 @@
+import fs from 'fs';
 import chalk from 'chalk';
 import inquirer from 'inquirer';
 import ora from 'ora';
 
+import path from 'path';
+import { join } from 'path';
+
 import {
   deleteLocalComponent,
   deleteInfinityServerComponent,
   deleteLaunchpadServerComponent,
   getComponents,
   getPegaServerConfig,
-  standardizeStr
+  standardizeStr,
+  sanitize
 } from '../../util.js';
 import { getComponentsFromServer } from '../list/helper.js';
 
+import { TASKS_CONFIG_JSON_FILENAME, COMPONENTS_DIRECTORY_PATH, COMPONENTS_PATH } from '../../constants.js';
+
 export const SOURCE_OF_COMPONENT_TYPES = {
   SERVER: 'Server',
   LOCAL: 'Local'
 };
 
+let library;
+let organization;
+
+
 export const getDeleteComponentsQuestions = async (options) => {
   const defaultPegaServerConfig = await getPegaServerConfig();
 
@@ -34,6 +45,53 @@ export const getDeleteComponentsQuestions = async (options) => {
   ];
 };
 
+export const getLaunchPadFilterQuestions = async () => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
+  const currentDirectory = process.cwd();
+  const pegaConfigJsonPath = join(currentDirectory, TASKS_CONFIG_JSON_FILENAME);
+
+  let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
+  data = 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 componentData = data[COMPONENTS_PATH];
+
+   ({ library } = componentData);
+   ({ organization } = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8')));
+
+  return [
+  {
+    name: 'organization',
+    message: 'Enter component organization (required)',
+    default: organization,
+    validate: value => {
+      if (value) {
+        return true;
+      }
+      return 'Please provide value for organization';
+    }
+  },
+  {
+    name: 'library',
+    message: 'Enter library name (required)',
+    default: library,
+    validate: value => {
+      if (value) {
+        return true;
+      }
+      return 'Please provide value for library';
+    }
+  }
+  ];
+}
+
 export const deleteLocalComponents = async (sourceOfComponents, options) => {
   const localComponents = await getComponents();
 
@@ -70,14 +128,27 @@ export const deleteLocalComponents = async (sourceOfComponents, options) => {
 };
 
 export const deleteServerComponents = async (sourceOfComponents, answers) => {
-  const spinner = ora('Fetching components from server').start();
+
   const defaultPegaServerConfig = await getPegaServerConfig();
   const isLaunchpad = defaultPegaServerConfig.serverType === 'launchpad';
-  const data = await getComponentsFromServer(answers);
+
+
+  if (isLaunchpad) {
+    const questions = await getLaunchPadFilterQuestions();
+    const lpAnswers = await inquirer.prompt(questions);
+
+    ({library, organization} = lpAnswers);
+  }
+
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(library, organization);
+  spinner.stop();
+
 
   let serverComponents;
   if (isLaunchpad) {
     serverComponents = data;
+
   } else {
     try {
       if (typeof data === 'object') {
@@ -89,7 +160,7 @@ export const deleteServerComponents = async (sourceOfComponents, answers) => {
       /* empty */
     }
   }
-  spinner.stop();
+
 
   if (serverComponents && serverComponents?.length > 0) {
     if (isLaunchpad) {