@rh-support/manage 2.1.82 → 2.1.84

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;AAalE,UAAU,MAAM;IACZ,UAAU,EAAE,mBAAmB,CAAC,EAAE,CAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,qBAyLvC"}

package/lib/esm/ManageTabs.js

@@ -1,28 +1,27 @@
+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';
 import { ManagePartnerships } from './components/ManagePartnerships/index';
 import { ManagePreferences } from './components/ManagePreferences';
+import { TagsManagement } from './components/ManageTags';
 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 { 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;
+    const [activeTabKey, setActiveTabKey] = useState(0);
+    const { activeTab } = useParams();
+    const { t } = useTranslation();
+    const { groupsRoute, bookmarkedAccountsRoute, topContentRoute, notificationEmailsRoute, preferencesRoute, configsRoute, partnershipsRoute, tagsManagerRoute, } = Routes.getPaths();
     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 +37,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 +46,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 +56,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 +65,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 +82,17 @@ 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',
+        });
+    canViewManageTopContent &&
+        tabsToRender.push({
+            title: 'Tags Manager',
+            key: 'tags-manager-tab',
+            'data-tracking-id': 'tags-manager-tab',
+            routePath: tagsManagerRoute,
+            id: 'tags-manager',
+            component: React.createElement(TagsManagement, null),
         });
     canViewConfigsTab &&
         tabsToRender.push({
@@ -104,27 +100,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.d.ts

@@ -13,6 +13,7 @@ interface ManageRoutes {
     groups: Route;
     savedSearches: Route;
     topContent: Route;
+    tagsManager: Route;
     preferences: Route;
     notificationEmails: Route;
     configs: Route;

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

@@ -1 +1 @@
-{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/Routes.ts"],"names":[],"mappings":"AAAA,UAAU,KAAK;IACX,QAAQ,CAAC,OAAO,EAAE,MAAM,MAAM,CAAC;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,YAAY;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,KAAK,CAAC;IAC1B,eAAe,EAAE,KAAK,CAAC;IACvB,QAAQ,EAAE,MAAM;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC;IACd,aAAa,EAAE,KAAK,CAAC;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC;IACnB,kBAAkB,EAAE,KAAK,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC;IACf,YAAY,EAAE,KAAK,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,EAAE,YAyEpB,CAAC"}
+{"version":3,"file":"Routes.d.ts","sourceRoot":"","sources":["../../src/Routes.ts"],"names":[],"mappings":"AAAA,UAAU,KAAK;IACX,QAAQ,CAAC,OAAO,EAAE,MAAM,MAAM,CAAC;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,YAAY;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,KAAK,CAAC;IAC1B,eAAe,EAAE,KAAK,CAAC;IACvB,QAAQ,EAAE,MAAM;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC;IACd,aAAa,EAAE,KAAK,CAAC;IACrB,UAAU,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,KAAK,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC;IACnB,kBAAkB,EAAE,KAAK,CAAC;IAC1B,OAAO,EAAE,KAAK,CAAC;IACf,YAAY,EAAE,KAAK,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,EAAE,YA+EpB,CAAC"}

package/lib/esm/Routes.js

@@ -1,55 +1,61 @@
 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);
+        },
+    },
+    tagsManager: {
+        path: 'tags-manager',
         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/ManageTags/TagsManagement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function TagsManagement(): React.JSX.Element;
+//# sourceMappingURL=TagsManagement.d.ts.map

package/lib/esm/components/ManageTags/TagsManagement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageTags/TagsManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,cAAc,sBAS7B"}

package/lib/esm/components/ManageTags/TagsManagement.js

@@ -0,0 +1,11 @@
+import { ErrorBoundary } from '@rh-support/components';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TagManagementContextProvider } from '../../context/TagManagementContextProvider';
+import TagsManager from './TagsManager';
+export function TagsManagement() {
+    const { t } = useTranslation();
+    return (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading contents') } },
+        React.createElement(TagManagementContextProvider, null,
+            React.createElement(TagsManager, null))));
+}

package/lib/esm/components/ManageTags/TagsManager.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function TagsManager(): React.JSX.Element;
+//# sourceMappingURL=TagsManager.d.ts.map

package/lib/esm/components/ManageTags/TagsManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsManager.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageTags/TagsManager.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAOxE,MAAM,CAAC,OAAO,UAAU,WAAW,sBA+WlC"}

package/lib/esm/components/ManageTags/TagsManager.js

@@ -0,0 +1,240 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ActionList, ActionListItem, Bullseye, Button, ButtonVariant, EmptyState, EmptyStateVariant, Flex, FormGroup, FormHelperText, HelperText, HelperTextItem, Modal, SearchInput, Spinner, TextInput, } from '@patternfly/react-core';
+import PencilAltIcon from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon';
+import { ErrorBoundary, ToastNotification } from '@rh-support/components';
+import { formatDate } from '@rh-support/utils';
+import { isEmpty, isNull, isUndefined } from 'lodash';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { TagManagementDispatchContext, TagManagementStateContext } from '../../context/TagManagementContextProvider';
+import { createNewTags, deleteTag, fetchTopContentTags, updateTag } from '../../reducers/TagManagmentReducer';
+import { ManageTable } from '../ManageTable';
+export default function TagsManager() {
+    const { t } = useTranslation();
+    const [createTagModalOpen, setCreateTagModalOpen] = useState(false);
+    const [newTagName, setNewTagName] = useState('');
+    const [isCreatingNewTag, setIsCreatingNewTag] = useState(false);
+    const [createTagError, setCreateTagError] = useState('');
+    const [editTagModalOpen, setEditTagModalOpen] = useState(false);
+    const [editTagName, setEditTagName] = useState('');
+    const [isEditingTagName, setisEditingTagName] = useState(false);
+    const [selectedEditTag, setSelectedEditTag] = useState(null);
+    const [editTagError, setEditTagError] = useState('');
+    const [selectedDeleteTag, setSelectedDeleteTag] = useState(null);
+    const [isDeletingTag, setIsDeletingTag] = useState(false);
+    const [deleteTagModalOpen, setDeleteTagModalOpen] = useState(false);
+    const [tagSearchTerm, setTagSearchTerm] = useState('');
+    const { tagResponse, tags } = useContext(TagManagementStateContext);
+    const dispatch = useContext(TagManagementDispatchContext);
+    const tagsByIds = useMemo(() => tags.reduce((acc, t) => (Object.assign(Object.assign({}, acc), { [t.id]: t })), {}), [tags]);
+    const getCreateTagError = (tagName) => {
+        tagName = tagName.trim();
+        if (isEmpty(tagName))
+            return t('Tag name cannot be empty.');
+        const existingTag = tags.find((t) => t.tagName === tagName);
+        if (existingTag)
+            return t('Tag with this name is already present.');
+        return '';
+    };
+    //filtering tags for user search
+    const filteredTagIds = useMemo(() => {
+        if (isEmpty(tagSearchTerm))
+            return tags.map((t) => t.id);
+        const filteredIds = [];
+        tags.forEach((t) => {
+            if (t.tagName.toLowerCase().includes(tagSearchTerm)) {
+                filteredIds.push(t.id);
+            }
+        });
+        return filteredIds;
+    }, [tagSearchTerm, tags]);
+    useEffect(() => {
+        fetchTopContentTags(dispatch);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onCreateNewTag = () => __awaiter(this, void 0, void 0, function* () {
+        const errorMsg = getCreateTagError(newTagName);
+        if (!isEmpty(errorMsg)) {
+            setCreateTagError(errorMsg);
+            return;
+        }
+        try {
+            setIsCreatingNewTag(true);
+            yield createNewTags(dispatch, [{ tagName: newTagName.trim(), isActive: true }]);
+            ToastNotification.addSuccessMessage(t('Successfully created tag'));
+        }
+        catch (err) {
+            console.log({ err });
+            ToastNotification.addSuccessMessage(t('Error creating tag'));
+        }
+        finally {
+            setIsCreatingNewTag(false);
+            onCanceCreateNewTag();
+        }
+    });
+    const onCanceCreateNewTag = () => {
+        setCreateTagError('');
+        setCreateTagModalOpen(false);
+        setNewTagName('');
+    };
+    const onEditTagClick = (tag) => __awaiter(this, void 0, void 0, function* () {
+        setEditTagName(tag.tagName);
+        setSelectedEditTag(tag);
+        setEditTagModalOpen(true);
+    });
+    const onEditTagConfirm = () => __awaiter(this, void 0, void 0, function* () {
+        const errorMsg = getCreateTagError(editTagName);
+        if (!isEmpty(errorMsg)) {
+            setEditTagError(errorMsg);
+            return;
+        }
+        if (isNull(selectedEditTag) || isUndefined(selectedEditTag))
+            return;
+        try {
+            setisEditingTagName(true);
+            yield updateTag(dispatch, { id: selectedEditTag.id, tagName: editTagName.trim() }, tags);
+            ToastNotification.addSuccessMessage(t('Successfully edited tag'));
+        }
+        catch (err) {
+            console.log(err);
+            ToastNotification.addSuccessMessage(t('Error editing tag'));
+        }
+        finally {
+            setisEditingTagName(false);
+            onEditCancel();
+        }
+    });
+    const onEditCancel = () => {
+        setEditTagModalOpen(false);
+        setSelectedEditTag(null);
+        setEditTagName('');
+        setEditTagError('');
+    };
+    const onDeleteTagClick = (tag) => __awaiter(this, void 0, void 0, function* () {
+        setDeleteTagModalOpen(true);
+        setSelectedDeleteTag(tag);
+    });
+    const onDeleteTagConfirm = () => __awaiter(this, void 0, void 0, function* () {
+        if (isNull(selectedDeleteTag) || isUndefined(selectedDeleteTag))
+            return;
+        try {
+            setIsDeletingTag(true);
+            yield deleteTag(dispatch, selectedDeleteTag, { tagResponse, tags });
+            ToastNotification.addSuccessMessage(t('Tag deleted successfully'));
+        }
+        catch (err) {
+            console.log(err);
+            ToastNotification.addSuccessMessage(t('Error deleting tag'));
+        }
+        finally {
+            setDeleteTagModalOpen(false);
+            setIsDeletingTag(false);
+            setSelectedDeleteTag(null);
+        }
+    });
+    const columns = [
+        {
+            accessor: (id) => tagsByIds[id].tagName,
+            sortable: false,
+            id: 'tagname-manage-table',
+            title: t('Tag'),
+            cellWidth: 20,
+        },
+        {
+            id: 'article-count-for-tags',
+            sortable: false,
+            title: t('No of top contents'),
+            cellWidth: 20,
+            cell: (id) => `${tagsByIds[id].numberOfLinkedContents || 0} articles`,
+        },
+        {
+            id: 'tag-created-by',
+            sortable: false,
+            title: t('Created by'),
+            cellWidth: 30,
+            cell: (id) => tagsByIds[id].createdBy,
+        },
+        {
+            id: 'tag-modified-date',
+            sortable: false,
+            title: t('Modified date'),
+            cellWidth: 20,
+            cell: (id) => formatDate(tagsByIds[id].modifiedDate),
+        },
+        {
+            id: 'tag-manage-actions',
+            title: '',
+            sortable: false,
+            cellWidth: 10,
+            cell: (id) => (React.createElement(ActionList, { isIconList: true },
+                React.createElement(ActionListItem, null,
+                    React.createElement(Button, { variant: "plain", "data-tracking-id": "edit-tag", "aria-label": `edit tag ${tagsByIds[id].tagName}`, onClick: () => onEditTagClick(tagsByIds[id]) },
+                        React.createElement(PencilAltIcon, null))),
+                React.createElement(ActionListItem, null,
+                    React.createElement(Button, { "aria-label": `delete tag ${tagsByIds[id].tagName}`, variant: "plain", "data-tracking-id": "delete-tag", onClick: () => onDeleteTagClick(tagsByIds[id]) },
+                        React.createElement(TrashIcon, null))))),
+        },
+    ];
+    const CreateTagModel = (React.createElement(Modal, { title: t('Create a tag'), onClose: onCanceCreateNewTag, isOpen: createTagModalOpen, actions: [
+            React.createElement(Button, { key: "create-tag", variant: ButtonVariant.primary, onClick: onCreateNewTag, isLoading: isCreatingNewTag, isDisabled: !isEmpty(createTagError) || isCreatingNewTag },
+                React.createElement(Trans, null, "Create")),
+            React.createElement(Button, { key: "cancel-create-tag", variant: ButtonVariant.link, onClick: onCanceCreateNewTag }, "Cancel"),
+        ] },
+        React.createElement(FormGroup, { label: "Tag name", isRequired: true },
+            React.createElement(TextInput, { isRequired: true, type: "text", id: "create-new-tag-text-input", value: newTagName, onChange: (e, v) => {
+                    setNewTagName(v);
+                    setCreateTagError('');
+                }, placeholder: t('Enter a unique name to create a tag'), validated: isEmpty(createTagError) ? 'default' : 'error' }),
+            !isEmpty(createTagError) && (React.createElement(FormHelperText, null,
+                React.createElement(HelperText, null,
+                    React.createElement(HelperTextItem, { variant: "error" }, createTagError)))))));
+    const EditTagModal = (React.createElement(Modal, { title: t('Edit Tag'), isOpen: editTagModalOpen, onClose: onEditCancel, actions: [
+            React.createElement(Button, { key: "edit-tag", variant: ButtonVariant.primary, onClick: onEditTagConfirm, isLoading: isEditingTagName, isDisabled: !isEmpty(editTagError) || isEditingTagName },
+                React.createElement(Trans, null, "Save")),
+            React.createElement(Button, { key: "cancel-edit-tag", variant: ButtonVariant.link, onClick: onEditCancel }, "Cancel"),
+        ] },
+        React.createElement(FormGroup, { label: "Tag name", isRequired: true },
+            React.createElement(TextInput, { isRequired: true, type: "text", id: "edit-tag-text-input", value: editTagName, onChange: (e, v) => {
+                    setEditTagName(v);
+                    setEditTagError('');
+                }, placeholder: t('Enter a unique name for this tag') }),
+            !isEmpty(editTagError) && (React.createElement(FormHelperText, null,
+                React.createElement(HelperText, null,
+                    React.createElement(HelperTextItem, { variant: "error" }, editTagError)))))));
+    const DeleteTagModel = () => (React.createElement(Modal, { title: t('Are you sure?'), isOpen: deleteTagModalOpen, onClose: () => setDeleteTagModalOpen(false), actions: [
+            React.createElement(Button, { key: "delete-tag", variant: ButtonVariant.danger, onClick: onDeleteTagConfirm, isLoading: isDeletingTag, isDisabled: isDeletingTag },
+                React.createElement(Trans, null, "Yes, I am sure")),
+            React.createElement(Button, { key: "cancel-delete-tag", variant: ButtonVariant.link, onClick: () => setDeleteTagModalOpen(false) }, "Cancel"),
+        ] },
+        React.createElement(Trans, null, "Deleting this tag will permanently untag all content associated with it. Are you sure you want to proceed?")));
+    return (React.createElement(React.Fragment, null,
+        CreateTagModel,
+        EditTagModal,
+        React.createElement(DeleteTagModel, null),
+        React.createElement("header", null,
+            React.createElement("h2", null, "Tags"),
+            React.createElement("p", { className: "pf-v5-u-my-sm" },
+                React.createElement(Trans, null, "Add, edit or remove tags and manage tagged top content."))),
+        React.createElement("div", { className: "toolbar" },
+            React.createElement(Flex, { alignItems: { default: 'alignItemsCenter' }, className: "pf-v5-u-w-100" },
+                React.createElement("label", { htmlFor: "tag-search-input" },
+                    React.createElement(Trans, null, "Search Tag")),
+                React.createElement("div", { className: "pf-v5-u-flex-grow-1" },
+                    React.createElement(SearchInput, { type: "text", id: "tag-search-input", value: tagSearchTerm, onChange: (e, v) => setTagSearchTerm(v), placeholder: t('Search for a tag') })),
+                React.createElement("span", { className: "pf-v5-u-ml-sm" },
+                    React.createElement(Button, { variant: ButtonVariant.primary, isInline: true, onClick: () => setCreateTagModalOpen(true), "data-tracking-id": "tag-create-button" },
+                        React.createElement(Trans, null, "Create tag"))))),
+        React.createElement("div", { className: "tags-manager-wrapper" },
+            React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading tags list') } }, tagResponse.isFetching ? (React.createElement(Bullseye, null,
+                React.createElement(EmptyState, { variant: EmptyStateVariant.full },
+                    React.createElement(Spinner, { size: "lg" })))) : (React.createElement(ManageTable, { ariaLabel: t('Table to manage tags'), data: filteredTagIds, columns: columns, isError: false, keepPageNumberOnDataChange: true }))))));
+}

package/lib/esm/components/ManageTags/index.d.ts

@@ -0,0 +1,2 @@
+export { TagsManagement } from './TagsManagement';
+//# sourceMappingURL=index.d.ts.map

package/lib/esm/components/ManageTags/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ManageTags/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

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

@@ -0,0 +1 @@
+export { TagsManagement } from './TagsManagement';