@pega/custom-dx-components 0.242.17 → 0.242.18

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

@@ -1,89 +0,0 @@
-import { Fragment, Children, type ReactElement } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration, type GridContainerProps } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from './PConnProps';
-import DetailsRender from './DetailsRender';
-import HighlightRender from './HighlightRender';
-
-import StyledPegaDxilMyTwoColumnDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
-
-// includes in bundle
-import { getAllFields } from './utils';
-
-// interface for props
-interface PegaDxilMyTwoColumnDetailsProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  showLabel: boolean;
-  showHighlightedData: boolean;
-  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, label, children, showLabel = true, showHighlightedData = false  } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  // 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: GridContainerProps = { colGap: 6 };
-  gridContainer.cols = gridRepeat;
-  gridContainer.alignItems = 'start';
-
-  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
-  let highlightedDataArr = [];
-  if (showHighlightedData) {
-    // @ts-ignore
-    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
-    // @ts-ignore
-    highlightedDataArr = highlightedData.map((field) => {
-      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
-    });
-  }
-
-  return (
-    <StyledPegaDxilMyTwoColumnDetailsWrapper>
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      {showHighlightedData && highlightedDataArr.length > 0 && (
-          <>
-            <Flex
-              container={{ direction: 'row', alignItems: 'start', colGap: 10 }}
-              data-testid={`highlighted-column-count-${numRegions}`}
-            >
-              {highlightedDataArr.map((child: any, i: number) => (
-                <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
-              ))}
-            </Flex>
-            <StyledHighlightedFieldsHrLine />
-          </>
-      )}
-      <Grid
-        as={StyledDetailsGridContainer}
-        container={gridContainer}
-        data-testid={`column-count-${numRegions}`} >
-       {children.map((child: any, i: number) => (
-        <Flex
-          // @ts-ignore
-          container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
-          key={`r-${i + 1}`}
-        >
-          <DetailsRender child={child} />
-        </Flex>
-       ))}
-      </Grid>
-    </FieldGroup>
-    </StyledPegaDxilMyTwoColumnDetailsWrapper>
-  );
-
-}
-
-export default withConfiguration(PegaDxilMyTwoColumnDetails);

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

@@ -1,290 +0,0 @@
-
-// @ts-nocheck
-export const pyReviewRaw = {
-  name: 'pyReview',
-  type: 'View',
-  config: {
-    template: 'Details',
-    ruleClass: 'MyCo-MyCompon-Work-MyComponents',
-    showLabel: true,
-    label: '@L Details',
-    localeReference: '@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
-    showHighlightedData: true,
-    highlightedData: [
-      {
-        type: 'TextInput',
-        config: {
-          value: '@P .pyStatusWork',
-          label: '@L Work Status',
-          hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
-          displayAsStatus: true,
-          key: 'pyStatusWork'
-        }
-      },
-      {
-        type: 'TextInput',
-        config: {
-          value: '@P .pyID',
-          label: '@L Case ID',
-          hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pyID'
-        }
-      },
-      {
-        type: 'DateTime',
-        config: {
-          value: '@P .pxCreateDateTime',
-          label: '@L Create date/time',
-          hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pxCreateDateTime'
-        }
-      },
-      {
-        type: 'UserReference',
-        config: {
-          label: '@L Create Operator',
-          hideLabel: true,
-          value: '@USER .pxCreateOperator',
-          placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL',
-          key: 'pxCreateOperator'
-        }
-      }
-    ],
-    inheritedProps: [
-      {
-        prop: 'label',
-        value: '@L Details'
-      },
-      {
-        prop: 'showLabel',
-        value: true
-      }
-    ]
-  },
-  children: [
-    {
-      name: 'A',
-      type: 'Region',
-      key: 'A',
-      getPConnect: () => {
-        return {
-          getRawMetadata: () => {
-            return pyReviewRaw.children[0];
-          }
-        };
-      },
-      children: [
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLADeadline',
-            label: '@L SLA Deadline',
-            key: 'pySLADeadline'
-          }
-        },
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLAGoal',
-            label: '@L SLA Goal',
-            key: 'pySLAGoal'
-          }
-        },
-        {
-          type: 'RadioButtons',
-          config: {
-            value: '@P .pySLAStartTime',
-            label: '@L SLA Start Time',
-            listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime',
-            key: 'pySLAStartTime'
-          }
-        }
-      ]
-    },
-    {
-      name: 'B',
-      type: 'Region',
-      key: 'B',
-      getPConnect: () => {
-        return {
-          getRawMetadata: () => {
-            return pyReviewRaw.children[0];
-          }
-        };
-      },
-      children: [
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLADeadline',
-            label: '@L SLA Deadline',
-            key: 'pySLADeadline'
-          }
-        },
-        {
-          type: 'DateTime',
-          config: {
-            value: '@P .pySLAGoal',
-            label: '@L SLA Goal',
-            key: 'pySLAGoal'
-          }
-        },
-        {
-          type: 'RadioButtons',
-          config: {
-            value: '@P .pySLAStartTime',
-            label: '@L SLA Start Time',
-            listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime',
-            key: 'pySLAStartTime'
-          }
-        }
-      ]
-    }
-  ],
-  classID: 'MyCo-MyCompon-Work-MyComponents'
-};
-
-export const pyReviewResolved = {
-  readOnly: true,
-  template: 'Details',
-  ruleClass: 'MyCo-MyCompon-Work-MyComponents',
-  showLabel: true,
-  label: 'Details',
-  localeReference: 'MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
-  showHighlightedData: true,
-  highlightedData: [
-    {
-      type: 'TextInput',
-      config: {
-        value: 'New',
-        label: 'Work Status',
-        displayAsStatus: true
-      }
-    },
-    {
-      type: 'TextInput',
-      config: {
-        value: 'M-1002',
-        label: 'Case ID'
-      }
-    },
-    {
-      type: 'DateTime',
-      config: {
-        value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time'
-      }
-    },
-    {
-      type: 'UserReference',
-      config: {
-        label: 'Create Operator',
-        value: {
-          userId: 'conns',
-          userName: 'Sara Connor'
-        },
-        placeholder: 'Select...'
-      }
-    }
-  ],
-  displayMode: 'LABELS_LEFT'
-};
-
-export const regionChildrenResolved = [
-  {
-    readOnly: true,
-    value: 'Deadline',
-    label: 'SLA Deadline',
-    hideLabel: true,
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Deadline'
-  },
-  {
-    readOnly: true,
-    value: 'Goal',
-    label: 'SLA Goal',
-    hideLabel: true,
-    displayMode: 'LABELS_LEFT',
-    key: 'SLA Goal'
-  },
-  {
-    readOnly: true,
-    value: 'Start Time',
-    label: 'SLA Start Time',
-    hideLabel: true,
-    listType: 'associated',
-    datasource: [
-      {
-        key: 'AssignmentCreation',
-        value: 'The creation time of the Assignment'
-      },
-      {
-        key: 'CurrentTime',
-        value: 'Current Date Time'
-      }
-    ],
-    displayMode: 'LABELS_LEFT',
-    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/Constellation/Pega_DXIL_MyTwoColumnDetails/utils.ts

@@ -1,153 +0,0 @@
-/**
- * Given the PConnect object of a Template component, retrieve the children
- * metadata of all regions.
- * @param {Function} pConnect PConnect of a Template component.
- */
-export function getAllFields(pConnect: Function) {
-  const metadata = pConnect().getRawMetadata();
-  if (!metadata.children) {
-    return [];
-  }
-
-  let allFields = [];
-
-  const makeField = (f: any) => ({
-    ...pConnect().resolveConfigProps(f.config),
-    type: f.type
-  });
-
-  const hasRegions = !!metadata.children[0]?.children;
-  if (hasRegions) {
-    allFields = metadata.children.map((region: any) =>
-      region.children.map((field: any) => {
-        // Do not resolve the config props if is status work, instead create component here as status badge and mark as status display
-        if (field.config?.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-          return pConnect().createComponent(field);
-        }
-
-        return makeField(field);
-      })
-    );
-  } else {
-    allFields = metadata.children.map(makeField);
-  }
-
-  return allFields;
-}
-
-
-
-export function getFilteredFields(getPConnect: Function) {
-  let primaryFieldsRaw;
-  let secondaryFieldsRaw;
-  const metadata = getPConnect().getRawMetadata();
-  const hasRegions = !!metadata.children[0]?.children;
-  if (hasRegions) {
-    primaryFieldsRaw = metadata.children[0].children;
-    secondaryFieldsRaw = metadata.children[1].children;
-  } else {
-    [primaryFieldsRaw, secondaryFieldsRaw] = metadata.children;
-  }
-
-  // Filter out fields that are not visible and unsupported types for primary fields (for CaseSummary)
-  primaryFieldsRaw = primaryFieldsRaw.filter((item: any) => {
-    const resolvedItem = getPConnect().resolveConfigProps(item.config);
-    return resolvedItem.visibility !== false && item.type !== 'TextContent';
-  });
-
-  secondaryFieldsRaw = secondaryFieldsRaw.filter((item: any) => {
-    const resolvedItem = getPConnect().resolveConfigProps(item.config);
-    return resolvedItem.visibility !== false && item.type !== 'TextContent';
-  });
-
-  return [primaryFieldsRaw, secondaryFieldsRaw];
-}
-
-/**
- * Returns ConfigurableLayout mapped content. With pre-populated default layout configs.
- * @param {object[]} regionData template children item.
- * @returns {object[]} ConfigurableLayout content.
- */
-export function getLayoutDataFromRegion(regionData: any) {
-  const defaultLayoutConfig = {
-    width: 'full',
-    fillAvailable: true,
-    minWidth: [300, 'px']
-  };
-
-  return regionData.props
-    ?.getPConnect()
-    ?.getChildren()
-    ?.map((item: any, index: any) => {
-      const itemPConnect = item?.getPConnect();
-
-      return {
-        id: itemPConnect?.getComponentName() ? `${itemPConnect.getComponentName()}--${index}` : `item--${index}`,
-        content: itemPConnect?.getComponent(),
-        layoutConfig: {
-          ...defaultLayoutConfig,
-          ...itemPConnect?.getConfigProps().layoutConfig
-        }
-      };
-    });
-}
-
-/**
- * Determine if the current view is the view of the case step/assignment.
- * @param {Function} pConnect PConnect object for the component
- */
-export function getIsAssignmentView(pConnect: Function) {
-  // Get caseInfo content from the store which contains the view info about the current assignment/step
-  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
-  // @ts-ignore
-  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
-  // @ts-ignore
-  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
-
-  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
-
-  // Get the info about the current view from pConnect
-  // @ts-ignore
-  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
-
-  return assignmentViewId === currentViewId;
-}
-
-/**
- * A hook that gets the instructions content for a view.
- * @param {Function} pConnect PConnect object for the component
- * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
- */
-export function getInstructions(pConnect: Function, instructions = 'casestep') {
-  // @ts-ignore
-  const caseStepInstructions = pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
-
-  // Determine if this view is the current assignment/step view
-  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
-
-  // Case step instructions
-  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
-    return caseStepInstructions;
-  }
-
-  // No instructions
-  if (instructions === 'none') {
-    return undefined;
-  }
-
-  // If the annotation wasn't processed correctly, don't return any instruction text
-  if (instructions?.startsWith('@PARAGRAPH')) {
-    console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
-    return undefined;
-  }
-
-  // Custom instructions from the view
-  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
-  // it is evaluated by core logic to the content
-  if (instructions !== 'casestep' && instructions !== 'none') {
-    return instructions;
-  }
-  return undefined;
-}

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

@@ -1,73 +0,0 @@
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
-
-import type { PConnFieldProps } from './PConnProps';
-import DetailsRender from './DetailsRender';
-
-import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
-
-// interface for props
-interface PegaDxilMyTwoColumnFormProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  showLabel: boolean;
-  children: any;
-}
-
-// 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 PegaDxilMyTwoColumnForm(props: PegaDxilMyTwoColumnFormProps) {
-
-
-  const { children = [], label, showLabel, getPConnect, readOnly, displayMode  } = props;
-  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
-
-  const numRegions = children?.length;
-  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = {"colGap" : 6};
-  // @ts-ignore
-  gridContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridContainer.alignItems = 'start';
-
-  const flexContainer = {direction: 'column'};
-  // @ts-ignore
-  flexContainer.gap = 2;
-
-  if (readOnly && readOnly === true && displayMode && displayMode === 'DISPLAY_ONLY') {
-    return (
-      <StyledPegaDxilMyTwoColumnFormWrapper>
-        <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: 1, rowGap: 1.5 }}
-                key={`r-${i + 1}`}
-              >
-                <DetailsRender child={child} />
-              </Flex>
-            ))}
-          </Grid>
-        </FieldGroup>
-      </StyledPegaDxilMyTwoColumnFormWrapper>
-    );
-  }
-
-  return (
-    <StyledPegaDxilMyTwoColumnFormWrapper>
-      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-        <Grid container={gridContainer}>
-        {children.map((child: any, i: number) => (
-          // @ts-ignore
-          <Flex container={flexContainer} key={`r-${i + 1}`}>
-          {child}
-          </Flex>
-        ))}
-        </Grid>
-      </FieldGroup>
-    </StyledPegaDxilMyTwoColumnFormWrapper>
-  );
-
-}
-
-
-export default withConfiguration(PegaDxilMyTwoColumnForm);

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

@@ -1,62 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import type { Meta, StoryObj } from '@storybook/react';
-
-import PegaDxilMyUrl from './index';
-import { stateProps, configProps } from './mock';
-
-const meta: Meta<typeof PegaDxilMyUrl> = {
-  title: 'PegaDxilMyUrl',
-  component: PegaDxilMyUrl,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyUrl>;
-
-export const BasePegaDxilMyUrl: Story = args => {
-
-  const props = {
-    value: configProps.value,
-    hasSuggestions: configProps.hasSuggestions,
-    getPConnect: () => {
-      return {
-        getStateProps: () => {
-          return stateProps;
-        },
-        getActionsApi: () => {
-          return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
-      };
-    }
-  };
-
-  return (
-    <>
-      <PegaDxilMyUrl {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyUrl.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
-};