@pega/custom-dx-components 0.24.11 → 0.24.13

package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.stories.tsx.mustache

@@ -0,0 +1,112 @@
+
+/* eslint-disable react/jsx-no-useless-fragment */
+// @ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {{COMPONENT_CLASS_NAME}} from './index';
+
+
+import configProps from './mock';
+
+const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
+  title: '{{COMPONENT_CLASS_NAME}}',
+  component: {{COMPONENT_CLASS_NAME}},
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+const worklistData = {
+  data: [
+    {
+      CaseName: 'Loan',
+      BusinessID: ' A-8002',
+      ProcessName: 'New',
+      TaskName: 'Details'
+    },
+    {
+      CaseName: 'Loan',
+      BusinessID: ' A-7001',
+      ProcessName: 'Open',
+      TaskName: 'Info'
+    },
+    {
+      CaseName: 'Loan',
+      BusinessID: ' A-9000',
+      ProcessName: 'Open',
+      TaskName: 'Amount'
+    }
+  ]
+};
+
+window.PCore.getDataPageUtils = () => {
+  return {
+    getDataAsync: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    }
+  };
+};
+
+
+
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+
+  const props = {
+    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 (
+    <>
+      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+    </>
+  );
+};
+
+Base{{COMPONENT_CLASS_NAME}}.args = {
+  header: configProps.header,
+  description: configProps.description,
+  whatsnewlink: configProps.whatsnewlink,
+  datasource: configProps.datasource,
+};

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

@@ -0,0 +1,95 @@
+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';
+
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
+// interface for props
+interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+    datasource: Array<any>;
+    header: string;
+    description: string;
+    whatsnewlink: string;
+    image: 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 {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
+
+  const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
+  const [worklist, setWorklist] = useState([]);
+  const PConnect = getPConnect();
+  let details = [];
+  // @ts-ignore
+  if (datasource && datasource.source) {
+    // @ts-ignore
+    details = datasource.source.map((item) => {
+      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 = 'MyWorkList';
+    const context = PConnect.getContextName();
+
+    PCore.getDataPageUtils()
+      .getDataAsync(dataViewName, context, {}, null, null)
+      // @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.CaseName,
+              insKey: entry.BusinessID,
+              status: entry.ProcessName,
+              stage: entry.TaskName,
+              id: index
+            };
+          })
+        );
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  }, [PConnect]);
+
+  return (
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <PegaAppAnnouncement
+      heading={header}
+      description={description}
+      details={details}
+      whatsNewLink={whatsnewlink}
+      image={image.replace(/ /g, '+')}
+    />
+    <br />
+    <Table
+      title={PConnect.getLocalizedValue('Work list', '', '')}
+      columns={columns}
+      data={worklist}
+    />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+  );
+
+}
+
+export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Launchpad/Widget/PAGE/mock.ts.mustache

@@ -0,0 +1,25 @@
+
+// @ts-nocheck
+const configProps = {
+  label: 'App announcement',
+  header: 'Announcements',
+  description: 'Welcome to MediaCo Application for testing SDK frameworks.',
+  whatsnewlink: 'https://design.pega.com',
+  image:
+    'data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8 PC9zdmc ',
+  datasource: {
+    source: [
+      {
+        name: 'New React based UI rendering'
+      },
+      {
+        name: 'Support for followers and recents'
+      },
+      {
+        name: 'New authoring experience'
+      }
+    ],
+    fields: {}
+  }
+};
+export default configProps;

package/src/tasks/create/templates/Launchpad/Widget/PAGE/styles.ts.mustache

@@ -0,0 +1,8 @@
+// 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;
+  `;
+});

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

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

package/src/tasks/publish/helper.js

@@ -84,11 +84,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

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

@@ -70,11 +70,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/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/Constellation/Pega_DXIL_MyDetails/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/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -20,6 +20,10 @@ const meta: Meta<typeof PegaDxilMyDetails> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDetails>;
 
+const Region = props => {
+  return <></>;
+};
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -124,20 +128,36 @@ export const BasePegaDxilMyDetails: Story = args => {
         setInheritedProp: () => {
           /* nothing */
         },
-        resolveConfigProps: () => {
-          /* nothing */
+        resolveConfigProps: config => {
+          return config;
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
   return (
     <>
-      <PegaDxilMyDetails {...props} {...args}>{regionAChildren}</PegaDxilMyDetails>
+      <PegaDxilMyDetails {...props} {...args}>
+        <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])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+      </PegaDxilMyDetails>
     </>
   );
 };

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/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 StyledPegaDxilMyDetailsWrapper from './styles';
+import StyledPegaDxilMyDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
 
 // includes in bundle
 import { getAllFields } from './utils';
@@ -21,33 +21,30 @@ interface PegaDxilMyDetailsProps extends PConnFieldProps {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
-  const { getPConnect, children, label, showLabel = true, showHighlightedData = false  } = props;
+  const { getPConnect, label, 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');
+  // storybook doesn't get children of 1 as an array of 1
+  let { children } = props;
+  if (!Array.isArray(children)) {
+    children = Children.toArray(children);
   }
 
+  // update children with readonly
+  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,17 +52,10 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-
-    return <HighlightRender field={field} props={props} />;
+      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
     });
   }
 
-  const hrStyle = {
-    line: {
-      margin: '0.75rem 0',
-      opacity: '50%'
-    }
-  };
 
   return (
     <StyledPegaDxilMyDetailsWrapper>
@@ -77,15 +67,18 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
               container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
               data-testid={`highlighted-column-count-${numRegions}`}
             >
-              {highlightedDataArr.map((child: any, i: number) => (
+              {highlightedDataArr.map((child: ReactElement, i: number) => (
                 <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
               ))}
             </Flex>
-            <hr style={hrStyle.line} />
+            <StyledHighlightedFieldsHrLine />
           </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
-       {children.map((child: any, i: number) => (
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
+       {children.map((child: ReactElement, i: number) => (
 
         <Flex
             // @ts-ignore

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/mock.ts

@@ -17,6 +17,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
@@ -27,6 +28,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
@@ -36,6 +38,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
+          hideLabel: false,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
@@ -44,6 +47,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/Constellation/Pega_DXIL_MyDetails/styles.ts

@@ -6,3 +6,19 @@ 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%'
+    }
+  `;
+});

package/tests/assets/components/createAll/Constellation/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/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -97,11 +97,11 @@ export const BasePegaDxilMyPageWidget: Story = args => {
     }
   };
 
-return (
-    <>
-      <PegaDxilMyPageWidget {...props} {...args} />
-    </>
-  );
+  return (
+      <>
+        <PegaDxilMyPageWidget {...props} {...args} />
+      </>
+    );
 };
 
 BasePegaDxilMyPageWidget.args = {

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

@@ -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/Constellation/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 }]}