@rh-support/troubleshoot 2.2.148 → 2.2.150

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

@@ -1 +1 @@
-{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInformation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAK5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAqE5C"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseInformation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAK5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,UAAU,MAAO,SAAQ,gBAAgB;CAAG;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,qBAkE5C"}

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

@@ -9,19 +9,16 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import { useCaseSelector } from '../../../../context/CaseContext';
 import { KtQuestionConstant } from '../../../../reducers/CaseConstNTypes';
-import { isClusterIdEnabledForProduct } from '../../../../utils/caseOpenshiftClusterIdUtils';
 import EditDescription from '../../../EditDescription/EditDescription';
 import { CaseHostname } from './CaseHostname';
 import { CaseOpenshiftClusterId } from './CaseOpenshiftClusterId/CaseOpenshiftClusterId';
 import ProductVersion from './ProductVersion';
 export function CaseInformation(props) {
-    var _a;
-    const { product, description, caseType } = useCaseSelector((state) => ({
-        product: state.caseDetails.product,
+    const { description, caseType } = useCaseSelector((state) => ({
         description: state.caseDetails.description,
         caseType: state.caseDetails.caseType,
     }), isEqual);
-    const { globalMetadataState: { navBarRef, allProducts }, } = useGlobalStateContext();
+    const { globalMetadataState: { navBarRef }, } = useGlobalStateContext();
     // To replace description KTQ for Idea
     const replaceDescriptionHeading = (description) => {
         let ideaHeading = KtQuestionConstant.ideaIssue;
@@ -37,11 +34,10 @@ export function CaseInformation(props) {
         return { __html: DOMPurify.sanitize(text) };
     };
     const canEditDescription = ability.can(resourceActions.PATCH, resources.CASE_DETAILS, CaseDetailsFields.CASE_DETAILS_DESCRIPTION);
-    const hasCluster = isClusterIdEnabledForProduct(product, (_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult);
     return (React.createElement("section", { className: "card card-sm card-white" },
         React.createElement("form", null,
             React.createElement(ProductVersion, null),
-            hasCluster && React.createElement(CaseOpenshiftClusterId, null),
+            React.createElement(CaseOpenshiftClusterId, null),
             React.createElement(CaseHostname, { inlineEditable: true }),
             React.createElement("div", { className: "form-group" }, !canEditDescription ? (React.createElement(React.Fragment, null,
                 React.createElement("label", { htmlFor: "case-description" },

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

@@ -1 +1 @@
-{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAqBvE,wBAAgB,sBAAsB,sBAsSrC"}
+{"version":3,"file":"CaseOpenshiftClusterId.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseOpenshiftClusterId/CaseOpenshiftClusterId.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAqBvE,wBAAgB,sBAAsB,sBAiSrC"}

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

@@ -96,12 +96,7 @@ export function CaseOpenshiftClusterId() {
             isClusterVisible();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product, version]);
-    // user may change product and version we need to reset internal state
-    // context api state will be reset on parent component each time user changes product and version
-    useEffect(() => {
-        clusterStateReset();
-    }, [product, version]);
+    }, [product, allProducts.data]);
     /**
      * Hook to make sure that if cluster id comes from session or someother source
      * we also fetch the details for the cluster id so that we can have fields like cluster version while creating the case

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

@@ -57,11 +57,11 @@ function Summary(props) {
         try {
             yield updateCaseDetails(caseDispatch, caseNumber, caseDetails);
             setIsSummaryUpdating(false);
-            ToastNotification.addSuccessMessage(t(`Problem statement has been successfully updated`));
+            ToastNotification.addSuccessMessage(t(`Title has been successfully updated`));
         }
         catch (e) {
             setIsSummaryUpdating(false);
-            caseUpdateError.showError(e, t(`Problem statement failed to updated`));
+            caseUpdateError.showError(e, t(`Title failed to updated`));
             throw e;
         }
     });
@@ -124,7 +124,7 @@ function Summary(props) {
     });
     return (React.createElement(React.Fragment, null,
         React.createElement(NewInlineEdit, { labelProps: { htmlFor: 'case-details-summary' }, labelContent: React.createElement(React.Fragment, null,
-                React.createElement(Trans, null, "Problem statement"),
+                React.createElement(Trans, null, "Title"),
                 React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localSummaryChange, value: summary, getTooltipContent: getSummaryChangedTT }),
                 React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")), allowInlineEdit: props.inlineEditable, content: summary ? summary : t('No summary to display.'), saveDisabled: saveDisabled, hideLabel: props.hideLabel, hideSaveCancel: props.hideSaveCancel, charCount: (summaryState === null || summaryState === void 0 ? void 0 : summaryState.length) || 0, charTotal: SUMMARY_LENGTH_LIMIT, cancelToggleState: isCancelClicked, saveToggleState: isSaveClicked, isExportingPDF: isExportingPDF },
             React.createElement(TextInputGroup, null,

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":"AAWA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,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,qBAkHpD"}
+{"version":3,"file":"CaseInformation.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/CaseInformation.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAQvD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiHpD"}

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

@@ -10,7 +10,6 @@ import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
 import { Hostname } from '../ImproveCase/Hostname';
 import KtQuestions from '../ImproveCase/KtQuestions';
 import ClusterRecommendations from '../Recommendations/ClusterRecommendations';
-import Description from './Description';
 export default function CaseInformation(props) {
     const { t } = useTranslation();
     const { globalMetadataState: { allCaseTypes, allCaseSeverities, caseLanguages, loggedInUser, loggedInUserJwtToken, loggedInUsersAccount, }, } = useContext(GlobalMetadataStateContext);
@@ -81,6 +80,5 @@ export default function CaseInformation(props) {
                 React.createElement(Hostname, null),
                 React.createElement(OpenShiftClusterId, null),
                 React.createElement(ClusterRecommendations, { className: "push-bottom" }),
-                React.createElement(Description, { inlineEditable: false }),
                 React.createElement(KtQuestions, null))))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAkB/D,wBAAgB,kBAAkB,sBAyVjC"}
+{"version":3,"file":"ContactPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/ContactPhoneNumber.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,wBAAgB,kBAAkB,sBAwVjC"}

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

@@ -24,7 +24,6 @@ import { setCaseDetails, setCaseState } from '../../reducers/CaseReducer';
 import { PDFContext } from '../CaseEditView/PDFContainer';
 import { removeAllChars, trimAndReplacePlus } from '../shared/utils';
 import { ContactPhoneNumberPopOver } from './ContactPhoneNumberPopOver';
-import MandatoryPhonePopOver from './MandatoryPhonePopOver';
 export function ContactPhoneNumber() {
     const { suppliedPhoneNumberVerified, phoneCountryCode = '', phoneAreaCodePrefixLineNumber = '', hasLoggedInUserConfirmedPhoneNumber, contactSSOName, shouldNotSetPhoneCountryCode, isCasePhoneUpdating, } = useCaseSelector((state) => ({
         suppliedPhoneNumberVerified: state.caseDetails.suppliedPhoneNumberVerified,
@@ -266,7 +265,6 @@ export function ContactPhoneNumber() {
             React.createElement("span", { className: `form-required ${isExportingPDF ? 'hide-in-pdf' : ''}`, "aria-hidden": true }, "*"),
             ContactPhoneNumberPopOver()),
         React.createElement(PhoneInput, { phoneValue: localFullPhone, countryCode: phoneCountryCode, onPhoneValueChange: onPhoneChange, onCountryCodeChange: onCountryCodeChange, validations: isPhoneNumberValid, invalid: invalid, setInvalid: setInvalid, isLoading: isFetchingSso || isCasePhoneUpdating, shouldNotSetCountryCode: shouldNotSetPhoneCountryCode, isDisabled: isFetchingSso || isCasePhoneUpdating }),
-        React.createElement(MandatoryPhonePopOver, null),
         !invalid &&
             getPhone().length < PHONE_LIMIT &&
             !(isPhoneNumberEmpty && isNextBtnClickedToShowValidationError) &&

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

@@ -3,6 +3,7 @@ interface IProps {
     inlineEditable?: boolean;
     hideSaveCancel?: boolean;
     customTitle?: string;
+    isSummarizeInvalid?: boolean;
 }
 export default function Description(props: IProps): React.JSX.Element;
 export {};

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":"AAKA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAapD,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,qBA0GhD"}
+{"version":3,"file":"Description.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/Description.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,qBA2GhD"}

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

@@ -2,35 +2,33 @@ import { TextArea } from '@patternfly/react-core';
 import { InlineEdit } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
-import { RouteContext } from '../../context/RouteContext';
 import { CASE_DEATILS_ISSUE_LIMIT, LargeDescriptionErrorMessage, MODIFIED_DESCRIPTION_LENGTH_LIMIT, } from '../../reducers/CaseConstNTypes';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 export default function Description(props) {
     const { t } = useTranslation();
-    const { hasLargeCaseDescription, issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName } = useCaseSelector((state) => ({
+    const { hasLargeCaseDescription, issue, environment, periodicityOfIssue, timeFramesAndUrgency, v3ClusterName, summary, version, } = useCaseSelector((state) => ({
+        summary: state.caseDetails.summary,
         description: state.caseDetails.description,
         issue: state.caseDetails.issue,
         environment: state.caseDetails.environment,
+        version: state.caseDetails.version,
         periodicityOfIssue: state.caseDetails.periodicityOfIssue,
         timeFramesAndUrgency: state.caseDetails.timeFramesAndUrgency,
         hasLargeCaseDescription: state.hasLargeCaseDescription,
         v3ClusterName: state.v3ClusterName,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const [hasFocusedLostKT4, setHasFocusedLostKT4] = useState(false);
     const [isIssueTextAreaFocused, setIssueTextAreaFocused] = useState(false);
     const onKTQ1IssueFocusChange = (e) => {
         setIssueTextAreaFocused(e.type === 'focus');
-        e.type === 'blur' && setHasFocusedLostKT4(true);
     };
     const onCaseDetailsChange = (caseDetails) => {
         setCaseDetails(caseDispatch, caseDetails);
     };
-    const { routeState: { isNextBtnClickedToShowValidationError }, } = 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);
@@ -39,15 +37,10 @@ export default function Description(props) {
     const isKT1Required = true;
     //changing limit to 31000 to account for extra chars added during description combination to backend.  True limit is 32000
     const descriptionErrorMessage = t(LargeDescriptionErrorMessage, { limit: MODIFIED_DESCRIPTION_LENGTH_LIMIT });
-    const isDescriptionInvalid = (issue) => {
-        return hasFocusedLostKT4 && isEmpty(issue);
-    };
     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?")),
+            props.customTitle ? (props.customTitle) : (React.createElement(Trans, null, "Describe your problem. Include specific actions and error messages.")),
             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", "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: (e, value) => onKTQ1IssueChange(value, e), onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "get-support-ktQ1-issue", placeholder: t('Please enter an elaborate description'), resizeOrientation: "vertical", validated: isDescriptionInvalid(issue) || (isNextBtnClickedToShowValidationError && isEmpty(issue))
-                ? 'error'
-                : 'default', rows: 5 }),
+        React.createElement(TextArea, { id: "get-support-ktQ1-issue", name: "get-support-ktQ1-issue", className: (isEmpty(summary) || isEmpty(version)) && isEmpty(issue) ? 'kt1-disabled' : '', "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT ? 'true' : 'false', "aria-required": isKT1Required, isRequired: isKT1Required, value: issue, disabled: (isEmpty(summary) || isEmpty(version)) && isEmpty(issue), isDisabled: hasLargeCaseDescription && !setIssueTextAreaFocused && isEmpty(issue), onChange: (e, value) => onKTQ1IssueChange(value, e), onFocus: onKTQ1IssueFocusChange, onBlur: onKTQ1IssueFocusChange, "data-tracking-id": "get-support-ktQ1-issue", placeholder: t(`Example: I'm unable to start the SSHD service receiving the error message \n"Bad yes/no argument for ShowPatchLevel parameter`), resizeOrientation: "vertical", validated: props.isSummarizeInvalid ? 'error' : 'default', rows: 10 }),
         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.d.ts

@@ -7,6 +7,7 @@ interface IProps {
     autoFocus?: boolean;
     hideSaveCancel?: boolean;
     supportType?: string;
+    isOnSummaryPage: boolean;
 }
 declare function OpenCaseIssue(props: IProps): React.JSX.Element;
 declare namespace OpenCaseIssue {

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

@@ -1 +1 @@
-{"version":3,"file":"OpenCaseIssue.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/OpenCaseIssue.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AASD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBAuHnC;kBAvHQ,aAAa;;;AA0HtB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"OpenCaseIssue.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseInformation/OpenCaseIssue.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAS/D,UAAU,MAAM;IACZ,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,OAAO,CAAC;CAC5B;AASD,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,qBA8InC;kBA9IQ,aAAa;;;AAiJtB,eAAe,aAAa,CAAC"}

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

@@ -6,8 +6,9 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
-import { SUMMARY_LENGTH_LIMIT } from '../../reducers/CaseConstNTypes';
+import { ISSUE_SUMMARY_LENGTH_LIMIT, TITLE_SUMMARY_LENGTH_LIMIT } from '../../reducers/CaseConstNTypes';
 import { setCaseDetails } from '../../reducers/CaseReducer';
+import Description from './Description';
 const defaultProps = {
     initialIsEditing: false,
     required: false,
@@ -17,13 +18,17 @@ const defaultProps = {
 };
 function OpenCaseIssue(props) {
     const { t } = useTranslation();
-    const { summary, supportType } = useCaseSelector((state) => ({
+    const { summary, supportType, version, issue } = useCaseSelector((state) => ({
         summary: state.caseDetails.summary,
+        version: state.caseDetails.version,
         supportType: state.caseDetails.caseType,
+        issue: state.caseDetails.issue,
     }));
     const caseDispatch = useCaseDispatch();
     const [isSummaryEmpty, setIsSummaryEmpty] = useState(false);
-    const [hasLargeSummary, setHasLargeSummary] = useState(false);
+    const [isIssueEmpty, setIsIssueEmpty] = useState(false);
+    const [hasLargeTitleSummary, setHasLargeTitleSummary] = useState(false);
+    const [hasLargeIssueSummary, setHasLargeIssueSummary] = useState(false);
     const { routeState: { isNextBtnClickedToShowValidationError }, } = useContext(RouteContext);
     const onSummaryBlur = (e) => {
         var _a;
@@ -35,43 +40,55 @@ function OpenCaseIssue(props) {
     const onSummaryChange = (e) => {
         var _a;
         const summaryLocal = isEmpty((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim()) ? '' : e.target.value;
-        setHasLargeSummary(summaryLocal.length > SUMMARY_LENGTH_LIMIT);
+        const fullLengthChanges = summaryLocal.length;
+        setHasLargeTitleSummary(fullLengthChanges > TITLE_SUMMARY_LENGTH_LIMIT); //255
         onCaseDetailsChange({ summary: summaryLocal });
     };
     const getVariant = () => {
-        if (getIsSummaryInvalid())
+        if (getIssueSummaryInvalid())
             return ProgressVariant.danger;
-        if (!summary)
+        if (!issue)
             return ProgressVariant.success;
-        if (summary.length > SUMMARY_LENGTH_LIMIT / 2) {
+        if (issue.length > ISSUE_SUMMARY_LENGTH_LIMIT / 2) {
             return ProgressVariant.warning;
         }
         else {
             return ProgressVariant.success;
         }
     };
-    const getIsSummaryInvalid = () => hasLargeSummary || (isNextBtnClickedToShowValidationError && isSummaryEmpty);
+    const getTitleSummaryInvalid = () => hasLargeTitleSummary || (isNextBtnClickedToShowValidationError && isSummaryEmpty);
+    const getIssueSummaryInvalid = () => hasLargeIssueSummary || (isNextBtnClickedToShowValidationError && isIssueEmpty);
     const isIdea = () => supportType === PreviousCaseTypes.FEATURE_ENHANCEMENT;
     useEffect(() => {
         setIsSummaryEmpty(summary ? isEmpty(summary.trim()) : true);
-        summary && setHasLargeSummary(summary.length > SUMMARY_LENGTH_LIMIT);
+        setIsIssueEmpty(issue ? isEmpty(issue.trim()) : true);
+        summary && setHasLargeTitleSummary(summary.length > TITLE_SUMMARY_LENGTH_LIMIT);
+        issue && setHasLargeIssueSummary(issue.length > ISSUE_SUMMARY_LENGTH_LIMIT);
         // @ts-ignore
-    }, [summary]);
+    }, [summary, issue]);
     return (React.createElement(React.Fragment, null,
         React.createElement(InlineEdit, { labelProps: {
                 htmlFor: isIdea() ? 'get-support-title' : 'get-support-summary',
+                style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                },
             }, labelContent: React.createElement(React.Fragment, null,
-                React.createElement(Trans, null, isIdea() ? 'Title' : 'Problem statement'),
+                React.createElement(Trans, null, 'Title'),
                 ' ',
-                !!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 && !isSummaryEmpty, content: summary },
-            React.createElement("textarea", { id: isIdea() ? 'get-support-title' : 'get-support-summary', className: `form-control${getIsSummaryInvalid() ? ' form-invalid' : ''}`, "aria-invalid": getIsSummaryInvalid(), "aria-required": !!props.required, required: !!props.required, name: isIdea() ? 'get-support-title' : 'get-support-summary', placeholder: isIdea()
+                !!props.required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), helperContent: React.createElement("div", { className: "title-summary-counter" },
+                `${summary === null || summary === void 0 ? void 0 : summary.length} / ${TITLE_SUMMARY_LENGTH_LIMIT}`,
+                " "), allowInlineEdit: props.inlineEditable, hideSaveCancel: !!props.hideSaveCancel, initialIsEditing: !!props.initialIsEditing, saveOnBlur: true, collapseOnBlur: !!props.collapseOnBlur && !isSummaryEmpty, content: summary },
+            React.createElement("textarea", { id: isIdea() ? 'get-support-title' : 'get-support-summary', className: `form-control ${getTitleSummaryInvalid() ? ' form-invalid' : ''} ${isEmpty(version) ? 'issue-title-disabled' : ''}`, "aria-invalid": getTitleSummaryInvalid(), "aria-required": !!props.required, required: !!props.required, name: isIdea() ? 'get-support-title' : 'get-support-summary', placeholder: isIdea()
                     ? t('i18nkeySummarizeIdea', "Summarize what you're experiencing today")
-                    : t('i18nkeySummarizeExperience', `Describe your problem in detail. Include specific steps already taken and error messages. (Limit: ${SUMMARY_LENGTH_LIMIT} characters)`), value: summary, onChange: onSummaryChange, onBlur: onSummaryBlur, autoFocus: !!props.autoFocus, "data-tracking-id": isIdea() ? 'get-support-title' : 'get-support-summary', rows: 3 }),
-            React.createElement(Progress, { value: summary === null || summary === void 0 ? void 0 : summary.length, min: 0, max: SUMMARY_LENGTH_LIMIT, size: ProgressSize.sm, label: `${summary === null || summary === void 0 ? void 0 : summary.length} / ${SUMMARY_LENGTH_LIMIT}`, valueText: `${summary === null || summary === void 0 ? void 0 : summary.length} / ${SUMMARY_LENGTH_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${summary === null || summary === void 0 ? void 0 : summary.length} / ${SUMMARY_LENGTH_LIMIT}`, variant: getVariant(), title: ' ', className: `pf-v5-u-mt-md ${!isNextBtnClickedToShowValidationError && isEmpty(summary) ? 'gray' : ''}`, id: "summary-progress-bar" })),
-        hasLargeSummary && (React.createElement("div", { className: "pull-top" },
-            React.createElement("p", { className: "form-instructions form-invalid" }, isIdea()
-                ? t(`The title cannot be more than ${SUMMARY_LENGTH_LIMIT} characters.`)
-                : t(`The problem statement cannot be more than ${SUMMARY_LENGTH_LIMIT} characters.`))))));
+                    : t('i18nkeySummarizeExperience', 'Create a heading that summarizes your issue'), value: summary, onChange: onSummaryChange, onBlur: onSummaryBlur, autoFocus: !!props.autoFocus, "data-tracking-id": isIdea() ? 'get-support-title' : 'get-support-summary', rows: 1, disabled: isEmpty(version) }),
+            React.createElement(React.Fragment, null, hasLargeTitleSummary && (React.createElement("div", null,
+                React.createElement("p", { className: "form-instructions form-invalid" }, isIdea()
+                    ? t(`The title cannot be more than ${TITLE_SUMMARY_LENGTH_LIMIT} characters.`)
+                    : t(`The title cannot be more than ${TITLE_SUMMARY_LENGTH_LIMIT} characters.`))))),
+            React.createElement(Description, { isSummarizeInvalid: getIssueSummaryInvalid() }),
+            React.createElement(Progress, { value: issue === null || issue === void 0 ? void 0 : issue.length, min: 0, max: ISSUE_SUMMARY_LENGTH_LIMIT, size: ProgressSize.sm, label: `${issue === null || issue === void 0 ? void 0 : issue.length} / ${ISSUE_SUMMARY_LENGTH_LIMIT}`, valueText: `${issue === null || issue === void 0 ? void 0 : issue.length} / ${ISSUE_SUMMARY_LENGTH_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${issue === null || issue === void 0 ? void 0 : issue.length} / ${ISSUE_SUMMARY_LENGTH_LIMIT}`, variant: getVariant(), title: ' ', className: `pf-v5-u-mt-md ${!isNextBtnClickedToShowValidationError && isEmpty(issue) ? 'gray' : ''}`, id: "summary-progress-bar" }))));
 }
 OpenCaseIssue.defaultProps = defaultProps;
 export default OpenCaseIssue;

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

@@ -1 +1 @@
-{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAsB/D,eAAO,MAAM,oBAAoB,yBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yBAUxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAIjC,CAAC;AAEF,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBAyR/C"}
+{"version":3,"file":"OpenShiftClusterId.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenShiftClusterId.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAsB/D,eAAO,MAAM,oBAAoB,yBAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAInC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yBAUxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yBAIjC,CAAC;AAEF,UAAU,MAAM;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBAqR/C"}

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

@@ -110,19 +110,15 @@ export function OpenShiftClusterId(props) {
                     setIsClusterIdInValid(false);
                 }
             }
+            if (!hasCluster) {
+                resetClusterData();
+            }
         });
         if ((((_a = allProducts.data) === null || _a === void 0 ? void 0 : _a.productsResult) || []).length > 0) {
             isClusterVisible();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [product, version, allProducts.data]);
-    // On preview page user may change product and version we need to reset internal state
-    // context api state will be reset on parent component each time user changes product and version
-    useEffect(() => {
-        clusterStateReset();
-        v3ClusterNameInputBoxChanged(v3ClusterName);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [product, version]);
     /**
      * Hook to set clusterId fields when comes from session or backward/forward
      **/

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":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAgB/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,qBAkQjC;kBAlQQ,WAAW;;;AAoQpB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KtQuestions.d.ts","sourceRoot":"","sources":["../../../../src/components/ImproveCase/KtQuestions.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAoB/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,qBA2WjC;kBA3WQ,WAAW;;;AA6WpB,eAAe,WAAW,CAAC"}

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

@@ -1,4 +1,4 @@
-import { TextArea } from '@patternfly/react-core';
+import { Progress, ProgressMeasureLocation, ProgressSize, ProgressVariant, TextArea } from '@patternfly/react-core';
 import { InlineEdit } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -6,7 +6,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { RouteContext } from '../../context/RouteContext';
-import { CASE_DEATILS_ENVIRONMENT_LIMIT, CASE_DEATILS_PERIODICITYOFISSUE_LIMIT, CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT, KtQuestionConstant, LargeDescriptionErrorMessage, MODIFIED_DESCRIPTION_LENGTH_LIMIT, } from '../../reducers/CaseConstNTypes';
+import { CASE_DEATILS_ENVIRONMENT_LIMIT, CASE_DEATILS_PERIODICITYOFISSUE_LIMIT, CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT, KTQ2LengthError, KTQ3LengthError, KTQ4LengthError, KTQUESTION_MAX_LIMIT, KtQuestionConstant, LargeDescriptionErrorMessage, MODIFIED_DESCRIPTION_LENGTH_LIMIT, } from '../../reducers/CaseConstNTypes';
 import { getUpdatedDescription } from '../../reducers/CaseHelpers';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 const defaultProps = { inlineEditable: false, hideSaveCancel: false, onlyShowKT4: false };
@@ -78,6 +78,60 @@ function KtQuestions(props) {
     const invalidateQT4 = (value) => {
         return isEmpty(value) && hasFocusedLostKT4;
     };
+    const [isQ2Empty, setIsQ2Empty] = useState(false);
+    const [isQ3Empty, setIsQ3Empty] = useState(false);
+    const [isQ4Empty, setIsQ4Empty] = useState(false);
+    const [hasLargeQ2, setHasLargeQ2] = useState(false);
+    const [hasLargeQ3, setHasLargeQ3] = useState(false);
+    const [hasLargeQ4, setHasLargeQ4] = useState(false);
+    useEffect(() => {
+        setIsQ2Empty(environment ? isEmpty(environment.trim()) : true);
+        setIsQ3Empty(periodicityOfIssue ? isEmpty(periodicityOfIssue.trim()) : true);
+        setIsQ4Empty(timeFramesAndUrgency ? isEmpty(timeFramesAndUrgency.trim()) : true);
+        environment && setHasLargeQ2(environment.length > KTQUESTION_MAX_LIMIT);
+        periodicityOfIssue && setHasLargeQ3(periodicityOfIssue.length > KTQUESTION_MAX_LIMIT);
+        timeFramesAndUrgency && setHasLargeQ4(timeFramesAndUrgency.length > KTQUESTION_MAX_LIMIT);
+        // @ts-ignore
+    }, [environment, periodicityOfIssue, timeFramesAndUrgency]);
+    const getQ2Invalid = () => hasLargeQ2 || (isNextBtnClickedToShowValidationError && isQ2Empty);
+    const getQ3Invalid = () => hasLargeQ3 || (isNextBtnClickedToShowValidationError && isQ3Empty);
+    const getQ4Invalid = () => hasLargeQ4 || (isNextBtnClickedToShowValidationError && isQ4Empty);
+    const getVariantQ2 = () => {
+        if (getQ2Invalid())
+            return ProgressVariant.danger;
+        if (!environment)
+            return ProgressVariant.success;
+        if (environment.length > KTQUESTION_MAX_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
+    const getVariantQ3 = () => {
+        if (getQ3Invalid())
+            return ProgressVariant.danger;
+        if (!periodicityOfIssue)
+            return ProgressVariant.success;
+        if (periodicityOfIssue.length > KTQUESTION_MAX_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
+    const getVariantQ4 = () => {
+        if (getQ4Invalid())
+            return ProgressVariant.danger;
+        if (!timeFramesAndUrgency)
+            return ProgressVariant.success;
+        if (timeFramesAndUrgency.length > KTQUESTION_MAX_LIMIT / 2) {
+            return ProgressVariant.warning;
+        }
+        else {
+            return ProgressVariant.success;
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ4-timeFramesAndUrgency' }, labelContent: React.createElement(React.Fragment, null,
                 t(KtQuestionConstant.timeFramesAndUrgency),
@@ -89,20 +143,18 @@ function KtQuestions(props) {
                     ? 'error'
                     : 'default', "aria-invalid": timeFramesAndUrgency && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
                     ? 'true'
-                    : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, isDisabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: (e, value) => onKtQ4Change(value, e), onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t("User or financial impact, and whether there's a legal, national, or medical urgency"), isRequired: isKT4Required, resizeOrientation: "vertical" }),
-            React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${isKTQ4TextAreaActive && (timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT
-                ? `Description cannot be more than ${CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT} characters`
-                : ''}`),
+                    : 'false', id: "ktQ4-timeFramesAndUrgency", value: timeFramesAndUrgency, isDisabled: isEmpty(timeFramesAndUrgency) && hasLargeCaseDescription && !isKTQ4TextAreaActive, onChange: (e, value) => onKtQ4Change(value, e), onFocus: onKTQ4FocusChange, onBlur: onKTQ4FocusChange, "aria-required": isKT4Required, "data-tracking-id": "get-support-ktQ4-timeFramesAndUrgency", placeholder: t('Describe the user or financial impact. Tell us about any legal, national, or medical urgency.'), isRequired: isKT4Required, resizeOrientation: "vertical", rows: 5 }),
+            React.createElement(Progress, { value: timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length, min: 0, max: KTQUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KTQUESTION_MAX_LIMIT}`, valueText: `${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KTQUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length} / ${KTQUESTION_MAX_LIMIT}`, variant: getVariantQ4(), title: ' ', className: `pf-v5-u-mt-md ${!isNextBtnClickedToShowValidationError && isEmpty(timeFramesAndUrgency) ? 'gray' : ''} kt-progress-bar`, id: "summary-progress-bar" }),
+            React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ4-environment" }, `${(timeFramesAndUrgency === null || timeFramesAndUrgency === void 0 ? void 0 : timeFramesAndUrgency.length) > CASE_DETAILS_TIMEFRAMESANDURGENCY_LIMIT ? KTQ4LengthError : ''}`),
             React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ4-timeFramesAndUrgency" }, `${hasLargeCaseDescription && isKTQ4TextAreaActive ? descriptionErrorMessage : ''}`)),
         !props.onlyShowKT4 && (React.createElement(React.Fragment, null,
             React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ2-environment' }, labelContent: React.createElement(React.Fragment, null,
                     t(KtQuestionConstant.environment),
                     ' ',
                     isKT2Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(environment), usePreformattedTag: true, saveOnBlur: true, content: environment },
-                React.createElement(TextArea, { id: "ktQ2-environment", value: environment, isDisabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: (e, value) => onKtQ2Change(value, e), onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "get-support-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? 'true' : 'false', resizeOrientation: "vertical" }),
-                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${isKTQ2TextAreaActive && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT
-                    ? `Description cannot be more than ${CASE_DEATILS_ENVIRONMENT_LIMIT} characters`
-                    : ''}`),
+                React.createElement(TextArea, { id: "ktQ2-environment", value: environment, isDisabled: isEmpty(environment) && hasLargeCaseDescription && !isKTQ2TextAreaActive, onChange: (e, value) => onKtQ2Change(value, e), onFocus: onKTQ2FocusChange, onBlur: onKTQ2FocusChange, "aria-required": isKT2Required, isRequired: isKT2Required, "data-tracking-id": "get-support-ktQ2-environment", "aria-invalid": environment && (environment === null || environment === void 0 ? void 0 : environment.length) > CASE_DEATILS_ENVIRONMENT_LIMIT ? 'true' : 'false', resizeOrientation: "vertical", placeholder: t('Please provide details about the location, device, software version, etc. where you encounter this issue'), rows: 5 }),
+                React.createElement(Progress, { value: environment === null || environment === void 0 ? void 0 : environment.length, min: 0, max: KTQUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${KTQUESTION_MAX_LIMIT}`, valueText: `${environment === null || environment === void 0 ? void 0 : environment.length} / ${KTQUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${environment === null || environment === void 0 ? void 0 : environment.length} / ${KTQUESTION_MAX_LIMIT}`, variant: getVariantQ2(), title: ' ', className: `pf-v5-u-mt-md ${!isNextBtnClickedToShowValidationError && isEmpty(environment) ? 'gray' : ''} kt-progress-bar`, id: "summary-progress-bar" }),
+                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ2-environment" }, `${(environment === null || environment === void 0 ? void 0 : environment.length) > KTQUESTION_MAX_LIMIT ? KTQ2LengthError : ''}`),
                 React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ2-environment" }, `${hasLargeCaseDescription && isKTQ2TextAreaActive ? descriptionErrorMessage : ''}`)),
             React.createElement(InlineEdit, { labelProps: { htmlFor: 'ktQ3-periodicityOfIssue' }, labelContent: React.createElement(React.Fragment, null,
                     t(KtQuestionConstant.periodicityOfIssue),
@@ -110,10 +162,9 @@ function KtQuestions(props) {
                     isKT3Required && (React.createElement("span", { className: "form-required", "aria-hidden": true }, "*"))), allowInlineEdit: props.inlineEditable, hideSaveCancel: props.hideSaveCancel, initialIsEditing: isEmpty(periodicityOfIssue), usePreformattedTag: true, saveOnBlur: true, content: periodicityOfIssue },
                 React.createElement(TextArea, { id: "ktQ3-periodicityOfIssue", value: periodicityOfIssue, isDisabled: isEmpty(periodicityOfIssue) && hasLargeCaseDescription && !isKTQ3TextAreaActive, onChange: (e, value) => onKtQ3Change(value, e), onFocus: onKTQ3FocusChange, onBlur: onKTQ3FocusChange, "aria-required": isKT3Required, isRequired: isKT3Required, "data-tracking-id": "get-support-ktQ3-periodicityOfIssue", "aria-invalid": periodicityOfIssue && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
                         ? 'true'
-                        : 'false', resizeOrientation: "vertical" }),
-                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${isKTQ3TextAreaActive && (periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT
-                    ? `Description cannot be more than ${CASE_DEATILS_PERIODICITYOFISSUE_LIMIT} characters`
-                    : ''}`),
+                        : 'false', resizeOrientation: "vertical", placeholder: t('Describe when and how often the problem occurs, e.g., daily, after specific actions, at particular times of day, etc.'), rows: 5 }),
+                React.createElement(Progress, { value: periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length, min: 0, max: KTQUESTION_MAX_LIMIT, size: ProgressSize.sm, label: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, valueText: `${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, measureLocation: ProgressMeasureLocation.top, "aria-label": `Progress - ${periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length} / ${KTQUESTION_MAX_LIMIT}`, variant: getVariantQ3(), title: ' ', className: `pf-v5-u-mt-md ${!isNextBtnClickedToShowValidationError && isEmpty(periodicityOfIssue) ? 'gray' : ''} kt-progress-bar`, id: "summary-progress-bar" }),
+                React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-4k-warning-ktQ3-environment" }, `${(periodicityOfIssue === null || periodicityOfIssue === void 0 ? void 0 : periodicityOfIssue.length) > CASE_DEATILS_PERIODICITYOFISSUE_LIMIT ? KTQ3LengthError : ''}`),
                 React.createElement("p", { className: "form-instructions", "data-tracking-id": "large-warning-ktQ3-periodicityOfIssue" }, `${hasLargeCaseDescription && isKTQ3TextAreaActive ? descriptionErrorMessage : ''}`))))));
 }
 KtQuestions.defaultProps = defaultProps;

package/lib/esm/components/OpenCase/NewFeatureModal.d.ts

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

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

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

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

@@ -0,0 +1,38 @@
+import { Button, Checkbox, Modal, Title } from '@patternfly/react-core';
+import { useLocalStorage, useSessionStorage } from '@rh-support/components';
+import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { getConfigField, PCM_CONFIG_FIELD_TYPE } from '@rh-support/utils';
+import React, { useContext, useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { RedHatCustomerPortalIcon } from './RedHatCustomerPortalIcon';
+const NewFeatureModal = () => {
+    const [modalViewStorageCounter, setModalViewStorageCounter] = useSessionStorage('modalShowCounter', 0);
+    const [shouldNotShowModal, setShouldNotShowModal] = useLocalStorage('shouldNotShowFeatureModal', false); // local storage flag to not show modal
+    const [checkedToNotShowModal, setCheckedToNotShowModal] = useState(false);
+    const [showModal, setShowModal] = useState(false);
+    const { t } = useTranslation();
+    const { globalMetadataState: { pcmConfig }, } = useContext(GlobalMetadataStateContext);
+    const isNewFeatureBannerVisible = getConfigField(pcmConfig.data, 'isNewFeatureBannerVisible', PCM_CONFIG_FIELD_TYPE.FEATURE_FLAG);
+    const handleModalToggle = (_event) => {
+        setShowModal(!showModal);
+        if (checkedToNotShowModal) {
+            setShouldNotShowModal(true); // updating the local storage value on clicking close button
+        }
+        setModalViewStorageCounter(modalViewStorageCounter + 1);
+    };
+    useEffect(() => {
+        setShowModal(modalViewStorageCounter < 2);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onBannerCheckboxChange = () => {
+        setCheckedToNotShowModal(!checkedToNotShowModal);
+    };
+    return (React.createElement(React.Fragment, null, !shouldNotShowModal && isNewFeatureBannerVisible && showModal && (React.createElement(Modal, { className: "newFeatureModal", width: "45%", "aria-label": t('New feature modal'), isOpen: showModal, onClose: handleModalToggle, actions: [
+            React.createElement(Button, { key: "close", variant: "primary", "data-tracking-id": "new-feature-modal-close", onClick: handleModalToggle }, t('Close')),
+        ], showClose: false },
+        React.createElement(RedHatCustomerPortalIcon, null),
+        React.createElement(Title, { headingLevel: "h2", className: "pf-v5-u-font-weight-bold" }, t('Change: Application Announcement For KT Question Update')),
+        React.createElement(Trans, null, "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source."),
+        React.createElement(Checkbox, { className: "pf-v5-u-mt-md", id: "new-feature-modal-checkbox", label: t(`I don't want to see this modal again`), isChecked: checkedToNotShowModal, onChange: onBannerCheckboxChange, "data-tracking-id": "new-feature-modal-checkbox" })))));
+};
+export default NewFeatureModal;

package/lib/esm/components/OpenCase/OpenCase.js

@@ -2,12 +2,12 @@ import { ability, CaseListFields, resourceActions, resources } from '@rh-support
 import React from 'react';
 import { AccountSelector } from '../AccountInfo/AccountSelector';
 import { OwnerSelector } from '../AccountInfo/OwnerSelector';
-import MandatoryPhoneBanner from './MandatoryPhoneBanner';
+import NewFeatureModal from './NewFeatureModal';
 import SupportTypeSelectorPage from './SupportTypeSelectorPage';
 export default function OpenCase(props) {
     const canChangeAccountInfo = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.ACCOUNT_AND_OWNER);
     return (React.createElement("form", null,
-        React.createElement(MandatoryPhoneBanner, null),
+        React.createElement(NewFeatureModal, null),
         canChangeAccountInfo && (React.createElement(React.Fragment, null,
             React.createElement(AccountSelector, { "data-tracking-id": "get-support-account-selector" }),
             React.createElement(OwnerSelector, { "data-tracking-id": "get-support-owner-selector" }))),

package/lib/esm/components/ProductSelector/AllProductsSelector.js

@@ -81,7 +81,7 @@ const AllProductsSelector = forwardRef((props, ref) => {
             React.createElement("div", { className: "all-product-selector-dropdown" },
                 React.createElement(ProductVersionDropdownSelector, { isLoading: allProducts.isFetching, products: props.checkEntitledProduct ? entitledProducts : allProducts.data.productsResult, onProductChange: onProductChange, onVersionChange: onVersionChange, ref: ref, isOnSummaryPage: props.isOnSummaryPage }))),
         React.createElement("div", { className: "case-details-summary" },
-            React.createElement(OpenCaseIssue, { inlineEditable: false, required: true })),
+            React.createElement(OpenCaseIssue, { inlineEditable: false, required: true, isOnSummaryPage: props.isOnSummaryPage })),
         React.createElement(AlertMessage, { isInline: true, variant: AlertType.DANGER, className: "pf-v5-u-mt-lg", title: t(`${loggedInUserRights.data.isSSOUsernameSameAsLoggedInUser(contactSSOName)
                 ? 'You are'
                 : 'Selected owner is'} not allowed to create case on this product.`), show: !allProducts.isFetching && props.checkEntitledProduct && !isEntitledProduct && !isEmpty(product) }),

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

@@ -3,6 +3,7 @@ import { RouteComponentProps } from 'react-router';
 import { IRouteUrlParams } from '../../reducers/RouteConstNTypes';
 interface IProps {
     routeProps: RouteComponentProps<IRouteUrlParams>;
+    userSeenRecommendations?: (value: React.SetStateAction<boolean>) => void;
 }
 /**
  * Responsible for:

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

@@ -1 +1 @@
-{"version":3,"file":"ProductSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACpD;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAiFpD"}
+{"version":3,"file":"ProductSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ProductSelector/ProductSelector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAMlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;IACjD,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CAC5E;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,qBAoFpD"}