@rh-support/troubleshoot 2.4.10-beta.8 → 2.5.0

package/lib/esm/components/CaseManagement/Cep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AAuCA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,eAwShC"}
+{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBAuThC"}

package/lib/esm/components/CaseManagement/Cep.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, Form, FormGroup, Modal, ModalVariant, Popover, PopoverPosition, TextArea, TextInput, ValidatedOptions, } from '@patternfly/react-core';
+import { Button, Checkbox, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, Popover, PopoverPosition, TextArea, TextInput, ValidatedOptions, } from '@patternfly/react-core';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/js/icons/question-circle-icon';
 import { LoadingIndicator, ToastNotification, useConfirmation } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
@@ -66,8 +66,9 @@ export function Cep(props) {
                 // edit mode - set cep to false
                 yield confirm({
                     catchOnCancel: true,
-                    title: t(`Updating Consultant Engagement in Progress`),
-                    description: t('Are you sure?'),
+                    title: t(`No consultant engaged?`),
+                    description: t("You're confirming that you don't have a consultant engaged on this ticket."),
+                    confirmText: t('Yes, confirm'),
                 });
                 cepUpdate({ cep: false });
                 clearCepFormInputs();
@@ -91,7 +92,7 @@ export function Cep(props) {
             checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status);
             if (caseDetails.cep) {
                 yield postCepDetails(caseDispatch, caseNumber, cepDetailsLocal);
-                updateDiscussionStateComments(dispatchDiscussion, caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
+                updateDiscussionStateComments(dispatchDiscussion, caseDispatch, caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
             }
             ToastNotification.addSuccessMessage(t(`Consultant Engagement in Progress has been updated successfully`));
         }
@@ -137,12 +138,11 @@ export function Cep(props) {
     if (!canUseCep) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { className: "form-group pf-u-mt-lg" },
-        React.createElement("input", { type: "checkbox", id: "get-support-cep", name: "get-support-cep", checked: isEqual(cep, undefined) ? false : cep, onChange: onCepChange, "data-tracking-id": "get-support-cep" }),
-        React.createElement("label", { htmlFor: "get-support-cep" },
-            React.createElement(Trans, null, "Consultant has been engaged")),
-        !isExportingPDF ? (React.createElement(Popover, { "aria-label": "CEP info", position: PopoverPosition.top, bodyContent: React.createElement(Trans, null, "Used by consultants to indicate that a consulting engagement is in progress and the issue requires increased attention from support resources."), closeBtnAriaLabel: "Close" },
-            React.createElement(QuestionCircleIcon, { className: "pf-u-ml-xs icon-size", "aria-label": "CEP Info" }))) : (''),
+    return (React.createElement("div", { className: "form-group pf-v5-u-my-md" },
+        React.createElement("div", { id: "cep-checkbox" },
+            React.createElement(Checkbox, { id: "get-support-cep", label: t('Consultant has been engaged'), isChecked: isEqual(cep, undefined) ? false : cep, onChange: onCepChange, "data-tracking-id": "get-support-cep", name: "get-support-cep" }),
+            !isExportingPDF ? (React.createElement(Popover, { id: "cep-info-popover", "aria-label": "CEP info", position: PopoverPosition.top, bodyContent: React.createElement(Trans, null, "Used by consultants to indicate that a consulting engagement is in progress and the issue requires increased attention from support resources."), closeBtnAriaLabel: "Close" },
+                React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": "CEP Info" }))) : ('')),
         React.createElement(LoadingIndicator, { show: isCaseUpdating && isPostingCep, isInline: true, size: "sm" }),
         React.createElement(Modal, { id: "cep-details-modal", title: t('Consultant engagement is in progress'), "aria-describedby": "cep-modal-description", isOpen: isCepModalOpen, showClose: true, variant: ModalVariant.large, onClose: onCancel, actions: [
                 React.createElement(Button, { key: "confirm", variant: "primary", className: "btn btn-app btn-primary", onClick: onSubmit, isDisabled: saveButtonIsClicked && isFormInvalid, "data-tracking-id": "cep-details-save" },
@@ -155,18 +155,34 @@ export function Cep(props) {
             React.createElement("p", { className: "push-top-narrow", id: "cep-madal-description" },
                 React.createElement(Trans, null, "If requested, Red Hat Support will use this information to initiate direct contact (i.e. phone, chat) with listed contact(s) in order to provide faster assistance. The primary method of communication will continue to be this support ticket.")),
             React.createElement(Form, { className: "push-top-narrow" },
-                React.createElement(FormGroup, { label: t('Contact name'), isRequired: true, fieldId: "cep-contact-name", helperText: t('Provide main contact(s) troubleshooting the issue.') },
-                    React.createElement(TextInput, { type: "text", id: "cep-contact-name", isRequired: true, maxLength: 254, "aria-label": t('Contact name'), onChange: onCepContactNameChange, validated: saveButtonIsClicked && isEmpty((_d = cepDetailsLocal.contactName) === null || _d === void 0 ? void 0 : _d.trim())
+                React.createElement(FormGroup, { label: t('Contact name'), isRequired: true, fieldId: "cep-contact-name" },
+                    React.createElement(TextInput, { type: "text", id: "cep-contact-name", isRequired: true, maxLength: 254, "aria-label": t('Contact name'), onChange: (_event, value) => onCepContactNameChange(value), validated: saveButtonIsClicked && isEmpty((_d = cepDetailsLocal.contactName) === null || _d === void 0 ? void 0 : _d.trim())
                             ? ValidatedOptions.error
-                            : ValidatedOptions.default })),
-                React.createElement(FormGroup, { label: t('Availability/Working hours'), isRequired: true, fieldId: "cep-workingHours", helperText: t('Indicate working hours, time zone; specify if not available on certain dates (i.e. weekends, holidays).') },
-                    React.createElement(TextInput, { type: "text", id: "cep-workingHours", isRequired: true, maxLength: 254, "aria-label": t('Availability/Working hours'), onChange: onCepWorkingHoursChange, validated: saveButtonIsClicked && isEmpty((_e = cepDetailsLocal.workingHours) === null || _e === void 0 ? void 0 : _e.trim())
+                            : ValidatedOptions.default }),
+                    React.createElement(FormHelperText, null,
+                        React.createElement(HelperText, null,
+                            React.createElement(HelperTextItem, null,
+                                React.createElement(Trans, null, "Provide main contact(s) troubleshooting the issue."))))),
+                React.createElement(FormGroup, { label: t('Availability/Working hours'), isRequired: true, fieldId: "cep-workingHours" },
+                    React.createElement(TextInput, { type: "text", id: "cep-workingHours", isRequired: true, maxLength: 254, "aria-label": t('Availability/Working hours'), onChange: (_event, value) => onCepWorkingHoursChange(value), validated: saveButtonIsClicked && isEmpty((_e = cepDetailsLocal.workingHours) === null || _e === void 0 ? void 0 : _e.trim())
                             ? ValidatedOptions.error
-                            : ValidatedOptions.default })),
-                React.createElement(FormGroup, { label: t('Contact information'), isRequired: true, fieldId: "cep-contactInformation", helperText: t('Please provide phone number, chat ID or email.') },
-                    React.createElement(TextArea, { id: "cep-contactInformation", "aria-required": true, isRequired: true, maxLength: 2000, name: "cep-contactInformation", value: cepDetailsLocal.contactInformation, onChange: onCepContactInformationsChange, "aria-label": "auto resizing text area example", autoResize: true, validated: saveButtonIsClicked && isEmpty((_f = cepDetailsLocal.contactInformation) === null || _f === void 0 ? void 0 : _f.trim())
+                            : ValidatedOptions.default }),
+                    React.createElement(FormHelperText, null,
+                        React.createElement(HelperText, null,
+                            React.createElement(HelperTextItem, null,
+                                React.createElement(Trans, null, "Indicate working hours, time zone; specify if not available on certain dates (i.e. weekends, holidays)."))))),
+                React.createElement(FormGroup, { label: t('Contact information'), isRequired: true, fieldId: "cep-contactInformation" },
+                    React.createElement(TextArea, { id: "cep-contactInformation", "aria-required": true, isRequired: true, maxLength: 2000, name: "cep-contactInformation", value: cepDetailsLocal.contactInformation, onChange: (_event, value) => onCepContactInformationsChange(value), "aria-label": "auto resizing text area example", autoResize: true, validated: saveButtonIsClicked && isEmpty((_f = cepDetailsLocal.contactInformation) === null || _f === void 0 ? void 0 : _f.trim())
                             ? ValidatedOptions.error
-                            : ValidatedOptions.default })),
-                React.createElement(FormGroup, { label: t('Notes'), fieldId: "cep-notes", helperText: t("Provide any pertinent information that Red Hat Support should be aware of that's not already captured in the issue statement or comments.") },
-                    React.createElement(TextArea, { id: "cep-notes", "aria-required": false, isRequired: false, maxLength: 2000, name: "cep-notes", value: cepDetailsLocal.notes, onChange: onCepNotesChange, autoResize: true }))))));
+                            : ValidatedOptions.default, resizeOrientation: "vertical" }),
+                    React.createElement(FormHelperText, null,
+                        React.createElement(HelperText, null,
+                            React.createElement(HelperTextItem, null,
+                                React.createElement(Trans, null, "Please provide phone number, chat ID or email."))))),
+                React.createElement(FormGroup, { label: t('Notes'), fieldId: "cep-notes" },
+                    React.createElement(TextArea, { id: "cep-notes", "aria-required": false, isRequired: false, maxLength: 2000, name: "cep-notes", value: cepDetailsLocal.notes, onChange: (_event, value) => onCepNotesChange(value), autoResize: true, resizeOrientation: "vertical" }),
+                    React.createElement(FormHelperText, null,
+                        React.createElement(HelperText, null,
+                            React.createElement(HelperTextItem, null,
+                                React.createElement(Trans, null, "Provide any pertinent information that Red Hat Support should be aware of that's not already captured in the issue statement or comments.")))))))));
 }

package/lib/esm/components/CaseManagement/ESSRemoteSessionCheckBox.d.ts

@@ -1,3 +1,4 @@
-declare const ESSRemoteSessionCheck: () => JSX.Element;
+import React from 'react';
+declare const ESSRemoteSessionCheck: () => React.JSX.Element;
 export default ESSRemoteSessionCheck;
 //# sourceMappingURL=ESSRemoteSessionCheckBox.d.ts.map

package/lib/esm/components/CaseManagement/ESSRemoteSessionCheckBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ESSRemoteSessionCheckBox.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/ESSRemoteSessionCheckBox.tsx"],"names":[],"mappings":"AA8BA,QAAA,MAAM,qBAAqB,mBAyO1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ESSRemoteSessionCheckBox.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/ESSRemoteSessionCheckBox.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAqB/D,QAAA,MAAM,qBAAqB,yBAyO1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/esm/components/CaseManagement/ESSRemoteSessionCheckBox.js

@@ -8,8 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Modal, Select, SelectOption } from '@patternfly/react-core';
-import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
+import { Button, ButtonVariant, Checkbox, Modal } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import DownloadIcon from '@patternfly/react-icons/dist/js/icons/download-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
@@ -85,13 +86,13 @@ const ESSRemoteSessionCheck = () => {
         fetchTerms();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const handleCheckBoxChange = (checked) => {
+    const handleCheckBoxChange = (_event, checked) => {
         setRemoteSessionChecked(checked);
         setCaseDetails(caseDispatch, {
             screenSessionRequested: checked,
         });
     };
-    const handleTermsCheckBoxChange = (checked) => {
+    const handleTermsCheckBoxChange = (event, checked) => {
         setRemoteSessionChecked(checked);
         setIsRSAModalOpen(checked);
     };
@@ -107,7 +108,7 @@ const ESSRemoteSessionCheck = () => {
         setIsRSAModalOpen(false);
     };
     // Handle terms checkbox
-    const onCheckBoxChange = (value) => {
+    const onCheckBoxChange = (_event, value) => {
         setIsTermsChecked(value);
     };
     // Handle language change
@@ -140,27 +141,27 @@ const ESSRemoteSessionCheck = () => {
                     React.createElement(Trans, null, "remote session"))), description: t('Red Hat will add a comment to your case to schedule your remote session.'), "data-tracking-id": "case-management-remote-session-check", isChecked: remoteSessionChecked, onChange: termsAcceptedOnAccountLevel ? handleCheckBoxChange : handleTermsCheckBoxChange, isDisabled: isCaseUpdating, className: "rsa-checkbox" }),
         React.createElement(Modal, { id: "remote-session-check-modal", "aria-label": t('Remote Session Agreement'), title: t('Remote Session Agreement'), isOpen: isRSAModalOpen, onClose: onCancel, actions: modalActions },
             React.createElement(React.Fragment, null,
-                React.createElement("p", { className: "pf-u-mt-xs" },
+                React.createElement("p", { className: "pf-v5-u-mt-xs" },
                     React.createElement(Trans, null,
                         "Your acceptance of this remote session agreement is required ",
                         React.createElement("strong", null, "for each case"),
                         ' ',
                         "when you request Red Hat\u2019s support team to directly access your network or systems.")),
-                React.createElement("p", { className: "pf-u-mt-md" },
+                React.createElement("p", { className: "pf-v5-u-mt-md" },
                     React.createElement(Trans, null, "Remote access to your network or systems is not a standard Red Hat problem resolution process. Before Red Hat logs into your systems to analyze your support issue during a remote session, Red Hat needs your approval and authorization for such remote access.")),
-                React.createElement("p", { className: "pf-u-mt-md" },
+                React.createElement("p", { className: "pf-v5-u-mt-md" },
                     React.createElement(Trans, null, "Please read and accept the remote session terms below to allow Red Hat to access your network or systems.")),
                 React.createElement("div", null,
-                    React.createElement(Select, { className: "pf-u-mt-md", "aria-label": t('Select language'), id: "terms-language-selector", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: onDropdownToggle, width: 350 }, Object.keys(allTranslations).map((option, index) => (React.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option))))),
-                    React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "ess-rsa-modal-terms-download", className: "pf-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
+                    React.createElement(Select, { className: "pf-v5-u-mt-md", "aria-label": t('Select language'), id: "terms-language-selector", selections: selectedTranslation.localeCode, onSelect: onLangChange, isOpen: isLangSelectorDropdownOpen, menuAppendTo: document.body, placeholderText: t('Select an option that best fits'), onToggle: (_event, toggle) => onDropdownToggle(toggle), width: 350 }, Object.keys(allTranslations).map((option, index) => (React.createElement(SelectOption, { key: index, value: option }, getLocaleNameFromLocalCode(option))))),
+                    React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "ess-rsa-modal-terms-download", className: "pf-v5-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
                         t('Download'),
                         " ",
-                        React.createElement(DownloadIcon, { className: "pf-u-ml-xs" }))),
+                        React.createElement(DownloadIcon, { className: "pf-v5-u-ml-xs" }))),
                 React.createElement("div", null,
-                    React.createElement(Checkbox, { className: "pf-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
+                    React.createElement(Checkbox, { className: "pf-v5-u-mt-md rsa-checkbox", id: "terms-accept-checkbox", label: React.createElement(React.Fragment, null,
                             React.createElement(Trans, null, "I have read and agree to the"),
                             ' ',
-                            React.createElement("a", { className: "pf-c-button pf-m-link pf-m-inline align-link-items", rel: "noopener noreferrer", target: "_blank", href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": "ccase-management-ess-request-rsa" },
+                            React.createElement("a", { className: "pf-v5-c-button pf-m-link pf-m-inline align-link-items", rel: "noopener noreferrer", target: "_blank", href: selectedTranslation.pdfDownloadUrl, "data-tracking-id": "ccase-management-ess-request-rsa" },
                                 React.createElement(Trans, null, "terms "),
                                 React.createElement(ExternalLinkAltIcon, null))), isChecked: isTermsChecked, "aria-label": t('I have read and agree to the terms'), onChange: onCheckBoxChange }))))));
 };

package/lib/esm/components/CaseManagement/NoClusterIDReasonSelector.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface IProps {
     onReasonInputBoxChanged: (Reason: string) => void;
     onReasonChange: (Reason: string) => void;
@@ -7,6 +8,6 @@ interface IProps {
     isCustomer: boolean;
     isDisabled?: boolean;
 }
-declare const NoClusterIDReasonSelector: (props: IProps) => JSX.Element;
+declare const NoClusterIDReasonSelector: (props: IProps) => React.JSX.Element;
 export { NoClusterIDReasonSelector };
 //# sourceMappingURL=NoClusterIDReasonSelector.d.ts.map

package/lib/esm/components/CaseManagement/NoClusterIDReasonSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoClusterIDReasonSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/NoClusterIDReasonSelector.tsx"],"names":[],"mappings":"AAgBA,UAAU,MAAM;IACZ,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAeD,QAAA,MAAM,yBAAyB,UAAW,MAAM,gBAoJ/C,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"NoClusterIDReasonSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/NoClusterIDReasonSelector.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,UAAU,MAAM;IACZ,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,4BAA4B,EAAE,MAAM,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAeD,QAAA,MAAM,yBAAyB,UAAW,MAAM,sBAoJ/C,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/lib/esm/components/CaseManagement/NoClusterIDReasonSelector.js

@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { LoadingIndicator } from '@rh-support/components';
 import { fetchNoClusterIdReasonsMetadata, GlobalMetadataStateContext, useGlobalDispatchContext, } from '@rh-support/react-context';
@@ -98,11 +98,11 @@ const NoClusterIDReasonSelector = (props) => {
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true },
                 ' ',
                 "*")),
-        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: onToggle, onSelect: onSelect, selections: getSelectedItem(), isOpen: isOpen, placeholderText: t('Select an option or briefly describe your reason'), noValidate: props.isInValid, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper", validated: validated, className: `form-control${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged, "data-tracking-id": "no-openshift-cluster-id-reason" }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
+        React.createElement(Select, { variant: SelectVariant.typeahead, typeAheadAriaLabel: t('Select an option or briefly describe your reason'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, selections: getSelectedItem(), isOpen: isOpen, placeholderText: t('Select an option or briefly describe your reason'), noValidate: props.isInValid, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper", validated: validated, className: `${props.isInValid ? ' form-invalid' : ''}`, isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, required: true, onFilter: () => null, ref: selectRef, onTypeaheadInputChanged: onTypeaheadInputChanged, "data-tracking-id": "no-openshift-cluster-id-reason" }, (caseNoClusterIdReasonsList || []).map((option, index) => (React.createElement(SelectOption, { key: index, value: createState(option, t(option)) })))),
         React.createElement(LoadingIndicator, { show: caseNoClusterIdReasons.isFetching, size: "xs" }),
         React.createElement("p", { id: "validate-reason-helper", className: `form-instructions ${props.isInValid ? 'form-invalid' : ''}` },
             React.createElement(React.Fragment, null,
-                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-u-mr-sm" }),
+                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
                 ' ',
                 notRegistered ? (registerMyClusterID()) : (React.createElement(Trans, null, "Describing your reason can help us better understand and support your issue."))))));
 };

package/lib/esm/components/CaseManagement/OpenReferenceNumber.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IProps {
     inlineEditable?: boolean;
     hideSaveCancel?: boolean;
 }
-export default function OpenReferenceNumber(props: IProps): JSX.Element;
+export default function OpenReferenceNumber(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=OpenReferenceNumber.d.ts.map

package/lib/esm/components/CaseManagement/OpenReferenceNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenReferenceNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenReferenceNumber.tsx"],"names":[],"mappings":"AASA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAiExD"}
+{"version":3,"file":"OpenReferenceNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenReferenceNumber.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAiExD"}

package/lib/esm/components/CaseManagement/OpenShiftClusterId.d.ts

@@ -1,10 +1,11 @@
-export declare const v3Tov4TransitionLink: () => JSX.Element;
-export declare const discoverV4ClusterIdLink: () => JSX.Element;
-export declare const discoverV4ClusterIdLinkError: () => JSX.Element;
-export declare const isInvalidErrorMessage: () => JSX.Element;
+import React from 'react';
+export declare const v3Tov4TransitionLink: () => React.JSX.Element;
+export declare const discoverV4ClusterIdLink: () => React.JSX.Element;
+export declare const discoverV4ClusterIdLinkError: () => React.JSX.Element;
+export declare const isInvalidErrorMessage: () => React.JSX.Element;
 interface IProps {
     className?: string;
 }
-export declare function OpenShiftClusterId(props: IProps): JSX.Element;
+export declare function OpenShiftClusterId(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=OpenShiftClusterId.d.ts.map

package/lib/esm/components/CaseManagement/OpenShiftClusterId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,oBAAoB,mBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,mBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,mBAUxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAIjC,CAAC;AAEF,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAyR/C"}
+{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAsB/D,eAAO,MAAM,oBAAoB,yBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yBAYxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAIjC,CAAC;AAEF,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBA8S/C"}

package/lib/esm/components/CaseManagement/OpenShiftClusterId.js

@@ -14,7 +14,7 @@ import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { ClusterRecommendationsContext, ClusterRecommendationsDispatchContext, } from '../../context/ClusterRecommendationsContext';
 import { RouteContext } from '../../context/RouteContext';
@@ -29,10 +29,11 @@ export const v3Tov4TransitionLink = () => (React.createElement("a", { className:
     React.createElement(Trans, null, "How to transition from v3 to v4?")));
 export const discoverV4ClusterIdLink = () => (React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" }, "How do I determine my OpenShift 4.x Cluster ID?"));
 export const discoverV4ClusterIdLinkError = () => (React.createElement(React.Fragment, null,
-    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-u-mr-sm" }),
+    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
     React.createElement(Trans, { i18nKey: 'v4ClusterRequiredField' },
-        "Required field.",
-        React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" }, "How do I determine my OpenShift 4.x Cluster ID?"))));
+        "Cluster ID is required.",
+        React.createElement("div", null,
+            React.createElement("a", { className: "show-target", href: "/solutions/4505861", target: "_blank", rel: "noopener noreferrer" }, "How do I determine my OpenShift 4.x Cluster ID?")))));
 export const isInvalidErrorMessage = () => (React.createElement(React.Fragment, null,
     React.createElement(Trans, null,
         "Cluster Id is not valid. ",
@@ -58,8 +59,7 @@ export function OpenShiftClusterId(props) {
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
     const clusterRecommendationsDispatch = useContext(ClusterRecommendationsDispatchContext);
     const { clusterRecommendationsState: { clusterRecommendationsCache }, } = useContext(ClusterRecommendationsContext);
-    const majorVersion = (version && getVersion(version).major) || '';
-    const isOpenShiftV3 = product === 'OpenShift Container Platform' && majorVersion === '3';
+    const [showV3TextBox, setShowV3TextBox] = useState(false);
     const isCustomer = loggedInUserRights.data.isAccountSameAsLoggedInAccount(selectedAccountDetails.data.accountNumber);
     const [showClusterId, setShowClusterId] = useState(false);
     const [isClusterIdInvalid, setIsClusterIdInValid] = useState(false);
@@ -86,10 +86,16 @@ export function OpenShiftClusterId(props) {
      */
     useEffect(() => {
         var _a;
+        if (isEmpty(product))
+            return;
         const isClusterVisible = () => __awaiter(this, void 0, void 0, function* () {
-            var _b;
-            const hasCluster = yield isClusterIdEnabledForProduct(product, (_b = allProducts.data) === null || _b === void 0 ? void 0 : _b.productsResult);
+            var _a, _b;
+            const hasCluster = yield isClusterIdEnabledForProduct(product, (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult);
             setShowClusterId(hasCluster);
+            if (!hasCluster) {
+                resetClusterData();
+                return;
+            }
             // if clusterId is already populated it means it comes from session and
             // we ignore url clusterId otherwise we get cluster id from url and validate it
             const clusterIdFromUrl = queryParams === null || queryParams === void 0 ? void 0 : queryParams.clusterId;
@@ -110,35 +116,47 @@ export function OpenShiftClusterId(props) {
                     setIsClusterIdInValid(false);
                 }
             }
+            const majorVersion = (_b = getVersion(version)) === null || _b === void 0 ? void 0 : _b.major;
+            const isOpenShiftV3 = product === 'OpenShift Container Platform' && majorVersion === '3';
+            setShowV3TextBox(isOpenShiftV3);
+            if (isOpenShiftV3 || noClusterIdReasonExplanation === 'v3-cluster') {
+                setCaseDetails(caseDispatch, Object.assign({ openshiftClusterID: '' }, (noClusterIdReasonExplanation !== 'v3-cluster' && {
+                    noClusterIdReason: '',
+                    noClusterIdReasonExplanation: '',
+                })));
+                if (noClusterIdReasonExplanation === 'v3-cluster') {
+                    setV3Selected(true);
+                    setSelectedReason('v3-cluster');
+                }
+                else if (!isEmpty(noClusterIdReason)) {
+                    setDontKnowSelected(true);
+                    setSelectedReason('dont-have-id');
+                }
+            }
+            else {
+                setCaseState(caseDispatch, { v3ClusterName: '' });
+                setCaseDetails(caseDispatch, Object.assign({}, (noClusterIdReasonExplanation === 'v3-cluster' && {
+                    noClusterIdReason: '',
+                    noClusterIdReasonExplanation: '',
+                })));
+                setV3Selected(false);
+                if (!isEmpty(noClusterIdReason)) {
+                    setDontKnowSelected(true);
+                    setSelectedReason('dont-have-id');
+                }
+            }
         });
         if ((((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) || []).length > 0) {
             isClusterVisible();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [product, version, allProducts.data]);
-    // On preview page user may change product and version we need to reset internal state
-    // context api state will be reset on parent component each time user changes product and version
-    useEffect(() => {
-        clusterStateReset();
-        v3ClusterNameInputBoxChanged(v3ClusterName);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product, version]);
     /**
      * Hook to set clusterId fields when comes from session or backward/forward
      **/
     useEffect(() => {
         const isClusterIdInvalid = getIsClusterIdInvalid(openshiftClusterID);
         setIsClusterIdInValid(isClusterIdInvalid);
-        // when user click on back and continue button, need to show v3 text box or reasons dropdown
-        if (!isEmpty(v3ClusterName) ||
-            (noClusterIdReason === 'Other' && noClusterIdReasonExplanation === 'v3-cluster')) {
-            setV3Selected(true);
-            setSelectedReason('v3-cluster');
-        }
-        else if (!isEmpty(noClusterIdReason)) {
-            setDontKnowSelected(true);
-            setSelectedReason('dont-have-id');
-        }
         const canFetchClusterRecommendation = !isClusterIdInvalid && !isEmpty(openshiftClusterID);
         canFetchClusterRecommendation &&
             fetchClusterRecommendations(clusterRecommendationsDispatch, openshiftClusterID, clusterRecommendationsCache);
@@ -208,8 +226,8 @@ export function OpenShiftClusterId(props) {
     if (!showClusterId)
         return null;
     return (React.createElement("div", { className: `${props.className ? props.className : ''}` },
-        !isOpenShiftV3 && (React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: openshiftDisplayName, openshiftClusterIDState: openshiftClusterID || selectedReason, onClusterIdStateUpdate: onClusterIdStateUpdate, isClusterIdInvalid: isNextBtnClickedToShowValidationError &&
+        !showV3TextBox && (React.createElement(OpenshiftDropdownV4, { openshiftDisplayName: openshiftDisplayName, openshiftClusterIDState: openshiftClusterID || selectedReason, onClusterIdStateUpdate: onClusterIdStateUpdate, isClusterIdInvalid: isNextBtnClickedToShowValidationError &&
                 ((isEmpty(openshiftClusterID) && isEmpty(selectedReason)) || isClusterIdInvalid), clusterIdDropdownFormInstructions: clusterIdDropdownFormInstructions(), onClusterClear: resetClusterData, isV3: product !== 'OpenShift Container Platform' })),
-        noClusterIdReasonExplanation !== 'v3-cluster' && dontKnowSelected && !isOpenShiftV3 && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: noClusterIdReasonExplanation, noClusterIdReason: noClusterIdReason, onReasonInputBoxChanged: onReasonExplanationInputBoxChanged, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer })),
-        (v3Selected || isOpenShiftV3) && (React.createElement(OpenShiftV3Inputbox, { v3ClusterName: v3ClusterName, onReasonInputBoxChanged: v3ClusterNameInputBoxChanged, isInValid: isEmpty(v3ClusterName.trim()) && isNextBtnClickedToShowValidationError, v3Selected: v3Selected }))));
+        noClusterIdReasonExplanation !== 'v3-cluster' && dontKnowSelected && !showV3TextBox && (React.createElement(NoClusterIDReasonSelector, { noClusterIdReasonExplanation: noClusterIdReasonExplanation, noClusterIdReason: noClusterIdReason, onReasonInputBoxChanged: onReasonExplanationInputBoxChanged, onReasonChange: onReasonChange, isInValid: isInVaidNoClusterIdReason, isCustomer: isCustomer })),
+        (v3Selected || showV3TextBox) && (React.createElement(OpenShiftV3Inputbox, { v3ClusterName: v3ClusterName, onReasonInputBoxChanged: v3ClusterNameInputBoxChanged, isInValid: isEmpty(v3ClusterName.trim()) && isNextBtnClickedToShowValidationError, v3Selected: v3Selected }))));
 }

package/lib/esm/components/CaseManagement/OpenShiftV3Inputbox.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 interface IProps {
     onReasonInputBoxChanged: (reason: string) => void;
     v3ClusterName: string;
     isInValid: boolean;
     v3Selected: boolean;
 }
-declare function OpenShiftV3Inputbox(props: IProps): JSX.Element;
+declare function OpenShiftV3Inputbox(props: IProps): React.JSX.Element;
 export { OpenShiftV3Inputbox };
 //# sourceMappingURL=OpenShiftV3Inputbox.d.ts.map

package/lib/esm/components/CaseManagement/OpenShiftV3Inputbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenShiftV3Inputbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftV3Inputbox.tsx"],"names":[],"mappings":"AAQA,UAAU,MAAM;IACZ,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eA+BzC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"OpenShiftV3Inputbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftV3Inputbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,UAAU,MAAM;IACZ,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBA+BzC;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/esm/components/CaseManagement/OpenShiftV3Inputbox.js

@@ -12,7 +12,7 @@ function OpenShiftV3Inputbox(props) {
             React.createElement(Trans, null, "OpenShift Cluster Name"),
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"),
             React.createElement(CaseOpenShiftV3Popover, null)),
-        React.createElement(TextInput, { id: "case-details-v3-cluster-name", value: props.v3ClusterName, type: "text", onChange: props.onReasonInputBoxChanged, "aria-label": t('Enter your Cluster Name'), placeholder: t('Enter your Cluster Name'), required: true, className: `form-control ${props.isInValid ? 'form-invalid' : ''}`, "data-tracking-id": "openshift-v3-cluster-name" }),
+        React.createElement(TextInput, { id: "case-details-v3-cluster-name", value: props.v3ClusterName, type: "text", onChange: (e, value) => props.onReasonInputBoxChanged(value), "aria-label": t('Enter your Cluster Name'), placeholder: t('Enter your Cluster Name'), required: true, className: `${props.isInValid ? 'form-invalid' : ''}`, "data-tracking-id": "openshift-v3-cluster-name" }),
         React.createElement("p", { id: "validated-helper", className: `form-instructions ${props.isInValid ? 'form-invalid' : ''}` },
             "If you do not have your Cluster Name available, briefly explain why.",
             ' ',

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts

@@ -1,5 +1,6 @@
 import { IClusterSubscription } from '@cee-eng/hydrajs/@types/models/cloud';
 import { IDClassNameProps } from '@rh-support/types/shared';
+import React from 'react';
 interface IProps extends IDClassNameProps {
     openshiftClusterIDState: string;
     onClusterIdStateUpdate: (cluster: Partial<IClusterSubscription>, value?: string) => void;
@@ -11,7 +12,7 @@ interface IProps extends IDClassNameProps {
     noClusterIdReasonExplanation?: string;
     openshiftDisplayName?: string;
 }
-declare function OpenshiftDropdownV4(props: IProps): JSX.Element;
+declare function OpenshiftDropdownV4(props: IProps): React.JSX.Element;
 declare namespace OpenshiftDropdownV4 {
     var defaultProps: {};
 }

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAWjF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAuBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAqXzC;kBArXQ,mBAAmB;;;AAwX5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAI5E,OAAO,EAAE,gBAAgB,EAAuB,MAAM,0BAA0B,CAAC;AAIjF,OAAO,KAA2D,MAAM,OAAO,CAAC;AAOhF,UAAU,MAAO,SAAQ,gBAAgB;IACrC,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,kBAAkB,EAAE,OAAO,CAAC;IAC5B,iCAAiC,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAuBD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,qBAsXzC;kBAtXQ,mBAAmB;;;AAyX5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/lib/esm/components/CaseManagement/OpenshiftDropdownV4.js

@@ -8,7 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { cloud } from '@cee-eng/hydrajs';
-import { Checkbox, Divider, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Checkbox, Divider } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { useLRUCache } from '@rh-support/components';
 import debounce from 'lodash/debounce';
 import groupBy from 'lodash/groupBy';
@@ -123,7 +124,7 @@ function OpenshiftDropdownV4(props) {
         const clusterOptions = [];
         domainNames.forEach((domain, index) => {
             domain !== '' &&
-                clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-u-font-weight-bold pf-u-color-400", value: createState(domain, domain), key: domain + index }));
+                clusterOptions.push(React.createElement(SelectOption, { isDisabled: true, className: "pf-v5-u-font-weight-bold pf-v5-u-color-400", value: createState(domain, domain), key: domain + index }));
             clustersResponseGrouped[domain] &&
                 clustersResponseGrouped[domain].forEach((cluster, i) => {
                     clusterOptions.push(React.createElement(SelectOption, { key: cluster.external_cluster_id, value: createState(cluster.external_cluster_id, getDisplayNameForCluster(cluster) || cluster.external_cluster_id, cluster.openshift_version) }));
@@ -160,7 +161,7 @@ function OpenshiftDropdownV4(props) {
             return {};
         }
     });
-    const fetchAccountClusters = (search = '', page = 0) => __awaiter(this, void 0, void 0, function* () {
+    const fetchAccountClusters = (...args_1) => __awaiter(this, [...args_1], void 0, function* (search = '', page = 1) {
         search = search.trim();
         setIsFetchingClusters(true);
         try {
@@ -212,7 +213,7 @@ function OpenshiftDropdownV4(props) {
         catch (e) {
             // silently fails
             setIsFetchingClusters(false);
-            return { items: [], totalResult: 0, page: 0, total: 0 };
+            return { items: [], totalResult: 0, page: 1, total: 0 };
         }
     });
     // when user visits case detail or clusterId comes from url,
@@ -288,13 +289,13 @@ function OpenshiftDropdownV4(props) {
                 React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
                 !isExportingPDF ? React.createElement(CaseOpenShiftPopover, null) : ''),
             React.createElement("span", { id: titleId, hidden: true }, "Select a state"),
-            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, isDisabled: props.isDisabled, typeAheadAriaLabel: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), onToggle: onToggle, onSelect: onSelect, onClear: !isExportingPDF ? onDropdownClear : undefined, selections: getSelectedItem(), isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, validated: validated, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", required: true }, (isFetchingClusters && { loadingVariant: 'spinner' }), (!isFetchingClusters &&
+            React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, isDisabled: props.isDisabled, typeAheadAriaLabel: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onSelect, onClear: !isExportingPDF ? onDropdownClear : undefined, selections: getSelectedItem(), isOpen: isOpen, "aria-labelledby": titleId, placeholderText: t('Search by Cluster ID, alias, and domain or manually enter your Cluster ID'), hasInlineFilter: false, onTypeaheadInputChanged: debounceFn, onFilter: () => undefined, validated: validated, "aria-invalid": props.isClusterIdInvalid, "aria-describedby": "clusterID-validate-helper", required: true }, (isFetchingClusters && { loadingVariant: 'spinner' }), (!isFetchingClusters &&
                 clustersRawResponse.length < totalResultsNo && {
                 loadingVariant: {
                     text: 'Display additional results',
                     onClick: onViewMoreClick,
                 },
-            }), { "data-tracking-id": "openshift-cluster-id" }), clustersSelectOptions),
+            }), { "data-tracking-id": "openshift-cluster-id", className: "openshift-cluster-id" }), clustersSelectOptions),
             React.createElement("div", { id: "clusterID-validate-helper", className: `form-instructions ${props.isClusterIdInvalid ? 'form-invalid' : ''}` }, props.clusterIdDropdownFormInstructions))));
 }
 OpenshiftDropdownV4.defaultProps = defaultProps;

package/lib/esm/components/CaseManagement/RHAssociatesSelector.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export interface IProps {
 }
-declare function RHAssociatesSelector(props: IProps): JSX.Element;
+declare function RHAssociatesSelector(props: IProps): React.JSX.Element;
 export { RHAssociatesSelector };
 //# sourceMappingURL=RHAssociatesSelector.d.ts.map

package/lib/esm/components/CaseManagement/RHAssociatesSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RHAssociatesSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/RHAssociatesSelector.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,eAoM1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"RHAssociatesSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/RHAssociatesSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,MAAM,WAAW,MAAM;CAAG;AAG1B,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBA+M1C;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}