@rh-support/troubleshoot 2.6.14 → 2.6.16

package/lib/esm/components/shared/input/ContactSelectorInternal.js

@@ -8,20 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { contacts } from '@cee-eng/hydrajs';
+import { Button, Label, LabelGroup, MenuToggle, Select, SelectList, SelectOption, Spinner, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, } from '@patternfly/react-core';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import assign from 'lodash/assign';
 import differenceBy from 'lodash/differenceBy';
 import filter from 'lodash/filter';
 import isEmpty from 'lodash/isEmpty';
 import unionBy from 'lodash/unionBy';
 import React from 'react';
-import { AsyncTypeahead, Highlighter } from 'react-bootstrap-typeahead';
-// https://github.com/ericgio/react-bootstrap-typeahead/blob/master/docs/Props.md
 export class ContactSelectorInternal extends React.Component {
     constructor(props) {
         super(props);
+        this.searchTimeout = null;
+        this.inputRef = React.createRef();
         this.getSelectedLabel = (contact) => {
             if (!contact) {
-                return undefined;
+                return '';
             }
             const userName = contact.internalSso || contact.ssoUsername || '';
             const fullName = contact.fullNameCustom
@@ -31,7 +33,7 @@ export class ContactSelectorInternal extends React.Component {
         };
         this.getContactsSelected = (contacts) => {
             if (!contacts)
-                return undefined;
+                return [];
             return filter(contacts, (c) => this.isValidContactForQuery(c));
         };
         this.isValidContactForQuery = (c) => {
@@ -43,11 +45,6 @@ export class ContactSelectorInternal extends React.Component {
                 this.props.onSelect(contacts);
             }
         });
-        this.onFocus = (event) => {
-            if (!this.state.selectedContacts && isEmpty(this.state.options) && this.props.contactListParams) {
-                this.handleSearch('');
-            }
-        };
         this.handleSearch = (query) => __awaiter(this, void 0, void 0, function* () {
             if (query == null) {
                 return;
@@ -73,7 +70,7 @@ export class ContactSelectorInternal extends React.Component {
                 const response = yield contacts.getSFDCContacts(queryParams, this.controller.signal);
                 const options = response && response.items && response.items.length ? this.getContactsSelected(response.items) : [];
                 this.setState({
-                    options: differenceBy(options, this.props.contactsToExclude, 'ssoUsername'),
+                    options: differenceBy(options, this.props.contactsToExclude || [], 'ssoUsername'),
                     isLoading: false,
                 });
             }
@@ -85,35 +82,143 @@ export class ContactSelectorInternal extends React.Component {
                 });
             }
         });
-        this.renderMenuItemChildren = (option, p) => (React.createElement(Highlighter, { key: option.ssoUsername, search: p.text }, this.getSelectedLabel(option)));
-        this.typeahead = React.createRef();
+        this.handleInputChange = (value) => {
+            this.setState({ searchValue: value });
+            // Clear existing timeout
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+            // Set new timeout for debounced search
+            this.searchTimeout = setTimeout(() => {
+                if (value.length >= (this.props.minLength || 0)) {
+                    this.handleSearch(value);
+                    this.setState({ isOpen: true });
+                }
+                else if (value.length === 0) {
+                    this.setState({ options: [], isOpen: false });
+                }
+            }, this.props.debounceDelay || 300);
+        };
+        this.handleSelect = (event, selection) => {
+            if (this.props.multiple) {
+                const currentSelected = this.state.selectedContacts || [];
+                const isAlreadySelected = currentSelected.some((c) => c.ssoUsername === selection.ssoUsername);
+                if (isAlreadySelected) {
+                    const newSelected = currentSelected.filter((c) => c.ssoUsername !== selection.ssoUsername);
+                    this.onChange(newSelected);
+                }
+                else {
+                    const newSelected = [...currentSelected, selection];
+                    this.onChange(newSelected);
+                }
+                // Clear search value after selection in multiple mode
+                this.setState({ searchValue: '' });
+            }
+            else {
+                this.onChange([selection]);
+                this.setState({ isOpen: false, searchValue: '' });
+            }
+        };
+        this.handleRemoveContact = (contactToRemove) => {
+            const currentSelected = this.state.selectedContacts || [];
+            const newSelected = currentSelected.filter((c) => c.ssoUsername !== contactToRemove.ssoUsername);
+            this.onChange(newSelected);
+        };
+        this.handleKeyDown = (event) => {
+            const { options, focusedItemIndex, isOpen } = this.state;
+            if (!isOpen || options.length === 0)
+                return;
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.setState((prevState) => ({
+                        focusedItemIndex: prevState.focusedItemIndex === null || prevState.focusedItemIndex >= options.length - 1
+                            ? 0
+                            : prevState.focusedItemIndex + 1,
+                    }));
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.setState((prevState) => ({
+                        focusedItemIndex: prevState.focusedItemIndex === null || prevState.focusedItemIndex <= 0
+                            ? options.length - 1
+                            : prevState.focusedItemIndex - 1,
+                    }));
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (focusedItemIndex !== null && options[focusedItemIndex]) {
+                        this.handleSelect(null, options[focusedItemIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    this.setState({ isOpen: false, focusedItemIndex: null });
+                    break;
+            }
+        };
+        this.handleFocus = () => {
+            if (this.state.searchValue.length >= (this.props.minLength || 0)) {
+                this.setState({ isOpen: true });
+            }
+        };
+        this.handleBlur = () => {
+            // Delay closing to allow for clicks on menu items
+            setTimeout(() => {
+                this.setState({ isOpen: false, focusedItemIndex: null });
+            }, 150);
+        };
+        this.handleClear = () => {
+            this.setState({ searchValue: '', options: [], isOpen: false });
+            this.onChange([]);
+        };
+        this.onToggle = () => {
+            this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
+        };
         this.state = {
             isLoading: false,
-            selectedContacts: this.getContactsSelected(props.selectedContacts),
+            selectedContacts: this.getContactsSelected(props.selectedContacts || []),
             options: [],
+            isOpen: false,
+            searchValue: '',
+            focusedItemIndex: null,
         };
     }
     componentDidUpdate(prevProps) {
-        if (!isEmpty(prevProps.selectedContacts) && isEmpty(this.props.selectedContacts)) {
+        if (!isEmpty(prevProps.selectedContacts || []) && isEmpty(this.props.selectedContacts || [])) {
             this.setState({ selectedContacts: [], options: [] });
-            this.typeahead.current.clear();
         }
         if (this.props.showSelectedContacts) {
-            if (prevProps.selectedContacts.length !== this.props.selectedContacts.length) {
-                this.setState({ selectedContacts: this.getContactsSelected(this.props.selectedContacts) });
+            const prevSelected = prevProps.selectedContacts || [];
+            const currentSelected = this.props.selectedContacts || [];
+            if (prevSelected.length !== currentSelected.length) {
+                this.setState({ selectedContacts: this.getContactsSelected(currentSelected) });
             }
             else {
-                const unionOldNew = unionBy(prevProps.selectedContacts, this.props.selectedContacts, 'ssoUsername');
-                if (unionOldNew.length !== this.props.selectedContacts.length ||
-                    prevProps.selectedContacts.length !== this.props.selectedContacts.length) {
-                    this.setState({ selectedContacts: this.getContactsSelected(this.props.selectedContacts) });
+                const unionOldNew = unionBy(prevSelected, currentSelected, 'ssoUsername');
+                if (unionOldNew.length !== currentSelected.length || prevSelected.length !== currentSelected.length) {
+                    this.setState({ selectedContacts: this.getContactsSelected(currentSelected) });
                 }
             }
         }
     }
     render() {
-        const conditionalProps = Object.assign({}, (this.props.renderToken ? { renderToken: this.props.renderToken } : undefined));
-        return (React.createElement(AsyncTypeahead, Object.assign({ id: this.props.id + '-contact-select', className: `${this.props.className} contact-select`, defaultInputValue: "", autoFocus: this.props.autoFocus, clearButton: this.props.clearButton, isLoading: this.state.isLoading || this.props.isUpdating, options: this.state.options, selected: !isEmpty(this.state.selectedContacts) ? this.state.selectedContacts : [], onChange: this.onChange, onFocus: this.onFocus, labelKey: this.getSelectedLabel, onSearch: this.handleSearch, delay: this.props.debounceDelay, maxResults: this.props.maxResults, placeholder: this.props.placeholder, ref: this.typeahead, renderMenuItemChildren: this.renderMenuItemChildren, size: this.props.typeAheadSize, useCache: this.props.useCache, minLength: this.props.minLength, disabled: this.props.disabled || this.props.isUpdating, multiple: this.props.multiple }, conditionalProps)));
+        const { selectedContacts = [], options, isLoading, isOpen, searchValue, focusedItemIndex } = this.state;
+        // For multiple selection, always show the search value so typed text is visible
+        // For single selection, show selected contact label or search value
+        const displayValue = this.props.multiple
+            ? searchValue
+            : selectedContacts[0]
+                ? this.getSelectedLabel(selectedContacts[0])
+                : searchValue;
+        const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, variant: "typeahead", onClick: this.onToggle, isExpanded: isOpen, isDisabled: this.props.disabled || this.props.isUpdating, isFullWidth: true },
+            React.createElement(TextInputGroup, { isPlain: true },
+                React.createElement(TextInputGroupMain, { value: displayValue, onChange: (_, value) => this.handleInputChange(value), onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, placeholder: this.props.placeholder || 'Search contact by name or username', ref: this.inputRef, autoComplete: "off", isExpanded: isOpen, role: "combobox" }, this.props.multiple && selectedContacts.length > 0 && (React.createElement(LabelGroup, { "aria-label": "Selected contacts" }, selectedContacts.map((contact, index) => (React.createElement(Label, { key: contact.ssoUsername, variant: "outline", color: "blue", onClose: () => this.handleRemoveContact(contact) }, this.getSelectedLabel(contact))))))),
+                React.createElement(TextInputGroupUtilities, null,
+                    isLoading && React.createElement(Spinner, { size: "sm" }),
+                    this.props.clearButton && (searchValue || selectedContacts.length > 0) && (React.createElement(Button, { variant: "plain", icon: React.createElement(TimesCircleIcon, null), onClick: this.handleClear, "aria-label": "Clear input" }))))));
+        return (React.createElement("div", { className: `${this.props.className} contact-select` },
+            React.createElement(Select, { id: this.props.id + '-contact-select', isOpen: isOpen, selected: this.props.multiple ? selectedContacts : selectedContacts[0] || null, onSelect: this.handleSelect, onOpenChange: (isOpen) => this.setState({ isOpen }), toggle: toggle, shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: false, popperProps: { direction: 'down', enableFlip: false }, isScrollable: true, onBlur: this.handleBlur, "data-tracking-id": "external-case-contact-selector" },
+                React.createElement(SelectList, { isAriaMultiselectable: this.props.multiple }, options.length > 0 ? (options.map((contact, index) => (React.createElement(SelectOption, { key: contact.ssoUsername, value: contact, isFocused: focusedItemIndex === index, isSelected: selectedContacts.some((c) => c.ssoUsername === contact.ssoUsername) }, this.getSelectedLabel(contact))))) : (React.createElement(SelectOption, { isDisabled: true }, isLoading ? 'Searching...' : searchValue ? 'No matches found.' : 'Type to search...'))))));
     }
 }
 ContactSelectorInternal.defaultProps = {

package/lib/esm/components/wizardLayout/MainSection.js

@@ -21,7 +21,7 @@ const MainSection = (props) => {
         React.createElement("section", { id: `${props.section}-section`, tabIndex: -1, "aria-labelledby": `${props.section}-heading`, "aria-describedby": `${props.section}-description`, className: `main-step-content ${props.className ? props.className : ''}` },
             isConfirmedStateSideSupport && props.section !== AppRouteSections.SUBMIT_CASE && (React.createElement(Alert, { isInline: true, variant: "warning", title: ((_c = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _c === void 0 ? void 0 : _c.hasConfirmedStatesideSupport)
                     ? 'You have a confirmed stateside support account'
-                    : 'This is a confirmed stateside support account', className: "pf-v5-u-mb-lg" },
+                    : 'This is a confirmed stateside support account', className: "pf-v6-u-mb-lg" },
                 React.createElement("p", null,
                     "To adhere to data regulations, open this case through",
                     ' ',
@@ -31,7 +31,7 @@ const MainSection = (props) => {
                     "instead of traditional support."))),
             React.createElement(LoadingIndicator, { show: props.isLoading, size: "lg" }),
             !props.isLoading && (React.createElement(React.Fragment, null,
-                React.createElement("header", { className: "pf-v5-u-display-none-on-sm" },
+                React.createElement("header", { className: "pf-v6-u-display-none-on-sm" },
                     props.title && (React.createElement("h2", { "aria-label": props.stepNumber &&
                             `Step ${props.stepNumber} of ${props.totalSteps}: ${props.section}`, id: `${props.section}-heading` }, props.title)),
                     props.description && (React.createElement("p", { id: `${props.section}-description`, className: `${props.descriptionClassName ? props.descriptionClassName : ''}` }, props.description))),

package/lib/esm/components/wizardLayout/NewFeatureModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewFeatureModal.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/NewFeatureModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,QAAA,MAAM,eAAe,yBA8EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"NewFeatureModal.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/NewFeatureModal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,QAAA,MAAM,eAAe,yBA6EpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/esm/components/wizardLayout/NewFeatureModal.js

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Modal, Title } from '@patternfly/react-core';
+import { Button, Checkbox, Modal, ModalFooter, Title } from '@patternfly/react-core';
 import { useLocalStorage, useSessionStorage } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { getConfigField, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
@@ -27,12 +27,12 @@ const NewFeatureModal = () => {
     const onBannerCheckboxChange = () => {
         setCheckedToNotShowModal(!checkedToNotShowModal);
     };
-    return (React.createElement(React.Fragment, null, !shouldNotShowModal && isNewFeatureBannerVisible && showModal && (React.createElement(Modal, { className: "newFeatureModal", width: "45%", "aria-label": t('New feature modal'), isOpen: showModal, onClose: handleModalToggle, actions: [
-            React.createElement(Button, { key: "close", variant: "primary", "data-tracking-id": "new-feature-modal-close", onClick: handleModalToggle }, t('Close')),
-        ], showClose: false },
+    return (React.createElement(React.Fragment, null, !shouldNotShowModal && isNewFeatureBannerVisible && showModal && (React.createElement(Modal, { className: "newFeatureModal", width: "45%", "aria-label": t('New feature modal'), isOpen: showModal, onClose: handleModalToggle },
         React.createElement(RedHatCustomerPortalIcon, null),
-        React.createElement(Title, { headingLevel: "h2", className: "pf-v5-u-font-weight-bold" }, t('Change: Application Announcement For KT Question Update')),
+        React.createElement(Title, { headingLevel: "h2", className: "pf-v6-u-font-weight-bold" }, t('Change: Application Announcement For KT Question Update')),
         React.createElement(Trans, null, "Welcome back! To improve your troubleshooting experience, we've updated how you create cases, changed the questions we ask, and given you more chances to edit your problem. We want to help you solve your technical challenges quickly."),
-        React.createElement(Checkbox, { className: "pf-v5-u-mt-md", id: "new-feature-modal-checkbox", label: t(`I don't want to see this modal again`), isChecked: checkedToNotShowModal, onChange: onBannerCheckboxChange, "data-tracking-id": "new-feature-modal-checkbox" })))));
+        React.createElement(Checkbox, { className: "pf-v6-u-mt-md", id: "new-feature-modal-checkbox", label: t(`I don't want to see this modal again`), isChecked: checkedToNotShowModal, onChange: onBannerCheckboxChange, "data-tracking-id": "new-feature-modal-checkbox" }),
+        React.createElement(ModalFooter, null,
+            React.createElement(Button, { key: "close", variant: "primary", "data-tracking-id": "new-feature-modal-close", onClick: handleModalToggle }, t('Close')))))));
 };
 export default NewFeatureModal;

package/lib/esm/components/wizardLayout/WizardAside.js

@@ -39,14 +39,14 @@ function WizardAside(props) {
         React.createElement("section", { className: "grid-aside-content" },
             canUseSessionManagement && !isCreatingCase && activeSection !== AppRouteSections.SUBMIT_CASE && (React.createElement(SessionRestore, { routeProps: props.routeProps })),
             canShowFileUploadWidget() && React.createElement(InsightsResults, null),
-            canShowFileUploadWidget() && React.createElement(FileDiag, { className: "pf-v5-u-mb-md" }),
+            canShowFileUploadWidget() && React.createElement(FileDiag, { className: "pf-v6-u-mb-md" }),
             activeSection === (isCaseCreate ? AppRouteSections.SUMMARIZE : AppRouteSections.TROUBLESHOOT) &&
                 !isCveModalOpened && React.createElement(CveSidebar, null),
             activeSection === AppRouteSections.RESOURCES && React.createElement(CveSidebar, null),
             canShowEARuleWidget && React.createElement(EARuleWidget, null),
-            !(isIdea && activeSection === 'submit-case') && (React.createElement(AsideResults, { routeProps: props.routeProps, className: "pf-v5-u-mb-md pf-v5-u-mt-0" })),
+            !(isIdea && activeSection === 'submit-case') && (React.createElement(AsideResults, { routeProps: props.routeProps, className: "pf-v6-u-mb-md pf-v6-u-mt-0" })),
             canShowFileRecommendationSectionsWidget && React.createElement(InsightsResults, { isDisplayOnMain: true }),
-            React.createElement(ClusterRecommendations, { showClusterRecommendationsList: canShowClusterIdReportWidget, className: "pf-v5-u-mb-md pf-v5-u-mt-0" }))));
+            React.createElement(ClusterRecommendations, { showClusterRecommendationsList: canShowClusterIdReportWidget, className: "pf-v6-u-mb-md pf-v6-u-mt-0" }))));
 }
 WizardAside.defaultProps = defaultProps;
 export default WizardAside;

package/lib/esm/components/wizardLayout/WizardMain.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAQpF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5E;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAgJhC;AACD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"WizardMain.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardMain.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAS,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO9D,OAAO,EAAoB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAOpF,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,qBAAqB,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5E;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAwMhC;AACD,eAAe,UAAU,CAAC"}

package/lib/esm/components/wizardLayout/WizardMain.js

@@ -1,12 +1,23 @@
-import { Wizard, WizardContextConsumer, WizardFooter } from '@patternfly/react-core/deprecated';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useWizardContext, Wizard, WizardNav, WizardNavItem, WizardStep } from '@patternfly/react-core';
 import { LoadingIndicator } from '@rh-support/components';
 import isEqual from 'lodash/isEqual';
-import React, { Suspense, useContext, useRef, useState } from 'react';
+import React, { Suspense, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Route } from 'react-router-dom';
 import { useCaseSelector } from '../../context/CaseContext';
 import { RecommendationDispatchContext } from '../../context/RecommendationContext';
-import { RouteDispatchContext } from '../../context/RouteContext';
+import { RouteContext, RouteDispatchContext } from '../../context/RouteContext';
 import { useWizard } from '../../hooks/useWizard';
 import { RecommendationsConstants } from '../../reducers/RecommendationsReducer';
 import { AppRouteSections } from '../../reducers/RouteConstNTypes';
@@ -22,10 +33,14 @@ function WizardMain(props) {
     const { isCreatingCase } = useCaseSelector((state) => ({
         isCreatingCase: state.isCreatingCase,
     }), isEqual);
+    const { routeState: { isCaseCreate }, } = useContext(RouteContext);
     const [userSeenRecommendations, setUserSeenRecommendations] = useState(false);
     const [userClickedNextonRecommendations, setUserClickedNextonRecommendations] = useState(false);
     const [userScrolledLabel, setUserScrolledLabel] = useState(false);
     const [userCanNavigateToTroubleshoot, setUserCanNavigateToTroubleshoot] = useState(false);
+    const [isNextButtonClicked, setIsNextButtonClicked] = useState(false);
+    const isNextButtonClickedRef = useRef(false);
+    const isBackButtonClickedRef = useRef(false);
     const resultsRowRef = useRef(null);
     const { getStepsSequece } = useWizard(props.routeProps, {
         userSeenRecommendationsfn: setUserSeenRecommendations,
@@ -37,6 +52,9 @@ function WizardMain(props) {
     });
     const dispatchToRouteReducer = useContext(RouteDispatchContext);
     const { t } = useTranslation();
+    useEffect(() => {
+        setActiveSectionChanged(dispatchToRouteReducer, isCaseCreate ? AppRouteSections.GET_SUPPORT : AppRouteSections.TROUBLESHOOT, '');
+    }, [isCaseCreate, dispatchToRouteReducer]);
     const renderSubmitCasePage = () => (React.createElement(MainSection, { section: AppRouteSections.SUBMIT_CASE, title: t('Case has been submitted'), isLoading: isCreatingCase, description: t("We'll be in contact with you shortly. Look for updates on this case."), className: "case-submit-page" },
         React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
             React.createElement(SubmitCase, { routeProps: props.routeProps }))));
@@ -54,13 +72,13 @@ function WizardMain(props) {
         // isLoadingRecommendations needs to be set to false on back when the previous step is the summary
         // step because it can cause the next button to be permanently disabled if the debounce is not called
         // before going back a step. This can be caused if navigating quickly to then away from the recommendations page.
-        if (prevStep.prevId === AppRouteSections.SUMMARIZE) {
+        if (prevStep.id === AppRouteSections.SUMMARIZE) {
             recommendationDispatch({
                 type: RecommendationsConstants.setIsLoadingRecommendations,
                 payload: { isLoadingRecommendations: false },
             });
         }
-        var regex = new RegExp('/' + prevStep.prevId + '$');
+        var regex = new RegExp('/' + prevStep.id + '$');
         RouteUtils.navigateToSection(props.routeProps, props.routeProps.location.pathname.replace(regex, ''), false);
     };
     const onSubmit = () => {
@@ -68,26 +86,50 @@ function WizardMain(props) {
         props.submitCaseAndNavigate(false);
         return;
     };
-    const onCurrentStepChanged = (step) => {
-        setActiveSectionChanged(dispatchToRouteReducer, step.id, step.name);
+    const onCurrentStepChanged = (event, currentStep, prevStep, scope) => {
+        if (isNextButtonClickedRef.current) {
+            onNext(currentStep);
+        }
+        if (isBackButtonClickedRef.current) {
+            onBack(currentStep, prevStep);
+        }
+        setActiveSectionChanged(dispatchToRouteReducer, currentStep.id, currentStep.name);
         updateisNextBtnClickedToShowValidationError(dispatchToRouteReducer, false);
+        isNextButtonClickedRef.current = false;
+        isBackButtonClickedRef.current = false;
+        setIsNextButtonClicked(false);
+    };
+    const customNav = (isExpanded, steps, activeStep, goToStepByIndex) => (React.createElement(WizardNav, { isExpanded: isExpanded }, steps.map((step) => {
+        return (React.createElement(WizardNavItem, { key: step.id, id: step.id, content: step.name, isCurrent: activeStep.id === step.id, isDisabled: !step.canJumpTo, stepIndex: step.index, onClick: () => goToStepByIndex(step.index) }));
+    })));
+    const CustomFooter = () => {
+        const { activeStep, goToNextStep, goToPrevStep, steps, goToStepByIndex } = useWizardContext(); // Correctly using the context
+        useEffect(() => {
+            if (steps.length > 2 && activeStep.index === 2 && isNextButtonClicked) {
+                goToStepByIndex(3);
+            }
+        }, [activeStep, steps.length, goToStepByIndex]);
+        return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: () => {
+                isNextButtonClickedRef.current = true;
+                setIsNextButtonClicked(true);
+                goToNextStep();
+                focusWizardMainPanel();
+            }, onBack: () => {
+                isBackButtonClickedRef.current = true;
+                goToPrevStep();
+                focusWizardMainPanel();
+            }, activeStep: activeStep, onSubmit: onSubmit, confirmSupportModal: props.confirmSupportModal, onShowRestUpdate: (flag) => setShowRestFlag(flag), userSeenRecommendations: userSeenRecommendations, setUserSeenRecommendations: setUserSeenRecommendations, userClickedNextonRecommendationsFn: setUserClickedNextonRecommendations, userClickedNextonRecommendationsValue: userClickedNextonRecommendations, setUserCanNavigateToTroubleshoot: setUserCanNavigateToTroubleshoot, resultsRowRef: resultsRowRef, setUserScrolledLabel: setUserScrolledLabel }));
     };
-    const CustomFooter = (React.createElement(WizardFooter, null,
-        React.createElement(WizardContextConsumer, null, ({ activeStep, onNext, onBack }) => {
-            return (React.createElement(WizardNavigation, { routeProps: props.routeProps, onNext: () => {
-                    onNext();
-                    focusWizardMainPanel();
-                }, onBack: () => {
-                    onBack();
-                    focusWizardMainPanel();
-                }, activeStep: activeStep, onSubmit: onSubmit, confirmSupportModal: props.confirmSupportModal, onShowRestUpdate: (flag) => setShowRestFlag(flag), userSeenRecommendations: userSeenRecommendations, setUserSeenRecommendations: setUserSeenRecommendations, userClickedNextonRecommendationsFn: setUserClickedNextonRecommendations, userClickedNextonRecommendationsValue: userClickedNextonRecommendations, setUserCanNavigateToTroubleshoot: setUserCanNavigateToTroubleshoot, resultsRowRef: resultsRowRef, setUserScrolledLabel: setUserScrolledLabel }));
-        })));
+    const steps = getStepsSequece(showRestFlag);
+    const wizardSteps = steps.map((step) => {
+        const { component } = step, rest = __rest(step, ["component"]);
+        return (React.createElement(WizardStep, Object.assign({ key: step.id }, rest), component));
+    });
     // To add a new step to wizard first need to add the component to appRouteConfugurations
     // in useWizard file then add it to step squences in RouteConstNTypes
-    const steps = getStepsSequece(showRestFlag);
     return (React.createElement(React.Fragment, null,
         React.createElement(NewFeatureModal, null),
-        steps.length !== 0 && (React.createElement(Route, { path: `${RouteUtils.seBasePath}/(${steps[0].id}|describe-issue|open-case)`, render: () => (React.createElement(Wizard, { navAriaLabel: ` navAriaLabel steps `, mainAriaLabel: ` mainAriaLabel content `, steps: steps, footer: CustomFooter, onNext: onNext, onBack: onBack, hideClose: true, backButtonText: t('Go back'), onCurrentStepChanged: onCurrentStepChanged })) })),
+        steps.length !== 0 && (React.createElement(Route, { path: `${RouteUtils.seBasePath}/(${steps[0].id}|describe-issue|open-case)`, render: () => (React.createElement(Wizard, { isVisitRequired: true, nav: customNav, navAriaLabel: ` navAriaLabel steps `, footer: React.createElement(CustomFooter, null), onStepChange: onCurrentStepChanged }, wizardSteps)) })),
         React.createElement(Route, { exact: true, path: `${RouteUtils.seBasePath}/${AppRouteSections.SUBMIT_CASE}`, render: () => renderSubmitCasePage() })));
 }
 export default WizardMain;

package/lib/esm/components/wizardLayout/WizardNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WizardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardNavigation.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAoB,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM3G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5E,kCAAkC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpF,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxE;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBA+UtC;kBA/UQ,gBAAgB;;;AAiVzB,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"WizardNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/wizardLayout/WizardNavigation.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAOvD,OAAO,EAAoB,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM3G,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,EAAE,CAAC,gCAAgC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC5E,kCAAkC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACpF,qCAAqC,CAAC,EAAE,OAAO,CAAC;IAChD,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,oBAAoB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACxE;AAGD,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAyUtC;kBAzUQ,gBAAgB;;;AA2UzB,eAAe,gBAAgB,CAAC"}

package/lib/esm/components/wizardLayout/WizardNavigation.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { pcm } from '@cee-eng/hydrajs';
-import { Button, ButtonVariant } from '@patternfly/react-core';
+import { Button, ButtonVariant, WizardFooterWrapper } from '@patternfly/react-core';
 import { useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanCreateCase } from '@rh-support/react-context';
 import { dtmTrackEventCaseCreationStepEncountered, getResTypeFromUrl, PreviousToNewCaseTypeMap, scrollIntoView, } from '@rh-support/utils';
@@ -58,13 +58,6 @@ function WizardNavigation(props) {
         isFileRecommendationsTriggered: state.isFileRecommendationsTriggered,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    useEffect(() => {
-        // we need this because when the user hits the troubleshoot tab, we only refresh the children but the state is managed in the parent
-        props.setUserSeenRecommendations(false);
-        props.userClickedNextonRecommendationsFn(false);
-        props.setUserScrolledLabel(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [recommendationState.isLoadingRecommendations]);
     useEffect(() => {
         var _a;
         const isCreatingCase = RouteUtils.getQueryParams(props.routeProps).caseCreate === 'true';
@@ -255,11 +248,12 @@ function WizardNavigation(props) {
     };
     // To handle entitled products
     return (React.createElement(React.Fragment, null,
-        props.activeStep.order !== 0 && (React.createElement("button", { onClick: () => onBack(), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button", disabled: isDisabledGoBack() }, t('Go back'))),
-        React.createElement("button", { disabled: nextButtonDisabledLogic(), onClick: onNext, className: "btn btn-app btn-primary main-nav-button", "data-tracking-id": `next-of-${activeSection}`, type: "button" }, t(props.activeStep.nextButtonLabel)),
-        activeSection === AppRouteSections.RESOURCES && isFileRecommendationsTriggered && (React.createElement(Button, { onClick: handleFileRecsSelfSolved, variant: ButtonVariant.secondary, className: "issue-solved-button solved-issue-button", "data-tracking-id": "troubleshoot-self-solved-issue" }, t('I solved my issue'))),
-        React.createElement(RecommendationFeedbackModal, { isModalOpen: isRecsModalVisible, handleModalToggle: onRecsFeedbackModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),
-        activeSectionError ? (React.createElement("small", { className: "pf-v5-u-align-self-center pf-v5-u-ml-md text-red" }, activeSectionError)) : null));
+        React.createElement(WizardFooterWrapper, null,
+            props.activeStep.order !== 0 && (React.createElement("button", { onClick: () => onBack(), className: "btn btn-app btn-open-white main-nav-button", "data-tracking-id": `prev-of-${activeSection}`, type: "button", disabled: isDisabledGoBack() }, t('Go back'))),
+            React.createElement("button", { disabled: nextButtonDisabledLogic(), onClick: onNext, className: "btn btn-app btn-primary main-nav-button", "data-tracking-id": `next-of-${activeSection}`, type: "button" }, t(props.activeStep.nextButtonLabel)),
+            activeSection === AppRouteSections.RESOURCES && isFileRecommendationsTriggered && (React.createElement(Button, { onClick: handleFileRecsSelfSolved, variant: ButtonVariant.secondary, className: "issue-solved-button solved-issue-button", "data-tracking-id": "troubleshoot-self-solved-issue" }, t('I solved my issue'))),
+            React.createElement(RecommendationFeedbackModal, { isModalOpen: isRecsModalVisible, handleModalToggle: onRecsFeedbackModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),
+            activeSectionError ? (React.createElement("small", { className: "pf-v6-u-align-self-center pf-v6-u-ml-md text-red" }, activeSectionError)) : null)));
 }
 WizardNavigation.defaultProps = defaultProps;
 export default WizardNavigation;

package/lib/esm/css/app.css

@@ -54,7 +54,7 @@
 
 .btn.btn-app[disabled] {
     background: #d1d1d1;
-    border-color: #d1d1d1;
+    border-color: #d1d1d1 !important;
     color: #8d8d8d;
 }
 
@@ -95,7 +95,7 @@ form textarea {
     resize: vertical !important;
 }
 
-.pf-v5-c-form-control.pf-m-warning {
+.pf-v6-c-form-control.pf-m-warning {
     border-bottom-color: var(--pf-v5-c-form-control--m-warning--BorderBottomColor);
     border-bottom-width: 2px;
 }
@@ -282,17 +282,17 @@ input[type='checkbox'] {
     margin-left: 5px;
 }
 
-.pf-tippy-theme.tippy-tooltip .pf-v5-c-popover {
+.pf-tippy-theme.tippy-tooltip .pf-v6-c-popover {
     background-color: #fff;
     -webkit-box-shadow: rgba(3, 3, 3, 0.05) 0px 1px 1px 0px, rgba(3, 3, 3, 0.06) 0px 4px 8px 4px;
     box-shadow: rgba(3, 3, 3, 0.05) 0px 1px 1px 0px, rgba(3, 3, 3, 0.06) 0px 4px 8px 4px;
 }
 
-.pf-v5-c-popover .pf-v5-c-popover__body > * {
+.pf-v6-c-popover .pf-v6-c-popover__body > * {
     margin-bottom: 0;
 }
 
-/* .pf-v5-c-popover .pf-v5-c-button {
+/* .pf-v6-c-popover .pf-v6-c-button {
     position: absolute;
     top: 8px;
     right: 2px;
@@ -312,14 +312,14 @@ input[type='checkbox'] {
     pointer-events: initial !important;
 }
 
-.pf-tippy-theme.tippy-tooltip .pf-v5-c-popover .pf-v5-c-popover__content {
+.pf-tippy-theme.tippy-tooltip .pf-v6-c-popover .pf-v6-c-popover__content {
     position: relative;
     background-color: #fff;
     padding: 1.5rem;
     font-size: 16px;
 }
 
-.pf-tippy-theme.tippy-tooltip .pf-v5-c-popover .pf-v5-c-popover__arrow {
+.pf-tippy-theme.tippy-tooltip .pf-v6-c-popover .pf-v6-c-popover__arrow {
     position: absolute;
     width: 25px;
     height: 25px;
@@ -426,21 +426,21 @@ input[type='checkbox'] {
     width: 100%;
 }
 
-#summary-progress-bar .pf-v5-c-progress__status-icon {
+#summary-progress-bar .pf-v6-c-progress__status-icon {
     display: none;
 }
 
-#summary-progress-bar .pf-v5-c-progress__bar,
-#summary-progress-bar .pf-v5-c-progress__indicator {
+#summary-progress-bar .pf-v6-c-progress__bar,
+#summary-progress-bar .pf-v6-c-progress__indicator {
     height: 2px;
 }
 
-#summary-progress-bar.gray .pf-v5-c-progress__bar,
-#summary-progress-bar.gray .pf-v5-c-progress__bar::before {
+#summary-progress-bar.gray .pf-v6-c-progress__bar,
+#summary-progress-bar.gray .pf-v6-c-progress__bar::before {
     background-color: var(--pf-v5-global--palette--black-300) !important;
 }
 
-#summary-progress-bar .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
+#summary-progress-bar .pf-v6-c-progress.pf-m-sm .pf-v6-c-progress__measure {
     font-size: 14px;
 }
 

package/lib/esm/css/case.css

@@ -26,7 +26,7 @@ pfe-collapse-toggle[aria-expanded='true'] h3:after {
 }
 
 button,
-.pf-v5-c-button,
+.pf-v6-c-button,
 .btn.btn-app {
     font-size: 14px;
 }
@@ -35,6 +35,12 @@ button,
     grid-gap: 0px;
 }
 
+.case-details-tabs .pf-v6-c-tabs__item.pf-m-current {
+    border-bottom: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth) solid
+        var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
+    background-color: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
+}
+
 .case-details-tabs .case-details-tabs-content {
     background-color: #f0f0f0;
     margin-left: -1.8rem;
@@ -307,11 +313,7 @@ button,
     outline: none;
 }
 
-button.pf-v5-c-button.pf-m-secondary {
-    background-color: #fff;
-}
-
-input[aria-invalid='true'].pf-v5-c-form-control {
+input[aria-invalid='true'].pf-v6-c-form-control {
     border-bottom-width: 2px !important;
 }
 
@@ -327,21 +329,26 @@ input[aria-invalid='true'].pf-v5-c-form-control {
     gap: 8px;
 }
 
-.gradient-border-badge {
+.preview-label {
+    border: 1px solid transparent; /* Needed for border space */
     border-radius: 18px;
-    padding: 1px;
-    background: linear-gradient(to right, #f56e6e, #5e40be);
-    display: inline-block;
+    background: linear-gradient(to right, #f56e6e, #5e40be); /* Border gradient */
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+    box-shadow: none;
+
+    /* Inner white background */
+    background-image: linear-gradient(white, white), /* inner bg */ linear-gradient(to right, #f56e6e, #5e40be);
 }
 
-.preview-label {
-    border-radius: 18px;
-    background: white;
-    padding: 0px 8px;
+.preview-label .pf-v6-c-label__text {
+    max-height: 1rem;
+    display: flex;
+    align-items: center;
 }
 
-.preview-label .pf-v5-c-label__content {
-    color: grey;
+.preview-label .pf-v6-c-label__content {
+    font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 /* Improves the sidebar loading */