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

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { IDiscussion } from '../../../../reducers/CaseDiscussionTabReducer';
 interface IProps {
     caseDiscussions: IDiscussion[];
     onCommentSearch?: (searchResult: string[], searchValue: string) => void;
     isCommentSearchCleared: boolean;
 }
-export declare function CommentSearch(props: IProps): JSX.Element;
+export declare function CommentSearch(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=CommentSearch.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5F,UAAU,MAAM;IACZ,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,eAoG1C"}
+{"version":3,"file":"CommentSearch.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5F,UAAU,MAAM;IACZ,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,qBAqG1C"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/CommentSearch.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Button, TextInput } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import { humanizeSize } from '@rh-support/utils';
-import SearchApi, { INDEX_MODES } from 'js-worker-search';
+import SearchApi from 'js-worker-search';
 import isEmpty from 'lodash/isEmpty';
 import React, { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -32,8 +32,9 @@ export function CommentSearch(props) {
             props.onCommentSearch([], '');
             return;
         }
+        // Removing indexMode: INDEX_MODES.PREFIXES parameter from SearchAPI to match all sub-strings by default
+        // Refer https://github.com/bvaughn/js-worker-search?tab=readme-ov-file#custom-index-mode
         const searchApi = new SearchApi({
-            indexMode: INDEX_MODES.PREFIXES,
             caseSensitive: false,
             matchAnyToken: true,
         });
@@ -81,7 +82,7 @@ export function CommentSearch(props) {
     props.isCommentSearchCleared && !isEmpty(searchValue) && setSearchValue('');
     return (React.createElement("form", { onSubmit: handleSubmit },
         React.createElement("div", { className: "case-comment-input-container", "data-tracking-id": "case-comment-search" },
-            React.createElement(TextInput, { type: "search", value: searchValue, placeholder: t('Search for a comment'), id: "case-comment-search", "aria-label": t('Search for a comment'), onChange: onSearchValChange, "data-tracking-id": "case-comment-search-input", className: "form-control" }),
+            React.createElement(TextInput, { type: "search", value: searchValue, className: "pf-v5-u-mr-lg", placeholder: t('Search for a comment'), id: "case-comment-search", "aria-label": t('Search for a comment'), onChange: (_event, value) => onSearchValChange(value), "data-tracking-id": "case-comment-search-input" }),
             searchValue && (React.createElement(Button, { onClick: clearSearchVal, className: "clear-btn", variant: "plain", "data-tracking-id": "case-comment-search-clear-button", "aria-label": t('Clear this search') },
                 React.createElement(TimesIcon, null))),
             React.createElement(Button, { variant: "secondary", type: "submit", "data-tracking-id": "case-comment-search-button" },

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/DiscussionItemLink.d.ts

@@ -8,6 +8,6 @@ interface IProps {
     children: React.ReactNode;
     itemId: string;
 }
-export declare function DiscussionItemLink(props: IProps): JSX.Element;
+export declare function DiscussionItemLink(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=DiscussionItemLink.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/DiscussionItemLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiscussionItemLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/DiscussionItemLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAE/E,UAAU,MAAM;IACZ,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;CAClB;AASD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAyB/C"}
+{"version":3,"file":"DiscussionItemLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/DiscussionItemLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAE/E,UAAU,MAAM;IACZ,cAAc,EAAE,cAAc,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;CAClB;AASD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBA0B/C"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/DiscussionItemLink.js

@@ -21,5 +21,5 @@ export function DiscussionItemLink(props) {
     return (React.createElement(Link, { replace: true, to: {
             pathname: `/case/${props.caseNumber}/discussion`,
             search: getQueryString(),
-        }, onClick: props.onClick, "data-tracking-id": `${!props.isCopyLink ? 'jumptocomment-' : 'case-'}${trackingIdMap[props.discussionType]}` }, props.children));
+        }, className: "case-public-private-link", onClick: props.onClick, "data-tracking-id": `${!props.isCopyLink ? 'jumptocomment-' : 'case-'}${trackingIdMap[props.discussionType]}` }, props.children));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/JumpAndCopyLink.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { DiscussionType } from '../../../../reducers/CaseDiscussionTabReducer';
 interface IProps {
     caseNumber: string;
     cardId: string;
     discussionType: DiscussionType;
 }
-declare function JumpAndCopyLink(props: IProps): JSX.Element;
+declare function JumpAndCopyLink(props: IProps): React.JSX.Element;
 export { JumpAndCopyLink };
 //# sourceMappingURL=JumpAndCopyLink.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/JumpAndCopyLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JumpAndCopyLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/JumpAndCopyLink.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAG/E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,cAAc,CAAC;CAClC;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,eA8BrC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"JumpAndCopyLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/JumpAndCopyLink.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAG/E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,cAAc,CAAC;CAClC;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,qBA8BrC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/PostComment/useMarkdownFileUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMarkdownFileUploader.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/PostComment/useMarkdownFileUploader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAcxE,UAAU,MAAM;IACZ,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,QAAkB,CAAC;AAE/C,wBAAgB,uBAAuB,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,MAAM;;;;;;+BAyDpD,QAAQ,WAAW,CAAC;;EA2C/D"}
+{"version":3,"file":"useMarkdownFileUploader.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/PostComment/useMarkdownFileUploader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAcxE,UAAU,MAAM;IACZ,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,eAAe,QAAkB,CAAC;AAE/C,wBAAgB,uBAAuB,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,MAAM;;;;;;+BAyDpD,OAAO,CAAC,WAAW,CAAC;;EA2C/D"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/PostComment.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { IDiscussion } from '../../../../reducers/CaseDiscussionTabReducer';
 interface IProps {
     caseNumber: string;
@@ -10,6 +11,6 @@ interface IProps {
     defaultIsPublic?: boolean;
     allDiscussions: IDiscussion[];
 }
-export declare function PostComment(props: IProps): JSX.Element;
+export declare function PostComment(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PostComment.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/PostComment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostComment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/PostComment.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAsB5F,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,WAAW,EAAE,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,eA8fxC"}
+{"version":3,"file":"PostComment.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/PostComment.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,OAAO,EAAkB,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAsB5F,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,WAAW,EAAE,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,qBA6iBxC"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/PostComment.js

@@ -34,6 +34,7 @@ import { PDFContext } from '../../PDFContainer';
 import { useMarkdownFileUploader } from './PostComment/useMarkdownFileUploader';
 import { VerifyCaseStatusModal } from './VerifyCaseStatusModal/VerifyCaseStatusModal';
 export function PostComment(props) {
+    var _a, _b;
     const { t } = useTranslation();
     const caseUpdateError = useCaseUpdateErrorMessage();
     let { caseNumber } = props;
@@ -61,6 +62,7 @@ export function PostComment(props) {
             const retrievedComment = yield getCommentTypeFromPreference();
             const retrievedCommentSignature = yield getCommentSignature();
             const defaultCommentType = retrievedComment ? retrievedComment : EditorMode.PLAIN;
+            // @ts-ignore
             setCommentType(defaultCommentType);
             const defaultCommentSignature = retrievedCommentSignature || '';
             setCommentSignature(defaultCommentSignature);
@@ -77,6 +79,7 @@ export function PostComment(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [cssCommentAgreed, setCssCommentAgreed] = useState(false);
     const [isProcessing, setIsProcessing] = useState(isPostingComment || isUploadingAttachments);
     const { globalMetadataState: { loggedInUser, loggedInUserRights, loggedInUsersAccount }, } = useContext(GlobalMetadataStateContext);
     const { onFileSelect, onFileAttach, onFileDelete, isUploadingFile, isMarkdownFileUploadInProgress, cancelFileUpload, } = useMarkdownFileUploader({
@@ -84,11 +87,14 @@ export function PostComment(props) {
         secureSupport: loggedInUsersAccount.data.secureSupport,
         onAttachmentAdded: props.onAttachmentAdded,
     });
-    const { selectedNotificationContacts, status, contactSSOName } = useCaseSelector((state) => ({
+    const { selectedNotificationContacts, status, contactSSOName, selectedAccountDetails } = useCaseSelector((state) => ({
         status: state.caseDetails.status,
         contactSSOName: state.caseDetails.contactSSOName,
         selectedNotificationContacts: state.selectedNotificationContacts,
+        selectedAccountDetails: state.selectedAccountDetails,
     }), isEqual);
+    const isConfirmedStateSideSupport = ((_a = loggedInUsersAccount === null || loggedInUsersAccount === void 0 ? void 0 : loggedInUsersAccount.data) === null || _a === void 0 ? void 0 : _a.hasConfirmedStatesideSupport) ||
+        ((_b = selectedAccountDetails === null || selectedAccountDetails === void 0 ? void 0 : selectedAccountDetails.data) === null || _b === void 0 ? void 0 : _b.hasConfirmedStatesideSupport);
     const caseDispatch = useCaseDispatch();
     const [isCommentTooLong, setIsCommentTooLong] = useState(false);
     const canEditCase = useCanEditCase();
@@ -190,6 +196,7 @@ export function PostComment(props) {
                 yield props.onCommentAdded();
                 resetCommentSection();
                 ToastNotification.addSuccessMessage(t('Comment submitted'));
+                setCssCommentAgreed(false);
             }
             catch (e) {
                 caseUpdateError.showError(e, t('Could not submit comment'));
@@ -202,7 +209,11 @@ export function PostComment(props) {
     const handleCheckboxToggle = () => {
         setIsPublic((publicComment) => !publicComment);
     };
-    const isPostCommentDisabled = isProcessing || !commentText || isCommentTooLong;
+    function isCommentSignatureMatch() {
+        return commentText.trim() === commentSignature;
+    }
+    const isPostCommentDisabled = isProcessing || !commentText || isCommentSignatureMatch();
+    const isFileUploadDisabled = isConfirmedStateSideSupport && !cssCommentAgreed;
     const onFileUploadClick = () => {
         ToastNotification.addInfoMessage(t('Uploading Attachment(s)'));
     };
@@ -247,6 +258,7 @@ export function PostComment(props) {
             // update state
             resetAttachmentSection();
             props.onAttachmentAdded();
+            setCssCommentAgreed(false);
         }
         isUploadingAttachmentPrevious.current = isUploadingAttachments;
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -279,7 +291,7 @@ export function PostComment(props) {
         if (canEditCase.alert())
             return;
     };
-    const fileUploadButton = (React.createElement(React.Fragment, null, canEditCase.isCaseNotEditable ? (React.createElement(Button, { variant: ButtonVariant.secondary, onClick: showCaseIsNotEditableAlert }, t(isPublic || !canPostPrivateComments ? 'Attach files' : 'Attach private files'))) : (React.createElement(FileSelectorButton, { buttonLabel: t(isPublic || !canPostPrivateComments ? 'Attach files' : 'Attach private files'), isSessionId: false, isPrivate: !isPublic, "data-tracking-id": "case-discussion-file-selector-button" }))));
+    const fileUploadButton = (React.createElement(React.Fragment, null, canEditCase.isCaseNotEditable ? (React.createElement(Button, { variant: ButtonVariant.secondary, onClick: showCaseIsNotEditableAlert, isDisabled: isFileUploadDisabled }, t(isPublic || !canPostPrivateComments ? 'Attach files' : 'Attach private files'))) : (React.createElement(FileSelectorButton, { buttonLabel: t(isPublic || !canPostPrivateComments ? 'Attach files' : 'Attach private files'), isSessionId: false, isPrivate: !isPublic, "data-tracking-id": "case-discussion-file-selector-button", isDisabled: isFileUploadDisabled }))));
     const markdownToolbarFileSelectorBtn = (React.createElement(Button, { type: "button", onClick: open, "data-tracking-id": "inline-image-attach-file", isDisabled: isUploadingFile, variant: ButtonVariant.link, icon: React.createElement(PlusIcon, null) }, t(isPublic ? 'Attach files' : 'Attach private files')));
     // This is where we get all attachments to show in dropdown
     const getAllAttachments = () => {
@@ -312,8 +324,11 @@ export function PostComment(props) {
         let parsedPassedReply = getReplyText(passedReply, props.commentCreator);
         return (parsedPassedReply === null || parsedPassedReply === void 0 ? void 0 : parsedPassedReply.trim()) === (commentText === null || commentText === void 0 ? void 0 : commentText.trim());
     };
-    const isSubmitDisabled = isReplyDisabled() || isCommentEmpty || isPostCommentDisabled;
-    return (React.createElement("div", { className: `pf-u-mb-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, ref: componentRef },
+    const isSubmitDisabled = isReplyDisabled() ||
+        isCommentEmpty ||
+        isPostCommentDisabled ||
+        (isConfirmedStateSideSupport && !cssCommentAgreed);
+    return (React.createElement("div", { className: `pf-v5-u-mb-md ${isExportingPDF ? 'hide-in-pdf' : ''}`, ref: componentRef },
         React.createElement(MarkdownEditor, { className: `${!isPublic && canPostPrivateComments ? 'is-private' : ''}`, disabled: isProcessing || canEditCase.isCaseNotEditable, "aria-label": "comment text area", showMarkdownPlainTextToggle: true, editorMode: commentType, onFocus: () => setIsTextAreaFocused(true), onBlur: onTextAreaBlur, onChange: onCommentTextChange, value: commentText, rows: isTextAreaFocused ? 12 : 4, bindTextArea: textAreaRef, onCommentExceedCharsLimit: onCommentExceedCharsLimit, mdPlaceholder: isPublic || !canPostPrivateComments
                 ? 'Add a comment using markdown'
                 : 'Add a comment or attach a file privately', plainTextPlaceholder: isPublic || !canPostPrivateComments
@@ -328,7 +343,12 @@ export function PostComment(props) {
                 isUploadingFile: isMarkdownFileUploadInProgress,
                 onClipboardPaste,
             } }),
-        isProcessing ? (React.createElement(LoadingIndicator, { isInline: true, size: "sm" })) : (React.createElement("div", { className: "pf-l-flex post-comment-btn-group push-top-narrow" },
+        isConfirmedStateSideSupport && (React.createElement("div", { className: "pf-v5-u-mt-md pf-v5-u-mb-lg" },
+            React.createElement("input", { type: "checkbox", id: "css-case-comment-agreement", name: "css-case-comment-agreement", "data-tracking-id": "css-case-comment-agreement", checked: cssCommentAgreed, onChange: (e) => setCssCommentAgreed(e.target.checked) }),
+            React.createElement("label", { htmlFor: "css-case-comment-agreement", className: "pf-v5-u-font-weight-normal pf-v5-u-font-size-sm" },
+                React.createElement(Trans, null, "I will not transmit controlled unclassified information to or export it from the Red Hat Customer Portal."),
+                React.createElement("span", { className: "form-required", "aria-hidden": "true" }, "*")))),
+        isProcessing ? (React.createElement(LoadingIndicator, { isInline: true, size: "sm" })) : (React.createElement("div", { className: "pf-v5-l-flex post-comment-btn-group push-top-narrow" },
             isModalOpen && loggedInUserRights.data.isInternal() && isPublic && (React.createElement(VerifyCaseStatusModal, { onClose: onCancel, onConfirm: onConfirm, isUpdating: isPostingComment, caseNumber: props.caseNumber })),
             React.createElement(Button, { "data-tracking-id": "postcomment-submit-button", type: "button", variant: ButtonVariant.primary, onClick: loggedInUser.data.isInternal && isPublic ? onBtnClick : isNotInternalConfirm, isDisabled: isSubmitDisabled, className: "postcomment-submit" },
                 React.createElement(Trans, null, "Submit")),
@@ -338,9 +358,9 @@ export function PostComment(props) {
                 React.createElement(Trans, null, "Cancel")),
             canPostPrivateComments && (React.createElement("span", { className: "post-comment-checkbox" },
                 React.createElement(Checkbox, { label: t('Private'), isChecked: !isPublic && canPostPrivateComments, onChange: handleCheckboxToggle, "aria-label": t('Private'), id: "private-comment", name: "private-comment", "data-tracking-id": "private-comment-checkbox" }))))),
-        React.createElement(FileUpload, { className: `file-upload-section ${hasSomeSelectedFilesLocal ? 'card card-white pf-u-mt-lg pf-u-p-lg' : ''}`, idToUploadTo: caseNumber, onUploadClick: onFileUploadClick, isSessionId: false, isSecureSupport: loggedInUsersAccount.data.secureSupport, isPrivate: !isPublic, autoUploadOnSelect: true, showDescriptionInfoMsg: true }),
-        React.createElement("span", Object.assign({}, getRootProps()),
+        React.createElement(FileUpload, { className: `file-upload-section ${hasSomeSelectedFilesLocal ? 'card card-white pf-v5-u-mt-lg pf-v5-u-p-lg' : ''}`, idToUploadTo: caseNumber, onUploadClick: onFileUploadClick, isSessionId: false, isSecureSupport: loggedInUsersAccount.data.secureSupport, isPrivate: !isPublic, autoUploadOnSelect: true, showDescriptionInfoMsg: true }),
+        React.createElement("span", Object.assign({}, getRootProps(), { tabIndex: -1 }),
             React.createElement("input", Object.assign({ style: { display: 'none !important' } }, getInputProps()))),
         !loggedInUsersAccount.data.secureSupport && (React.createElement(NewFeaturePopoverAnnouncement, { "aria-label": "Attach and embed images! You'll find all of your uploaded images here.", featureName: FeatureAnnouncementKeys.MARKDOWN_INLINE_IMAGES, sectionRef: componentRef, bodyContent: React.createElement("div", null,
-                React.createElement(Trans, null, "Attach and embed images! You'll find all of your uploaded images here.")), reference: () => document.getElementById('md-editor-toolbar-file-selector') }))));
+                React.createElement(Trans, null, "Attach and embed images! You'll find all of your uploaded images here.")), triggerRef: () => document.getElementById('md-editor-toolbar-file-selector') }))));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 interface IProps {
     onConfirm: (commentBody?: string) => void;
     onClose: () => void;
     caseNumber?: string;
     isUpdating: boolean;
 }
-export declare function VerifyCaseStatusModal(props: IProps): JSX.Element;
+export declare function VerifyCaseStatusModal(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=VerifyCaseStatusModal.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerifyCaseStatusModal.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.tsx"],"names":[],"mappings":"AAkBA,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,eAsIlD"}
+{"version":3,"file":"VerifyCaseStatusModal.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAa3E,UAAU,MAAM;IACZ,SAAS,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,qBAsIlD"}

package/lib/esm/components/CaseEditView/Tabs/CaseDiscussion/VerifyCaseStatusModal/VerifyCaseStatusModal.js

@@ -7,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button, ButtonVariant, Modal, ModalVariant, Select, SelectOption } from '@patternfly/react-core';
+import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { ToastNotification } from '@rh-support/components';
 import { GlobalMetadataStateContext, useCanEditCase } from '@rh-support/react-context';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
@@ -62,7 +63,7 @@ export function VerifyCaseStatusModal(props) {
         yield updateStatusState(statusChange);
         setIsVerifyCaseStatusLoading(true);
     });
-    const updateStatusState = (statusVal, onStatusUpdate = null) => __awaiter(this, void 0, void 0, function* () {
+    const updateStatusState = (statusVal_1, ...args_1) => __awaiter(this, [statusVal_1, ...args_1], void 0, function* (statusVal, onStatusUpdate = null) {
         if (status !== statusVal) {
             setStatusUpdating(caseOverviewDispatch, true);
             try {
@@ -97,6 +98,6 @@ export function VerifyCaseStatusModal(props) {
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
         React.createElement(Select, { "aria-label": t(status), id: "verify-case-status", selections: statusChange, onSelect: onStatusChange, isOpen: showDropdown, isDisabled: !canManageCase ||
                 caseOverviewState.allCaseStatuses.isFetching ||
-                (caseOverviewState.caseStatusUpdating && isCaseUpdating), menuAppendTo: document.body, validated: !status ? 'error' : 'default', placeholderText: t(status), onToggle: onDropdownToggle }, caseOverviewState.allCaseStatuses.data.map((option, index) => (React.createElement(SelectOption, { key: index, value: option, isDisabled: option === status },
+                (caseOverviewState.caseStatusUpdating && isCaseUpdating), menuAppendTo: document.body, validated: !status ? 'error' : 'default', placeholderText: t(status), onToggle: (_event, toggle) => onDropdownToggle(toggle) }, caseOverviewState.allCaseStatuses.data.map((option, index) => (React.createElement(SelectOption, { key: index, value: option, isDisabled: option === status },
             React.createElement(Trans, null, option)))))));
 }

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.d.ts

@@ -1,5 +1,8 @@
+import './CaseHistory.css';
+import React from 'react';
 interface IProps {
+    caseNumber: string;
 }
-export default function CaseHistory(props: IProps): JSX.Element;
-export {};
+declare const CaseHistory: (props: IProps) => React.JSX.Element;
+export default CaseHistory;
 //# sourceMappingURL=CaseHistory.d.ts.map

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAEA,UAAU,MAAM;CAAG;AAEnB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eAEhD"}
+{"version":3,"file":"CaseHistory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/CaseEditView/Tabs/CaseHistory/CaseHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,UAAW,MAAM,sBAMjC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/CaseHistory.js

@@ -1,4 +1,8 @@
+import './CaseHistory.css';
 import React from 'react';
-export default function CaseHistory(props) {
-    return React.createElement(React.Fragment, null, "CaseHistory");
-}
+import Timeline from './Timeline';
+const CaseHistory = (props) => {
+    return (React.createElement("div", null,
+        React.createElement(Timeline, { caseNumber: props.caseNumber })));
+};
+export default CaseHistory;

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.css

@@ -0,0 +1,331 @@
+* {
+    box-sizing: border-box;
+}
+
+.timeline {
+    position: relative;
+    max-width: 100%;
+    margin: 24px auto;
+    padding: 0 20px;
+}
+
+.timeline-empty::after {
+    display: none;
+}
+.timeline::before {
+    bottom: var(--timeline-bottom, 0px);
+}
+
+.right-node {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+}
+.content-date-right-history {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.timelineMenu button.pf-v5-c-button.pf-m-primary {
+    margin-bottom: 31px;
+}
+
+/* fixes a bug with datepicker month input being bigger than the day */
+.timelineMenu div.pf-v5-c-calendar-month__header-year span.pf-v5-c-form-control input {
+    margin-bottom: -3px;
+}
+
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 1px;
+    background-color: #6a6e73;
+    top: 30px;
+
+    /* This offset is needed to keep it responsive */
+    --timeline-bottom-offset: -30px;
+
+    /* This value is calculated in timeline.tsx */
+    bottom: calc(var(--timeline-bottom) + var(--timeline-bottom-offset, 18.35%));
+    left: calc(15% + 14.5px);
+    transform: translateX(-50%);
+}
+
+.timeline-loading-spinner {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.timeline-container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: white;
+    border: 4px solid #ff9f55;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.timeline-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    margin: 0 -0.8rem;
+}
+
+.timeline-pagination {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+}
+#options-menu-top-pagination {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+}
+.timeline-sort-order-select {
+    width: auto;
+    margin-left: 1rem;
+}
+
+.timeline-controls:last-of-type {
+    justify-content: flex-start;
+}
+
+.timeline-controls:last-of-type .timeline-pagination {
+    flex-grow: 0;
+}
+
+.timeline-node {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+    margin-bottom: 32px;
+    min-height: 80px;
+    max-height: 1em;
+}
+
+.timeline-avatar {
+    position: absolute;
+    left: calc(15% + 15px);
+    transform: translateX(-91%);
+    top: 12px;
+    z-index: 5;
+}
+
+.timeline-marker {
+    position: absolute;
+    background-color: #ff9f55;
+    border-radius: 50%;
+    width: 10px;
+    height: 10px;
+    z-index: 2;
+    left: calc(15% + 15px);
+    transform: translateX(-195%);
+    top: 25px;
+}
+
+.left-node {
+    flex: 0 0 15%;
+    max-width: 20%;
+    padding-right: 24px;
+    margin-left: -2em;
+    margin-right: 24px;
+}
+
+.content-date-left-history {
+    font-family: 'Red Hat Display';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    text-align: right;
+}
+
+.content-time-left-history {
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: 'Red Hat Text';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    text-align: right;
+    line-height: 30px;
+    padding-left: 1em;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.content-date-right-history {
+    color: #151515;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: 'Red Hat Display';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.content-time-right-history {
+    color: var(--Text-and-links-pf-global--Color--100, #151515);
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: 'Red Hat Text';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 21px;
+}
+
+.right-node {
+    flex-grow: 1;
+    padding-left: 2.8%;
+    margin-left: 1%;
+}
+
+.right-node::before {
+    content: ' ';
+    position: absolute;
+    top: 22.5px;
+    width: 0;
+    height: 0;
+    border: medium solid white;
+    border-width: 7px 7px 7px 0;
+    border-color: transparent white transparent transparent;
+    transform: translateX(-100%);
+}
+
+.internal.right-node::before {
+    border-right-color: #ee0000;
+}
+
+.customer.right-node::before {
+    border-right-color: #316dc1;
+}
+
+.timeline-internal {
+    background-color: #ee0000;
+}
+
+.timeline-customer {
+    background-color: #316dc1;
+}
+
+.timeline-avatar-internal {
+    border-color: #ee0000;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.timeline-avatar-customer {
+    border-color: #316dc1;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.contentTimeline {
+    padding: 16px;
+    /* position: absolute; */
+    border-radius: 3px;
+    /* margin-bottom: 32px; */
+}
+
+.content-right-history {
+    background-color: white;
+    border-left-width: 3px !important;
+    border-left-style: solid !important;
+    border-radius: 3px;
+    border: 1px solid #d2d2d2;
+    width: 100%;
+}
+
+.content-right-customer {
+    border-left-color: #316dc1 !important;
+}
+
+.content-right-internal {
+    border-left-color: #ee0000 !important;
+}
+
+ul#case-history-paginated-timeline {
+    list-style-type: none !important;
+    /* this is to deal with firefox they add in a ::marker and it is visible */
+}
+
+.case-history-timeline-search {
+    margin-bottom: 1%;
+    width: 30%;
+}
+
+.timelineMenu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.case-history-timeline-datepicker {
+    display: flex;
+    margin-bottom: 1%;
+    /* position: absolute; */
+    justify-content: flex-end;
+    width: 64.2%;
+}
+
+.empty-state-date-picker {
+    margin-left: 82%;
+}
+
+.timeline-sort-order-select {
+    display: flex;
+    justify-content: flex-end;
+    margin: 1rem;
+    width: 93.2%;
+}
+
+@-moz-document url-prefix() {
+    .timeline-controls {
+        padding: 0.5rem 1rem;
+    }
+
+    #options-menu-top-pagination {
+        width: 15em;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .timeline::after {
+        left: 20px;
+    }
+
+    .timeline-node {
+        flex-direction: column;
+    }
+
+    .left-node,
+    .right-node {
+        max-width: 100%;
+        padding: 0;
+    }
+
+    .timeline-avatar,
+    .timeline-marker {
+        left: 0%;
+        transform: translateX(-50%);
+    }
+
+    .right-node::before {
+        left: 20px;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent white transparent transparent;
+    }
+
+    .contentTimeline {
+        margin-left: 40px;
+    }
+}

package/lib/esm/components/CaseEditView/Tabs/CaseHistory/Timeline.d.ts

@@ -0,0 +1,7 @@
+import './Timeline.css';
+import React from 'react';
+declare const Timeline: ({ caseNumber }: {
+    caseNumber: any;
+}) => React.JSX.Element;
+export default Timeline;
+//# sourceMappingURL=Timeline.d.ts.map