@rh-support/manage 2.1.82 → 2.1.83

package/lib/esm/Manage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Manage.d.ts","sourceRoot":"","sources":["../../src/Manage.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAKvD,MAAM,WAAW,qBAAqB;CAAG;AACzC,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;IACvD,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;IAED,UAAU,GAAG,CAAC;QACV,UAAU,iBAAkB,SAAQ,QAAQ;SAAG;KAClD;CACJ;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,qBAUnC"}
+{"version":3,"file":"Manage.d.ts","sourceRoot":"","sources":["../../src/Manage.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAI3B,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAS,mBAAmB,EAAU,MAAM,kBAAkB,CAAC;AAItE,MAAM,WAAW,qBAAqB;CAAG;AACzC,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;IACvD,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,SAAS,EAAE,GAAG,CAAC;QACf,oBAAoB,EAAE,GAAG,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC;QACZ,KAAK,EAAE,GAAG,CAAC;QACX,aAAa,EAAE;YACX,cAAc,EAAE,MAAM,CAAC;YACvB,OAAO,EAAE,MAAM,CAAC;SACnB,CAAC;KACL;IAED,UAAU,QAAQ;QACd,YAAY,EAAE,GAAG,CAAC;KACrB;IAED,UAAU,GAAG,CAAC;QACV,UAAU,iBAAkB,SAAQ,QAAQ;SAAG;KAClD;CACJ;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,qBAYnC"}

package/lib/esm/Manage.js

@@ -1,11 +1,12 @@
 import './scss/index.scss';
 import { ConfirmationServiceProvider } from '@rh-support/components';
 import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 import { ManageTabs } from './ManageTabs';
-import { Routes } from './Routes';
 export function Manage(props) {
-    Routes.basePath = props.basePath;
     return (React.createElement("div", { id: "rh-support-manage" },
         React.createElement(ConfirmationServiceProvider, null,
-            React.createElement(ManageTabs, { routeProps: props.routeProps }))));
+            React.createElement(Switch, null,
+                React.createElement(Route, { path: `${props.basePath}/:activeTab?` },
+                    React.createElement(ManageTabs, { routeProps: props.routeProps, basePath: props.basePath }))))));
 }

package/lib/esm/ManageTabs.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 interface IProps {
     routeProps: RouteComponentProps<{}>;
+    basePath: string;
 }
 export declare function ManageTabs(props: IProps): React.JSX.Element;
 export {};

package/lib/esm/ManageTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ManageTabs.d.ts","sourceRoot":"","sources":["../../src/ManageTabs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAavD,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,EAAE,CAAC,CAAC;CACvC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBA4JvC"}
+{"version":3,"file":"ManageTabs.d.ts","sourceRoot":"","sources":["../../src/ManageTabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAYlE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,EAAE,CAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBA8KvC"}

package/lib/esm/ManageTabs.js

@@ -1,7 +1,10 @@
+import { Tab, TabContent, Tabs, TabsComponent, TabTitleText } from '@patternfly/react-core';
 import { ErrorBoundary, useDocumentTitle } from '@rh-support/components';
 import { ability, CaseDetailsFields, resourceActions, resources } from '@rh-support/user-permissions';
 import map from 'lodash/map';
-import React from 'react';
+import React, { useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import { ConfigsTable } from './components/Configs/ConfigsTable';
 import { ManageGroupUsers } from './components/Groups/ManageGroupUsers';
 import { ManageGroupedBookmarkedAccountsTab } from './components/ManageBookmarkedAccountsTab';
@@ -10,19 +13,14 @@ import { ManagePreferences } from './components/ManagePreferences';
 import { NotificationEmails } from './components/NotificationEmails/index';
 import { TopContentManagement } from './components/TopContentManagement';
 import { PageTitle } from './constants/pageTitle';
-import { ManageTab } from './ManageTab';
 import { Routes } from './Routes';
 export function ManageTabs(props) {
     var _a, _b;
-    const history = props.routeProps.history;
+    const [activeTabKey, setActiveTabKey] = useState(0);
+    const { activeTab } = useParams();
+    const { t } = useTranslation();
     const { groupsRoute, bookmarkedAccountsRoute, topContentRoute, notificationEmailsRoute, preferencesRoute, configsRoute, partnershipsRoute, } = Routes.getPaths();
-    // Changes route and saves the current path to the url query params
-    const isOnlyBasePath = history.location.pathname === Routes.basePath;
     useDocumentTitle(PageTitle.MANAGE);
-    const changeRouteThunk = (route) => {
-        // add last selected manage tab to session storage
-        history.push(route);
-    };
     const canViewManageTab = ability.can(resourceActions.READ, resources.MANAGE);
     const canViewManageTopContent = ability.can(resourceActions.READ, resources.TOP_CONTENT) && canViewManageTab;
     const canViewCaseGroups = ability.can(resourceActions.READ, resources.CASE_GROUPS) && canViewManageTab;
@@ -38,10 +36,8 @@ export function ManageTabs(props) {
             key: 'bookmarked-accounts-tab',
             'data-tracking-id': 'manage-bookmarks-tab',
             routePath: bookmarkedAccountsRoute,
-            onClick: () => {
-                changeRouteThunk(bookmarkedAccountsRoute);
-            },
             component: React.createElement(ManageGroupedBookmarkedAccountsTab, { canManageBookmarkAccounts: canManageBookmarkAccounts }),
+            id: 'manage-bookmarked-accounts',
         });
     canViewCaseGroups &&
         tabsToRender.push({
@@ -49,10 +45,8 @@ export function ManageTabs(props) {
             key: 'groups-tab',
             routePath: groupsRoute,
             'data-tracking-id': 'manage-groups-tab',
-            onClick: () => {
-                changeRouteThunk(groupsRoute);
-            },
             component: React.createElement(ManageGroupUsers, null),
+            id: 'manage-groups',
         });
     canViewEmailNotificationTab &&
         canAddCustomNotification &&
@@ -61,10 +55,8 @@ export function ManageTabs(props) {
             key: 'notification-emails-tab',
             'data-tracking-id': 'notification-emails-tab',
             routePath: notificationEmailsRoute,
-            onClick: () => {
-                changeRouteThunk(notificationEmailsRoute);
-            },
             component: React.createElement(NotificationEmails, null),
+            id: 'notification-emails',
         });
     canViewPartnershipsTab &&
         tabsToRender.push({
@@ -72,20 +64,16 @@ export function ManageTabs(props) {
             key: 'partnerships-tab',
             'data-tracking-id': 'partnerships-tab',
             routePath: partnershipsRoute,
-            onClick: () => {
-                changeRouteThunk(partnershipsRoute);
-            },
             component: React.createElement(ManagePartnerships, null),
+            id: 'partnerships',
         });
     tabsToRender.push({
         title: 'Preferences',
         key: 'preferences-tab',
         'data-tracking-id': 'preferences-tab',
         routePath: preferencesRoute,
-        onClick: () => {
-            changeRouteThunk(preferencesRoute);
-        },
         component: React.createElement(ManagePreferences, null),
+        id: 'preferences-body',
     });
     canViewManageTopContent &&
         tabsToRender.push({
@@ -93,10 +81,8 @@ export function ManageTabs(props) {
             key: 'top-content-tab',
             'data-tracking-id': 'manage-top-content-tab',
             routePath: topContentRoute,
-            onClick: () => {
-                changeRouteThunk(topContentRoute);
-            },
             component: React.createElement(TopContentManagement, null),
+            id: 'manage-top-content',
         });
     canViewConfigsTab &&
         tabsToRender.push({
@@ -104,27 +90,35 @@ export function ManageTabs(props) {
             key: 'pcm-internal-configs-tab',
             'data-tracking-id': 'pcm-config-admin-tab',
             routePath: configsRoute,
-            onClick: () => {
-                changeRouteThunk(configsRoute);
-            },
             component: React.createElement(ConfigsTable, null),
+            id: 'internal-config',
         });
+    const getActiveTabKey = () => {
+        if (!activeTab)
+            return activeTabKey;
+        const tabIndex = tabsToRender.findIndex((item) => item.routePath === activeTab);
+        return tabIndex > -1 ? tabIndex : activeTabKey;
+    };
+    // Toggle currently active tab
+    const handleTabClick = (event, tabIndex) => {
+        setActiveTabKey(tabIndex);
+    };
     /**
      * Render without tabs if there is only one element
      */
     if (tabsToRender.length === 1)
         return (React.createElement("div", { className: "grid-main manage" },
             React.createElement(ErrorBoundary, { isPageLevelError: true }, (_b = (_a = tabsToRender[0]) === null || _a === void 0 ? void 0 : _a.component) !== null && _b !== void 0 ? _b : React.createElement(React.Fragment, null))));
-    // To get selected index
-    const getSelectedIndex = () => {
-        if (isOnlyBasePath)
-            return 0;
-        const tabIndex = tabsToRender.findIndex((tab) => tab.routePath === history.location.pathname.substring(0, tab.routePath.length));
-        return tabIndex > -1 ? tabIndex : 0;
-    };
     /**
      * Render array with tabs
      */
-    return (React.createElement("div", { className: "grid-main manage" },
-        React.createElement("pfe-tabs", { "pfe-variant": "earth", "selected-index": getSelectedIndex(), vertical: true }, map(tabsToRender, (tab, index) => (React.createElement(ManageTab, { tabIndex: getSelectedIndex(), tab: tab, key: tab.key, loadComponent: index === getSelectedIndex() }))))));
+    return (React.createElement("div", { className: "grid-main manage", role: "region", style: { display: 'flex' } },
+        React.createElement(Tabs, { activeKey: getActiveTabKey(), onSelect: handleTabClick, "aria-label": t('Manage tabs'), component: TabsComponent.nav, isVertical: true, style: { width: 'auto' } }, map(tabsToRender, (tab, index) => (React.createElement(Tab, { eventKey: index, tabContentRef: tab.ref, tabContentId: `pf-tab-${index}-${tab.title.split(' ')[0]}-tabpanel`, title: React.createElement(TabTitleText, null,
+                React.createElement(Trans, null, tab.title)), "data-tracking-id": tab['data-tracking-id'], key: tab.title, href: `#${props.basePath}/${tab.routePath}` })))),
+        map(tabsToRender, (tab, index) => {
+            return index === getActiveTabKey() ? (React.createElement(TabContent, { activeKey: getActiveTabKey(), id: tab.id, "aria-label": tab.title },
+                React.createElement(ErrorBoundary, { errorMsgInfo: {
+                        message: t('There was an error loading manage tab. Please try refreshing the page.'),
+                    }, isPageLevelError: true }, tab.component))) : (React.createElement(React.Fragment, null));
+        })));
 }

package/lib/esm/Routes.js

@@ -1,55 +1,55 @@
 export const Routes = {
     basePath: '',
     groups: {
-        path: '/groups',
+        path: 'groups',
         getPath() {
             return getPath(this);
         },
     },
     bookmarkedAccounts: {
-        path: '/bookmarks',
+        path: 'bookmarks',
         getPath() {
             return getPath(this);
         },
     },
     fileDiagnostics: {
-        path: '/file-diagnostics',
+        path: 'file-diagnostics',
         getPath() {
             return getPath(this);
         },
     },
     savedSearches: {
-        path: '/saved-searches',
+        path: 'saved-searches',
         getPath() {
             return getPath(this);
         },
     },
     topContent: {
-        path: '/top-content',
+        path: 'top-content',
         getPath() {
             return getPath(this);
         },
     },
     preferences: {
-        path: '/preferences',
+        path: 'preferences',
         getPath() {
             return getPath(this);
         },
     },
     partnerships: {
-        path: '/partnerships',
+        path: 'partnerships',
         getPath() {
             return getPath(this);
         },
     },
     notificationEmails: {
-        path: '/notification-emails',
+        path: 'notification-emails',
         getPath() {
             return getPath(this);
         },
     },
     configs: {
-        path: '/configs',
+        path: 'configs',
         getPath() {
             return getPath(this);
         },

package/lib/esm/components/Configs/ConfigsTable.js

@@ -112,7 +112,7 @@ export const ConfigsTable = () => {
             setFilteredValues(configValues);
         }
     }, [searchString, configValues]);
-    return (React.createElement("section", { id: "notification-emails" },
+    return (React.createElement(React.Fragment, null,
         React.createElement("header", null,
             React.createElement("h2", null, "Internal app configs"),
             "Edit app configs that used as flags or other settings here."),

package/lib/esm/components/Groups/ManageGroupUsers/ManageGroupUsers.js

@@ -129,7 +129,7 @@ export const ManageGroupUsers = () => {
         setAllData(response || []);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [location.pathname]);
-    return (React.createElement("section", { id: "manage-groups" },
+    return (React.createElement(React.Fragment, null,
         React.createElement(AlertMessage, { variant: AlertType.INFO, show: loggedInUserRights.data.isOrgAdmin() && !loggedInUsersAccount.data.hasGroupACLs, isInline: true, className: "pf-v5-u-mb-md", title: t("Case Group Access Control Lists (ACLs) haven't been activated on your account.") },
             React.createElement("p", null,
                 React.createElement(Trans, { i18nKey: "i18nRequestControl" },

package/lib/esm/components/ManageBookmarkedAccountsTab/ManageGroupedBookmarkedAccountsTab.js

@@ -245,7 +245,7 @@ export function ManageGroupedBookmarkedAccountsTab({ canManageBookmarkAccounts }
     };
     if (!canManageBookmarkAccounts)
         return null;
-    return (React.createElement("section", { id: "manage-bookmarked-accounts" },
+    return (React.createElement(React.Fragment, null,
         React.createElement("header", null,
             React.createElement("h2", null, t('Bookmarks')),
             React.createElement("p", null,

package/lib/esm/components/ManagePartnerships/index.js

@@ -12,7 +12,7 @@ export function ManagePartnerships() {
     const { t } = useTranslation();
     const { globalMetadataState: { loggedInUserRights }, } = useGlobalStateContext();
     return (React.createElement(React.Fragment, null,
-        React.createElement("header", { className: "pf-v5-u-mt-md pf-v5-u-mb-xs" },
+        React.createElement("header", { className: "pf-v5-u-mb-xs" },
             React.createElement("h2", null,
                 React.createElement(Trans, null, "Partnerships")),
             React.createElement("p", null, loggedInUserRights.data.isPartner() ? (React.createElement(Trans, null, "Add, edit, or remove partnerships and manage your collaboration requests")) : (React.createElement(React.Fragment, null, loggedInUserRights.data.isCustomerOrgAdmin() ? (React.createElement(Trans, null, "Confirm, filter, or remove partnerships and manage collaboration requests.")) : (React.createElement(Trans, null, "Filter or remove partnerships and manage collaboration requests.")))))),

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

@@ -1 +1 @@
-{"version":3,"file":"ManagePreferences.d.ts","sourceRoot":"","sources":["../../../../src/components/ManagePreferences/ManagePreferences.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;CAAG;AAEnB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBAM9C"}
+{"version":3,"file":"ManagePreferences.d.ts","sourceRoot":"","sources":["../../../../src/components/ManagePreferences/ManagePreferences.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,MAAM;CAAG;AAEnB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,qBAE9C"}

package/lib/esm/components/ManagePreferences/ManagePreferences.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Preferences } from './Preferences';
 export function ManagePreferences(props) {
-    return (React.createElement("section", { id: "manage-preferences" },
-        React.createElement(Preferences, null)));
+    return React.createElement(Preferences, null);
 }

package/lib/esm/components/ManagePreferences/PreferencesBody.js

@@ -3,7 +3,7 @@ import { PreferencesCaseCreate } from './sections/PreferencesCaseCreate';
 import { PreferencesCaseSearch } from './sections/PreferencesCaseSearch';
 import { PreferencesCaseView } from './sections/PreferencesCaseView';
 export function PreferencesBody(props) {
-    return (React.createElement("section", { className: "pfe-l-grid pfe-m-gutters pfe-m-all-4-col", id: "preferences-body" },
+    return (React.createElement("div", { className: "pfe-l-grid pfe-m-gutters pfe-m-all-4-col" },
         React.createElement(PreferencesCaseSearch, null),
         React.createElement(PreferencesCaseView, null),
         React.createElement(PreferencesCaseCreate, null)));

package/lib/esm/components/NotificationEmails/index.js

@@ -155,7 +155,7 @@ export function NotificationEmails() {
         setIsAddingNotificationEmail(true);
         editEmail({ firstName: '', lastName: '', email: emailToAdd });
     };
-    return (React.createElement("section", { id: "notification-emails" },
+    return (React.createElement(React.Fragment, null,
         React.createElement("header", null,
             React.createElement("h2", null, t('Notification emails')),
             t('Add, edit or remove emails from your account that were added to receive notifications.')),

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

@@ -115,7 +115,7 @@ export function TopContentEditor() {
         React.createElement(TopContentProductVersionSelector, { selectedProduct: selectedProduct, selectedVersion: selectedVersion, onProductChange: onProductChange, onVersionChange: onVersionChange }),
         !topContentResponse.isFetching && (React.createElement(TopContentSearch, { dataTrackingId: "top-content-filter-manage", topContentData: flagContentEditState, onSearch: onSearch, topContentResultsWrapperRef: topContentResultsRef, searchQuery: searchQuery, setSearchQuery: setSearchQuery })),
         React.createElement("div", { className: "top-content-manage-wrapper pf-v5-u-pt-md" },
-            !topContentResponse.isFetching && !isSearchModeEnabled && React.createElement(TopContentSuggestion, null),
+            !topContentResponse.isFetching && React.createElement(TopContentSuggestion, { searchQuery: searchQuery }),
             topContentResponse.isFetching ? (React.createElement(Bullseye, null,
                 React.createElement(EmptyState, { variant: EmptyStateVariant.full },
                     React.createElement(Spinner, { size: "lg" })))) : (!topContentResponse.isFetching &&

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 interface IProps {
+    searchQuery?: string;
 }
 export declare const TopContentSuggestion: FC<IProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TopContentSuggestion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestion.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAOvD,UAAU,MAAM;CAAG;AAEnB,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,MAAM,CA6C3C,CAAC"}
+{"version":3,"file":"TopContentSuggestion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentSuggestion/TopContentSuggestion.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,EAAE,EAAwC,MAAM,OAAO,CAAC;AAWxE,UAAU,MAAM;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,MAAM,CA8E3C,CAAC"}

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

@@ -1,30 +1,55 @@
 import { ExpandableSection, Panel, PanelMain, PanelMainBody, Title } from '@patternfly/react-core';
+import { useSearchDocument } from '@rh-support/components';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useState } from 'react';
+import Mark from 'mark.js';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
-import { fetchTopContentSuggestions } from '../../../../reducers/TopContentReducer';
+import { fetchTopContentSuggestions, } from '../../../../reducers/TopContentReducer';
 import { TopContentSuggestionHint } from './TopContentSuggestionHint';
-export const TopContentSuggestion = () => {
-    var _a;
+export const TopContentSuggestion = ({ searchQuery = '' }) => {
     const [isExpanded, setExpanded] = useState(false);
+    const ref = useRef(null);
     const onToggle = () => setExpanded((previousExpandedState) => !previousExpandedState);
     const { selectedProduct, selectedVersion, suggestion, topContentResponse } = useTopContentContext();
     const topContentDispatch = useTopContentDispatchContext();
-    const topContent = topContentResponse.data.reduce((ret, category) => {
+    const topContent = useMemo(() => topContentResponse.data.reduce((ret, category) => {
         return [...ret, ...category.content];
-    }, []);
-    const filteredSuggestion = (_a = suggestion.linkedResources) === null || _a === void 0 ? void 0 : _a.filter((resource) => !topContent.some((content) => content.contentUrl === resource.resourceViewUri));
+    }, []), [topContentResponse.data]);
+    const filteredSuggestion = useMemo(() => {
+        var _a;
+        return (_a = suggestion.linkedResources) === null || _a === void 0 ? void 0 : _a.filter((resource) => !topContent.some((content) => content.contentUrl === resource.resourceViewUri));
+    }, [suggestion.linkedResources, topContent]);
     useEffect(() => {
         if ((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.name) && selectedVersion) {
             fetchTopContentSuggestions(topContentDispatch, selectedProduct.name, selectedVersion);
         }
     }, [topContentDispatch, selectedProduct, selectedVersion]);
-    if (isEmpty(filteredSuggestion))
+    const searchedContent = useSearchDocument(filteredSuggestion || [], searchQuery, {
+        indexKey: 'id',
+        strategy: (doc) => doc.resourceTitle,
+    });
+    useEffect(() => {
+        var _a;
+        if (ref.current == null)
+            return;
+        setExpanded(!isEmpty(searchQuery));
+        const containers = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div.pf-v5-c-card');
+        const markInstance = new Mark(containers);
+        markInstance.unmark({
+            done: () => {
+                if (isEmpty(searchQuery))
+                    return;
+                markInstance.mark(searchQuery, { separateWordSearch: true });
+            },
+        });
+    }, [searchedContent, searchQuery]);
+    if (isEmpty(searchedContent))
         return React.createElement(React.Fragment, null);
-    return (React.createElement(Panel, { variant: "raised", className: "pf-v5-u-mx-md pf-v5-u-p-md top-content-panel" },
+    return (React.createElement(Panel, { variant: "raised", className: "pf-v5-u-mx-md pf-v5-u-p-md top-content-panel", ref: ref },
         React.createElement(PanelMain, null,
             React.createElement(PanelMainBody, null,
                 React.createElement(ExpandableSection, { onToggle: onToggle, isExpanded: isExpanded, toggleContent: React.createElement(Title, { headingLevel: "h6", className: "accordion_title" },
-                        React.createElement(Trans, null, " Suggested top content resources")), id: "top-content-suggestion" }, filteredSuggestion === null || filteredSuggestion === void 0 ? void 0 : filteredSuggestion.map((resources) => (React.createElement(TopContentSuggestionHint, { key: resources.id, resources: resources }))))))));
+                        React.createElement(Trans, null, " Suggested top content resources")), id: "top-content-suggestion" }, !isEmpty(searchedContent) &&
+                    (searchedContent === null || searchedContent === void 0 ? void 0 : searchedContent.map((resources) => (React.createElement(TopContentSuggestionHint, { key: resources.id, resources: resources })))))))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TopContentManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,MAAM;CAAG;AAEnB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAYjD"}
+{"version":3,"file":"TopContentManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,MAAM;CAAG;AAEnB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAUjD"}

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

@@ -5,8 +5,7 @@ import { TopContentContextProvider } from '../../context/TopContentProvider';
 import { TopContentEditor } from './TopContentEditor/TopContentEditor';
 export function TopContentManagement(props) {
     const { t } = useTranslation();
-    return (React.createElement("section", { id: "manage-top-content" },
-        React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } },
-            React.createElement(TopContentContextProvider, null,
-                React.createElement(TopContentEditor, null)))));
+    return (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } },
+        React.createElement(TopContentContextProvider, null,
+            React.createElement(TopContentEditor, null))));
 }

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

@@ -24,7 +24,7 @@ interface categoryDups {
 export interface IContentUrlsDups {
     [url: string]: categoryDups;
 }
-interface ITopContentSuggestionLinkedResources {
+export interface ITopContentSuggestionLinkedResources {
     id: number;
     numberOfCaseLinked: number;
     productName: string;

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/scss/_main.scss

@@ -121,10 +121,6 @@
         }
     }
 
-    .panels {
-        width: 100%;
-    }
-
     .create-category-link {
         padding: 0;
     }
@@ -133,14 +129,6 @@
         margin-bottom: 1rem;
     }
 
-    [role='tabpanel'] {
-        background-color: #fff !important;
-
-        & > * {
-            padding: 0 0.5rem 1rem;
-        }
-    }
-
     .table-wrapper {
         margin-bottom: 2rem;
         border: 1px solid #ccc;
@@ -176,6 +164,26 @@
             }
         }
     }
+    .pf-v5-c-tabs__item {
+        white-space: nowrap;
+        a {
+            color: gray;
+        }
+        a:hover {
+            color: black;
+        }
+    }
+
+    .pf-v5-c-tabs__item.pf-m-current {
+        background-color: white;
+        a {
+            color: black;
+        }
+    }
+
+    .pf-v5-c-tab-content {
+        flex: 1;
+    }
 }
 
 #manage-top-content {

package/lib/esm/scss/index.scss

@@ -13,8 +13,8 @@
             min-width: 0;
             background-color: #ededed;
 
-            section {
-                padding: 2rem;
+            & > section.pf-v5-c-tab-content {
+                padding: 3rem;
                 background-color: #fff;
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "2.1.82",
+    "version": "2.1.83",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "license": "ISC",
@@ -50,6 +50,7 @@
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
         "lodash": ">=4.17.15",
+        "mark.js": "^8.11.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-i18next": "^12.3.1",
@@ -78,14 +79,15 @@
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
-        "@rh-support/components": "2.1.61",
+        "@rh-support/components": "2.1.62",
         "@rh-support/configs": "2.0.19",
-        "@rh-support/react-context": "2.1.69",
-        "@rh-support/types": "2.0.3",
-        "@rh-support/user-permissions": "2.1.44",
-        "@rh-support/utils": "2.1.33",
+        "@rh-support/react-context": "2.1.70",
+        "@rh-support/types": "2.0.4",
+        "@rh-support/user-permissions": "2.1.45",
+        "@rh-support/utils": "2.1.34",
         "@types/react-beautiful-dnd": "^13.0.0",
         "lodash": ">=4.17.15",
+        "mark.js": "^8.11.1",
         "react": "18.2.0",
         "react-beautiful-dnd": "^13.0.0",
         "react-dom": "18.2.0",
@@ -100,5 +102,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "0fa0968e831c199572669184c466e9fecd781d12"
+    "gitHead": "ecb9820a2fe40793e79c0f9f4786ec657070fe64"
 }

package/lib/esm/ManageTab.d.ts

@@ -1,10 +0,0 @@
-import { ITabToRender } from '@rh-support/types/shared';
-import React from 'react';
-interface IProps {
-    tab: ITabToRender<string>;
-    loadComponent: boolean;
-    tabIndex: number;
-}
-export declare function ManageTab(props: IProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=ManageTab.d.ts.map

package/lib/esm/ManageTab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ManageTab.d.ts","sourceRoot":"","sources":["../../src/ManageTab.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,UAAU,MAAM;IACZ,GAAG,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,qBA+BtC"}

package/lib/esm/ManageTab.js

@@ -1,22 +0,0 @@
-import { ErrorBoundary } from '@rh-support/components';
-import React, { useEffect } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-export function ManageTab(props) {
-    const tab = props.tab;
-    const { t } = useTranslation();
-    useEffect(() => {
-        if (!props.loadComponent)
-            return;
-        const tabPaneles = document.getElementsByTagName('pfe-tab-panel');
-        if (tabPaneles.length > 0 && tabPaneles[props.tabIndex])
-            tabPaneles[props.tabIndex].removeAttribute('hidden');
-    }, [props.loadComponent, props.tabIndex]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("pfe-tab", { role: "tab", slot: "tab", "data-tracking-id": tab['data-tracking-id'], onClick: tab.onClick },
-            React.createElement(Trans, null,
-                React.createElement("h2", null, tab.title))),
-        React.createElement("pfe-tab-panel", { role: "tabpanel", slot: "panel" },
-            React.createElement(ErrorBoundary, { errorMsgInfo: {
-                    message: t('There was an error loading manage tab. Please try refreshing the page.'),
-                }, isPageLevelError: true }, props.loadComponent && tab.component))));
-}