@rh-support/troubleshoot 2.7.1 → 2.7.10

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

@@ -7,7 +7,8 @@ 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 { useApolloClient } from '@apollo/client/react';
+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';
@@ -17,23 +18,22 @@ import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { useCaseDetailsPageStateContext } from '../../context/CaseDetailsPageContext';
-import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../context/CaseDiscussionTabContext';
+import { GET_CASE_COMMENTS } from '../../hooks/useCaseComments';
 import { useCaseUpdateErrorMessage } from '../../hooks/useCaseUpdateErrorMessage';
-import { updateDiscussionStateComments } from '../../reducers/CaseDiscussionTabReducer';
 import { checkForCaseStatusToggleOnAttachOrComment, postCepDetails, setCaseDetails, setCaseState, updateCaseDetails, } from '../../reducers/CaseReducer';
 import { PDFContext } from '../CaseEditView/PDFContainer';
 export function Cep(props) {
     var _a, _b, _c, _d, _e, _f;
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const { cep, caseNumber, status, cepDetails, isPostingCep, isCaseUpdating } = useCaseSelector((state) => ({
+    const { cep, caseNumber, status, cepDetails, isPostingCep, isCaseUpdating, existingCaseDetails } = useCaseSelector((state) => ({
         cep: state.caseDetails.cep,
         caseNumber: state.caseDetails.caseNumber,
         status: state.caseDetails.status,
         cepDetails: state.cepDetails,
         isPostingCep: state.isPostingCep,
         isCaseUpdating: state.isCaseUpdating,
+        existingCaseDetails: state.caseDetails,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
     const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
@@ -42,9 +42,7 @@ export function Cep(props) {
     const ability = useContext(AbilityContext);
     const canUseCep = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.CEP);
     const confirm = useConfirmation();
-    const dispatchDiscussion = useCaseDiscussionTabDispatchContext();
-    const { sort, allDiscussions, discussionFiltersListState } = useCaseDiscussionTabStateContext();
-    const { caseDetailsPageState: { caseFeedbacksHydra }, } = useCaseDetailsPageStateContext();
+    const client = useApolloClient();
     const canEditCase = useCanEditCase();
     const [saveButtonIsClicked, setSaveButtonIsClicked] = useState(false);
     const { isExportingPDF } = useContext(PDFContext);
@@ -89,15 +87,19 @@ export function Cep(props) {
     const cepUpdate = (caseDetails) => __awaiter(this, void 0, void 0, function* () {
         try {
             yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
-            checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status);
+            yield checkForCaseStatusToggleOnAttachOrComment(caseDispatch, loggedInUserRights.data.isInternal(), status, {
+                apolloClient: client,
+                caseNumber,
+                existingCaseDetails,
+            });
             if (caseDetails.cep) {
                 yield postCepDetails(caseDispatch, caseNumber, cepDetailsLocal);
-                updateDiscussionStateComments(dispatchDiscussion, caseDispatch, caseNumber, allDiscussions, sort, caseFeedbacksHydra.data, discussionFiltersListState);
+                client.refetchQueries({ include: [GET_CASE_COMMENTS] });
             }
             ToastNotification.addSuccessMessage(t(`Consultant Engagement in Progress has been updated successfully`));
         }
         catch (e) {
-            caseUpdateError.showError(e, t(`Consultant Engagement in Progress failed to update`));
+            caseUpdateError.showFieldError(e, t('Consultant Engagement in Progress'), () => cepUpdate(caseDetails));
         }
     });
     const onCancel = () => {
@@ -138,51 +140,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", color: "#5e40be" }))) : ('')),
         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

@@ -1,6 +1,7 @@
 import React from 'react';
 interface IProps {
-    onReasonInputBoxChanged: (Reason: string) => void;
+    onReasonInputBoxChanged?: (Reason: string) => void;
+    onReasonInputBoxBlur?: (reason: string) => void;
     onReasonChange: (Reason: string) => void;
     noClusterIdReasonExplanation: string;
     noClusterIdReason: string;

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;AAM/D,UAAU,MAAM;IACZ,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,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,GAAI,OAAO,MAAM,sBAqL/C,CAAC;AAEF,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

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

@@ -1,109 +1,111 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
+import { TextInput, TextInputGroup, ValidatedOptions } 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 { SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT } from '../../reducers/CaseConstNTypes';
 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) => {
+    var _a;
     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 [hasLargeReasonExplanation, setHasLargeReasonExplanation] = useState(false);
     const globalDispatch = useGlobalDispatchContext();
     const { globalMetadataState: { caseNoClusterIdReasons }, } = useContext(GlobalMetadataStateContext);
     const { isExportingPDF } = useContext(PDFContext);
-    const onToggle = (isOpen) => {
-        setIsOpen(isOpen);
-    };
+    useEffect(() => {
+        setInputValue(props.noClusterIdReasonExplanation || '');
+    }, [props.noClusterIdReasonExplanation]);
     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 = () => {
+        var _a, _b;
+        setNotRegistered(false);
+        setInputValue('');
+        (_a = props.onReasonInputBoxBlur) === null || _a === void 0 ? void 0 : _a.call(props, '');
+        (_b = props.onReasonInputBoxChanged) === null || _b === void 0 ? void 0 : _b.call(props, '');
+        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) => {
+        var _a;
+        const cleaned = value.trim().length === 0 ? '' : value;
+        setInputValue(cleaned);
+        setHasLargeReasonExplanation(cleaned.length > SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT);
+        (_a = props.onReasonInputBoxChanged) === null || _a === void 0 ? void 0 : _a.call(props, cleaned);
     };
-    const getSelectedItem = () => {
-        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);
+    const handleInputBlur = () => {
+        var _a;
+        const cleaned = (inputValue || '').trim();
+        setInputValue(cleaned);
+        setHasLargeReasonExplanation(cleaned.length > SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT);
+        if (props.onReasonInputBoxBlur) {
+            props.onReasonInputBoxBlur(cleaned);
+            return;
         }
+        (_a = props.onReasonInputBoxChanged) === null || _a === void 0 ? void 0 : _a.call(props, cleaned);
+    };
+    const getDropdownOptions = () => {
+        return map(caseNoClusterIdReasonsList || [], (option) => ({
+            label: t(option),
+            value: option,
+        }));
     };
-    const onTypeaheadInputChanged = (input) => {
-        setIsOpen(false);
-        setInputVal(input);
-        props.onReasonInputBoxChanged(input);
+    const getSelectedOption = () => {
+        if (props.noClusterIdReason) {
+            return {
+                label: t(props.noClusterIdReason),
+                value: props.noClusterIdReason,
+            };
+        }
+        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")));
     return (React.createElement("div", { className: "form-group" },
-        React.createElement("label", { id: titleId },
-            React.createElement(Trans, null, "I don't have my Cluster ID, because:"),
-            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("label", { id: titleId, style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            } },
+            React.createElement("div", null,
+                React.createElement(Trans, null, "I don't have my Cluster ID, because:"),
+                React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true },
+                    ' ',
+                    "*")),
+            props.noClusterIdReason === 'Other' && (React.createElement("div", { className: "cluster-ID-counter" }, `${(_a = inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) !== null && _a !== void 0 ? _a : 0} / ${SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT}`))),
+        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(TextInput, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, placeholder: t('Briefly describe your reason'), "aria-label": t('Other reason description'), validated: hasLargeReasonExplanation ? ValidatedOptions.error : ValidatedOptions.default }))))),
         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" }),
-                ' ',
-                notRegistered ? (registerMyClusterID()) : (React.createElement(Trans, null, "Describing your reason can help us better understand and support your issue."))))));
+        React.createElement("p", { id: "validate-reason-helper", className: `form-instructions ${props.isInValid ? 'form-invalid' : ''}` }, notRegistered ? (registerMyClusterID()) : hasLargeReasonExplanation ? (React.createElement("span", { className: "form-instructions form-invalid pf-v6-u-danger-color-100 no-cluster-ID" }, t(`This reason exceeds ${SESSION_NO_CLUSTER_REASON_LENGTH_LIMIT} characters. Try shortening it.`))) : (React.createElement(React.Fragment, null,
+            props.isInValid && React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v6-u-mr-sm" }),
+            React.createElement(Trans, null, "Describing your reason can help us better understand and support your issue."))))));
 };
 export { NoClusterIDReasonSelector };

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":"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"}
+{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAuB/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,qBAkT/C"}