@rh-support/troubleshoot 1.0.38 → 1.0.39

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

@@ -1 +1 @@
-{"version":3,"file":"CaseAlternateId.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseAlternateId.tsx"],"names":[],"mappings":"AAiBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAOD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eAqIrC;kBArIQ,eAAe;;;AAwIxB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CaseAlternateId.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/CaseAlternateId.tsx"],"names":[],"mappings":"AA4BA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAOD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eAgLrC;kBAhLQ,eAAe;;;AAmLxB,eAAe,eAAe,CAAC"}

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

@@ -7,9 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import { InputGroupText, InputGroupTextVariant, Spinner, TextInput, TextInputGroup, Tooltip, TooltipPosition, ValidatedOptions, } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import InfoIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { InlineEdit, LoadingIndicator, ToastNotification, ValueChangedIcon } from '@rh-support/components';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { InlineEdit, ToastNotification, ValueChangedIcon } from '@rh-support/components';
 import { useCanEditCase } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -23,7 +25,7 @@ import { CaseValuesToWatch } from '../../../shared/Constants';
 import { getChangedValueTooltip } from '../../../shared/utils';
 const defaultProps = {
     inlineEditable: true,
-    hideSaveCancel: false,
+    hideSaveCancel: true,
 };
 function CaseAlternateId(props) {
     const { t } = useTranslation();
@@ -39,18 +41,22 @@ function CaseAlternateId(props) {
     const [localAltIDChange, setLocalAltIDChange] = useState(false);
     const afterLocalChange = () => setLocalAltIDChange(false);
     const canEditCase = useCanEditCase();
+    // To keep track of Cancel button state to close InlineEdit input mode
+    const [isCancelClicked, setIsCancelClicked] = useState(false);
+    // To keep track of Save button state to close InlineEdit input mode
+    const [isSaveClicked, setIsSaveClicked] = useState(false);
     useEffect(() => {
         if (alternateId !== alternateIdState) {
             setAlternateIdState(alternateId);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [alternateId]);
-    const onAlternateIdChange = (e) => {
-        var _a;
+    // Function to handle when Alternate ID changes
+    const onAlternateIdChange = (value) => {
         if (canEditCase.alert())
             return;
-        setAlternateIdState(e.target.value);
-        !caseNumber && setCaseDetails(caseDispatch, { alternateId: (_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim() });
+        setAlternateIdState(value);
+        !caseNumber && setCaseDetails(caseDispatch, { alternateId: value === null || value === void 0 ? void 0 : value.trim() });
     };
     const updateAlternateId = () => __awaiter(this, void 0, void 0, function* () {
         try {
@@ -71,32 +77,50 @@ function CaseAlternateId(props) {
             yield updateAlternateId();
         }
         setLocalAltIDChange(true);
+        setIsSaveClicked(!isSaveClicked);
     });
     const onCancel = () => {
         setAlternateIdState(alternateId);
+        setIsCancelClicked(!isCancelClicked);
     };
     const maxLengthErrorMessage = t('Alternate case ID cannot be more than {{limit}} characters.', {
         limit: ALTERNATE_CASE_ID_LIMIT,
     });
     // To check if alternate ID is empty
     const isAlternateIDEmpty = isEmpty(alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.trim());
-    // To populate the unsaved alternateId field with the previously saved value on onBlur event.
-    const onBlur = () => {
-        if (alternateId !== alternateIdState) {
-            setAlternateIdState(alternateId);
+    // Conditions to disable save button
+    const saveDisabled = isAlternateIDEmpty ||
+        alternateIdState === alternateId ||
+        isUpdating ||
+        (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT;
+    // Function to handle keyDown events
+    const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
+        // Cancel on pressing esc
+        if (e.keyCode === 27) {
+            yield onCancel();
         }
-    };
+        // Save on pressing enter
+        else if (!saveDisabled && e.keyCode === 13) {
+            yield onSave();
+        }
+    });
     return (React.createElement(React.Fragment, null,
         React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-alternate-id' }, labelContent: React.createElement(React.Fragment, null,
                 React.createElement(Trans, null, "Alternate case ID"),
                 React.createElement(ValueChangedIcon, { afterLocalChange: afterLocalChange, isLocalChange: localAltIDChange, value: alternateId, getTooltipContent: getChangedValueTooltip(() => CaseValuesToWatch.altID) }),
                 ' ',
                 React.createElement(Tooltip, { trigger: 'mouseenter focus', position: TooltipPosition.top, content: React.createElement(Trans, null, "Add your internal tracking ID to better identify and organize support issues.") },
-                    React.createElement(InfoIcon, { className: "pf-u-ml-sm", "aria-label": "Case Alternate ID" }))), allowInlineEdit: props.inlineEditable, content: alternateId, initialIsEditing: true, hideSaveCancel: props.hideSaveCancel, onSave: onSave, onCancel: onCancel, saveDisabled: isAlternateIDEmpty ||
-                alternateIdState === alternateId ||
-                isUpdating ||
-                (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT, loadingIndicator: isUpdating ? React.createElement(LoadingIndicator, { isInline: true }) : null },
-            React.createElement("input", { value: alternateIdState, type: "text", className: "form-control", id: "case-details-alternate-id", placeholder: t(`Enter your case tracking number or internal incident ID`), onChange: onAlternateIdChange, disabled: isUpdating, "data-tracking-id": "case-details-alternate-id", onBlur: onBlur })),
+                    React.createElement(InfoIcon, { className: "pf-u-ml-sm", "aria-label": "Case Alternate ID" }))), allowInlineEdit: props.inlineEditable, content: alternateId || t('No Alternate case ID to display.'), hideSaveCancel: props.hideSaveCancel, saveDisabled: saveDisabled, charCount: (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) || 0, charTotal: ALTERNATE_CASE_ID_LIMIT, cancelToggleState: isCancelClicked, saveToggleState: isSaveClicked },
+            React.createElement(TextInputGroup, null,
+                React.createElement(TextInput, { value: alternateIdState, type: "text", className: "form-control", id: "case-details-alternate-id", placeholder: t(`Enter your case tracking number or internal incident ID`), onChange: onAlternateIdChange, "data-tracking-id": "case-details-alternate-id", isDisabled: isUpdating, onKeyDown: handleKeyDown, validated: (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT || isAlternateIDEmpty
+                        ? ValidatedOptions.error
+                        : ValidatedOptions.default }),
+                !isUpdating ? (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement("button", { className: "btn btn-app btn-link pf-u-ml-sm", type: "button", disabled: saveDisabled, onClick: onSave },
+                        React.createElement(CheckIcon, null)),
+                    React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onCancel },
+                        React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl" }))))),
         (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT && (React.createElement("div", { className: "pull-top" },
             React.createElement("p", { className: "form-instructions form-invalid" },
                 React.createElement(Trans, null, maxLengthErrorMessage))))));

package/lib/esm/components/CaseEditView/Tabs/CaseDetails/Summary.d.ts

@@ -1,6 +1,7 @@
 interface IProps {
     inlineEditable?: boolean;
     hideLabel?: boolean;
+    hideSaveCancel?: boolean;
 }
 declare function Summary(props: IProps): JSX.Element;
 declare namespace Summary {

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

@@ -1 +1 @@
-{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/Summary.tsx"],"names":[],"mappings":"AAaA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAOD,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,eAiI7B;kBAjIQ,OAAO;;;AAoIhB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDetails/Summary.tsx"],"names":[],"mappings":"AAuBA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAQD,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,eAwL7B;kBAxLQ,OAAO;;;AA2LhB,eAAe,OAAO,CAAC"}

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

@@ -7,7 +7,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { InlineEdit, LoadingIndicator, ToastNotification, ValueChangedIcon } from '@rh-support/components';
+import { InputGroupText, InputGroupTextVariant, Spinner, TextInput, TextInputGroup, ValidatedOptions, } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import { InlineEdit, ToastNotification, ValueChangedIcon } from '@rh-support/components';
 import { useCanEditCase } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -15,44 +18,37 @@ import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseDispatch, useCaseSelector } from '../../../../context/CaseContext';
 import { useCaseUpdateErrorMessage } from '../../../../hooks/useCaseUpdateErrorMessage';
-import { SUMMARY_LENGTH_LIMIT, summaryMaxLengthErrorMessage } from '../../../../reducers/CaseConstNTypes';
+import { SUMMARY_LENGTH_LIMIT } from '../../../../reducers/CaseConstNTypes';
 import { setCaseDetails, updateCaseDetails } from '../../../../reducers/CaseReducer';
 const defaultProps = {
-    inlineEditable: false,
+    inlineEditable: true,
     hideLabel: false,
+    hideSaveCancel: true,
 };
 function Summary(props) {
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
-    const maxLengthErrorMessage = t(summaryMaxLengthErrorMessage, {
-        limit: SUMMARY_LENGTH_LIMIT,
-    });
     const { summary, caseNumber } = useCaseSelector((state) => ({
         summary: state.caseDetails.summary,
         caseNumber: state.caseDetails.caseNumber,
     }), isEqual);
     const caseDispatch = useCaseDispatch();
-    const [isSummaryInValid, setIsSummaryInValid] = useState(false);
     const [summaryState, setSummaryState] = useState(summary);
     const [isSummaryUpdating, setIsSummaryUpdating] = useState(false);
-    const [hasLargeSummary, setHasLargeSummary] = useState(false);
     const canEditCase = useCanEditCase();
     // value changed logic to show a none local severity change
     const [localSummaryChange, setLocalSummaryChange] = useState(false);
+    // To keep track of Cancel button state to close InlineEdit input mode
+    const [isCancelClicked, setIsCancelClicked] = useState(false);
+    // To keep track of Save button state to close InlineEdit input mode
+    const [isSaveClicked, setIsSaveClicked] = useState(false);
     const afterLocalChange = () => setLocalSummaryChange(false);
     const getSummaryChangedTT = () => React.createElement(Trans, null, "Summary has been updated");
-    // Function to check if Invalid when input is non-focused
-    const onSummaryBlur = (e) => {
-        setIsSummaryInValid(isEmpty(e.target.value));
-    };
     // Function to handle when summary changes
-    const onSummaryChange = (e) => {
+    const onSummaryChange = (value) => {
         if (canEditCase.alert())
             return;
-        const summaryLocal = e.target.value;
-        summary.length > SUMMARY_LENGTH_LIMIT ? setHasLargeSummary(true) : setHasLargeSummary(false);
-        setIsSummaryInValid(isEmpty(summaryLocal));
-        setSummaryState(summaryLocal);
+        setSummaryState(value);
     };
     const onSummaryUpdate = (caseDetails) => __awaiter(this, void 0, void 0, function* () {
         setIsSummaryUpdating(true);
@@ -68,7 +64,6 @@ function Summary(props) {
         }
     });
     const onSave = (e) => __awaiter(this, void 0, void 0, function* () {
-        setHasLargeSummary(false);
         const caseDetails = { summary: summaryState === null || summaryState === void 0 ? void 0 : summaryState.trim() };
         if (caseNumber) {
             // edit/view case
@@ -84,22 +79,64 @@ function Summary(props) {
             setCaseDetails(caseDispatch, caseDetails);
         }
         setLocalSummaryChange(true);
+        setIsSaveClicked(!isSaveClicked);
     });
     const onCancel = () => {
         setSummaryState(summary);
+        setIsCancelClicked(!isCancelClicked);
     };
     useEffect(() => {
         setSummaryState(summary);
     }, [summary]);
-    return (React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-summary' }, labelContent: React.createElement(React.Fragment, null,
-            React.createElement(Trans, null, "Issue summary"),
-            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, onSave: onSave, onCancel: onCancel, saveDisabled: isSummaryInValid ||
-            hasLargeSummary ||
-            summaryState === summary ||
-            (isSummaryUpdating && !isSummaryInValid), hideLabel: props.hideLabel, loadingIndicator: isSummaryUpdating && !isSummaryInValid ? React.createElement(LoadingIndicator, { isInline: true }) : null, isSpaceAllowed: false, inputValue: summaryState },
-        React.createElement("input", { type: "text", id: "case-details-summary", className: `form-control${isSummaryInValid || hasLargeSummary ? ' form-invalid' : ''}`, "aria-invalid": isSummaryInValid, "aria-required": true, required: true, name: "case-details-summary", value: summaryState, onChange: onSummaryChange, onBlur: onSummaryBlur, disabled: isSummaryUpdating, "data-tracking-id": "case-details-summary" }),
-        hasLargeSummary && React.createElement("p", { className: "form-instructions" }, maxLengthErrorMessage)));
+    // To check if summary is empty
+    const isSummaryEmpty = isEmpty(summaryState === null || summaryState === void 0 ? void 0 : summaryState.trim());
+    // Conditions to disable save button
+    const saveDisabled = isSummaryEmpty || (summaryState === null || summaryState === void 0 ? void 0 : summaryState.length) > SUMMARY_LENGTH_LIMIT || summaryState === summary || isSummaryUpdating;
+    // Error to show when input is empty.
+    const fieldEmptyErrorMessage = t('This field is required.');
+    // Function to handle keyDown events
+    const handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
+        // Cancel on pressing esc
+        if (e.keyCode === 27) {
+            yield onCancel();
+        }
+        // Save on pressing enter
+        else if (!saveDisabled && e.keyCode === 13) {
+            const caseDetails = { summary: summaryState === null || summaryState === void 0 ? void 0 : summaryState.trim() };
+            if (caseNumber) {
+                // edit/view case
+                try {
+                    yield onSummaryUpdate(caseDetails);
+                }
+                catch (e) {
+                    throw e;
+                }
+            }
+            else {
+                // create case
+                setCaseDetails(caseDispatch, caseDetails);
+            }
+            setLocalSummaryChange(true);
+            setIsSaveClicked(!isSaveClicked);
+        }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InlineEdit, { labelProps: { htmlFor: 'case-details-summary' }, labelContent: React.createElement(React.Fragment, null,
+                React.createElement(Trans, null, "Issue summary"),
+                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 },
+            React.createElement(TextInputGroup, null,
+                React.createElement(TextInput, { type: "text", id: "case-details-summary", className: 'form-control', "aria-required": true, required: true, name: "case-details-summary", value: summaryState, onChange: onSummaryChange, isDisabled: isSummaryUpdating, "data-tracking-id": "case-details-summary", onKeyDown: handleKeyDown, validated: (summaryState === null || summaryState === void 0 ? void 0 : summaryState.length) > SUMMARY_LENGTH_LIMIT || isSummaryEmpty
+                        ? ValidatedOptions.error
+                        : ValidatedOptions.default }),
+                !isSummaryUpdating ? (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement("button", { className: "btn btn-app btn-link pf-u-ml-sm", type: "button", disabled: saveDisabled, onClick: onSave },
+                        React.createElement(CheckIcon, null)),
+                    React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: onCancel },
+                        React.createElement(TimesIcon, { color: "#6A6E73" })))) : (React.createElement(InputGroupText, { variant: InputGroupTextVariant.plain },
+                    React.createElement(Spinner, { isSVG: true, size: "lg", className: "pf-u-ml-2xl pf-u-mr-xl" }))))),
+        isSummaryEmpty && (React.createElement("p", { className: "form-instructions form-invalid" },
+            React.createElement(Trans, null, fieldEmptyErrorMessage)))));
 }
 Summary.defaultProps = defaultProps;
 export default Summary;

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

@@ -6,13 +6,13 @@ import { AppMetadataStateContext } from '../../context/AppMetadataContext';
 import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { getDescriptionWOQues } from '../../reducers/CaseHelpers';
 import { setCaseDetails, setDetectedLanguage } from '../../reducers/CaseReducer';
-import CaseAlternateId from '../CaseEditView/Tabs/CaseDetails/CaseAlternateId';
 import CaseGroup from '../CaseInformation/CaseGroup';
 import Fts from '../CaseInformation/Fts';
 import Severity from '../CaseInformation/Severity';
 import SupportLevel from '../CaseInformation/SupportLevel';
 import CaseLanguageSelector from './CaseLanguageSelector';
 import { Cep } from './Cep';
+import OpenAlternateID from './OpenAlternateID';
 import { RHAssociatesSelector } from './RHAssociatesSelector';
 import CaseContactSelector from './SendNotifications/CaseContactSelector';
 export default function CaseManagement(props) {
@@ -62,6 +62,6 @@ export default function CaseManagement(props) {
         React.createElement(CaseLanguageSelector, null),
         canSeeEmailNotifications && React.createElement(CaseContactSelector, null),
         React.createElement(RHAssociatesSelector, null),
-        React.createElement(CaseAlternateId, { inlineEditable: false, hideSaveCancel: true }),
+        React.createElement(OpenAlternateID, { inlineEditable: false, hideSaveCancel: true }),
         React.createElement(Cep, null)));
 }

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

@@ -0,0 +1,10 @@
+interface IProps {
+    inlineEditable?: boolean;
+    hideSaveCancel?: boolean;
+}
+declare function OpenAlternateID(props: IProps): JSX.Element;
+declare namespace OpenAlternateID {
+    var defaultProps: Partial<IProps>;
+}
+export default OpenAlternateID;
+//# sourceMappingURL=OpenAlternateID.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OpenAlternateID.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseManagement/OpenAlternateID.tsx"],"names":[],"mappings":"AASA,UAAU,MAAM;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAOD,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eA8DrC;kBA9DQ,eAAe;;;AAiExB,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,44 @@
+import { InlineEdit } from '@rh-support/components';
+import isEqual from 'lodash/isEqual';
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
+import { ALTERNATE_CASE_ID_LIMIT } from '../../reducers/CaseConstNTypes';
+import { setCaseDetails } from '../../reducers/CaseReducer';
+const defaultProps = {
+    inlineEditable: true,
+    hideSaveCancel: false,
+};
+function OpenAlternateID(props) {
+    const { t } = useTranslation();
+    const { alternateId, caseNumber } = useCaseSelector((state) => ({
+        alternateId: state.caseDetails.alternateId,
+        caseNumber: state.caseDetails.caseNumber,
+    }), isEqual);
+    const caseDispatch = useCaseDispatch();
+    const [alternateIdState, setAlternateIdState] = useState(alternateId);
+    useEffect(() => {
+        if (alternateId !== alternateIdState) {
+            setAlternateIdState(alternateId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [alternateId]);
+    const onAlternateIdChange = (e) => {
+        var _a;
+        setAlternateIdState(e.target.value);
+        !caseNumber && setCaseDetails(caseDispatch, { alternateId: (_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim() });
+    };
+    const maxLengthErrorMessage = t('Alternate case ID cannot be more than {{limit}} characters.', {
+        limit: ALTERNATE_CASE_ID_LIMIT,
+    });
+    const isAlternateIDValid = (alternateIdState === null || alternateIdState === void 0 ? void 0 : alternateIdState.length) > ALTERNATE_CASE_ID_LIMIT;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InlineEdit, { labelProps: { htmlFor: 'open-case-alternate-id' }, labelContent: React.createElement(React.Fragment, null,
+                React.createElement(Trans, null, "Alternate case ID")), allowInlineEdit: props.inlineEditable, content: alternateId, hideSaveCancel: !!props.hideSaveCancel },
+            React.createElement("input", { value: alternateIdState, type: "text", className: `form-control${isAlternateIDValid ? ' form-invalid' : ''}`, id: "open-case-alternate-id", placeholder: t(`Enter your case tracking number or internal incident ID`), onChange: onAlternateIdChange, "data-tracking-id": "open-case-alternate-id" })),
+        isAlternateIDValid && (React.createElement("div", { className: "pull-top" },
+            React.createElement("p", { className: "form-instructions form-invalid" },
+                React.createElement(Trans, null, maxLengthErrorMessage))))));
+}
+OpenAlternateID.defaultProps = defaultProps;
+export default OpenAlternateID;

package/lib/esm/components/Issue/Issue.js

@@ -39,10 +39,10 @@ export default function Issue() {
     const handleFormSubmit = (e) => e.preventDefault();
     return (React.createElement(React.Fragment, null,
         React.createElement("form", { onSubmit: handleFormSubmit, className: "push-bottom" },
-            React.createElement(OpenCaseIssue, { inlineEditable: true, hideSaveCancel: true, initialIsEditing: isEmpty(summary), required: true }),
+            React.createElement(OpenCaseIssue, { inlineEditable: false, hideSaveCancel: true, initialIsEditing: isEmpty(summary), required: true }),
             React.createElement(MoreOrLess, { maxHeight: 600, appStickyHeaderRef: navBarRef },
                 React.createElement(InlineEdit, { labelProps: { htmlFor: 'issue-section-ktQ1-issue' }, labelContent: React.createElement(React.Fragment, null,
-                        React.createElement(Trans, null, "What are you experiencing? What are you expecting to happen?")), allowInlineEdit: true, hideSaveCancel: true, initialIsEditing: isEmpty(issue), usePreformattedTag: true, content: issue },
+                        React.createElement(Trans, null, "What are you experiencing? What are you expecting to happen?")), allowInlineEdit: false, hideSaveCancel: true, initialIsEditing: isEmpty(issue), usePreformattedTag: true, content: issue },
                     React.createElement(TextArea, { id: "issue-section-ktQ1-issue", name: "issue-section-ktQ1-issue", className: `form-control${hasLargeDescription ? ' form-invalid' : ''}`, "aria-invalid": (issue === null || issue === void 0 ? void 0 : issue.length) > CASE_DEATILS_ISSUE_LIMIT ? 'true' : 'false', value: issue, onChange: onKTQ1IssueChange, "data-tracking-id": "open-case-describe-ktQ1-issue", "aria-describedby": "describeIssueDesc", placeholder: t('Elaborate more on your issue') }),
                     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/Review/Review.js

@@ -6,7 +6,6 @@ import { useCaseDispatch, useCaseSelector } from '../../context/CaseContext';
 import { setCaseDetails } from '../../reducers/CaseReducer';
 import { AccountSelector } from '../AccountInfo/AccountSelector';
 import { OwnerSelector } from '../AccountInfo/OwnerSelector';
-import CaseAlternateId from '../CaseEditView/Tabs/CaseDetails/CaseAlternateId';
 import CaseGroup from '../CaseInformation/CaseGroup';
 import CaseType from '../CaseInformation/CaseType';
 import Description from '../CaseInformation/Description';
@@ -16,6 +15,7 @@ import Severity from '../CaseInformation/Severity';
 import SupportLevel from '../CaseInformation/SupportLevel';
 import CaseLanguageSelector from '../CaseManagement/CaseLanguageSelector';
 import { Cep } from '../CaseManagement/Cep';
+import OpenAlternateID from '../CaseManagement/OpenAlternateID';
 import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
 import { RHAssociatesSelector } from '../CaseManagement/RHAssociatesSelector';
 import CaseContactSelector from '../CaseManagement/SendNotifications/CaseContactSelector';
@@ -42,8 +42,8 @@ export default function Review(props) {
             React.createElement(AllProductsSelector, { isDropdownSelected: true, routeProps: props.routeProps, loadTCOnChange: true, showTCAfterButtonClicked: true, checkEntitledProduct: true }),
             React.createElement(OpenShiftClusterId, null),
             React.createElement(Hostname, null),
-            React.createElement(OpenCaseIssue, { inlineEditable: true, required: true, initialIsEditing: isEmpty(summary), hideSaveCancel: true }),
-            React.createElement(Description, { inlineEditable: true, hideSaveCancel: true }),
+            React.createElement(OpenCaseIssue, { inlineEditable: false, required: true, initialIsEditing: isEmpty(summary), hideSaveCancel: true }),
+            React.createElement(Description, { inlineEditable: false, hideSaveCancel: true }),
             React.createElement(KtQuestions, { inlineEditable: true, hideSaveCancel: true }),
             React.createElement(CaseType, null),
             React.createElement(SupportLevel, null),
@@ -53,6 +53,6 @@ export default function Review(props) {
             React.createElement(CaseLanguageSelector, null),
             canSeeEmailNotifications && React.createElement(CaseContactSelector, null),
             React.createElement(RHAssociatesSelector, null),
-            React.createElement(CaseAlternateId, { hideSaveCancel: true }),
+            React.createElement(OpenAlternateID, { inlineEditable: true, hideSaveCancel: true }),
             React.createElement(Cep, null))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "1.0.38",
+    "version": "1.0.39",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -73,8 +73,8 @@
         "@patternfly/react-core": "4.264.0",
         "@progress/kendo-drawing": "^1.6.0",
         "@progress/kendo-react-pdf": "^3.12.0",
-        "@rh-support/components": "1.2.15",
-        "@rh-support/react-context": "1.0.22",
+        "@rh-support/components": "1.2.16",
+        "@rh-support/react-context": "1.0.23",
         "@rh-support/types": "0.2.0",
         "@rh-support/user-permissions": "1.0.11",
         "@rh-support/utils": "1.0.9",
@@ -142,5 +142,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "5bcb813517a4aff493587c48665551d4aeb1d00e"
+    "gitHead": "af45effefff4d9434a171992428c249f80fc84ce"
 }