@pega/custom-dx-components 23.1.11 → 24.1.10

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

@@ -1,16 +1,52 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
+import type { Meta, StoryObj } from '@storybook/react';
 import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
 import PegaDxilMyDetails from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
+import Operator from './Operator';
 
-export default {
+const meta: Meta<typeof PegaDxilMyDetails> = {
   title: 'PegaDxilMyDetails',
-  component: PegaDxilMyDetails
+  component: PegaDxilMyDetails,
+  excludeStories: /.*Data$/,
+  parameters: {
+    type: 'Details'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyDetails>;
+
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
+const Region = props => {
+  return <></>;
+};
+
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -46,19 +82,30 @@ const renderField = resolvedProps => {
 
   if (displayAsStatus === true) val = <StatusWorkRenderer value={value} key={key} />;
 
+  const [_label] =
+    label === 'Create operator'
+      ? [configProps.createLabel, configProps.createOperator, configProps.createDateTime]
+      : label === 'Update operator'
+        ? [configProps.updateLabel, configProps.updateOperator, configProps.updateDateTime]
+        : [configProps.resolveLabel, configProps.resolveOperator, configProps.resolveDateTime];
+
   if (label === 'Create Operator')
     val = (
-      <Button
-        key={key}
-        variant='link'
-        style={
-          label !== null
-            ? { width: 'max-content', height: theme.components.input.height }
-            : undefined
-        }
-      >
-        {value.userName}
-      </Button>
+      <Operator
+        label={configProps.hideLabel ? '' : _label}
+        name={configProps.createOperator.userName}
+        id={configProps.createOperator.userId}
+        value={undefined}
+        validatemessage=''
+        hideLabel={false}
+        readOnly={false}
+        required={false}
+        disabled={false}
+        externalUser={undefined}
+        metaObj={undefined}
+        testId=''
+        helperText=''
+      />
     );
 
   if (variant === 'inline') {
@@ -77,12 +124,8 @@ const renderField = resolvedProps => {
   return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
 };
 
-export const BasePegaDxilMyDetails = () => {
+export const BasePegaDxilMyDetails: Story = args => {
   const props = {
-    template: 'MyCo_MyComponents_NewDetailsTemplate',
-    showHighlightedData: true,
-    label: 'Test Details',
-    showLabel: true,
     getPConnect: () => {
       return {
         getChildren: () => {
@@ -119,20 +162,42 @@ export const BasePegaDxilMyDetails = () => {
         setInheritedProp: () => {
           /* nothing */
         },
-        resolveConfigProps: () => {
-          /* nothing */
+        resolveConfigProps: config => {
+          return config;
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
   return (
     <>
-      <PegaDxilMyDetails {...props}>{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>
     </>
   );
 };
+
+BasePegaDxilMyDetails.args = {
+  showLabel: true,
+  label: 'Details template',
+  showHighlightedData: true
+};

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

@@ -1,15 +1,14 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
-import PropTypes from 'prop-types';
-
+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';
 
-
 // interface for props
 interface PegaDxilMyDetailsProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -18,31 +17,34 @@ interface PegaDxilMyDetailsProps 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
-export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
+function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
-  const { getPConnect, children, label, showLabel, showHighlightedData  } = props;
+  const { getPConnect, label, showLabel = true, showHighlightedData = false  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
+  // 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": 1};
-  // @ts-ignore
+
+  const gridContainer: GridContainerProps = { colGap: 6 };
   gridContainer.cols = gridRepeat;
-  // @ts-ignore
   gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  // @ts-ignore
-  gridHighlightContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridHighlightContainer.alignItems = '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) {
@@ -50,33 +52,40 @@ export default 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} getPConnect={props.getPConnect} />;
     });
   }
 
+
   return (
     <StyledPegaDxilMyDetailsWrapper>
     <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
       {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container={gridHighlightContainer}
-          data-testid={`highlighted-column-count-${numRegions}`}>
-          {highlightedDataArr.map((child: any, i: number) => (
-            <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
-          ))}
-        </Grid>
+          <>
+            <Flex
+              // @ts-ignore
+              container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
+              data-testid={`highlighted-column-count-${numRegions}`}
+            >
+              {highlightedDataArr.map((child: ReactElement, i: number) => (
+                <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
+              ))}
+            </Flex>
+            <StyledHighlightedFieldsHrLine />
+          </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
-       {children.map((child: any, i: number) => (
-        <Flex container={{ direction: 'column'}} key={`r-${i + 1}`}>
-        {child}
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
+       {children.map((child: ReactElement, i: number) => (
+
+        <Flex
+            // @ts-ignore
+            container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
+            key={`r-${i + 1}`}
+        >
+          <DetailsRender child={child} />
         </Flex>
        ))}
       </Grid>
@@ -86,16 +95,5 @@ export default function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
 }
 
-PegaDxilMyDetails.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
 
-PegaDxilMyDetails.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};
+export default withConfiguration(PegaDxilMyDetails);

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

@@ -1,5 +1,4 @@
 
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',
@@ -17,6 +16,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
+          hideLabel: true,
           displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
@@ -27,6 +27,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
+          hideLabel: true,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
@@ -36,6 +37,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
+          hideLabel: true,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
@@ -44,6 +46,7 @@ export const pyReviewRaw = {
         type: 'UserReference',
         config: {
           label: '@L Create Operator',
+          hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
           displayMode: 'STACKED_LARGE_VAL',
@@ -66,6 +69,7 @@ export const pyReviewRaw = {
     {
       name: 'A',
       type: 'Region',
+      key: 'A',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -78,17 +82,17 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
-          },
-          key: '1'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
+          }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
-          },
-          key: '2'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
+          }
         },
         {
           type: 'RadioButtons',
@@ -96,9 +100,9 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
-          },
-          key: '3'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
+          }
         }
       ]
     }
@@ -120,7 +124,6 @@ export const pyReviewResolved = {
       config: {
         value: 'New',
         label: 'Work Status',
-        displayMode: 'STACKED_LARGE_VAL',
         displayAsStatus: true
       }
     },
@@ -128,16 +131,14 @@ export const pyReviewResolved = {
       type: 'TextInput',
       config: {
         value: 'M-1002',
-        label: 'Case ID',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Case ID'
       }
     },
     {
       type: 'DateTime',
       config: {
         value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Create date/time'
       }
     },
     {
@@ -148,8 +149,7 @@ export const pyReviewResolved = {
           userId: 'conns',
           userName: 'Sara Connor'
         },
-        placeholder: 'Select...',
-        displayMode: 'STACKED_LARGE_VAL'
+        placeholder: 'Select...'
       }
     }
   ],
@@ -159,22 +159,25 @@ export const pyReviewResolved = {
 export const regionChildrenResolved = [
   {
     readOnly: true,
-    value: '',
+    value: 'Deadline',
     label: 'SLA Deadline',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Deadline'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Goal',
     label: 'SLA Goal',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Goal'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Start Time',
     label: 'SLA Start Time',
+    hideLabel: true,
     listType: 'associated',
     datasource: [
       {
@@ -190,3 +193,58 @@ export const regionChildrenResolved = [
     key: 'SLA Start Time'
   }
 ];
+
+export const operatorDetails = {
+  data: {
+    pzLoadTime: 'January 18, 2023 10:33:19 AM EST',
+    pzPageNameHash: '_pa1519192551088960pz',
+    pyOperatorInfo: {
+      pyUserName: 'french DigV2',
+      pyPosition: '',
+      pyImageInsKey: '',
+      pySkills: [
+        {
+          pySkillName: '',
+          pzIndexOwnerKey: 'DATA-ADMIN-OPERATOR-ID FRENCHTEST.DIGV2',
+          pySkillRating: 0
+        }
+      ],
+      pyReportToUserName: '',
+      pyReportTo: '',
+      pyOrganization: 'DXIL',
+      pyTitle: '',
+      pyLabel: 'frenchTest.DigV2',
+      pyEmailAddress: 'User@DigV2',
+      pyTelephone: ''
+    }
+  },
+  status: 200,
+  statusText: '',
+  headers: {
+    'content-length': '435',
+    'content-type': 'application/json;charset=UTF-8'
+  },
+  request: {}
+};
+
+export const configProps = {
+  label: 'Create operator',
+  createLabel: 'Created',
+  updateLabel: 'Updated',
+  updateDateTime: '2023-01-16T14:53:33.280Z',
+  createDateTime: '2023-01-16T14:53:33.198Z',
+  updateOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  createOperator: {
+    userId: 'admin@mediaco',
+    userName: 'admin'
+  },
+  resolveLabel: '',
+  resolveOperator: '',
+  resolveDateTime: '',
+  hideLabel: true,
+  key: '_532zx1dah',
+  displayMode: 'LABELS_LEFT'
+};

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

@@ -1,15 +1,24 @@
+// individual style, comment out above, and uncomment here and add styles
+import styled, { css } from 'styled-components';
 
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});
 
-export default styled(Configuration)``;
+export const StyledDetailsGridContainer = styled.div(() => {
+  return css`
+    margin-line-start: 1;
+  `;
+});
 
-// 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;
-//  `;
-// });
+
+export const StyledHighlightedFieldsHrLine = styled.hr(() => {
+  return css`
+    line: {
+      margin: '0.75rem 0';
+      opacity: '50%'
+    }
+  `;
+});

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

@@ -1,29 +1,27 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import PegaDxilMyEmail from './index';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
 
-export default {
+const meta: Meta<typeof PegaDxilMyEmail> = {
   title: 'PegaDxilMyEmail',
-  decorators: [withKnobs],
-  component: PegaDxilMyEmail
+  component: PegaDxilMyEmail,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyEmail = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyEmail>;
+
+export const BasePegaDxilMyEmail: Story = args => {
 
   const props = {
     value: configProps.value,
-    label: configProps.label,
-    placeholder: configProps.placeholder,
-    helperText: configProps.helperText,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
     fieldMetadata,
-
     getPConnect: () => {
       return {
         getStateProps: () => {
@@ -45,7 +43,22 @@ export const BasePegaDxilMyEmail = () => {
 
   return (
     <>
-      <PegaDxilMyEmail {...props} />
+      <PegaDxilMyEmail {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyEmail.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,
+  variant: configProps.variant,
+  validatemessage: configProps.validatemessage
+};