@pega/custom-dx-components 0.24.14 → 0.24.16

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx

@@ -4,8 +4,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text, FieldValueList, Button, DateTimeDisplay, useTheme } from '@pega/cosmos-react-core';
 import PegaDxilMyTwoColumnDetails 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 PegaDxilMyTwoColumnDetails> = {
   title: 'PegaDxilMyTwoColumnDetails',
@@ -19,6 +20,28 @@ const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyTwoColumnDetails>;
 
+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/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/index.tsx

@@ -35,7 +35,7 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
   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';
 
@@ -73,7 +73,7 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
        {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/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/mock.ts

@@ -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/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/index.tsx

@@ -22,7 +22,7 @@ function PegaDxilMyTwoColumnForm(props: PegaDxilMyTwoColumnFormProps) {
 
   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
@@ -40,7 +40,7 @@ function PegaDxilMyTwoColumnForm(props: PegaDxilMyTwoColumnFormProps) {
             {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} />