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

package/src/tasks/create/templates/Constellation/Field/Text-URL/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef} from "react";
-import { Input, FieldValueList, Text, withConfiguration } from "@pega/cosmos-react-core";
+import { Input, withConfiguration } from "@pega/cosmos-react-core";
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
@@ -53,7 +53,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     testId,
     displayMode,
     additionalProps = {},
-    variant = 'inline',
     isTableFormatter = false,
     displayAs = 'defaultURL',
     widthSel = 'defaultWidth',
@@ -115,44 +114,15 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
 
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     if (isTableFormatter && formatter !== 'URL' && formatExists(formatter)) {
       displayComp = textFormatter(formatter, value);
     }
-    return displayMode === 'DISPLAY_ONLY' ? (
+    return (
       displayComp
-    ) : (
-      <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/Constellation/Field/Text-URL/text-url.tsx.mustache

@@ -40,7 +40,6 @@ const isImage = (url: string) => /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url)
 const TableImage = (imageProps: any) => {
   const { value, altText, altTextOfImage, propaltTextOfImage, urlLabelSelection, urlLabel, propUrlLabel } = imageProps;
   const demoButtonRef = useRef(null);
-  let imageDisplayComp = null;
   const [images, setImages] = useState(null);
   const imgDescription = {
     id: 'url',
@@ -71,7 +70,7 @@ const TableImage = (imageProps: any) => {
   };
   let btnVal = value;
   btnVal = urlLabelVal(urlLabelSelection, btnVal, urlLabel, propUrlLabel);
-  imageDisplayComp = (
+  const imageDisplayComp = (
     <Fragment>
       {btnVal !== null && (
         <Button ref={demoButtonRef} variant='link' compact={false} onClick={onClick} autoFocus>
@@ -142,7 +141,7 @@ export const urlFormatter = (value: string, options: any) => {
     customWidth
   } = options;
 
-  let urlFormatComp = null;
+  let urlFormatComp;
   if (
     (displayAs === 'labelText' || (isTableFormatter && tableDisplayAs === 'link')) &&
     (urlLabel !== '' || propUrlLabel !== '')

package/src/tasks/create/templates/Constellation/Field/TimeofDay/index.tsx.mustache

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { TimeInput, FieldValueList, DateTimeDisplay, Text, withConfiguration } from '@pega/cosmos-react-core';
+import { TimeInput, DateTimeDisplay, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
@@ -59,7 +59,6 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     testId,
     additionalProps = {},
     displayMode,
-    variant = 'inline',
     hasSuggestions = false
   } = props;
   let { formatter = 'defaultTime' } = props;
@@ -117,7 +116,7 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
     });
   }
 
-  if (displayMode === 'LABELS_LEFT' || displayMode === 'STACKED_LARGE_VAL' || displayMode === 'DISPLAY_ONLY') {
+  if (displayMode === 'DISPLAY_ONLY') {
     let variantValue = 'time';
     let formatValue = withSeconds ? 'long' : 'short';
     if (pConn && pConn.getConfigProps()) {
@@ -143,38 +142,6 @@ function {{COMPONENT_CLASS_NAME}} (props: {{COMPONENT_CLASS_NAME}}Props)  {
       case 'DISPLAY_ONLY': {
         return ( <Styled{{COMPONENT_CLASS_NAME}}Wrapper> {displayComp} </Styled{{COMPONENT_CLASS_NAME}}Wrapper>);
       }
-      case 'LABELS_LEFT': {
-        return (
-          <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>
-        );
-      }
-      case '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>
-        );
-      }
       // no default
     }
   }

package/src/tasks/create/templates/Constellation/Field/TimeofDay/time-of-day.ts.mustache

@@ -62,7 +62,7 @@ export const getDayJSObject = (text: string) => {
  * @returns {object} relative time from now
  */
 export const getRelativeTime = (time: string) => {
-  let relativetime = "";
+  let relativetime: string;
   if (dayjs(time).isUTC()) {
     relativetime = dayjs(time).fromNow();
   } else {
@@ -190,7 +190,7 @@ export const datetimeFireChangeBlurEvents = (
   if (errorState) {
     pConn.getValidationApi().validate(errorState);
   }
-  // BUG-640834 In errorState presist old values avoiding store update & re-render.
+  // BUG-640834 In errorState persist old values avoiding store update & re-render.
   else{
     if (formattedValue !== actualValue) {
       actions.updateFieldValue(propName, formattedValue);

package/src/tasks/create/templates/Constellation/Template/DETAILS/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,24 +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');
-
-    const handleUserStateChange = ({ state }: any) => {
-      setUserState(state === 'online' ? 'active' : 'inactive');
-    };
+  useEffect(() => {
+    if (!showStatus) {
+      return undefined;
+    }
 
-    useEffect(() => {
-      const subId = PCore.getMessagingServiceManager()
-        .getUserPresence()
-        .subscribe(userIdentifier, handleUserStateChange, '');
+    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)), '');
 
-      return function cleanup() {
-        PCore.getMessagingServiceManager().getUserPresence().unsubscribe(userIdentifier, subId);
-      };
-    }, [userIdentifier, handleUserStateChange]);
+    return () => userPresence.unsubscribe(userIdentifier, subId);
+  }, [showStatus, userIdentifier]);
 
+  if (showStatus) {
     return <CosmosAvatar name={userName} imageSrc={imageBlobUrl as React.SetStateAction<any>} status={userState} />;
   }
 

package/src/tasks/create/templates/Constellation/Template/DETAILS/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/Template/DETAILS/demo.stories.tsx.mustache

@@ -59,7 +59,7 @@ const renderField = (resolvedProps: any) => {
     theme = useTheme()
   } = resolvedProps;
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (

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

@@ -1,4 +1,4 @@
-import { Fragment, Children, type ReactElement } from 'react';
+import { Fragment, isValidElement, type ReactElement } from 'react';
 import { Grid, Flex, FieldGroup, withConfiguration, type GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
@@ -26,14 +26,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   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);
-  }
+  const children = [props.children].flat(Infinity).filter(isValidElement);
 
   // update children with readonly
-  Children.toArray(children).forEach(child => {
+  children.forEach(child => {
     // @ts-ignore
     child.props.getPConnect().setInheritedProp('readOnly', true);
     // @ts-ignore
@@ -54,7 +50,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
+      return <HighlightRender key={field.config?.key ?? field.config?.value} field={field} getPConnect={props.getPConnect} />;
     });
   }
 

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

@@ -15,7 +15,7 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -26,7 +26,7 @@ export const pyReviewRaw = {
           value: '@P .pyID',
           label: '@L Case ID',
           hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           key: 'pyID'
         }
       },
@@ -36,7 +36,7 @@ export const pyReviewRaw = {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
           hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           key: 'pxCreateDateTime'
         }
       },
@@ -47,7 +47,7 @@ export const pyReviewRaw = {
           hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           key: 'pxCreateOperator'
         }
       }
@@ -151,7 +151,7 @@ export const pyReviewResolved = {
       }
     }
   ],
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const regionChildrenResolved = [
@@ -160,7 +160,7 @@ export const regionChildrenResolved = [
     value: 'Deadline',
     label: 'SLA Deadline',
     hideLabel: true,
-    displayMode: 'LABELS_LEFT',
+    displayMode: 'DISPLAY_ONLY',
     key: 'SLA Deadline'
   },
   {
@@ -168,7 +168,7 @@ export const regionChildrenResolved = [
     value: 'Goal',
     label: 'SLA Goal',
     hideLabel: true,
-    displayMode: 'LABELS_LEFT',
+    displayMode: 'DISPLAY_ONLY',
     key: 'SLA Goal'
   },
   {
@@ -187,7 +187,7 @@ export const regionChildrenResolved = [
         value: 'Current Date Time'
       }
     ],
-    displayMode: 'LABELS_LEFT',
+    displayMode: 'DISPLAY_ONLY',
     key: 'SLA Start Time'
   }
 ];
@@ -244,5 +244,5 @@ export const configProps = {
   resolveDateTime: '',
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };

package/src/tasks/create/templates/Constellation/Template/DETAILS/utils.js.mustache

@@ -9,16 +9,14 @@ export function getAllFields(pConnect) {
     return [];
   }
 
-  let allFields = [];
-
   const makeField = (f) => ({
     ...pConnect().resolveConfigProps(f.config),
     type: f.type
   });
 
   const hasRegions = !!metadata.children[0]?.children;
-  if (hasRegions) {
-    allFields = metadata.children.map((region) =>
+  const allFields = hasRegions
+    ? metadata.children.map((region) =>
       region.children.map((field) => {
         // 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') {
@@ -29,10 +27,8 @@ export function getAllFields(pConnect) {
 
         return makeField(field);
       })
-    );
-  } else {
-    allFields = metadata.children.map(makeField);
-  }
+    )
+    : metadata.children.map(makeField);
 
   return allFields;
 }

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/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,24 +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()
-        // @ts-ignore
-        .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/Template/DETAILS-region/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/Template/DETAILS-region/demo.stories.tsx.mustache

@@ -56,7 +56,7 @@ const renderField = (resolvedProps: any) => {
     theme = useTheme()
   } = resolvedProps;
 
-  const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
+  const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
 
   let val =
     value !== '' ? (

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

@@ -44,7 +44,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     // @ts-ignore
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     highlightedDataArr = highlightedData.map((field: any) => {
-      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
+      return <HighlightRender key={field.config?.key ?? field.config?.value} field={field} getPConnect={props.getPConnect} />;
     });
   }
 

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

@@ -15,7 +15,7 @@ export const pyReviewRaw: any = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -26,7 +26,7 @@ export const pyReviewRaw: any = {
           value: '@P .pyID',
           label: '@L Case ID',
           hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           key: 'pyID'
         }
       },
@@ -36,7 +36,7 @@ export const pyReviewRaw: any = {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
           hideLabel: true,
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           key: 'pxCreateDateTime'
         }
       },
@@ -47,7 +47,7 @@ export const pyReviewRaw: any = {
           hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL',
+          displayMode: 'DISPLAY_ONLY',
           key: 'pxCreateOperator'
         }
       }
@@ -191,7 +191,7 @@ export const pyReviewResolved = {
       }
     }
   ],
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const regionChildrenResolved = [
@@ -200,7 +200,7 @@ export const regionChildrenResolved = [
     value: 'Deadline',
     label: 'SLA Deadline',
     hideLabel: true,
-    displayMode: 'LABELS_LEFT',
+    displayMode: 'DISPLAY_ONLY',
     key: 'SLA Deadline'
   },
   {
@@ -208,7 +208,7 @@ export const regionChildrenResolved = [
     value: 'Goal',
     label: 'SLA Goal',
     hideLabel: true,
-    displayMode: 'LABELS_LEFT',
+    displayMode: 'DISPLAY_ONLY',
     key: 'SLA Goal'
   },
   {
@@ -227,7 +227,7 @@ export const regionChildrenResolved = [
         value: 'Current Date Time'
       }
     ],
-    displayMode: 'LABELS_LEFT',
+    displayMode: 'DISPLAY_ONLY',
     key: 'SLA Start Time'
   }
 ];
@@ -284,5 +284,5 @@ export const configProps = {
   resolveDateTime: '',
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };

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

@@ -9,16 +9,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') {
@@ -29,10 +27,8 @@ export function getAllFields(pConnect: Function) {
 
         return makeField(field);
       })
-    );
-  } else {
-    allFields = metadata.children.map(makeField);
-  }
+    )
+    : metadata.children.map(makeField);
 
   return allFields;
 }