@pega/custom-dx-components 24.1.11 → 24.2.10

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPage/utils.ts

@@ -1,242 +0,0 @@
-import { createUID } from '@pega/cosmos-react-core';
-
-// import { LazyMap as LazyComponentMap } from '../../components_map';
-
-const LazyComponentMap = {};
-
-/**
- * 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;
-}
-
-/**
- * A helper function to create an object consisting react component as per the type.
- * This is used by CaseSummary template.
- * @param {object} configObject Object containing meta information for the particular field authored
- * @param {Function} getPConnect PConnect function passed along to other components.
- * @param {string} displayMode displayMode string contains information about the layout of component in review mode.
- */
-export function prepareComponentInCaseSummary(configObject: any, getPConnect: Function, displayMode: string) {
-  const { config, children } = configObject;
-  let { type } = configObject;
-  const caseSummaryComponentObject = {};
-  let showAddressLabel = true;
-  if (config && config.value === '@P .pyStatusWork') {
-    config.displayAsStatus = true;
-    type = 'TextInput'; // force the type to be TextInput for status field.
-    // As TextInput is loaded forcefully sometimes, TextInput component might not be available in lazy map.
-    // Load TextInput if it is not available.
-    // @ts-ignore
-    if (!LazyComponentMap[type]) {
-      PCore.getAssetLoader().getLoader('component-loader')([type]);
-    }
-  }
-
-  // @ts-ignore
-  caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-    label: config.label
-  }).label;
-  if (type === 'CaseOperator') {
-     // @ts-ignore
-    switch (caseSummaryComponentObject.name) {
-      case 'Create operator':
-         // @ts-ignore
-        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-          createLabel: config.createLabel
-        }).createLabel;
-        break;
-      case 'Update operator':
-         // @ts-ignore
-        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-          updateLabel: config.updateLabel
-        }).updateLabel;
-        break;
-      default:
-         // @ts-ignore
-        caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-          resolveLabel: config.resolveLabel
-        }).resolveLabel;
-        break;
-    }
-  } else if (type === 'Checkbox') {
-     // @ts-ignore
-    caseSummaryComponentObject.name = getPConnect().resolveConfigProps({
-      label: config.caption
-    }).label;
-  } else if (type === 'Address') {
-    showAddressLabel = false;
-  }
-  const createdComponent = getPConnect().createComponent({
-    type,
-    children: children ? [...children] : [],
-    showAddressLabel,
-    config: {
-      ...config,
-      hideLabel: true,
-      key: createUID() // Need a unique key on render of the summary so that the component is recreated each time
-    }
-  });
-  createdComponent.props.getPConnect().setInheritedProp('displayMode', displayMode);
-  if (type === 'Address') {
-    createdComponent.props.getPConnect().setInheritedProp('showAddressLabel', showAddressLabel);
-  }
-  // createdComponent.props.getPConnect().setInheritedProp("hideLabel", true);
-   // @ts-ignore
-  caseSummaryComponentObject.value = createdComponent;
-  if (type === 'reference') {
-     // @ts-ignore
-    caseSummaryComponentObject.name = createdComponent.props.getPConnect().getInheritedProps().label;
-  }
-
-  return caseSummaryComponentObject;
-}
-
-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: object[]) {
-  const defaultLayoutConfig = {
-    width: 'full',
-    fillAvailable: true,
-    minWidth: [300, 'px']
-  };
-
-   // @ts-ignore
-  return regionData.props
-    ?.getPConnect()
-    ?.getChildren()
-    ?.map((item: any, index: number) => {
-      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: string = '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/Launchpad/Pega_DXIL_MyPageCaseWidget/Avatar.tsx

@@ -1,78 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React from 'react';
-import { useEffect, useState } from 'react';
-import { Avatar as CosmosAvatar } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from './PConnProps';
-
-
-// interface for props
-interface PegaDxilMyPageCaseWidgetAvatarProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  metaObj: any;
-  showStatus: boolean;
-
-}
-
-function Avatar(props: PegaDxilMyPageCaseWidgetAvatarProps) {
-  const { metaObj, showStatus = false } = props;
-  const [imageBlobUrl, setImageBlobUrl] = useState(null);
-  let userName: string;
-  let userIdentifier: string;
-
-  // TODO Below if conditions can be removed once we have apis to get worklist/mywork info
-  // This is non CaseView case (Dashboard, MyWork etc)
-  if (!metaObj) {
-    userName = PCore.getEnvironmentInfo().getOperatorName();
-    userIdentifier = PCore.getEnvironmentInfo().getOperatorIdentifier();
-  } else {
-    userName = metaObj.name;
-    userIdentifier = metaObj.ID;
-  }
-  if (!userName && userIdentifier) {
-    userName = userIdentifier;
-  }
-
-  useEffect(() => {
-    const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
-    if (imageKey) {
-      PCore.getAssetLoader()
-        .getSvcImage(imageKey)
-        .then((blob) => window.URL.createObjectURL(blob))
-        .then((imagePath) => setImageBlobUrl(imagePath as React.SetStateAction<any>));
-    }
-  }, [metaObj]);
-
-  if (showStatus) {
-    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
-    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
-
-    // @ts-ignore
-    const handleUserStateChange = ({ state }) => {
-      setUserState(state === 'online' ? 'active' : 'inactive');
-    };
-
-    useEffect(() => {
-      const subId = PCore.getMessagingServiceManager()
-        .getUserPresence()
-        // @ts-ignore
-        .subscribe(userIdentifier, handleUserStateChange);
-
-      return function cleanup() {
-        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
-      };
-    }, [userIdentifier, handleUserStateChange]);
-    // @ts-ignore
-    return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
-  }
-
-  // Do not render when userName does not exists
-  // TODO : In CNR case, pxRequestor is not available, please remove this condition once it populates
-  if (!userName) {
-    return null;
-  }
-
-  return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} />;
-}
-
-
-export default Avatar;

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

@@ -1,81 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import type { Meta, StoryObj } from '@storybook/react';
-
-import PegaDxilMyPageCaseWidget from './index';
-
-import { configProps, operatorDetails } from './mock';
-
-const meta: Meta<typeof PegaDxilMyPageCaseWidget> = {
-  title: 'PegaDxilMyPageCaseWidget',
-  component: PegaDxilMyPageCaseWidget,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyPageCaseWidget>;
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-window.PCore.getLocaleUtils = () => {
-  return {
-    getLocaleValue: value => {
-      return value;
-    }
-  };
-};
-
-window.PCore.getUserApi = () => {
-  return {
-    getOperatorDetails: () => {
-      return new Promise(resolve => {
-        resolve(operatorDetails);
-      });
-    }
-  };
-};
-
-export const BasePegaDxilMyPageCaseWidget: Story = args => {
-
-  const props = {
-    label: configProps.label,
-    createLabel: configProps.createLabel,
-    updateLabel: configProps.updateLabel,
-    createOperator: configProps.createOperator,
-    updateOperator: configProps.updateOperator,
-    createDateTime: configProps.createDateTime,
-    updateDateTime: configProps.updateDateTime,
-    hideLabel: configProps.hideLabel,
-
-    getPConnect: () => {
-      return {
-        getActionsApi: () => {
-          return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
-          };
-        },
-        getCaseSummary: () => {
-          return {
-            user: configProps.updateOperator.userId,
-            dateTimeValue: configProps.updateDateTime
-          }
-        },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
-      };
-    }
-};
-
-return (
-    <>
-      <PegaDxilMyPageCaseWidget {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyPageCaseWidget.args = {};

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

@@ -1,89 +0,0 @@
-import { Fragment } from 'react';
-import { DateTimeDisplay, Card, CardHeader, CardContent, Flex, withConfiguration } from '@pega/cosmos-react-core';
-import type { PConnFieldProps } from './PConnProps';
-
-// includes in bundle
-import Operator from './Operator';
-
-import StyledPegaDxilMyPageCaseWidgetWrapper from './styles';
-
-
-// interface for props
-interface PegaDxilMyPageCaseWidgetProps extends PConnFieldProps {
-  // If any, enter additional props that only exist on TextInput here
-  title: string;
-  createLabel: string;
-  updateLabel: string;
-}
-
-// Created for Launchpad
-
-// 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 PegaDxilMyPageCaseWidget(props: PegaDxilMyPageCaseWidgetProps) {
-
-  const {
-    getPConnect,
-    title = 'Create operator',
-    label = 'Create operator',
-    createLabel,
-    updateLabel
-  } = props;
-
-
-  const { createTime, createdBy, lastUpdateTime, lastUpdatedBy } = getPConnect().getCaseSummary();
-
-  const [_label, user, dateTimeValue] =
-    label === 'Create operator'
-      ? [createLabel, createdBy, createTime]
-      : [updateLabel, lastUpdatedBy, lastUpdateTime];
-
-
-
-  return (
-    <StyledPegaDxilMyPageCaseWidgetWrapper>
-      <Card>
-      <CardHeader>{title}</CardHeader>
-      <CardContent>
-      <Flex container={{ direction: 'row'}}>
-           <Operator
-              label={_label}
-              name={user}
-              id={user}
-              getPConnect={getPConnect}
-              value={undefined}
-              validatemessage=''
-              hideLabel={false}
-              readOnly={false}
-              required={false}
-              disabled={false}
-              externalUser={undefined}
-              testId=''
-              helperText=''
-              metaObj={undefined}
-            />     
-      {dateTimeValue && (
-        <Fragment>
-          {' '}
-          <DateTimeDisplay value={dateTimeValue} variant='relative' />
-        </Fragment>
-      )}
-      </Flex>
-      </CardContent>
-      </Card>
-
-    </StyledPegaDxilMyPageCaseWidgetWrapper>
-  );
-
-
-
-}
-
-
-export default withConfiguration(PegaDxilMyPageCaseWidget);
-
-// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
-// same key value pairs in obj. hence using custom comparison function on when to re-render
-// const comparisonFn = (prevProps, nextProps) => {
-//   return prevProps.updateDateTime === nextProps.updateDateTime;
-// };

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

@@ -1,52 +0,0 @@
-// @ts-nocheck
-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'
-  },
-  hideLabel: true,
-  key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
-};
-
-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: {}
-};

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

@@ -1,120 +0,0 @@
-
-/* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
-import type { Meta, StoryObj } from '@storybook/react';
-
-import PegaDxilMyPageWidget from './index';
-
-
-import configProps from './mock';
-
-const meta: Meta<typeof PegaDxilMyPageWidget> = {
-  title: 'PegaDxilMyPageWidget',
-  component: PegaDxilMyPageWidget,
-  excludeStories: /.*Data$/
-};
-
-export default meta;
-type Story = StoryObj<typeof PegaDxilMyPageWidget>;
-
-if (!window.PCore) {
-  window.PCore = {};
-}
-
-const worklistData = {
-  data: {
-    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.getDataApiUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(worklistData);
-      });
-    }
-  };
-};
-
-
-
-export const BasePegaDxilMyPageWidget: Story = args => {
-
-  const props = {
-    ...configProps,
-    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 (
-    <>
-      <PegaDxilMyPageWidget {...props} {...args} />
-    </>
-  );
-};
-
-BasePegaDxilMyPageWidget.args = {
-  header: configProps.header,
-  description: configProps.description,
-  whatsnewlink: configProps.whatsnewlink,
-  datasource: configProps.datasource,
-};