@pega/custom-dx-components 24.2.16 → 25.1.10-alpha-0.2

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/Avatar.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import  React from 'react';
+import { useEffect, useState } from 'react';
+import { Avatar as CosmosAvatar, withConfiguration } from '@pega/cosmos-react-core';
+import type { PConnFieldProps } from '../shared/PConnProps';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyTwoColumnDetailsAvatarProps) {
+  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');
+
+    const handleUserStateChange = ({ state } : any) => {
+      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]);
+    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 withConfiguration(Avatar);

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/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 '../shared/PConnProps';
+
+import Avatar from './Avatar';
+
+
+// interface for props
+interface PegaDxilMyTwoColumnDetailsOperatorProps 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: PegaDxilMyTwoColumnDetailsOperatorProps) {
+  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/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/config.json

@@ -3,12 +3,13 @@
   "label": "My Two Column Details",
   "description": "My Two Column Details",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyTwoColumnDetails",
   "type": "Template",
   "subtype": "DETAILS",
+  "subtypeLabel": "DETAILS region",
   "icon": "TwoColumnDetails.svg",
   "properties": [
     {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx

@@ -4,7 +4,7 @@ import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/c
 import PegaDxilMyTwoColumnDetails from './index';
 import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
-import Operator from '../shared/Operator';
+import Operator from './Operator';
 import type C11nEnv from '@pega/pcore-pconnect-typedefs/interpreter/c11n-env';
 
 const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.test.tsx

@@ -0,0 +1,58 @@
+// 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 { BasePegaDxilMyTwoColumnDetails } = composeStories(DemoStories);
+
+test('renders PegaDxilMyTwoColumnDetails', async () => {
+  render(<BasePegaDxilMyTwoColumnDetails />);
+  expect(await screen.findByText('Details Region 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();
+
+  // 2 columns of same
+  const SLADeadline = await screen.findAllByText('SLA Deadline');
+  expect(SLADeadline).toHaveLength(2);
+
+  const SLAGoal = await screen.findAllByText('SLA Goal');
+  expect(SLAGoal).toHaveLength(2);
+
+  const SLAStartTime = await screen.findAllByText('SLA Start Time');
+  expect(SLAStartTime).toHaveLength(2);
+
+  const Deadline = await screen.findAllByText('Deadline');
+  expect(Deadline).toHaveLength(2);
+
+  const Goal = await screen.findAllByText('Goal');
+  expect(Goal).toHaveLength(2);
+
+  const StartTime = await screen.findAllByText('Start Time');
+  expect(StartTime).toHaveLength(2);
+
+  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/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/config.json

@@ -3,12 +3,13 @@
   "label": "My Two Column Form",
   "description": "My Two Column Form",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyTwoColumnForm",
   "type": "Template",
   "subtype": "FORM",
+  "subtypeLabel": "FORM region",
   "icon": "TwoColumn.svg",
   "properties": [
     {

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.test.tsx

@@ -0,0 +1,56 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { BasePegaDxilMyTwoColumnForm } = composeStories(DemoStories);
+
+test('renders PegaDxilMyTwoColumnForm', async () => {
+  render(<BasePegaDxilMyTwoColumnForm />);
+  expect(await screen.findByText('Form Region template')).toBeVisible();
+
+  // labels
+  expect(await screen.findByText('First Name')).toBeVisible();
+  expect(await screen.findByText('Middle Name')).toBeVisible();
+  expect(await screen.findByText('Last Name')).toBeVisible();
+  expect(await screen.findByText('Email')).toBeVisible();
+  expect(await screen.findByText('Phone Number')).toBeVisible();
+  expect(await screen.findByText('Service Date')).toBeVisible();
+
+  const inputElements = screen.getAllByTestId(':input:control');
+  expect((inputElements[0] as HTMLInputElement).value).toBe('John');
+  expect((inputElements[1] as HTMLInputElement).value).toBe('');
+  expect((inputElements[2] as HTMLInputElement).value).toBe('Doe');
+  expect((inputElements[3] as HTMLInputElement).value).toBe('John@doe.com');
+
+  const myPhone = (screen.getByTestId(':phone-input:control') as HTMLInputElement).value;
+  expect(myPhone).toContain('(639) 797-5093');
+
+  const myClearMonth = (screen.getByTestId(':date-input:control-month') as HTMLInputElement).value;
+  expect(myClearMonth).toContain('01');
+
+  const myClearDay = (screen.getByTestId(':date-input:control-day') as HTMLInputElement).value;
+  expect(myClearDay).toContain('25');
+
+  const myClearYear = (screen.getByTestId(':date-input:control-year') as HTMLInputElement).value;
+  expect(myClearYear).toContain('2023');
+
+  // verify 2 columns
+  const fieldSet = screen.getByRole('group');
+
+  // <fieldset>
+  // <legend></legend>
+  // <div>
+  //  <div>
+  //    <div> 2 divs (columns) </div>
+  //  </div>
+  // </div>
+  // </fieldset>
+
+  // eslint-disable-next-line testing-library/no-node-access
+  expect(fieldSet.children[1].children[0].children[0].children).toHaveLength(2);
+
+
+});

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyURL/config.json

@@ -3,12 +3,13 @@
   "label": "My URL",
   "description": "My URL",
   "organization": "Pega",
-  "version": "0.0.1-dev",
+  "version": "0.0.1",
   "library": "DXIL",
   "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyURL",
   "type": "Field",
   "subtype": "Text-URL",
+  "subtypeLabel": "URL",
   "icon": "images/pz-url-active.svg",
   "properties": [
     {
@@ -17,6 +18,31 @@
       "format": "TEXT",
       "required": true
     },
+    {
+      "name": "labelOption",
+      "label": "Field label",
+      "format": "SELECT",
+      "defaultValue": "custom",
+      "visibility": "@PLATFORMNAME != 'launchpad'",
+      "source": [
+        {
+          "key": "default",
+          "value": "Default"
+        },
+        {
+          "key": "custom",
+          "value": "Custom"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "label": "Custom field label",
+      "format": "VALUEINPUT",
+      "required": true,
+      "ruleType": "Paragraph",
+      "visibility": "@PLATFORMNAME != 'launchpad'"
+    },
     {
       "name": "readOnly",
       "label": "Edit mode",

package/tests/assets/library/components/createAll/Constellation/Pega_DXIL_MyURL/demo.test.tsx

@@ -0,0 +1,20 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { BasePegaDxilMyUrl } = composeStories(DemoStories);
+
+test('renders PegaDxilMyUrl', async () => {
+  render(<BasePegaDxilMyUrl />);
+  expect(await screen.findByText('URL Sample')).toBeVisible();
+  expect(await screen.findByText('URL Helper Text')).toBeVisible();
+
+
+  const urlElement = (screen.getByTestId('url-12345678') as HTMLInputElement);
+  expect(urlElement.value).toBe('');
+
+  expect(urlElement).toHaveAttribute('placeholder', 'URL Placeholder');
+});

package/tests/assets/library/components/createAll/Constellation/shared/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/create/Pega_DXIL_MyTestText/config.json

@@ -9,6 +9,7 @@
   "componentKey": "Pega_DXIL_MyTestText",
   "type": "Field",
   "subtype": "Text",
+  "subtypeLabel": "Text",
   "properties": [
     {
       "name": "label",

package/tests/assets/original/components/create/Pega_DXIL_MyTestText/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }

package/tests/assets/original/components/create/Pega_DXIL_MyTestText/demo.test.tsx

@@ -0,0 +1,19 @@
+// import { expect, test } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import '@testing-library/jest-dom';
+
+import * as DemoStories from './demo.stories';
+
+const { BasePegaDxilMyTestText } = composeStories(DemoStories);
+
+test('renders PegaDxilMyTestText', async () => {
+  render(<BasePegaDxilMyTestText />);
+  expect(await screen.findByText('Text Sample')).toBeVisible();
+
+
+  const textElement = (screen.getByTestId('Text-12345678:input:control') as HTMLInputElement);
+  expect(textElement.value).toBe('');
+
+  expect(textElement).toHaveAttribute('placeholder', 'Text Placeholder');
+});

package/tests/assets/original/components/create/shared/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/create/shared/create-nonce.ts

@@ -0,0 +1,7 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/original/components/create/shared/suggestions-handler.ts

@@ -0,0 +1,9 @@
+export const suggestionsHandler = (accepted: boolean, pConn: any, setStatus: any) => {
+  if (accepted) {
+    pConn.acceptSuggestion();
+    setStatus('success');
+  } else {
+    pConn.ignoreSuggestion();
+    setStatus(undefined);
+  }
+};

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyBoolean/config.json

@@ -9,12 +9,38 @@
   "componentKey": "Pega_DXIL_MyBoolean",
   "type": "Field",
   "subtype": "Boolean",
+  "subtypeLabel": "Boolean",
   "icon": "images/pz-checkbox-active.svg",
   "properties": [
     {
       "name": "label",
       "label": "Field label",
       "format": "TEXT"
+    },
+      {
+      "name": "labelOption",
+      "label": "Field label",
+      "format": "SELECT",
+      "defaultValue": "custom",
+      "visibility": "@PLATFORMNAME != 'launchpad'",
+      "source": [
+        {
+          "key": "default",
+          "value": "Default"
+        },
+        {
+          "key": "custom",
+          "value": "Custom"
+        }
+      ]
+    },
+    {
+      "name": "label",
+      "label": "Custom field label",
+      "format": "VALUEINPUT",
+      "required": true,
+      "ruleType": "Paragraph",
+      "visibility": "@PLATFORMNAME != 'launchpad'"
     },
     {
       "name": "hideLabel",

package/tests/assets/original/components/createAll/Constellation/Pega_DXIL_MyBoolean/create-nonce.ts

@@ -2,5 +2,6 @@
 // @ts-ignore
 if (window?.__webpack_nonce__) {
   // @ts-ignore
+  // eslint-disable-next-line no-undef
   __webpack_nonce__ = window.__webpack_nonce__;
 }