@rh-support/troubleshoot 2.1.11 → 2.1.13-beta-0

package/lib/esm/components/Recommendations/RulesModal.js

@@ -8,12 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { pcm } from '@cee-eng/hydrajs';
-import { Accordion, Button, Modal } from '@patternfly/react-core';
+import { Accordion, Button, Card, CardBody, CardExpandableContent, CardHeader, CardTitle, Modal, } from '@patternfly/react-core';
 import { useFetch } from '@rh-support/components';
 import { getResTypeFromUrl } from '@rh-support/utils';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useCaseDispatch } from '../../context/CaseContext';
 import { SessionRestoreDispatchContext, SessionRestoreStateContext } from '../../context/SessionRestoreContext';
+import { setCaseState } from '../../reducers/CaseReducer';
 import { createOrUpdateSessionResources, getSessResFromRecs } from '../../reducers/SessionRestoreReducer';
 import { AttachmentStateContext } from '../shared/fileUpload/reducer/AttachmentReducerContext';
 import { EARuleInfoAccordion } from './EARules/EARuleInfoAccordion';
@@ -40,6 +42,9 @@ export function InsightResultModal(props) {
     const { request: resolveSessionRequest, isFetching } = useFetch(pcm.preCase.session.resolveSession);
     const { sessionRestore: { activeSessionId, sessionResourceTracking }, } = useContext(SessionRestoreStateContext);
     const [isModalVisible, setIsModalVisible] = useState(false);
+    const caseDispatch = useCaseDispatch();
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    // To handle self solving of issues
     const handleSolvedIssue = () => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c, _d;
         try {
@@ -59,6 +64,9 @@ export function InsightResultModal(props) {
     const onModalToggle = () => {
         setIsModalVisible((visible) => !visible);
     };
+    const onExpand = (event, id) => {
+        setIsExpanded(!isExpanded);
+    };
     useEffect(() => {
         props.isOpen &&
             createOrUpdateSessionResources(sessionRestoreDispatch, activeSessionId, sessionResourceTracking, SessionResourceSource.INSIGHTS, getSessResFromRecs(props.insightResults, SessionResourceVisibility.PRESENTED));
@@ -86,14 +94,22 @@ export function InsightResultModal(props) {
         setCanShowNewTag(!(total === trueValues));
     }, [selectedLocalFiles, props.EARule]);
     if (props.isRenderedMain) {
-        return (React.createElement("div", { className: "card card-white card-support top-recommendations" },
-            React.createElement("h3", { className: "card-heading popular-solutions" },
-                React.createElement(Trans, null, "File recommendations")),
-            React.createElement("div", { className: "card-body file-recommendations" },
-                React.createElement(Accordion, { headingLevel: "h5", asDefinitionList: false, isBordered: true },
-                    props.insightResults.map((doc) => (React.createElement(InsightsRuleInfo, { duplicateKeys: duplicateKeys, showNewTag: canShowNewTag, key: doc.id + doc.attachmentId, doc: doc }))),
-                    props.EARule.length > 0 &&
-                        props.EARule.map((rule, index) => (React.createElement(EARuleInfoAccordion, { showNewTag: canShowNewTag, key: `${index}_eaRule`, rule: rule })))))));
+        setCaseState(caseDispatch, { isFileRecommendationsTriggered: true });
+        return (React.createElement(Card, { id: "expandable-card", className: "card-support top-recommendations", isExpanded: isExpanded, isCompact: true },
+            React.createElement(CardHeader, { onExpand: onExpand, toggleButtonProps: {
+                    id: 'toggle-button1',
+                    'aria-label': t('File recommendations'),
+                    'aria-labelledby': 'expandable-card-title toggle-button1',
+                    'aria-expanded': isExpanded,
+                }, className: "popular-solutions" },
+                React.createElement(CardTitle, { id: "expandable-card-title", className: "card-title" },
+                    React.createElement(Trans, null, "File recommendations"))),
+            React.createElement(CardExpandableContent, null,
+                React.createElement(CardBody, { className: "file-recommendation" },
+                    React.createElement(Accordion, { headingLevel: "h5", asDefinitionList: false, isBordered: true },
+                        props.insightResults.map((doc) => (React.createElement(InsightsRuleInfo, { duplicateKeys: duplicateKeys, showNewTag: canShowNewTag, key: doc.id + doc.attachmentId, doc: doc }))),
+                        props.EARule.length > 0 &&
+                            props.EARule.map((rule, index) => (React.createElement(EARuleInfoAccordion, { showNewTag: canShowNewTag, key: `${index}_eaRule`, rule: rule }))))))));
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(RecommendationFeedbackModal, { isModalOpen: isModalVisible, handleModalToggle: onModalToggle, modalContent: t(`Great, we're glad that resolved your issue`) }),

package/lib/esm/components/RemoteRider/RemoteRiderAcceptanceModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteRiderAcceptanceModal.d.ts","sourceRoot":"","sources":["../../../../src/components/RemoteRider/RemoteRiderAcceptanceModal.tsx"],"names":[],"mappings":"AAOA,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,MAAM,eA2B/D"}
+{"version":3,"file":"RemoteRiderAcceptanceModal.d.ts","sourceRoot":"","sources":["../../../../src/components/RemoteRider/RemoteRiderAcceptanceModal.tsx"],"names":[],"mappings":"AAMA,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,MAAM,eA2B/D"}

package/lib/esm/components/RemoteRider/RemoteRiderAcceptanceModal.js

@@ -10,8 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { publicApi } from '@cee-eng/hydrajs';
 import { AcceptTermsModal, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
+import { TncConstants } from '@rh-support/utils';
 import React, { useContext } from 'react';
-import { TnC } from '../../constants/tncConstants';
 export default function RemoteRiderAcceptanceModal(props) {
     const { globalMetadataState: { loggedInUser }, } = useContext(GlobalMetadataStateContext);
     const { request, isFetching } = useFetch(publicApi.kase.acknowledgeRemoteSessionTerms, { propgateErrors: true });
@@ -24,5 +24,5 @@ export default function RemoteRiderAcceptanceModal(props) {
             props.onFailure && props.onFailure();
         }
     });
-    return (React.createElement(AcceptTermsModal, { isSubmitting: isFetching, siteCode: TnC.REMOTE_RIDER_SITE_CODE, eventCode: TnC.REMOTER_RIDER_EVENT_CODE, loggedInUser: loggedInUser.data.ssoUsername, isModalOpen: props.isModalOpen, onModalClose: props.onModalClose, dataTrackingId: props.isCaseDetailsPage ? 'rar-case-details' : 'rar-case-submit', onConfirm: onConfirm }));
+    return (React.createElement(AcceptTermsModal, { isSubmitting: isFetching, siteCode: TncConstants.REMOTE_RIDER_SITE_CODE, eventCode: TncConstants.REMOTER_RIDER_EVENT_CODE, loggedInUser: loggedInUser.data.ssoUsername, isModalOpen: props.isModalOpen, onModalClose: props.onModalClose, dataTrackingId: props.isCaseDetailsPage ? 'rar-case-details' : 'rar-case-submit', onConfirm: onConfirm }));
 }

package/lib/esm/components/Review/Review.js

@@ -48,13 +48,13 @@ export default function Review(props) {
             React.createElement(CaseType, { hideIdea: true }),
             React.createElement(SupportLevel, null),
             React.createElement(Flex, { direction: { default: 'column', '2xl': 'row' } },
-                React.createElement(FlexItem, { flex: { default: 'flex_1' } },
+                React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-u-mb-xl" },
                     React.createElement(Severity, { showSeverityInfoIcon: true, onSeverityChange: onSeverityChange })),
-                React.createElement(FlexItem, { flex: { default: 'flex_1' } },
+                React.createElement(FlexItem, { flex: { default: 'flex_1' }, className: "pf-u-mb-xl" },
                     React.createElement(ContactPhoneNumber, null))),
             React.createElement(ContactPhoneNumberAlert, null),
             React.createElement(Fts, { inlineEditable: true, initialIsEditing: isEmpty(contactInfo24x7), hideSaveCancel: true }),
-            React.createElement(CaseLanguageSelector, null),
+            React.createElement(CaseLanguageSelector, { "data-tracking-id": "review-preferred-language" }),
             React.createElement(CaseGroup, null),
             canSeeEmailNotifications && React.createElement(CaseContactSelector, null),
             React.createElement(RHAssociatesSelector, null),

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

@@ -1 +1 @@
-{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AA4BA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA4RjC"}
+{"version":3,"file":"SubmitCase.d.ts","sourceRoot":"","sources":["../../../../src/components/SubmitCase/SubmitCase.tsx"],"names":[],"mappings":"AA4BA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA6SjC"}

package/lib/esm/components/SubmitCase/SubmitCase.js

@@ -1,5 +1,5 @@
 import { Env, publicApi } from '@cee-eng/hydrajs';
-import { ActionList, ActionListItem, Button, Text, TextVariants } from '@patternfly/react-core';
+import { ActionList, ActionListItem, Button, Text, TextVariants, Tooltip } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { AlertMessage, AlertType, useFetch } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
@@ -83,8 +83,8 @@ export default function SubmitCase() {
         : attachmentState.caseFiles.selectedLocalFiles.every((localFile) => !isUploadedAndAnalyzed(localFile));
     const isNotAnIdea = caseType !== PreviousCaseTypes.FEATURE_ENHANCEMENT;
     return (React.createElement("article", { className: "gird-main" },
-        React.createElement(AlertMessage, { className: "push-top", title: t('Failed to add user.'), variant: AlertType.DANGER, show: addNotifiedUserError }),
-        React.createElement(AlertMessage, { className: "push-top", variant: AlertType.DANGER, show: caseCreationError, title: t("Sorry, we're experiencing an error"), isInline: true },
+        React.createElement(AlertMessage, { className: "pf-u-mt-lg", title: t('Failed to add user.'), variant: AlertType.DANGER, show: addNotifiedUserError }),
+        React.createElement(AlertMessage, { className: "pf-u-mt-lg", variant: AlertType.DANGER, show: caseCreationError, title: t("Sorry, we're experiencing an error"), isInline: true },
             React.createElement(React.Fragment, null, caseCreationErrorMessage)),
         !isCreatingCase && !caseCreationError && (React.createElement(React.Fragment, null,
             showRemoteRiderBanner && !loggedInUser.data.isInternal && (React.createElement(RemoteRiderBanner, { onConfirm: onRemoteRiderConfirm, onClose: onRemoteRiderClose, caseNumber: caseNumber, isSecureSupport: loggedInUsersAccount.data.secureSupport })),
@@ -92,7 +92,7 @@ export default function SubmitCase() {
                 React.createElement("p", { className: "kicker kicker-sm pf-u-mb-sm" }, !isEmpty(RouteUtils.seBasePath) &&
                     !isUploadingAttachment(attachmentState.caseFiles.selectedLocalFiles) ? (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "submit-page-title pf-u-mb-lg" },
-                        React.createElement(CheckCircleIcon, { size: "lg" }),
+                        React.createElement(CheckCircleIcon, { className: "submit-case-check-icon", size: "lg" }),
                         ' ',
                         React.createElement(Text, { className: "pf-u-ml-md pf-u-mb-0", component: TextVariants.h1 },
                             React.createElement(Trans, null, "We've added your case to our queue"))),
@@ -101,7 +101,7 @@ export default function SubmitCase() {
                         "\u00A0",
                         React.createElement(Link, { to: `/case/${caseNumber}`, "data-tracking-id": "get-support-queued-case-number", className: viewDisabled ? 'case-link-disabled' : '' }, caseNumber)))) : (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "submit-page-title" },
-                        React.createElement(CheckCircleIcon, { size: "lg" }),
+                        React.createElement(CheckCircleIcon, { className: "submit-case-check-icon", size: "lg" }),
                         ' ',
                         React.createElement(Text, { component: TextVariants.h1 },
                             React.createElement(Trans, null, "We\u2019ve added your case to our queue"))),
@@ -132,9 +132,10 @@ export default function SubmitCase() {
                 React.createElement("div", null,
                     React.createElement(ActionList, null,
                         React.createElement(ActionListItem, null,
-                            React.createElement(Button, { component: "a", href: `${getRedhatDotComHost(Env.getEnvName())}/wapps/ugc/protected/${'personalInfo.html'}`, target: "_blank", variant: "secondary", "data-tracking-id": "get-support-update-info" }, "Update info")),
-                        React.createElement(ActionListItem, null,
-                            React.createElement(Button, { className: "pf-u-ml-md", component: (props) => React.createElement(Link, Object.assign({}, props, { to: `/case/${caseNumber}` })), href: getCaseURL(), variant: "primary", "data-tracking-id": "get-support-view-case", isDisabled: viewDisabled }, "View case"))))),
+                            React.createElement(Button, { component: "a", href: `${getRedhatDotComHost(Env.getEnvName())}/wapps/ugc/protected/${'personalInfo.html'}`, target: "_blank", variant: "secondary", "data-tracking-id": "get-support-update-info", className: "update-info-button" }, "Update info")),
+                        React.createElement(ActionListItem, null, viewDisabled ? (React.createElement(React.Fragment, null,
+                            React.createElement(Tooltip, { content: t('File upload in progress.'), position: "bottom" },
+                                React.createElement(Button, { className: "pf-u-ml-md", component: "a", href: getCaseURL(), variant: "primary", "data-tracking-id": "get-support-view-case", "aria-label": t('View case'), isAriaDisabled: viewDisabled }, "View case")))) : (React.createElement(Button, { className: "pf-u-ml-md", component: (props) => React.createElement(Link, Object.assign({}, props, { to: `/case/${caseNumber}` })), variant: "primary", "data-tracking-id": "get-support-view-case", "aria-label": t('View case') }, "View case")))))),
             !isEmpty(attachmentState.caseFiles.selectedLocalFiles) && (React.createElement(FileUploader, { idToUploadTo: caseNumber, isSessionId: false, isSecureSupport: loggedInUsersAccount.data.secureSupport })),
             React.createElement("div", null,
                 (!isEmpty(topContent.data) || !rulesState.EARules.rules || !clusterRecommendations) &&

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

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/Suggestions.tsx"],"names":[],"mappings":"AAgBA,UAAU,MAAM;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eAiGhD"}
+{"version":3,"file":"Suggestions.d.ts","sourceRoot":"","sources":["../../../../src/components/Suggestions/Suggestions.tsx"],"names":[],"mappings":"AAgBA,UAAU,MAAM;IACZ,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,MAAM,eAsGhD"}

package/lib/esm/components/Suggestions/Suggestions.js

@@ -45,7 +45,7 @@ export default function Suggestions(props) {
     return (React.createElement("div", null,
         showTitleDescription && (React.createElement("div", { className: "card card-support" },
             !isTCSearchEnabled && (React.createElement(Trans, null,
-                React.createElement("h3", { className: "card-heading popular-solutions" }, props.title ? props.title : t('i18nKeyPopularSolutions', 'Popular solutions and docs')))),
+                React.createElement("h3", { className: "card-heading popular-solutions green-card-heading" }, props.title ? props.title : t('i18nKeyPopularSolutions', 'Popular solutions and docs')))),
             isTCSearchEnabled && (React.createElement("div", { className: "card-body" },
                 React.createElement(TopContentSearch, { topContentData: topContent.data, topContentResultsWrapperRef: accordionRef, onSearch: onSearchChange, dataTrackingId: "top-content-filter-troubleshoot", enableEventTracking: true }))))),
         React.createElement("pfe-accordion", { ref: accordionRef }, map(filteredTC.slice(0, maxTC), (sug, index) => {
@@ -53,5 +53,5 @@ export default function Suggestions(props) {
             return (React.createElement(TopContent, { seSessionId: activeSessionId, seResourceOriginID: (_b = (_a = sessionResourceTracking[SessionResourceSource.TOP_CONTENT]) === null || _a === void 0 ? void 0 : _a.resourceOriginId) !== null && _b !== void 0 ? _b : '', topContentIndex: index, onResourceClick: onResourceClick, name: sug.categoryName, key: sug.categoryName, items: sug.content, helperText: (sug === null || sug === void 0 ? void 0 : sug.helperText) || '' }));
         })),
         showMax && filteredTC.length > maxTC && (React.createElement("div", { className: "text-right" },
-            React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: showAllCategories }, "More catagories")))));
+            React.createElement("button", { className: "btn btn-app btn-link", type: "button", onClick: showAllCategories, "data-tracking-id": "suggestions-more-categories" }, "More categories")))));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TroubleshootSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/TroubleshootSection.tsx"],"names":[],"mappings":"AAiBA,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;CAC5B;AASD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eAyFzC;kBAzFQ,mBAAmB;;;AA4F5B,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"TroubleshootSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TroubleshootSection/TroubleshootSection.tsx"],"names":[],"mappings":"AAmBA,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;CAC5B;AASD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,MAAM,eA0HzC;kBA1HQ,mBAAmB;;;AA6H5B,eAAe,mBAAmB,CAAC"}

package/lib/esm/components/TroubleshootSection/TroubleshootSection.js

@@ -1,3 +1,4 @@
+import { Card, CardBody, CardHeader, CardTitle } from '@patternfly/react-core';
 import { ErrorBoundary, LoadingDots } from '@rh-support/components';
 import { GlobalMetadataStateContext } from '@rh-support/react-context';
 import { ability, CaseListFields, resourceActions, resources } from '@rh-support/user-permissions';
@@ -8,6 +9,7 @@ import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useCaseSelector } from '../../context/CaseContext';
 import { TCStateContext } from '../../context/TopContentContext';
+// import { isClusterIdEnabledForProduct } from '../../utils/caseOpenshiftClusterIdUtils';
 import { FileDiag } from '../CaseInformation/FileDiag';
 import { OpenShiftClusterId } from '../CaseManagement/OpenShiftClusterId';
 import ClusterRecommendations from '../Recommendations/ClusterRecommendations';
@@ -31,37 +33,47 @@ function TroubleshootSection(props) {
         isCreatingCase: state.isCreatingCase,
         caseType: state.caseDetails.caseType,
     }), isEqual);
-    const isIdea = caseType === PreviousCaseTypes.FEATURE_ENHANCEMENT;
     const canShowTopProducts = isEmpty(product);
     const canShowTopContent = !canShowTopProducts && ((_a = topContent === null || topContent === void 0 ? void 0 : topContent.data) === null || _a === void 0 ? void 0 : _a.length) > 0;
     const canAddAttachments = ability.can(resourceActions.PATCH, resources.CASE_CREATE, CaseListFields.ATTACHMENTS);
     const isNotAnIdea = caseType !== PreviousCaseTypes.FEATURE_ENHANCEMENT;
+    const ParentSection = ({ children }) => {
+        if (!children) {
+            return null;
+        }
+        return React.createElement("section", { className: "parent-section" }, children);
+    };
     return (React.createElement(React.Fragment, null,
-        !isCreatingCase && (React.createElement("section", null,
-            React.createElement(OpenShiftClusterId, { className: "push-bottom" }))),
+        !isCreatingCase && (React.createElement(ParentSection, null,
+            React.createElement(OpenShiftClusterId, { className: "push-bottom", "data-tracking-id": "troubleshoot-section-openshift-cluster-id" }))),
         React.createElement("section", null,
             React.createElement("header", null,
                 React.createElement("h3", null,
-                    React.createElement(Trans, null,
+                    React.createElement("p", { className: "selected-product-suggestion" },
                         t('Because you selected'),
-                        ' ',
-                        React.createElement("p", { className: "pf-u-font-weight-bold selected-product-suggestion" }, product))),
+                        " ",
+                        React.createElement("b", null, product))),
                 React.createElement(LoadingDots, { show: topContent.isFetching }),
-                topContent.data.length === 0 && (React.createElement("div", { className: "card card-white card-support" },
-                    React.createElement("h3", { className: "card-heading popular-solutions" },
-                        React.createElement(Trans, { i18nKey: 'i18nKeyPopularSolutions' }, "Popular solutions and docs")),
-                    React.createElement("div", { className: "card-body" },
+                topContent.data.length === 0 && (React.createElement(Card, { id: "card", className: "card-support top-recommendations pf-u-mb-md", isCompact: true },
+                    React.createElement(CardHeader, { "aria-label": t('Popular solutions and docs'), className: "popular-solutions" },
+                        React.createElement(CardTitle, { id: "card-title", className: "card-title" },
+                            React.createElement(Trans, { i18nKey: 'i18nKeyPopularSolutions' }, "Popular solutions and docs"))),
+                    React.createElement(CardBody, { "aria-label": t('No recommendations for this product'), className: "file-recs-no-recommendation pf-u-mt-md" },
                         React.createElement(Trans, null, "No recommendations for this product")))),
                 React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } }, canShowTopContent && !isEmpty(version) && React.createElement(Suggestions, null)),
-                !isCreatingCase && React.createElement(ClusterRecommendations, { className: "push-top" }))),
+                !isCreatingCase && React.createElement(ClusterRecommendations, { className: "pf-u-mt-lg" }))),
         React.createElement("section", { className: "pf-u-mt-lg" },
-            isNotAnIdea && React.createElement(InsightsResults, { isDisplayOnMain: true }),
-            React.createElement("div", { className: "push-top" }, canAddAttachments ? (React.createElement(FileDiag, null)) : (React.createElement("div", { className: "card card-white card-support file-diag" },
-                React.createElement("h3", { className: "card-heading" }, isIdea || loggedInUsersAccount.data.secureSupport ? (React.createElement(Trans, null, "File uploader")) : (React.createElement(Trans, null, "Upload file to analyze"))),
-                React.createElement("div", { className: "card-body" },
-                    React.createElement("div", { className: "display-dashed pf-u-font-weight-bold pf-u-text-align-center" },
-                        React.createElement(Trans, null, "You do not have access to upload files"),
-                        "."))))))));
+            isNotAnIdea && (React.createElement(InsightsResults, { isDisplayOnMain: true, "data-tracking-id": "troubleshoot-section-file-recs" })),
+            React.createElement("div", { className: "pf-u-mt-lg" }, canAddAttachments ? (React.createElement(FileDiag, null)) : (React.createElement(React.Fragment, null,
+                React.createElement(Card, { id: "card", className: "card-support card-white file-diag", isCompact: true },
+                    React.createElement(CardHeader, { "aria-label": !isNotAnIdea || loggedInUsersAccount.data.secureSupport
+                            ? t('File uploader')
+                            : t('Upload file to analyze'), className: "card-heading" },
+                        React.createElement(CardTitle, { id: "card-title", className: "card-title" }, !isNotAnIdea || loggedInUsersAccount.data.secureSupport ? (React.createElement(Trans, null, "File uploader")) : (React.createElement(Trans, null, "Upload file to analyze")))),
+                    React.createElement(CardBody, { "aria-label": t('No recommendations for this product'), className: "no-access-file-diag" },
+                        React.createElement("div", { className: "display-dashed pf-u-font-weight-bold pf-u-text-align-center pf-u-mt-md" },
+                            React.createElement(Trans, null, "You do not have access to upload files"),
+                            ".")))))))));
 }
 TroubleshootSection.defaultProps = defaultProps;
 export default TroubleshootSection;

package/lib/esm/components/shared/fileUpload/FileLister.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileLister.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/FileLister.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAiB,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGxE,eAAO,MAAM,qBAAqB,2FAAyC,CAAC;AAiB5E,UAAU,MAAM;IACZ,kBAAkB,EAAE,UAAU,EAAE,CAAC;IACjC,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACtG,YAAY,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtE,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,eAsR/C"}
+{"version":3,"file":"FileLister.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/FileLister.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAAiB,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGxE,eAAO,MAAM,qBAAqB,2FAAyC,CAAC;AAiB5E,UAAU,MAAM;IACZ,kBAAkB,EAAE,UAAU,EAAE,CAAC;IACjC,UAAU,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IACtG,YAAY,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtE,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,MAAM,eA2S/C"}

package/lib/esm/components/shared/fileUpload/FileLister.js

@@ -1,12 +1,15 @@
 import { pcm } from '@cee-eng/hydrajs';
 import { Button, ButtonVariant, Label, Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+import HistoryIcon from '@patternfly/react-icons/dist/js/icons/history-icon';
 import { CircularProgressbar } from '@rh-support/components';
-import { humanizeSize } from '@rh-support/utils';
+import { humanizeSize, PreviousCaseTypes } from '@rh-support/utils';
 import capitalize from 'lodash/capitalize';
 import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { useCaseSelector } from '../../../context/CaseContext';
 import { ATTACHMENT_DESCRIPTION_LENGTH_LIMIT } from '../../../reducers/CaseConstNTypes';
 import { isAnalysingFile, isAnalysisFailed, isFileDeleted, isUploadAborted, isUploadedAndAnalysisFailed, isUploadedAndAnalysisSkipped, isUploadedAndAnalyzed, isUploadFailed, isUploading, isUploadingAttachment, isUploadingOnCase, isUploadingOnSession, isUploadOnTrack, isVerifyingUpload, shouldHideDescription, } from './reducer/AttachmentHelper';
 import { FileStatusHelper } from './reducer/FileStatusHelper';
@@ -34,6 +37,13 @@ export default function FileLister(props) {
         props.onFileEdit &&
             props.onFileEdit(editedLocalFile, indexToEdit, { description: editedLocalFile.description.trim() });
     };
+    const { caseType } = useCaseSelector((state) => ({
+        caseType: state.caseDetails.caseType,
+    }), isEqual);
+    const [isIdea, setIsIdea] = useState(false);
+    useEffect(() => {
+        setIsIdea(caseType === PreviousCaseTypes.FEATURE_ENHANCEMENT);
+    }, [caseType]);
     // To retry file upload
     const onRetry = (index) => () => {
         props.onRetry && props.onRetry(index);
@@ -94,7 +104,7 @@ export default function FileLister(props) {
             React.createElement("span", { className: "sr-only" }, "Selected files"),
             React.createElement("ul", { className: "file-diag-list" }, map(props.selectedLocalFiles, (localFile, index) => {
                 var _a;
-                return isFileDeleted(localFile.uploadProgress.uploadStatus) ? (React.createElement(React.Fragment, { key: index })) : (React.createElement("li", { key: index, className: `${localFile.uploadability.ableToUpload
+                return isFileDeleted(localFile.uploadProgress.uploadStatus) ? (React.createElement(React.Fragment, { key: index })) : (React.createElement("li", { key: index, className: `file-upload-group ${localFile.uploadability.ableToUpload
                         ? `file-${index + 1}`
                         : `file-${index + 1} text-error`}` },
                     React.createElement("div", { className: "file-name" },
@@ -113,7 +123,7 @@ export default function FileLister(props) {
                             ((_a = localFile === null || localFile === void 0 ? void 0 : localFile.description) === null || _a === void 0 ? void 0 : _a.length) > 1 && (React.createElement("span", { className: "character-counter text-muted" }, 255 - localFile.description.length)),
                         (isUploadFailed(localFile.uploadProgress.uploadStatus) ||
                             isUploadAborted(localFile.uploadProgress.uploadStatus)) && (React.createElement("button", { type: "button", "aria-label": "Failed to upload, Retry", title: "Failed to upload, Retry", className: "btn btn-link btn-xs", "data-tracking-id": "file-lister-retry", onClick: onRetry(index) },
-                            React.createElement("i", { className: "nimbus-icon-backup" }))),
+                            React.createElement(HistoryIcon, null))),
                         !isVerifyingUpload(localFile.uploadProgress.uploadStatus) &&
                             !isAnalysingFile(localFile.analysisMetadata.analysisStatus) && (React.createElement(React.Fragment, null,
                             canShowAbortBtn(localFile.uploadProgress.uploadStatus) && (React.createElement(Button, { variant: ButtonVariant.link, isDanger: true, "aria-label": t('Cancel Upload'), title: t('Cancel Upload'), className: "btn btn-link btn-app remove-file", "data-tracking-id": "file-lister-abort", onClick: onAbortClick(localFile, index), hidden: !localFile.uploadability.ableToUpload, isDisabled: !(localFile.uploadProgress.percentUploaded > 0) },
@@ -124,12 +134,12 @@ export default function FileLister(props) {
                     React.createElement("input", { id: `file-${index + 1}-description`, "data-tracking-id": `case-${props.isSessionId ? 'create' : 'details'}-file-${index + 1}-description`, className: "file-description form-control pf-u-my-sm", type: "text", value: localFile.description, onChange: onDescriptionChange(localFile, index), maxLength: 255, placeholder: t(`${shouldHideDescription(localFile, props.isSessionId)
                             ? ''
                             : t('Enter a description')}`), hidden: shouldHideDescription(localFile, props.isSessionId) }),
-                    isUploadedAndAnalysisSkipped(localFile) && (React.createElement("span", { className: "text-muted" }, localFile.analysisMetadata.analysisErrorMesssage)),
+                    isUploadedAndAnalysisSkipped(localFile) && !isIdea && (React.createElement("span", { className: "text-muted" }, localFile.analysisMetadata.analysisErrorMesssage)),
                     localFile.description.length === ATTACHMENT_DESCRIPTION_LENGTH_LIMIT ? (React.createElement("p", { className: "form-instructions" },
                         React.createElement(Trans, null, maxCaseAttachmentDescription))) : null,
                     isUploadedAndAnalysisFailed(localFile) && (React.createElement("span", { className: "text-danger" },
                         React.createElement(Trans, null, "Something went wrong during file analysis."),
-                        React.createElement(Button, { onClick: onRetryAnalysis(index), isInline: true, variant: ButtonVariant.link },
+                        React.createElement(Button, { onClick: onRetryAnalysis(index), isInline: true, variant: ButtonVariant.link, "data-tracking-id": "something-wrong-try-again" },
                             React.createElement(Trans, null, "Try analyzing again.")))),
                     isUploadFailed(localFile.uploadProgress.uploadStatus) && (React.createElement("span", { className: "text-danger" },
                         React.createElement(Trans, null,
@@ -138,7 +148,7 @@ export default function FileLister(props) {
                             sosReportErrorText(localFile.uploadProgress.uploadErrorMessage),
                             ".",
                             ' '),
-                        React.createElement(Button, { onClick: onRetry(index), isInline: true, variant: ButtonVariant.link },
+                        React.createElement(Button, { onClick: onRetry(index), isInline: true, variant: ButtonVariant.link, "data-tracking-id": "upload-fail-try-again" },
                             React.createElement(Trans, null, "Try again"))))));
             })),
             props.showSlowUploadMsg && isUploadingAttachment(props.selectedLocalFiles) && (React.createElement("span", { className: "text-muted" },

package/lib/esm/components/shared/fileUpload/UploadButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/UploadButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,QAAA,MAAM,YAAY;;;;;CAKjB,CAAC;AAEF,aAAK,YAAY,GAAG,OAAO,YAAY,CAAC;AAExC,MAAM,WAAW,MAAO,SAAQ,YAAY;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC9E,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAyCtC;kBAzCQ,gBAAgB;;;;;;;;AA4CzB,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"UploadButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/UploadButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAO1C,QAAA,MAAM,YAAY;;;;;CAKjB,CAAC;AAEF,aAAK,YAAY,GAAG,OAAO,YAAY,CAAC;AAExC,MAAM,WAAW,MAAO,SAAQ,YAAY;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC9E,WAAW,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,MAAM,eAyCtC;kBAzCQ,gBAAgB;;;;;;;;AA4CzB,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/lib/esm/components/shared/fileUpload/UploadButton.js

@@ -1,3 +1,4 @@
+import { Button } from '@patternfly/react-core';
 import { ability, resourceActions, resources } from '@rh-support/user-permissions';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -24,7 +25,7 @@ function FileUploadButton(props) {
     if (props.isSessionId && !canUseSessionManagement) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(React.Fragment, null, hasSomeSelectedFiles(selectedLocalFiles) && (React.createElement("div", { className: props.className }, hasSomeUnUploadedAttachments(selectedLocalFiles) ? (React.createElement("button", { type: "button", className: "btn btn-app", "data-tracking-id": "file-upload-all", onClick: onUploadAll }, t(props.uploadBtnLabel))) : props.uploadAnotherBtn ? (React.createElement(FileSelectorButton, { isSessionId: props.isSessionId, isPrivate: props.isPrivate, "data-tracking-id": "file-selector-button", className: `pf-m-secondary ${hasSomeUnUploadedAttachments(selectedLocalFiles) && 'm-l-1'}`, buttonLabel: t('Upload new file') })) : null))));
+    return (React.createElement(React.Fragment, null, hasSomeSelectedFiles(selectedLocalFiles) && (React.createElement("div", { className: props.className }, hasSomeUnUploadedAttachments(selectedLocalFiles) ? (React.createElement(Button, { type: "button", className: "btn btn-app", "data-tracking-id": "file-upload-all", onClick: onUploadAll }, t(props.uploadBtnLabel))) : props.uploadAnotherBtn ? (React.createElement(FileSelectorButton, { isSessionId: props.isSessionId, isPrivate: props.isPrivate, "data-tracking-id": "file-selector-button", className: `pf-m-secondary ${hasSomeUnUploadedAttachments(selectedLocalFiles) && 'm-l-1'}`, buttonLabel: t('Upload new file') })) : null))));
 }
 FileUploadButton.defaultProps = defaultProps;
 export { FileUploadButton };

package/lib/esm/components/shared/fileUpload/WidgetFileUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFileUploader.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/WidgetFileUploader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAA0C,MAAM,OAAO,CAAC;AA2B/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,MAAO,SAAQ,wBAAwB,EAAE,gBAAgB;IAC/D,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,iBAAS,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAwLxC;kBAxLQ,kBAAkB;;;AA4L3B,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"WidgetFileUploader.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/fileUpload/WidgetFileUploader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,KAA0C,MAAM,OAAO,CAAC;AA0B/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,MAAO,SAAQ,wBAAwB,EAAE,gBAAgB;IAC/D,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,iBAAS,kBAAkB,CAAC,KAAK,EAAE,MAAM,eA+MxC;kBA/MQ,kBAAkB;;;AAmN3B,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/esm/components/shared/fileUpload/WidgetFileUploader.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Button } from '@patternfly/react-core';
+import { Alert, Button } from '@patternfly/react-core';
 import { ToastNotification } from '@rh-support/components';
 import { getText } from '@rh-support/utils';
 import React, { useContext, useEffect, useState } from 'react';
@@ -16,7 +16,6 @@ import { RulesDispatchContext, RulesStateContext } from '../../../context/RulesC
 import { RulesReducerConstants } from '../../../reducers/RulesReducer';
 import FileLister from './FileLister';
 import WidgetFileSelector from './fileSelectors/WidgetFileSelector';
-import WidgetFileSelectorImage from './fileSelectors/WidgetFileSelectorImage';
 import { doSosReportAnalysisForFile, hasAnalysedSomeAttachments, hasSomeSelectedFiles, hasUploadedSomeAttachments, isAnalysingAnyAttachment, isAnalysisNotStarted, isRestoredFromSession, } from './reducer/AttachmentHelper';
 import { defaultAnalysisMetadata, defaultUploadMetadata, onFilesSelect, UploadStatusConstants, } from './reducer/AttachmentReducer';
 import { AttachmentDispatchContext, AttachmentStateContext } from './reducer/AttachmentReducerContext';
@@ -40,12 +39,26 @@ function WidgetFileUploader(props) {
     const { rulesState } = useContext(RulesStateContext);
     const [showViewRecBtn, setShowViewRecBtn] = useState(false);
     const { editFile, removeFile, retryUpload, uploadAll, retryAnalysis } = useFileUploader(props);
+    const [unallowedLocalFileExists, setUnallowedLocalFileExists] = useState(false);
     useEffect(() => {
         if (rulesState.triggerRuleNotification) {
             !showViewRecBtn && setShowViewRecBtn(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rulesState.triggerRuleNotification]);
+    const allowedTypesIdea = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
+    useEffect(() => {
+        const checkUnallowedFiles = (selectedLocalFiles, isIdea) => {
+            let unallowedFiles = [];
+            if (isIdea) {
+                unallowedFiles = selectedLocalFiles.filter((file) => !allowedTypesIdea.includes(file.type));
+            }
+            let hasUnallowedFiles = unallowedFiles.length > 0;
+            setUnallowedLocalFileExists(hasUnallowedFiles);
+        };
+        checkUnallowedFiles(selectedLocalFiles, props.isIdea);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedLocalFiles]);
     const onViewRecBtnClick = () => {
         rulesDispatch({
             type: RulesReducerConstants.triggerEARulesModalVisibiltyChange,
@@ -125,7 +138,7 @@ function WidgetFileUploader(props) {
     return (React.createElement("div", { className: `card card-white card-support file-diag ${props.className || ''}`, onPaste: handlePaste },
         React.createElement("h3", { className: "card-heading" }, props.isIdea || props.isSecureSupport ? (React.createElement(Trans, null, "File uploader")) : (React.createElement(Trans, null, "Upload file to analyze"))),
         React.createElement("div", { className: "card-body" },
-            props.isIdea ? (React.createElement(WidgetFileSelectorImage, { isSessionId: props.isSessionId, isPrivate: props.isPrivate })) : (React.createElement(WidgetFileSelector, { isSessionId: props.isSessionId, isPrivate: props.isPrivate })),
+            React.createElement(WidgetFileSelector, { isSessionId: props.isSessionId, isPrivate: props.isPrivate, isIdea: props.isIdea }),
             !hasSomeSelectedFiles(selectedLocalFiles) ? ((!props.isIdea && props.helperText) || (React.createElement("p", { className: "pf-u-mt-sm" },
                 !props.isIdea ? (React.createElement(Trans, { i18nKey: "i18nUploadSosReport" },
                     "Upload a",
@@ -134,6 +147,7 @@ function WidgetFileUploader(props) {
                     "to help us provide the best solutions for your system.")) : (React.createElement("span", { className: "pf-u-font-family-redhatVF-heading-sans-serif pf-u-color-300" },
                     React.createElement(Trans, null, "Allowed file types: png, gif, jpg, jpeg."))),
                 ' '))) : (React.createElement(React.Fragment, null,
+                unallowedLocalFileExists && (React.createElement(Alert, { variant: "danger", title: "File type is not allowed on this case type. Please remove file to proceed." })),
                 React.createElement(FileLister, { selectedLocalFiles: attachmentState.caseFiles.selectedLocalFiles, onFileEdit: editFile, onFileRemove: removeFile, onRetry: retryUpload, onRetryAnalysis: retryAnalysis, isSessionId: props.isSessionId, showSlowUploadMsg: attachmentState.showUploadingOnSlowConnectionMsg }),
                 hasUploadedSomeAttachments(selectedLocalFiles) && !props.isIdea && (React.createElement("p", null,
                     React.createElement(Trans, null, "If you can't find a solution, all files are moved to your case."))))),

package/lib/esm/components/shared/fileUpload/css/fileSelector.css

@@ -113,7 +113,7 @@ i.web-icon-check {
 }
 
 .file-diag .file-diag-list li:not(.text-error) label {
-    padding-bottom: 6px;
+    padding-bottom: 16px;
 }
 
 .file-diag .file-diag-list label i.icon-warning,

package/lib/esm/components/shared/fileUpload/fileSelectors/FileSelectorButton.js

@@ -25,6 +25,6 @@ function FileSelectorButton(_a) {
         React.createElement("label", { className: "sr-only", htmlFor: "upload-btn" },
             React.createElement(Trans, null, "Upload new file")),
         React.createElement("input", Object.assign({ value: "", style: { display: 'none !important' }, id: `${id !== null && id !== void 0 ? id : 'upload-btn'}` }, getInputProps())),
-        React.createElement("button", Object.assign({}, btnProps, { type: "button", className: `pf-c-button ${className}` }), buttonLabel)));
+        React.createElement("button", Object.assign({}, btnProps, { type: "button", className: `pf-c-button ${className}`, "data-tracking-id": "upload-a-file" }), buttonLabel)));
 }
 export default FileSelectorButton;

package/lib/esm/components/shared/fileUpload/fileSelectors/WidgetFileSelector.d.ts

@@ -2,7 +2,8 @@ import { IDClassNameProps } from '@rh-support/types/shared';
 interface IProps extends IDClassNameProps {
     isSessionId: boolean;
     isPrivate: boolean;
+    isIdea?: boolean;
 }
-declare function WidgetFileSelector({ id, className, isSessionId, isPrivate }: IProps): JSX.Element;
+declare function WidgetFileSelector({ id, className, isSessionId, isPrivate, isIdea }: IProps): JSX.Element;
 export default WidgetFileSelector;
 //# sourceMappingURL=WidgetFileSelector.d.ts.map

package/lib/esm/components/shared/fileUpload/fileSelectors/WidgetFileSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFileSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/fileUpload/fileSelectors/WidgetFileSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAQ5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,kBAAkB,CAAC,EAAE,EAAO,EAAE,SAAc,EAAE,WAAW,EAAE,SAAiB,EAAE,EAAE,MAAM,eAqC9F;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"WidgetFileSelector.d.ts","sourceRoot":"","sources":["../../../../../../src/components/shared/fileUpload/fileSelectors/WidgetFileSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAS5D,UAAU,MAAO,SAAQ,gBAAgB;IACrC,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,kBAAkB,CAAC,EAAE,EAAO,EAAE,SAAc,EAAE,WAAW,EAAE,SAAiB,EAAE,MAAc,EAAE,EAAE,MAAM,eAiE9G;AAED,eAAe,kBAAkB,CAAC"}

package/lib/esm/components/shared/fileUpload/fileSelectors/WidgetFileSelector.js

@@ -1,28 +1,46 @@
+import { humanizeSize } from '@rh-support/utils';
 import React, { useContext } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { Trans, useTranslation } from 'react-i18next';
 import { onDrop } from '../reducer/AttachmentHelper';
 import { AttachmentDispatchContext } from '../reducer/AttachmentReducerContext';
-function WidgetFileSelector({ id = '', className = '', isSessionId, isPrivate = false }) {
+function WidgetFileSelector({ id = '', className = '', isSessionId, isPrivate = false, isIdea = false }) {
     const { t } = useTranslation();
+    const MAX_SIZE = isIdea ? 5242880 : undefined;
     // Attachment Reducer Related
     const dispatchToAttachmentReducer = useContext(AttachmentDispatchContext);
-    const { getRootProps, getInputProps, isDragActive, inputRef } = useDropzone({
+    const dropzoneProps = {
         onDrop: onDrop(dispatchToAttachmentReducer, isSessionId, isPrivate),
-    });
+        accept: isIdea ? ['.jpeg', '.png', '.jpg', '.gif'] : undefined,
+        maxSize: MAX_SIZE,
+    };
+    const { getRootProps, getInputProps, isDragActive, inputRef, rejectedFiles } = useDropzone(dropzoneProps);
     const onLabelClick = (evt) => {
         // so that file selector doesn't open twice
         // https://github.com/react-dropzone/react-dropzone/issues/182
         evt.stopPropagation();
-        // since we are stopping the propogation the click event handler inside the
+        // since we are stopping the propagation the click event handler inside the
         // react-dropzone doesn't get triggered. So we need to manually clear the input value
-        // so that user can attach same file twice
+        // so that user can attach the same file twice
         inputRef.current.value = null;
     };
-    return (React.createElement("label", Object.assign({ className: "file-diag-dragndrop", htmlFor: "file-diag-selector" }, getRootProps({ onClick: onLabelClick }), { "data-tracking-id": "file-selector-widget-main" }),
-        React.createElement("input", Object.assign({ id: "file-diag-selector" }, getInputProps())),
-        isDragActive ? (t(`Drop your file here...`)) : (React.createElement(React.Fragment, null,
-            React.createElement("span", null,
-                React.createElement(Trans, null, "Drag and drop, paste, or browse to upload a file"))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", Object.assign({ className: "file-diag-dragndrop", htmlFor: "file-diag-selector" }, getRootProps({ onClick: onLabelClick }), { "data-tracking-id": "file-selector-widget-main" }),
+            React.createElement("input", Object.assign({ id: "file-diag-selector" }, getInputProps())),
+            isDragActive ? (t(`Drop your file here...`)) : (React.createElement(Trans, null, "Drag and drop, paste, or browse to upload a file")),
+            isIdea && (React.createElement("div", { className: "pf-u-text-align-center pf-u-color-300 pf-u-font-weight-normal" },
+                React.createElement(Trans, null, "Files must be less than 5 MB.")))),
+        isIdea && (React.createElement("p", { className: "pf-u-danger-color-200" }, rejectedFiles.map((rejectedFile) => {
+            const isImage = /image\/(png|gif|jpe?g)/.test(rejectedFile.type);
+            return !isImage ? (React.createElement("div", null,
+                rejectedFile.name,
+                " ",
+                React.createElement(Trans, null, "is not an allowed file type or an image "))) : rejectedFile.size > MAX_SIZE ? (React.createElement("div", null,
+                rejectedFile.name,
+                " ",
+                React.createElement(Trans, null, "exceeded max size limit of"),
+                " ",
+                humanizeSize(MAX_SIZE))) : ('');
+        })))));
 }
 export default WidgetFileSelector;

package/lib/esm/components/shared/useIsSectionValid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsSectionValid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/useIsSectionValid.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAEnE,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,gBAAgB;;;;;EA4K9D"}
+{"version":3,"file":"useIsSectionValid.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/useIsSectionValid.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAInE,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,gBAAgB;;;;;EAyL9D"}