@pega/custom-dx-components 0.242.16 → 0.242.18

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

@@ -0,0 +1,215 @@
+// @ts-nocheck
+import { useState, useEffect, Fragment } from 'react';
+import {
+  Link,
+  Button,
+  Popover,
+  useOuterEvent,
+  useElement,
+  Progress,
+  FormField,
+  useTheme,
+  withConfiguration
+} from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+import { EmailDisplay } from '@pega/cosmos-react-core';
+
+import type { PConnFieldProps } from './PConnProps';
+
+import Avatar from './Avatar';
+
+
+// interface for props
+interface PegaDxilMyDetailsOperatorProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  name: string;
+  id: string;
+  label: string;
+  metaObj: any;
+  externalUser: any;
+}
+
+let pTarget = null;
+
+function Operator(props: PegaDxilMyDetailsOperatorProps) {
+  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [popoverEl, setPopoverEl] = useElement(null);
+  const [popoverContent, setpopoverContent] = useState(null);
+  const theme: any = useTheme();
+
+  /* If the id has changed, we need to reset the popover */
+  useEffect(() => {
+    pTarget = null;
+  }, [id]);
+
+
+
+  const OperatorPreview = () => {
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    const localeCategory = 'Operator';
+    setpopoverContent(
+      <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
+    );
+    if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
+      const fields = [
+        {
+          id: 'pyFirstName',
+          name: localizedVal('Name', localeCategory),
+          value: externalUser.name
+        },
+        {
+          id: 'pyEmail1',
+          name: localizedVal('Email', localeCategory),
+          value:
+            externalUser.email !== '' ? <Link href={`mailto:${externalUser.email}`}>{externalUser.email}</Link> : ''
+        },
+        {
+          id: 'pyPhoneNumber',
+          name: localizedVal('Phone', localeCategory),
+          value: externalUser.phone !== '' ? <Link href={`tel:${externalUser.phone}`}>{externalUser.phone}</Link> : ''
+        }
+      ];
+      setIsLoading(false);
+      setpopoverContent(
+        <Glimpse
+          visual={
+            <Avatar
+              metaObj={{
+                name: externalUser.name
+              }}
+            />
+          }
+          primary={externalUser.name}
+          secondary={[externalUser.position]}
+          fields={fields}
+          target={pTarget}
+        />
+      );
+    } else {
+      return PCore.getUserApi()
+        .getOperatorDetails(id, true)
+        .then(res => {
+          if (res.data?.pyOperatorInfo) {
+            const fields = [];
+            const data = res.data;
+            if (data.pyOperatorInfo && data.pyOperatorInfo.pyUserName) {
+              fields.push({
+                id: 'Name',
+                name: localizedVal('Name', localeCategory),
+                value: data.pyOperatorInfo.pyUserName
+              });
+            }
+            if (data.pyOperatorInfo && data.pyOperatorInfo.pyEmailAddress) {
+              fields.push({
+                id: 'Email',
+                name: localizedVal('Email address', localeCategory),
+                value: <EmailDisplay value={data.pyOperatorInfo.pyEmailAddress} />
+              });
+            }
+            const opAvatar = (
+              <Avatar
+                metaObj={{
+                  image: '',
+                  name: data.pyOperatorInfo.pyUserName
+                }}
+              />
+            );
+
+            setIsLoading(false);
+            setpopoverContent(
+              <Glimpse
+                heading={{
+                  primary: data.pyOperatorInfo.pyUserName,
+                  secondary: data.pyOperatorInfo.pyEmailAddress,
+                  visual: opAvatar
+                }}
+                fields={fields}
+                target={pTarget}
+                onDismiss={() => {pTarget = null;}}
+              />
+            );
+          }
+        });
+    }
+  };
+
+
+  const clickAction = (e: any) => {
+
+    setIsOpen(!isOpen);
+    if (pTarget === null) {
+      pTarget = e.currentTarget;
+      OperatorPreview();
+    }
+  };
+
+  const hidePopover = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+
+  useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
+
+  const hideOnEscape = (e: any) => {
+    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
+  };
+
+  const comp = (
+    <Fragment>
+      {metaObj ? (
+        <Button
+          variant='text'
+          aria-haspopup
+          aria-expanded={isOpen}
+          onClick={clickAction}
+          onKeyDown={hideOnEscape}
+          data-test-id={testId}
+          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
+        >
+          <Avatar {...props} />
+        </Button>
+      ) : (
+        <Button
+          variant='link'
+          aria-haspopup
+          aria-expanded={isOpen}
+          onClick={clickAction}
+          onKeyDown={hideOnEscape}
+          data-test-id={testId}
+          style={label !== null ? { width: 'max-content', height: theme.components.input.height } : undefined}
+        >
+          {name}
+        </Button>
+      )}
+
+      {isOpen && (
+        <Popover
+          ref={setPopoverEl}
+          groupId='operator'
+          target={pTarget}
+          placement='bottom-start'
+          style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
+          strategy='fixed'
+        >
+          {popoverContent}
+        </Popover>
+      )}
+    </Fragment>
+  );
+
+  if (label !== null) {
+    return (
+      <FormField label={label} info={helperText}>
+        {comp}
+      </FormField>
+    );
+  }
+
+  return comp;
+};
+
+
+export default withConfiguration(Operator);

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyDetails/PConnProps.d.ts

@@ -0,0 +1,46 @@
+import  {PConnect } from '@pega/pcore-pconnect-typedefs';
+
+// PConnProps.d.ts
+// This gives us a place to have each component (which is most DX Components) that is
+//  expected to have a getPConnect extend its props (from BaseProps)
+//  such that every component will be expected to have a getPConnect() function
+//  that returns a PConnect object. (new/better way of doing .propTypes).
+//  This PConnProps can be extended to include other props that we know are in every component
+export interface PConnProps {
+  // getPConnect should exist for every C11n component. (add @ts-ignore in special cases where it isn't)
+  getPConnect: () => typeof PConnect;
+
+  // Allow any/all other key/value pairs in the BaseProps for now
+  //  TODO: refine which other props are always expected for various component
+  //    types and consider further interface "subclassing". For example, we may
+  //    want to create a "BasePropsForm" that gives guidance on required, readonly, etc.
+  //    and any other props that every Form component expects.
+  //    For example, see the PConnFieldProps below.
+  // NOTE: if you uncomment the line below, the PConnProps type will allow
+  //  otherwise undefined types to appear. This can be helpful for debugging
+  //  or when adding new components whose types aren't yet known.
+  // [key: string]: any;
+}
+
+
+// PConnFieldProps extends PConnProps to bring in the common properties that are
+// associated with most field components (ex: Dropdown, TextInput, etc.) in the
+//  components/field directory
+export interface PConnFieldProps extends PConnProps {
+  label: string,
+  required: boolean,
+  disabled: boolean,
+  value: any,
+  validatemessage: string,
+  status?: string,
+  onChange?: any,
+  onBlur?: any,
+  readOnly: boolean,
+  testId: string,
+  helperText: string,
+  displayMode?: string,
+  hideLabel: boolean,
+  placeholder?: string,
+  fieldMetadata?: any,
+  additionalProps?: any
+}

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

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { Status } from '@pega/cosmos-react-core';
+
+export default function StatusWorkRenderer({ value }: any) {
+  // need to cast variant
+  let variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';
+  variant = 'info';
+
+  const warnStrings = ['fail', 'cancel', 'reject', 'revoke', 'stopped', 'warn'];
+  const infoStrings = ['open', 'hold', 'info', 'new'];
+  const successStrings = ['resolved', 'completed', 'success'];
+  const pendingStrings = ['pending'];
+
+  if (new RegExp(warnStrings.join('|'), 'i').test(value)) {
+    variant = 'warn';
+  } else if (new RegExp(infoStrings.join('|'), 'i').test(value)) {
+    variant = 'info';
+  } else if (new RegExp(successStrings.join('|'), 'i').test(value)) {
+    variant = 'success';
+  } else if (new RegExp(pendingStrings.join('|'), 'i').test(value)) {
+    variant = 'pending';
+  }
+
+  return <Status variant={variant}>{value}</Status>;
+}

package/tests/assets/original/components/createAll/Launchpad/Pega_DXIL_MyDetails/config.json

@@ -0,0 +1,35 @@
+{
+  "name": "Pega_DXIL_MyDetails",
+  "label": "My Details",
+  "description": "My Details",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyDetails",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "OneColumnDetails.svg",
+  "properties": [
+    {
+      "name": "showHighlightedData",
+      "label": "Enable highlighted fields",
+      "format": "BOOLEAN"
+    },
+    {
+      "name": "highlightedData",
+      "label": "Highlighted fields",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields"],
+      "visibility": "$this.showHighlightedData = true",
+      "saveToConfig": true
+    },
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views"],
+      "allowCreatingGroup": true
+    }
+  ]
+}

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

@@ -0,0 +1,204 @@
+
+/* 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';
+
+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 = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: (value: any) => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
+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={null}
+        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 => {
+          // 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 =>
+                        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/index.tsx

@@ -0,0 +1,99 @@
+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 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);