@rh-support/troubleshoot 2.6.14 → 2.6.16

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

@@ -1,10 +1,10 @@
-import { ValidatedOptions } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { SingleSelectDropdown } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import map from 'lodash/map';
+import React, { useContext, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
@@ -21,19 +21,14 @@ export default function CaseLanguageSelector(props) {
         caseLanguage: state.caseDetails.caseLanguage,
         isLoadingLang: state.isLoadingLang,
     }), isEqual);
-    const [isOpen, setIsOpen] = useState(false);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
     const canUseLanguageDetection = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseDetailsFields.CASE_LANGUAGE_DETECTION);
     const caseDispatch = useCaseDispatch();
     const { globalMetadataState: { caseLanguages }, } = useContext(GlobalMetadataStateContext);
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
-    const onLanguageChange = (event, selection) => {
-        setIsOpen(false);
-        onCaseDetailsChange({ caseLanguage: selection });
+    const onLanguageChange = (option) => {
+        onCaseDetailsChange({ caseLanguage: option.value });
     };
     useEffect(() => {
         if (!caseLanguage) {
@@ -57,12 +52,20 @@ export default function CaseLanguageSelector(props) {
         canUseLanguageDetection,
         props.isManageStep,
     ]);
+    const getLanguageDropdownOptions = map(caseLanguages.data, (language) => ({
+        label: Constants.languagesMap[language],
+        value: language,
+    }));
+    const getSelectedLanguageOption = {
+        label: caseLanguage ? Constants.languagesMap[caseLanguage] : '',
+        value: caseLanguage || '',
+    };
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", { htmlFor: "get-support-language" },
             React.createElement(Trans, null, "Preferred language"),
             ' ',
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        React.createElement(Select, { variant: SelectVariant.single, "aria-label": t(`Select a language`), onToggle: (_event, isOpen) => onToggle(isOpen), onSelect: onLanguageChange, selections: caseLanguage, isOpen: isOpen, "aria-labelledby": 'get-support-language', isDisabled: caseLanguages.isError, validated: caseLanguages.isError ? ValidatedOptions.error : ValidatedOptions.default, "data-tracking-id": "preferred-language-select" }, caseLanguages.data.map((sla, index) => (React.createElement(SelectOption, { value: sla, key: index }, Constants.languagesMap[sla])))),
+        React.createElement(SingleSelectDropdown, { placeholder: t('Select a language'), dataTrackingId: "preferred-language-select", options: getLanguageDropdownOptions, selected: getSelectedLanguageOption, isDisabled: caseLanguages.isError, isInvalid: caseLanguages.isError, onSelect: onLanguageChange }),
         React.createElement("p", { className: "form-instructions" },
             React.createElement(Trans, null, "Select a language for communicating with our support engineers."))));
 }

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

@@ -21,16 +21,16 @@ export default function CaseManagement(props) {
     return (React.createElement("form", null,
         React.createElement(SupportLevel, null),
         React.createElement(Grid, { hasGutter: true },
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                 React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                 React.createElement(ContactPhoneNumber, null))),
         React.createElement(ContactPhoneNumberAlert, null),
         React.createElement(Fts, { inlineEditable: false }),
         React.createElement(Grid, { hasGutter: true },
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                 React.createElement(CaseLanguageSelector, { isManageStep: true })),
-            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+            React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v6-u-mb-xs" },
                 React.createElement(CaseGroup, { init: true }))),
         React.createElement(CaseContactSelector, null),
         React.createElement(RHAssociatesSelector, null),

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":"AAuBA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBAuThC"}
+{"version":3,"file":"Cep.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/Cep.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/D,UAAU,MAAM;CAAG;AAEnB,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,qBA0ThC"}

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, Checkbox, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalVariant, Popover, PopoverPosition, TextArea, TextInput, ValidatedOptions, } from '@patternfly/react-core';
+import { Button, Checkbox, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, 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';
@@ -138,51 +138,54 @@ export function Cep(props) {
     if (!canUseCep) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement("div", { className: "form-group pf-v5-u-my-md" },
+    return (React.createElement("div", { className: "form-group pf-v6-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(QuestionCircleIcon, { className: "pf-v6-u-ml-xs icon-size cursor-pointer", "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(Modal, { id: "cep-details-modal", "aria-describedby": "cep-modal-description", isOpen: isCepModalOpen, variant: ModalVariant.large, onClose: onCancel },
+            React.createElement(ModalHeader, null,
+                React.createElement("h2", null, t('Consultant engagement is in progress'))),
+            React.createElement(ModalBody, null,
+                React.createElement("p", null,
+                    React.createElement(Trans, null, "Please provide the contact information of Consulting personnel troubleshooting the customer issue.")),
+                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" },
+                        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(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(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, 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."))))))),
+            React.createElement(ModalFooter, null,
                 React.createElement(Button, { key: "confirm", variant: "primary", className: "btn btn-app btn-primary", onClick: onSubmit, isDisabled: saveButtonIsClicked && isFormInvalid, "data-tracking-id": "cep-details-save" },
                     React.createElement(Trans, null, "Submit")),
                 React.createElement(Button, { key: "link", className: "btn btn-app btn-link", variant: "link", onClick: onCancel, "data-tracking-id": "cep-details-cancel", isDisabled: isCaseUpdating || isPostingCep },
-                    React.createElement(Trans, null, "Cancel")),
-            ] },
-            React.createElement("p", null,
-                React.createElement(Trans, null, "Please provide the contact information of Consulting personnel troubleshooting the customer issue.")),
-            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" },
-                    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(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(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, 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.")))))))));
+                    React.createElement(Trans, null, "Cancel"))))));
 }

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":"AAUA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAqB/D,QAAA,MAAM,qBAAqB,yBAyO1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ESSRemoteSessionCheckBox.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/ESSRemoteSessionCheckBox.tsx"],"names":[],"mappings":"AASA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAqB/D,QAAA,MAAM,qBAAqB,yBA8O1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -8,11 +8,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { publicApi } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant, Checkbox, Modal } from '@patternfly/react-core';
-import { Select, SelectOption } from '@patternfly/react-core/deprecated';
+import { Button, ButtonVariant, Checkbox, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
 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 { SingleSelectDropdown, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { TncConstants } from '@rh-support/utils';
 import isEqual from 'lodash/isEmpty';
@@ -48,9 +47,8 @@ const ESSRemoteSessionCheck = () => {
         translatedInstructions: 'Please read and accept the remote session terms below to allow Red Hat to access your network or systems.',
         translatedTermsName: 'Remote Access Agreement',
     });
-    const [allTranslations, setAllTranslations] = useState({});
+    const [languageOptions, setLanguageOptions] = useState([]);
     const [agreeLoading, setAgreeLoading] = useState(false);
-    const [isLangSelectorDropdownOpen, setisLangSelectorDropdownOpen] = useState(false);
     const [isTermsChecked, setIsTermsChecked] = useState(false);
     const [isRSAModalOpen, setIsRSAModalOpen] = useState(false);
     const { isCaseUpdating, screenSessionRequested } = useCaseSelector((state) => ({
@@ -69,15 +67,20 @@ const ESSRemoteSessionCheck = () => {
             try {
                 const response = yield request(siteCode, eventCode, user);
                 let defaultTranslation = response[0].translations[0];
-                const translationLangInfoMap = response[0].translations.reduce((allTranslationsmap, translation) => {
+                // Transform translations into dropdown options
+                const options = response[0].translations.map((translation) => ({
+                    value: translation,
+                    label: getLocaleNameFromLocalCode(translation.localeCode),
+                    disabled: false,
+                }));
+                // Find default translation
+                response[0].translations.forEach((translation) => {
                     if (translation.isDefault) {
                         defaultTranslation = translation;
                     }
-                    allTranslationsmap[translation['localeCode']] = translation;
-                    return allTranslationsmap;
-                }, {});
+                });
                 setSelectedTranslation(defaultTranslation);
-                setAllTranslations(translationLangInfoMap);
+                setLanguageOptions(options);
             }
             catch (e) {
                 console.log(e);
@@ -112,12 +115,9 @@ const ESSRemoteSessionCheck = () => {
         setIsTermsChecked(value);
     };
     // Handle language change
-    const onLangChange = (event, lang) => {
-        setSelectedTranslation(allTranslations[lang]);
-        setisLangSelectorDropdownOpen(false);
+    const onLanguageSelect = (option) => {
+        setSelectedTranslation(option.value);
     };
-    // To handle dropdown toggle
-    const onDropdownToggle = (toggle) => setisLangSelectorDropdownOpen(toggle);
     // To handle modal cancel and close
     const onCancel = () => {
         setIsRSAModalOpen(false);
@@ -128,41 +128,49 @@ const ESSRemoteSessionCheck = () => {
         setRemoteSessionChecked(false);
         setAgreeLoading(false);
     };
-    const modalActions = [
-        React.createElement(Button, { key: "submit", "aria-label": t('I agree'), variant: ButtonVariant.primary, onClick: submitRemoteSessionAgreement, "data-tracking-id": "ess-remote-session-agreement-check", isLoading: agreeLoading, isDisabled: !isTermsChecked || agreeLoading }, t('I agree')),
-    ];
     // To check if terms have been accepted on account level
     const termsAcceptedOnAccountLevel = loggedInUsersAccount.data.remoteSessionTermsAcked;
+    const currentSelection = {
+        value: selectedTranslation,
+        label: getLocaleNameFromLocalCode(selectedTranslation.localeCode),
+        disabled: false,
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(Checkbox, { id: "case-management-remote-session", label: React.createElement(React.Fragment, null,
                 React.createElement(Trans, null, "I want a"),
                 ' ',
                 React.createElement("a", { href: "https://access.redhat.com/articles/3566571", target: "_blank", rel: "noopener noreferrer" },
                     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-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-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-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-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-v5-u-ml-xs" }))),
-                React.createElement("div", 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(Modal, { id: "remote-session-check-modal", "aria-label": t('Remote Session Agreement'), isOpen: isRSAModalOpen, onClose: onCancel },
+            React.createElement(ModalHeader, null,
+                React.createElement("h2", null, t('Remote Session Agreement'))),
+            React.createElement(ModalBody, null,
+                React.createElement(React.Fragment, null,
+                    React.createElement("p", { className: "pf-v6-u-mt-xs" },
+                        React.createElement(Trans, null,
+                            "Your acceptance of this remote session agreement is required",
                             ' ',
-                            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 }))))));
+                            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-v6-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-v6-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", { className: "remote-session-language-container" },
+                        React.createElement("div", { className: "terms-language-selector" },
+                            React.createElement(SingleSelectDropdown, { className: "pf-v6-u-mt-md", id: "terms-language-selector", selected: currentSelection, options: languageOptions, placeholder: t('Select an option that best fits'), onSelect: onLanguageSelect, ariaLabel: t('Select language') })),
+                        React.createElement("a", { "aria-label": t('Download'), "data-tracking-id": "ess-rsa-modal-terms-download", className: "pf-v6-u-ml-md", href: selectedTranslation.pdfDownloadUrl, rel: "noopener noreferrer", target: "_blank" },
+                            t('Download'),
+                            " ",
+                            React.createElement(DownloadIcon, { className: "pf-v6-u-ml-xs" }))),
+                    React.createElement("div", null,
+                        React.createElement(Checkbox, { className: "pf-v6-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-v6-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 })))),
+            React.createElement(ModalFooter, null,
+                React.createElement(Button, { key: "submit", "aria-label": t('I agree'), variant: ButtonVariant.primary, onClick: submitRemoteSessionAgreement, "data-tracking-id": "ess-remote-session-agreement-check", isLoading: agreeLoading, isDisabled: !isTermsChecked || agreeLoading }, t('I agree'))))));
 };
 export default ESSRemoteSessionCheck;

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":"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"}
+{"version":3,"file":"NoClusterIDReasonSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/NoClusterIDReasonSelector.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,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,sBAqI/C,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -1,94 +1,65 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { TextInputGroup, TextInputGroupMain } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { LoadingIndicator } from '@rh-support/components';
+import { LoadingIndicator, SingleSelectDropdown } from '@rh-support/components';
 import { fetchNoClusterIdReasonsMetadata, GlobalMetadataStateContext, useGlobalDispatchContext, } from '@rh-support/react-context';
 import { haventLoadedMetadata } from '@rh-support/utils';
 import filter from 'lodash/filter';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import map from 'lodash/map';
+import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PDFContext } from '../CaseEditView/PDFContainer';
-const createState = (display_value, display_name) => {
-    return {
-        display_name,
-        display_value,
-        toString: () => display_name || '',
-        compareTo: function (value) {
-            const displayName = this.toString().toLowerCase();
-            const val = (value || '').toString().toLowerCase();
-            return displayName.includes(val);
-        },
-    };
-};
 const NoClusterIDReasonSelector = (props) => {
     const { t } = useTranslation();
-    const [isOpen, setIsOpen] = useState(false);
-    const [validated, setValidated] = useState('default');
-    const [inputVal, setInputVal] = useState('');
     const [notRegistered, setNotRegistered] = useState(false);
+    const [inputValue, setInputValue] = useState(props.noClusterIdReasonExplanation || '');
     const globalDispatch = useGlobalDispatchContext();
     const { globalMetadataState: { caseNoClusterIdReasons }, } = useContext(GlobalMetadataStateContext);
     const { isExportingPDF } = useContext(PDFContext);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
     const caseNoClusterIdReasonsList = props.isCustomer
         ? filter(caseNoClusterIdReasons.data, (item) => item !==
             'I am opening a case on behalf of the customer and cannot provide their Cluster ID at this time')
         : caseNoClusterIdReasons.data;
-    const selectRef = useRef(undefined);
-    const onSelect = (event, selection) => {
+    const clearSelection = () => {
+        setNotRegistered(false);
+        setInputValue('');
+        props.onReasonInputBoxChanged('');
+        props.onReasonChange('');
+    };
+    const handleReasonChange = (option) => {
         clearSelection();
-        const selected = selection.display_value;
+        const selected = option.value;
         props.onReasonChange(selected);
-        if (selected === 'Other') {
-            window.setTimeout(() => {
-                var _a;
-                (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.inputRef.current.focus();
-            }, 100);
-        }
         if (selected === 'My cluster is disconnected and / or has not been registered') {
             setNotRegistered(true);
         }
     };
-    const clearSelection = () => {
-        setIsOpen(false);
-        setNotRegistered(false);
-        setInputVal('');
-        props.onReasonInputBoxChanged('');
-        props.onReasonChange('');
+    const handleInputChange = (_event, value) => {
+        setInputValue(value);
+        props.onReasonInputBoxChanged(value);
     };
-    const getSelectedItem = () => {
+    const getDropdownOptions = () => {
+        return map(caseNoClusterIdReasonsList || [], (option) => ({
+            label: t(option),
+            value: option,
+        }));
+    };
+    const getSelectedOption = () => {
         if (props.noClusterIdReason) {
-            if (props.noClusterIdReason === 'Other' || props.noClusterIdReasonExplanation) {
-                return createState(inputVal || props.noClusterIdReasonExplanation, inputVal || props.noClusterIdReasonExplanation);
-            }
-            else {
-                return createState(props.noClusterIdReason, t(props.noClusterIdReason));
-            }
-        }
-        else if (props.noClusterIdReasonExplanation) {
-            return createState(props.noClusterIdReasonExplanation, props.noClusterIdReasonExplanation);
+            return {
+                label: t(props.noClusterIdReason),
+                value: props.noClusterIdReason,
+            };
         }
-    };
-    const onTypeaheadInputChanged = (input) => {
-        setIsOpen(false);
-        setInputVal(input);
-        props.onReasonInputBoxChanged(input);
+        return {
+            label: '',
+            value: '',
+        };
     };
     useEffect(() => {
         if (haventLoadedMetadata(caseNoClusterIdReasons)) {
             fetchNoClusterIdReasonsMetadata(globalDispatch);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [caseNoClusterIdReasons]);
-    useEffect(() => {
-        if (props.isInValid) {
-            setValidated('error');
-        }
-        else {
-            setValidated('default');
-        }
-    }, [props.isInValid]);
+    }, [caseNoClusterIdReasons, globalDispatch]);
     const titleId = 'Reason-name-select';
     const registerMyClusterID = () => (React.createElement("a", { className: `show-target ${isExportingPDF ? 'hide-in-pdf' : ''}`, href: "https://console.redhat.com/openshift/register ", target: "_blank", rel: "noopener noreferrer" },
         React.createElement(Trans, null, "Register my Cluster ID")));
@@ -98,11 +69,16 @@ 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: (_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("div", { className: "no-cluster-id-reason-container" },
+            React.createElement("div", { className: props.noClusterIdReason === 'Other' ? 'd-none' : '' },
+                React.createElement(SingleSelectDropdown, { placeholder: t('Select an option or briefly describe your reason'), dataTrackingId: "no-openshift-cluster-id-reason", options: getDropdownOptions(), selected: getSelectedOption(), isDisabled: caseNoClusterIdReasons.isFetching || props.isDisabled, isLoading: caseNoClusterIdReasons.isFetching, isInvalid: props.isInValid, onSelect: handleReasonChange, "aria-labelledby": titleId, "aria-invalid": props.isInValid, "aria-describedby": "validate-reason-helper" })),
+            props.noClusterIdReason === 'Other' && (React.createElement("div", { className: "text-input-wrapper" },
+                React.createElement(TextInputGroup, null,
+                    React.createElement(TextInputGroupMain, { value: inputValue, onChange: handleInputChange, placeholder: t('Briefly describe your reason'), "aria-label": t('Other reason description') }))))),
         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-v5-u-mr-sm" }),
+                props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-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/OpenShiftClusterId.js

@@ -29,7 +29,7 @@ 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-v5-u-mr-sm" }),
+    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
     React.createElement(Trans, { i18nKey: 'v4ClusterRequiredField' },
         "Cluster ID is required.",
         React.createElement("div", null,

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;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"}
+{"version":3,"file":"OpenshiftDropdownV4.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenshiftDropdownV4.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAiB5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAI5D,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,qBA6bzC;kBA7bQ,mBAAmB;;;AAgc5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}