@pega/custom-dx-components 0.24.4 → 0.24.6

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -1,4 +1,5 @@
-import { withConfiguration } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
 
@@ -14,14 +15,13 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
     image: string;
 }
 
-
-// Duplicated runtime code from Constellation Design System Component
-
 // 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
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
-  const { header, description, datasource = [], whatsnewlink, image } = props;
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const PConnect = getPConnect();
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +30,48 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       return item.name;
     });
   }
+
+  // setting up columns for the work list table
+  const columns = [
+    { renderer: 'caseType', label: PConnect.getLocalizedValue('Case type', '', '') },
+    { renderer: 'insKey', label: PConnect.getLocalizedValue('Key', '', '') },
+    { renderer: 'status', label: PConnect.getLocalizedValue('Status', '', '') },
+    { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
+  ];
+
+  // going to get data for worklist to put into a table
+  // data comes from calling a PCore function to get
+  // get data from a data page and a PConnect function
+  // to get getContextName
+  useEffect(() => {
+    const dataViewName = 'D_pyMyWorkList';
+    const context = PConnect.getContextName();
+
+    PCore.getDataPageUtils()
+      .getDataAsync(dataViewName, context)
+      // @ts-ignore
+      .then((response: any) => {
+        // table requires an index or will get setExtraStackFrame error
+        setWorklist(
+          response.data.map((entry: any, index: number) => {
+            // mapping the data into the column names
+            // MUST have an id/index or will get a setExtraStackFrame error
+            // put a key in the table
+            return {
+              caseType: entry.pxProcessName,
+              insKey: entry.pxRefObjectInsName,
+              status: entry.pyAssignmentStatus,
+              stage: entry.pxTaskLabel,
+              id: index
+            };
+          })
+        );
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  }, [PConnect]);
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <PegaAppAnnouncement
@@ -39,6 +81,12 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
+    <br></br>
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+    />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 

package/src/tasks/init/template/package.json.mustache

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.24.4",
+    "@pega/custom-dx-components": "0.24.6",
     "@pega/pcore-pconnect-typedefs": "~2.1.1",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/src/tasks/init/template/tsconfig.build.json

@@ -5,7 +5,9 @@
     "./src/**/*.stories.ts",
     "./src/**/*.stories.tsx",
     "./src/**/*.stories.js",
-    "./src/**/*.stories.jsx"
+    "./src/**/*.stories.jsx",
+    "./src/**/*.test.jsx",
+    "./src/**/*.test.tsx"
   ],
   "compilerOptions": {
     "noEmit": false,

package/tests/assets/components/create/Pega_DXIL_MyTestText/index.tsx

@@ -1,4 +1,12 @@
-import { Input, withConfiguration } from '@pega/cosmos-react-core';
+import {
+  Input,
+  FieldValueList,
+  Text,
+  EmailDisplay,
+  PhoneDisplay,
+  URLDisplay,
+  withConfiguration
+} from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 
@@ -7,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
@@ -16,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
 function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled = false, readOnly = false, required = false, label, hideLabel = false, testId } = props;
+  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

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/DetailsRender.tsx

@@ -1,11 +1,17 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import React, { Fragment } from 'react';
+import { Fragment, ReactElement } from 'react';
 import { FieldValueList } from '@pega/cosmos-react-core';
 
-const DetailsRender = (child: any) => {
+interface DetailsRenderProps {
+  children?: never;
+  child: NonNullable<ReactElement>;
+}
+
+const DetailsRender = (props: DetailsRenderProps) => {
+  const { child } = props;
+
   const kids = child.props.getPConnect().getChildren();
 
-  const displayCompArr: JSX.Element[] = [];
+  const displayCompArr: ReactElement[] = [];
 
   Object.values(kids).forEach((value: any) => {
     const { type } = value.getPConnect().getRawMetadata();

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/index.tsx

@@ -9,7 +9,6 @@ import StyledPegaDxilMyDetailsWrapper from './styles';
 // includes in bundle
 import { getAllFields } from './utils';
 
-
 // interface for props
 interface PegaDxilMyDetailsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -56,16 +55,8 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-    //  field.config.displayMode = 'STACKED_LARGE_VAL';
 
-    //  // Mark as status display when using pyStatusWork
-    //  if (field.config.value === '@P .pyStatusWork') {
-    //    field.type = 'TextInput';
-    //    field.config.displayAsStatus = true;
-    //  }
-    //  // @ts-ignore
-    //  return getPConnect().createComponent(field);
-      return <HighlightRender field={field} props={props} />;
+    return <HighlightRender field={field} props={props} />;
     });
   }
 
@@ -82,7 +73,8 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
       {showHighlightedData && highlightedDataArr.length > 0 && (
           <>
             <Flex
-              container={{ direction: 'row', alignItems: 'start', colGap: 10 }}
+              // @ts-ignore
+              container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
               data-testid={`highlighted-column-count-${numRegions}`}
             >
               {highlightedDataArr.map((child: any, i: number) => (
@@ -94,8 +86,9 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
       )}
       <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
        {children.map((child: any, i: number) => (
-        <Flex container={{ direction: 'column', alignItems: 'start', colGap: 0, rowGap: 1.5 }} key={`r-${i + 1}`}>
-          <DetailsRender {...child} />
+        // @ts-ignore
+        <Flex container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }} key={`r-${i + 1}`}>
+          <DetailsRender child={child} />
         </Flex>
        ))}
       </Grid>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/DetailsRender.tsx

@@ -0,0 +1,58 @@
+import { Fragment, ReactElement } from 'react';
+import { FieldValueList } from '@pega/cosmos-react-core';
+
+interface DetailsRenderProps {
+  children?: never;
+  child: NonNullable<ReactElement>;
+}
+
+const DetailsRender = (props: DetailsRenderProps) => {
+  const { child } = props;
+
+  const kids = child.props.getPConnect().getChildren();
+
+  const displayCompArr: ReactElement[] = [];
+
+  Object.values(kids).forEach((value: any) => {
+    const { type } = value.getPConnect().getRawMetadata();
+    const { hideLabel, variant, testId, label } = value
+      .getPConnect()
+      .resolveConfigProps(value.getPConnect().getConfigProps());
+
+    let displayComp;
+    const key = JSON.stringify(value.getPConnect());
+
+    if (type === 'reference') {
+      const refElement = value.getPConnect().getComponent();
+
+      displayCompArr.push(refElement);
+    } else {
+      const element = value.getPConnect().getComponent();
+      const displayEl = <Fragment key={key}>{element}</Fragment>;
+
+      const fvlStyle = {
+        myColGap: {
+          columnGap: '0'
+        }
+      };
+
+      // const myEl = <div>boo</div>;
+      displayComp = (
+        <Fragment key={key}>
+          <FieldValueList
+            style={fvlStyle.myColGap}
+            variant={hideLabel ? 'stacked' : variant}
+            data-testid={testId}
+            fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
+          />
+        </Fragment>
+      );
+
+      displayCompArr.push(displayComp);
+    }
+  });
+
+  return <>{displayCompArr}</>;
+};
+
+export default DetailsRender;

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.tsx

@@ -1,7 +1,8 @@
-import { Grid, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
 
 
 import type { PConnFieldProps } from './PConnProps';
+import DetailsRender from './DetailsRender';
 
 import StyledPegaDxilMyFormWrapper from './styles';
 
@@ -13,19 +14,41 @@ interface PegaDxilMyFormProps extends PConnFieldProps {
   children: any;
 }
 
-// Duplicated runtime code from Constellation Design System Component
-
 // 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
 function PegaDxilMyForm(props: PegaDxilMyFormProps) {
 
-  const { children = [], NumCols = '1', label, showLabel, getPConnect } = props;
+  const { children = [], NumCols = '1', label, showLabel, getPConnect, readOnly, displayMode } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   const nCols = parseInt(NumCols, 10);
 
-  // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
 
+  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
+    const numRegions = '1';
+    const gridRepeat = 'repeat('.concat(numRegions).concat(', 1fr)');
+    const gridContainer = { colGap: 0 };
+    // @ts-ignore
+    gridContainer.cols = gridRepeat;
+
+    return (
+      <StyledPegaDxilMyFormWrapper>
+        <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+          <Grid container={gridContainer} data-testid={`column-count-${numRegions}`}>
+            {children.map((child: any, i: number) => (
+              <Flex
+                // @ts-ignore
+                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                key={`r-${i + 1}`}
+              >
+                <DetailsRender child={child} />
+              </Flex>
+            ))}
+          </Grid>
+        </FieldGroup>
+      </StyledPegaDxilMyFormWrapper>
+    );
+  }
   return (
     <StyledPegaDxilMyFormWrapper>
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -17,10 +17,84 @@ const meta: Meta<typeof PegaDxilMyPageWidget> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPageWidget>;
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+const worklistData = {
+  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'
+    }
+  ]
+};
+
+window.PCore.getDataPageUtils = () => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
+  };
+};
+
+
+
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    image: configProps.image
+    image: configProps.image,
+    getPConnect: () => {
+      return {
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getLocalizedValue: value => {
+          return value;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
+      };
+    }
   };
 
 return (

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx

@@ -1,4 +1,5 @@
-import { withConfiguration } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { withConfiguration, Table } from '@pega/cosmos-react-core';
 import { AppAnnouncement as PegaAppAnnouncement } from '@pega/cosmos-react-work';
 import type { PConnFieldProps } from './PConnProps';
 
@@ -14,14 +15,13 @@ interface PegaDxilMyPageWidgetProps extends PConnFieldProps {
     image: string;
 }
 
-
-// Duplicated runtime code from Constellation Design System Component
-
 // 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
 function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
-  const { header, description, datasource = [], whatsnewlink, image } = props;
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const PConnect = getPConnect();
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -30,6 +30,48 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       return item.name;
     });
   }
+
+  // setting up columns for the work list table
+  const columns = [
+    { renderer: 'caseType', label: PConnect.getLocalizedValue('Case type', '', '') },
+    { renderer: 'insKey', label: PConnect.getLocalizedValue('Key', '', '') },
+    { renderer: 'status', label: PConnect.getLocalizedValue('Status', '', '') },
+    { renderer: 'stage', label: PConnect.getLocalizedValue('Stage', '', '') }
+  ];
+
+  // going to get data for worklist to put into a table
+  // data comes from calling a PCore function to get
+  // get data from a data page and a PConnect function
+  // to get getContextName
+  useEffect(() => {
+    const dataViewName = 'D_pyMyWorkList';
+    const context = PConnect.getContextName();
+
+    PCore.getDataPageUtils()
+      .getDataAsync(dataViewName, context)
+      // @ts-ignore
+      .then((response: any) => {
+        // table requires an index or will get setExtraStackFrame error
+        setWorklist(
+          response.data.map((entry: any, index: number) => {
+            // mapping the data into the column names
+            // MUST have an id/index or will get a setExtraStackFrame error
+            // put a key in the table
+            return {
+              caseType: entry.pxProcessName,
+              insKey: entry.pxRefObjectInsName,
+              status: entry.pyAssignmentStatus,
+              stage: entry.pxTaskLabel,
+              id: index
+            };
+          })
+        );
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  }, [PConnect]);
+
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
     <PegaAppAnnouncement
@@ -39,6 +81,12 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
+    <br></br>
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+    />
     </StyledPegaDxilMyPageWidgetWrapper>
   );