@pega/dx-component-builder-sdk 8.23.16 → 8.23.18

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

@@ -1,12 +1,20 @@
 
 import React from "react";
-import PropTypes from "prop-types";
 import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
 import { makeStyles } from '@material-ui/core/styles';
-
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this component 
+  header?: string,
+  description?: string,
+  datasource?: any,
+  whatsnewlink?: string 
+}
+
 const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
@@ -22,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { header, description, datasource, whatsnewlink } = props;
   let details = [];
   if (datasource && datasource.source) {
@@ -60,18 +68,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
   );
 
 }
-
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-  header: "",
-  description: "",
-  // image: "",
-  datasource: [],
-  whatsnewlink: ""
-};
-
-{{COMPONENT_CLASS_NAME}}.propTypes = {
-  header: PropTypes.string,
-  description: PropTypes.string,
-  datasource: PropTypes.instanceOf(Object),
-  whatsnewlink: PropTypes.string
-};

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -27,7 +27,7 @@ window.PCore.getUserApi = () => {
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    caseOpConfig,
+    ...caseOpConfig,
     getPConnect: () => {
       return {
         getActionsApi: () => {
@@ -49,4 +49,4 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
       <{{COMPONENT_CLASS_NAME}} {...props} />
     </>
   );
-};
+};

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

@@ -1,6 +1,4 @@
-/* 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';
@@ -10,8 +8,21 @@ 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';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
+  // If any, enter additional props that only exist on this componentName
+  // eslint-disable-next-line react/no-unused-prop-types
+  label: string,
+  createDateTime: string,
+  createLabel: string,
+  createOperator: { userName: string, userId: string },
+  updateDateTime: string,
+  updateLabel: string,
+  updateOperator: { userName: string, userId: string }
+}
 
-declare const PCore: any;
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -30,28 +41,35 @@ const useStyles = makeStyles((theme) => ({
 
 // 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) {
+export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // const componentName = "Operator";
-  const { caseOpConfig } = props;
   const classes = useStyles();
 
-  const fieldLabel = caseOpConfig.label.toLowerCase();
+  // const versionAr = pCoreVersion.split(".");
+  // let fieldLabel;
   let caseOpLabel = "---";
   let caseOpName = "---";
   let caseOpId = "";
-  let caseTime = null;
-
-  if (fieldLabel === "create operator") {
-    caseOpLabel = caseOpConfig.createLabel;
-    caseOpName = caseOpConfig.createOperator.userName;
-    caseTime = caseOpConfig.createDateTime;
-    caseOpId = caseOpConfig.createOperator.userId;
-  } else if (fieldLabel === "update operator") {
-    caseOpLabel = caseOpConfig.updateLabel;
-    caseOpName = caseOpConfig.updateOperator.userName;
-    caseTime = caseOpConfig.updateDateTime;
-    caseOpId = caseOpConfig.updateOperator.userId;
-  }
+  let caseTime = "";
+
+  let updateOpLabel = "---";
+  let updateOpName = "---";
+  let updateOpId = "";
+  let updateTime = "";
+
+  // fieldLabel = props.fieldLabel;
+  caseOpLabel = props.createLabel;
+  caseOpName = props.createOperator.userName;
+  caseTime = props.createDateTime;
+  caseOpId = props.createOperator.userId;
+
+  updateOpLabel = props.updateLabel;
+  updateOpName = props.updateOperator.userName;
+  updateTime = props.updateDateTime;
+  updateOpId = props.updateOperator.userId;
+
+
+
 
   // Popover-related
   const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
@@ -143,6 +161,85 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     setPopoverAnchorEl(event.currentTarget);
   }
 
+  function showUpdateOperatorDetails(event) {
+
+    const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(updateOpId);
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+
+    operatorPreviewPromise.then((res) => {
+      const fillerString = "---";
+      let fields: any = [];
+      if (
+        res.data &&
+        res.data.pyOperatorInfo &&
+        res.data.pyOperatorInfo.pyUserName
+      ) {
+        fields = [
+          {
+            id: "pyPosition",
+            name: localizedVal("Position", localeCategory),
+            value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: res.data.pyOperatorInfo.pyTelephone ? <a href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>{res.data.pyOperatorInfo.pyTelephone}</a> : fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            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: localizedVal("Position", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyOrganization",
+            name: localizedVal("Organization", localeCategory),
+            value: fillerString
+          },
+          {
+            id: "ReportToUserName",
+            name: localizedVal('Reports to', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyTelephone",
+            name: localizedVal('Telephone', localeCategory),
+            value: fillerString
+          },
+          {
+            id: "pyEmailAddress",
+            name: localizedVal('Email address', localeCategory),
+            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>
@@ -171,33 +268,55 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 
 
   return <Styled{{COMPONENT_CLASS_NAME}}Wrapper><React.Fragment>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
+    <Grid container spacing={2}>
+      <Grid item>
       <TextField
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}
-        {{! pick new delimiteres for mustache }}
-        {{=<% %>=}}
+
         InputProps={{
           readOnly: true,
           disableUnderline: true,
           inputProps: {style: {cursor: 'pointer'}}
         }}
-        <%={{ }}=%>     {{! revert delimiteres for mustache }}
+
       />
       <br />
       {Utils.generateDateTime(caseTime, "DateTime-Since")}
+     </Grid>
+     <Grid item>
+      <TextField
+        defaultValue={updateOpName}
+        label={updateOpLabel}
+        onClick={showUpdateOperatorDetails}
+
+        InputProps={{
+          readOnly: true,
+          disableUnderline: true,
+          inputProps: {style: {cursor: 'pointer'}}
+        }}
+
+      />
+      <br />
+      {Utils.generateDateTime(updateTime, "DateTime-Since")}
+     </Grid>
+    </Grid>
+<%={{ }}=%>     {{! revert delimiters for mustache }}
 
       <Popover
         id={popoverId}
         open={popoverOpen}
         anchorEl={popoverAnchorEl}
         onClose={handlePopoverClose}
-        {{! pick new delimiteres for mustache }}
+        {{! pick new delimiters for mustache }}
         {{=<% %>=}}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center'}}
         transformOrigin={{ vertical: 'top', horizontal: 'center'}}
         PaperProps={{ style: {maxWidth: '45ch'}}}
-        <%={{ }}=%>     {{! revert delimiteres for mustache }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
       >
         {getPopoverGrid()}
       </Popover>
@@ -205,27 +324,3 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
 	</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-all/index.js

@@ -9,7 +9,7 @@ import ncp from 'ncp';
 import chalk from 'chalk';
 
 import { checkPathAccess, showVersion, getFramework } from '../../util.js';
-import { CATEGORY_CONSTELLATION, 
+import { CATEGORY_CONSTELLATION, CATEGORY_CUSTOM,
   SDK_CONFIG_JSON_FILENAME,
   DXCB_CONFIG, 
   DXCB_COMPONENT_DEFAULTS,
@@ -25,6 +25,7 @@ const pegaConfigInternalJsonPath = path.join(path.resolve(), DXCB_CONFIG_INTERNA
 
 import {
   convertIntoPascalCase,
+  convertIntoKebabCase,
   compileMustacheTemplate,
   getComponentDirectoryPath,
   getPegaConfig,
@@ -110,6 +111,9 @@ export const compileMustacheTemplates = async (
     allowedApplications = [].concat(allowedApplications);
   }
 
+  const componentKeyKebab = convertIntoKebabCase(convertIntoPascalCase(componentKey));
+  const framework = await getFramework();
+
   allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
   files.forEach(file => {
     const filePath = path.join(componentDirectory, file);
@@ -119,6 +123,7 @@ export const compileMustacheTemplates = async (
       COMPONENT_NAME: componentName,
       COMPONENT_LABEL: componentLabel,
       COMPONENT_CLASS_NAME: componentClassName,
+      COMPONENT_CLASS_NAME_KEBAB: componentKeyKebab,
       ORGANIZATION: organization,
       VERSION: version,
       LIBRARY: library,
@@ -132,7 +137,22 @@ export const compileMustacheTemplates = async (
       IS_PHONE: isPhone
     });
     fs.writeFileSync(filePath, output);
-    fs.renameSync(filePath, filePath.replace('.mustache', ''));
+
+    switch (framework) {
+      case "SDK-React":
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+        break;
+      case "SDK-Angular":
+        let newFilePath = filePath.replace('.mustache', '');
+        const typeAng = convertIntoKebabCase(convertIntoPascalCase(mustacheSubType)).concat(".component");
+        newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
+
+        fs.renameSync(filePath, newFilePath);
+        break;
+      case "SDK-WebComponents":
+        fs.renameSync(filePath, filePath.replace('.mustache', ''));
+        break;
+    }
   });
 };
 
@@ -286,21 +306,34 @@ export const validateCompile = async (
 
   const templateDirConstellation = `./templates/Constellation/${typeLC}/${sSubType}`;
   let templateDirectoryConstellation = fileURLToPath(new URL(templateDirConstellation, import.meta.url));
-  templateDirectoryConstellation = templateDirectoryConstellation.replace("/create-all", "/create");
+  templateDirectoryConstellation = templateDirectoryConstellation.replace( path.sep + "create-all", path.sep + "create");
 
   const componentKey = `${organization}_${library}_${componentName}`;
 
- 
-  const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+  let targetDirectory = "";
+  switch (framework) {
+    case "SDK-React":
+      targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
+      break;
+    case "SDK-Angular":
+      let componentKeyAng = convertIntoKebabCase(convertIntoPascalCase(componentKey));
+      targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKeyAng));
+      break;
+    case "SDK-WebComponents":
+      break;
+  }
+
+  //const targetDirectory = await getComponentDirectoryPath(join(typeLC, "/",componentKey));
   const targetDirectoryConstellation = await getComponentDirectoryPath(join(typeLC, "/",componentKey), CATEGORY_CONSTELLATION);
 
-  const components = await getComponents(false);
+  // keep old way fo getting components
+  const components = await getComponents(false, CATEGORY_CUSTOM, false);
 
   if (!onlyCompanion) {
     if (components.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} component already exists in ${targetDirectory}`));
 
-      let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+      let componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
       if (components.includes(componentKey)) {
         console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       }
@@ -308,7 +341,7 @@ export const validateCompile = async (
       return;
     }
     // test for constellation
-    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
     if (componentsConstellation.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       return;
@@ -316,7 +349,7 @@ export const validateCompile = async (
   }
   else {
     // test for constellation
-    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION);
+    const componentsConstellation = await getComponents(false, CATEGORY_CONSTELLATION, false);
     if (componentsConstellation.includes(componentKey)) {
       console.log(chalk.red(`${componentKey} associated component already exists in ${targetDirectoryConstellation}`));
       return;
@@ -389,58 +422,20 @@ export default async options => {
 
   const componentData = data[DXCB_CONFIG][DXCB_COMPONENT_DEFAULTS];
 
-  const { organization, library} = componentData;
+  let { organization, library} = componentData;
 
   let 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];
+    const allowedApplications = options.params[6];
 
-  const questions = [
-    {
-      name: 'prefix',
-      message: 'Enter prefix label'
-    },
-    {
-      name: 'version',
-      message: 'Enter component version',
-      default: componentDefaults.version,
-      validate: value => {
-        if (validateSemver(value)) {
-          return true;
-        }
-        return 'Please provide semver compatible version e.g 0.0.1';
-      }
-    },
-    {
-      name: 'library',
-      message: 'Enter library name (required)',
-      default: componentDefaults.library,
-      validate: value => {
-        /* value should not be empty
-          It should not have spaces
-          It should not start with a number
-          Only case-insensitive alphanumeric values are allowed
-        */
-        if (value && !/^\d/.test(value) && value === sanitize(value)) {
-          return true;
-        }
-        return 'Only alphanumeric values are allowed, starting with alphabets';
-      }
-    },
-    {
-      name: 'allowedApplications',
-      message: 'Please enter the application names to be supported (comma-separated). ',
-      suffix: 'Keep empty for all applications'
-    }
-  ];
+    // overwrite
+    organization = options.params[7];
 
-  await inquirer.prompt(questions).then(async answers => {
-    const {
-      prefix,
-      library,
-      version,
-      allowedApplications
-    } = answers;
     await validateCompileAll(
       {
         prefix,
@@ -451,6 +446,67 @@ export default async options => {
       },
       options
     );
-  });
+  } else {
+    const questions = [
+      {
+        name: 'prefix',
+        message: 'Enter prefix label'
+      },
+      {
+        name: 'version',
+        message: 'Enter component version',
+        default: componentDefaults.version,
+        validate: value => {
+          if (validateSemver(value)) {
+            return true;
+          }
+          return 'Please provide semver compatible version e.g 0.0.1';
+        }
+      },
+      {
+        name: 'library',
+        message: 'Enter library name (required)',
+        default: componentDefaults.library,
+        validate: value => {
+          /* value should not be empty
+            It should not have spaces
+            It should not start with a number
+            Only case-insensitive alphanumeric values are allowed
+          */
+          if (value && !/^\d/.test(value) && value === sanitize(value)) {
+            return true;
+          }
+          return 'Only alphanumeric values are allowed, starting with alphabets';
+        }
+      },
+      {
+        name: 'allowedApplications',
+        message: 'Please enter the application names to be supported (comma-separated). ',
+        suffix: 'Keep empty for all applications'
+      }
+    ];
+  
+    await inquirer.prompt(questions).then(async answers => {
+      const {
+        library,
+        version,
+        allowedApplications
+      } = answers;
+      let { prefix } = answers;
+      prefix = prefix.replace(/\W+/g, "");
+      await validateCompileAll(
+        {
+          prefix,
+          library,
+          version,
+          allowedApplications,
+          organization
+        },
+        options
+      );
+    });
+  }
+
+ 
   
 };