@rh-support/components 2.5.185 → 2.5.187
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.
- package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts.map +1 -1
- package/lib/esm/Functional/CaseContactsSelectorExternal.js +99 -57
- package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts +2 -0
- package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.d.ts.map +1 -1
- package/lib/esm/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.js +8 -3
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseContactsSelectorExternal.d.ts","sourceRoot":"","sources":["../../../src/Functional/CaseContactsSelectorExternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAuB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAcxD,OAAO,
|
|
1
|
+
{"version":3,"file":"CaseContactsSelectorExternal.d.ts","sourceRoot":"","sources":["../../../src/Functional/CaseContactsSelectorExternal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yCAAyC,CAAC;AACxF,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAuB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAcxD,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AAEzF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,0BAA0B,CAAC;AACzE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,qBAAqB,EAAE,MAAM,CAAC;IAC9B,QAAQ,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,CAAC;IACpD,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,QAAQ,GAAG,0BAA0B,CAAC,EAAE,KAAK,IAAI,CAAC;IAChF,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,MAAM,KAAA,EAAE,KAAK,KAAA,EAAE,GAAG,KAAA,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,6BAA6B,EAAE,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,+BAA+B,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,GAAI,MAAM,oBAAoB,KAAG,IAAI,IAAI,0BAEzE,CAAC;AAMF,QAAA,MAAM,oBAAoB,GAAI,MAAM,oBAAoB,KAAG,MAa1D,CAAC;AAEF,iBAAS,4BAA4B,CAAC,KAAK,EAAE,MAAM,qBAySlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -8,14 +8,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { useApolloClient } from '@apollo/client/react';
|
|
11
|
-
import { GET_ACCOUNT_CONTACTS, getApiResourceObject, isEmailValid,
|
|
11
|
+
import { GET_ACCOUNT_CONTACTS, getApiResourceObject, isEmailValid, } from '@rh-support/utils';
|
|
12
|
+
import debounce from 'lodash/debounce';
|
|
12
13
|
import differenceBy from 'lodash/differenceBy';
|
|
13
14
|
import filter from 'lodash/filter';
|
|
14
15
|
import isArray from 'lodash/isArray';
|
|
15
16
|
import isEmpty from 'lodash/isEmpty';
|
|
16
17
|
import map from 'lodash/map';
|
|
17
18
|
import sortBy from 'lodash/sortBy';
|
|
18
|
-
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
19
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
19
20
|
import { OwnerTypeaheadDropdown } from '../OwnerTypeaheadDropdown';
|
|
20
21
|
export const CONTACTS_PAGE_SIZE = 10;
|
|
21
22
|
export const DEFAULT_CONTACTS_OFFSET = CONTACTS_PAGE_SIZE - 1;
|
|
@@ -45,37 +46,90 @@ function CaseContactsSelectorExternal(props) {
|
|
|
45
46
|
const { customEmails, contactSsoUsername, isInvalid, groupContactsAndEmails, selected } = props;
|
|
46
47
|
const [filteredContacts, setFilteredContacts] = useState([]);
|
|
47
48
|
const [contactList, setContactList] = useState(getApiResourceObject([]));
|
|
48
|
-
const
|
|
49
|
-
|
|
49
|
+
const [hasNextPage, setHasNextPage] = useState(false);
|
|
50
|
+
const [endCursor, setEndCursor] = useState(null);
|
|
51
|
+
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
|
52
|
+
const mapContactEdges = (edges, accountNumber) => edges
|
|
53
|
+
.filter(({ node }) => { var _a; return (_a = node.SSOUserName__c) === null || _a === void 0 ? void 0 : _a.value; })
|
|
54
|
+
.map(({ node }) => {
|
|
55
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
56
|
+
return ({
|
|
57
|
+
id: node.Id,
|
|
58
|
+
ssoUsername: node.SSOUserName__c.value,
|
|
59
|
+
firstName: (_b = (_a = node.FirstName) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
|
|
60
|
+
lastName: (_d = (_c = node.LastName) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
|
|
61
|
+
fullNameCustom: (_f = (_e = node.Name) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '',
|
|
62
|
+
manageSupportCases: (_h = (_g = node.ManageSupportCases__c) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : true,
|
|
63
|
+
isInternal: (_k = (_j = node.IsInternal__c) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : false,
|
|
64
|
+
isOrgAdmin: (_m = (_l = node.IsOrgAdmin__c) === null || _l === void 0 ? void 0 : _l.value) !== null && _m !== void 0 ? _m : false,
|
|
65
|
+
phone: (_p = (_o = node.Phone) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : '',
|
|
66
|
+
defaultCaseGroup: (_r = (_q = node.DefaultCaseGroup__c) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : null,
|
|
67
|
+
accountNumber,
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
const buildContactsWhere = (searchQuery) => {
|
|
71
|
+
const base = { IsActive__c: { eq: true } };
|
|
72
|
+
if (!(searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.trim()))
|
|
73
|
+
return base;
|
|
74
|
+
const term = `%${searchQuery.trim()}%`;
|
|
75
|
+
return {
|
|
76
|
+
and: [
|
|
77
|
+
base,
|
|
78
|
+
{
|
|
79
|
+
or: [{ Name: { like: term } }, { SSOUserName__c: { like: term } }],
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
const fetchContactsPage = (after, searchQuery) => __awaiter(this, void 0, void 0, function* () {
|
|
85
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
50
86
|
const { data } = yield apolloClient.query({
|
|
51
87
|
query: GET_ACCOUNT_CONTACTS,
|
|
52
|
-
variables: {
|
|
53
|
-
|
|
54
|
-
first: 200,
|
|
55
|
-
orderBy: { Name: { order: 'ASC' } },
|
|
56
|
-
},
|
|
88
|
+
variables: Object.assign(Object.assign({ first: CONTACTS_PAGE_SIZE }, (after ? { after } : {})), { contactsWhere: buildContactsWhere(searchQuery) }),
|
|
89
|
+
fetchPolicy: after ? 'network-only' : 'network-only',
|
|
57
90
|
});
|
|
58
91
|
const response = data;
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
92
|
+
const accountNode = (_e = (_d = (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.redhat_support_uiapi) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.RedHatSupportAccount) === null || _c === void 0 ? void 0 : _c.edges) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.node;
|
|
93
|
+
const contactEdges = (_g = (_f = accountNode === null || accountNode === void 0 ? void 0 : accountNode.Contacts) === null || _f === void 0 ? void 0 : _f.edges) !== null && _g !== void 0 ? _g : [];
|
|
94
|
+
const pageInfo = (_j = (_h = accountNode === null || accountNode === void 0 ? void 0 : accountNode.Contacts) === null || _h === void 0 ? void 0 : _h.pageInfo) !== null && _j !== void 0 ? _j : { hasNextPage: false, endCursor: null };
|
|
95
|
+
const accountNumber = (_l = (_k = accountNode === null || accountNode === void 0 ? void 0 : accountNode.AccountNumber) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : props.selectedAccountNumber;
|
|
96
|
+
return { contacts: mapContactEdges(contactEdges, accountNumber), pageInfo };
|
|
97
|
+
});
|
|
98
|
+
const currentSearchQuery = useRef('');
|
|
99
|
+
const loadMoreContacts = () => __awaiter(this, void 0, void 0, function* () {
|
|
100
|
+
if (!hasNextPage || isLoadingMore)
|
|
101
|
+
return;
|
|
102
|
+
setIsLoadingMore(true);
|
|
103
|
+
try {
|
|
104
|
+
const { contacts: newContacts, pageInfo } = yield fetchContactsPage(endCursor, currentSearchQuery.current);
|
|
105
|
+
setContactList((prev) => getApiResourceObject([...(prev.data || []), ...newContacts]));
|
|
106
|
+
setHasNextPage(pageInfo.hasNextPage);
|
|
107
|
+
setEndCursor(pageInfo.endCursor);
|
|
108
|
+
}
|
|
109
|
+
catch (_a) {
|
|
110
|
+
// silently fail on load more
|
|
111
|
+
}
|
|
112
|
+
setIsLoadingMore(false);
|
|
113
|
+
});
|
|
114
|
+
const searchContacts = (query) => __awaiter(this, void 0, void 0, function* () {
|
|
115
|
+
currentSearchQuery.current = query;
|
|
116
|
+
setContactList(getApiResourceObject([], true));
|
|
117
|
+
setHasNextPage(false);
|
|
118
|
+
setEndCursor(null);
|
|
119
|
+
try {
|
|
120
|
+
const { contacts, pageInfo } = yield fetchContactsPage(null, query);
|
|
121
|
+
if (currentSearchQuery.current === query) {
|
|
122
|
+
setContactList(getApiResourceObject(contacts));
|
|
123
|
+
setHasNextPage(pageInfo.hasNextPage);
|
|
124
|
+
setEndCursor(pageInfo.endCursor);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
catch (_a) {
|
|
128
|
+
setContactList(getApiResourceObject([]));
|
|
129
|
+
}
|
|
78
130
|
});
|
|
131
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
132
|
+
const debouncedSearch = useCallback(debounce(searchContacts, 400), [apolloClient]);
|
|
79
133
|
useEffect(() => {
|
|
80
134
|
const { selectedAccountNumber, loggedInUserRights, isExportingPDF } = props;
|
|
81
135
|
const isNonOrgAdminSameAccount = loggedInUserRights.isExternal() && loggedInUserRights.isNonOrgAdminWithSameAccount(selectedAccountNumber);
|
|
@@ -83,31 +137,14 @@ function CaseContactsSelectorExternal(props) {
|
|
|
83
137
|
return;
|
|
84
138
|
}
|
|
85
139
|
let cancelled = false;
|
|
86
|
-
const accountNumberAtFetch = selectedAccountNumber;
|
|
87
140
|
const fetchAccountContacts = () => __awaiter(this, void 0, void 0, function* () {
|
|
88
141
|
setContactList(getApiResourceObject([], true));
|
|
89
142
|
try {
|
|
90
|
-
|
|
91
|
-
if (loggedInUserRights.isPartner() &&
|
|
92
|
-
loggedInUserRights.isAccountDifferentFromLoggedInAccount(accountNumberAtFetch)) {
|
|
93
|
-
if (loggedInUserRights.isNonOrgAdmin()) {
|
|
94
|
-
const extraLoggedInContacts = loggedInUserRights.getHydraContactFromLoggedInUser();
|
|
95
|
-
const contacts = yield fetchContactsViaGraphQL(accountNumberAtFetch);
|
|
96
|
-
contactListTemp = contacts.concat(extraLoggedInContacts);
|
|
97
|
-
}
|
|
98
|
-
else {
|
|
99
|
-
const [selectedAccountsContacts, currentAccountsContacts] = yield Promise.all([
|
|
100
|
-
fetchContactsViaGraphQL(accountNumberAtFetch),
|
|
101
|
-
fetchContactsViaGraphQL(loggedInUserRights.getAccountNumber()),
|
|
102
|
-
]);
|
|
103
|
-
contactListTemp = [...selectedAccountsContacts, ...currentAccountsContacts];
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
else {
|
|
107
|
-
contactListTemp = yield fetchContactsViaGraphQL(accountNumberAtFetch);
|
|
108
|
-
}
|
|
143
|
+
const { contacts, pageInfo } = yield fetchContactsPage();
|
|
109
144
|
if (!cancelled) {
|
|
110
|
-
setContactList(getApiResourceObject(
|
|
145
|
+
setContactList(getApiResourceObject(contacts));
|
|
146
|
+
setHasNextPage(pageInfo.hasNextPage);
|
|
147
|
+
setEndCursor(pageInfo.endCursor);
|
|
111
148
|
}
|
|
112
149
|
}
|
|
113
150
|
catch (e) {
|
|
@@ -188,22 +225,27 @@ function CaseContactsSelectorExternal(props) {
|
|
|
188
225
|
* @param query The user search term
|
|
189
226
|
*/
|
|
190
227
|
const onQueryUpdated = (query) => {
|
|
228
|
+
setHasNextPage(false);
|
|
191
229
|
if (isEmpty(query)) {
|
|
192
|
-
|
|
230
|
+
currentSearchQuery.current = '';
|
|
231
|
+
debouncedSearch.cancel();
|
|
232
|
+
searchContacts('');
|
|
193
233
|
}
|
|
194
234
|
else {
|
|
195
|
-
const
|
|
196
|
-
setFilteredContacts(
|
|
235
|
+
const localFiltered = filter(allOptions, (option) => getHydraContactLabel(option.contact).toLowerCase().includes(query.toLowerCase()));
|
|
236
|
+
setFilteredContacts(localFiltered);
|
|
237
|
+
debouncedSearch(query);
|
|
197
238
|
}
|
|
198
239
|
};
|
|
199
240
|
/**
|
|
200
241
|
* Reset the filtered contacts and the current offset.
|
|
201
242
|
*/
|
|
202
243
|
const onClearQuery = () => {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
244
|
+
if (currentSearchQuery.current) {
|
|
245
|
+
currentSearchQuery.current = '';
|
|
246
|
+
debouncedSearch.cancel();
|
|
247
|
+
searchContacts('');
|
|
248
|
+
}
|
|
207
249
|
setFilteredContacts(allOptions);
|
|
208
250
|
};
|
|
209
251
|
/**
|
|
@@ -225,6 +267,6 @@ function CaseContactsSelectorExternal(props) {
|
|
|
225
267
|
useEffect(() => {
|
|
226
268
|
setFilteredContacts(allOptions);
|
|
227
269
|
}, [displayedContacts, customEmails, allOptions, selected]);
|
|
228
|
-
return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: isLoading }));
|
|
270
|
+
return (React.createElement(OwnerTypeaheadDropdown, { id: props.id || '', hasClearButton: true, multiple: !!props.multiple, contactSsoUsername: contactSsoUsername, groupContactsAndEmails: groupContactsAndEmails, selected: !isEmpty(props.selected) ? props.selected : [], options: filteredContacts, placeholder: props.placeholder || 'Search by name or username', "data-tracking-id": "external-case-contact-selector", isDisabled: isDisabled, status: isInvalid ? 'danger' : undefined, onChipRemoved: onChipRemoved, onClearQuery: onClearQuery, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: isLoading || isLoadingMore, onHandleLoadMore: loadMoreContacts, isShowMoreOptionVisible: hasNextPage }));
|
|
229
271
|
}
|
|
230
272
|
export { CaseContactsSelectorExternal, getHydraContactLabel };
|
|
@@ -10,6 +10,8 @@ export interface IOwnerSelectorProps extends IOwnerSelectorExtends {
|
|
|
10
10
|
onSelect: (contacts: IContact[]) => void;
|
|
11
11
|
onChipRemoved?: (contact: IContact) => void;
|
|
12
12
|
isLoading?: boolean;
|
|
13
|
+
onHandleLoadMore?: (event: any) => void;
|
|
14
|
+
isShowMoreOptionVisible?: boolean;
|
|
13
15
|
}
|
|
14
16
|
export interface IOwnerOption {
|
|
15
17
|
contact: IContact;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAKlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAGH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,eAAe,GAAG,OAAO,CACnH,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OwnerTypeaheadDropdown.d.ts","sourceRoot":"","sources":["../../../src/OwnerTypeaheadDropdown/OwnerTypeaheadDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAKlE,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,EAGH,uBAAuB,EAE1B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACpC,uBAAuB,EACvB,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,kBAAkB,GAAG,yBAAyB,GAAG,eAAe,GAAG,OAAO,CACnH,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB;IAC9D,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAcD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,mBAAmB,qBAkIhE"}
|
|
@@ -27,14 +27,19 @@ function getTypeaheadOptionsFromContacts(contacts, caseContactSsoUsername) {
|
|
|
27
27
|
}));
|
|
28
28
|
}
|
|
29
29
|
export function OwnerTypeaheadDropdown(props) {
|
|
30
|
+
var _a;
|
|
30
31
|
const { contactSsoUsername, groupContactsAndEmails, options, selected, onSelect, onToggleClosed, onChipRemoved } = props, restProps = __rest(props, ["contactSsoUsername", "groupContactsAndEmails", "options", "selected", "onSelect", "onToggleClosed", "onChipRemoved"]);
|
|
31
32
|
const selectedTypeaheadOptions = useMemo(() => getTypeaheadOptionsFromContacts(selected, contactSsoUsername), [selected, contactSsoUsername]);
|
|
32
33
|
const { t } = useTranslation();
|
|
33
|
-
const { visibleItems, hasMoreItems, onHandleLoadMore, resetVisibleItems } = useProgressiveLoading(options, PAGE_SIZE);
|
|
34
|
+
const { visibleItems, hasMoreItems: hasMoreItemsLocal, onHandleLoadMore: onHandleLoadMoreLocal, resetVisibleItems, } = useProgressiveLoading(options, PAGE_SIZE);
|
|
35
|
+
const useServerPagination = !!props.onHandleLoadMore;
|
|
36
|
+
const displayItems = useServerPagination ? options : visibleItems;
|
|
37
|
+
const showMore = useServerPagination ? (_a = props.isShowMoreOptionVisible) !== null && _a !== void 0 ? _a : false : hasMoreItemsLocal();
|
|
38
|
+
const handleLoadMore = useServerPagination ? props.onHandleLoadMore : onHandleLoadMoreLocal;
|
|
34
39
|
const typeaheadOptions = useMemo(() => {
|
|
35
40
|
const contacts = [];
|
|
36
41
|
const customEmails = [];
|
|
37
|
-
for (const option of
|
|
42
|
+
for (const option of displayItems) {
|
|
38
43
|
const typeaheadOption = {
|
|
39
44
|
label: getHydraContactLabel(option.contact),
|
|
40
45
|
value: option.contact.ssoUsername,
|
|
@@ -97,5 +102,5 @@ export function OwnerTypeaheadDropdown(props) {
|
|
|
97
102
|
};
|
|
98
103
|
onSelect([newCustomOption]);
|
|
99
104
|
};
|
|
100
|
-
return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore:
|
|
105
|
+
return (React.createElement(TypeaheadDropdown, Object.assign({ "data-tracking-id": "external-case-contact-selector", selected: selectedTypeaheadOptions, options: typeaheadOptions, onSelect: onSelectContact, onHandleLoadMore: handleLoadMore, isShowMoreOptionVisible: showMore, onToggleClosed: onLocalToggleClosed, onChipRemoved: onLocalChipRemoved, onNew: onLocalNew }, restProps)));
|
|
101
106
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rh-support/components",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.187",
|
|
4
4
|
"description": "Contains all reusabel components for support app",
|
|
5
5
|
"author": "Vikas Rathee <vrathee@redhat.com>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -63,8 +63,8 @@
|
|
|
63
63
|
"@patternfly/react-table": "6.2.1",
|
|
64
64
|
"@patternfly/react-tokens": "6.2.1",
|
|
65
65
|
"@rh-support/types": "2.0.26",
|
|
66
|
-
"@rh-support/user-permissions": "2.5.
|
|
67
|
-
"@rh-support/utils": "2.5.
|
|
66
|
+
"@rh-support/user-permissions": "2.5.133",
|
|
67
|
+
"@rh-support/utils": "2.5.115",
|
|
68
68
|
"dompurify": "^2.2.6",
|
|
69
69
|
"js-worker-search": "^1.4.1",
|
|
70
70
|
"lazysizes": "^5.3.2",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"defaults and supports es6-module",
|
|
102
102
|
"maintained node versions"
|
|
103
103
|
],
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "62de68194f68d9d3546ff5e6569d2d5137609e8e"
|
|
105
105
|
}
|