@rh-support/troubleshoot 2.4.10-beta.8 → 2.5.1

package/lib/esm/components/Cve/CveItem.js

@@ -0,0 +1,139 @@
+import { pcm } from '@cee-eng/hydrajs';
+import { Button, Flex, FlexItem, Label, LabelGroup, Text, TextVariants } from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { format, isValid, parseISO } from 'date-fns';
+import DOMPurify from 'dompurify';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import map from 'lodash/map';
+import slice from 'lodash/slice';
+import React, { useContext, useEffect } from 'react';
+import { Trans } from 'react-i18next';
+import { useCaseSelector } from '../../context/CaseContext';
+import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { createOrUpdateSessionResources, getSessResFromCve, getSessResFromErrata, } from '../../reducers/SessionRestoreReducer';
+import RouteUtils from '../../utils/routeUtils';
+const { SessionResourceVisibility, SessionResourceWorkflowComponent, SessionResourceSource } = pcm.preCase.session;
+const sanitize = (html) => ({ __html: DOMPurify.sanitize(html) });
+function formatDate(dateString) {
+    const date = parseISO(dateString);
+    if (isValid(date)) {
+        return format(date, 'MMM dd, yyyy');
+    }
+    else {
+        return dateString;
+    }
+}
+export const CveItem = (props) => {
+    var _a, _b;
+    const { cve, isExpanded, index } = props;
+    const { product, version, summary, issue, isCveModalOpened } = useCaseSelector((state) => ({
+        product: state.caseDetails.product,
+        version: state.caseDetails.version,
+        summary: state.caseDetails.summary,
+        issue: state.caseDetails.issue,
+        isCveModalOpened: state.isCveModalOpened,
+    }), isEqual);
+    const sessionRestoreDispatch = useContext(SessionRestoreDispatchContext);
+    const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = useContext(SessionRestoreStateContext);
+    const workflowSource = `${cve.title}-${isCveModalOpened ? 'model' : 'aside'}`;
+    useEffect(() => {
+        if (isExpanded) {
+            onPresentOrVisitedCveErrataData();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isExpanded]);
+    const updateSessionDb = (resources) => {
+        const payload = {
+            product: product,
+            version: version,
+            summary: summary,
+            description: issue,
+        };
+        createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.DRUPAL, resources, JSON.stringify(payload), workflowSource);
+    };
+    const onClickErrataLink = (errataDetails, index = 0) => {
+        updateSessionDb([
+            getSessResFromErrata(errataDetails, SessionResourceVisibility.VISITED, index + 1, isCveModalOpened
+                ? SessionResourceWorkflowComponent.CVE_MODEl
+                : SessionResourceWorkflowComponent.CVE_ASIDE),
+        ]);
+    };
+    const onPresentOrVisitedCveErrataData = (isVisited = false) => {
+        updateSessionDb(getSessResFromCve(cve, isVisited ? SessionResourceVisibility.VISITED : SessionResourceVisibility.PRESENTED, index + 1, isCveModalOpened
+            ? SessionResourceWorkflowComponent.CVE_MODEl
+            : SessionResourceWorkflowComponent.CVE_ASIDE, isVisited ? true : false, isCveModalOpened ? 3 : 2));
+    };
+    const renderDate = () => (cve === null || cve === void 0 ? void 0 : cve.publicDate) && (React.createElement("div", { className: "pf-v5-u-disabled-color-100" },
+        React.createElement(Trans, null, "Public on"),
+        " - ",
+        formatDate(cve.publicDate)));
+    const renderLabels = () => (React.createElement(LabelGroup, { defaultIsOpen: true, numLabels: 10 },
+        React.createElement(Label, { color: "green", isCompact: true, icon: React.createElement(StarIcon, null) },
+            React.createElement(Trans, null, "Exact match")),
+        !isEmpty(cve === null || cve === void 0 ? void 0 : cve.severity) && (React.createElement(Label, { color: cve.severity === 'Critical'
+                ? 'red'
+                : cve.severity === 'Important'
+                    ? 'orange'
+                    : cve.severity === 'Moderate'
+                        ? 'gold'
+                        : undefined, isCompact: true }, cve.severity)),
+        !isEmpty(cve.errataData) && (React.createElement(Label, { color: "blue", isCompact: true },
+            React.createElement(Trans, null, "Fixed"))),
+        !isEmpty(cve.mitigation) && (React.createElement(Label, { isCompact: true },
+            React.createElement(Trans, { color: "grey" }, "Mitigation available")))));
+    const displayErrataTable = () => {
+        if (isEmpty(cve === null || cve === void 0 ? void 0 : cve.errataData)) {
+            return null;
+        }
+        return (React.createElement(Table, { "aria-label": "Errata table", variant: 'compact', className: "pf-v5-u-mt-md", style: { borderTop: 'var(--pf-v5-global--BorderColor--light-100) solid 1px' } },
+            React.createElement(Thead, null,
+                React.createElement(Tr, null,
+                    React.createElement(Th, null,
+                        React.createElement(Trans, null, "Errata link")),
+                    React.createElement(Th, { width: 30 },
+                        React.createElement(Trans, null, "Component")),
+                    React.createElement(Th, null,
+                        React.createElement(Trans, null, "Status")))),
+            React.createElement(Tbody, null, map(slice(cve.errataData, 0, isCveModalOpened ? 3 : 2), (errata, index) => {
+                var _a, _b, _c;
+                return (React.createElement(Tr, Object.assign({ key: (_a = errata === null || errata === void 0 ? void 0 : errata.advisory) === null || _a === void 0 ? void 0 : _a.name }, (index % 2 === 0 && { isStriped: true })),
+                    React.createElement(Td, null,
+                        React.createElement(Text, { component: TextVariants.a, href: (_b = errata === null || errata === void 0 ? void 0 : errata.advisory) === null || _b === void 0 ? void 0 : _b.url, target: "_blank", ouiaSafe: true, "data-tracking-id": "errata-link", onClick: () => onClickErrataLink(errata, index) }, (_c = errata === null || errata === void 0 ? void 0 : errata.advisory) === null || _c === void 0 ? void 0 :
+                            _c.name,
+                            React.createElement(ExternalLinkAltIcon, { className: "pf-v5-u-ml-sm" }))),
+                    React.createElement(Td, { modifier: "truncate" }, errata === null || errata === void 0 ? void 0 : errata.package),
+                    React.createElement(Td, null,
+                        React.createElement(Trans, null, errata === null || errata === void 0 ? void 0 : errata.state))));
+            }))));
+    };
+    const displayDescription = () => {
+        var _a;
+        if (isEmpty(cve === null || cve === void 0 ? void 0 : cve.mitigation) && ((_a = cve === null || cve === void 0 ? void 0 : cve.errataData) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            return (React.createElement("p", { className: "pf-v5-u-mt-md" },
+                React.createElement(Trans, null, "for this CVE, mitigation and fix is not available, for more details, go to the CVE page.")));
+        }
+        const MAX_DESCRIPTION_LENGTH = isCveModalOpened ? 300 : 120;
+        const description = !isEmpty(cve === null || cve === void 0 ? void 0 : cve.mitigation) ? cve === null || cve === void 0 ? void 0 : cve.mitigation : cve === null || cve === void 0 ? void 0 : cve.details;
+        if (!description)
+            return '';
+        const trimmedDescription = description.length <= MAX_DESCRIPTION_LENGTH
+            ? description
+            : description.slice(0, MAX_DESCRIPTION_LENGTH).trim() + '...';
+        return React.createElement("p", { className: "pf-v5-u-mt-md pf-v5-u-color-300", dangerouslySetInnerHTML: sanitize(trimmedDescription) });
+    };
+    const onClickGoToCveButtonPage = () => {
+        onPresentOrVisitedCveErrataData(true);
+    };
+    return (React.createElement("div", null,
+        React.createElement(Flex, null,
+            React.createElement(FlexItem, { spacer: { default: 'spacerXs' } }, renderLabels()),
+            React.createElement(FlexItem, null, renderDate())),
+        displayErrataTable(),
+        displayDescription(),
+        (cve === null || cve === void 0 ? void 0 : cve.cveLink) && (React.createElement(Button, { variant: "primary", className: isCveModalOpened ? 'pf-v5-u-my-md' : '', "data-tracking-id": "go-to-CVE-button", component: "a", href: `${cve.cveLink}?${RouteUtils.getSEResourceQueryParams(activeSessionId, (_b = (_a = sessionResourceTracking[workflowSource]) === null || _a === void 0 ? void 0 : _a.resourceOriginId) !== null && _b !== void 0 ? _b : '', SessionResourceSource.DRUPAL)}`, target: "_blank", rel: "noopener noreferrer", onClick: onClickGoToCveButtonPage },
+            React.createElement(Trans, null, "Go to CVE"),
+            React.createElement(ExternalLinkAltIcon, { className: "pf-v5-u-ml-sm" })))));
+};

package/lib/esm/components/Cve/CveModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const CveModal: () => React.JSX.Element;
+//# sourceMappingURL=CveModal.d.ts.map

package/lib/esm/components/Cve/CveModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CveModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Cve/CveModal.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAU1C,eAAO,MAAM,QAAQ,yBAoEpB,CAAC"}

package/lib/esm/components/Cve/CveModal.js

@@ -0,0 +1,44 @@
+import { Badge, Button, Flex, FlexItem, Modal, ModalVariant } from '@patternfly/react-core';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import { getAccessHostname } from '@rh-support/utils';
+import isEqual from 'lodash/isEqual';
+import join from 'lodash/join';
+import map from 'lodash/map';
+import size from 'lodash/size';
+import React, { useContext } from 'react';
+import { Trans } from 'react-i18next';
+import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
+import { RouteContext } from '../../context/RouteContext';
+import { SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { setCaseState } from '../../reducers/CaseReducer';
+import { AppRouteSections } from '../../reducers/RouteConstNTypes';
+import { CvePanel } from './CvePanel';
+export const CveModal = () => {
+    const caseDispatch = useCaseDispatch();
+    const { cveWorkflowRecommendation, isCveModalOpened } = useCaseSelector((state) => ({
+        cveWorkflowRecommendation: state.cveWorkflowRecommendation,
+        isCveModalOpened: state.isCveModalOpened,
+    }), isEqual);
+    const { sessionRestore: { activeSessionId }, } = useContext(SessionRestoreStateContext);
+    const { routeState: { activeSection }, } = useContext(RouteContext);
+    const handleModalToggle = () => {
+        setCaseState(caseDispatch, { isCveModalOpened: !isCveModalOpened });
+    };
+    const handleEscapePress = (event) => {
+        // prevent the default escape key behavior
+        event.preventDefault();
+    };
+    const generateCveCheckerUrl = () => {
+        const cveTitles = join(map(cveWorkflowRecommendation, 'title'), ',');
+        return `https://${getAccessHostname()}/labs/cvechecker/?source=pcm&session=${activeSessionId}&id=${cveTitles}`;
+    };
+    return (React.createElement(Modal, { variant: ModalVariant.medium, title: React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' } },
+            React.createElement(FlexItem, { spacer: { default: 'spacerSm' } }, cveWorkflowRecommendation.length > 1 ? (React.createElement(Trans, null, "Handpicked for these CVEs")) : (React.createElement(Trans, null, "Handpicked for this CVE"))),
+            React.createElement(Badge, { isRead: true }, size(cveWorkflowRecommendation))), isOpen: isCveModalOpened && activeSection === AppRouteSections.SUMMARIZE, onClose: handleModalToggle, titleIconVariant: "info", disableFocusTrap: true, className: "cve-modal-fade-in-effect", onEscapePress: handleEscapePress, actions: [
+            React.createElement(Button, { key: "cve-checker-link", "data-tracking-id": "cve-checker-link", target: "_blank", variant: "secondary", isInline: true, component: "a", href: generateCveCheckerUrl() },
+                React.createElement(Trans, null, "Red Hat CVE Checker"),
+                " ",
+                React.createElement(ExternalLinkAltIcon, { className: "pf-v5-u-ml-sm" })),
+        ] },
+        React.createElement(CvePanel, null)));
+};

package/lib/esm/components/Cve/CvePanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IProps {
+    className?: string;
+}
+export declare const CvePanel: (props: IProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=CvePanel.d.ts.map

package/lib/esm/components/Cve/CvePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CvePanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Cve/CvePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,sBAyCrC,CAAC"}

package/lib/esm/components/Cve/CvePanel.js

@@ -0,0 +1,23 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionToggle } from '@patternfly/react-core';
+import isEqual from 'lodash/isEqual';
+import map from 'lodash/map';
+import slice from 'lodash/slice';
+import React, { useState } from 'react';
+import { useCaseSelector } from '../../context/CaseContext';
+import { CveItem } from './CveItem';
+export const CvePanel = (props) => {
+    var _a;
+    const { cveWorkflowRecommendation } = useCaseSelector((state) => ({
+        cveWorkflowRecommendation: state.cveWorkflowRecommendation,
+    }), isEqual);
+    const [expanded, setExpanded] = useState(((_a = cveWorkflowRecommendation === null || cveWorkflowRecommendation === void 0 ? void 0 : cveWorkflowRecommendation[0]) === null || _a === void 0 ? void 0 : _a.title) || '');
+    const handleToggle = (id) => setExpanded(id === expanded ? '' : id);
+    const renderAccordionItem = (cve, index) => {
+        const isExpanded = expanded === (cve === null || cve === void 0 ? void 0 : cve.title);
+        return (React.createElement(AccordionItem, { key: `cve-item-${index}` },
+            React.createElement(AccordionToggle, { onClick: () => handleToggle(cve.title), isExpanded: isExpanded, id: `cve-toggle-${index}`, "data-tracking-id": "cve-accordion-toggle" }, cve.title),
+            React.createElement(AccordionContent, { id: `cve-content-${index}`, isHidden: !isExpanded },
+                React.createElement(CveItem, { cve: cve, isExpanded: isExpanded, index: index }))));
+    };
+    return (React.createElement(Accordion, { isBordered: true, displaySize: 'default', asDefinitionList: false, className: `${props.className ? props.className : ''}` }, map(slice(cveWorkflowRecommendation, 0, 4), renderAccordionItem)));
+};

package/lib/esm/components/Cve/CveSidebar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const CveSidebar: () => React.JSX.Element;
+//# sourceMappingURL=CveSidebar.d.ts.map

package/lib/esm/components/Cve/CveSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CveSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Cve/CveSidebar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,UAAU,yBA6BtB,CAAC"}

package/lib/esm/components/Cve/CveSidebar.js

@@ -0,0 +1,23 @@
+import { Badge } from '@patternfly/react-core';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import size from 'lodash/size';
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { useCaseSelector } from '../../context/CaseContext';
+import { CvePanel } from './CvePanel';
+export const CveSidebar = () => {
+    const { cveWorkflowRecommendation } = useCaseSelector((state) => ({
+        cveWorkflowRecommendation: state.cveWorkflowRecommendation,
+    }), isEqual);
+    if (isEmpty(cveWorkflowRecommendation)) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "card card-white card-support file-diag pf-v5-u-mb-md" },
+            React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" },
+                React.createElement("span", { className: "pf-v5-u-mr-sm" }, cveWorkflowRecommendation.length > 1 ? (React.createElement(Trans, null, "Handpicked for these CVEs")) : (React.createElement(Trans, null, "Handpicked for this CVE"))),
+                React.createElement(Badge, { isRead: true }, size(cveWorkflowRecommendation))),
+            React.createElement("div", { className: "card-body" },
+                React.createElement(CvePanel, null)))));
+};

package/lib/esm/components/EditDescription/EditDescription.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"EditDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/EditDescription/EditDescription.tsx"],"names":[],"mappings":"AAeA,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;CAC3B;AAUD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eAuEpD"}
+{"version":3,"file":"EditDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/EditDescription/EditDescription.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;CAC3B;AAUD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAgEpD"}

package/lib/esm/components/EditDescription/EditDescription.js

@@ -16,7 +16,6 @@ import React, { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { DESCRIPTION_LENGTH_LIMIT, LargeDescriptionErrorMessage } from '../../reducers/CaseConstNTypes';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 import { PDFContext } from '../CaseEditView/PDFContainer';
 const linkifiedDescription = (text) => {
@@ -36,9 +35,7 @@ export default function EditDescription(props) {
     const [localDescription, setLocalDescription] = useState(description);
     const [isUpdating, setIsUpdating] = useState(false);
     const { isExportingPDF } = useContext(PDFContext);
-    const [isDescriptionTextAreaFocused, setDescriptionTextAreaFocused] = useState(false);
     const onDescriptionSave = () => __awaiter(this, void 0, void 0, function* () {
-        setDescriptionTextAreaFocused(false);
         if (localDescription === description)
             return;
         try {
@@ -59,9 +56,7 @@ export default function EditDescription(props) {
     const onDescriptionChange = (event) => {
         setLocalDescription(event.target.value);
     };
-    const descriptionErrorMessage = t(LargeDescriptionErrorMessage, { limit: DESCRIPTION_LENGTH_LIMIT });
     return (React.createElement(InlineEdit, { labelContent: React.createElement(React.Fragment, null,
             React.createElement(Trans, null, "Description")), loadingIndicator: isUpdating ? React.createElement(LoadingIndicator, { size: "xs" }) : null, labelProps: { htmlFor: 'edit-description' }, content: React.createElement("div", { dangerouslySetInnerHTML: { __html: linkifiedDescription(localDescription) } }), allowInlineEdit: !!props.inlineEditable, saveDisabled: localDescription === description || isUpdating, usePreformattedTag: true, onSave: onDescriptionSave, isExportingPDF: isExportingPDF },
-        React.createElement(TextAreaAutosize, { id: "edit-description", name: "edit-description", className: `form-control${hasLargeCaseDescription ? ' form-invalid' : ''}`, value: localDescription, disabled: isUpdating, onChange: onDescriptionChange, "data-tracking-id": "edit-description" }),
-        React.createElement("p", { className: "form-instructions" }, `${hasLargeCaseDescription && isDescriptionTextAreaFocused ? descriptionErrorMessage : ''}`)));
+        React.createElement(TextAreaAutosize, { id: "edit-description", name: "edit-description", className: `form-control${hasLargeCaseDescription ? ' form-invalid' : ''}`, value: localDescription, disabled: isUpdating, onChange: onDescriptionChange, "data-tracking-id": "edit-description" })));
 }

package/lib/esm/components/IdeaInformation/IdeaInformation.d.ts

@@ -1,2 +1,3 @@
-export default function IdeaInformation(): JSX.Element;
+import React from 'react';
+export default function IdeaInformation(): React.JSX.Element;
 //# sourceMappingURL=IdeaInformation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IdeaInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/IdeaInformation/IdeaInformation.tsx"],"names":[],"mappings":"AAgCA,MAAM,CAAC,OAAO,UAAU,eAAe,gBA+ItC"}
+{"version":3,"file":"IdeaInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/IdeaInformation/IdeaInformation.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAkBrD,MAAM,CAAC,OAAO,UAAU,eAAe,sBAoJtC"}

package/lib/esm/components/IdeaInformation/IdeaInformation.js

@@ -1,4 +1,4 @@
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core';
 import { AlertMessage, AlertType, LoadingIndicator } from '@rh-support/components';
 import { fetchCaseSeverities, fetchCaseTypes, fetchLanguageMetadata, GlobalMetadataDispatchContext, GlobalMetadataStateContext, useGlobalStateContext, } from '@rh-support/react-context';
 import { canManageCase, haventLoadedMetadata, isSpecialSupportOfferingEnabled } from '@rh-support/utils';
@@ -11,7 +11,6 @@ import { setCaseDetails } from '../../reducers/CaseReducer';
 import CaseGroup from '../CaseInformation/CaseGroup';
 import { ContactPhoneNumber } from '../CaseInformation/ContactPhoneNumber';
 import { ContactPhoneNumberAlert } from '../CaseInformation/ContactPhoneNumberAlert';
-import Description from '../CaseInformation/Description';
 import Severity from '../CaseInformation/Severity';
 import SupportLevel from '../CaseInformation/SupportLevel';
 import CaseLanguageSelector from '../CaseManagement/CaseLanguageSelector';
@@ -79,14 +78,14 @@ export default function IdeaInformation() {
     const isESSCustomer = isSpecialSupportOfferingEnabled((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult, product);
     return (React.createElement(React.Fragment, null,
         React.createElement(LoadingIndicator, { show: isMetadataLoading(), size: "lg" }),
-        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-u-mb-md", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError(), isInline: true }),
-        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-u-mb-md", isInline: true },
+        React.createElement(AlertMessage, { variant: AlertType.DANGER, className: "pf-v5-u-mb-md", title: t("Sorry, we're having a problem gathering your information."), show: isMetadataLoadingError(), isInline: true }),
+        React.createElement(AlertMessage, { show: !canManageCase(loggedInUserJwtToken), variant: AlertType.DANGER, className: "pf-v5-u-mb-md", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ManageCaseContactCustomerService" },
                 "You need additional access to manage cases.\u00A0 Please contact",
                 ' ',
                 React.createElement("a", { href: "/support/contact/customerService" }, "Customer Service"),
                 " for assistance.")),
-        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-u-mb-md", isInline: true },
+        React.createElement(AlertMessage, { show: hasInvalidEntitlements, variant: AlertType.DANGER, className: "pf-v5-u-mb-md", isInline: true },
             React.createElement(Trans, { i18nKey: "i18ValidEntitlementContactCustomerService" },
                 "You need a valid entitlement to create a case.\u00A0 Please contact",
                 ' ',
@@ -97,17 +96,19 @@ export default function IdeaInformation() {
             !isMetadataLoadingError() &&
             canManageCase(loggedInUserJwtToken) && (React.createElement(React.Fragment, null,
             React.createElement("form", null,
-                React.createElement(Description, { inlineEditable: false, customTitle: t('Please describe your request') }),
                 React.createElement(KtQuestions, { onlyShowKT4: true }),
                 React.createElement(SupportLevel, null),
-                React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
-                    React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-u-mb-xl" },
+                React.createElement(Grid, { hasGutter: true },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xl" },
                         React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
-                    React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-u-mb-xl" },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xl" },
                         React.createElement(ContactPhoneNumber, null))),
                 React.createElement(ContactPhoneNumberAlert, null),
-                React.createElement(CaseLanguageSelector, { isManageStep: true }),
-                React.createElement(CaseGroup, { init: true }),
+                React.createElement(Grid, { hasGutter: true },
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+                        React.createElement(CaseLanguageSelector, { isManageStep: true })),
+                    React.createElement(GridItem, { span: 12, xl2: 6, className: "pf-v5-u-mb-xs" },
+                        React.createElement(CaseGroup, { init: true }))),
                 React.createElement(CaseContactSelector, null),
                 React.createElement(RHAssociatesSelector, null),
                 React.createElement(OpenReferenceNumber, { inlineEditable: false, hideSaveCancel: true }),

package/lib/esm/components/ImproveCase/FileEARule.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IProps {
     isInline?: boolean;
 }
 export declare function getValidAttachmentRules(rules: any): any[];
-export default function FileEARule(props: IProps): JSX.Element;
+export default function FileEARule(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=FileEARule.d.ts.map

package/lib/esm/components/ImproveCase/FileEARule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileEARule.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/FileEARule.tsx"],"names":[],"mappings":"AAOA,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,KAAA,SAE5C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,eAoB/C"}
+{"version":3,"file":"FileEARule.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/FileEARule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,UAAU,MAAM;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,KAAA,SAE5C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,qBAoB/C"}

package/lib/esm/components/ImproveCase/Hostname.d.ts

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

package/lib/esm/components/ImproveCase/Hostname.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hostname.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/Hostname.tsx"],"names":[],"mappings":"AAUA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,eAkDrC"}
+{"version":3,"file":"Hostname.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/Hostname.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAQ1C,UAAU,MAAM;CAAG;AAEnB,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAyDrC"}

package/lib/esm/components/ImproveCase/Hostname.js

@@ -1,3 +1,4 @@
+import { Button } from '@patternfly/react-core';
 import { AbilityContext, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
 import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -33,8 +34,7 @@ export function Hostname(props) {
         React.createElement("p", { className: "form-instructions" },
             React.createElement(Trans, { i18nKey: 'ChangeHostnamePrefLink' },
                 "Hostname is ",
-                React.createElement("strong", null, "private"),
+                React.createElement("span", { className: "form-instructions-bold" }, "private"),
                 ". Red Hat does not have access to view hostnames unless you",
-                ' ',
-                React.createElement(Link, { to: '/manage/preferences' }, "choose to share")))));
+                React.createElement(Button, { className: "btn-choose-to-share", variant: "link", component: (props) => React.createElement(Link, Object.assign({}, props, { to: '/manage/preferences' })) }, "choose to share")))));
 }

package/lib/esm/components/ImproveCase/KtQuestions.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 interface IProps {
     inlineEditable?: boolean;
     hideSaveCancel?: boolean;
     onlyShowKT4?: boolean;
 }
-declare function KtQuestions(props: IProps): JSX.Element;
+declare function KtQuestions(props: IProps): React.JSX.Element;
 declare namespace KtQuestions {
     var defaultProps: {};
 }

package/lib/esm/components/ImproveCase/KtQuestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KtQuestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/KtQuestions.tsx"],"names":[],"mappings":"AAqBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD,iBAAS,WAAW,CAAC,KAAK,EAAE,MAAM,eAiQjC;kBAjQQ,WAAW;;;AAmQpB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KtQuestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/KtQuestions.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAmB/D,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAGD,iBAAS,WAAW,CAAC,KAAK,EAAE,MAAM,qBA0SjC;kBA1SQ,WAAW;;;AA4SpB,eAAe,WAAW,CAAC"}