@pega/custom-dx-components 0.24.14 → 0.24.16

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/Avatar.tsx.mustache

@@ -0,0 +1,78 @@
+/* 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 './PConnProps';
+
+
+// interface for props
+interface {{COMPONENT_CLASS_NAME}}AvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
+  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 withConfiguration(Avatar);

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/Operator.tsx.mustache

@@ -0,0 +1,218 @@
+// @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 {{COMPONENT_CLASS_NAME}}OperatorProps 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: {{COMPONENT_CLASS_NAME}}OperatorProps) {
+  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]);
+
+
+  {{! pick new delimiters for mustache }}
+  {{=<% %>=}}
+
+  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;}}
+              />
+            );
+          }
+        });
+    }
+  };
+
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
+
+  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/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.tsx.mustache

@@ -4,8 +4,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { pyReviewRaw, pyReviewResolved, regionChildrenResolved } from './mock';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
+import Operator from './Operator';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -19,6 +20,28 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getLocaleUtils = () => {
+  return {
+    getLocaleValue: value => {
+      return value;
+    }
+  };
+};
+
+window.PCore.getUserApi = () => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
+};
+
 const Region = props => {
   return <></>;
 };
@@ -58,19 +81,30 @@ const renderField = resolvedProps => {
 
   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 = (
-      <Button
-        variant='link'
-        style={
-          label !== null
-            ? { width: 'max-content', height: theme.components.input.height }
-            : undefined
-        }
-        key={key}
-      >
-        {value.userName}
-      </Button>
+      <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=''
+      />
     );
 
   if (variant === 'inline') {

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache

@@ -35,7 +35,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
 
-  const gridContainer: GridContainerProps = { colGap: 0 };
+  const gridContainer: GridContainerProps = { colGap: 6 };
   gridContainer.cols = gridRepeat;
   gridContainer.alignItems = 'start';
 
@@ -75,7 +75,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
        {children.map((child: any, i: number) => (
         <Flex
           // @ts-ignore
-          container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+          container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
           key={`r-${i + 1}`}
         >
           <DetailsRender child={child} />

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/mock.ts.mustache

@@ -233,3 +233,58 @@ export const regionChildrenResolved = [
     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/src/tasks/create/templates/Constellation/Template/FORM/index.tsx.mustache

@@ -40,7 +40,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
             {children.map((child: any, i: number) => (
               <Flex
                 // @ts-ignore
-                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
                 key={`r-${i + 1}`}
               >
                 <DetailsRender child={child} />

package/src/tasks/create/templates/Constellation/Template/FORM-region/index.tsx.mustache

@@ -22,7 +22,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const numRegions = children?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = {"colGap" : 1};
+  const gridContainer = {"colGap" : 6};
   // @ts-ignore
   gridContainer.cols = gridRepeat;
   // @ts-ignore
@@ -42,7 +42,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
             {children.map((child: any, i: number) => (
               <Flex
                 // @ts-ignore
-                container={{ direction: 'column', alignItems: 'normal', colGap: 0, rowGap: 1.5 }}
+                container={{ direction: 'column', alignItems: 'normal', colGap: 1, rowGap: 1.5 }}
                 key={`r-${i + 1}`}
               >
                 <DetailsRender child={child} />

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache

@@ -22,30 +22,37 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  data: [
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-8002',
-      pyAssignmentStatus: 'New',
-      pxTaskLabel: 'Details'
-    },
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-7001',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Info'
-    },
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-9000',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Amount'
-    }
-  ]
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
 };
 
-window.PCore.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +66,7 @@ window.PCore.getDataPageUtils = () => {
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
-    image: configProps.image,
+    ...configProps,
     getPConnect: () => {
       return {
         getValue: value => {

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -21,7 +21,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const PConnect = getPConnect();
+  const dataViewName = 'D_pyMyWorkList';
+  const context = PConnect.getContextName();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -44,33 +48,41 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyMyWorkList';
-    const context = PConnect.getContextName();
 
-    PCore.getDataPageUtils()
-      .getDataAsync(dataViewName, context, {}, null, null)
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {
-        // table requires an index or will get setExtraStackFrame error
-        setWorklist(
-          response.data.map((entry: any, index: number) => {
-            // mapping the data into the column names
-            // MUST have an id/index or will get a setExtraStackFrame error
-            // put a key in the table
-            return {
-              caseType: entry.pxProcessName,
-              insKey: entry.pxRefObjectInsName,
-              status: entry.pyAssignmentStatus,
-              stage: entry.pxTaskLabel,
-              id: index
-            };
-          })
-        );
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.pxProcessName,
+                insKey: entry.pxRefObjectInsName,
+                status: entry.pyAssignmentStatus,
+                stage: entry.pxTaskLabel,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
       })
       .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
         console.log(error);
       });
-  }, [PConnect]);
+  }, [context]);
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -86,6 +98,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}
       data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -38,6 +38,11 @@ const countrylistData = {
 
 window.PCore.getDataPageUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(countrylistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(countrylistData);