@pega/custom-dx-components 0.24.17 → 0.25.1

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

@@ -0,0 +1,101 @@
+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 './create-nonce';
+
+import DetailsRender from './DetailsRender';
+import HighlightRender from './HighlightRender';
+
+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
+  showLabel: boolean;
+  showHighlightedData: 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 PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
+
+  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: 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 (
+    <StyledPegaDxilMyDetailsWrapper>
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+          <>
+            <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
+        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>
+    </FieldGroup>
+    </StyledPegaDxilMyDetailsWrapper>
+  );
+
+}
+
+
+export default withConfiguration(PegaDxilMyDetails);

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

@@ -0,0 +1,248 @@
+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'
+          }
+        }
+      ]
+    }
+  ],
+  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/original/components/createAll/Launchpad/Pega_DXIL_MyDetails/styles.ts

@@ -0,0 +1,24 @@
+// 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 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/original/components/createAll/Launchpad/Pega_DXIL_MyDetails/utils.js

@@ -0,0 +1,151 @@
+/**
+ * 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) {
+  const metadata = pConnect().getRawMetadata();
+  if (!metadata.children) {
+    return [];
+  }
+
+  let allFields = [];
+
+  const makeField = (f) => ({
+    ...pConnect().resolveConfigProps(f.config),
+    type: f.type
+  });
+
+  const hasRegions = !!metadata.children[0]?.children;
+  if (hasRegions) {
+    allFields = metadata.children.map((region) =>
+      region.children.map((field) => {
+        // 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) {
+  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) => {
+    const resolvedItem = getPConnect().resolveConfigProps(item.config);
+    return resolvedItem.visibility !== false && item.type !== 'TextContent';
+  });
+
+  secondaryFieldsRaw = secondaryFieldsRaw.filter((item) => {
+    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) {
+  const defaultLayoutConfig = {
+    width: 'full',
+    fillAvailable: true,
+    minWidth: [300, 'px']
+  };
+
+  return regionData.props
+    ?.getPConnect()
+    ?.getChildren()
+    ?.map((item, index) => {
+      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) {
+  // 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
+  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  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, instructions = 'casestep') {
+  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')) {
+    /* eslint-disable no-console */
+    console.error('@PARAGRAPH annotation was not processed. Hiding custom instructions.');
+    /* eslint-enable no-console */
+    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/original/components/createAll/Launchpad/Pega_DXIL_MyEmail/config.json

@@ -0,0 +1,114 @@
+{
+  "name": "Pega_DXIL_MyEmail",
+  "label": "My Email",
+  "description": "My Email",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyEmail",
+  "type": "Field",
+  "subtype": "Text-Email",
+  "icon": "images/pz-email-active.svg",
+   "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
+  }
+}

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

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