@rh-support/manage 0.2.32 → 0.2.35

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/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,EAAqB,MAAM,OAAO,CAAC;AAKrD,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,CA6EzC,CAAC"}

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

@@ -0,0 +1,43 @@
+import { Button, HelperText, HelperTextItem, Modal, ModalVariant, Panel, PanelMain, PanelMainBody, Title, TitleSizes, ToggleGroup, ToggleGroupItem, } from '@patternfly/react-core';
+import React, { useMemo, useState } from 'react';
+import { Trans } from 'react-i18next';
+import { useTopContentContext } from '../../../context/TopContentProvider';
+export const PerformanceMetrics = ({ isModalOpen, onHideModal, needsAttention, contentId, title, lastModifiedBy, }) => {
+    const [selectedOption, setSelectedOption] = useState(0);
+    const { categoryUsage, selectedVersion } = useTopContentContext();
+    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(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-pt-sm" }, "Better understand the Performance for the top content resources."),
+        React.createElement("br", null),
+        React.createElement("span", { className: "top-content-tooltip-view-metric-label" }, title),
+        React.createElement("br", null),
+        React.createElement("span", null, lastModifiedBy),
+        React.createElement("br", null),
+        React.createElement("br", 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, null,
+                    React.createElement(HelperText, null,
+                        React.createElement(HelperTextItem, { variant: needsAttention ? 'error' : 'default' },
+                            React.createElement(Trans, { count: count },
+                                "Clicked ",
+                                { count },
+                                " times"))))))));
+};

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":"AAwCA,wBAAgB,gBAAgB,gBA2R/B"}

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

@@ -11,10 +11,11 @@ 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 { useTopContentContext, useTopContentDispatchContext } from '../../../context/TopContentProvider';
+import { flagContentUsage } from '../../../reducers/TopContentHelpers';
 import { CategoryMode, fetchTopContent, reArrangeCategory, resetChangeInCategory, resetContentWithSelectedProduct, resetDuplicatUrls, setAddNewSection, setIsAddingCategory, setIsSearchModeEnabled, setTopContentArrangingCategory, setTopContentArrangingContent, } from '../../../reducers/TopContentReducer';
 import { NoTopContentFound } from '../NoTopContentFound';
 import { TopContentHeader } from '../TopContentHeader';
@@ -27,9 +28,10 @@ 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);
     };
@@ -39,14 +41,14 @@ export function TopContentEditor() {
         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 +57,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 +74,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 +99,18 @@ 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;
     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;
@@ -129,7 +131,7 @@ export function TopContentEditor() {
                             React.createElement(Button, { variant: "primary", onClick: () => onAddCategory(isContentOnlyForMajorVersion, false, selectedVersion), "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(Button, { variant: "secondary", onClick: arrangeSection, isDisabled: flagContentEditState.length < 2 },
                                 React.createElement(Trans, null, "Arrange section")))),
                         isArrangingCats && (React.createElement(React.Fragment, null,
                             React.createElement(Button, { variant: "primary", onClick: onSaveArrangement },

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/reducers/TopContentHelpers.d.ts

@@ -1,3 +1,17 @@
+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[];
 //# 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"}

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,37 @@ 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 (!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;
+    }
+};

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,16 @@
         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;
+    }
+    .top-content-tooltip-view-metric-label {
+        color: var(--pf-global--primary-color--100);
+    }
 }
 
 // specific overrides under manage because of a different implementation

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

@@ -0,0 +1,25 @@
+// 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);
+        }
+    }
+}

package/lib/esm/scss/index.scss

@@ -20,3 +20,5 @@
         }
     }
 }
+
+@import './pf4-overrides';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "0.2.32",
+    "version": "0.2.35",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "homepage": "",
@@ -51,13 +51,13 @@
         "not op_mini all"
     ],
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.7.3",
-        "@patternfly/patternfly": "4.102.2",
-        "@patternfly/pfe-accordion": "1.1.0",
-        "@patternfly/pfe-collapse": "1.1.0",
-        "@patternfly/pfe-tabs": "1.1.0",
-        "@patternfly/react-core": "4.128.2",
-        "@patternfly/react-table": "4.26.7",
+        "@cee-eng/hydrajs": "4.7.20",
+        "@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.9",
         "@rh-support/components": "^0.1.3",
         "@rh-support/react-context": "^0.1.3",
@@ -89,20 +89,20 @@
         "typescript": "4.3.5"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.7.3",
-        "@patternfly/patternfly": "4.102.2",
-        "@patternfly/pfe-accordion": "1.1.0",
-        "@patternfly/pfe-collapse": "1.1.0",
-        "@patternfly/pfe-tabs": "1.1.0",
-        "@patternfly/react-core": "4.128.2",
-        "@patternfly/react-table": "4.26.7",
-        "@rh-support/api": "0.3.9",
-        "@rh-support/components": "1.1.23",
-        "@rh-support/configs": "0.2.4",
-        "@rh-support/react-context": "0.2.25",
+        "@cee-eng/hydrajs": "4.7.20",
+        "@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.10",
+        "@rh-support/components": "1.1.25",
+        "@rh-support/configs": "0.2.5",
+        "@rh-support/react-context": "0.2.28",
         "@rh-support/types": "0.2.0",
-        "@rh-support/user-permissions": "0.2.17",
-        "@rh-support/utils": "0.2.15",
+        "@rh-support/user-permissions": "0.2.19",
+        "@rh-support/utils": "0.2.17",
         "@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": "1fba07cc7a41e8388393d62c86e3c12df383f428"
+    "gitHead": "2821a4eb373d262b83d3a512900eb68d1fa22d55"
 }