@pega/dx-component-builder-sdk 0.1.0

package/src/tasks/create/templates/SDK-React/Widget/PAGE-CASE/index.tsx.mustache

@@ -0,0 +1,239 @@
+/* eslint-disable react/no-unused-prop-types */
+import React, {useState} from "react";
+import PropTypes from "prop-types";
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+declare const PCore;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  },
+  popover: {
+    padding: theme.spacing(1),
+    margin: theme.spacing(1),
+  }
+}));
+
+// Duplicated runtime code from React SDK
+
+// Page Case Widget example
+
+// 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 componentName = "Operator";
+  const {
+    label,
+    createLabel,
+    updateLabel,
+    createOperator,
+    updateOperator,
+    createDateTime,
+    updateDateTime
+  } = props;
+
+
+  const classes = useStyles();
+
+
+  const fieldLabel = label.toLowerCase();
+  let caseOpLabel = "---";
+  let caseOpName = "---";
+  let caseOpId = "";
+  let caseTime = null;
+
+  if (fieldLabel === "created") {
+    caseOpLabel = createLabel;
+    caseOpName = createOperator.userName;
+    caseTime = createDateTime;
+    caseOpId = createOperator.userId;
+  } else if (fieldLabel === "updated") {
+    caseOpLabel = updateLabel;
+    caseOpName = updateOperator.userName;
+    caseTime = updateDateTime;
+    caseOpId = updateOperator.userId;
+  }
+
+  // Popover-related
+  const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+  const [popoverFields, setPopoverFields] = useState<Array<any>>([]);
+
+  const popoverOpen = Boolean(popoverAnchorEl);
+  const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
+
+  const handlePopoverClose = (() => {
+    setPopoverAnchorEl(null);
+  })
+
+  function showOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+
+    operatorPreviewPromise.then((res) => {
+      const fillerString = "---";
+      let fields: any = [];
+      if (
+        res.data &&
+        res.data.pyOperatorInfo &&
+        res.data.pyOperatorInfo.pyUserName
+      ) {
+        fields = [
+          {
+            id: "pyPosition",
+            name: "Position",
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: "Organization",
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: "Reports to",
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: "Telephone",
+            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: "Email address",
+            value: res.data.pyOperatorInfo.pyEmailAddress ? <a href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>{res.data.pyOperatorInfo.pyEmailAddress}</a> : fillerString
+          }
+        ];
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+        fields = [
+          {
+            id: "pyPosition",
+            name: "Position",
+            value: fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: "Organization",
+            value: fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: "Reports to",
+            value: fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: "Telephone",
+            value: fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: "Email address",
+            value: fillerString
+          }
+        ];
+      }
+      // Whatever the fields are, update the component's popoverFields
+      setPopoverFields(fields);
+    });
+
+    setPopoverAnchorEl(event.currentTarget);
+  }
+
+  function getPopoverGrid() {
+    // return popoverFields.map((field) => {
+    //   return <div className={classes.popover}>{field.name}: {field.value}</div>
+    // })
+
+    if (popoverFields.length === 0) {
+      return;
+    }
+
+    // There are fields, so build the grid.
+    return <Grid container className={classes.popover} spacing={1}>
+      <Grid item xs={12}><Typography variant="h6">{caseOpName}</Typography></Grid>
+      {popoverFields.map((field) => {
+        return <React.Fragment key={field.id}>
+          <Grid container item xs={12} spacing={1}>
+            <Grid item xs={6}><Typography variant="caption">{field.name}</Typography></Grid>
+            <Grid item xs={6}><Typography variant="subtitle2">{field.value}</Typography></Grid>
+          </Grid>
+        </React.Fragment>
+      })}
+    </Grid>
+
+  }
+
+  // End of popover-related
+
+
+  return <Styled{{COMPONENT_CLASS_NAME}}Wrapper><React.Fragment>
+      <TextField
+        defaultValue={caseOpName}
+        label={caseOpLabel}
+        onClick={showOperatorDetails}
+        {{! pick new delimiteres for mustache }}
+        {{=<% %>=}}
+        InputProps={{
+          readOnly: true,
+          inputProps: {style: {cursor: 'pointer'}}
+        }}
+        <%={{ }}=%>     {{! revert delimiteres for mustache }}
+      />
+      <br />
+      {Utils.generateDateTime(caseTime, "DateTime-Since")}
+
+      <Popover
+        id={popoverId}
+        open={popoverOpen}
+        anchorEl={popoverAnchorEl}
+        onClose={handlePopoverClose}
+        {{! pick new delimiteres for mustache }}
+        {{=<% %>=}}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}
+        transformOrigin={{ vertical: 'top', horizontal: 'center'}}
+        PaperProps={{ style: {maxWidth: '45ch'}}}
+        <%={{ }}=%>     {{! revert delimiteres for mustache }}
+      >
+        {getPopoverGrid()}
+      </Popover>
+    </React.Fragment>
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
+
+}
+
+{{COMPONENT_CLASS_NAME}}.defaultProps = {
+  createLabel: null,
+  updateLabel: null,
+  createOperator: null,
+  updateOperator: null,
+  createDateTime: null,
+  updateDateTime: null
+};
+
+{{COMPONENT_CLASS_NAME}}.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  createLabel: PropTypes.string,
+  updateLabel: PropTypes.string,
+  resolveLabel: PropTypes.string,
+  createOperator: PropTypes.objectOf(PropTypes.any),
+  updateOperator: PropTypes.objectOf(PropTypes.any),
+  resolveOperator: PropTypes.objectOf(PropTypes.any),
+  createDateTime: PropTypes.string,
+  updateDateTime: PropTypes.string,
+  resolveDateTime: PropTypes.string,
+  hideLabel: PropTypes.bool
+};

package/src/tasks/create/templates/SDK-React/Widget/PAGE-CASE/styles.js.mustache

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

package/src/tasks/create/templates/SDK-WebComponents/Field/__components.md

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

package/src/tasks/create/templates/SDK-WebComponents/Template/__components.md

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

package/src/tasks/create/templates/SDK-WebComponents/Widget/__components.md

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

package/src/tasks/delete/helper.js

@@ -0,0 +1,122 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+//import { element } from 'prop-types';
+
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT } from '../../constants.js';
+import {
+  constructCompleteUrl,
+  deleteLocalComponent,
+  deleteServerComponent,
+  getComponentsObj,
+  getPegaServerConfig,
+  nodeFetch
+} from '../../util.js';
+import { getComponentsFromServer } from '../list/helper.js';
+
+import { deleteFromComponentMap } from '../map/map.js';
+
+export const SOURCE_OF_COMPONENT_TYPES = {
+  SERVER: 'Server',
+  LOCAL: 'Local'
+};
+
+export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
+  return [
+    {
+      name: 'sourceOfComponents',
+      type: 'rawlist',
+      message: 'Delete components from Server or Local ?',
+      choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
+      default: defaultPegaServerConfig.sourceOfComponents,
+      when() {
+        return !options.params[3];
+      }
+    }
+  ];
+};
+
+export const deleteLocalComponents = async sourceOfComponents => {
+  const localComponents = await getComponentsObj(true);
+  //const localComponentsAndSub = await getComponentsAndSubDirectory();
+
+  if (localComponents.length > 0) {
+    const answers = await inquirer.prompt([
+      {
+        name: 'componentKey',
+        type: 'rawlist',
+        message: 'Select component to delete',
+        choices: localComponents
+      },
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Are you sure ?',
+        default: false
+      }
+    ]);
+    if (answers.confirmDeletion) {
+      await deleteLocalComponent(answers.componentKey);
+    }
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const deleteServerComponents = async (sourceOfComponents, answers) => {
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(answers);
+  const componentObj = await getComponentsObj(false);
+
+  const serverComponents = JSON.parse(data);
+  spinner.stop();
+  if (serverComponents && serverComponents.pxResults?.length > 0) {
+    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+      const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
+        pyRuleSetVersion,
+        20
+      )}`;
+
+      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+      const short = `Selected component : ${chalk.redBright(
+        `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
+      )}`;
+
+      return { name, value, short };
+    });
+    const answers = await inquirer.prompt({
+      name: 'componentToDelete',
+      type: 'rawlist',
+      pageSize: 10,
+      message: `Select component to delete \n  ${standardizeStr('Rule name', 48)} ${standardizeStr(
+        'Ruleset name',
+        30
+      )} ${standardizeStr('Ruleset version', 22)}`,
+      choices: choicesArr
+    });
+
+    await deleteServerComponent(answers.componentToDelete);
+
+    const componentName = answers.componentToDelete.split("~")[0];
+    const componentKey = componentObj.find( theObj => theObj.name === componentName);
+
+    if (componentKey != undefined) {
+      await deleteFromComponentMap(componentKey.value);
+    }
+    else {
+      console.log(chalk.bold.redBright(`No component in map: ` + componnetName));
+    }
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const standardizeStr = (str, leng) => {
+  for (let i = str.length; i <= leng; i++) {
+    str += ' ';
+  }
+  return str;
+};

package/src/tasks/delete/index.js

@@ -0,0 +1,45 @@
+import inquirer from 'inquirer';
+import ora from 'ora';
+import chalk from 'chalk';
+
+import {
+  deleteLocalComponents,
+  SOURCE_OF_COMPONENT_TYPES,
+  deleteServerComponents,
+  getDeleteComponentsQuestions
+} from './helper.js';
+
+const deleteComponentsFn = async (sourceOfComponents, answers) => {
+  switch (sourceOfComponents) {
+    case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
+      await deleteLocalComponents(sourceOfComponents);
+      break;
+    }
+    case SOURCE_OF_COMPONENT_TYPES.SERVER: {
+      await deleteServerComponents(sourceOfComponents, answers);
+      break;
+    }
+    default: {
+      console.log('Source of components needs to be either Local or Server');
+      break;
+    }
+  }
+};
+
+export default async options => {
+  let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+  if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
+    sourceOfComponentsOption = options.params[3];
+    await deleteComponentsFn(sourceOfComponentsOption);
+  } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {
+    sourceOfComponentsOption = options.params[3];
+    const questions = await getDeleteComponentsQuestions(options, sourceOfComponentsOption);
+    const answers = await inquirer.prompt(questions);
+    await deleteComponentsFn(sourceOfComponentsOption, answers);
+  } else {
+    const questions = await getDeleteComponentsQuestions(options);
+    const answers = await inquirer.prompt(questions);
+    const { sourceOfComponents } = answers;
+    await deleteComponentsFn(sourceOfComponents, answers);
+  }
+};

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

@@ -0,0 +1,177 @@
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import ora from 'ora';
+
+import { LIST_COMPONENT_SERVICE_REST_ENDPOINT } from '../..//constants.js';
+import {
+  constructCompleteUrl,
+  deleteLocalComponent,
+  deleteServerComponent,
+  getComponents,
+  getComponentsObj,
+  getPegaServerConfig,
+  validateRulesetVersion,
+  nodeFetch
+} from '../../util.js';
+import { getComponentsFromServer } from '../list/helper.js';
+
+import { deleteFromComponentMap } from '../map/map.js';
+
+export const SOURCE_OF_COMPONENT_TYPES = {
+  SERVER: 'Server',
+  LOCAL: 'Local'
+};
+
+export const getDeleteComponentsQuestions = async (options, sourceOfComponentsOption) => {
+  const defaultPegaServerConfig = await getPegaServerConfig();
+
+
+  return [
+    {
+      name: 'sourceOfComponents',
+      type: 'rawlist',
+      message: 'Delete components from Server or Local ?',
+      choices: Object.values(SOURCE_OF_COMPONENT_TYPES),
+      default: defaultPegaServerConfig.sourceOfComponents,
+      when() {
+        return !options.params[3];
+      }
+    }
+  ];
+};
+
+
+
+export const deleteLocalComponents = async sourceOfComponents => {
+  const localComponents = await getComponentsObj(true);
+
+  for (var index in localComponents) {
+    if (localComponents[index].type != undefined && localComponents[index].type === "separator") {
+      console.log(chalk.bold.green(localComponents[index]));
+    }
+    else {
+      console.log(chalk.bold.green(localComponents[index].name));
+    }
+
+  }
+
+  if (localComponents.length > 0) {
+    const answers = await inquirer.prompt([
+
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Delete all local ?',
+        default: false
+      }
+    ]);
+    if (answers.confirmDeletion) {
+      for (var index in localComponents) {
+        if (localComponents[index].type == undefined) {
+          var componentToDelete = localComponents[index].value;
+          await deleteLocalComponent(componentToDelete);
+        }
+
+      }
+    }
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const deleteServerComponents = async (sourceOfComponents, answers) => {
+  const spinner = ora('Fetching components from server').start();
+  const data = await getComponentsFromServer(answers);
+  const defaultPegaConfig = await getPegaServerConfig();
+  const componentObj = await getComponentsObj(false);
+
+  const serverComponents = JSON.parse(data);
+  spinner.stop();
+  if (serverComponents && serverComponents.pxResults?.length > 0) {
+    const choicesArr = serverComponents.pxResults.map(({ label, pyRuleSet, pyRuleSetVersion }) => {
+      const name = `${standardizeStr(label, 45)} ${standardizeStr(pyRuleSet, 30)} ${standardizeStr(
+        pyRuleSetVersion,
+        20
+      )}`;
+
+      const value = `${label}~|~${pyRuleSet}~|~${pyRuleSetVersion}`;
+      const short = `Selected component : ${chalk.redBright(
+        `${label} ${pyRuleSet} : ${pyRuleSetVersion}`
+      )}`;
+
+      return { name, value, short };
+    });
+
+    const selectedComp = await inquirer.prompt([
+      {
+        name: 'rulesetName',
+        message: 'Enter ruleset name',
+        default: defaultPegaConfig.rulesetName,
+        validate: value => {
+          if (value.trim()) {
+            return true;
+          }
+          return 'Ruleset name cannot be empty';
+        }
+      },
+      {
+        name: 'rulesetVersion',
+        message: 'Enter ruleset version',
+        default: defaultPegaConfig.rulesetVersion,
+        validate: value => {
+          if (validateRulesetVersion(value)) {
+            return true;
+          }
+          return 'Please provide compatible version e.g 01-01-01';
+        }
+      }
+      ]);
+
+      for (var index in choicesArr) {
+        var componentToDelete = choicesArr[index].value;
+        var arData = componentToDelete.split("~|~");
+        if (arData[1] == selectedComp.rulesetName && arData[2] == selectedComp.rulesetVersion) {
+          console.log(chalk.bold.green(arData[0]));
+        }
+      }
+
+
+    const answers = await inquirer.prompt([
+      {
+        name: 'confirmDeletion',
+        type: 'confirm',
+        message: 'Do you want to delete these components ?',
+        default: false
+      }
+    ]);
+    if (answers.confirmDeletion) {
+      for (var index in choicesArr) {
+        var componentToDelete = choicesArr[index].value;
+        var arData = componentToDelete.split("~|~");
+        if (arData[1] == selectedComp.rulesetName && arData[2] == selectedComp.rulesetVersion) {
+          await deleteServerComponent(componentToDelete);
+
+          const componentName = componentToDelete.split("~")[0];
+          const componentKey = componentObj.find( theObj => theObj.name === componentName);
+
+          if (componentKey != undefined) {
+            await deleteFromComponentMap(componentKey.value);
+          }
+          else {
+            console.log(chalk.bold.redBright(`No component in map: ` + componentName));
+          }
+        }
+      }
+    }
+
+  } else {
+    console.log(chalk.bold.redBright(`No custom components in ${sourceOfComponents}`));
+  }
+};
+
+export const standardizeStr = (str, leng) => {
+  for (let i = str.length; i <= leng; i++) {
+    str += ' ';
+  }
+  return str;
+};

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

@@ -0,0 +1,45 @@
+import inquirer from 'inquirer';
+import ora from 'ora';
+import chalk from 'chalk';
+
+import {
+  deleteLocalComponents,
+  SOURCE_OF_COMPONENT_TYPES,
+  deleteServerComponents,
+  getDeleteComponentsQuestions
+} from './helper.js';
+
+const deleteComponentsFn = async (sourceOfComponents, answers) => {
+  switch (sourceOfComponents) {
+    case SOURCE_OF_COMPONENT_TYPES.LOCAL: {
+      await deleteLocalComponents(sourceOfComponents);
+      break;
+    }
+    case SOURCE_OF_COMPONENT_TYPES.SERVER: {
+      await deleteServerComponents(sourceOfComponents, answers);
+      break;
+    }
+    default: {
+      console.log('Source of components needs to be either Local or Server');
+      break;
+    }
+  }
+};
+
+export default async options => {
+  let sourceOfComponentsOption = SOURCE_OF_COMPONENT_TYPES.LOCAL;
+  if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.LOCAL) {
+    sourceOfComponentsOption = options.params[3];
+    await deleteComponentsFn(sourceOfComponentsOption);
+  } else if (options.params[3] === SOURCE_OF_COMPONENT_TYPES.SERVER) {
+    sourceOfComponentsOption = options.params[3];
+    const questions = await getDeleteComponentsQuestions(options, sourceOfComponentsOption);
+    const answers = await inquirer.prompt(questions);
+    await deleteComponentsFn(sourceOfComponentsOption, answers);
+  } else {
+    const questions = await getDeleteComponentsQuestions(options);
+    const answers = await inquirer.prompt(questions);
+    const { sourceOfComponents } = answers;
+    await deleteComponentsFn(sourceOfComponents, answers);
+  }
+};

package/src/tasks/index.js

@@ -0,0 +1,11 @@
+export { default as createComponent } from './create/index.js';
+export { default as deleteComponent } from './delete/index.js';
+export { default as deleteAllComponents } from './delete-all/index.js';
+export { default as publishComponent } from './publish/index.js';
+export { default as publishAllComponents } from './publish-all/index.js';
+export { default as listComponents } from './list/index.js';
+export { default as updateComponent } from './update/index.js';
+export { default as validate } from './validator/index.js';
+export { default as authenticate } from './authenticate/index.js';
+export { default as upgrade } from './upgrade/index.js';
+export { default as buildComponent } from './build/index.js';