@pega/custom-dx-components 0.24.11 → 0.24.13

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -24,7 +24,6 @@ import StyledPegaDxilMyIconButtonUrlWrapper from './styles';
 // interface for props
 interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-  countryCode: string;
 }
 
 export const textFormatter = (value: string) => {
@@ -44,9 +43,7 @@ export const textFormatter = (value: string) => {
 // to put it in a Button (shown below), so you can have a tooltip and hover style or put it
 // in a Link (shown below) as a URL.
 //
-// For the button, the click will get a list of states for a given country and display in a
-// table below.  The table display will toggle with the click of the button icon. Example shows
-// how to handle click, retrieve data from PCore and display it.
+// For the button, the click will get a list of countries and display in a table
 //
 // Globe icon is an icon placed in a Link element. The Link element to use an icon internally.  (NOTE: In general
 // the Link element shows the open icon to the left of the link text, but here we are using
@@ -62,7 +59,7 @@ export const textFormatter = (value: string) => {
 // 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 PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
-  const { value, displayMode, countryCode = 'USA', getPConnect, testId } = props;
+  const { value, displayMode, getPConnect, testId } = props;
   const [statelist, setStatelist] = useState([]);
   const [showTable, setShowTable] = useState(false);
   const [validUrl, setValidUrl] = useState('about:blank');
@@ -74,8 +71,8 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
 
    // setting up columns for the work list table
   const columns = [
-    { renderer: 'stateName', label: PConnect.getLocalizedValue('State name', '', '') },
-    { renderer: 'stateCode', label: PConnect.getLocalizedValue('State code', '', '') }
+    { renderer: 'countryName', label: PConnect.getLocalizedValue('Country Name', '', '') },
+    { renderer: 'shortName', label: PConnect.getLocalizedValue('Abbreviation', '', '') }
   ];
 
   // toggle showing table and getting table data
@@ -111,9 +108,9 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyStateList';
+    const dataViewName = 'CountryList';
     const context = PConnect.getContextName();
-    const params = { pyCountry: countryCode };
+    const params = { };
 
     // only retrieve table data if table is shown
     if (showTable) {
@@ -128,8 +125,8 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
               // MUST have an id/index or will get a setExtraStackFrame error
               // put a key in the table
               return {
-                stateName: entry.pyLabel,
-                stateCode: entry.pyStateCode,
+                countryName: entry.Name,
+                shortName: entry.ShortName,
                 id: index
               };
             })
@@ -139,7 +136,7 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [PConnect, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -161,12 +158,11 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
       />
       <Label style={{ margin: '0.1rem' }}>
         {' '}
-        {PConnect.getLocalizedValue('State list for', '', '')}{' '}
-        {PConnect.getLocalizedValue(`${countryCode}`, '', '')}{' '}
+        {PConnect.getLocalizedValue('List of countries', '', '')}{' '}
       </Label>
       <Button
         icon
-        label={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}
+        label={PConnect.getLocalizedValue('Click to show/hide country list', '', '')}
         variant='link'
         compact={false}
         onClick={showHideTable}

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/mock.ts

@@ -1,5 +1,5 @@
 
 // @ts-nocheck
 export const configProps = {
-  countryCode: 'USA'
+
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPage/localizations.json

@@ -1,4 +1,6 @@
 {
-  "Get next work" : "Get next work",
-  "No task currently available" : "No task currently available"
+  "fields" : {
+    "Get next work" : "Get next work",
+    "No task currently available" : "No task currently available"
+  }
 }

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

@@ -24,22 +24,22 @@ if (!window.PCore) {
 const worklistData = {
   data: [
     {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-8002',
-      pyAssignmentStatus: 'New',
-      pxTaskLabel: 'Details'
+      CaseName: 'Loan',
+      BusinessID: ' A-8002',
+      ProcessName: 'New',
+      TaskName: 'Details'
     },
     {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-7001',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Info'
+      CaseName: 'Loan',
+      BusinessID: ' A-7001',
+      ProcessName: 'Open',
+      TaskName: 'Info'
     },
     {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-9000',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Amount'
+      CaseName: 'Loan',
+      BusinessID: ' A-9000',
+      ProcessName: 'Open',
+      TaskName: 'Amount'
     }
   ]
 };
@@ -97,7 +97,7 @@ export const BasePegaDxilMyPageWidget: Story = args => {
     }
   };
 
-return (
+  return (
     <>
       <PegaDxilMyPageWidget {...props} {...args} />
     </>

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

@@ -44,7 +44,7 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyMyWorkList';
+    const dataViewName = 'MyWorkList';
     const context = PConnect.getContextName();
 
     PCore.getDataPageUtils()
@@ -58,10 +58,10 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
             // 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,
+              caseType: entry.CaseName,
+              insKey: entry.BusinessID,
+              status: entry.ProcessName,
+              stage: entry.TaskName,
               id: index
             };
           })
@@ -81,7 +81,7 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
-    <br></br>
+    <br />
     <Table
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx

@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
   const displayCompArr: ReactElement[] = [];
 
-  Object.values(kids).forEach((value: any) => {
+  Object.values(kids).forEach((value: any, i :number) => {
     const { type } = value.getPConnect().getRawMetadata();
     const { hideLabel, variant, testId, label } = value
       .getPConnect()
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
     let displayComp;
     const key = JSON.stringify(value.getPConnect());
+    const key1 = key.concat(`-${i}`);
 
     if (type === 'reference') {
       const refElement = value.getPConnect().getComponent();
@@ -30,17 +31,10 @@ const DetailsRender = (props: DetailsRenderProps) => {
       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}>
+        <Fragment key={key1}>
           <FieldValueList
-            style={fvlStyle.myColGap}
+            style={{ columnGap: '0'}}
             variant={hideLabel ? 'stacked' : variant}
             data-testid={testId}
             fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/HighlightRender.tsx

@@ -1,10 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
+import type { PConnProps } from './PConnProps';
 
-const HighlightRender = (data: any) => {
-  const { getPConnect } = data.props;
-  const { field } = data;
+interface HighlightRenderProps extends PConnProps {
+  field?: any;
+}
+
+const HighlightRender = (props: HighlightRenderProps) => {
+  const { getPConnect, field } = props;
 
   field.config['displayMode'] = 'DISPLAY_ONLY';
 
@@ -16,20 +20,12 @@ const HighlightRender = (data: any) => {
 
   const configProps = getPConnect().resolveConfigProps(field.config);
 
-  // field.config = configProps;
-
+  // @ts-ignore
   const reactField = getPConnect().createComponent(field);
-  // const reactField = field.getPConnect().getComponent();
-
-  const styles = {
-    myWidth: {
-      width: 'auto'
-    }
-  };
 
   return (
     <FieldValueList
-      style={styles.myWidth}
+      style={{ width: 'auto' }}
       variant='stacked'
       data-testid={field.testId}
       fields={[

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx

@@ -18,6 +18,11 @@ const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {
 
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnDetails>;
+
+const Region = props => {
+  return <></>;
+};
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -122,24 +127,54 @@ export const BasePegaDxilMyTwoColumnDetails: Story = args => {
         setInheritedProp: () => {
           /* nothing */
         },
-        resolveConfigProps: () => {
-          /* nothing */
+        resolveConfigProps: config => {
+          return config;
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-  const regionBChildren = pyReviewRaw.children[1].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
 
   return (
     <PegaDxilMyTwoColumnDetails {...props} {...args}>
-      {regionAChildren}
-      {regionBChildren}
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[0].children.map((child, index) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[0].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: config =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[1].children.map((child, index) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[1].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: config =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[1].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
     </PegaDxilMyTwoColumnDetails>
   );
 };

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/index.tsx

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Fragment, Children, ReactElement } from 'react';
+import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 
-import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
+import StyledPegaDxilMyTwoColumnDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
 
 // includes in bundle
 import { getAllFields } from './utils';
@@ -14,40 +14,31 @@ interface PegaDxilMyTwoColumnDetailsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   showLabel: boolean;
   showHighlightedData: boolean;
-  children: any;
+  children: ReactElement[];
 }
 
 // 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 PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
 
-  const { getPConnect, children, label, showLabel = true, showHighlightedData = false  } = props;
+  const { getPConnect, label, children, showLabel = true, showHighlightedData = false  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   // update children with readonly
-  // eslint-disable-next-line guard-for-in
-  for (const index in children) {
-    const kid = children[index];
-    kid.props.getPConnect().setInheritedProp('readOnly', true);
-    kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-  }
+  Children.toArray(children).forEach(child => {
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('readOnly', true);
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  });
 
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { colGap: 0, 'margin-line-start': 0 };
-  // @ts-ignore
+
+  const gridContainer: GridContainerProps = { colGap: 0 };
   gridContainer.cols = gridRepeat;
-  // @ts-ignore
   gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  // @ts-ignore
-  gridHighlightContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridHighlightContainer.alignItems = 'flex-start';
-  // @ts-ignore
-  gridHighlightContainer.pad = [0, 0, 2, 0];
-
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
@@ -55,26 +46,10 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
     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} getPConnect={props.getPConnect} />;
     });
   }
 
-  const hrStyle = {
-    line: {
-      margin: '0.75rem 0',
-      opacity: '50%'
-    }
-  };
-
   return (
     <StyledPegaDxilMyTwoColumnDetailsWrapper>
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
@@ -88,10 +63,13 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
                 <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
               ))}
             </Flex>
-            <hr style={hrStyle.line} />
+            <StyledHighlightedFieldsHrLine />
           </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
        {children.map((child: any, i: number) => (
         <Flex
           // @ts-ignore

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/mock.ts

@@ -16,6 +16,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
@@ -26,6 +27,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
@@ -35,6 +37,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
@@ -43,6 +46,7 @@ export const pyReviewRaw = {
         type: 'UserReference',
         config: {
           label: '@L Create Operator',
+          hideLabel: false,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
           displayMode: 'STACKED_LARGE_VAL',

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/styles.ts

@@ -6,3 +6,18 @@ export default styled.div(() => {
     margin: 0px 0;
   `;
 });
+
+export const StyledDetailsGridContainer = styled.div(() => {
+  return css`
+    margin-line-start: 1;
+  `;
+});
+
+export const StyledHighlightedFieldsHrLine = styled.hr(() => {
+  return css`
+    line: {
+      margin: '0.75rem 0';
+      opacity: '50%'
+    }
+  `;
+});