@rh-support/components 2.5.231 → 2.6.10
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/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.d.ts +10 -0
- package/lib/esm/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.d.ts.map +1 -0
- package/lib/esm/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.js +17 -0
- package/lib/esm/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.scss +13 -0
- package/lib/esm/CaseLabelLoadErrorModal/index.d.ts +2 -0
- package/lib/esm/CaseLabelLoadErrorModal/index.d.ts.map +1 -0
- package/lib/esm/CaseLabelLoadErrorModal/index.js +1 -0
- package/lib/esm/ConfirmationModal/ConfirmationDialog.js +1 -1
- package/lib/esm/CustomDatePicker/CustomDatePicker.d.ts +18 -0
- package/lib/esm/CustomDatePicker/CustomDatePicker.d.ts.map +1 -0
- package/lib/esm/CustomDatePicker/CustomDatePicker.js +27 -0
- package/lib/esm/CustomDatePicker/customDatePicker.css +52 -0
- package/lib/esm/CustomDatePicker/index.d.ts +2 -0
- package/lib/esm/CustomDatePicker/index.d.ts.map +1 -0
- package/lib/esm/CustomDatePicker/index.js +1 -0
- package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts +2 -0
- package/lib/esm/Functional/CaseContactsSelectorExternal.d.ts.map +1 -1
- package/lib/esm/Functional/CaseContactsSelectorExternal.js +176 -82
- package/lib/esm/InlineEdit/NewInlineEdit.d.ts +2 -0
- package/lib/esm/InlineEdit/NewInlineEdit.d.ts.map +1 -1
- package/lib/esm/InlineEdit/NewInlineEdit.js +7 -2
- 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/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/lib/esm/PhoneInput/PhoneInput.js +38 -1
- package/lib/esm/RichTextEditor/RichTextEditor.d.ts +45 -0
- package/lib/esm/RichTextEditor/RichTextEditor.d.ts.map +1 -0
- package/lib/esm/RichTextEditor/RichTextEditor.js +464 -0
- package/lib/esm/RichTextEditor/autoLinkModule.d.ts +18 -0
- package/lib/esm/RichTextEditor/autoLinkModule.d.ts.map +1 -0
- package/lib/esm/RichTextEditor/autoLinkModule.js +156 -0
- package/lib/esm/RichTextEditor/index.d.ts +4 -0
- package/lib/esm/RichTextEditor/index.d.ts.map +1 -0
- package/lib/esm/RichTextEditor/index.js +2 -0
- package/lib/esm/RichTextEditor/linkUrl.d.ts +7 -0
- package/lib/esm/RichTextEditor/linkUrl.d.ts.map +1 -0
- package/lib/esm/RichTextEditor/linkUrl.js +26 -0
- package/lib/esm/RichTextEditor/richTextEditor.css +182 -0
- package/lib/esm/RichTextEditor/useQuillEditor.d.ts +20 -0
- package/lib/esm/RichTextEditor/useQuillEditor.d.ts.map +1 -0
- package/lib/esm/RichTextEditor/useQuillEditor.js +180 -0
- package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.d.ts +2 -0
- package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.d.ts.map +1 -1
- package/lib/esm/SingleSelectDropdown/SingleSelectDropdown.js +7 -6
- package/lib/esm/Table/TablePagination.d.ts +1 -0
- package/lib/esm/Table/TablePagination.d.ts.map +1 -1
- package/lib/esm/Table/TablePagination.js +1 -1
- package/lib/esm/ToastNotification/ToastNotification.d.ts +5 -1
- package/lib/esm/ToastNotification/ToastNotification.d.ts.map +1 -1
- package/lib/esm/ToastNotification/ToastNotification.js +16 -3
- package/lib/esm/ToastNotification/toastNotification.css +7 -0
- package/lib/esm/helperFunctions/errorMessage.d.ts +2 -1
- package/lib/esm/helperFunctions/errorMessage.d.ts.map +1 -1
- package/lib/esm/helperFunctions/errorMessage.js +19 -5
- package/lib/esm/hooks/useCopyToClipboard.d.ts +1 -1
- package/lib/esm/hooks/useCopyToClipboard.d.ts.map +1 -1
- package/lib/esm/hooks/useCopyToClipboard.js +3 -1
- package/lib/esm/index.d.ts +3 -1
- package/lib/esm/index.d.ts.map +1 -1
- package/lib/esm/index.js +4 -1
- package/package.json +6 -3
- package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts +0 -49
- package/lib/esm/MarkdownEditor/MarkdownEditor.d.ts.map +0 -1
- package/lib/esm/MarkdownEditor/MarkdownEditor.js +0 -601
- package/lib/esm/MarkdownEditor/index.d.ts +0 -2
- package/lib/esm/MarkdownEditor/index.d.ts.map +0 -1
- package/lib/esm/MarkdownEditor/index.js +0 -1
- package/lib/esm/MarkdownEditor/markdownEditor.css +0 -223
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import './CaseLabelLoadErrorModal.scss';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
interface IProps {
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
onRetry: () => void;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
}
|
|
8
|
+
export declare function CaseLabelLoadErrorModal({ isOpen, onRetry, onClose }: IProps): React.JSX.Element;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=CaseLabelLoadErrorModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CaseLabelLoadErrorModal.d.ts","sourceRoot":"","sources":["../../../src/CaseLabelLoadErrorModal/CaseLabelLoadErrorModal.tsx"],"names":[],"mappings":"AAAA,OAAO,gCAAgC,CAAC;AAWxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,MAAM;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAKD,wBAAgB,uBAAuB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,MAAM,qBAuC3E"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import './CaseLabelLoadErrorModal.scss';
|
|
2
|
+
import { Button, ButtonVariant, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, } from '@patternfly/react-core';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Trans } from 'react-i18next';
|
|
5
|
+
const MODAL_TITLE_ID = 'case-label-load-error-modal-title';
|
|
6
|
+
const MODAL_DESCRIPTION_ID = 'case-label-load-error-modal-description';
|
|
7
|
+
export function CaseLabelLoadErrorModal({ isOpen, onRetry, onClose }) {
|
|
8
|
+
return (React.createElement(Modal, { id: "case-label-load-error-modal", className: "case-label-load-error-modal", "aria-labelledby": MODAL_TITLE_ID, "aria-describedby": MODAL_DESCRIPTION_ID, isOpen: isOpen, variant: ModalVariant.small, onClose: onClose },
|
|
9
|
+
React.createElement(ModalHeader, { title: React.createElement(Trans, null, "Something went wrong"), titleIconVariant: "warning", labelId: MODAL_TITLE_ID }),
|
|
10
|
+
React.createElement(ModalBody, { id: MODAL_DESCRIPTION_ID },
|
|
11
|
+
React.createElement(Trans, null, "The case label(s) you selected failed to load, please try again")),
|
|
12
|
+
React.createElement(ModalFooter, null,
|
|
13
|
+
React.createElement(Button, { key: "retry", variant: ButtonVariant.primary, onClick: onRetry, "data-tracking-id": "case-label-load-error-retry" },
|
|
14
|
+
React.createElement(Trans, null, "Try again")),
|
|
15
|
+
React.createElement(Button, { key: "cancel", variant: ButtonVariant.link, onClick: onClose, "data-tracking-id": "case-label-load-error-cancel" },
|
|
16
|
+
React.createElement(Trans, null, "Cancel")))));
|
|
17
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.case-label-load-error-modal {
|
|
2
|
+
.pf-v6-c-modal-box__title-icon {
|
|
3
|
+
color: var(--pf-t--global--icon--color--status--warning--default);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.pf-v6-c-modal-box__body {
|
|
7
|
+
padding-top: var(--pf-t--global--spacer--md);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.pf-v6-c-modal-box__footer {
|
|
11
|
+
padding-top: var(--pf-t--global--spacer--lg);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CaseLabelLoadErrorModal/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CaseLabelLoadErrorModal';
|
|
@@ -15,7 +15,7 @@ function ConfirmationDialog(props) {
|
|
|
15
15
|
!isEmpty(props.title) && (React.createElement(ModalHeader, null,
|
|
16
16
|
React.createElement("h2", null, props.title))),
|
|
17
17
|
React.createElement(ModalBody, null,
|
|
18
|
-
React.createElement("
|
|
18
|
+
React.createElement("div", { id: "se-confirm-dialog" }, props.description)),
|
|
19
19
|
React.createElement(ModalFooter, null,
|
|
20
20
|
React.createElement(Button, { key: "confirm", onClick: props.onConfirm, variant: props.confirmButtonVariant },
|
|
21
21
|
React.createElement(Trans, null, props.confirmText)),
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import './customDatePicker.css';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export interface ICustomDatePickerProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
value?: string;
|
|
6
|
+
'aria-label'?: string;
|
|
7
|
+
onChange?: (event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void;
|
|
8
|
+
validators?: Array<(date: Date) => string>;
|
|
9
|
+
popoverPosition?: 'bottom' | 'bottom-start' | 'bottom-end';
|
|
10
|
+
dateParse?: (value: string) => Date;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
invalidFormatText?: string;
|
|
13
|
+
className?: string;
|
|
14
|
+
isDisabled?: boolean;
|
|
15
|
+
validationError?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare function CustomDatePicker({ id, value, 'aria-label': ariaLabel, onChange, validators, popoverPosition, dateParse, placeholder, invalidFormatText, className, isDisabled, validationError, }: ICustomDatePickerProps): React.JSX.Element;
|
|
18
|
+
//# sourceMappingURL=CustomDatePicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomDatePicker.d.ts","sourceRoot":"","sources":["../../../src/CustomDatePicker/CustomDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAGhC,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,MAAM,WAAW,sBAAsB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1F,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC;IAC3C,eAAe,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,YAAY,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,EAAE,EACF,KAAU,EACV,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,UAAU,EACV,eAAgC,EAChC,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,GAClB,EAAE,sBAAsB,qBA4CxB"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import './customDatePicker.css';
|
|
2
|
+
import { DatePicker, HelperText, HelperTextItem } from '@patternfly/react-core';
|
|
3
|
+
import React, { useRef } from 'react';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
export function CustomDatePicker({ id, value = '', 'aria-label': ariaLabel, onChange, validators, popoverPosition = 'bottom-start', dateParse, placeholder, invalidFormatText, className, isDisabled, validationError, }) {
|
|
6
|
+
const { t } = useTranslation();
|
|
7
|
+
const datePickerRef = useRef(null);
|
|
8
|
+
const datePickerClassName = [
|
|
9
|
+
'custom-date-picker',
|
|
10
|
+
'custom-date-picker--input-only',
|
|
11
|
+
validationError && 'custom-date-picker--has-error',
|
|
12
|
+
validationError && 'custom-date-picker--external-validation',
|
|
13
|
+
className,
|
|
14
|
+
]
|
|
15
|
+
.filter(Boolean)
|
|
16
|
+
.join(' ');
|
|
17
|
+
return (React.createElement(React.Fragment, null,
|
|
18
|
+
React.createElement(DatePicker, { ref: datePickerRef, id: id, value: value, isDisabled: isDisabled, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('YYYY-MM-DD'), invalidFormatText: invalidFormatText !== null && invalidFormatText !== void 0 ? invalidFormatText : t('Invalid date format.'), dateParse: dateParse, "aria-label": ariaLabel, validators: validators, appendTo: () => document.body, className: datePickerClassName, popoverProps: {
|
|
19
|
+
className: 'custom-date-picker-popover',
|
|
20
|
+
hasAutoWidth: false,
|
|
21
|
+
position: popoverPosition,
|
|
22
|
+
}, onChange: onChange, inputProps: {
|
|
23
|
+
onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.toggleCalendar(); },
|
|
24
|
+
} }),
|
|
25
|
+
validationError && (React.createElement(HelperText, null,
|
|
26
|
+
React.createElement(HelperTextItem, { variant: "error" }, validationError)))));
|
|
27
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.custom-date-picker--input-only {
|
|
2
|
+
display: block;
|
|
3
|
+
width: 100%;
|
|
4
|
+
--pf-v6-c-date-picker__input--c-form-control--Width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.custom-date-picker--has-error .pf-v6-c-form-control {
|
|
8
|
+
--pf-v6-c-form-control--BorderColor: var(--pf-t--global--border--color--status--danger--default);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.custom-date-picker--external-validation .pf-v6-c-date-picker__helper-text {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.custom-date-picker--input-only .pf-v6-c-input-group {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.custom-date-picker--input-only .pf-v6-c-input-group__item:first-child {
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.custom-date-picker--input-only .pf-v6-c-input-group__item:last-child {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.pf-v6-c-popover.custom-date-picker-popover {
|
|
28
|
+
--pf-v6-c-popover--MaxWidth: 18.5rem;
|
|
29
|
+
max-width: 18.5rem;
|
|
30
|
+
width: 18.5rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.pf-v6-c-popover.custom-date-picker-popover .pf-v6-c-calendar-month {
|
|
34
|
+
--pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
35
|
+
--pf-v6-c-calendar-month--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
36
|
+
--pf-v6-c-calendar-month--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
37
|
+
--pf-v6-c-calendar-month--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
38
|
+
--pf-v6-c-calendar-month__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
|
|
39
|
+
--pf-v6-c-calendar-month__date--Width: 2.25rem;
|
|
40
|
+
--pf-v6-c-calendar-month__date--Height: 2.25rem;
|
|
41
|
+
--pf-v6-c-calendar-month__day--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
|
|
42
|
+
width: 100%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.pf-v6-c-popover.custom-date-picker-popover .pf-v6-c-calendar-month__header-month .pf-v6-c-menu-toggle {
|
|
46
|
+
width: 100% !important;
|
|
47
|
+
max-width: 6.5rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.pf-v6-c-popover.custom-date-picker-popover .pf-v6-c-calendar-month__calendar {
|
|
51
|
+
width: 100%;
|
|
52
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CustomDatePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CustomDatePicker';
|
|
@@ -28,6 +28,8 @@ interface IProps extends IDClassNameProps {
|
|
|
28
28
|
onNew?: (query: string) => void;
|
|
29
29
|
canAddNew?: (options: ITypeaheadDropdownGroupOrOption[], query: string) => boolean;
|
|
30
30
|
getCreateNewText?: (query: string) => string;
|
|
31
|
+
onContactEnriched?: (contact: IContact) => void;
|
|
32
|
+
contactFilter?: (contact: IContact) => boolean;
|
|
31
33
|
}
|
|
32
34
|
export declare const CONTACTS_PAGE_SIZE = 10;
|
|
33
35
|
export declare const DEFAULT_CONTACTS_OFFSET: number;
|
|
@@ -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;
|
|
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;IAChD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,OAAO,CAAC;CAClD;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,qBAyUlD;AAED,OAAO,EAAE,4BAA4B,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -7,8 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
-
import {
|
|
11
|
-
import { getApiResourceObject, isEmailValid,
|
|
10
|
+
import { useApolloClient } from '@apollo/client/react';
|
|
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';
|
|
@@ -16,7 +17,6 @@ import isEmpty from 'lodash/isEmpty';
|
|
|
16
17
|
import map from 'lodash/map';
|
|
17
18
|
import sortBy from 'lodash/sortBy';
|
|
18
19
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
19
|
-
import { usePrevious } from '../hooks/usePrevious';
|
|
20
20
|
import { OwnerTypeaheadDropdown } from '../OwnerTypeaheadDropdown';
|
|
21
21
|
export const CONTACTS_PAGE_SIZE = 10;
|
|
22
22
|
export const DEFAULT_CONTACTS_OFFSET = CONTACTS_PAGE_SIZE - 1;
|
|
@@ -42,82 +42,157 @@ const getHydraContactLabel = (user) => {
|
|
|
42
42
|
return label ? label : '';
|
|
43
43
|
};
|
|
44
44
|
function CaseContactsSelectorExternal(props) {
|
|
45
|
+
const apolloClient = useApolloClient();
|
|
45
46
|
const { customEmails, contactSsoUsername, isInvalid, groupContactsAndEmails, selected } = props;
|
|
46
|
-
const previousSelectedAccountNumber = usePrevious(props.selectedAccountNumber);
|
|
47
47
|
const [filteredContacts, setFilteredContacts] = useState([]);
|
|
48
|
-
/**
|
|
49
|
-
* External owner selector related
|
|
50
|
-
*/
|
|
51
|
-
/** Getting user list for selected account when logged in user is a external */
|
|
52
48
|
const [contactList, setContactList] = useState(getApiResourceObject([]));
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
|
|
56
|
-
|
|
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;
|
|
86
|
+
const { data } = yield apolloClient.query({
|
|
87
|
+
query: GET_ACCOUNT_CONTACTS,
|
|
88
|
+
variables: Object.assign(Object.assign({ first: CONTACTS_PAGE_SIZE }, (after ? { after } : {})), { contactsWhere: buildContactsWhere(searchQuery) }),
|
|
89
|
+
fetchPolicy: after ? 'network-only' : 'network-only',
|
|
90
|
+
});
|
|
91
|
+
const response = data;
|
|
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)
|
|
57
101
|
return;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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);
|
|
67
125
|
}
|
|
68
|
-
|
|
126
|
+
}
|
|
127
|
+
catch (_a) {
|
|
128
|
+
setContactList(getApiResourceObject([]));
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
132
|
+
const debouncedSearch = useCallback(debounce(searchContacts, 400), [apolloClient]);
|
|
133
|
+
const fetchAllActiveContacts = () => {
|
|
134
|
+
currentSearchQuery.current = '';
|
|
135
|
+
debouncedSearch.cancel();
|
|
136
|
+
searchContacts('');
|
|
137
|
+
};
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
const { selectedAccountNumber, loggedInUserRights, isExportingPDF } = props;
|
|
140
|
+
const isNonOrgAdminSameAccount = loggedInUserRights.isExternal() && loggedInUserRights.isNonOrgAdminWithSameAccount(selectedAccountNumber);
|
|
141
|
+
if (isExportingPDF || !selectedAccountNumber || isNonOrgAdminSameAccount) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
let cancelled = false;
|
|
145
|
+
const fetchAccountContacts = () => __awaiter(this, void 0, void 0, function* () {
|
|
146
|
+
setContactList(getApiResourceObject([], true));
|
|
69
147
|
try {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
- Non Org-Admin partners => Only logged in contact + All Customer contacts
|
|
76
|
-
- Org-Admin partners => All partner contacts + All Customer contacts */
|
|
77
|
-
if (props.loggedInUserRights.isNonOrgAdmin()) {
|
|
78
|
-
const extraLoggedInContacts = props.loggedInUserRights.getHydraContactFromLoggedInUser();
|
|
79
|
-
const contacts = yield accounts.getAccountContacts(props.selectedAccountNumber, controllerRef1.current.signal);
|
|
80
|
-
contactListTemp = contacts.concat(extraLoggedInContacts);
|
|
81
|
-
}
|
|
82
|
-
else {
|
|
83
|
-
let promiseArray = [
|
|
84
|
-
accounts.getAccountContacts(props.selectedAccountNumber, controllerRef1.current.signal),
|
|
85
|
-
accounts.getAccountContacts(props.loggedInUserRights.getAccountNumber(), controllerRef2.current.signal),
|
|
86
|
-
];
|
|
87
|
-
const loggedInContactsResponse = yield Promise.all(promiseArray);
|
|
88
|
-
const selectedAccountsContacts = loggedInContactsResponse[0];
|
|
89
|
-
const currentAccountsContacts = loggedInContactsResponse[1];
|
|
90
|
-
contactListTemp = [...selectedAccountsContacts, ...currentAccountsContacts];
|
|
91
|
-
}
|
|
148
|
+
const { contacts, pageInfo } = yield fetchContactsPage();
|
|
149
|
+
if (!cancelled) {
|
|
150
|
+
setContactList(getApiResourceObject(contacts));
|
|
151
|
+
setHasNextPage(pageInfo.hasNextPage);
|
|
152
|
+
setEndCursor(pageInfo.endCursor);
|
|
92
153
|
}
|
|
93
|
-
else {
|
|
94
|
-
contactListTemp = yield accounts.getAccountContacts(props.selectedAccountNumber, controllerRef1.current.signal);
|
|
95
|
-
}
|
|
96
|
-
if (props.contactsToExclude && props.contactsToExclude.length > 0) {
|
|
97
|
-
contactListTemp = differenceBy(contactListTemp, props.contactsToExclude, 'ssoUsername');
|
|
98
|
-
}
|
|
99
|
-
setContactList(getApiResourceObject(sortHydraContacts(contactListTemp)));
|
|
100
154
|
}
|
|
101
155
|
catch (e) {
|
|
102
|
-
|
|
156
|
+
if (!cancelled) {
|
|
157
|
+
setContactList(getApiResourceObject([], false, true, e.message));
|
|
158
|
+
}
|
|
103
159
|
}
|
|
104
160
|
});
|
|
105
|
-
|
|
106
|
-
if (isOldAccountNumber ||
|
|
107
|
-
(props.loggedInUserRights.isExternal() &&
|
|
108
|
-
props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber)))
|
|
109
|
-
return;
|
|
110
|
-
fetchStrataAccountUsers();
|
|
161
|
+
fetchAccountContacts();
|
|
111
162
|
return () => {
|
|
112
|
-
|
|
163
|
+
cancelled = true;
|
|
113
164
|
};
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
165
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
166
|
+
}, [apolloClient, props.selectedAccountNumber, props.isExportingPDF]);
|
|
167
|
+
useEffect(() => {
|
|
168
|
+
if (contactList.isFetching || isEmpty(contactList.data) || isEmpty(selected))
|
|
169
|
+
return;
|
|
170
|
+
const currentOwner = selected[0];
|
|
171
|
+
if (!(currentOwner === null || currentOwner === void 0 ? void 0 : currentOwner.ssoUsername))
|
|
172
|
+
return;
|
|
173
|
+
const matchedContact = contactList.data.find((c) => {
|
|
174
|
+
var _a, _b;
|
|
175
|
+
return c.id === (currentOwner === null || currentOwner === void 0 ? void 0 : currentOwner.id) ||
|
|
176
|
+
((_a = c.ssoUsername) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = currentOwner.ssoUsername) === null || _b === void 0 ? void 0 : _b.toLowerCase());
|
|
177
|
+
});
|
|
178
|
+
if (matchedContact === null || matchedContact === void 0 ? void 0 : matchedContact.id) {
|
|
179
|
+
props.onContactEnriched
|
|
180
|
+
? props.onContactEnriched(matchedContact)
|
|
181
|
+
: props.onChange && props.onChange([matchedContact]);
|
|
182
|
+
}
|
|
183
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
184
|
+
}, [contactList.data, contactList.isFetching]);
|
|
185
|
+
const displayedContacts = useMemo(() => {
|
|
186
|
+
var _a;
|
|
187
|
+
let contacts = (_a = contactList.data) !== null && _a !== void 0 ? _a : [];
|
|
188
|
+
if (props.contactsToExclude && props.contactsToExclude.length > 0) {
|
|
189
|
+
contacts = differenceBy(contacts, props.contactsToExclude, 'ssoUsername');
|
|
190
|
+
}
|
|
191
|
+
if (props.contactFilter) {
|
|
192
|
+
contacts = contacts.filter(props.contactFilter);
|
|
193
|
+
}
|
|
194
|
+
return contacts;
|
|
195
|
+
}, [contactList.data, props.contactsToExclude, props.contactFilter]);
|
|
121
196
|
const onCustomerContactSelect = (contacts) => {
|
|
122
197
|
if (!isArray(contacts))
|
|
123
198
|
return;
|
|
@@ -134,11 +209,10 @@ function CaseContactsSelectorExternal(props) {
|
|
|
134
209
|
];
|
|
135
210
|
props.onChange && props.onChange(customerContacts);
|
|
136
211
|
};
|
|
137
|
-
const
|
|
138
|
-
props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber)
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
props.isDisabled;
|
|
212
|
+
const isNonOrgAdminSameAccountDisabled = props.loggedInUserRights.isExternal() &&
|
|
213
|
+
props.loggedInUserRights.isNonOrgAdminWithSameAccount(props.selectedAccountNumber);
|
|
214
|
+
const isDisabled = isNonOrgAdminSameAccountDisabled || props.isUpdating || contactList.isFetching || props.isDisabled;
|
|
215
|
+
const isLoading = props.isUpdating || contactList.isFetching;
|
|
142
216
|
const getCustomEmails = useCallback(() => {
|
|
143
217
|
return sortBy((customEmails || []).map((item) => (Object.assign(Object.assign({}, item), { ssoUsername: item.emailAddress, firstName: item.emailAddress, lastName: item.emailAddress }))), 'emailAddress');
|
|
144
218
|
}, [customEmails]);
|
|
@@ -147,34 +221,54 @@ function CaseContactsSelectorExternal(props) {
|
|
|
147
221
|
*/
|
|
148
222
|
const allOptions = useMemo(() => {
|
|
149
223
|
return [
|
|
150
|
-
...map(
|
|
224
|
+
...map(displayedContacts, (contact) => ({ contact, isCustomEmail: false })),
|
|
151
225
|
...map(getCustomEmails(), (email) => ({
|
|
152
226
|
isCustomEmail: true,
|
|
153
227
|
contact: Object.assign(Object.assign({}, email), { ssoUsername: email.emailAddress, firstName: email.emailAddress, lastName: email.emailAddress }),
|
|
154
228
|
})),
|
|
155
229
|
];
|
|
156
|
-
}, [
|
|
230
|
+
}, [displayedContacts, getCustomEmails]);
|
|
231
|
+
const isOwnerSelectionComplete = (query, options) => {
|
|
232
|
+
if (isEmpty(query)) {
|
|
233
|
+
return true;
|
|
234
|
+
}
|
|
235
|
+
const selectedLabel = !isEmpty(selected) ? getHydraContactLabel(selected[0]) : '';
|
|
236
|
+
if (query === selectedLabel) {
|
|
237
|
+
return true;
|
|
238
|
+
}
|
|
239
|
+
return options.some((option) => getHydraContactLabel(option.contact) === query);
|
|
240
|
+
};
|
|
157
241
|
/**
|
|
158
242
|
* update the shown options in the dropdown and reset the amount of options show to the default.
|
|
159
243
|
* @param query The user search term
|
|
160
244
|
*/
|
|
161
245
|
const onQueryUpdated = (query) => {
|
|
162
|
-
|
|
246
|
+
setHasNextPage(false);
|
|
247
|
+
if (isOwnerSelectionComplete(query, allOptions)) {
|
|
248
|
+
fetchAllActiveContacts();
|
|
163
249
|
setFilteredContacts(allOptions);
|
|
250
|
+
return;
|
|
251
|
+
}
|
|
252
|
+
const localFiltered = filter(allOptions, (option) => getHydraContactLabel(option.contact).toLowerCase().includes(query.toLowerCase()));
|
|
253
|
+
setFilteredContacts(localFiltered);
|
|
254
|
+
debouncedSearch(query);
|
|
255
|
+
};
|
|
256
|
+
const onDropdownOpenChange = (isOpen) => {
|
|
257
|
+
if (!isOpen) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
if (currentSearchQuery.current) {
|
|
261
|
+
fetchAllActiveContacts();
|
|
164
262
|
}
|
|
165
263
|
else {
|
|
166
|
-
|
|
167
|
-
setFilteredContacts(filteredContacts);
|
|
264
|
+
setFilteredContacts(allOptions);
|
|
168
265
|
}
|
|
169
266
|
};
|
|
170
267
|
/**
|
|
171
268
|
* Reset the filtered contacts and the current offset.
|
|
172
269
|
*/
|
|
173
270
|
const onClearQuery = () => {
|
|
174
|
-
|
|
175
|
-
const numOfCustomEmails = (_a = customEmails === null || customEmails === void 0 ? void 0 : customEmails.length) !== null && _a !== void 0 ? _a : 0;
|
|
176
|
-
if (filteredContacts.length === contactList.data.length + numOfCustomEmails)
|
|
177
|
-
return;
|
|
271
|
+
fetchAllActiveContacts();
|
|
178
272
|
setFilteredContacts(allOptions);
|
|
179
273
|
};
|
|
180
274
|
/**
|
|
@@ -195,7 +289,7 @@ function CaseContactsSelectorExternal(props) {
|
|
|
195
289
|
*/
|
|
196
290
|
useEffect(() => {
|
|
197
291
|
setFilteredContacts(allOptions);
|
|
198
|
-
}, [
|
|
199
|
-
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:
|
|
292
|
+
}, [displayedContacts, customEmails, allOptions, selected]);
|
|
293
|
+
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, onOpenChange: onDropdownOpenChange, onQueryUpdated: onQueryUpdated, onSelect: onCustomerContactSelect, canAddNew: canAddNew, getCreateNewText: props === null || props === void 0 ? void 0 : props.getCreateNewText, isLoading: isLoading || isLoadingMore, onHandleLoadMore: loadMoreContacts, isShowMoreOptionVisible: hasNextPage }));
|
|
200
294
|
}
|
|
201
295
|
export { CaseContactsSelectorExternal, getHydraContactLabel };
|
|
@@ -32,6 +32,8 @@ interface IProps {
|
|
|
32
32
|
isSpaceAllowed?: boolean;
|
|
33
33
|
inputValue?: string;
|
|
34
34
|
isExportingPDF?: boolean;
|
|
35
|
+
/** When false with allowInlineEdit false, render read-only content instead of the input children. */
|
|
36
|
+
showAlwaysEditableInput?: boolean;
|
|
35
37
|
}
|
|
36
38
|
declare function NewInlineEdit(props: IProps): React.JSX.Element;
|
|
37
39
|
declare namespace NewInlineEdit {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NewInlineEdit.d.ts","sourceRoot":"","sources":["../../../src/InlineEdit/NewInlineEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAI7B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IACtC,UAAU,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACxC,YAAY,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC1C,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;IAC5C,gBAAgB,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,SAAS,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAG1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qGAAqG;IACrG,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACrC;AAsBD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAsMnC;kBAtMQ,aAAa;;;AAyMtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -106,7 +106,10 @@ function NewInlineEdit(props) {
|
|
|
106
106
|
React.createElement(Trans, null, props.saveLabel)),
|
|
107
107
|
React.createElement("button", { type: "button", "data-tracking-id": props.dataTrackingId ? `${props.dataTrackingId}-inline-edit-cancel` : null, className: "btn btn-app btn-link", onClick: onCancelClicked },
|
|
108
108
|
React.createElement(Trans, null, props.cancelLabel))));
|
|
109
|
+
const showAlwaysEditableInput = props.showAlwaysEditableInput !== false;
|
|
109
110
|
const canShowContent = !isEditing && props.allowInlineEdit && props.content;
|
|
111
|
+
const canShowReadOnlyContent = !props.allowInlineEdit && !showAlwaysEditableInput && props.content;
|
|
112
|
+
const contentDisplayClassName = props.hideLabel ? 'pf-v6-u-display-inline' : 'pf-v6-u-display-block';
|
|
110
113
|
const showCount = ` ${props.charCount} / ${props.charTotal}`;
|
|
111
114
|
return (React.createElement("div", { className: `form-group edit-question pf-v6-u-display-flex pf-v6-u-flex-direction-column ${props.formClassName}`, id: props.formId },
|
|
112
115
|
!props.hideLabel && (React.createElement(React.Fragment, null,
|
|
@@ -118,16 +121,18 @@ function NewInlineEdit(props) {
|
|
|
118
121
|
props.hideSaveCancel && isEditing && (React.createElement("span", { className: `
|
|
119
122
|
${props.charCount > props.charTotal ? 'char-count pf-v6-u-danger-color-100' : 'char-count'}` }, props.charCount ? showCount : null)),
|
|
120
123
|
canShowContent && !props.usePreformattedTag && (React.createElement(React.Fragment, null,
|
|
121
|
-
React.createElement("p", { id: props.inputId,
|
|
124
|
+
React.createElement("p", { id: props.inputId, className: contentDisplayClassName },
|
|
122
125
|
props.content,
|
|
123
126
|
React.createElement(React.Fragment, null,
|
|
124
127
|
props.helperContent,
|
|
125
128
|
renderEditButton()),
|
|
126
129
|
props.loadingIndicator && React.createElement("span", { className: "loading-indicator" }, props.loadingIndicator)))),
|
|
127
130
|
canShowContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
|
|
131
|
+
canShowReadOnlyContent && !props.usePreformattedTag && (React.createElement("p", { id: props.inputId, className: contentDisplayClassName }, props.content)),
|
|
132
|
+
canShowReadOnlyContent && props.usePreformattedTag && React.createElement("pre", { id: props.inputId }, props.content),
|
|
128
133
|
React.createElement(React.Fragment, null,
|
|
129
134
|
React.createElement("div", { onBlur: onBlurChild, onKeyDown: handleKeyDown, className: "inlineEdit-wrapper", "data-tracking-id": "inline-edit-input-wrapper" },
|
|
130
|
-
!props.allowInlineEdit && props.children,
|
|
135
|
+
!props.allowInlineEdit && showAlwaysEditableInput && props.children,
|
|
131
136
|
props.allowInlineEdit &&
|
|
132
137
|
isEditing &&
|
|
133
138
|
React.Children.map(props.children, (child) => {
|
|
@@ -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"}
|