@pega/custom-dx-components 0.23.34 → 0.23.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache +1 -1
  3. package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Operator.tsx.mustache +45 -75
  4. package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Operator.tsx.mustache +34 -106
  5. package/src/tasks/init/template/package.json.mustache +1 -1
  6. package/src/util.js +1 -1
  7. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Operator.tsx +45 -75
  8. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/Operator.tsx +34 -106
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/custom-dx-components",
3
- "version": "0.23.34",
3
+ "version": "0.23.35",
4
4
  "description": "Utility for building custom UI components",
5
5
  "bin": "./bin/index.js",
6
6
  "scripts": {
package/src/tasks/create/templates/Constellation/Field/Boolean/index.tsx.mustache CHANGED
@@ -100,7 +100,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
100
100
  // @ts-ignore
101
101
  displayComponent = (
102
102
  // @ts-ignore
103
- <PegaDxilMyBoolean value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
103
+ <{{COMPONENT_CLASS_NAME}} value={value} trueLabel={trueLabel} falseLabel={falseLabel} />
104
104
  );
105
105
  }
106
106
 
package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Operator.tsx.mustache CHANGED
@@ -1,11 +1,9 @@
1
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
- import React from 'react';
1
+ // @ts-nocheck
3
2
  import { useState, useEffect, Fragment } from 'react';
4
3
  import {
5
4
  Link,
6
5
  Button,
7
6
  Popover,
8
- Flex,
9
7
  useOuterEvent,
10
8
  useElement,
11
9
  Progress,
@@ -13,6 +11,7 @@ import {
13
11
  useTheme
14
12
  } from '@pega/cosmos-react-core';
15
13
  import { Glimpse } from '@pega/cosmos-react-work';
14
+ import { EmailDisplay } from '@pega/cosmos-react-core';
16
15
  import PropTypes from 'prop-types';
17
16
 
18
17
  import type { PConnFieldProps } from './PConnProps';
@@ -30,19 +29,19 @@ interface {{COMPONENT_CLASS_NAME}}OperatorProps extends PConnFieldProps {
30
29
  externalUser: any;
31
30
  }
32
31
 
32
+ let pTarget = null;
33
33
 
34
34
  export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
35
35
  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
36
36
  const [isOpen, setIsOpen] = useState(false);
37
37
  const [isLoading, setIsLoading] = useState(true);
38
- const [popoverTarget, setPopoverTarget] = useState(null);
39
38
  const [popoverEl, setPopoverEl] = useElement(null);
40
39
  const [popoverContent, setpopoverContent] = useState(null);
41
40
  const theme: any = useTheme();
42
41
 
43
42
  /* If the id has changed, we need to reset the popover */
44
43
  useEffect(() => {
45
- setPopoverTarget(null);
44
+ pTarget = null;
46
45
  }, [id]);
47
46
 
48
47
 
@@ -53,7 +52,6 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
53
52
  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
54
53
  const localeCategory = 'Operator';
55
54
  setpopoverContent(
56
- // @ts-ignore
57
55
  <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
58
56
  );
59
57
  if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
@@ -77,10 +75,8 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
77
75
  ];
78
76
  setIsLoading(false);
79
77
  setpopoverContent(
80
- // @ts-ignore
81
78
  <Glimpse
82
79
  visual={
83
- // @ts-ignore
84
80
  <Avatar
85
81
  metaObj={{
86
82
  name: externalUser.name
@@ -90,79 +86,53 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
90
86
  primary={externalUser.name}
91
87
  secondary={[externalUser.position]}
92
88
  fields={fields}
89
+ target={pTarget}
93
90
  />
94
91
  );
95
92
  } else {
96
- const { getOperatorDetails } = PCore.getUserApi();
97
- getOperatorDetails(id)
98
- .then((res) => {
99
- if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
100
- const fields = [
101
- {
102
- id: 'pyOrganization',
103
- name: localizedVal('Organization', localeCategory),
104
- value: res.data.pyOperatorInfo.pyOrganization
105
- },
106
- {
107
- id: 'pyTelephone',
108
- name: localizedVal('Telephone', localeCategory),
109
- value:
110
- res.data.pyOperatorInfo.pyTelephone !== '' ? (
111
- <Link href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>
112
- {res.data.pyOperatorInfo.pyTelephone}
113
- </Link>
114
- ) : (
115
- ''
116
- )
117
- },
118
- {
119
- id: 'pyEmailAddress',
93
+ return PCore.getUserApi()
94
+ .getOperatorDetails(id, true)
95
+ .then(res => {
96
+ if (res.data?.pyOperatorInfo) {
97
+ const fields = [];
98
+ const data = res.data;
99
+ if (data.pyOperatorInfo && data.pyOperatorInfo.pyUserName) {
100
+ fields.push({
101
+ id: 'Name',
102
+ name: localizedVal('Name', localeCategory),
103
+ value: data.pyOperatorInfo.pyUserName
104
+ });
105
+ }
106
+ if (data.pyOperatorInfo && data.pyOperatorInfo.pyEmailAddress) {
107
+ fields.push({
108
+ id: 'Email',
120
109
  name: localizedVal('Email address', localeCategory),
121
- value:
122
- res.data.pyOperatorInfo.pyEmailAddress !== '' ? (
123
- <Link href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>
124
- {res.data.pyOperatorInfo.pyEmailAddress}
125
- </Link>
126
- ) : (
127
- ''
128
- )
129
- },
130
- {
131
- id: 'ReportToUserName',
132
- name: localizedVal('Reports to', localeCategory),
133
- value: res.data.pyOperatorInfo.pyReportToUserName
134
- }
135
- ];
110
+ value: <EmailDisplay value={data.pyOperatorInfo.pyEmailAddress} />
111
+ });
112
+ }
113
+ const opAvatar = (
114
+ <Avatar
115
+ metaObj={{
116
+ image: '',
117
+ name: data.pyOperatorInfo.pyUserName
118
+ }}
119
+ />
120
+ );
121
+
136
122
  setIsLoading(false);
137
123
  setpopoverContent(
138
- // @ts-ignore
139
124
  <Glimpse
140
- visual={
141
- // @ts-ignore
142
- <Avatar
143
- metaObj={{
144
- image: res.data.pyOperatorInfo.pyImageInsKey || '',
145
- name: res.data.pyOperatorInfo.pyUserName
146
- }}
147
- />
148
- }
149
- primary={res.data.pyOperatorInfo.pyUserName}
150
- secondary={[res.data.pyOperatorInfo.pyPosition]}
125
+ heading={{
126
+ primary: data.pyOperatorInfo.pyUserName,
127
+ secondary: data.pyOperatorInfo.pyEmailAddress,
128
+ visual: opAvatar
129
+ }}
151
130
  fields={fields}
131
+ target={pTarget}
132
+ onDismiss={() => {pTarget = null;}}
152
133
  />
153
134
  );
154
- } else {
155
- setIsLoading(false);
156
- // @ts-ignore
157
- setpopoverContent(<Flex container={{ pad: 1 }}>{localizedVal('Operator not found', localeCategory)}</Flex>);
158
135
  }
159
- })
160
- .catch(() => {
161
- setIsLoading(false);
162
- setpopoverContent(
163
- // @ts-ignore
164
- <Flex container={{ pad: 1 }}>{localizedVal('Error loading the operator profile', localeCategory)}</Flex>
165
- );
166
136
  });
167
137
  }
168
138
  };
@@ -170,9 +140,10 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
170
140
  <%={{ }}=%> {{! revert delimiters for mustache }}
171
141
 
172
142
  const clickAction = (e: any) => {
173
- setPopoverTarget(e.currentTarget);
143
+
174
144
  setIsOpen(!isOpen);
175
- if (popoverTarget === null) {
145
+ if (pTarget === null) {
146
+ pTarget = e.currentTarget;
176
147
  OperatorPreview();
177
148
  }
178
149
  };
@@ -183,8 +154,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
183
154
  }
184
155
  };
185
156
 
186
- // @ts-ignore
187
- useOuterEvent('mousedown', [popoverEl, popoverTarget], hidePopover); // Call the method on clicking outside these elements
157
+ useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
188
158
 
189
159
  const hideOnEscape = (e: any) => {
190
160
  if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
@@ -222,7 +192,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
222
192
  <Popover
223
193
  ref={setPopoverEl}
224
194
  groupId='operator'
225
- target={popoverTarget}
195
+ target={pTarget}
226
196
  placement='bottom-start'
227
197
  style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
228
198
  strategy='fixed'
package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Operator.tsx.mustache CHANGED
@@ -1,3 +1,4 @@
1
+ // @ts-nocheck
1
2
  import { useState, useEffect, Fragment } from 'react';
2
3
  import {
3
4
  Link,
@@ -27,18 +28,19 @@ interface {{COMPONENT_CLASS_NAME}}OperatorProps extends PConnFieldProps {
27
28
  externalUser: any;
28
29
  }
29
30
 
31
+ let pTarget = null;
32
+
30
33
  export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
31
34
  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
32
35
  const [isOpen, setIsOpen] = useState(false);
33
36
  const [isLoading, setIsLoading] = useState(true);
34
- const [popoverTarget, setPopoverTarget] = useState(null);
35
37
  const [popoverEl, setPopoverEl] = useElement(null);
36
38
  const [popoverContent, setpopoverContent] = useState(null);
37
39
  const theme = useTheme();
38
40
 
39
41
  /* If the id has changed, we need to reset the popover */
40
42
  useEffect(() => {
41
- setPopoverTarget(null);
43
+ pTarget = null;
42
44
  }, [id]);
43
45
 
44
46
 
@@ -49,7 +51,6 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
49
51
  let localizedVal = PCore.getLocaleUtils().getLocaleValue;
50
52
  let localeCategory = 'Operator';
51
53
  setpopoverContent(
52
- // @ts-ignore
53
54
  <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
54
55
  );
55
56
  if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
@@ -73,10 +74,8 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
73
74
  ];
74
75
  setIsLoading(false);
75
76
  setpopoverContent(
76
- // @ts-ignore
77
77
  <Glimpse
78
78
  visual={
79
- // @ts-ignore
80
79
  <Avatar
81
80
  metaObj={{
82
81
  name: externalUser.name
@@ -86,6 +85,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
86
85
  primary={externalUser.name}
87
86
  secondary={[externalUser.position]}
88
87
  fields={fields}
88
+ target={pTarget}
89
89
  />
90
90
  );
91
91
  } else {
@@ -108,112 +108,41 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
108
108
  name: localizedVal('Email address', localeCategory),
109
109
  value: <EmailDisplay value={res.data.data[0].BusinessID} />
110
110
  });
111
- return (
112
- // @ts-ignore
113
- <Glimpse
114
- heading={{
115
- primary: res.data.data[0].Name,
116
- secondary: res.data.data[0].BusinessID,
117
- visual: (
118
- // @ts-ignore
119
- <Avatar
120
- metaObj={{
121
- image: '',
122
- name: res.data.data[0].Name
123
- }}
124
- />
125
- )
126
- }}
127
- fields={fields}
128
- // @ts-ignore
129
- target={popoverTarget}
130
- onDismiss={() => setPopoverTarget(null)}
131
- />
132
- );
133
- }
134
- });
135
- /*
136
- const { getOperatorDetails } = PCore.getUserApi();
137
- getOperatorDetails(id)
138
- .then((res) => {
139
- if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
140
- const fields = [
141
- {
142
- id: 'pyOrganization',
143
- name: localizedVal('Organization', localeCategory),
144
- value: res.data.pyOperatorInfo.pyOrganization
145
- },
146
- {
147
- id: 'pyTelephone',
148
- name: localizedVal('Telephone', localeCategory),
149
- value:
150
- res.data.pyOperatorInfo.pyTelephone !== '' ? (
151
- <Link href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>
152
- {res.data.pyOperatorInfo.pyTelephone}
153
- </Link>
154
- ) : (
155
- ''
156
- )
157
- },
158
- {
159
- id: 'pyEmailAddress',
160
- name: localizedVal('Email address', localeCategory),
161
- value:
162
- res.data.pyOperatorInfo.pyEmailAddress !== '' ? (
163
- <Link href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>
164
- {res.data.pyOperatorInfo.pyEmailAddress}
165
- </Link>
166
- ) : (
167
- ''
168
- )
169
- },
170
- {
171
- id: 'ReportToUserName',
172
- name: localizedVal('Reports to', localeCategory),
173
- value: res.data.pyOperatorInfo.pyReportToUserName
174
- }
175
- ];
176
- setIsLoading(false);
177
- setpopoverContent(
178
- // @ts-ignore
179
- <Glimpse
180
- visual={
181
- // @ts-ignore
182
- <Avatar
183
- metaObj={{
184
- image: res.data.pyOperatorInfo.pyImageInsKey || '',
185
- name: res.data.pyOperatorInfo.pyUserName
186
- }}
187
- />
188
- }
189
- primary={res.data.pyOperatorInfo.pyUserName}
190
- secondary={[res.data.pyOperatorInfo.pyPosition]}
191
- fields={fields}
192
- />
193
- );
194
- } else {
195
- setIsLoading(false);
196
- // @ts-ignore
197
- setpopoverContent(<Flex container={{ pad: 1 }}>{localizedVal('Operator not found', localeCategory)}</Flex>);
111
+
112
+ setIsLoading(false);
113
+ setpopoverContent(
114
+ <Glimpse
115
+ heading={{
116
+ primary: res.data.data[0].Name,
117
+ secondary: res.data.data[0].BusinessID,
118
+ visual: (
119
+ <Avatar
120
+ metaObj={{
121
+ image: '',
122
+ name: res.data.data[0].Name
123
+ }}
124
+ />
125
+ )
126
+ }}
127
+ fields={fields}
128
+ target={pTarget}
129
+ onDismiss={() => {pTarget = null;})}
130
+ />
131
+ );
132
+
198
133
  }
199
- })
200
- .catch(() => {
201
- setIsLoading(false);
202
- setpopoverContent(
203
- // @ts-ignore
204
- <Flex container={{ pad: 1 }}>{localizedVal('Error loading the operator profile', localeCategory)}</Flex>
205
- );
206
134
  });
207
- */
135
+
208
136
  }
209
137
  };
210
138
 
211
139
  <%={{ }}=%> {{! revert delimiters for mustache }}
212
140
 
213
- const clickAction = (e: any) => {
214
- setPopoverTarget(e.currentTarget);
141
+ const clickAction = (e: any) =>
142
+
215
143
  setIsOpen(!isOpen);
216
- if (popoverTarget === null) {
144
+ if (pTarget === null) {
145
+ pTarget = e.currentTarget;
217
146
  OperatorPreview();
218
147
  }
219
148
  };
@@ -224,8 +153,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
224
153
  }
225
154
  };
226
155
 
227
- // @ts-ignore
228
- useOuterEvent('mousedown', [popoverEl, popoverTarget], hidePopover); // Call the method on clicking outside these elements
156
+ useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
229
157
  const hideOnEscape = (e: any) => {
230
158
  if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
231
159
  };
@@ -262,7 +190,7 @@ export default function Operator(props: {{COMPONENT_CLASS_NAME}}OperatorProps) {
262
190
  <Popover
263
191
  ref={setPopoverEl}
264
192
  groupId='operator'
265
- target={popoverTarget}
193
+ target={pTarget}
266
194
  placement='bottom-start'
267
195
  style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
268
196
  strategy='fixed'
package/src/tasks/init/template/package.json.mustache CHANGED
@@ -69,7 +69,7 @@
69
69
  },
70
70
  "devDependencies": {
71
71
  "@pega/configs": "^0.6.0",
72
- "@pega/custom-dx-components": "0.23.34",
72
+ "@pega/custom-dx-components": "0.23.35",
73
73
  "@pega/pcore-pconnect-typedefs": "2.0.0",
74
74
  "@storybook/addon-actions": "^7.6.7",
75
75
  "@storybook/addon-essentials": "^7.6.7",
package/src/util.js CHANGED
@@ -290,7 +290,7 @@ export const showVersion = () => {
290
290
  const hasGit = checkGit(process.cwd());
291
291
 
292
292
  if (!hasGit) {
293
- console.log(chalk.redBright('DX Component Builder - SDK git to be installed.'));
293
+ console.log(chalk.redBright('DX Component Builder - Git needs to be installed.'));
294
294
  process.exit(1);
295
295
  }
296
296
  };
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageCaseWidget/Operator.tsx CHANGED
@@ -1,11 +1,9 @@
1
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
- import React from 'react';
1
+ // @ts-nocheck
3
2
  import { useState, useEffect, Fragment } from 'react';
4
3
  import {
5
4
  Link,
6
5
  Button,
7
6
  Popover,
8
- Flex,
9
7
  useOuterEvent,
10
8
  useElement,
11
9
  Progress,
@@ -13,6 +11,7 @@ import {
13
11
  useTheme
14
12
  } from '@pega/cosmos-react-core';
15
13
  import { Glimpse } from '@pega/cosmos-react-work';
14
+ import { EmailDisplay } from '@pega/cosmos-react-core';
16
15
  import PropTypes from 'prop-types';
17
16
 
18
17
  import type { PConnFieldProps } from './PConnProps';
@@ -30,19 +29,19 @@ interface PegaDxilMyPageCaseWidgetOperatorProps extends PConnFieldProps {
30
29
  externalUser: any;
31
30
  }
32
31
 
32
+ let pTarget = null;
33
33
 
34
34
  export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
35
35
  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
36
36
  const [isOpen, setIsOpen] = useState(false);
37
37
  const [isLoading, setIsLoading] = useState(true);
38
- const [popoverTarget, setPopoverTarget] = useState(null);
39
38
  const [popoverEl, setPopoverEl] = useElement(null);
40
39
  const [popoverContent, setpopoverContent] = useState(null);
41
40
  const theme: any = useTheme();
42
41
 
43
42
  /* If the id has changed, we need to reset the popover */
44
43
  useEffect(() => {
45
- setPopoverTarget(null);
44
+ pTarget = null;
46
45
  }, [id]);
47
46
 
48
47
 
@@ -51,7 +50,6 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
51
50
  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
52
51
  const localeCategory = 'Operator';
53
52
  setpopoverContent(
54
- // @ts-ignore
55
53
  <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
56
54
  );
57
55
  if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
@@ -75,10 +73,8 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
75
73
  ];
76
74
  setIsLoading(false);
77
75
  setpopoverContent(
78
- // @ts-ignore
79
76
  <Glimpse
80
77
  visual={
81
- // @ts-ignore
82
78
  <Avatar
83
79
  metaObj={{
84
80
  name: externalUser.name
@@ -88,88 +84,63 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
88
84
  primary={externalUser.name}
89
85
  secondary={[externalUser.position]}
90
86
  fields={fields}
87
+ target={pTarget}
91
88
  />
92
89
  );
93
90
  } else {
94
- const { getOperatorDetails } = PCore.getUserApi();
95
- getOperatorDetails(id)
96
- .then((res) => {
97
- if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
98
- const fields = [
99
- {
100
- id: 'pyOrganization',
101
- name: localizedVal('Organization', localeCategory),
102
- value: res.data.pyOperatorInfo.pyOrganization
103
- },
104
- {
105
- id: 'pyTelephone',
106
- name: localizedVal('Telephone', localeCategory),
107
- value:
108
- res.data.pyOperatorInfo.pyTelephone !== '' ? (
109
- <Link href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>
110
- {res.data.pyOperatorInfo.pyTelephone}
111
- </Link>
112
- ) : (
113
- ''
114
- )
115
- },
116
- {
117
- id: 'pyEmailAddress',
91
+ return PCore.getUserApi()
92
+ .getOperatorDetails(id, true)
93
+ .then(res => {
94
+ if (res.data?.pyOperatorInfo) {
95
+ const fields = [];
96
+ const data = res.data;
97
+ if (data.pyOperatorInfo && data.pyOperatorInfo.pyUserName) {
98
+ fields.push({
99
+ id: 'Name',
100
+ name: localizedVal('Name', localeCategory),
101
+ value: data.pyOperatorInfo.pyUserName
102
+ });
103
+ }
104
+ if (data.pyOperatorInfo && data.pyOperatorInfo.pyEmailAddress) {
105
+ fields.push({
106
+ id: 'Email',
118
107
  name: localizedVal('Email address', localeCategory),
119
- value:
120
- res.data.pyOperatorInfo.pyEmailAddress !== '' ? (
121
- <Link href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>
122
- {res.data.pyOperatorInfo.pyEmailAddress}
123
- </Link>
124
- ) : (
125
- ''
126
- )
127
- },
128
- {
129
- id: 'ReportToUserName',
130
- name: localizedVal('Reports to', localeCategory),
131
- value: res.data.pyOperatorInfo.pyReportToUserName
132
- }
133
- ];
108
+ value: <EmailDisplay value={data.pyOperatorInfo.pyEmailAddress} />
109
+ });
110
+ }
111
+ const opAvatar = (
112
+ <Avatar
113
+ metaObj={{
114
+ image: '',
115
+ name: data.pyOperatorInfo.pyUserName
116
+ }}
117
+ />
118
+ );
119
+
134
120
  setIsLoading(false);
135
121
  setpopoverContent(
136
- // @ts-ignore
137
122
  <Glimpse
138
- visual={
139
- // @ts-ignore
140
- <Avatar
141
- metaObj={{
142
- image: res.data.pyOperatorInfo.pyImageInsKey || '',
143
- name: res.data.pyOperatorInfo.pyUserName
144
- }}
145
- />
146
- }
147
- primary={res.data.pyOperatorInfo.pyUserName}
148
- secondary={[res.data.pyOperatorInfo.pyPosition]}
123
+ heading={{
124
+ primary: data.pyOperatorInfo.pyUserName,
125
+ secondary: data.pyOperatorInfo.pyEmailAddress,
126
+ visual: opAvatar
127
+ }}
149
128
  fields={fields}
129
+ target={pTarget}
130
+ onDismiss={() => {pTarget = null;}}
150
131
  />
151
132
  );
152
- } else {
153
- setIsLoading(false);
154
- // @ts-ignore
155
- setpopoverContent(<Flex container={{ pad: 1 }}>{localizedVal('Operator not found', localeCategory)}</Flex>);
156
133
  }
157
- })
158
- .catch(() => {
159
- setIsLoading(false);
160
- setpopoverContent(
161
- // @ts-ignore
162
- <Flex container={{ pad: 1 }}>{localizedVal('Error loading the operator profile', localeCategory)}</Flex>
163
- );
164
134
  });
165
135
  }
166
136
  };
167
137
 
168
138
 
169
139
  const clickAction = (e: any) => {
170
- setPopoverTarget(e.currentTarget);
140
+
171
141
  setIsOpen(!isOpen);
172
- if (popoverTarget === null) {
142
+ if (pTarget === null) {
143
+ pTarget = e.currentTarget;
173
144
  OperatorPreview();
174
145
  }
175
146
  };
@@ -180,8 +151,7 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
180
151
  }
181
152
  };
182
153
 
183
- // @ts-ignore
184
- useOuterEvent('mousedown', [popoverEl, popoverTarget], hidePopover); // Call the method on clicking outside these elements
154
+ useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
185
155
 
186
156
  const hideOnEscape = (e: any) => {
187
157
  if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
@@ -219,7 +189,7 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
219
189
  <Popover
220
190
  ref={setPopoverEl}
221
191
  groupId='operator'
222
- target={popoverTarget}
192
+ target={pTarget}
223
193
  placement='bottom-start'
224
194
  style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
225
195
  strategy='fixed'
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/Operator.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ // @ts-nocheck
1
2
  import { useState, useEffect, Fragment } from 'react';
2
3
  import {
3
4
  Link,
@@ -27,18 +28,19 @@ interface PegaDxilMyPageCaseWidgetOperatorProps extends PConnFieldProps {
27
28
  externalUser: any;
28
29
  }
29
30
 
31
+ let pTarget = null;
32
+
30
33
  export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
31
34
  const { id, name, label, testId, helperText, externalUser, metaObj } = props;
32
35
  const [isOpen, setIsOpen] = useState(false);
33
36
  const [isLoading, setIsLoading] = useState(true);
34
- const [popoverTarget, setPopoverTarget] = useState(null);
35
37
  const [popoverEl, setPopoverEl] = useElement(null);
36
38
  const [popoverContent, setpopoverContent] = useState(null);
37
39
  const theme = useTheme();
38
40
 
39
41
  /* If the id has changed, we need to reset the popover */
40
42
  useEffect(() => {
41
- setPopoverTarget(null);
43
+ pTarget = null;
42
44
  }, [id]);
43
45
 
44
46
 
@@ -47,7 +49,6 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
47
49
  let localizedVal = PCore.getLocaleUtils().getLocaleValue;
48
50
  let localeCategory = 'Operator';
49
51
  setpopoverContent(
50
- // @ts-ignore
51
52
  <Progress variant='ring' message={localizedVal('Loading operator...', localeCategory)} placement='local' />
52
53
  );
53
54
  if (externalUser && externalUser.classID !== 'Data-Party-Operator') {
@@ -71,10 +72,8 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
71
72
  ];
72
73
  setIsLoading(false);
73
74
  setpopoverContent(
74
- // @ts-ignore
75
75
  <Glimpse
76
76
  visual={
77
- // @ts-ignore
78
77
  <Avatar
79
78
  metaObj={{
80
79
  name: externalUser.name
@@ -84,6 +83,7 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
84
83
  primary={externalUser.name}
85
84
  secondary={[externalUser.position]}
86
85
  fields={fields}
86
+ target={pTarget}
87
87
  />
88
88
  );
89
89
  } else {
@@ -106,111 +106,40 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
106
106
  name: localizedVal('Email address', localeCategory),
107
107
  value: <EmailDisplay value={res.data.data[0].BusinessID} />
108
108
  });
109
- return (
110
- // @ts-ignore
111
- <Glimpse
112
- heading={{
113
- primary: res.data.data[0].Name,
114
- secondary: res.data.data[0].BusinessID,
115
- visual: (
116
- // @ts-ignore
117
- <Avatar
118
- metaObj={{
119
- image: '',
120
- name: res.data.data[0].Name
121
- }}
122
- />
123
- )
124
- }}
125
- fields={fields}
126
- // @ts-ignore
127
- target={popoverTarget}
128
- onDismiss={() => setPopoverTarget(null)}
129
- />
130
- );
131
- }
132
- });
133
- /*
134
- const { getOperatorDetails } = PCore.getUserApi();
135
- getOperatorDetails(id)
136
- .then((res) => {
137
- if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
138
- const fields = [
139
- {
140
- id: 'pyOrganization',
141
- name: localizedVal('Organization', localeCategory),
142
- value: res.data.pyOperatorInfo.pyOrganization
143
- },
144
- {
145
- id: 'pyTelephone',
146
- name: localizedVal('Telephone', localeCategory),
147
- value:
148
- res.data.pyOperatorInfo.pyTelephone !== '' ? (
149
- <Link href={`tel:${res.data.pyOperatorInfo.pyTelephone}`}>
150
- {res.data.pyOperatorInfo.pyTelephone}
151
- </Link>
152
- ) : (
153
- ''
154
- )
155
- },
156
- {
157
- id: 'pyEmailAddress',
158
- name: localizedVal('Email address', localeCategory),
159
- value:
160
- res.data.pyOperatorInfo.pyEmailAddress !== '' ? (
161
- <Link href={`mailto:${res.data.pyOperatorInfo.pyEmailAddress}`}>
162
- {res.data.pyOperatorInfo.pyEmailAddress}
163
- </Link>
164
- ) : (
165
- ''
166
- )
167
- },
168
- {
169
- id: 'ReportToUserName',
170
- name: localizedVal('Reports to', localeCategory),
171
- value: res.data.pyOperatorInfo.pyReportToUserName
172
- }
173
- ];
174
- setIsLoading(false);
175
- setpopoverContent(
176
- // @ts-ignore
177
- <Glimpse
178
- visual={
179
- // @ts-ignore
180
- <Avatar
181
- metaObj={{
182
- image: res.data.pyOperatorInfo.pyImageInsKey || '',
183
- name: res.data.pyOperatorInfo.pyUserName
184
- }}
185
- />
186
- }
187
- primary={res.data.pyOperatorInfo.pyUserName}
188
- secondary={[res.data.pyOperatorInfo.pyPosition]}
189
- fields={fields}
190
- />
191
- );
192
- } else {
193
- setIsLoading(false);
194
- // @ts-ignore
195
- setpopoverContent(<Flex container={{ pad: 1 }}>{localizedVal('Operator not found', localeCategory)}</Flex>);
109
+
110
+ setIsLoading(false);
111
+ setpopoverContent(
112
+ <Glimpse
113
+ heading={{
114
+ primary: res.data.data[0].Name,
115
+ secondary: res.data.data[0].BusinessID,
116
+ visual: (
117
+ <Avatar
118
+ metaObj={{
119
+ image: '',
120
+ name: res.data.data[0].Name
121
+ }}
122
+ />
123
+ )
124
+ }}
125
+ fields={fields}
126
+ target={pTarget}
127
+ onDismiss={() => {pTarget = null;})}
128
+ />
129
+ );
130
+
196
131
  }
197
- })
198
- .catch(() => {
199
- setIsLoading(false);
200
- setpopoverContent(
201
- // @ts-ignore
202
- <Flex container={{ pad: 1 }}>{localizedVal('Error loading the operator profile', localeCategory)}</Flex>
203
- );
204
132
  });
205
- */
133
+
206
134
  }
207
135
  };
208
136
 
209
137
 
210
- const clickAction = (e: any) => {
211
- setPopoverTarget(e.currentTarget);
138
+ const clickAction = (e: any) =>
139
+
212
140
  setIsOpen(!isOpen);
213
- if (popoverTarget === null) {
141
+ if (pTarget === null) {
142
+ pTarget = e.currentTarget;
214
143
  OperatorPreview();
215
144
  }
216
145
  };
@@ -221,8 +150,7 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
221
150
  }
222
151
  };
223
152
 
224
- // @ts-ignore
225
- useOuterEvent('mousedown', [popoverEl, popoverTarget], hidePopover); // Call the method on clicking outside these elements
153
+ useOuterEvent('mousedown', [popoverEl], hidePopover); // Call the method on clicking outside these elements
226
154
  const hideOnEscape = (e: any) => {
227
155
  if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed
228
156
  };
@@ -259,7 +187,7 @@ export default function Operator(props: PegaDxilMyPageCaseWidgetOperatorProps) {
259
187
  <Popover
260
188
  ref={setPopoverEl}
261
189
  groupId='operator'
262
- target={popoverTarget}
190
+ target={pTarget}
263
191
  placement='bottom-start'
264
192
  style={isLoading ? { position: 'relative', width: '10rem', minHeight: '4rem' } : undefined}
265
193
  strategy='fixed'