@rh-support/troubleshoot 2.0.7 → 2.0.9

package/lib/esm/components/AccountInfo/AccountSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/AccountSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAOnC,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAcrE,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,eAAO,MAAM,YAAY,EAAE,MAG1B,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eAsKrC;kBAtKQ,eAAe;;;AA0KxB,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"AccountSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/AccountInfo/AccountSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAKnC,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAYrE,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,eAAO,MAAM,YAAY,EAAE,MAG1B,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eA6HrC;kBA7HQ,eAAe;;;AAiIxB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/lib/esm/components/AccountInfo/AccountSelector.js

@@ -1,27 +1,14 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import './css/accountSelector.css';
-import { accounts } from '@cee-eng/hydrajs';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { AlertMessage, AlertType } from '@rh-support/components';
 import { AccountSelectorInternal, GlobalMetadataStateContext } from '@rh-support/react-context';
 import { AbilityContext, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { useRouteDispatchContext } from '../../context/RouteContext';
 import { clearSelectedAccount, setCaseAccountNumber } from '../../reducers/CaseReducer';
-import { setNoValidEntitlement } from '../../reducers/RouteReducer';
 import { ManagedAccountsDropdown } from './ManagedAccountsDropdown';
 export const defaultProps = {
     id: '',
@@ -29,14 +16,12 @@ export const defaultProps = {
 };
 function AccountSelector(props) {
     var _a;
-    const [showNotEntitledMessage, setShowNotEntitledMessage] = useState(false);
     const { accountNumber, selectedAccountDetails } = useCaseSelector((state) => ({
         accountNumber: state.caseDetails.accountNumberRef,
         selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
     const isSelectedAccountSubscriptionAbused = ((_a = selectedAccountDetails === null || selectedAccountDetails === void 0 ? void 0 : selectedAccountDetails.data) === null || _a === void 0 ? void 0 : _a.subscriptionAbuse) || false;
     const caseDispatch = useCaseDispatch();
-    const routeDispatch = useRouteDispatchContext();
     const { globalMetadataState: { bookmarkedGroupAccounts, loggedInUserRights, managedAccounts, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const { t } = useTranslation();
     /** Various Abilities */
@@ -45,7 +30,7 @@ function AccountSelector(props) {
     const canBookmarkAccounts = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.BOOKMARK_ACCOUNTS);
     const canUseFindMyAccount = loggedInUserRights.data.isAccountDifferentFromLoggedInAccount(accountNumber);
     // Account Change Handler
-    const onAccountChange = (account) => __awaiter(this, void 0, void 0, function* () {
+    const onAccountChange = (account) => {
         if (selectedAccountDetails.data.accountNumber === account.accountNumber)
             return;
         if (isEmpty(account === null || account === void 0 ? void 0 : account.accountNumber)) {
@@ -53,7 +38,7 @@ function AccountSelector(props) {
             return;
         }
         setCaseAccountNumber(caseDispatch, account.accountNumber, loggedInUserRights.data.isAccountSameAsLoggedInAccount(account.accountNumber), loggedInUsersAccount.data);
-    });
+    };
     const onInternalAccountSelect = (accounts) => {
         if (!isArray(accounts))
             return;
@@ -71,38 +56,14 @@ function AccountSelector(props) {
                 name: loggedInUserRights.data.getAccountName(),
             });
     };
+    if (isEmpty(loggedInUserRights.data))
+        return React.createElement(React.Fragment, null);
     const selectedAccount = {
         name: selectedAccountDetails.data.name,
         accountNumber: selectedAccountDetails.data.accountNumber,
         subscriptionAbuse: selectedAccountDetails.data.subscriptionAbuse,
     };
-    // When internal user wants to open a case for a customer but
-    // customer account doesn't have entitlement, we show an error
-    useEffect(() => {
-        const getAccountEntitlement = () => __awaiter(this, void 0, void 0, function* () {
-            setShowNotEntitledMessage(false);
-            try {
-                const res = yield accounts.getAccountEntitlementByInternalUser(selectedAccountDetails.data.accountNumber);
-                if (isEmpty(res)) {
-                    setShowNotEntitledMessage(true);
-                    setNoValidEntitlement(routeDispatch, true);
-                }
-            }
-            catch (e) {
-                console.log(e);
-            }
-        });
-        if (loggedInUserRights.data.isInternal() &&
-            selectedAccountDetails.data.accountNumber &&
-            selectedAccountDetails.data.accountNumber !== loggedInUsersAccount.data.accountNumber) {
-            getAccountEntitlement();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedAccountDetails.data.accountNumber, loggedInUserRights.data, loggedInUsersAccount.data]);
-    if (isEmpty(loggedInUserRights.data))
-        return React.createElement(React.Fragment, null);
     return (React.createElement("div", { id: props.id, className: `form-group ${props.className}` },
-        React.createElement(AlertMessage, { show: showNotEntitledMessage, variant: AlertType.DANGER, isInline: true, title: "The selected account dosn't have entitlement", className: "pf-u-mb-lg" }),
         React.createElement("div", { className: "account-selector-label-wrapper pf-u-display-flex" },
             React.createElement("label", { htmlFor: "account-selector" },
                 React.createElement(Trans, null, "Account"),

package/lib/esm/components/AccountInfo/OwnerSelector.js

@@ -35,7 +35,7 @@ function OwnerSelector(props) {
         selectedCaseGroupUsers: state.selectedCaseGroupUsers,
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
     }), isEqual);
-    const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
+    const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
     const caseDispatch = useCaseDispatch();
     const { globalMetadataState: { loggedInUserRights, loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const previousAccountNumber = usePrevious(accountNumber);
@@ -212,6 +212,6 @@ function OwnerSelector(props) {
             React.createElement(Trans, null, "Owner"),
             React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, comparator: ownerComparator, isLocalChange: localOwnerChange, value: selectedOwner.data, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.owner, (v) => v.fullNameCustom) }),
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        showUsersWithSelectedGroupAccess ? (React.createElement(Typeahead, { id: "get-support-owner", className: "react-select-custom", clearButton: true, isLoading: selectedCaseGroupUsers.isFetching || isCaseOwnerUpdating, options: usersWithGroupAccess, selected: !isEmpty(selectedOwner.data) ? [selectedOwner.data] : [], onChange: onCustomerContactSelect, labelKey: getHydraContactLabel, placeholder: t(`Search by name or username`), disabled: selectedCaseGroupUsers.isFetching || isCaseOwnerUpdating, renderMenuItemChildren: renderMenuItemChildren, "data-tracking-id": "get-support-owner" })) : (React.createElement(CaseContactsSelectorExternal, { loggedInUserRights: loggedInUserRights.data, selectedAccountNumber: accountNumber, selected: !isEmpty(selectedOwner.data) ? [selectedOwner.data] : [], onChange: onCustomerContactSelect, placeholder: t(`Search by name or username`), clearButton: true, id: "get-support-owner", name: "get-support-owner", className: "react-select-custom", isUpdating: isCaseOwnerUpdating, isInvalid: isNextBtnClickedToShowValidationError && isEmpty(selectedOwner.data) }))));
+        showUsersWithSelectedGroupAccess ? (React.createElement(Typeahead, { id: "get-support-owner", className: "react-select-custom", clearButton: true, isLoading: selectedCaseGroupUsers.isFetching || isCaseOwnerUpdating, options: usersWithGroupAccess, selected: !isEmpty(selectedOwner.data) ? [selectedOwner.data] : [], onChange: onCustomerContactSelect, labelKey: getHydraContactLabel, placeholder: t(`Search by name or username`), disabled: selectedCaseGroupUsers.isFetching || isCaseOwnerUpdating, renderMenuItemChildren: renderMenuItemChildren, "data-tracking-id": "get-support-owner" })) : (React.createElement(CaseContactsSelectorExternal, { loggedInUserRights: loggedInUserRights.data, selectedAccountNumber: accountNumber, selected: !isEmpty(selectedOwner.data) ? [selectedOwner.data] : [], onChange: onCustomerContactSelect, placeholder: t(`Search by name or username`), clearButton: true, id: "get-support-owner", name: "get-support-owner", className: "react-select-custom", isUpdating: isCaseOwnerUpdating, isInvalid: showValidationErrorAlert && isEmpty(selectedOwner.data) }))));
 }
 export { OwnerSelector };

package/lib/esm/components/CaseEditView/CaseDetailsAside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AA8BA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAiU7C"}
+{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AA6BA,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eA+T7C"}

package/lib/esm/components/CaseEditView/CaseDetailsAside.js

@@ -18,7 +18,7 @@ import { ErrorBoundary, ToastNotification, useBreakpoint, useForceUpdate } from
 import { GlobalMetadataDispatchContext, toggleViewAsCustomerFlag, useGlobalStateContext, useUserPreferences, } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { scrollIntoView } from '@rh-support/utils';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -28,7 +28,6 @@ import { useCaseDetailsPageStateContext } from '../../context/CaseDetailsPageCon
 import { useRecommendationStateContext } from '../../context/RecommendationContext';
 import { ActiveCustomerEscalation } from './ActiveCustomerEscalation';
 import { CaseSolutions } from './CaseSolutions';
-import { PDFContext } from './PDFContainer';
 import { RemoteSessionAgreement } from './RequestRemoteSession';
 export function CaseDetailsAside(props) {
     var _a;
@@ -75,7 +74,6 @@ export function CaseDetailsAside(props) {
     const { getOriginalCaseView, updateOriginalCaseView } = useUserPreferences();
     const [viewAsInternalPref, setViewAsInternalPref] = useState();
     const [isDefaultBoxChecked, setIsDefaultBoxChecked] = useState(true);
-    const { isExportingPDF } = useContext(PDFContext);
     useEffect(() => {
         const userPreferredCaseView = () => __awaiter(this, void 0, void 0, function* () {
             try {
@@ -163,8 +161,8 @@ export function CaseDetailsAside(props) {
             return t('View internal information available to Red Hat associates only.');
         }
     };
-    return (React.createElement("aside", { className: `grid-aside ${isSideBarExpanded ? '' : 'sidebar-collapsed'} ` },
-        React.createElement("pfe-collapse-toggle", { "aria-controls": "case-details-aside-content", onClick: onToggleAside }, isSideBarExpanded ? (React.createElement("div", { className: `sidebar-header ${isExportingPDF ? 'hide-in-pdf' : ''}` },
+    return (React.createElement("aside", { className: `grid-aside ${isSideBarExpanded ? '' : 'sidebar-collapsed'}` },
+        React.createElement("pfe-collapse-toggle", { "aria-controls": "case-details-aside-content", onClick: onToggleAside }, isSideBarExpanded ? (React.createElement("div", { className: "sidebar-header" },
             React.createElement(Button, { variant: "link", isInline: true, title: t('Collapse sidebar') },
                 React.createElement("span", null,
                     React.createElement(Trans, null, "Collapse")),

package/lib/esm/components/CaseEditView/CaseOverview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA8D,MAAM,OAAO,CAAC;AA6BnF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,MAAM,eA0ejD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA8D,MAAM,OAAO,CAAC;AA6BnF,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,MAAM,eAyejD"}

package/lib/esm/components/CaseEditView/CaseOverview/index.js

@@ -236,7 +236,7 @@ export default function CaseOverview(props) {
                         props.caseNumber),
                     React.createElement("div", null,
                         exportPDFButton(props.caseNumber),
-                        React.createElement(Button, Object.assign({ className: `pf-u-ml-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, isDisabled: !canManageCase || (caseOverviewState.caseStatusUpdating && isCaseUpdating) }, (caseOverviewState.caseStatusUpdating &&
+                        React.createElement(Button, Object.assign({ className: "pf-u-ml-md", isDisabled: !canManageCase || (caseOverviewState.caseStatusUpdating && isCaseUpdating) }, (caseOverviewState.caseStatusUpdating &&
                             isCaseUpdating && {
                             isLoading: true,
                         }), { onClick: () => (isCaseInOpenState ? onCaseClose() : onCaseReopen()), variant: isCaseInOpenState ? ButtonVariant.secondary : ButtonVariant.tertiary, "data-tracking-id": isCaseInOpenState

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutions.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutions.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAgE3E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAUD,eAAO,MAAM,aAAa,+EAkZxB,CAAC"}
+{"version":3,"file":"CaseSolutions.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutions.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAsD,MAAM,OAAO,CAAC;AA+D3E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAUD,eAAO,MAAM,aAAa,+EAoYxB,CAAC"}

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutions.js

@@ -34,7 +34,6 @@ import { useCaseUpdateErrorMessage } from '../../../hooks/useCaseUpdateErrorMess
 import { updateCaseDetails } from '../../../reducers/CaseReducer';
 import { fetchRecommendations } from '../../../reducers/RecommendationsReducer';
 import { CaseSolutionsItem } from './CaseSolutionsItem';
-import { HandpickedItem } from './HandpickedItem';
 // some of the pinned and hadpicked titles are set to 'Red Hat Knowledge Base'
 // this workaround is added till backend fix
 const titleFix = (recommendations, allDocs) => __awaiter(void 0, void 0, void 0, function* () {
@@ -95,8 +94,7 @@ export const CaseSolutions = forwardRef((props, ref) => {
     const recommendationsDispatch = useRecommendationDispatchContext();
     const { caseNumber, isSecureSupportAccount } = props;
     const [isPinLoading, setIsPinLoading] = useState({});
-    const [handPickedOpen, setHandPickedOpen] = useState(false);
-    const [pinnedOpen, setPinnedOpen] = useState(false);
+    const [expanded, setExpanded] = useState('sol-handpicked');
     const [recommendations, setRecommendations] = useState([]);
     const [topRecommendations, setTopRecommendations] = useState([]);
     const ability = useContext(AbilityContext);
@@ -207,49 +205,49 @@ export const CaseSolutions = forwardRef((props, ref) => {
         }
     }, [allDocs, isFetchingCaseDetails, isLoadingRecommendations, recomendationsObj]);
     const renderTopRecommendations = (recommendation, index, type) => (React.createElement(React.Fragment, null,
-        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) })),
-        canLinkUnlink && (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }))));
+        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) })),
+        canLinkUnlink && (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? 'Unlink' : 'Link', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }))));
     // customer logged in: we show pins and perform pin/unpin
-    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, isPinned: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
+    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
     // customer logged in: we show links but perform pin/unpin
-    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(HandpickedItem, { type: type, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
+    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
     // redhatter logged in: we show pins but perform link/unlink
-    const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
+    const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
     // redhatter logged in: we show links and perform link/unlink
-    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement("div", { className: "pf-u-ml-lg" },
-        React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) })));
-    const linkedRecommendations = recommendations.filter((r) => r.isLinked);
-    const pinnedRecommendations = recommendations.filter((r) => r.isPinned);
+    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? 'Unlink' : 'Link', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
+    const setExpandedSection = (id) => {
+        expanded === id ? setExpanded('') : setExpanded(id);
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Accordion, { isBordered: true, asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: handPickedOpen, onClick: () => setHandPickedOpen((pre) => !pre) },
-                    React.createElement("span", null, canLinkUnlink ? React.createElement(Trans, null, "Handpicked by you") : React.createElement(Trans, null, "Handpicked for this case")),
-                    React.createElement("span", { className: "badge-item pf-u-font-size-sm pf-u-mx-sm" }, linkedRecommendations.length)),
-                React.createElement(AccordionContent, { isHidden: !handPickedOpen }, !hasLink ? (React.createElement(Trans, null, "If a Red Hat engineer finds an article or solution that can help with your case, they'll pin it here.")) : (React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: linkedRecommendations.map((rec, index) => canLinkUnlink
-                        ? renderHandPickedByRedHatter(rec, index, 'handpicked-recommendations')
-                        : renderHandpickedCustomerView(rec, index, 'handpicked-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
-                        { title: '5', value: 5 },
-                        { title: '10', value: 10 },
-                    ] })))),
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: pinnedOpen, onClick: () => setPinnedOpen((pre) => !pre) },
-                    React.createElement("span", null, canLinkUnlink ? (React.createElement(Trans, null, "Pinned by customer")) : (React.createElement(Trans, null, "My pinned recommendations"))),
-                    React.createElement("span", { className: "badge-item pf-u-font-size-sm pf-u-mx-sm" }, pinnedRecommendations.length)),
-                React.createElement(AccordionContent, { isHidden: !pinnedOpen }, !hasPin ? (React.createElement(Trans, null, "When you save a recommended article or solution, you'll see it here. Saved items display only in this case and are not saved for later.")) : (React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: pinnedRecommendations.map((rec, index) => canLinkUnlink
-                        ? renderPinnedByCustomerRedhatterView(rec, index, 'pinned-recommendations')
-                        : renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
-                        { title: '5', value: 5 },
-                        { title: '10', value: 10 },
-                    ] }))))),
         topRecommendations.length > 0 && (React.createElement("div", { className: "card card-white card-support recommendations", ref: ref },
             React.createElement("h3", { className: "card-heading" },
-                React.createElement(Trans, null, "Knowledgebase recommendations")),
+                React.createElement(Trans, null, "Top recommendations")),
             React.createElement("div", { className: "card-body" },
-                React.createElement(PaginatedList, { id: "case-details-top-recommendations", className: "list-icons list-icons-flush", listItems: topRecommendations
-                        .filter((r) => !pinnedRecommendations.some((pr) => pr.resourceId === r.resourceId))
-                        .map((rec, index) => renderTopRecommendations(rec, index, 'top-recommendations')), perPage: 5, isFetching: !!isLoadingRecommendations, perPageOptions: [
+                React.createElement(PaginatedList, { id: "case-details-top-recommendations", className: "list-icons list-icons-flush", listItems: topRecommendations.map((rec, index) => renderTopRecommendations(rec, index, 'top-recommendations')), perPage: 5, isFetching: !!isLoadingRecommendations, perPageOptions: [
                         { title: '5', value: 5 },
                         { title: '10', value: 10 },
-                    ] }))))));
+                    ] })))),
+        (hasPin || hasLink) && (React.createElement(Accordion, { asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
+            hasLink && (React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: expanded === 'sol-handpicked', onClick: () => setExpandedSection('sol-handpicked') }, canLinkUnlink ? React.createElement(Trans, null, "Handpicked by you") : React.createElement(Trans, null, "Handpicked for you")),
+                React.createElement(AccordionContent, { isHidden: expanded !== 'sol-handpicked' },
+                    React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: recommendations
+                            .filter((r) => r.isLinked)
+                            .map((rec, index) => canLinkUnlink
+                            ? renderHandPickedByRedHatter(rec, index, 'handpicked-recommendations')
+                            : renderHandpickedCustomerView(rec, index, 'handpicked-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
+                            { title: '5', value: 5 },
+                            { title: '10', value: 10 },
+                        ] })))),
+            hasPin && (React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: expanded === 'sol-pinned', onClick: () => setExpandedSection('sol-pinned') }, canLinkUnlink ? React.createElement(Trans, null, "Pinned by customer") : React.createElement(Trans, null, "Your pins")),
+                React.createElement(AccordionContent, { isHidden: expanded !== 'sol-pinned' },
+                    React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: recommendations
+                            .filter((r) => r.isPinned)
+                            .map((rec, index) => canLinkUnlink
+                            ? renderPinnedByCustomerRedhatterView(rec, index, 'pinned-recommendations')
+                            : renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
+                            { title: '5', value: 5 },
+                            { title: '10', value: 10 },
+                        ] }))))))));
 });

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts

@@ -1,7 +1,6 @@
 import { ICaseResourceLink } from '@cee-eng/hydrajs/@types/api/public/case';
 interface IProps {
     showPin?: boolean;
-    isPinned?: boolean;
     showLink?: boolean;
     pinTitle: string;
     index: number;
@@ -10,7 +9,7 @@ interface IProps {
     onPinClicked: () => void;
     type: string;
 }
-export interface ICaseDetailAsideRecommendation extends Partial<ICaseResourceLink> {
+interface ICaseDetailAsideRecommendation extends Partial<ICaseResourceLink> {
     isPinned?: boolean;
     isLinked?: boolean;
     solutionAbstract?: string;

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAS5E,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAgD9C"}
+{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAQ5E,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAwC9C"}

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.js

@@ -1,7 +1,6 @@
 import { Button } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
-import OutlinedStarIcon from '@patternfly/react-icons/dist/js/icons/outlined-star-icon';
-import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
+import ThumbTackIcon from '@patternfly/react-icons/dist/js/icons/thumb-tack-icon';
 import { LoadingIndicator } from '@rh-support/components';
 import { cleanupMarkDown, decodeMarkTag, truncate } from '@rh-support/utils';
 import React from 'react';
@@ -9,11 +8,11 @@ export function CaseSolutionsItem(props) {
     const maxTitleLength = 150;
     const maxAbstractLength = 150;
     const isLoading = !!props.isPinLoading[props.recommendation.resourceId];
-    return (React.createElement("div", null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "recommendation-header" },
             React.createElement(Button, { title: props.pinTitle, onClick: props.onPinClicked, "data-tracking-id": `case-resource-${props.pinTitle}`, variant: "plain", className: "list-icon" },
                 isLoading && React.createElement(LoadingIndicator, { show: isLoading, size: "xs" }),
-                !isLoading && props.showPin && (React.createElement(React.Fragment, null, props.isPinned ? (React.createElement(StarIcon, { className: "pinned-resource" })) : (React.createElement(OutlinedStarIcon, { className: "pinned-resource" })))),
+                !isLoading && props.showPin && React.createElement(ThumbTackIcon, { className: "pinned-resource" }),
                 !isLoading && props.showLink && React.createElement(LinkIcon, null)),
             React.createElement("a", { href: props.recommendation.resourceViewURI, "data-tracking-id": `case-resource-${props.type}-link-${props.index}`, target: "_blank", rel: "noopener noreferrer", dangerouslySetInnerHTML: {
                     __html: truncate(decodeMarkTag(props.recommendation.title || ''), maxTitleLength),

package/lib/esm/components/CaseEditView/ConfirmationModals/ReopenCaseModal.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Button, ButtonVariant, Form, FormGroup, Modal, ModalVariant, Select, SelectOption, TextArea, } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { formatDateTime } from '@rh-support/utils';
-import isEmpty from 'lodash/isEmpty';
+import { isEmpty } from 'lodash';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CaseStatusEnum } from '../../../constants/caseDetailsConstants';

package/lib/esm/components/CaseEditView/ShareCase/PartnerShare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PartnerShare.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ShareCase/PartnerShare.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAKvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;IAChC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAwH7C"}
+{"version":3,"file":"PartnerShare.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ShareCase/PartnerShare.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAKvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;IAChC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAwH7C"}

package/lib/esm/components/CaseEditView/ShareCase/PartnerShare.js

@@ -11,13 +11,8 @@ import { accounts, kase } from '@cee-eng/hydrajs';
 import { ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
-import filter from 'lodash/filter';
-import find from 'lodash/find';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
+import { filter, find, get, isEmpty, map, merge } from 'lodash';
 import isEqual from 'lodash/isEqual';
-import map from 'lodash/map';
-import merge from 'lodash/merge';
 import React, { useContext, useEffect, useState } from 'react';
 import { Typeahead } from 'react-bootstrap-typeahead';
 import { Trans, useTranslation } from 'react-i18next';

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsManagement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAiBnD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,eA+D1D"}
+{"version":3,"file":"CaseDetailsManagement.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAiBnD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,KAAK,EAAE,MAAM,eAiE1D"}

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseDetailsManagement.js

@@ -28,10 +28,11 @@ export default function CaseDetailsManagement(props) {
     const canSeeEmailNotifications = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SEND_NOTIFICATIONS);
     const canSeeInternalStatus = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_INTERNAL_STATUS);
     const canSeeSBRGroups = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_SBR_GROUP);
+    const handleFormSubmit = (e) => e.preventDefault();
     return (React.createElement(React.Fragment, null,
         React.createElement(PartnerCaseHelper, { setIsUpdatingPartners: setIsUpdatingPartner, caseNumber: props.caseNumber, routeProps: props.routeProps }),
         React.createElement("section", { className: "card card-white" },
-            React.createElement("form", null,
+            React.createElement("form", { onSubmit: handleFormSubmit },
                 React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
                     React.createElement(FlexItem, { flex: { default: 'flex_1' } },
                         React.createElement(OwnerSelector, null)),

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/CaseInformation.js

@@ -3,7 +3,7 @@ import { MoreOrLess } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { PreviousCaseTypes } from '@rh-support/utils';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash';
 import React from 'react';
 import { Trans } from 'react-i18next';
 import { useCaseSelector } from '../../../../context/CaseContext';

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/useCustomEmails.js

@@ -12,7 +12,7 @@ import { PromisifyModal, ToastNotification, useFetch } from '@rh-support/compone
 import { fetchAccountCustomEmails, GlobalMetadataDispatchContext, GlobalMetadataStateContext, } from '@rh-support/react-context';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import { haventLoadedMetadata, isEmailValid } from '@rh-support/utils';
-import findIndex from 'lodash/findIndex';
+import { findIndex } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect } from 'react';

package/lib/esm/components/CaseInformation/CaseGroup.js

@@ -42,7 +42,7 @@ function CaseGroup(props) {
         isCaseOwnerUpdating: state.isCaseOwnerUpdating,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
+    const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
     const isGroupMandatory = selectedAccountDetails.data.requireCGroupOnCreate;
     const [selectedCaseGroup, setSelectedCaseGroup] = useState(isGroupMandatory ? undefined : emptyCaseGroup);
     const [isCaseGroupInvalid, setCaseGroupInvalid] = useState(false);
@@ -163,7 +163,7 @@ function CaseGroup(props) {
         }
     });
     const showHelperText = !isSelectedUngroupedInvalid || (!isCaseGroupInvalid && !isGroupMandatory);
-    const showEmptyValidationError = !caseNumber && isNextBtnClickedToShowValidationError && isCaseGroupInvalid;
+    const showEmptyValidationError = !caseNumber && showValidationErrorAlert && isCaseGroupInvalid;
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", { htmlFor: "get-support-group" },
             React.createElement(Trans, null, "Group"),

package/lib/esm/components/CaseInformation/CaseInformation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAyGpD"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAUvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAiHpD"}

package/lib/esm/components/CaseInformation/CaseInformation.js

@@ -5,6 +5,7 @@ import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
 import React, { useContext, useEffect } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { AppMetadataStateContext } from '../../context/AppMetadataContext';
 import { useCaseSelector } from '../../context/CaseContext';
 import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
 import { Hostname } from '../ImproveCase/Hostname';
@@ -13,6 +14,7 @@ import ClusterRecommendations from '../Recommendations/ClusterRecommendations';
 import Description from './Description';
 export default function CaseInformation(props) {
     const { t } = useTranslation();
+    const { appMetadataState: { nextButtonRef }, } = useContext(AppMetadataStateContext);
     const { globalMetadataState: { allCaseTypes, allCaseSeverities, caseLanguages, loggedInUser, loggedInUserJwtToken, loggedInUsersAccount, }, } = useContext(GlobalMetadataStateContext);
     const dispatchToGlobalMetadataReducer = useContext(GlobalMetadataDispatchContext);
     const { contactSSOName, selectedAccountDetails, ownersCaseGroups, hasInvalidEntitlements } = useCaseSelector((state) => ({
@@ -31,6 +33,11 @@ export default function CaseInformation(props) {
             (selectedAccountDetails.data.requireCGroupOnCreate && ownersCaseGroups.isError) ||
             allCaseSeverities.isError);
     };
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        // simulating click
+        nextButtonRef.current.click();
+    };
     // Loading metadata (if needed) on component mount after fetching account info.
     // This will be fetched here in caseCreation mode as Issue section will be skipped.
     useEffect(() => {
@@ -77,7 +84,7 @@ export default function CaseInformation(props) {
             !isMetadataLoading() &&
             !isMetadataLoadingError() &&
             canManageCase(loggedInUserJwtToken) && (React.createElement(React.Fragment, null,
-            React.createElement("form", null,
+            React.createElement("form", { onSubmit: handleFormSubmit },
                 React.createElement(Hostname, null),
                 React.createElement(OpenShiftClusterId, null),
                 React.createElement(ClusterRecommendations, { className: "push-bottom" }),

package/lib/esm/components/CaseInformation/Description.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eAwGhD"}
+{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eAsGhD"}

package/lib/esm/components/CaseInformation/Description.js

@@ -30,7 +30,7 @@ export default function Description(props) {
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
-    const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
+    const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
     const onKTQ1IssueChange = (value, e) => {
         const ktQ1Local = isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? '' : value;
         const newDescription = getUpdatedDescription(ktQ1Local, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName);
@@ -45,9 +45,7 @@ export default function Description(props) {
     return (React.createElement(InlineEdit, { labelContent: React.createElement(React.Fragment, null,
             props.customTitle ? (props.customTitle) : (React.createElement(Trans, null, "What are you experiencing? What are you expecting to happen?")),
             isKT1Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), labelProps: { htmlFor: 'get-support-ktQ1-issue' }, content: issue, allowInlineEdit: !!props.inlineEditable, hideSaveCancel: !!props.hideSaveCancel, initialIsEditing: isEmpty(issue), usePreformattedTag: true, saveOnBlur: true },
-        React.createElement(TextArea, { id: "get-support-ktQ1-issue", name: "get-support-ktQ1-issue", className: `form-control${isDescriptionInvalid(issue) || (isNextBtnClickedToShowValidationError && isEmpty(issue))
-                ? ' form-invalid'
-                : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT ? 'true' : 'false', "aria-required": isKT1Required, isRequired: isKT1Required, value: issue, isDisabled: isEmpty(issue) && hasLargeCaseDescription && !setIssueTextAreaFocused, onChange: onKTQ1IssueChange, onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "get-support-ktQ1-issue", placeholder: t('Please enter an elaborate description') }),
+        React.createElement(TextArea, { id: "get-support-ktQ1-issue", name: "get-support-ktQ1-issue", className: `form-control${isDescriptionInvalid(issue) || (showValidationErrorAlert && isEmpty(issue)) ? ' form-invalid' : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT ? 'true' : 'false', "aria-required": isKT1Required, isRequired: isKT1Required, value: issue, isDisabled: isEmpty(issue) && hasLargeCaseDescription && !setIssueTextAreaFocused, onChange: onKTQ1IssueChange, onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "get-support-ktQ1-issue", placeholder: t('Please enter an elaborate description') }),
         React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-20k-warning-ktQ1-environment" }, `${(issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT
             ? `Description cannot be more than ${CASE_DEATILS_ISSUE_LIMIT} characters`
             : ''}`),

package/lib/esm/components/CaseInformation/OpenCaseIssue.js

@@ -24,7 +24,7 @@ function OpenCaseIssue(props) {
     const caseDispatch = useCaseDispatch();
     const [isSummaryInValid, setIsSummaryInValid] = useState(false);
     const [hasLargeSummary, setHasLargeSummary] = useState(false);
-    const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
+    const { routeState: { showValidationErrorAlert }, } = useContext(RouteContext);
     const onSummaryBlur = (e) => {
         var _a;
         setIsSummaryInValid(isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()));
@@ -53,7 +53,7 @@ function OpenCaseIssue(props) {
                 !!props.required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: !!props.hideSaveCancel, initialIsEditing: !!props.initialIsEditing, saveOnBlur: true, collapseOnBlur: !!props.collapseOnBlur && !isSummaryInValid, content: summary },
             React.createElement("input", { type: "text", id: supportType === PreviousCaseTypes.FEATURE_ENHANCEMENT
                     ? 'get-support-title'
-                    : 'get-support-summary', className: `form-control${isSummaryInValid || hasLargeSummary || (isNextBtnClickedToShowValidationError && !summary)
+                    : 'get-support-summary', className: `form-control${isSummaryInValid || hasLargeSummary || (showValidationErrorAlert && !summary)
                     ? ' form-invalid'
                     : ''}`, "aria-invalid": isSummaryInValid, "aria-required": !!props.required, required: !!props.required, name: supportType === PreviousCaseTypes.FEATURE_ENHANCEMENT
                     ? 'get-support-title'

package/lib/esm/components/CaseInformation/Severity.js

@@ -3,8 +3,8 @@ import WarningTriangleIcon from '@patternfly/react-icons/dist/js/icons/warning-t
 import { Dropdown, ValueChangedIcon } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { autoEnableFtsOnCaseViewEditPage, severitySort, showFtsOnCreateCasePage, toOption, toOptions, } from '@rh-support/utils';
+import { findLast } from 'lodash';
 import find from 'lodash/find';
-import findLast from 'lodash/findLast';
 import includes from 'lodash/includes';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';

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

@@ -1 +1 @@
-{"version":3,"file":"CaseManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseManagement.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,MAAM;CAAG;AAC1B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,eA4BnD"}
+{"version":3,"file":"CaseManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/CaseManagement.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,MAAM;CAAG;AAC1B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,MAAM,eAqCnD"}

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

@@ -1,5 +1,6 @@
 import { Flex, FlexItem } from '@patternfly/react-core';
-import React from 'react';
+import React, { useContext } from 'react';
+import { AppMetadataStateContext } from '../../context/AppMetadataContext';
 import { useCaseDispatch } from '../../context/CaseContext';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 import CaseGroup from '../CaseInformation/CaseGroup';
@@ -15,10 +16,16 @@ import { RHAssociatesSelector } from './RHAssociatesSelector';
 import CaseContactSelector from './SendNotifications/CaseContactSelector';
 export default function CaseManagement(props) {
     const caseDispatch = useCaseDispatch();
+    const { appMetadataState: { nextButtonRef }, } = useContext(AppMetadataStateContext);
+    const handleFormSubmit = (e) => {
+        e.preventDefault();
+        // simulating click
+        nextButtonRef.current.click();
+    };
     const onSeverityChange = (payload) => {
         setCaseDetails(caseDispatch, payload);
     };
-    return (React.createElement("form", null,
+    return (React.createElement("form", { onSubmit: handleFormSubmit },
         React.createElement(SupportLevel, null),
         React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
             React.createElement(FlexItem, { flex: { default: 'flex_1' } },

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

@@ -2,9 +2,5 @@ export declare const v3Tov4TransitionLink: () => JSX.Element;
 export declare const discoverV4ClusterIdLink: () => JSX.Element;
 export declare const discoverV4ClusterIdLinkError: () => JSX.Element;
 export declare const isInvalidErrorMessage: () => JSX.Element;
-interface IProps {
-    className?: string;
-}
-export declare function OpenShiftClusterId(props: IProps): JSX.Element;
-export {};
+export declare function OpenShiftClusterId(): JSX.Element;
 //# sourceMappingURL=OpenShiftClusterId.d.ts.map