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

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

@@ -15,11 +15,10 @@ import { CaseDetailsAside } from './CaseDetailsAside';
 import { CaseDetailsErrorMessage } from './CaseDetailsErrorMessage';
 import CaseDetailsModals from './CaseDetailsModals';
 import { CaseDetailsTabs } from './CaseDetailsTabs';
-import { CaseDetailsWarningMessage } from './CaseDetailsWarningMessage';
 import CaseOverview from './CaseOverview';
 import { PDFContext } from './PDFContainer';
 export default function Case(props) {
-    const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount, loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const caseDetailsPageDispatch = useCaseDetailsPageDispatchContext();
     const { t } = useTranslation();
     // The `path` lets us build <Route> paths that are
@@ -82,7 +81,7 @@ export default function Case(props) {
             return;
         }
         if (caseNumber) {
-            fetchCaseDetails(caseDispatch, caseNumber, loggedInUserRights.data);
+            fetchCaseDetails(caseDispatch, caseNumber, loggedInUserRights.data, loggedInUser.data);
             canSeeRMEs &&
                 fetchCaseEscalations(caseDetailsPageDispatch, caseNumber, loggedInUserRights.data.getAccountNumber());
             // fetch data in advance
@@ -112,16 +111,17 @@ export default function Case(props) {
                 React.createElement("article", { className: "grid-main" },
                     React.createElement("section", { className: "grid-main-section" },
                         (isFetchingCaseDetailsError || !canReadCase) && (React.createElement(CaseDetailsErrorMessage, { isError: isFetchingCaseDetailsError, errorDetails: caseDetailsError, canReadCase: canReadCase, caseNumber: caseNumber, isInlineError: true })),
-                        React.createElement(CaseDetailsWarningMessage, { caseNumber: caseNumber, selectedAccountDetails: selectedAccountDetails.data || {} }),
                         canReadCase &&
                             (!isFetchingCaseDetails || !isEmpty(product)) &&
                             !isFetchingCaseDetailsError && (React.createElement(React.Fragment, null,
-                            React.createElement(ErrorBoundary, { errorMsgInfo: t('There was an error loading cases. Please try refreshing the page.') },
+                            React.createElement(ErrorBoundary, { errorMsgInfo: {
+                                    message: t('There was an error loading cases. Please try refreshing the page.'),
+                                } },
                                 React.createElement(CaseOverview, { caseNumber: caseNumber, tabsRef: caseDetailsTabsRef })),
                             React.createElement(Switch, null,
                                 React.createElement(Route, { path: `${path}/:activeTab?` },
-                                    React.createElement(CaseDetailsTabs, { basePath: url, caseNumber: caseNumber, routeProps: props.routeProps, tabdRef: caseDetailsTabsRef }))))),
-                        React.createElement(HostnameAwarenessModal, null))),
+                                    React.createElement(CaseDetailsTabs, { basePath: url, caseNumber: caseNumber, routeProps: props.routeProps, tabdRef: caseDetailsTabsRef }))))))),
                 React.createElement(CaseDetailsAside, { caseNumber: caseNumber }),
-                React.createElement(CaseDetailsModals, { caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport, loggedInUserRights: loggedInUserRights })))))));
+                React.createElement(CaseDetailsModals, { caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport, loggedInUserRights: loggedInUserRights }))))),
+        React.createElement(HostnameAwarenessModal, null)));
 }

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

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

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,eAiW7C"}
+{"version":3,"file":"CaseDetailsAside.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsAside.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAYvE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAMD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,qBAmX7C"}

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, Checkbox, Popover, PopoverPosition, Switch, Tooltip } from '@patternfly/react-core';
+import { Button, Checkbox, Icon, Popover, PopoverPosition, Switch, Tooltip } from '@patternfly/react-core';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/js/icons/angle-double-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-double-right-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
@@ -135,6 +135,7 @@ export function CaseDetailsAside(props) {
     const onDefaultCheckboxChange = (e) => __awaiter(this, void 0, void 0, function* () {
         try {
             if (viewAsInternalPref !== undefined) {
+                // @ts-ignore
                 yield updateOriginalCaseView(+!viewAsInternalPref);
                 setIsDefaultBoxChecked(!isDefaultBoxChecked);
             }
@@ -169,37 +170,42 @@ export function CaseDetailsAside(props) {
     // To check if the user is ESS Customer and Product has ESS Support
     const isESSCustomer = isSpecialSupportOfferingEnabled((_b = allProducts.data) === null || _b === void 0 ? void 0 : _b.productsResult, selectedProduct);
     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' : ''}` },
-            React.createElement(Button, { variant: "link", isInline: true, title: t('Collapse sidebar') },
-                React.createElement("span", null,
+        React.createElement("pfe-collapse-toggle", { "aria-label": `${isSideBarExpanded ? t('Collapse sidebar') : t('Expand sidebar')}`, "aria-controls": "case-details-aside-content", onClick: onToggleAside }, isSideBarExpanded ? (React.createElement("div", { className: `sidebar-header ${isExportingPDF ? 'hide-in-pdf' : ''}` },
+            React.createElement("div", { className: "case-detail-collapse-panel" },
+                React.createElement("p", { className: "case-detail-collapse-label" },
                     React.createElement(Trans, null, "Collapse")),
-                React.createElement(AngleDoubleRightIcon, { className: "pf-u-ml-auto", size: "md" })))) : (React.createElement("div", { className: "pf-u-display-flex pf-u-flex-direction-column sidebar-section-collapsed" },
+                React.createElement(Icon, { className: "pf-v5-u-ml-auto", size: "md" },
+                    React.createElement(AngleDoubleRightIcon, null))))) : (React.createElement("div", { className: "pf-v5-u-display-flex pf-v5-u-flex-direction-column sidebar-section-collapsed" },
             React.createElement(Tooltip, { content: t('Expand sidebar'), position: "left" },
-                React.createElement(Button, { variant: "link" },
-                    React.createElement(AngleDoubleLeftIcon, { size: "md" }))),
+                React.createElement("div", { className: "case-detail-collapse-panel" },
+                    React.createElement(Icon, { size: "md" },
+                        React.createElement(AngleDoubleLeftIcon, null)))),
             canSeeToggleCustomerView && (React.createElement(Tooltip, { content: viewAsCustomer ? t('External view') : t('Internal view'), position: "left" },
-                React.createElement(Button, { variant: "link", onClick: () => setSectionToScollRef(toggleCustomerViewRef), className: "sidebar-section-toggle-btn" },
-                    React.createElement(LockIcon, { size: "md", className: viewAsCustomer ? 'blueLock' : 'greyLock' })))),
+                React.createElement(Button, { variant: "link", onClick: () => setSectionToScollRef(toggleCustomerViewRef), className: "sidebar-section-toggle-btn", "aria-label": viewAsCustomer ? t('External view') : t('Internal view') },
+                    React.createElement(Icon, { size: "md", className: viewAsCustomer ? 'blueLock' : 'greyLock' },
+                        React.createElement(LockIcon, null))))),
             !isLoadingRecommendations && allDocs.length > 0 && (React.createElement(Tooltip, { content: t('Top recommendations'), position: "left" },
-                React.createElement(Button, { variant: "link", onClick: () => setSectionToScollRef(topSolutionsRef), className: "sidebar-section-toggle-btn" },
-                    React.createElement(ListIcon, { size: "md" })))),
+                React.createElement(Button, { variant: "link", onClick: () => setSectionToScollRef(topSolutionsRef), className: "sidebar-section-toggle-btn", "aria-label": t('Top recommendations') },
+                    React.createElement(Icon, { size: "md" },
+                        React.createElement(ListIcon, null))))),
             !caseEscalations.isFetching && (canCreateICE || (canCreateRME && isCreateRMEVisible)) && (React.createElement(Tooltip, { content: t('Request an escalation'), position: "left" },
-                React.createElement(Button, { variant: "link", className: "sidebar-section-toggle-btn", onClick: () => setSectionToScollRef(createEscalationRef) },
-                    React.createElement(TrendUpIcon, { size: "md" }))))))),
+                React.createElement(Button, { variant: "link", className: "sidebar-section-toggle-btn", onClick: () => setSectionToScollRef(createEscalationRef), "aria-label": t('Request an escalation') },
+                    React.createElement(Icon, { size: "md" },
+                        React.createElement(TrendUpIcon, null)))))))),
         React.createElement("pfe-collapse-panel", { className: "sidebar-content", "pfe-animation": "false", id: "case-details-aside-content", ref: caseDetailsAsidePanelRef },
             React.createElement("div", { className: "grid-aside-content" },
                 React.createElement("div", null,
-                    canSeeToggleCustomerView && (React.createElement("div", { className: "pf-u-display-flex customer-view-toggle", ref: toggleCustomerViewRef },
+                    canSeeToggleCustomerView && (React.createElement("div", { className: "pf-v5-u-display-flex customer-view-toggle", ref: toggleCustomerViewRef },
                         React.createElement("span", { className: "customer-view-switch-label" },
                             preferredOrDefaultCaseView() ? t('Customer view') : t('Internal view'),
                             React.createElement(Popover, { "aria-label": "Preferred-default-case-view-popover", position: PopoverPosition.top, bodyContent: React.createElement("p", { className: 'pref-case-popover-text' },
                                     React.createElement(Trans, null, renderCasePrefPopoverText())), showClose: false },
-                                React.createElement(InfoCircleIcon, { "aria-label": "Preferred-case-view-info-icon", className: "pf-u-ml-sm" }))),
+                                React.createElement(InfoCircleIcon, { "aria-label": "Preferred-case-view-info-icon", className: "pf-v5-u-ml-sm" }))),
                         React.createElement(Switch, { title: preferredOrDefaultCaseView() ? t('Customer view') : t('Internal view'), "data-tracking-id": preferredOrDefaultCaseView()
                                 ? 'disable-view-as-customer'
                                 : 'enable-view-as-customer', "aria-label": preferredOrDefaultCaseView()
                                 ? 'disable view as customer'
-                                : 'enable view as customer', id: "customer-view-switch", className: "pf-u-ml-auto", isChecked: preferredOrDefaultCaseView(), onChange: onCaseSwitchChange }))),
+                                : 'enable view as customer', id: "customer-view-switch", className: "pf-v5-u-ml-auto", isChecked: preferredOrDefaultCaseView(), onChange: onCaseSwitchChange }))),
                     canSeeToggleCustomerView && (React.createElement("div", null,
                         React.createElement(Checkbox, { label: t('Set to default'), isChecked: isDefaultBoxChecked, onChange: onDefaultCheckboxChange, id: "set-default-view-checkbox", name: "default-view-checkbox", isDisabled: isDefaultBoxChecked, className: 'defaultViewCheckbox' })))),
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading top solutions') } },

package/lib/esm/components/CaseEditView/CaseDetailsErrorMessage.d.ts

@@ -1,4 +1,5 @@
 import { IAPIError } from '@rh-support/types/shared';
+import React from 'react';
 interface IProps {
     isError: boolean;
     errorDetails: IAPIError;
@@ -6,6 +7,6 @@ interface IProps {
     caseNumber: string;
     isInlineError?: boolean;
 }
-export declare function CaseDetailsErrorMessage(props: IProps): JSX.Element;
+export declare function CaseDetailsErrorMessage(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseDetailsErrorMessage.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsErrorMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsErrorMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAKrD,UAAU,MAAM;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,SAAS,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAID,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,eAqEpD"}
+{"version":3,"file":"CaseDetailsErrorMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsErrorMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,UAAU,MAAM;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,SAAS,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAID,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,qBAqEpD"}

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

@@ -46,7 +46,7 @@ export function CaseDetailsErrorMessage(props) {
             '404': { message: errorMessage404 },
         });
     };
-    return (React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mb-lg", show: true, 
+    return (React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mb-lg", show: true, 
         // Here customizing title of alert based on case group error.
         title: errorMessageTitle(errorDetails, Object.assign({}, (isCaseGroupError && {
             '403': { title: invalidCaseGroupErrorTitle },

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

@@ -15,7 +15,7 @@ var ModalNames;
 })(ModalNames || (ModalNames = {}));
 export default function CaseDetailsModals(props) {
     const queryParams = getUrlParsedParams(useLocation().search);
-    const modalName = queryParams ? queryParams['showModal'] : '';
+    const modalName = (queryParams ? queryParams['showModal'] : '');
     const caseDispatch = useCaseDispatch();
     const history = useHistory();
     const { t } = useTranslation();

package/lib/esm/components/CaseEditView/CaseDetailsTabs.d.ts

@@ -6,6 +6,6 @@ interface IProps {
     basePath: string;
     tabdRef: React.MutableRefObject<HTMLDivElement>;
 }
-export declare function CaseDetailsTabs(props: IProps): JSX.Element;
+export declare function CaseDetailsTabs(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseDetailsTabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAwBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,eA+M5C"}
+{"version":3,"file":"CaseDetailsTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseEditView/CaseDetailsTabs.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAyBlE,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,mBAAmB,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACnD;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiO5C"}

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

@@ -11,7 +11,8 @@ import { useCaseSelector } from '../../context/CaseContext';
 import { useCaseDetailsPageStateContext } from '../../context/CaseDetailsPageContext';
 import { PDFContext } from './PDFContainer';
 import CaseDetailsManagement from './Tabs/CaseDetails/CaseDetailsManagement';
-const CaseBugzilla = React.lazy(() => import(/* webpackChunkName: 'CaseBugzilla' */ './Tabs/CaseBugzilla/CaseBugzilla'));
+import CaseHistory from './Tabs/CaseHistory/CaseHistory';
+const RelatedTasks = React.lazy(() => import(/* webpackChunkName: 'CaseBugzilla' */ './Tabs/RelatedTasks/RelatedTasks'));
 const CaseActionPlan = React.lazy(() => import(/* webpackChunkName: 'CaseActionPlan' */ './Tabs/CaseActionPlan/CaseActionPlan'));
 const CasePrivateNotes = React.lazy(() => import(/* webpackChunkName: 'CasePrivateNotes' */ './Tabs/CasePrivateNotes/CasePrivateNotes'));
 const CaseDiscussion = React.lazy(() => import(/* webpackChunkName: 'CaseDiscussion' */ './Tabs/CaseDiscussion/CaseDiscussion'));
@@ -19,7 +20,7 @@ const RMEEscalationList = React.lazy(() => import(/* webpackChunkName: 'RMEEscal
 export function CaseDetailsTabs(props) {
     const { caseNumber } = props;
     const { activeTab } = useParams();
-    const { globalMetadataState: { loggedInUserRights }, } = useContext(GlobalMetadataStateContext);
+    const { globalMetadataState: { loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const { accountNumber, chats, comments, status } = useCaseSelector((state) => ({
         accountNumber: state.caseDetails.accountNumberRef,
         chats: state.caseDetails.chats,
@@ -30,16 +31,22 @@ export function CaseDetailsTabs(props) {
     const [activeTabKey, setActiveTabKey] = useState(0);
     const { caseDetailsPageState: { caseEscalations }, } = useCaseDetailsPageStateContext();
     const canSeePrivateNotes = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_PRIVATE_NOTES_EDIT);
-    const canSeeBugZillas = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_BUGZILLAS);
+    // const canSeeBugZillas = ability.can(
+    //     resourceActions.PATCH,
+    //     resources.CASE_DETAILS,
+    //     CaseDetailsFields.CASE_DETAILS_BUGZILLAS
+    // );
     const { isExportingPDF, pdfOption } = useContext(PDFContext);
     const canSeeRMEs = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_RMES);
     const [selectedTab, setSelectedTab] = useState(CaseDetailsTabsEnum.DISCUSSION);
     const discussionTabRef = useRef(null);
-    const bugZillaTabRef = useRef(null);
+    // const bugZillaTabRef: React.MutableRefObject<HTMLDivElement> = useRef(null);
     const managementTabRef = useRef(null);
     const privateNotesTabRef = useRef(null);
     const actionPlanTabRef = useRef(null);
     const escalationTabRef = useRef(null);
+    const relatedTasksRef = useRef(null);
+    const caseHistoryTabRef = useRef(null);
     const tabsToRender = [];
     const handleTabClick = (event, tabIndex) => {
         setActiveTabKey(tabIndex);
@@ -61,14 +68,14 @@ export function CaseDetailsTabs(props) {
         ref: managementTabRef,
         component: (React.createElement(CaseDetailsManagement, { caseNumber: caseNumber, routeProps: props.routeProps, tabRef: managementTabRef })),
     });
-    canSeeBugZillas &&
+    loggedInUserRights.data.isInternal() &&
         tabsToRender.push({
-            'data-tracking-id': 'case-details-bugzilla-tab',
-            key: 'bugzillas',
-            ref: bugZillaTabRef,
-            routePath: 'bugzilla',
-            title: CaseDetailsTabsEnum.BUGZILLA,
-            component: React.createElement(CaseBugzilla, null),
+            'data-tracking-id': 'case-details-related-tasks-tab',
+            key: 'relatedTasks',
+            ref: relatedTasksRef,
+            routePath: 'related-tasks',
+            title: CaseDetailsTabsEnum.RELATED_TASKS,
+            component: React.createElement(RelatedTasks, null),
         });
     tabsToRender.push({
         'data-tracking-id': 'case-details-actionplan-tab',
@@ -97,6 +104,15 @@ export function CaseDetailsTabs(props) {
             routePath: 'escalation',
             component: (React.createElement(RMEEscalationList, { escalations: caseEscalations.data, caseNumber: caseNumber, caseStatus: status, accountNumber: loggedInUserRights.data.getAccountNumber(), isInternal: loggedInUserRights.data.isInternal() })),
         });
+    !loggedInUsersAccount.data.secureSupport &&
+        tabsToRender.push({
+            'data-tracking-id': 'case-history-tab',
+            title: CaseDetailsTabsEnum.HISTORY,
+            key: 'history',
+            routePath: 'history',
+            ref: caseHistoryTabRef,
+            component: React.createElement(CaseHistory, { caseNumber: caseNumber }),
+        });
     const getActiveTabKey = () => {
         if (!activeTab)
             return activeTabKey;
@@ -104,24 +120,28 @@ export function CaseDetailsTabs(props) {
         return tabIndex > -1 ? tabIndex : activeTabKey;
     };
     const isTabVisibleInPdfExport = (tab) => tab.title === CaseDetailsTabsEnum.DISCUSSION && pdfOption === 'Reduced' ? false : true;
-    return (React.createElement("div", { className: "case-details-tabs", ref: props.tabdRef },
-        React.createElement(Tabs, { className: isExportingPDF ? 'hide-in-pdf' : '', activeKey: getActiveTabKey(), component: TabsComponent.nav, onSelect: handleTabClick, role: "region", "aria-label": t('Case details tabs') }, tabsToRender.map((tab, index) => (React.createElement(Tab, { eventKey: index, tabContentRef: tab.ref, tabContentId: tab.key, key: tab.title, href: `#${props.basePath}/${tab.routePath}`, "data-tracking-id": tab['data-tracking-id'], title: React.createElement(TabTitleText, null,
+    return (React.createElement("div", { className: "case-details-tabs", role: "region", ref: props.tabdRef },
+        React.createElement(Tabs, { className: isExportingPDF ? 'hide-in-pdf' : '', activeKey: getActiveTabKey(), component: TabsComponent.nav, onSelect: handleTabClick, "aria-label": t('Case details tabs') }, tabsToRender.map((tab, index) => (React.createElement(Tab, { eventKey: index, tabContentRef: tab.ref, tabContentId: `pf-tab-${index}-${tab.title.split(' ')[0]}-tabpanel`, key: tab.title, href: `#${props.basePath}/${tab.routePath}`, "data-tracking-id": tab['data-tracking-id'], title: React.createElement(TabTitleText, null,
                 React.createElement(Trans, null, tab.title)) })))),
-        React.createElement("div", { className: "case-details-tabs-content pf-u-pt-xl" }, tabsToRender.map((tab, index) => {
-            return index === getActiveTabKey() && !isExportingPDF ? (React.createElement(TabContent, { eventKey: index, key: tab.key, id: tab.key, ref: tab.ref, "aria-label": tab.title, hidden: isExportingPDF ? !isTabVisibleInPdfExport(tab) : index !== getActiveTabKey() },
-                React.createElement(ErrorBoundary, { errorMsgInfo: {
-                        message: t(`There was an error loading case ${tab.key}`),
-                    } },
-                    React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
-                        React.createElement(TextContent, { className: "show-in-pdf pf-u-mt-md" },
-                            React.createElement(Text, { component: TextVariants.h2 }, tab.title)),
-                        tab.component)))) : isExportingPDF ? (React.createElement(TabContent, { eventKey: index, key: tab.key, id: tab.key, ref: tab.ref, "aria-label": tab.title, hidden: isExportingPDF ? !isTabVisibleInPdfExport(tab) : index !== getActiveTabKey() },
+        React.createElement("div", { className: "case-details-tabs-content pf-v5-u-pt-xl" }, tabsToRender.map((tab, index) => {
+            return index === getActiveTabKey() && !isExportingPDF ? (React.createElement(TabContent, { eventKey: index, key: tab.key, id: `pf-tab-${index}-${tab.title.split(' ')[0]}-tabpanel`, ref: tab.ref, "aria-label": tab.title, hidden: isExportingPDF ? !isTabVisibleInPdfExport(tab) : index !== getActiveTabKey() },
                 React.createElement(ErrorBoundary, { errorMsgInfo: {
                         message: t(`There was an error loading case ${tab.key}`),
                     } },
                     React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
-                        React.createElement(TextContent, { className: "show-in-pdf pf-u-mt-md" },
-                            React.createElement(Text, { component: TextVariants.h2 }, tab.title)),
-                        tab.component)))) : (React.createElement(React.Fragment, null));
+                        React.createElement(TextContent, { className: "show-in-pdf pf-v5-u-mt-md" },
+                            React.createElement(Text, { component: TextVariants.h2 },
+                                React.createElement(Trans, null, tab.title))),
+                        tab.component)))) : isExportingPDF && isTabVisibleInPdfExport(tab) ? (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "page-break" }),
+                React.createElement(TabContent, { eventKey: index, key: tab.key, id: `pf-tab-${index}-${tab.title.split(' ')[0]}-tabpanel`, ref: tab.ref, "aria-label": tab.title },
+                    React.createElement(ErrorBoundary, { errorMsgInfo: {
+                            message: t(`There was an error loading case ${tab.key}`),
+                        } },
+                        React.createElement(Suspense, { fallback: React.createElement(LoadingIndicator, { size: "sm" }) },
+                            React.createElement(TextContent, { className: "show-in-pdf pf-v5-u-mt-md" },
+                                React.createElement(Text, { component: TextVariants.h2 },
+                                    React.createElement(Trans, null, tab.title))),
+                            tab.component))))) : (React.createElement(React.Fragment, null));
         }))));
 }

package/lib/esm/components/CaseEditView/CaseOverview/CaseOwnerInfo.d.ts

@@ -1,9 +1,10 @@
 import { ICase } from '@cee-eng/hydrajs/@types/models/case';
 import { IApiResponseDetails } from '@rh-support/types/shared';
+import React from 'react';
 interface IProps {
     owner: string;
     caseDetailsHydra: IApiResponseDetails<Partial<ICase>>;
 }
-export default function CaseOwnerInfo(props: IProps): JSX.Element;
+export default function CaseOwnerInfo(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CaseOwnerInfo.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CaseOwnerInfo.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/CaseOwnerInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAI5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAM/D,UAAU,MAAM;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;CACzD;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,MAAM,eAiElD"}
+{"version":3,"file":"CaseOwnerInfo.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/CaseOwnerInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAC;AAI5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,UAAU,MAAM;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;CACzD;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,MAAM,qBAiElD"}

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

@@ -46,5 +46,5 @@ export default function CaseOwnerInfo(props) {
                             React.createElement(Trans, null, "Office location")),
                         ": ",
                         props.caseDetailsHydra.data.caseOwner.officeLocation)) },
-                React.createElement(QuestionCircleIcon, { className: "pf-u-ml-xs icon-size", "aria-label": "Support Level Info" })))))));
+                React.createElement(QuestionCircleIcon, { className: "pf-v5-u-ml-xs icon-size", "aria-label": "Support Level Info" })))))));
 }

package/lib/esm/components/CaseEditView/CaseOverview/CaseStatus.d.ts

@@ -1,4 +1,5 @@
 import { IDClassNameProps } from '@rh-support/types/shared';
+import React from 'react';
 interface IProps extends IDClassNameProps {
     selectedStatus: string;
     onStatusChange: (val: string) => void | Promise<void>;
@@ -7,7 +8,7 @@ interface IProps extends IDClassNameProps {
     isFetching: boolean;
     hasError: boolean;
 }
-declare function CaseStatus(props: IProps): JSX.Element;
+declare function CaseStatus(props: IProps): React.JSX.Element;
 declare namespace CaseStatus {
     var defaultProps: Partial<IProps>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseStatus.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/CaseStatus.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAUrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,eAoDhC;kBApDQ,UAAU;;;AAuDnB,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CaseStatus.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/CaseStatus.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAGrE,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAOD,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,qBAoDhC;kBApDQ,UAAU;;;AAuDnB,eAAe,UAAU,CAAC"}

package/lib/esm/components/CaseEditView/CaseOverview/CaseType.d.ts

@@ -1,4 +1,5 @@
 import { IDClassNameProps } from '@rh-support/types/shared';
+import React from 'react';
 interface IProps extends IDClassNameProps {
     selectedType: string;
     onTypeChange: (val: string) => void | Promise<void>;
@@ -7,7 +8,7 @@ interface IProps extends IDClassNameProps {
     isFetching: boolean;
     hasError: boolean;
 }
-declare function CaseType(props: IProps): JSX.Element;
+declare function CaseType(props: IProps): React.JSX.Element;
 declare namespace CaseType {
     var defaultProps: Partial<IProps>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CaseType.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/CaseType.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AAUrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAOD,iBAAS,QAAQ,CAAC,KAAK,EAAE,MAAM,eAsD9B;kBAtDQ,QAAQ;;;AAyDjB,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CaseType.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/CaseType.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAoC,MAAM,OAAO,CAAC;AAOzD,UAAU,MAAO,SAAQ,gBAAgB;IACrC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAOD,iBAAS,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAoF9B;kBApFQ,QAAQ;;;AAuFjB,eAAe,QAAQ,CAAC"}

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

@@ -7,8 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Dropdown, ValueChangedIcon } from '@rh-support/components';
-import { toOldCaseTypeSwitcher, toOption, toOptions } from '@rh-support/utils';
+import { Flex, FlexItem, MenuToggle, Select, SelectList, SelectOption, Spinner, } from '@patternfly/react-core';
+import { ValueChangedIcon } from '@rh-support/components';
+import { toOldCaseTypeSwitcher } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -23,16 +24,28 @@ function CaseType(props) {
     const { t } = useTranslation();
     const [isCaseTypeInValid, setIsCaseTypeInValid] = useState(false);
     const { isExportingPDF } = useContext(PDFContext);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(props.selectedType);
+    const onToggleClick = () => {
+        setIsOpen(!isOpen);
+    };
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, isDisabled: props.hasError || props.isDisabled || props.isFetching, isFullWidth: true, status: isCaseTypeInValid ? 'danger' : undefined, className: "case-type-selector-text" },
+        React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+            React.createElement(FlexItem, null,
+                " ",
+                selected || t(`Select a category`)),
+            React.createElement(FlexItem, null, props.isFetching ? React.createElement(Spinner, { size: "md" }) : ''))));
     const validateCaseType = (selectedItem) => {
         setIsCaseTypeInValid(isEmpty(selectedItem));
     };
     const onCaseTypeChange = (option) => __awaiter(this, void 0, void 0, function* () {
-        const switchedCaseType = toOldCaseTypeSwitcher(option.value);
+        const switchedCaseType = toOldCaseTypeSwitcher(option);
         if (switchedCaseType === props.selectedType) {
             return;
         }
         yield props.onTypeChange(switchedCaseType);
         setLocalTypeChange(true);
+        setSelected(option);
         validateCaseType(option);
     });
     // value changed logic to show a non local type change
@@ -43,7 +56,8 @@ function CaseType(props) {
             React.createElement(Trans, null, "Support type"),
             React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localTypeChange, value: props.selectedType, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.type) }),
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*")),
-        React.createElement(Dropdown, { name: "get-support-type", placeholder: t(`Select`), title: t(`Select a category`), list: toOptions(props.allTypes || []), selectedItem: toOption(props.selectedType), disabled: props.hasError || props.isDisabled, isLoadingList: props.isFetching, isInValid: isCaseTypeInValid, required: true, onChange: onCaseTypeChange, onOuterClick: validateCaseType, "data-tracking-id": "case-details-type-selector" })));
+        React.createElement(Select, { "data-tracking-id": "case-details-type-selector", isOpen: isOpen, selected: selected, onSelect: (event, val) => onCaseTypeChange(val), onOpenChange: (isOpen) => setIsOpen(isOpen), toggle: toggle, popperProps: { direction: 'down', enableFlip: false }, shouldFocusFirstItemOnOpen: false, shouldFocusToggleOnSelect: true },
+            React.createElement(SelectList, null, (props.allTypes || []).map((option) => (React.createElement(SelectOption, { value: option, key: option }, option)))))));
 }
 CaseType.defaultProps = defaultProps;
 export default CaseType;

package/lib/esm/components/CaseEditView/CaseOverview/DateTime.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface IProps {
     dateTimeString: string;
     showToolTip?: boolean;
@@ -5,6 +6,6 @@ interface IProps {
     dateTimeFormat?: Intl.DateTimeFormatOptions;
     locale?: string;
 }
-export default function DateTime({ showToolTip, toolTipTimeFormat, dateTimeFormat, dateTimeString, locale, }: IProps): JSX.Element;
+export default function DateTime({ showToolTip, toolTipTimeFormat, dateTimeFormat, dateTimeString, locale, }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=DateTime.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/DateTime.tsx"],"names":[],"mappings":"AAOA,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC/C,cAAc,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,WAAkB,EAClB,iBAA4C,EAC5C,cAAsC,EACtC,cAAmB,EACnB,MAAgB,GACnB,EAAE,MAAM,eAqBR"}
+{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/DateTime.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,MAAM;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC/C,cAAc,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,WAAkB,EAClB,iBAA4C,EAC5C,cAAsC,EACtC,cAAmB,EACnB,MAAgB,GACnB,EAAE,MAAM,qBAqBR"}

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

@@ -19,5 +19,5 @@ export default function DateTime({ showToolTip = true, toolTipTimeFormat = defau
     return (React.createElement(React.Fragment, null,
         React.createElement("time", { dateTime: dateTimeString }, formatDateTime(dateTimeString, locale, dateTimeFormat)),
         showToolTip && (React.createElement(Tooltip, { content: React.createElement("time", { dateTime: dateTimeString }, formatDateTime(dateTimeString, locale, toolTipTimeFormat)) },
-            React.createElement(InfoIcon, { className: `pf-u-ml-sm ${isExportingPDF ? 'hide-in-pdf' : ''}` })))));
+            React.createElement(InfoIcon, { className: `pf-v5-u-ml-sm ${isExportingPDF ? 'hide-in-pdf' : ''}` })))));
 }

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

@@ -3,6 +3,6 @@ interface IProps {
     caseNumber: string;
     tabsRef: React.MutableRefObject<HTMLDivElement>;
 }
-export default function CaseOverview(props: IProps): JSX.Element;
+export default function CaseOverview(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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":"AA0BA,OAAO,KAA8D,MAAM,OAAO,CAAC;AA8BnF,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,eA+ejD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseOverview/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAkD,MAAM,OAAO,CAAC;AA4BvE,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,qBA4fjD"}