@rh-support/manage 0.2.44 → 0.2.62

package/README.md

@@ -9,3 +9,5 @@ const manage = require('manage');
 
 // TODO: DEMONSTRATE API
 ```
+
+.

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimit.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+declare const CategoryLimit: FC;
+export default CategoryLimit;
+//# sourceMappingURL=CategoryLimit.d.ts.map

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryLimit.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/CategoryLimit/CategoryLimit.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,aAAa,EAAE,EA8BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimit.js

@@ -0,0 +1,20 @@
+import { Button, Popover } from '@patternfly/react-core';
+import CircleInfo from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import React, { useState } from 'react';
+import { Trans } from 'react-i18next';
+import { CategoryLimitGuidelines } from './CategoryLimitGuidelines';
+const CategoryLimit = () => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    const onHideModal = () => setModalOpen(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popover, { "aria-label": "limit-reached-pop-over", headerContent: React.createElement(Trans, null, "Reached limit"), bodyContent: (hide) => (React.createElement(Trans, null,
+                "You have reached the limit for adding categories for this product and version.",
+                React.createElement("span", { className: "top-content-tooltip-view-metric-label", onClick: () => {
+                        hide();
+                        setModalOpen(true);
+                    } }, "Review guidelines."))) },
+            React.createElement(Button, { variant: "plain" },
+                React.createElement(CircleInfo, { size: "md" }))),
+        React.createElement(CategoryLimitGuidelines, { isModalOpen: isModalOpen, onHideModal: onHideModal })));
+};
+export default CategoryLimit;

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimitGuidelines.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface IProps {
+    isModalOpen: boolean;
+    onHideModal: () => void;
+}
+export declare const CategoryLimitGuidelines: FC<IProps>;
+export {};
+//# sourceMappingURL=CategoryLimitGuidelines.d.ts.map

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimitGuidelines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryLimitGuidelines.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/CategoryLimit/CategoryLimitGuidelines.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMlC,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;CAC3B;AACD,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,MAAM,CAoC9C,CAAC"}

package/lib/esm/components/TopContentManagement/CategoryLimit/CategoryLimitGuidelines.js

@@ -0,0 +1,17 @@
+import { Button, ButtonVariant, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { CATEGORY_LIMIT, DIGIT_WORD_MAP } from '../../../constants/TopContent';
+import QuestionAnswer from './QuestionAnswer';
+export const CategoryLimitGuidelines = ({ isModalOpen, onHideModal }) => {
+    return (React.createElement(Modal, { variant: ModalVariant.medium, id: "top-content-category-limit-guidelines", "aria-label": "top-content-category-limit-guidelines", isOpen: isModalOpen, onClose: onHideModal, actions: [
+            React.createElement(Button, { variant: ButtonVariant.secondary, key: "close-button", onClick: onHideModal }, "Cancel"),
+        ] },
+        React.createElement(Title, { headingLevel: "h1", size: TitleSizes['2xl'] },
+            React.createElement(Trans, null, " Top content guideline ")),
+        React.createElement(Trans, null,
+            React.createElement("p", { className: "pf-u-pt-sm" }, "Guidelines and limitations for top content resources.")),
+        React.createElement(QuestionAnswer, { question: "What is top content?", answer: "Top content is defined as the top resource for given product and version that will provide the most value for our customer and the highest likelihood for case deflection." }),
+        React.createElement(QuestionAnswer, { question: "What is not top content", answer: "Resource that are accessible in other parts of the customer journey throughout the Customer Portal. For example, labs are not a top content resource. " }),
+        React.createElement(QuestionAnswer, { question: "Category and link restrictions", answer: `we allow for a minimum of ${DIGIT_WORD_MAP[CATEGORY_LIMIT.MIN]} and max ${DIGIT_WORD_MAP[CATEGORY_LIMIT.MAX]} categories, and links within each category.` })));
+};

package/lib/esm/components/TopContentManagement/CategoryLimit/QuestionAnswer.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+declare const QuestionAnswer: FC<{
+    question: string;
+    answer: string;
+}>;
+export default QuestionAnswer;
+//# sourceMappingURL=QuestionAnswer.d.ts.map

package/lib/esm/components/TopContentManagement/CategoryLimit/QuestionAnswer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuestionAnswer.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/CategoryLimit/QuestionAnswer.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlC,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAO5D,CAAC;AACF,eAAe,cAAc,CAAC"}

package/lib/esm/components/TopContentManagement/CategoryLimit/QuestionAnswer.js

@@ -0,0 +1,12 @@
+import { Title } from '@patternfly/react-core';
+import React from 'react';
+import { Trans } from 'react-i18next';
+const QuestionAnswer = ({ question, answer }) => (React.createElement("div", { className: "pf-u-pt-lg" },
+    React.createElement(Title, { headingLevel: "h6", size: "md" },
+        React.createElement(Trans, null,
+            " ",
+            question)),
+    React.createElement(Trans, null,
+        " ",
+        answer)));
+export default QuestionAnswer;

package/lib/esm/components/TopContentManagement/ContentUsage/ContentAccordion.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { ITopContentItemState } from '../../../reducers/TopContentReducer';
+interface IProps {
+    contentList: ITopContentItemState[];
+}
+export declare const ContentAccordion: FC<IProps>;
+export {};
+//# sourceMappingURL=ContentAccordion.d.ts.map

package/lib/esm/components/TopContentManagement/ContentUsage/ContentAccordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentAccordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/ContentAccordion.tsx"],"names":[],"mappings":"AAUA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAG3E,UAAU,MAAM;IACZ,WAAW,EAAE,oBAAoB,EAAE,CAAC;CACvC;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,MAAM,CAmEvC,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/ContentAccordion.js

@@ -0,0 +1,37 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionToggle, Panel, PanelMain, PanelMainBody, } from '@patternfly/react-core';
+import { formatDate } from '@rh-support/utils';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PerformanceMetricClickCount } from './PerformanceMetricClickCount';
+export const ContentAccordion = ({ contentList }) => {
+    const [expanded, setExpanded] = useState(0);
+    const { t } = useTranslation();
+    const onToggle = (id) => () => {
+        if (id === expanded) {
+            setExpanded(0);
+        }
+        else {
+            setExpanded(id);
+        }
+    };
+    return (!!(contentList === null || contentList === void 0 ? void 0 : contentList.length) && (React.createElement("div", { className: "content" },
+        React.createElement(Panel, { variant: "bordered" },
+            React.createElement(PanelMain, null,
+                React.createElement(PanelMainBody, null,
+                    React.createElement(Accordion, { isBordered: true }, contentList.map(({ contentTitle, topContentId, updatedOn, createdOn, updatedBy, createdBy, isAttentionNeeded, }) => {
+                        const lastModifiedBy = t(`Last modified {{created}} by {{by}}`, {
+                            created: formatDate(updatedOn || createdOn),
+                            by: updatedBy || createdBy,
+                        });
+                        return (React.createElement(AccordionItem, { key: topContentId },
+                            React.createElement(AccordionToggle, { onClick: onToggle(topContentId), isExpanded: expanded === topContentId, id: contentTitle },
+                                React.createElement("span", { className: isAttentionNeeded ? 'pf-u-danger-color-200' : '' },
+                                    ' ',
+                                    contentTitle)),
+                            React.createElement(AccordionContent, { id: contentTitle, isHidden: expanded !== topContentId },
+                                React.createElement("span", { className: "pf-u-font-size-sm" }, lastModifiedBy),
+                                React.createElement("br", null),
+                                React.createElement("br", null),
+                                React.createElement(PerformanceMetricClickCount, { needsAttention: isAttentionNeeded, contentId: topContentId }))));
+                    }))))))));
+};

package/lib/esm/components/TopContentManagement/ContentUsage/MajorVersionPerformanceMetrics.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { ITopContentEditState } from '../../../reducers/TopContentReducer';
+interface IProps {
+    isModalOpen: boolean;
+    onHideModal: () => void;
+    filteredTC: ITopContentEditState[];
+    selectedMajorVersion: string;
+    selectedProduct: string;
+}
+export declare const MajorVersionPerformanceMetrics: FC<IProps>;
+export {};
+//# sourceMappingURL=MajorVersionPerformanceMetrics.d.ts.map

package/lib/esm/components/TopContentManagement/ContentUsage/MajorVersionPerformanceMetrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MajorVersionPerformanceMetrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/MajorVersionPerformanceMetrics.tsx"],"names":[],"mappings":"AAWA,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AAMhE,OAAO,EAAE,oBAAoB,EAAwB,MAAM,qCAAqC,CAAC;AAIjG,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,oBAAoB,EAAE,CAAC;IACnC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;CAC3B;AACD,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,MAAM,CA6ErD,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/MajorVersionPerformanceMetrics.js

@@ -0,0 +1,42 @@
+import { Button, ButtonVariant, Flex, FlexItem, Modal, ModalVariant, Title, TitleSizes, } from '@patternfly/react-core';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { useTopContentContext } from '../../../context/TopContentProvider';
+import { useVersionsDiffer } from '../../../hooks/useVersionsDiffer';
+import { flagContentUsage } from '../../../reducers/TopContentHelpers';
+import { ContentAccordion } from './ContentAccordion';
+import { PerformanceMetricsSelect } from './PerformanceMetricsSelect';
+export const MajorVersionPerformanceMetrics = ({ isModalOpen, onHideModal, filteredTC, selectedMajorVersion, selectedProduct, }) => {
+    const [selectedVersion, setVersion] = useState(selectedMajorVersion.split('.x')[0]);
+    const [selectedCategory, setSelectedCategory] = useState('');
+    const [selectedContent, setSelectedContent] = useState([]);
+    const { categoryUsage } = useTopContentContext();
+    const flagContentEditState = useMemo(() => flagContentUsage(filteredTC, categoryUsage, selectedVersion), [filteredTC, categoryUsage, selectedVersion]);
+    const [isLoading, versionDifference] = useVersionsDiffer(selectedProduct, selectedMajorVersion.split('.x')[0]);
+    useEffect(() => {
+        var _a;
+        const filteredContent = ((_a = flagContentEditState.find((tc) => tc.categoryName === selectedCategory)) === null || _a === void 0 ? void 0 : _a.content) || [];
+        setSelectedContent(filteredContent);
+    }, [selectedVersion, selectedCategory, flagContentEditState]);
+    const onModalClose = () => {
+        setSelectedContent([]);
+        setVersion('');
+        setSelectedCategory('');
+        onHideModal();
+    };
+    return (React.createElement(Modal, { variant: ModalVariant.large, id: "top-content-major-version-performance-metric", "aria-label": "top-content-performance-metric", isOpen: isModalOpen, onClose: onModalClose, actions: [
+            React.createElement(Button, { variant: ButtonVariant.secondary, key: "close-button", onClick: onModalClose }, "Cancel"),
+        ] },
+        React.createElement("div", { className: "sticky-header" },
+            React.createElement(Title, { headingLevel: "h1", size: TitleSizes['2xl'] },
+                React.createElement(Trans, null, " Performance metrics ")),
+            React.createElement("p", { className: "pf-u-pt-sm" }, "Better understand the Performance for the top content resources."),
+            React.createElement("br", null),
+            React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+                React.createElement(FlexItem, { className: "pf-u-w-50 pf-u-pr-md", style: { marginRight: 'unset' } },
+                    React.createElement(PerformanceMetricsSelect, { placeholderText: "select a version", title: `Version using ${selectedMajorVersion}`, onSelectCallback: (e, selectedOption) => setVersion(selectedOption), options: versionDifference, optionValue: (option) => option, isLoading: isLoading })),
+                React.createElement(FlexItem, { className: "pf-u-w-50 pf-u-pl-md" },
+                    React.createElement(PerformanceMetricsSelect, { placeholderText: "select a category", title: "Categories", options: flagContentEditState, optionValue: (option) => option.categoryName, onSelectCallback: (e, selectedOption) => setSelectedCategory(selectedOption) })))),
+        React.createElement("br", null),
+        React.createElement(ContentAccordion, { contentList: selectedContent })));
+};

package/lib/esm/components/TopContentManagement/ContentUsage/NeedsAttention.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const NeedsAttention: FC;
+//# sourceMappingURL=NeedsAttention.d.ts.map

package/lib/esm/components/TopContentManagement/ContentUsage/NeedsAttention.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NeedsAttention.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/NeedsAttention.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGlC,eAAO,MAAM,cAAc,EAAE,EAe5B,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/NeedsAttention.js

@@ -0,0 +1,8 @@
+import { Label, Tooltip } from '@patternfly/react-core';
+import React from 'react';
+import { Trans } from 'react-i18next';
+export const NeedsAttention = () => {
+    return (React.createElement(Tooltip, { content: React.createElement(Trans, null, "Category is under performing. Please review the link and considering replacing with more applicable category.") },
+        React.createElement(Label, { color: "red" },
+            React.createElement(Trans, null, "Needs Attention"))));
+};

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricClickCount.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface IProps {
+    contentId: number;
+    needsAttention: boolean;
+}
+export declare const PerformanceMetricClickCount: FC<IProps>;
+export {};
+//# sourceMappingURL=PerformanceMetricClickCount.d.ts.map

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricClickCount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceMetricClickCount.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetricClickCount.tsx"],"names":[],"mappings":"AASA,OAAc,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AAKrD,UAAU,MAAM;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,2BAA2B,EAAE,EAAE,CAAC,MAAM,CAmDlD,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricClickCount.js

@@ -0,0 +1,32 @@
+import { HelperText, HelperTextItem, Panel, PanelMain, PanelMainBody, ToggleGroup, ToggleGroupItem, } from '@patternfly/react-core';
+import React, { useMemo, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { useTopContentContext } from '../../../context/TopContentProvider';
+export const PerformanceMetricClickCount = ({ contentId, needsAttention }) => {
+    const { categoryUsage, selectedVersion } = useTopContentContext();
+    const [selectedOption, setSelectedOption] = useState(0);
+    const topContentUsageMetrics = useMemo(() => {
+        var _a;
+        const resourceUsage = (_a = categoryUsage === null || categoryUsage === void 0 ? void 0 : categoryUsage[selectedVersion]) === null || _a === void 0 ? void 0 : _a.find(({ resourceEntityId }) => contentId === +resourceEntityId);
+        if (resourceUsage)
+            return [resourceUsage.clickCount30Days, resourceUsage.clickCount60Days, resourceUsage.clickCount90Days];
+    }, [contentId, categoryUsage, selectedVersion]);
+    const onSelect = (index) => () => {
+        setSelectedOption(index);
+    };
+    const count = (topContentUsageMetrics === null || topContentUsageMetrics === void 0 ? void 0 : topContentUsageMetrics[selectedOption]) || 0;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ToggleGroup, { "aria-label": "performance-usage-days-selector" },
+            React.createElement(ToggleGroupItem, { buttonId: "last-30-days", text: "Last 30 days", isSelected: selectedOption === 0, onChange: onSelect(0) }),
+            React.createElement(ToggleGroupItem, { buttonId: "last-60-days", text: "Last 60 days", isSelected: selectedOption === 1, onChange: onSelect(1) }),
+            React.createElement(ToggleGroupItem, { buttonId: "last-90-days", text: "Last 90 days", isSelected: selectedOption === 2, onChange: onSelect(2) })),
+        React.createElement(Panel, { variant: "bordered" },
+            React.createElement(PanelMain, null,
+                React.createElement(PanelMainBody, { className: "panel-body" },
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: needsAttention ? 'error' : 'default' },
+                            React.createElement(Trans, { count: count },
+                                "Clicked ",
+                                { count },
+                                " times"))))))));
+};

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetrics.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+interface IProps {
+    isModalOpen: boolean;
+    onHideModal: () => void;
+    needsAttention: boolean;
+    contentId: number;
+    title: string;
+    lastModifiedBy: string;
+}
+export declare const PerformanceMetrics: FC<IProps>;
+export {};
+//# sourceMappingURL=PerformanceMetrics.d.ts.map

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceMetrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetrics.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,UAAU,MAAM;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;CAC1B;AACD,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAiCzC,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetrics.js

@@ -0,0 +1,15 @@
+import { Button, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { PerformanceMetricClickCount } from './PerformanceMetricClickCount';
+export const PerformanceMetrics = ({ isModalOpen, onHideModal, needsAttention, contentId, title, lastModifiedBy, }) => {
+    return (React.createElement(Modal, { variant: ModalVariant.small, id: "top-content-performance-metric", "aria-label": "top-content-performance-metric", isOpen: isModalOpen, onClose: onHideModal, actions: [
+            React.createElement(Button, { variant: "secondary", key: "close-button", onClick: onHideModal }, "Cancel"),
+        ] },
+        React.createElement(Title, { headingLevel: "h1", size: TitleSizes['2xl'] },
+            React.createElement(Trans, null, " Performance metrics ")),
+        React.createElement("p", { className: "pf-u-pb-lg pf-u-pt-sm" }, "Better understand the Performance for the top content resources."),
+        React.createElement("div", { className: "pf-u-pb-xs top-content-tooltip-view-metric-label" }, title),
+        React.createElement("div", { className: "pf-u-pb-lg" }, lastModifiedBy),
+        React.createElement(PerformanceMetricClickCount, { needsAttention: needsAttention, contentId: contentId })));
+};

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.d.ts

@@ -0,0 +1,13 @@
+import { SelectOptionObject } from '@patternfly/react-core';
+import React, { FC } from 'react';
+interface IProps {
+    placeholderText: string;
+    title: string;
+    onSelectCallback: (event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean) => void;
+    options: Array<any>;
+    optionValue: (option: any) => string;
+    isLoading?: boolean;
+}
+export declare const PerformanceMetricsSelect: FC<IProps>;
+export {};
+//# sourceMappingURL=PerformanceMetricsSelect.d.ts.map

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceMetricsSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,kBAAkB,EAAiB,MAAM,wBAAwB,CAAC;AACjG,OAAO,KAAK,EAAE,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAG5C,UAAU,MAAM;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CACd,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAC3C,KAAK,EAAE,MAAM,GAAG,kBAAkB,EAClC,aAAa,CAAC,EAAE,OAAO,KACtB,IAAI,CAAC;IACV,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,WAAW,EAAE,CAAC,MAAM,KAAA,KAAK,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,MAAM,CAsC/C,CAAC"}

package/lib/esm/components/TopContentManagement/ContentUsage/PerformanceMetricsSelect.js

@@ -0,0 +1,20 @@
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Trans } from 'react-i18next';
+export const PerformanceMetricsSelect = ({ placeholderText, title, onSelectCallback, options, optionValue, isLoading = false, }) => {
+    const [isOpen, setOpen] = useState(false);
+    const [selected, setSelected] = useState(null);
+    const onToggle = (isOpen) => setOpen(isOpen);
+    const onSelect = (e, selected) => {
+        setSelected(selected);
+        onSelectCallback(e, selected);
+        setOpen(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "pf-u-font-weight-bold" },
+            React.createElement(Trans, null,
+                " ",
+                title,
+                " ")),
+        React.createElement(Select, { variant: SelectVariant.single, placeholderText: placeholderText, "aria-label": "Select Input with descriptions", onToggle: onToggle, onSelect: onSelect, selections: selected, isOpen: isOpen, disabled: isLoading }, options.map((option, index) => (React.createElement(SelectOption, { key: index, value: optionValue(option) }))))));
+};

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentCategory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategory.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,OAAO,EAAgB,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAG5F,UAAU,MAAM;IACZ,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAgE/C"}
+{"version":3,"file":"TopContentCategory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategory.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,OAAO,EAAgB,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAI5F,UAAU,MAAM;IACZ,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAgE/C"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategory.js

@@ -5,6 +5,7 @@ import { scrollIntoView } from '@rh-support/utils';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CategoryMode } from '../../../../reducers/TopContentReducer';
+import { NeedsAttention } from '../../ContentUsage/NeedsAttention';
 import { TopContentComponent } from './TopContentComponent';
 export function TopContentCategory(props) {
     const { globalMetadataState: { navBarRef }, } = useGlobalStateContext();
@@ -36,7 +37,9 @@ export function TopContentCategory(props) {
         React.createElement(AccordionToggle, { id: props.category.categoryName, onClick: toggleExpanded, isExpanded: isExpanded },
             React.createElement("h3", { ref: headerRef },
                 props.isArrangingCats && (React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), size: "sm", className: "pf-u-mr-sm" })),
-                props.category.categoryName)),
+                props.category.categoryName,
+                " ",
+                props.category.isAttentionNeeded && React.createElement(NeedsAttention, null))),
         React.createElement(AccordionContent, { isHidden: !isExpanded },
             React.createElement(TopContentComponent, { category: props.category, scrollToTop: scrollToTop, categoryMode: CategoryMode.EXISTING_SECTION }))))));
 }

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentSingleItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItem.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAK7D,OAAO,EAIH,oBAAoB,EAOvB,MAAM,wCAAwC,CAAC;AAGhD,UAAU,MAAM;IACZ,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,CAAC,EAAE,MAAM,CAAC;CACb;AAaD,eAAO,MAAM,oBAAoB,kDAAmD,MAAM,gBAgYzF,CAAC"}
+{"version":3,"file":"TopContentSingleItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItem.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAK7D,OAAO,EAIH,oBAAoB,EAOvB,MAAM,wCAAwC,CAAC;AAIhD,UAAU,MAAM;IACZ,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,sBAAsB,CAAC;IACjC,CAAC,EAAE,MAAM,CAAC;CACb;AAaD,eAAO,MAAM,oBAAoB,kDAAmD,MAAM,gBA4XzF,CAAC"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItem.js

@@ -21,6 +21,7 @@ import { useTopContentContext, useTopContentDispatchContext } from '../../../../
 import { getTopContentUrl } from '../../../../reducers/TopContentHelpers';
 import { ContentMode, deleteTopContent, fetchTopContent, removeTopContent, saveAddedNewSectionContents, saveAddToTopContent, saveChangeInCategoryContent, setIsAddingCategory, } from '../../../../reducers/TopContentReducer';
 import { AddNewCategoryDropDown } from './AddNewCategoryDropDown';
+import { TopContentSingleItemLink } from './TopContentSingleItemLink';
 function formatDuplicateWarning(arr) {
     if (arr.length === 0 || arr.length === 1)
         return arr;
@@ -240,17 +241,18 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     const isSaveButtonDisabled = !(contentTitleIsValid && contentUrlIsValid && localContentTitle && localContentUrl) ||
         (!newCategory && content.mode === ContentMode.NEW_SECTION_CONTENT) ||
         (localContentUrl === content.contentUrl && localContentTitle === content.contentTitle);
+    const lastModifiedBy = t(`Last modified {{created}} by {{by}}`, {
+        created: formatDate(content.updatedOn || content.createdOn),
+        by: content.updatedBy || content.createdBy,
+    });
     return (React.createElement(React.Fragment, null,
         isPreview && content.mode !== ContentMode.ADD && content.mode !== ContentMode.NEW_SECTION_CONTENT && (React.createElement("li", { className: `push-bottom-narrow ${snapshot.isDragging ? 'list-flat tc-drag' : ''}` },
             isArrangingContent && (React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), color: "#06c", size: "sm", className: "pf-u-mr-sm" })),
             !isArrangingContent ? (React.createElement(React.Fragment, null,
-                React.createElement("a", { className: "pcm-manage-top-content", "data-tracking-id": "pcm-manage-top-content", href: getTopContentUrl(content.contentUrl), target: "_blank", rel: "noopener noreferrer" }, content.contentTitle),
+                React.createElement(TopContentSingleItemLink, { url: getTopContentUrl(content.contentUrl), title: content.contentTitle, contentId: content.topContentId, needsAttention: content.isAttentionNeeded, lastModifiedBy: lastModifiedBy }),
                 ' ',
                 React.createElement(Button, { variant: "link", isInline: true, icon: React.createElement(EditAltIcon, null), onClick: editToggle, title: 'Edit' }))) : (content.contentTitle),
-            React.createElement("div", null, t(`Last modified {{created}} by {{by}}`, {
-                created: formatDate(content.updatedOn || content.createdOn),
-                by: content.updatedBy || content.createdBy,
-            })))),
+            React.createElement("div", null, lastModifiedBy))),
         (!isPreview || content.mode === ContentMode.ADD || content.mode === ContentMode.NEW_SECTION_CONTENT) && (React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "card card-light push-bottom" },
             content.mode === ContentMode.NEW_SECTION_CONTENT && (React.createElement(AddNewCategoryDropDown, { onCategoryChange: onAddedNewCategoryChange })),
             React.createElement("div", { className: "form-group" },

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+interface IProps {
+    title: string;
+    url: string;
+    needsAttention?: boolean;
+    contentId?: number;
+    lastModifiedBy: string;
+}
+export declare const TopContentSingleItemLink: FC<IProps>;
+export {};
+//# sourceMappingURL=TopContentSingleItemLink.d.ts.map

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopContentSingleItemLink.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;AAK5C,UAAU,MAAM;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,MAAM,CAgD/C,CAAC"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItemLink.js

@@ -0,0 +1,20 @@
+import { Button, Tooltip } from '@patternfly/react-core';
+import ExclamationTriangle from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import React, { useState } from 'react';
+import { Trans } from 'react-i18next';
+import { PerformanceMetrics } from '../../ContentUsage/PerformanceMetrics';
+export const TopContentSingleItemLink = ({ title, url, needsAttention = false, contentId, lastModifiedBy, }) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    const onHideModal = () => setModalOpen(false);
+    const onOpenModal = () => setModalOpen(true);
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement(Trans, null, " Performance is low. This link will be removed in 7 days."),
+        React.createElement("span", { onClick: onOpenModal, style: { color: 'var(--pf-global--primary-color--100)' } },
+            React.createElement(Trans, null, "View performance metrics"))));
+    return (React.createElement(React.Fragment, null,
+        needsAttention && (React.createElement(Tooltip, { content: content, exitDelay: 500 },
+            React.createElement(Button, { variant: "plain", className: "top-content-tooltip" },
+                React.createElement(ExclamationTriangle, null)))),
+        React.createElement("a", { className: needsAttention ? 'top-content-needs-attention' : 'pcm-manage-top-content', "data-tracking-id": "pcm-manage-top-content", href: url, target: "_blank", rel: "noopener noreferrer" }, title),
+        React.createElement(PerformanceMetrics, { isModalOpen: isModalOpen, onHideModal: onHideModal, needsAttention: needsAttention, contentId: contentId, title: title, lastModifiedBy: lastModifiedBy })));
+};

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/TopContentEditor/TopContentEditor.tsx"],"names":[],"mappings":"AAuCA,wBAAgB,gBAAgB,gBAqR/B"}
+{"version":3,"file":"TopContentEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/TopContentEditor/TopContentEditor.tsx"],"names":[],"mappings":"AA2CA,wBAAgB,gBAAgB,gBAoT/B"}

package/lib/esm/components/TopContentManagement/TopContentEditor/TopContentEditor.js

@@ -11,11 +11,15 @@ import { Accordion, Alert, AlertVariant, Bullseye, Button, EmptyState, EmptyStat
 import { ToastNotification, TopContentSearch } from '@rh-support/components';
 import { getVersion, isRegularVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Trans, useTranslation } from 'react-i18next';
+import { CATEGORY_LIMIT } from '../../../constants/TopContent';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../context/TopContentProvider';
+import { flagContentUsage, isMajorVersion } from '../../../reducers/TopContentHelpers';
 import { CategoryMode, fetchTopContent, reArrangeCategory, resetChangeInCategory, resetContentWithSelectedProduct, resetDuplicatUrls, setAddNewSection, setIsAddingCategory, setIsSearchModeEnabled, setTopContentArrangingCategory, setTopContentArrangingContent, } from '../../../reducers/TopContentReducer';
+import CategoryLimit from '../CategoryLimit/CategoryLimit';
+import { MajorVersionPerformanceMetrics } from '../ContentUsage/MajorVersionPerformanceMetrics';
 import { NoTopContentFound } from '../NoTopContentFound';
 import { TopContentHeader } from '../TopContentHeader';
 import { TopContentProductVersionSelector } from '../TopContentProductVersionSelector';
@@ -27,26 +31,30 @@ export function TopContentEditor() {
     const [isArrangingCats, setIsArrangingCats] = useState(false);
     const [newCategoryVersion, setNewCategoryVersion] = useState(undefined);
     const topContentResultsRef = useRef(null);
-    const { topContentResponse, topContentEditState, isAddingCategory, isCatOnlyForMajorVersion, isSearchModeEnabled, selectedProduct, selectedVersion, } = useTopContentContext();
+    const { topContentResponse, topContentEditState, isAddingCategory, isCatOnlyForMajorVersion, isSearchModeEnabled, selectedProduct, selectedVersion, categoryUsage, } = useTopContentContext();
     const topContentDispatch = useTopContentDispatchContext();
-    const [filteredTC, setFilteredTC] = useState(topContentEditState);
+    const flagContentEditState = useMemo(() => flagContentUsage(topContentEditState, categoryUsage, selectedVersion), [topContentEditState, categoryUsage, selectedVersion]);
+    const [filteredTC, setFilteredTC] = useState(flagContentEditState);
     const onProductChange = (selectedProduct) => {
         resetContentWithSelectedProduct(topContentDispatch, selectedProduct);
     };
+    const [isModalOpen, setModalOpen] = useState(false);
+    const onHideModal = () => setModalOpen(false);
+    const onOpenModal = () => setModalOpen(true);
     const onVersionChange = (selectedVersion) => {
         if (!selectedVersion)
             return;
         fetchTopContent(topContentDispatch, selectedProduct, selectedVersion);
     };
     useEffect(() => {
-        !isSearchModeEnabled && setFilteredTC(topContentEditState);
+        !isSearchModeEnabled && setFilteredTC(flagContentEditState);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [topContentEditState]);
+    }, [flagContentEditState]);
     const onAddCategory = (isMajorVersionOnly, isCreatingNewSet = false, version, hasMajorContentCreatingMinorContent) => {
         hasMajorContentCreatingMinorContent && resetDuplicatUrls(topContentDispatch);
         setCategoryToOpen(null);
         setIsAddingCategory(topContentDispatch, true);
-        setAddNewSection(topContentDispatch, topContentEditState, isMajorVersionOnly, isCreatingNewSet);
+        setAddNewSection(topContentDispatch, flagContentEditState, isMajorVersionOnly, isCreatingNewSet);
         setNewCategoryVersion(version);
     };
     const arrangeSection = () => {
@@ -55,7 +63,7 @@ export function TopContentEditor() {
     const onSaveArrangement = () => __awaiter(this, void 0, void 0, function* () {
         setIsArrangingCats(false);
         try {
-            yield reArrangeCategory(topContentEditState);
+            yield reArrangeCategory(flagContentEditState);
             ToastNotification.addSuccessMessage(t('Categories updated successfully'));
         }
         catch (error) {
@@ -72,24 +80,24 @@ export function TopContentEditor() {
         if (!result.destination || result.source.index === result.destination.index)
             return;
         if (result.destination.droppableId === 'content-editor-cat-drop-zone') {
-            setTopContentArrangingCategory(topContentDispatch, topContentEditState, result.source.index, result.destination.index);
+            setTopContentArrangingCategory(topContentDispatch, flagContentEditState, result.source.index, result.destination.index);
         }
         else {
             // pass categoryID as a part of dropabbleId
-            setTopContentArrangingContent(topContentDispatch, topContentEditState, result.destination.droppableId, result.source.index, result.destination.index);
+            setTopContentArrangingContent(topContentDispatch, flagContentEditState, result.destination.droppableId, result.source.index, result.destination.index);
         }
     };
-    const showNoTopContentFound = (isEmpty(selectedProduct.name) || isEmpty(selectedVersion) || topContentEditState.length === 0) &&
+    const showNoTopContentFound = (isEmpty(selectedProduct.name) || isEmpty(selectedVersion) || flagContentEditState.length === 0) &&
         !topContentResponse.isError &&
         !topContentResponse.isFetching &&
         !isAddingCategory;
     const showSectionFooter = !isArrangingCats &&
         !isAddingCategory &&
         selectedVersion &&
-        topContentEditState.length !== 0 &&
+        flagContentEditState.length !== 0 &&
         !isSearchModeEnabled;
     const isContentOnlyForMajorVersion = !topContentResponse.isFetching &&
-        topContentEditState.length !== 0 &&
+        flagContentEditState.length !== 0 &&
         isRegularVersion(selectedVersion) &&
         isCatOnlyForMajorVersion &&
         !isAddingCategory;
@@ -97,18 +105,19 @@ export function TopContentEditor() {
         setIsSearchModeEnabled(topContentDispatch, searchTerm ? true : false);
         setFilteredTC(searchResults);
     };
-    const minorSelectedNoMinorContentButAvailableMajorContent = isContentOnlyForMajorVersion && getVersion(selectedVersion).minor && topContentEditState.length !== 0;
+    const minorSelectedNoMinorContentButAvailableMajorContent = isContentOnlyForMajorVersion && getVersion(selectedVersion).minor && flagContentEditState.length !== 0;
+    const isCategoryLimitReached = filteredTC.length >= CATEGORY_LIMIT.MAX;
     return (React.createElement(React.Fragment, null,
         React.createElement(TopContentHeader, null),
         !topContentResponse.isFetching && topContentResponse.isError && (React.createElement(Alert, { isInline: true, variant: AlertVariant.danger, title: React.createElement(Trans, null, "Error loading Top Content") })),
         React.createElement(TopContentProductVersionSelector, { selectedProduct: selectedProduct, selectedVersion: selectedVersion, onProductChange: onProductChange, onVersionChange: onVersionChange }),
-        !topContentResponse.isFetching && (React.createElement(TopContentSearch, { dataTrackingId: "top-content-filter-manage", topContentData: topContentEditState, onSearch: onSearch, topContentResultsWrapperRef: topContentResultsRef })),
+        !topContentResponse.isFetching && (React.createElement(TopContentSearch, { dataTrackingId: "top-content-filter-manage", topContentData: flagContentEditState, onSearch: onSearch, topContentResultsWrapperRef: topContentResultsRef })),
         React.createElement("div", { className: "top-content-manage-wrapper" },
             topContentResponse.isFetching ? (React.createElement(Bullseye, null,
                 React.createElement(EmptyState, { variant: EmptyStateVariant.full },
                     React.createElement(Spinner, { size: "lg" })))) : (!topContentResponse.isFetching &&
-                showNoTopContentFound && (React.createElement(NoTopContentFound, { version: selectedVersion, product: selectedProduct.name, dataLength: topContentEditState.length, onAddCategory: onAddCategory, isContentOnlyForMajorVersion: isContentOnlyForMajorVersion }))),
-            minorSelectedNoMinorContentButAvailableMajorContent ? (React.createElement(NoTopContentFound, { version: selectedVersion, product: selectedProduct.name, dataLength: topContentEditState.length, onAddCategory: onAddCategory, onVersionChange: onVersionChange, isContentOnlyForMajorVersion: isContentOnlyForMajorVersion })) : (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
+                showNoTopContentFound && (React.createElement(NoTopContentFound, { version: selectedVersion, product: selectedProduct.name, dataLength: flagContentEditState.length, onAddCategory: onAddCategory, isContentOnlyForMajorVersion: isContentOnlyForMajorVersion }))),
+            minorSelectedNoMinorContentButAvailableMajorContent ? (React.createElement(NoTopContentFound, { version: selectedVersion, product: selectedProduct.name, dataLength: flagContentEditState.length, onAddCategory: onAddCategory, onVersionChange: onVersionChange, isContentOnlyForMajorVersion: isContentOnlyForMajorVersion })) : (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
                 React.createElement(Droppable, { droppableId: "content-editor-cat-drop-zone" }, (provided) => (React.createElement("div", Object.assign({}, provided.droppableProps, { ref: (el) => {
                         provided.innerRef(el);
                         topContentResultsRef.current = el;
@@ -126,15 +135,19 @@ export function TopContentEditor() {
                         provided.placeholder),
                     React.createElement("div", { className: "pf-u-p-md" },
                         showSectionFooter && (React.createElement(React.Fragment, null,
-                            React.createElement(Button, { variant: "primary", onClick: () => onAddCategory(isContentOnlyForMajorVersion, false, selectedVersion), "data-tracking-id": "add-new-section-topcontent" },
+                            isCategoryLimitReached && React.createElement(CategoryLimit, null),
+                            React.createElement(Button, { variant: "primary", onClick: () => onAddCategory(isContentOnlyForMajorVersion, false, selectedVersion), isDisabled: isCategoryLimitReached, "data-tracking-id": "add-new-section-topcontent" },
                                 React.createElement(Trans, null, "Add a new section")),
                             ' ',
-                            React.createElement(Button, { variant: "secondary", onClick: arrangeSection, isDisabled: topContentEditState.length < 2 },
-                                React.createElement(Trans, null, "Arrange section")))),
+                            React.createElement(Button, { variant: "secondary", onClick: arrangeSection, isDisabled: flagContentEditState.length < 2 },
+                                React.createElement(Trans, null, "Arrange section")),
+                            isMajorVersion(selectedVersion) && (React.createElement(Button, { variant: "link", className: "pf-u-float-right", isInline: true, onClick: onOpenModal },
+                                React.createElement(Trans, null, "View performance"))))),
                         isArrangingCats && (React.createElement(React.Fragment, null,
                             React.createElement(Button, { variant: "primary", onClick: onSaveArrangement },
                                 React.createElement(Trans, null, "Save")),
                             ' ',
                             React.createElement(Button, { variant: "link", onClick: onCancelArrangement },
-                                React.createElement(Trans, null, "Cancel")))))))))))));
+                                React.createElement(Trans, null, "Cancel")))))))))),
+            React.createElement(MajorVersionPerformanceMetrics, { isModalOpen: isModalOpen, onHideModal: onHideModal, filteredTC: filteredTC, selectedMajorVersion: selectedVersion, selectedProduct: selectedProduct.name }))));
 }

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.d.ts

@@ -1,3 +1,4 @@
+import { IItemResponse } from '@cee-eng/hydrajs/@types/models/general';
 import { IProduct as IHydraProduct } from '@cee-eng/hydrajs/@types/models/product';
 import { IDClassNameProps } from '@rh-support/types/shared';
 interface IProps extends IDClassNameProps {
@@ -7,6 +8,7 @@ interface IProps extends IDClassNameProps {
     onVersionChange: (version: string) => void;
     htmlForId: string;
 }
+export declare function postVersionsProcessor(versionItems: IItemResponse<string[]>): IItemResponse<string[]>;
 declare function TopContentProductVersionSelector(props: IProps): JSX.Element;
 declare namespace TopContentProductVersionSelector {
     var defaultProps: Partial<IProps>;

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentProductVersionSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AASrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,eAAe,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;CACrB;AAgCD,iBAAS,gCAAgC,CAAC,KAAK,EAAE,MAAM,eA4HtD;kBA5HQ,gCAAgC;;;AA+HzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}
+{"version":3,"file":"TopContentProductVersionSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentProductVersionSelector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,EAAE,gBAAgB,EAAW,MAAM,0BAA0B,CAAC;AASrE,UAAU,MAAO,SAAQ,gBAAgB;IACrC,eAAe,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC3D,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;CACrB;AAQD,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,EAAE,CAAC,2BAG1E;AAqBD,iBAAS,gCAAgC,CAAC,KAAK,EAAE,MAAM,eA4HtD;kBA5HQ,gCAAgC;;;AA+HzC,OAAO,EAAE,gCAAgC,EAAE,CAAC"}

package/lib/esm/components/TopContentManagement/TopContentProductVersionSelector.js

@@ -11,7 +11,7 @@ const defaultProps = {
     className: '',
     id: '',
 };
-function postVersionsProcessor(versionItems) {
+export function postVersionsProcessor(versionItems) {
     versionItems.items = getProcessedVersions(getUniqueSortedVersions(versionItems.items));
     return versionItems;
 }

package/lib/esm/constants/TopContent.d.ts

@@ -1,2 +1,18 @@
 export declare const TopContentCategories: readonly string[];
+export declare const DIGIT_WORD_MAP: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+};
+export declare const CATEGORY_LIMIT: {
+    MIN: number;
+    MAX: number;
+};
 //# sourceMappingURL=TopContent.d.ts.map

package/lib/esm/constants/TopContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../src/constants/TopContent.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,mBA4B/B,CAAC"}
+{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../src/constants/TopContent.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,mBA4B/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;CAW1B,CAAC;AAEF,eAAO,MAAM,cAAc;;;CAG1B,CAAC"}

package/lib/esm/constants/TopContent.js

@@ -27,3 +27,19 @@ export const TopContentCategories = Object.freeze([
     'Troubleshooting basics',
     'Troubleshooting or monitoring',
 ]);
+export const DIGIT_WORD_MAP = {
+    1: 'one',
+    2: 'two',
+    3: 'three',
+    4: 'four',
+    5: 'five',
+    6: 'six',
+    7: 'seven',
+    8: 'eight',
+    9: 'nine',
+    10: 'ten',
+};
+export const CATEGORY_LIMIT = {
+    MIN: 2,
+    MAX: 7,
+};

package/lib/esm/context/TopContentProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentProvider.d.ts","sourceRoot":"","sources":["../../../src/context/TopContentProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAqB,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAEnH,eAAO,MAAM,uBAAuB,EAAE,gBAYrC,CAAC;AAGF,eAAO,MAAM,sBAAsB,iCAAiE,CAAC;AACrG,eAAO,MAAM,yBAAyB,8CAA6C,CAAC;AAEpF,wBAAgB,oBAAoB,qBAMnC;AAED,wBAAgB,4BAA4B,kCAM3C;AAED,wBAAgB,yBAAyB,CAAC,EAAE,QAAQ,EAAE;;CAAA,eAOrD"}
+{"version":3,"file":"TopContentProvider.d.ts","sourceRoot":"","sources":["../../../src/context/TopContentProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAqB,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAEnH,eAAO,MAAM,uBAAuB,EAAE,gBAarC,CAAC;AAGF,eAAO,MAAM,sBAAsB,iCAAiE,CAAC;AACrG,eAAO,MAAM,yBAAyB,8CAA6C,CAAC;AAEpF,wBAAgB,oBAAoB,qBAMnC;AAED,wBAAgB,4BAA4B,kCAM3C;AAED,wBAAgB,yBAAyB,CAAC,EAAE,QAAQ,EAAE;;CAAA,eAOrD"}

package/lib/esm/context/TopContentProvider.js

@@ -13,6 +13,7 @@ export const intialTopContentContext = {
     categories: getApiResourceObject([]),
     contentUrls: {},
     isSearchModeEnabled: false,
+    categoryUsage: {},
 };
 const initalDispatchContext = null;
 export const TopContentStateContext = React.createContext(intialTopContentContext);

package/lib/esm/hooks/useVersionsDiffer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This hook is used for to differentiate actual versions of product from versions with top content
+ * @param {string} selectedProductName Selected product name
+ * @param {string} selectedMajorVersion Selected version
+ * @returns {[boolean, String[]]} Loading status and differentiated list of versions
+ */
+export declare const useVersionsDiffer: (selectedProductName: string, selectedMajorVersion: string) => [boolean, String[]];
+//# sourceMappingURL=useVersionsDiffer.d.ts.map

package/lib/esm/hooks/useVersionsDiffer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVersionsDiffer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useVersionsDiffer.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,wBAAyB,MAAM,wBAAwB,MAAM,KAAG,CAAC,OAAO,EAAE,MAAM,EAAE,CA6C/G,CAAC"}

package/lib/esm/hooks/useVersionsDiffer.js

@@ -0,0 +1,42 @@
+import { pcm, products as productsApi } from '@cee-eng/hydrajs';
+import { useFetch } from '@rh-support/components';
+import { difference } from 'lodash';
+import { useEffect, useState } from 'react';
+import { postVersionsProcessor } from '../components/TopContentManagement/TopContentProductVersionSelector';
+/**
+ * This hook is used for to differentiate actual versions of product from versions with top content
+ * @param {string} selectedProductName Selected product name
+ * @param {string} selectedMajorVersion Selected version
+ * @returns {[boolean, String[]]} Loading status and differentiated list of versions
+ */
+export const useVersionsDiffer = (selectedProductName, selectedMajorVersion) => {
+    const [majorVersion, setMajorVersion] = useState([]);
+    // Get selected product version
+    // Note we need to call version API again over here because TopContentProductVersionSelector is having version at component state level and if we decide to
+    // use it lot of prop drilling will happen or if use lift that state to redux store code refactoring required
+    const { request: getProductVersions, isFetching: isLoadingVersions, data: versions, } = useFetch(productsApi.getProductVersions, { initialData: [], postProcessor: postVersionsProcessor });
+    // Get versions who are having top content
+    const { request: getTopContentVersions, isFetching: isTopContentVersion, data: topContentVersion, } = useFetch(pcm.topContent.getTopContentVersions, {
+        initialData: [],
+        postProcessor: (a) => a,
+    });
+    useEffect(() => {
+        if (selectedProductName && selectedMajorVersion) {
+            getProductVersions(selectedProductName);
+            getTopContentVersions({
+                productName: selectedProductName,
+                majorVersion: +selectedMajorVersion,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedProductName, selectedMajorVersion]);
+    // In this effect we are calculating and finding difference between original version list and version with top content
+    useEffect(() => {
+        var _a, _b;
+        if (((_a = versions === null || versions === void 0 ? void 0 : versions.items) === null || _a === void 0 ? void 0 : _a.length) && (topContentVersion === null || topContentVersion === void 0 ? void 0 : topContentVersion.length)) {
+            const subVersions = (_b = versions === null || versions === void 0 ? void 0 : versions.items) === null || _b === void 0 ? void 0 : _b.filter((item) => item.startsWith(selectedMajorVersion)).map((item) => { var _a; return (_a = item.split('.')) === null || _a === void 0 ? void 0 : _a[1]; }).sort();
+            setMajorVersion(difference(subVersions, topContentVersion));
+        }
+    }, [versions, topContentVersion, selectedMajorVersion]);
+    return [isLoadingVersions || isTopContentVersion, majorVersion.map((item) => `${selectedMajorVersion}.${item}`)];
+};

package/lib/esm/reducers/TopContentHelpers.d.ts

@@ -1,3 +1,18 @@
+import { ITopContentResourceUsagesResponse } from '@cee-eng/hydrajs/@types/models/topContent/topContentModel';
+import { ITopContentEditState } from './TopContentReducer';
 export declare const getTopContentUrl: (contentUrl: string) => string;
 export declare const getContentUrls: (contentsArray: any) => any;
+/**
+ * Iterate all categories and its content to with content usage data to map and flag category and its content needs attention
+ *
+ * 1. Find the outlier from the category usage data.
+ * 2. Compare and filter category usage with outlier lower boundary.
+ * 3. Use filtered data with actually category data to add need attention flag
+ * @param categories
+ * @param categoryUsage
+ * @param selectedVersion
+ * @returns categories
+ */
+export declare const flagContentUsage: (categories: ITopContentEditState[], categoryUsage: ITopContentResourceUsagesResponse, selectedVersion: string) => ITopContentEditState[];
+export declare const isMajorVersion: (selectedVersion: string) => boolean;
 //# sourceMappingURL=TopContentHelpers.d.ts.map

package/lib/esm/reducers/TopContentHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentHelpers.d.ts","sourceRoot":"","sources":["../../../src/reducers/TopContentHelpers.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,eAAgB,MAAM,WASlD,CAAC;AAEF,eAAO,MAAM,cAAc,6BAe1B,CAAC"}
+{"version":3,"file":"TopContentHelpers.d.ts","sourceRoot":"","sources":["../../../src/reducers/TopContentHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,iCAAiC,EAEpC,MAAM,2DAA2D,CAAC;AAKnE,OAAO,EAAE,oBAAoB,EAAwB,MAAM,qBAAqB,CAAC;AAEjF,eAAO,MAAM,gBAAgB,eAAgB,MAAM,WASlD,CAAC;AAEF,eAAO,MAAM,cAAc,6BAe1B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,eACb,oBAAoB,EAAE,iBACnB,iCAAiC,mBAC/B,MAAM,2BAiC1B,CAAC;AAEF,eAAO,MAAM,cAAc,oBAAqB,MAAM,KAAG,OAExD,CAAC"}

package/lib/esm/reducers/TopContentHelpers.js

@@ -1,4 +1,16 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { getAccessHostname } from '@rh-support/api';
+import { outlier } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
 export const getTopContentUrl = (contentUrl) => {
     // There is some data urls (e.g. /solutions/articles/etc.) that aren't valid urls
@@ -27,3 +39,40 @@ export const getContentUrls = (contentsArray) => {
         return result;
     }, {});
 };
+/**
+ * Iterate all categories and its content to with content usage data to map and flag category and its content needs attention
+ *
+ * 1. Find the outlier from the category usage data.
+ * 2. Compare and filter category usage with outlier lower boundary.
+ * 3. Use filtered data with actually category data to add need attention flag
+ * @param categories
+ * @param categoryUsage
+ * @param selectedVersion
+ * @returns categories
+ */
+export const flagContentUsage = (categories, categoryUsage, selectedVersion) => {
+    var _a, _b;
+    if (!isMajorVersion(selectedVersion) && !isEmpty(categoryUsage === null || categoryUsage === void 0 ? void 0 : categoryUsage[selectedVersion])) {
+        const [, lowerBoundary] = outlier((_a = categoryUsage === null || categoryUsage === void 0 ? void 0 : categoryUsage[selectedVersion]) === null || _a === void 0 ? void 0 : _a.map(({ clickCount30Days }) => clickCount30Days));
+        const filteredResourceUsages = (_b = categoryUsage === null || categoryUsage === void 0 ? void 0 : categoryUsage[selectedVersion]) === null || _b === void 0 ? void 0 : _b.filter(({ clickCount30Days }) => lowerBoundary > clickCount30Days);
+        const categoriesWithFlaggedContent = categories === null || categories === void 0 ? void 0 : categories.map((_a) => {
+            var { content } = _a, rest = __rest(_a, ["content"]);
+            let isAttentionNeededOnCategory = false;
+            const contentWithFlag = content === null || content === void 0 ? void 0 : content.map((_a) => {
+                var { topContentId } = _a, rest = __rest(_a, ["topContentId"]);
+                const isAttentionNeeded = filteredResourceUsages.some(({ resourceEntityId }) => +resourceEntityId === topContentId);
+                !isAttentionNeededOnCategory && (isAttentionNeededOnCategory = isAttentionNeeded);
+                return Object.assign(Object.assign({}, rest), { topContentId,
+                    isAttentionNeeded });
+            });
+            return Object.assign(Object.assign({}, rest), { content: contentWithFlag, isAttentionNeeded: isAttentionNeededOnCategory });
+        });
+        return categoriesWithFlaggedContent;
+    }
+    else {
+        return categories;
+    }
+};
+export const isMajorVersion = (selectedVersion) => {
+    return /.x/.test(selectedVersion);
+};

package/lib/esm/reducers/TopContentReducer.d.ts

@@ -1,12 +1,14 @@
 import { IProduct as IHydraProduct, IProduct } from '@cee-eng/hydrajs/@types/models/product';
-import { ITopContent, ITopContentCategory, ITopContentList } from '@cee-eng/hydrajs/@types/models/topContent/topContentModel';
+import { ITopContent, ITopContentCategory, ITopContentList, ITopContentResourceUsagesResponse } from '@cee-eng/hydrajs/@types/models/topContent/topContentModel';
 import { IAction, IApiResponseDetails } from '@rh-support/types/shared';
 export interface ITopContentItemState extends ITopContent {
     mode?: ContentMode;
+    isAttentionNeeded?: boolean;
 }
 export interface ITopContentEditState extends Omit<ITopContentList, 'content'> {
     catMode?: string;
     content: ITopContentItemState[];
+    isAttentionNeeded?: boolean;
 }
 /**  sample obj for IContentUrlsDups type
 contentUrls:IContentUrlsDups = {
@@ -34,6 +36,7 @@ export interface ITopContentState {
     categories: IApiResponseDetails<ITopContentCategory[]>;
     contentUrls: IContentUrlsDups;
     isSearchModeEnabled: boolean;
+    categoryUsage: ITopContentResourceUsagesResponse;
 }
 export declare enum ContentMode {
     INITIAL = "initial",
@@ -56,7 +59,8 @@ export declare enum TopContentReducerConstants {
     updateTopContentCategories = "updateTopContentCategories",
     changeTopContentStateOnCatsArrangementSave = "changeTopContentStateOnCatsArrangementSave",
     setIsSearchModeEnabled = "setIsSearchModeEnabled",
-    resetDuplicatUrls = "resetDuplicatUrls"
+    resetDuplicatUrls = "resetDuplicatUrls",
+    getTopContentResourceUsage = "getTopContentResourceUsage"
 }
 declare type IActionType = IAction<TopContentReducerConstants, ITopContentState>;
 export declare type TopContentReducerDispatchType = (value: IActionType) => void;
@@ -69,6 +73,7 @@ export declare const resetChangeInCategoryContent: (dispatch: TopContentReducerD
 export declare const resetChangeInCategory: (dispatch: TopContentReducerDispatchType, topContentResponse: IApiResponseDetails<ITopContentEditState[]>) => void;
 export declare const resetContentWithSelectedProduct: (dispatch: TopContentReducerDispatchType, selectedProduct: Partial<IHydraProduct>) => void;
 export declare const fetchTopContent: (dispatch: TopContentReducerDispatchType, selectedProduct: Partial<IProduct>, selectedVersion: string) => Promise<never>;
+export declare const fetchTopContentRecourseUsage: (dispatch: TopContentReducerDispatchType, productName: string, version: string) => Promise<void>;
 export declare const addTopContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], categoryId: number) => void;
 export declare const deleteTopContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], categoryId: number, topContentId: number) => Promise<never>;
 export declare const removeTopContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], categoryId: number, i: number) => void;

package/lib/esm/reducers/TopContentReducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopContentReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/TopContentReducer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TopContentReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/TopContentReducer.ts"],"names":[],"mappings":"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"}

package/lib/esm/reducers/TopContentReducer.js

@@ -36,6 +36,7 @@ export var TopContentReducerConstants;
     TopContentReducerConstants["changeTopContentStateOnCatsArrangementSave"] = "changeTopContentStateOnCatsArrangementSave";
     TopContentReducerConstants["setIsSearchModeEnabled"] = "setIsSearchModeEnabled";
     TopContentReducerConstants["resetDuplicatUrls"] = "resetDuplicatUrls";
+    TopContentReducerConstants["getTopContentResourceUsage"] = "getTopContentResourceUsage";
 })(TopContentReducerConstants || (TopContentReducerConstants = {}));
 export const TopContentReducer = (pState, action) => {
     switch (action.type) {
@@ -72,6 +73,9 @@ export const TopContentReducer = (pState, action) => {
         case TopContentReducerConstants.resetDuplicatUrls: {
             return Object.assign(Object.assign({}, pState), { contentUrls: action.payload.contentUrls });
         }
+        case TopContentReducerConstants.getTopContentResourceUsage: {
+            return Object.assign(Object.assign({}, pState), { categoryUsage: action.payload.categoryUsage });
+        }
         default: {
             return pState;
         }
@@ -186,7 +190,10 @@ export const fetchTopContent = (dispatch, selectedProduct, selectedVersion) => _
             sortby: 'rank',
         });
         const resultFiltered = results.filter((c) => c.content.length > 0);
-        const topContentEditState = resultFiltered.map((cat) => (Object.assign(Object.assign({}, cat), { catMode: CategoryMode.EXISTING_SECTION, content: cat.content.map((contentItem) => (Object.assign(Object.assign({}, contentItem), { mode: ContentMode.INITIAL }))) })));
+        const topContentEditState = resultFiltered.map((cat) => {
+            const content = cat.content.map((contentItem) => (Object.assign(Object.assign({}, contentItem), { mode: ContentMode.INITIAL })));
+            return Object.assign(Object.assign({}, cat), { catMode: CategoryMode.EXISTING_SECTION, content });
+        });
         const isCatOnlyForMajorVersion = ((_a = topContentEditState[0]) === null || _a === void 0 ? void 0 : _a.minorVersion) ? false : true;
         const contentUrls = getContentUrls(resultFiltered);
         dispatch({
@@ -200,6 +207,8 @@ export const fetchTopContent = (dispatch, selectedProduct, selectedVersion) => _
                 contentUrls,
             },
         });
+        // Fetch TopContent Recourse Usage
+        fetchTopContentRecourseUsage(dispatch, selectedProduct.name, selectedVersion);
     }
     catch (e) {
         dispatch({
@@ -215,6 +224,29 @@ export const fetchTopContent = (dispatch, selectedProduct, selectedVersion) => _
         return Promise.reject(e);
     }
 });
+export const fetchTopContentRecourseUsage = (dispatch, productName, version) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        dispatch({
+            type: TopContentReducerConstants.getTopContentResourceUsage,
+            payload: { categoryUsage: {} },
+        });
+        const categoryUsage = yield pcm.topContent.postTopContentResourceUsage({
+            source: 'Top Content',
+            product: productName,
+            version: version.split('.x')[0], // Need to remove minor version 'x' as top content resource usage API don't support it.,
+        });
+        dispatch({
+            type: TopContentReducerConstants.getTopContentResourceUsage,
+            payload: { categoryUsage },
+        });
+    }
+    catch (e) {
+        dispatch({
+            type: TopContentReducerConstants.getTopContentResourceUsage,
+            payload: { categoryUsage: {} },
+        });
+    }
+});
 export const addTopContent = (dispatch, topContentEditState, categoryId) => {
     topContentEditState.forEach((cat) => {
         if (cat.id === categoryId) {
@@ -423,7 +455,7 @@ export const reArrangeContent = (dispatch, topContentEditState, categoryId) => _
 export const reArrangeCategory = (topContentEditState) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         const toUpdate = [];
-        topContentEditState.forEach((cat, i) => {
+        topContentEditState.forEach((cat) => {
             cat.content.forEach((item) => {
                 toUpdate.push({
                     id: item.topContentId,

package/lib/esm/scss/_main.scss

@@ -220,6 +220,13 @@
         border: 1px solid #ccc;
         border-top: none;
     }
+    .top-content-needs-attention {
+        color: var(--pf-global--danger-color--100);
+    }
+    .top-content-tooltip {
+        color: var(--pf-global--danger-color--100);
+        padding: 2px;
+    }
 }
 
 // specific overrides under manage because of a different implementation

package/lib/esm/scss/_pf4-overrides.scss

@@ -0,0 +1,67 @@
+// Patternfly overrides
+
+div#top-content-performance-metric.pf-c-modal-box {
+    .pf-c-modal-box__body {
+        .pf-c-title {
+            margin-bottom: unset;
+        }
+        .top-content-tooltip-view-metric-label {
+            color: var(--pf-global--primary-color--100);
+        }
+        .pf-c-panel__main-body {
+            padding: var(--pf-global--spacer--md);
+        }
+        .pf-c-toggle-group__button {
+            /* Somehow below style is getting added by Patternfly which is overriding default button padding  
+            * [class*="pf-c-"], [class*="pf-c-"]::before, [class*="pf-c-"]::after {
+                padding: 0;
+                margin: 0;
+                background-color: transparent;
+            */
+            padding: var(--pf-c-toggle-group__button--PaddingTop) var(--pf-c-toggle-group__button--PaddingRight)
+                var(--pf-c-toggle-group__button--PaddingBottom) var(--pf-c-toggle-group__button--PaddingLeft);
+        }
+    }
+}
+
+div#top-content-category-limit-guidelines.pf-c-modal-box {
+    .pf-c-modal-box__body {
+        .pf-c-title {
+            margin-bottom: unset;
+        }
+    }
+}
+
+div#top-content-major-version-performance-metric.pf-c-modal-box {
+    .pf-c-modal-box__body {
+        overflow-x: unset;
+        overflow-y: unset;
+        .pf-c-title {
+            margin-bottom: unset;
+        }
+        .pf-c-toggle-group__button {
+            /* Somehow below style is getting added by Patternfly which is overriding default button padding  
+            * [class*="pf-c-"], [class*="pf-c-"]::before, [class*="pf-c-"]::after {
+                padding: 0;
+                margin: 0;
+                background-color: transparent;
+            */
+            padding: var(--pf-c-toggle-group__button--PaddingTop) var(--pf-c-toggle-group__button--PaddingRight)
+                var(--pf-c-toggle-group__button--PaddingBottom) var(--pf-c-toggle-group__button--PaddingLeft);
+        }
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            background: var(--pf-c-modal-box--BackgroundColor);
+            z-index: 1;
+            padding-bottom: var(--pf-global--spacer--sm);
+        }
+        .content {
+            height: 30vh;
+            overflow: auto;
+        }
+        .panel-body {
+            padding: var(--pf-global--spacer--md);
+        }
+    }
+}

package/lib/esm/scss/index.scss

@@ -19,4 +19,15 @@
             }
         }
     }
+    .pf-c-popover {
+        .pf-c-popover__content {
+            .pf-c-popover__body {
+                .top-content-tooltip-view-metric-label {
+                    color: var(--pf-global--primary-color--100);
+                }
+            }
+        }
+    }
 }
+
+@import './pf4-overrides';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "0.2.44",
+    "version": "0.2.62",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "homepage": "",
@@ -51,7 +51,7 @@
         "not op_mini all"
     ],
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.7.20",
+        "@cee-eng/hydrajs": "4.7.22",
         "@patternfly/patternfly": "4.176.2",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
@@ -89,20 +89,20 @@
         "typescript": "4.3.5"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.7.20",
+        "@cee-eng/hydrajs": "4.7.22",
         "@patternfly/patternfly": "4.176.2",
         "@patternfly/pfe-accordion": "1.12.3",
         "@patternfly/pfe-collapse": "1.12.3",
         "@patternfly/pfe-tabs": "1.12.3",
         "@patternfly/react-core": "4.194.0",
         "@patternfly/react-table": "4.63.0",
-        "@rh-support/api": "^0.3.12",
-        "@rh-support/components": "^1.1.31",
-        "@rh-support/configs": "^0.2.7",
-        "@rh-support/react-context": "^0.2.34",
-        "@rh-support/types": "^0.2.2",
-        "@rh-support/user-permissions": "^0.2.25",
-        "@rh-support/utils": "^0.2.23",
+        "@rh-support/api": "0.3.13",
+        "@rh-support/components": "1.1.52",
+        "@rh-support/configs": "0.2.5",
+        "@rh-support/react-context": "0.2.52",
+        "@rh-support/types": "0.2.0",
+        "@rh-support/user-permissions": "0.2.42",
+        "@rh-support/utils": "0.2.32",
         "@types/react-beautiful-dnd": "^13.0.0",
         "i18next": ">=17.0.1",
         "lodash": ">=4.17.15",
@@ -113,5 +113,5 @@
         "react-i18next": ">=10.11.0",
         "react-router-dom": ">=5.1.2"
     },
-    "gitHead": "70f8095b855f531eb814e85cb5a77908405fff5f"
+    "gitHead": "3d97efe5cebb4e398f73d61326cad31e087aa63f"
 }