@pega/dx-component-builder-sdk 23.1.14 → 24.1.10

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

@@ -1,7 +1,26 @@
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  Typography,
+  CardActions, 
+  Button,
+  TableContainer,
+  Table,
+  TableBody,
+  TableHead,
+  withStyles,
+  createStyles,
+  Theme,
+  TableCell,
+  TableRow 
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+import isDeepEqual from 'fast-deep-equal/react';
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { useRef, useEffect, useState } from 'react';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -20,13 +39,29 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-// Duplicated runtime code from React SDK
+const StyledTableCell = withStyles((theme: Theme) =>
+  createStyles({
+    head: {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver',
+      backgroundColor: theme.palette.text.disabled,
+      color: theme.palette.getContrastText(theme.palette.text.disabled)
+    },
+    body: {
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'silver'
+      // fontSize: 14,
+    }
+  })
+)(TableCell);
 
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
-  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
+  const { header = '', description = '', datasource = [], whatsnewlink = '', getPConnect } = props;
   let details = [];
   if (datasource && datasource.source) {
     details = datasource.source.map(item => {
@@ -34,12 +69,136 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [waitingForData, setWaitingForData] = useState<boolean>(true);
+  const thePConn = getPConnect();
+  const caseID = thePConn.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID, ''); // 2nd arg empty string until typedef marked correctly
+  const dataViewName = 'D_pyWorkHistory';
+  const context = thePConn.getContextName();
+
+  const rowData: any = useRef([]);
+
   const classes = useStyles();
 
+  const displayedColumns = [
+    {
+      label: thePConn.getLocalizedValue('Case type', '', ''),
+      type: 'TextInput',
+      fieldName: 'pxProcessName'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Key', '', ''),
+      type: 'TextInput',
+      fieldName: 'pxRefObjectInsName'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Status', '', ''),
+      type: 'TextInput',
+      fieldName: 'pyAssignmentStatus'
+    }, // 2nd and 3rd args empty string until typedef marked correctly
+    {
+      label: thePConn.getLocalizedValue('Stage', '', ''),
+      type: 'TextInput',
+      fieldName: 'pxTaskLabel'
+    } // 2nd and 3rd args empty string until typedef marked correctly
+  ];
+
+  function computeRowData(rows: Object[]): void {
+    const theRowData: Object[] = [];
+
+    rows.forEach((row: any, rowIndex: number) => {
+      // Now, for each property in the index of row properties (displayedColumns), add an object
+      //  to a new array of values
+      const rowDisplayValues: any = [];
+
+      displayedColumns.forEach((column: any, rowValIndex) => {
+        const theType = column.type;
+        const theFieldName = column.fieldName;
+        const theValue =
+          theType === 'Date' || theType === 'DateTime' ? Utils.generateDateTime(row[theFieldName], 'DateTime-Short') : row[theFieldName];
+        rowDisplayValues[rowValIndex] = theValue;
+      });
+
+      theRowData[rowIndex] = rowDisplayValues;
+    });
+
+    if (!isDeepEqual(theRowData, rowData.current)) {
+      // Only update rowData.current when it actually changes (to prevent infinite loop)
+      rowData.current = theRowData;
+    }
+  }
+
   const handleClick = () => {
     window.open(whatsnewlink);
   };
 
+  // Get the case history data when component mounted/initialized
+  useEffect(() => {
+    let bCallSetWaitingForData = true;
+
+    const worklistData = PCore.getDataApiUtils().getData(
+      dataViewName,
+      { dataViewParameters: [{ CaseInstanceKey: caseID }] } as any,
+      context
+    ) as Promise<any>;
+
+    worklistData.then((worklistJSON: any) => {
+      const tableDataResults = worklistJSON.data.data;
+
+      // compute the rowData using the tableDataResults
+      computeRowData(tableDataResults);
+
+      // At this point, if we have data ready to render and haven't been asked
+      //  to NOT call setWaitingForData, we can stop progress indicator
+      if (bCallSetWaitingForData) {
+        setWaitingForData(false);
+      }
+    });
+
+    return () => {
+      // Inspired by https://juliangaramendy.dev/blog/use-promise-subscription
+      // The useEffect closure lets us have access to the bCallSetWaitingForData
+      //  variable inside the useEffect and inside the "then" clause of the
+      //  historyData promise
+      //  So, if this cleanup code gets run before the promise .then is called,
+      //  we can avoid calling the useState setter which would otherwise show a warning
+      bCallSetWaitingForData = false;
+    };
+  }, []);
+
+  function getTableHeader() {
+    const theRowKey = 'CaseHistory.TableHeader';
+
+    const theHeaderCells: any[] = displayedColumns.map((headerCol, index) => {
+      const theCellKey = `${theRowKey}.${index}`;
+      return <StyledTableCell key={theCellKey}>{headerCol.label}</StyledTableCell>;
+    });
+
+    return <TableRow key={theRowKey}>{theHeaderCells}</TableRow>;
+  }
+
+  function getTableData() {
+    const theDataRows: any[] = [];
+
+    // Note: using rowData.current since we're using useRef as a mutatable
+    //  value that's only updated when it changes.
+    if (rowData.current.length > 0) {
+      rowData.current.forEach((dataRow: Object[], index) => {
+        // using dataRow[0]-dataRow[1] as the array key since it's a unique value
+        const theKey = `CaseHistory-${index}`;
+        theDataRows.push(
+          <TableRow key={theKey}>
+            <StyledTableCell>{dataRow[0] ? (dataRow[0] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? (dataRow[1] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? (dataRow[2] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[3] ? (dataRow[3] as any) : '---'}</StyledTableCell>
+          </TableRow>
+        );
+      });
+    }
+    return theDataRows;
+  }
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <Card title='AppAnnouncement' className={classes.root}>
@@ -63,6 +222,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           </Button>
         </CardActions>
       </Card>
+      <TableContainer>
+        <Table>
+          <TableHead>{getTableHeader()}</TableHead>
+          <TableBody>{getTableData()}</TableBody>
+        </Table>
+      </TableContainer>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/widget/PAGE/mock.ts.mustache

@@ -20,4 +20,29 @@ export const configProps = {
     ],
     fields: {}
   }
-};
+};
+
+export const worklistData = {
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
+};

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

@@ -3,26 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { caseOpConfig, operatorDetails } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: (): any => {
-    return {
-      getOperatorDetails: () => {
-        return new Promise(resolve => {
-          resolve(operatorDetails);
-        });
-      },
-    };
-  },
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -33,7 +13,26 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-
+  window.PCore = {
+    ...window.PCore,
+    getUserApi: (): any => {
+      return {
+        getOperatorDetails: () => {
+          return new Promise(resolve => {
+            resolve(operatorDetails);
+          });
+        }
+      };
+    },
+    getLocaleUtils: (): any => {
+      return {
+        getLocaleValue: val => {
+          return val;
+        }
+      };
+    }
+  };
+  
   const props = {
     getPConnect: () => {
       return {

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

@@ -10,7 +10,6 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { 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 component
   label: string;

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-
 export const caseOpConfig = {
   label: 'Create operator',
   createLabel: 'Created',

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

@@ -108,6 +108,9 @@ export const compileMustacheTemplates = async (
       case 'Picklist-RadioButtons':
         mustacheSubType = 'Picklist';
         break;
+      case 'Icon-Button-URL':
+        mustacheSubType = 'Text-URL';
+        break;
     }
   }
 

package/src/tasks/index.js

@@ -17,3 +17,4 @@ export { default as upgrade } from './upgrade/index.js';
 export { default as buildComponent } from './build-comp/index.js';
 export { default as buildAllComponents } from './build-all/index.js';
 export { default as scanAndFix } from './scan-and-fix/index.js';
+export { default as buildJestAssets } from './build-jest-assets/index.js';

package/src/tasks/publish/helper.js

@@ -141,6 +141,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
 
   const configJson = `${srcDirectory}/config.json`;
   const configExtJson = `${srcDirectory}/config-ext.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
@@ -148,6 +149,9 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   if (category === CATEGORY_CUSTOM || category == CATEGORY_CONSTELLATION) {
     zip.addLocalFolder(srcDirectory, 'src/');
     zip.addLocalFile(configJson);
+    if (fs.existsSync(localizationJson)) {
+      zip.addLocalFile(localizationJson);
+    }
   }
   else {
     // check to see if have file

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

@@ -127,6 +127,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
   const configExtJson = `${srcDirectory}/config-ext.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
@@ -134,6 +135,9 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   if (category === CATEGORY_CUSTOM || category == CATEGORY_CONSTELLATION) {
     zip.addLocalFolder(srcDirectory, 'src/');
     zip.addLocalFile(configJson);
+    if (fs.existsSync(localizationJson)) {
+      zip.addLocalFile(localizationJson);
+    }
   }
   else {
     // check to see if have file
@@ -151,7 +155,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
   let configContent = "{ }";
   if (category === CATEGORY_CUSTOM || category === CATEGORY_CONSTELLATION) {
     configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config.json`)).toString();
-    
+
     // cleanup will remove this directory
 
   }
@@ -160,7 +164,7 @@ export const zipComponent = async (componentKey, category = CATEGORY_CUSTOM) =>
       configContent = Buffer.from(fs.readFileSync(`${srcDirectory}/config-ext.json`)).toString();
 
       // cleanup will remove this directory
-      
+
     }
     else {
       const tempConfig = { "componentKey" : ""};

package/src/tasks/validator/index.js

@@ -365,7 +365,13 @@ export default async (option, category = CATEGORY_CUSTOM) => {
   }
 
   // const data = JSON.parse(fs.readFileSync(path.resolve(configFile), 'utf8'));
-  const data = JSON.parse(configData);
+  let data;
+  try {
+    data = JSON.parse(configData);
+  }
+  catch (er) {
+    throw new Error(`Invalid schema json in config.json: ${er}`);
+  }
 
   // for now a special case for ScalarList & Group, those doesn't have a "subtype", so for now manualy
   // add one in here, just to pass validation

package/src/util.js

@@ -443,6 +443,13 @@ export const getDirectoryFiles = async (directory) => {
   .map(dirent => dirent.name);
 }
 
+export const getListOfDirectories = async (directory) => {
+  return fs
+  .readdirSync(directory, { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name);
+}
+
 
 export const getComponentsObj = async (showSeparator = false, category = CATEGORY_CUSTOM) => {
   const currentDirectory = process.cwd();

package/tests/assets/sdk-r/components/create/_components.md

@@ -0,0 +1,6 @@
+# The **components** directory
+
+The **src/components** directory contains the code for the components you want to use with the **React SDK**.
+
+When you run the **npm run  create** or **npm run override** commands to create new components, the generated code that
+you can use as a starting point for your component development will be placed in component-specific folders inside **src/components**.

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -2,27 +2,27 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps } from './mock';
 
 import PegaDxilMyTestText from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyTestText> = {
   title: 'PegaDxilMyTestText',
-  decorators: [withKnobs],
-  component: PegaDxilMyTestText
+  component: PegaDxilMyTestText,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyTestText = () => {
+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: () => {
@@ -48,7 +48,21 @@ export const BasePegaDxilMyTestText = () => {
 
   return (
     <>
-      <PegaDxilMyTestText {...props} />
+      <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
+};

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/index.tsx

@@ -1,5 +1,12 @@
-import PropTypes from 'prop-types';
-import { Input } from '@pega/cosmos-react-core';
+import {
+  Input,
+  FieldValueList,
+  Text,
+  EmailDisplay,
+  PhoneDisplay,
+  URLDisplay,
+  withConfiguration
+} from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -8,7 +15,9 @@ import StyledPegaDxilMyTestTextWrapper from './styles';
 // interface for props
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-
+  isTableFormatter?: boolean;
+  formatter: string;
+  variant?: any;
 }
 
 // interface for StateProps object
@@ -17,23 +26,103 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-// Duplicated runtime code from Constellation Design System Component
+export const formatExists = (formatterVal: string) => {
+  const formatterValues = [
+    'TextInput',
+    'WorkStatus',
+    'RichText',
+    'Email',
+    'Phone',
+    'URL',
+    'Operator'
+  ];
+  let isformatter = false;
+  if (formatterValues.includes(formatterVal)) {
+    isformatter = true;
+  }
+  return isformatter;
+};
+
+export const textFormatter = (formatter: string, value: string) => {
+  let displayComponent: any = null;
+  switch (formatter) {
+    case 'TextInput': {
+      displayComponent = value;
+      break;
+    }
+    case 'Email': {
+      displayComponent = <EmailDisplay value={value} displayText={value} variant='link' />;
+      break;
+    }
+    case 'Phone': {
+      displayComponent = <PhoneDisplay value={value} variant='link' />;
+      break;
+    }
+    case 'URL': {
+      displayComponent = (
+        <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
+      );
+      break;
+    }
+    // no default
+  }
+  return displayComponent;
+};
 
 // 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 PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
+  const { formatter } = props;
 
   const handleOnChange = (event: any) => {
     const { value: updatedValue } = event.target;
     actions.updateFieldValue(propName, updatedValue);
   };
 
+  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+    let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    if (isTableFormatter && formatExists(formatter)) {
+      displayComp = textFormatter(formatter, value);
+    }
+    return displayMode === 'DISPLAY_ONLY' ? (
+      <StyledPegaDxilMyTestTextWrapper> {displayComp} </StyledPegaDxilMyTestTextWrapper>
+    ) : (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant={hideLabel ? 'stacked' : variant}
+          data-testid={testId}
+          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const isValDefined = typeof value !== 'undefined' && value !== '';
+    const val = isValDefined ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+    return (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant='stacked'
+          data-testid={testId}
+          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyTestTextWrapper>
       <Input
@@ -52,22 +141,5 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   );
 };
 
-PegaDxilMyTestText.defaultProps = {
-  value: '',
-  placeholder: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: ''
-};
 
-PegaDxilMyTestText.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string
-};
+export default withConfiguration(PegaDxilMyTestText);

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/mock.ts

@@ -6,7 +6,14 @@ export const configProps = {
   placeholder: 'Text Placeholder',
   helperText: 'Text Helper Text',
   testId: 'Text-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-r/components/create/custom-constellation/field/Pega_DXIL_MyTestText/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});