@pega/custom-dx-components 0.24.14 → 0.24.16

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

@@ -60,10 +60,13 @@ export const textFormatter = (value: string) => {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { value, displayMode, getPConnect, testId } = props;
-  const [statelist, setStatelist] = useState([]);
+  const [countrylist, setCountrylist] = useState([]);
   const [showTable, setShowTable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [validUrl, setValidUrl] = useState('about:blank');
   const PConnect = getPConnect();
+  const dataViewName = 'CountryList';
+  const context = PConnect.getContextName();
 
   // IMPORTANT: need to register icons used in camel case
   registerIcon(listNumber, arrowRight, globe);
@@ -108,8 +111,6 @@ 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 = 'CountryList';
-    const context = PConnect.getContextName();
     const params = { };
 
     // only retrieve table data if table is shown
@@ -118,25 +119,35 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {
+          setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error
-          setStatelist(
-            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 {
-                countryName: entry.Name,
-                shortName: entry.ShortName,
-                id: index
-              };
-            })
-          );
+          if (response.data !== null) {
+            setCountrylist(
+              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 {
+                  countryName: entry.Name,
+                  shortName: entry.ShortName,
+                  id: index
+                };
+              })
+            );
+          }
+          else {
+            setCountrylist([]);
+            setIsLoading(false);
+          }
+
         })
         .catch((error: any) => {
+          setCountrylist([]);
+          setIsLoading(false);
           console.log(error);
         });
     }
-  }, [PConnect, showTable]);
+  }, [context, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -191,7 +202,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         <Table
           title={PConnect.getLocalizedValue('State list', '', '')}
           columns={columns}
-          data={statelist}
+          data={countrylist}
+          loading={isLoading}
+          loadingMessage={PConnect.getLocalizedValue('Loading country list', '', '')}
         />
       )}
 <%={{ }}=%>     {{! revert delimiters for mustache }}

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

@@ -22,30 +22,38 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  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'
-    }
-  ]
+  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.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +67,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/Launchpad/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 = 'MyWorkList';
+  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 = 'MyWorkList';
-    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.CaseName,
-              insKey: entry.BusinessID,
-              status: entry.ProcessName,
-              stage: entry.TaskName,
-              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.CaseName,
+                insKey: entry.BusinessID,
+                status: entry.ProcessName,
+                stage: entry.TaskName,
+                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/init/template/package.json.mustache

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.24.14",
+    "@pega/custom-dx-components": "0.24.16",
     "@pega/pcore-pconnect-typedefs": "~3.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/Avatar.tsx

@@ -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 PegaDxilMyDetailsAvatarProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  metaObj: any;
+  showStatus: boolean;
+
+}
+
+function Avatar(props: PegaDxilMyDetailsAvatarProps) {
+  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/tests/assets/components/createAll/Constellation/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/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -4,9 +4,9 @@
 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 } from './mock';
+import { pyReviewRaw, pyReviewResolved, regionChildrenResolved, operatorDetails, configProps } from './mock';
 import StatusWorkRenderer from './StatusWork';
-
+import Operator from './Operator';
 
 const meta: Meta<typeof PegaDxilMyDetails> = {
   title: 'PegaDxilMyDetails',
@@ -20,10 +20,33 @@ const meta: Meta<typeof PegaDxilMyDetails> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDetails>;
 
+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 <></>;
 };
 
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -59,19 +82,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
-        key={key}
-        variant='link'
-        style={
-          label !== null
-            ? { width: 'max-content', height: theme.components.input.height }
-            : undefined
-        }
-      >
-        {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/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/index.tsx

@@ -41,7 +41,7 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
   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';
 
@@ -82,7 +82,7 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
         <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} />