@pega/custom-dx-components 26.1.11 → 26.1.12-alpha.0.2

package/src/tasks/create/templates/Constellation/Template/FORM/demo.stories.tsx.mustache

@@ -28,7 +28,7 @@ const renderField = resolvedProps => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
@@ -153,7 +153,7 @@ const renderField = resolvedProps => {
                         return {
                           value: '',
                           label: label,
-                          displayMode: 'LABELS_LEFT'
+                          displayMode: 'DISPLAY_ONLY'
                         };
                       },
                       getComponent: () => {
@@ -197,37 +197,37 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
             case '@P .FirstName':
               return renderField({
                 ...regionChildrenResolved[0],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .MiddleName':
               return renderField({
                 ...regionChildrenResolved[1],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .LastName':
               return renderField({
                 ...regionChildrenResolved[2],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .Email':
               return renderField({
                 ...regionChildrenResolved[3],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .PhoneNumber':
               return renderField({
                 ...regionChildrenResolved[4],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .ServiceDate':
               return renderField({
                 ...regionChildrenResolved[5],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
           }

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

@@ -27,7 +27,7 @@ const renderField = resolvedProps => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
@@ -142,7 +142,7 @@ const renderField = resolvedProps => {
             return {
               value: '',
               label: label,
-              displayMode: 'LABELS_LEFT'
+              displayMode: 'DISPLAY_ONLY'
             };
           },
           getComponent: () => {
@@ -184,37 +184,37 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
               return renderField({
                 ...regionChildrenResolved[0],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .MiddleName':
               return renderField({
                 ...regionChildrenResolved[1],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .LastName':
               return renderField({
                 ...regionChildrenResolved[2],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .Email':
               return renderField({
                 ...regionChildrenResolved[3],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .PhoneNumber':
               return renderField({
                 ...regionChildrenResolved[4],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .ServiceDate':
               return renderField({
                 ...regionChildrenResolved[5],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
           }
         }

package/src/tasks/create/templates/Constellation/Template/PAGE/utils.ts.mustache

@@ -15,16 +15,14 @@ export function getAllFields(pConnect: Function) {
     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) =>
+  const allFields = hasRegions
+    ? 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') {
@@ -35,10 +33,8 @@ export function getAllFields(pConnect: Function) {
 
         return makeField(field);
       })
-    );
-  } else {
-    allFields = metadata.children.map(makeField);
-  }
+    )
+    : metadata.children.map(makeField);
 
   return allFields;
 }
@@ -213,7 +209,6 @@ export function getInstructions(pConnect: Function, instructions: string = 'case
 
   // 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;

package/src/tasks/create/templates/Constellation/Widget/CASE/demo.test.tsx.mustache

@@ -20,9 +20,9 @@ test('renders {{COMPONENT_CLASS_NAME}}', async () => {
   expect(await screen.findByText('Description')).toBeVisible();
   expect(await screen.findByText('Performed by')).toBeVisible();
 
-  const peformedArr = await screen.findAllByText('User DigV2');
-  expect(peformedArr[0]).toBeVisible();
-  expect(peformedArr[1]).toBeVisible();
+  const performedArr = await screen.findAllByText('User DigV2');
+  expect(performedArr[0]).toBeVisible();
+  expect(performedArr[1]).toBeVisible();
 
 
 });

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Avatar.tsx.mustache

@@ -31,6 +31,14 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     userName = userIdentifier;
   }
 
+  const [userState, setUserState]: any = useState(() => {
+    if (!showStatus) {
+      return 'inactive';
+    }
+    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
+    return currentState === 'online' ? 'active' : 'inactive';
+  });
+
   useEffect(() => {
     const imageKey = !metaObj ? PCore.getEnvironmentInfo().getOperatorImageInsKey() : metaObj.image;
     if (imageKey) {
@@ -41,23 +49,20 @@ function Avatar(props: {{COMPONENT_CLASS_NAME}}AvatarProps) {
     }
   }, [metaObj]);
 
-  if (showStatus) {
-    const currentState = PCore.getMessagingServiceManager().getUserPresence().getUserState(userIdentifier);
-    const [userState, setUserState]: any  = useState(currentState === 'online' ? 'active' : 'inactive');
+  useEffect(() => {
+    if (!showStatus) {
+      return undefined;
+    }
 
-    const handleUserStateChange = ({ state }: any) => {
-      setUserState(state === 'online' ? 'active' : 'inactive');
-    };
+    const userPresence = PCore.getMessagingServiceManager().getUserPresence();
+    const toStatus = (state?: string) => (state === 'online' ? 'active' : 'inactive');
+    setUserState(toStatus(userPresence.getUserState(userIdentifier)));
+    const subId = userPresence.subscribe(userIdentifier, ({ state }: any) => setUserState(toStatus(state)), '');
 
-    useEffect(() => {
-      const subId = PCore.getMessagingServiceManager()
-        .getUserPresence()
-        .subscribe(userIdentifier, handleUserStateChange, '');
+    return () => userPresence.unsubscribe(userIdentifier, subId);
+  }, [showStatus, userIdentifier]);
 
-      return function cleanup() {
-        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
-      };
-    }, [userIdentifier, handleUserStateChange]);
+  if (showStatus) {
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Operator.tsx.mustache

@@ -36,7 +36,7 @@ function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [popoverEl, setPopoverEl] = useElement(null);
-  const [popoverContent, setpopoverContent] = useState(null);
+  const [popoverContent, setPopoverContent] = useState(null);
   const theme: any = useTheme();
 
   /* If the id has changed, we need to reset the popover */
@@ -48,10 +48,10 @@ function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
   {{! pick new delimiters for mustache }}
   {{=<% %>=}}
 
-  const OperatorPreview = () => {
+  const loadOperatorPreview = () => {
     const localizedVal = PCore.getLocaleUtils().getLocaleValue;
     const localeCategory = 'Operator';
-    setpopoverContent(
+    setPopoverContent(
       <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
     );
     if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
@@ -74,7 +74,7 @@ function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
         }
       ];
       setIsLoading(false);
-      setpopoverContent(
+      setPopoverContent(
         <Glimpse
           visual={
             <Avatar
@@ -120,7 +120,7 @@ function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
             );
 
             setIsLoading(false);
-            setpopoverContent(
+            setPopoverContent(
               <Glimpse
                 heading={{
                   primary: data.pyOperatorInfo.pyUserName,
@@ -144,7 +144,7 @@ function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
     setIsOpen(!isOpen);
     if (pTarget === null) {
       pTarget = e.currentTarget;
-      OperatorPreview();
+      loadOperatorPreview();
     }
   };
 

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

@@ -109,7 +109,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
 export default withConfiguration({{COMPONENT_CLASS_NAME}});
 
-// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// as objects are there in props, shallow comparison 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/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/mock.ts.mustache

@@ -15,7 +15,7 @@ export const configProps = {
   },
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const operatorDetails = {

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

@@ -14,8 +14,8 @@ import './create-nonce';
 
 // IMPORTANT
 // To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)
-// Icons filename is kabab case (file-name), where as the icon you import is camel case (fileName)
-// Icons need to be registered (camel case), and then used (kabab case)
+// Icons filename is kebab case (file-name), where as the icon you import is camel case (fileName)
+// Icons need to be registered (camel case), and then used (kebab case)
 import * as listNumber from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
 import * as arrowRight from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';
 import * as globe from '@pega/cosmos-react-core/lib/components/Icon/icons/globe.icon';
@@ -164,7 +164,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     <div style={{ display: 'flex' }} data-testid={testId}>
       <Icon
         style={{ height: '1.5rem', width: '1.5rem' }}
-        // icon name is kabab case
+        // icon name is kebab case
         name='arrow-right'
         role='img'
         aria-label='arrow right'
@@ -182,7 +182,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       >
         <Icon
           style={{ height: '1.5rem', width: '1.5rem' }}
-          // icon name is kabab case
+          // icon name is kebab case
           name='list-number'
           role='img'
           aria-label='numbered list'
@@ -191,7 +191,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       <Link href={validUrl} variant='link' label={validUrl} icon>
         <Icon
           style={{ height: '1.5rem', width: '1.5rem' }}
-          // icon name is kabab case
+          // icon name is kebab case
           name='globe'
           role='img'
           aria-label='open link'

package/src/tasks/create/templates/Launchpad/Field/Text-Phone/index.tsx.mustache

@@ -3,9 +3,7 @@ import {
   PhoneInput as CosmosPhone,
   getPhoneNumberParts,
   PhoneDisplay,
-  FieldValueList,
-  Text,
-  EmailDisplay,
+      EmailDisplay,
   URLDisplay,
   withConfiguration
 } from '@pega/cosmos-react-core';
@@ -98,7 +96,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     testId,
     displayMode,
     additionalProps = {},
-    variant = 'inline',
     isTableFormatter = false,
     hasSuggestions = false
   } = props;
@@ -157,46 +154,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     displayComp = <PhoneDisplay value={value} variant='link' />;
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     if (isTableFormatter && formatExists(formatter)) {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       {displayComp}
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    ) : (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant={hideLabel ? 'stacked' : variant}
-        data-testid={testId}
-        fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     );
   }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <FieldValueList
-        variant='stacked'
-        data-testid={testId}
-        fields={[
-          {
-            id: '2',
-            name: hideLabel ? '' : label,
-            value: (
-              <Text variant='h1' as='span'>
-                {displayComp}
-              </Text>
-            )
-          }
-        ]}
-      />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    );
-  }
 
   const onResolveSuggestionHandler = (accepted: boolean) => {
     suggestionsHandler(accepted, pConn, setStatus);

package/src/tasks/create/templates/Launchpad/Field/__components.md

@@ -1,3 +1,3 @@
 # The **Field** directory
 
-The **Lanchpad/Field** directory contains the template code for the field components you want to use with the **WebComponents SDK**.
+The **Launchpad/Field** directory contains the template code for the field components you want to use with the **WebComponents SDK**.

package/src/tasks/create/templates/Launchpad/Template/FORM/demo.stories.tsx.mustache

@@ -28,7 +28,7 @@ const renderField = resolvedProps => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
@@ -153,7 +153,7 @@ const renderField = resolvedProps => {
                         return {
                           value: '',
                           label: label,
-                          displayMode: 'LABELS_LEFT'
+                          displayMode: 'DISPLAY_ONLY'
                         };
                       },
                       getComponent: () => {
@@ -197,37 +197,37 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
             case '@P .FirstName':
               return renderField({
                 ...regionChildrenResolved[0],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .MiddleName':
               return renderField({
                 ...regionChildrenResolved[1],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .LastName':
               return renderField({
                 ...regionChildrenResolved[2],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .Email':
               return renderField({
                 ...regionChildrenResolved[3],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .PhoneNumber':
               return renderField({
                 ...regionChildrenResolved[4],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
             case '@P .ServiceDate':
               return renderField({
                 ...regionChildrenResolved[5],
-                displayMode: readOnly ? 'LABELS_LEFT' : '',
+                displayMode: readOnly ? 'DISPLAY_ONLY' : '',
                 readOnly
               });
           }

package/src/tasks/create/templates/Launchpad/Template/FORM-region/demo.stories.tsx.mustache

@@ -27,7 +27,7 @@ const renderField = resolvedProps => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [phoneValue, setPhoneValue] = useState('+16397975093');
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (
@@ -142,7 +142,7 @@ const renderField = resolvedProps => {
             return {
               value: '',
               label: label,
-              displayMode: 'LABELS_LEFT'
+              displayMode: 'DISPLAY_ONLY'
             };
           },
           getComponent: () => {
@@ -184,37 +184,37 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
               return renderField({
                 ...regionChildrenResolved[0],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .MiddleName':
               return renderField({
                 ...regionChildrenResolved[1],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .LastName':
               return renderField({
                 ...regionChildrenResolved[2],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .Email':
               return renderField({
                 ...regionChildrenResolved[3],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .PhoneNumber':
               return renderField({
                 ...regionChildrenResolved[4],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
             case '@P .ServiceDate':
               return renderField({
                 ...regionChildrenResolved[5],
                 readOnly,
-                displayMode: readOnly ? 'LABELS_LEFT' : ''
+                displayMode: readOnly ? 'DISPLAY_ONLY' : ''
               });
           }
         }

package/src/tasks/create/templates/Launchpad/Widget/CASE/demo.test.tsx.mustache

@@ -20,9 +20,9 @@ test('renders {{COMPONENT_CLASS_NAME}}', async () => {
   expect(await screen.findByText('Description')).toBeVisible();
   expect(await screen.findByText('Performed by')).toBeVisible();
 
-  const peformedArr = await screen.findAllByText('User DigV2');
-  expect(peformedArr[0]).toBeVisible();
-  expect(peformedArr[1]).toBeVisible();
+  const performedArr = await screen.findAllByText('User DigV2');
+  expect(performedArr[0]).toBeVisible();
+  expect(performedArr[1]).toBeVisible();
 
 
 });

package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/index.tsx.mustache

@@ -84,7 +84,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
 export default withConfiguration({{COMPONENT_CLASS_NAME}});
 
-// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// as objects are there in props, shallow comparison 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/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/mock.ts.mustache

@@ -14,7 +14,7 @@ export const configProps = {
   },
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const operatorDetails = {