@pega/custom-dx-components 26.1.10 → 26.1.11-alpha-0.2

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

@@ -1,206 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-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, operatorDetails, configProps } from './mock';
-import StatusWorkRenderer from './StatusWork';
-import Operator from './Operator';
-import type C11nEnv from '@pega/pcore-pconnect-typedefs/interpreter/c11n-env';
-
-const meta: Meta<typeof PegaDxilMyDetails> = {
-  title: 'PegaDxilMyDetails',
-  component: PegaDxilMyDetails,
-  excludeStories: /.*Data$/,
-  parameters: {
-    type: 'Details'
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyDetails>;
-
-if (!window.PCore) {
-  window.PCore = {} as any;
-}
-
-
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: (value: any) => {
-      return value;
-    }
-  } as any;
-};
-
-window.PCore.getUserApi = () => {
-  return {
-    getOperatorDetails: () => {
-      return new Promise(resolve => {
-        resolve(operatorDetails);
-      });
-    }
-  } as any;
-};
-
-const Region = (props: any) => {
-  return <></>;
-};
-
-
-const renderField = (resolvedProps: any) => {
-  const {
-    displayAsStatus = false,
-    displayMode,
-    value = '',
-    label = '',
-    key,
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    theme = useTheme()
-  } = resolvedProps;
-
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
-
-  let val =
-    value !== '' ? (
-      <Text variant='h1' as='span' key={key}>
-        {value}
-      </Text>
-    ) : (
-      ''
-    );
-
-  if (label === 'Create date/time')
-    val = (
-      <DateTimeDisplay
-        value={value}
-        variant='datetime'
-        format='long'
-        clockFormat={undefined}
-        key={key}
-      />
-    );
-
-  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 = (
-      <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=''
-        getPConnect={function (): C11nEnv {
-          throw new Error('Function not implemented.');
-        } }      />
-    );
-
-  if (variant === 'inline') {
-    val = value || (
-      <span aria-hidden='true' key={key}>
-        &ndash;&ndash;
-      </span>
-    );
-  } else {
-    val = (
-      <Text variant='h1' as='span' key={key}>
-        {val}
-      </Text>
-    );
-  }
-  return <FieldValueList variant={variant} fields={[{ name: label, value: val }]} key={key} />;
-};
-
-export const BasePegaDxilMyDetails: Story = (args: any) => {
-  const props = {
-    getPConnect: () => {
-      return {
-        getChildren: () => {
-          return pyReviewRaw.children;
-        },
-        getRawMetadata: () => {
-          return pyReviewRaw;
-        },
-        getContextName: () => {
-          return 'app/primary_1';
-        },
-        getInheritedProps: () => {
-          return pyReviewRaw.config.inheritedProps;
-        },
-        createComponent: (config: { config: { value: any; }; }) => {
-          // eslint-disable-next-line default-case
-          switch (config.config.value) {
-            case '@P .pyStatusWork':
-              return renderField(pyReviewResolved.highlightedData[0].config);
-            case '@P .pyID':
-              return renderField(pyReviewResolved.highlightedData[1].config);
-            case '@P .pxCreateDateTime':
-              return renderField(pyReviewResolved.highlightedData[2].config);
-            case '@USER .pxCreateOperator':
-              return renderField(pyReviewResolved.highlightedData[3].config);
-            case '@P .pySLADeadline':
-              return renderField(regionChildrenResolved[0]);
-            case '@P .pySLAGoal':
-              return renderField(regionChildrenResolved[1]);
-            case '@P .pySLAStartTime':
-              return renderField(regionChildrenResolved[2]);
-          }
-        },
-        setInheritedProp: () => {
-          /* nothing */
-        },
-        resolveConfigProps: (config: any) => {
-          return config;
-        }
-      };
-    }
-  };
-
-  return (
-    <>
-      <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: any) =>
-                        props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
-                    })
-                  };
-                })
-            })
-          }}
-        />
-      </PegaDxilMyDetails>
-    </>
-  );
-};
-
-BasePegaDxilMyDetails.args = {
-  showLabel: true,
-  label: 'Details template',
-  showHighlightedData: true
-};

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyDetails/demo.test.tsx

@@ -1,47 +0,0 @@
-// import { expect, test } from '@jest/globals';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { composeStories } from '@storybook/react';
-import '@testing-library/jest-dom';
-
-import * as DemoStories from './demo.stories';
-
-
-
-const { BasePegaDxilMyDetails } = composeStories(DemoStories);
-
-test('renders PegaDxilMyDetails', async () => {
-  render(<BasePegaDxilMyDetails />);
-  expect(await screen.findByText('Details template')).toBeVisible();
-  expect(await screen.findByText('Work Status')).toBeVisible();
-  expect(await screen.findByText('Case ID')).toBeVisible();
-  expect(await screen.findByText('Create date/time')).toBeVisible();
-  expect(await screen.findByText('Create Operator')).toBeVisible();
-
-  // expect(await screen.findByText('New')).toBeVisible();
-
-  expect(await screen.findByText('M-1002')).toBeVisible();
-  expect(await screen.findByText('December 11, 2022 at 8:06:27 PM')).toBeVisible();
-
-  expect(await screen.findByText('SLA Deadline')).toBeVisible();
-  expect(await screen.findByText('SLA Goal')).toBeVisible();
-  expect(await screen.findByText('SLA Start Time')).toBeVisible();
-
-  expect(await screen.findByText('Deadline')).toBeVisible();
-  expect(await screen.findByText('Goal')).toBeVisible();
-  expect(await screen.findByText('Start Time')).toBeVisible();
-
-  const frenchBefore = screen.queryByText('french DigV2');
-  expect(frenchBefore).not.toBeInTheDocument();
-
-  // admin button
-  const adminButton = screen.getByRole('button');
-  fireEvent.click(adminButton);
-
-  const frenchArr = await screen.findAllByText('french DigV2');
-  expect(frenchArr[0]).toBeVisible();
-  expect(frenchArr[1]).toBeVisible();
-
-
-
-
-});

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

@@ -1,101 +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 './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

@@ -1,248 +0,0 @@
-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

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