@rh-support/troubleshoot 2.0.7 → 2.0.8

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutions.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutions.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAgE3E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAUD,eAAO,MAAM,aAAa,+EAkZxB,CAAC"}
+{"version":3,"file":"CaseSolutions.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutions.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAsD,MAAM,OAAO,CAAC;AA+D3E,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB,EAAE,OAAO,CAAC;CACnC;AAUD,eAAO,MAAM,aAAa,+EAoYxB,CAAC"}

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutions.js

@@ -34,7 +34,6 @@ import { useCaseUpdateErrorMessage } from '../../../hooks/useCaseUpdateErrorMess
 import { updateCaseDetails } from '../../../reducers/CaseReducer';
 import { fetchRecommendations } from '../../../reducers/RecommendationsReducer';
 import { CaseSolutionsItem } from './CaseSolutionsItem';
-import { HandpickedItem } from './HandpickedItem';
 // some of the pinned and hadpicked titles are set to 'Red Hat Knowledge Base'
 // this workaround is added till backend fix
 const titleFix = (recommendations, allDocs) => __awaiter(void 0, void 0, void 0, function* () {
@@ -95,8 +94,7 @@ export const CaseSolutions = forwardRef((props, ref) => {
     const recommendationsDispatch = useRecommendationDispatchContext();
     const { caseNumber, isSecureSupportAccount } = props;
     const [isPinLoading, setIsPinLoading] = useState({});
-    const [handPickedOpen, setHandPickedOpen] = useState(false);
-    const [pinnedOpen, setPinnedOpen] = useState(false);
+    const [expanded, setExpanded] = useState('sol-handpicked');
     const [recommendations, setRecommendations] = useState([]);
     const [topRecommendations, setTopRecommendations] = useState([]);
     const ability = useContext(AbilityContext);
@@ -207,49 +205,49 @@ export const CaseSolutions = forwardRef((props, ref) => {
         }
     }, [allDocs, isFetchingCaseDetails, isLoadingRecommendations, recomendationsObj]);
     const renderTopRecommendations = (recommendation, index, type) => (React.createElement(React.Fragment, null,
-        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) })),
-        canLinkUnlink && (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }))));
+        canPinUnpin && (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) })),
+        canLinkUnlink && (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? 'Unlink' : 'Link', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }))));
     // customer logged in: we show pins and perform pin/unpin
-    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, isPinned: true, type: type, pinTitle: recommendation.isPinned ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
+    const renderPinsByCustomer = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinned ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
     // customer logged in: we show links but perform pin/unpin
-    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(HandpickedItem, { type: type, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
+    const renderHandpickedCustomerView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showPin: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, recommendation.isPinned, undefined) }));
     // redhatter logged in: we show pins but perform link/unlink
-    const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? t('Unpin') : t('Pin'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
+    const renderPinnedByCustomerRedhatterView = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isPinnedAndLinked ? 'Unpin' : 'Pin', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
     // redhatter logged in: we show links and perform link/unlink
-    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement("div", { className: "pf-u-ml-lg" },
-        React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? t('Unlink') : t('Link'), isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) })));
-    const linkedRecommendations = recommendations.filter((r) => r.isLinked);
-    const pinnedRecommendations = recommendations.filter((r) => r.isPinned);
+    const renderHandPickedByRedHatter = (recommendation, index, type) => (React.createElement(CaseSolutionsItem, { showLink: true, type: type, pinTitle: recommendation.isLinked ? 'Unlink' : 'Link', isPinLoading: isPinLoading, index: index, recommendation: recommendation, onPinClicked: updateRecommendations(recommendation, undefined, recommendation.isLinked) }));
+    const setExpandedSection = (id) => {
+        expanded === id ? setExpanded('') : setExpanded(id);
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Accordion, { isBordered: true, asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: handPickedOpen, onClick: () => setHandPickedOpen((pre) => !pre) },
-                    React.createElement("span", null, canLinkUnlink ? React.createElement(Trans, null, "Handpicked by you") : React.createElement(Trans, null, "Handpicked for this case")),
-                    React.createElement("span", { className: "badge-item pf-u-font-size-sm pf-u-mx-sm" }, linkedRecommendations.length)),
-                React.createElement(AccordionContent, { isHidden: !handPickedOpen }, !hasLink ? (React.createElement(Trans, null, "If a Red Hat engineer finds an article or solution that can help with your case, they'll pin it here.")) : (React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: linkedRecommendations.map((rec, index) => canLinkUnlink
-                        ? renderHandPickedByRedHatter(rec, index, 'handpicked-recommendations')
-                        : renderHandpickedCustomerView(rec, index, 'handpicked-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
-                        { title: '5', value: 5 },
-                        { title: '10', value: 10 },
-                    ] })))),
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: pinnedOpen, onClick: () => setPinnedOpen((pre) => !pre) },
-                    React.createElement("span", null, canLinkUnlink ? (React.createElement(Trans, null, "Pinned by customer")) : (React.createElement(Trans, null, "My pinned recommendations"))),
-                    React.createElement("span", { className: "badge-item pf-u-font-size-sm pf-u-mx-sm" }, pinnedRecommendations.length)),
-                React.createElement(AccordionContent, { isHidden: !pinnedOpen }, !hasPin ? (React.createElement(Trans, null, "When you save a recommended article or solution, you'll see it here. Saved items display only in this case and are not saved for later.")) : (React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: pinnedRecommendations.map((rec, index) => canLinkUnlink
-                        ? renderPinnedByCustomerRedhatterView(rec, index, 'pinned-recommendations')
-                        : renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
-                        { title: '5', value: 5 },
-                        { title: '10', value: 10 },
-                    ] }))))),
         topRecommendations.length > 0 && (React.createElement("div", { className: "card card-white card-support recommendations", ref: ref },
             React.createElement("h3", { className: "card-heading" },
-                React.createElement(Trans, null, "Knowledgebase recommendations")),
+                React.createElement(Trans, null, "Top recommendations")),
             React.createElement("div", { className: "card-body" },
-                React.createElement(PaginatedList, { id: "case-details-top-recommendations", className: "list-icons list-icons-flush", listItems: topRecommendations
-                        .filter((r) => !pinnedRecommendations.some((pr) => pr.resourceId === r.resourceId))
-                        .map((rec, index) => renderTopRecommendations(rec, index, 'top-recommendations')), perPage: 5, isFetching: !!isLoadingRecommendations, perPageOptions: [
+                React.createElement(PaginatedList, { id: "case-details-top-recommendations", className: "list-icons list-icons-flush", listItems: topRecommendations.map((rec, index) => renderTopRecommendations(rec, index, 'top-recommendations')), perPage: 5, isFetching: !!isLoadingRecommendations, perPageOptions: [
                         { title: '5', value: 5 },
                         { title: '10', value: 10 },
-                    ] }))))));
+                    ] })))),
+        (hasPin || hasLink) && (React.createElement(Accordion, { asDefinitionList: false, className: "card card-white case-details-aside-solutions" },
+            hasLink && (React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { id: "sol-handpicked", isExpanded: expanded === 'sol-handpicked', onClick: () => setExpandedSection('sol-handpicked') }, canLinkUnlink ? React.createElement(Trans, null, "Handpicked by you") : React.createElement(Trans, null, "Handpicked for you")),
+                React.createElement(AccordionContent, { isHidden: expanded !== 'sol-handpicked' },
+                    React.createElement(PaginatedList, { id: "case-details-handpicked-recommendations", listItems: recommendations
+                            .filter((r) => r.isLinked)
+                            .map((rec, index) => canLinkUnlink
+                            ? renderHandPickedByRedHatter(rec, index, 'handpicked-recommendations')
+                            : renderHandpickedCustomerView(rec, index, 'handpicked-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
+                            { title: '5', value: 5 },
+                            { title: '10', value: 10 },
+                        ] })))),
+            hasPin && (React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { id: "sol-pinned", isExpanded: expanded === 'sol-pinned', onClick: () => setExpandedSection('sol-pinned') }, canLinkUnlink ? React.createElement(Trans, null, "Pinned by customer") : React.createElement(Trans, null, "Your pins")),
+                React.createElement(AccordionContent, { isHidden: expanded !== 'sol-pinned' },
+                    React.createElement(PaginatedList, { id: "case-details-pinned-recommendations", listItems: recommendations
+                            .filter((r) => r.isPinned)
+                            .map((rec, index) => canLinkUnlink
+                            ? renderPinnedByCustomerRedhatterView(rec, index, 'pinned-recommendations')
+                            : renderPinsByCustomer(rec, index, 'pinned-recommendations')), perPage: 5, className: "list-icons list-icons-flush", isFetching: !!isLoadingRecommendations, perPageOptions: [
+                            { title: '5', value: 5 },
+                            { title: '10', value: 10 },
+                        ] }))))))));
 });

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts

@@ -1,7 +1,6 @@
 import { ICaseResourceLink } from '@cee-eng/hydrajs/@types/api/public/case';
 interface IProps {
     showPin?: boolean;
-    isPinned?: boolean;
     showLink?: boolean;
     pinTitle: string;
     index: number;
@@ -10,7 +9,7 @@ interface IProps {
     onPinClicked: () => void;
     type: string;
 }
-export interface ICaseDetailAsideRecommendation extends Partial<ICaseResourceLink> {
+interface ICaseDetailAsideRecommendation extends Partial<ICaseResourceLink> {
     isPinned?: boolean;
     isLinked?: boolean;
     solutionAbstract?: string;

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAS5E,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAgD9C"}
+{"version":3,"file":"CaseSolutionsItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/CaseSolutionsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAQ5E,UAAU,MAAM;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,8BAA+B,SAAQ,OAAO,CAAC,iBAAiB,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,eAwC9C"}

package/lib/esm/components/CaseEditView/CaseSolutions/CaseSolutionsItem.js

@@ -1,7 +1,6 @@
 import { Button } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/js/icons/link-icon';
-import OutlinedStarIcon from '@patternfly/react-icons/dist/js/icons/outlined-star-icon';
-import StarIcon from '@patternfly/react-icons/dist/js/icons/star-icon';
+import ThumbTackIcon from '@patternfly/react-icons/dist/js/icons/thumb-tack-icon';
 import { LoadingIndicator } from '@rh-support/components';
 import { cleanupMarkDown, decodeMarkTag, truncate } from '@rh-support/utils';
 import React from 'react';
@@ -9,11 +8,11 @@ export function CaseSolutionsItem(props) {
     const maxTitleLength = 150;
     const maxAbstractLength = 150;
     const isLoading = !!props.isPinLoading[props.recommendation.resourceId];
-    return (React.createElement("div", null,
+    return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "recommendation-header" },
             React.createElement(Button, { title: props.pinTitle, onClick: props.onPinClicked, "data-tracking-id": `case-resource-${props.pinTitle}`, variant: "plain", className: "list-icon" },
                 isLoading && React.createElement(LoadingIndicator, { show: isLoading, size: "xs" }),
-                !isLoading && props.showPin && (React.createElement(React.Fragment, null, props.isPinned ? (React.createElement(StarIcon, { className: "pinned-resource" })) : (React.createElement(OutlinedStarIcon, { className: "pinned-resource" })))),
+                !isLoading && props.showPin && React.createElement(ThumbTackIcon, { className: "pinned-resource" }),
                 !isLoading && props.showLink && React.createElement(LinkIcon, null)),
             React.createElement("a", { href: props.recommendation.resourceViewURI, "data-tracking-id": `case-resource-${props.type}-link-${props.index}`, target: "_blank", rel: "noopener noreferrer", dangerouslySetInnerHTML: {
                     __html: truncate(decodeMarkTag(props.recommendation.title || ''), maxTitleLength),

package/lib/esm/scss/_main.scss

@@ -824,40 +824,6 @@ div.support-grid-case-details.support-case {
     border-bottom-color: #c9190b !important;
 }
 
-.case-type-section {
-    .case-type-category {
-        height: 75px;
-        padding: 0.5rem 1rem;
-        border: 1px solid #d9d9d9;
-        font-weight: 600;
-        line-height: 1.6;
-        background-color: var(--pf-global--palette--black-150);
-        color: var(--pf-global--primary-color--100);
-        word-break: break-word;
-        &.selected-case-type {
-            border-color: var(--pf-global--primary-color--100);
-            background-color: #e6e6e6;
-        }
-
-        &:hover,
-        &:focus {
-            border-color: var(--pf-global--primary-color--100);
-            background-color: #e6e6e6;
-        }
-
-        &:active {
-            border-color: var(--pf-global--primary-color--100);
-        }
-    }
-}
-
-.badge-item {
-    background-color: var(--pf-global--BackgroundColor--200);
-    padding: 0 8px 0 8px;
-    border-radius: 10px;
-    color: black;
-}
-
 .top-products p {
     margin-bottom: 2rem;
     font-size: 14px;
@@ -903,20 +869,15 @@ mark {
 }
 
 // pinning feature - can't be overly specific here
-#case-details-handpicked-recommendations li {
-    padding: 0;
-}
 .recommendation-header {
     font-size: 15px;
 
-    .pinned-resource {
-        color: var(--pf-global--primary-color--100);
-    }
-
+    button:hover[title='Pin'],
     button:hover[title='Link'] {
         color: #6ca100;
     }
 
+    button[title='Unpin'],
     button[title='Unlink'] {
         color: #6ca100;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.0.7",
+    "version": "2.0.8",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -134,5 +134,5 @@
         "not ie <= 11",
         "not op_mini all"
     ],
-    "gitHead": "f4106bdae110f32d4968b2a9544fc4bbf76ce11e"
+    "gitHead": "184ccbf01006c0dc3732d8b8ad44656f4b5cad22"
 }

package/lib/esm/components/CaseEditView/CaseSolutions/HandpickedItem.d.ts

@@ -1,12 +0,0 @@
-import { ICaseDetailAsideRecommendation } from './CaseSolutionsItem';
-interface IProps {
-    pinTitle: string;
-    index: number;
-    recommendation: ICaseDetailAsideRecommendation;
-    isPinLoading: any;
-    onPinClicked: () => void;
-    type: string;
-}
-export declare function HandpickedItem(props: IProps): JSX.Element;
-export {};
-//# sourceMappingURL=HandpickedItem.d.ts.map

package/lib/esm/components/CaseEditView/CaseSolutions/HandpickedItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HandpickedItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/CaseSolutions/HandpickedItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE,UAAU,MAAM;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,8BAA8B,CAAC;IAC/C,YAAY,EAAE,GAAG,CAAC;IAClB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,eA4B3C"}

package/lib/esm/components/CaseEditView/CaseSolutions/HandpickedItem.js

@@ -1,14 +0,0 @@
-import { cleanupMarkDown, decodeMarkTag, truncate } from '@rh-support/utils';
-import React from 'react';
-export function HandpickedItem(props) {
-    const maxAbstractLength = 150;
-    const maxTitleLength = 150;
-    return (React.createElement("div", { className: "pf-u-mx-sm" },
-        React.createElement("div", { className: "recommendation-header" },
-            React.createElement("a", { href: props.recommendation.resourceViewURI, "data-tracking-id": `case-resource-${props.type}-link-${props.index}`, target: "_blank", rel: "noopener noreferrer", dangerouslySetInnerHTML: {
-                    __html: truncate(decodeMarkTag(props.recommendation.title || ''), maxTitleLength),
-                } })),
-        React.createElement("div", { className: "result-body", dangerouslySetInnerHTML: {
-                __html: truncate(cleanupMarkDown(decodeMarkTag(props.recommendation.solutionAbstract || '')), maxAbstractLength),
-            } })));
-}