@rh-support/manage 2.1.83 → 2.1.84

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

@@ -1 +1 @@
-{"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"}
+{"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

@@ -10,6 +10,7 @@ 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';
@@ -19,7 +20,7 @@ export function ManageTabs(props) {
     const [activeTabKey, setActiveTabKey] = useState(0);
     const { activeTab } = useParams();
     const { t } = useTranslation();
-    const { groupsRoute, bookmarkedAccountsRoute, topContentRoute, notificationEmailsRoute, preferencesRoute, configsRoute, partnershipsRoute, } = Routes.getPaths();
+    const { groupsRoute, bookmarkedAccountsRoute, topContentRoute, notificationEmailsRoute, preferencesRoute, configsRoute, partnershipsRoute, tagsManagerRoute, } = Routes.getPaths();
     useDocumentTitle(PageTitle.MANAGE);
     const canViewManageTab = ability.can(resourceActions.READ, resources.MANAGE);
     const canViewManageTopContent = ability.can(resourceActions.READ, resources.TOP_CONTENT) && canViewManageTab;
@@ -84,6 +85,15 @@ export function ManageTabs(props) {
             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({
             title: 'Internal Configs',

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

@@ -30,6 +30,12 @@ export const Routes = {
             return getPath(this);
         },
     },
+    tagsManager: {
+        path: 'tags-manager',
+        getPath() {
+            return getPath(this);
+        },
+    },
     preferences: {
         path: 'preferences',
         getPath() {

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';

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

@@ -1 +1 @@
-{"version":3,"file":"TopContentComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAGH,oBAAoB,EAGvB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,yBAAyB;IACtC,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAyGlF,CAAC"}
+{"version":3,"file":"TopContentComponent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentComponent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,EAGH,oBAAoB,EAGvB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,yBAAyB;IACtC,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CA0GlF,CAAC"}

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

@@ -57,7 +57,7 @@ export const TopContentComponent = (props) => {
         React.createElement(Droppable, { droppableId: `${props.category.id}`, type: `drop-inner-${props.category.id}`, isDropDisabled: !isArrangingContent, key: `drop-inner-${props.category.id}` }, (provided) => (React.createElement("div", { ref: provided.innerRef },
             React.createElement("ul", { "aria-label": t('Content list'), className: "list-flat list-flushleft" },
                 props.category.content.map((content, i) => (React.createElement(Draggable, { key: `drag-inner-${i}${props.category.id}`, draggableId: `drag-inner-${i}${props.category.id}`, index: i, isDragDisabled: !isArrangingContent }, (provided, snapshot) => (React.createElement("div", Object.assign({ key: `${i}-c`, "aria-label": t('Content'), ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
-                    React.createElement(TopContentSingleItem, { isArrangingContent: isArrangingContent, category: props.category, snapshot: snapshot, i: i })))))),
+                    React.createElement(TopContentSingleItem, { isArrangingContent: isArrangingContent, category: props.category, snapshot: snapshot, i: i, key: content.topContentId })))))),
                 provided.placeholder),
             !isSearchModeEnabled && buttons)))));
 };

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

@@ -4,9 +4,10 @@ import { ITopContentEditState } from '../../../../reducers/TopContentReducer';
 interface IProps {
     isArrangingContent: boolean;
     category: ITopContentEditState;
-    snapshot: DraggableStateSnapshot;
+    snapshot?: DraggableStateSnapshot;
     i: number;
 }
+export declare function formatDuplicateWarning(arr: any): any;
 export declare const TopContentSingleItem: ({ isArrangingContent, category, snapshot, i }: IProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=TopContentSingleItem.d.ts.map

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":"AAYA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,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,sBA+YzF,CAAC"}
+{"version":3,"file":"TopContentSingleItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItem.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAU7D,OAAO,EAIH,oBAAoB,EAOvB,MAAM,wCAAwC,CAAC;AAIhD,UAAU,MAAM;IACZ,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,CAAC,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,sBAAsB,CAAC,GAAG,KAAA,OASzC;AAED,eAAO,MAAM,oBAAoB,kDAAmD,MAAM,sBA4czF,CAAC"}

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

@@ -8,23 +8,26 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { search } from '@cee-eng/hydrajs';
-import { Button, Icon, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, FormGroup, Icon, Label, TextInput, ValidatedOptions } from '@patternfly/react-core';
 import EditAltIcon from '@patternfly/react-icons/dist/js/icons/edit-alt-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import GripVerticalIcon from '@patternfly/react-icons/dist/js/icons/grip-vertical-icon';
-import { ToastNotification, useDebounce } from '@rh-support/components';
+import { TagsSelector, ToastNotification, useDebounce } from '@rh-support/components';
 import { formatDate, getDrupalResIdIfTypeFromUrl, getText, isValidUrl } from '@rh-support/utils';
+import { differenceBy, isEqual } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import findIndex from 'lodash/findIndex';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { TagManagementDispatchContext, TagManagementStateContext, } from '../../../../context/TagManagementContextProvider';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
+import { updateTopContentWithTags } from '../../../../reducers/TagManagmentReducer';
 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) {
+export function formatDuplicateWarning(arr) {
     if (arr.length === 0 || arr.length === 1)
         return arr;
     if (arr.length === 2) {
@@ -44,9 +47,13 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     const content = category.content && category.content[i];
     const { t } = useTranslation();
     const { topContentEditState, isCatOnlyForMajorVersion, selectedProduct, selectedVersion, contentUrls } = useTopContentContext();
+    const tagManagementEditState = useContext(TagManagementStateContext);
+    const { tags: tagOptions } = tagManagementEditState;
     const topContentDispatch = useTopContentDispatchContext();
+    const tagManagmentDispatch = useContext(TagManagementDispatchContext);
     const [localContentUrl, setLocalContentUrl] = useState(content.contentUrl);
     const [localContentTitle, setLocalContentTitle] = useState(content.contentTitle);
+    const [localSelectedTags, setLocalSelectedTags] = useState(content.tags);
     const [newCategory, setNewCategory] = useState(undefined);
     const [contentTitleIsValid, setContentTitleIsValid] = useState(true);
     const [contentUrlIsValid, setContentUrlIsValid] = useState(true);
@@ -55,11 +62,16 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     const [isSaving, setIsSaving] = useState(false);
     const duplicateTitleCategoryIndex = findIndex(category.content, (c) => c.contentTitle === localContentTitle.trim());
     const isDuplicateTitle = duplicateTitleCategoryIndex !== -1 && duplicateTitleCategoryIndex !== i && !isEmpty(localContentTitle.trim());
+    const oldTagsIds = useMemo(() => { var _a; return ((_a = content === null || content === void 0 ? void 0 : content.tags) === null || _a === void 0 ? void 0 : _a.map((t) => t.id)) || []; }, [content === null || content === void 0 ? void 0 : content.tags]);
+    const localTagsIds = useMemo(() => localSelectedTags === null || localSelectedTags === void 0 ? void 0 : localSelectedTags.map((t) => t.id), [localSelectedTags]);
     const onContentTitleChange = (contentTitle, event) => {
         const contentTitleIsValid = event.target.validity.valid;
         setContentTitleIsValid(contentTitleIsValid);
         setLocalContentTitle(contentTitle);
     };
+    const handleLocalTagChange = (tags) => {
+        setLocalSelectedTags(tags);
+    };
     const updateContentTitleFromUrl = (contentUrl) => __awaiter(void 0, void 0, void 0, function* () {
         var _a, _b, _c;
         // throws toast warning and clears it after 4 seconds
@@ -149,7 +161,11 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         try {
             const newContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl });
             setIsSaving(true);
-            yield saveAddToTopContent(topContentDispatch, topContentEditState, category.id, category.categoryId, newContent, i);
+            const addedContent = yield saveAddToTopContent(topContentDispatch, topContentEditState, category.id, category.categoryId, newContent, i);
+            yield updateTopContentWithTags(tagManagmentDispatch, {
+                id: addedContent.topContents[0].id,
+                tagList: localSelectedTags.map((t) => parseInt(t.id)),
+            }, tagManagementEditState);
             ToastNotification.addSuccessMessage(t('Content added successfully'));
         }
         catch (error) {
@@ -161,10 +177,12 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         return;
     });
     const onSaveUpdateContent = () => __awaiter(void 0, void 0, void 0, function* () {
+        const newTags = differenceBy(localTagsIds, oldTagsIds);
+        const deletedTags = differenceBy(oldTagsIds, localTagsIds);
         try {
-            const updatedContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl });
+            const updatedContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl, tagList: newTags, tags: localSelectedTags.map((t) => ({ id: t.id, tagName: t.tagName })) });
             setIsSaving(true);
-            yield saveChangeInCategoryContent(topContentDispatch, topContentEditState, category.categoryId, updatedContent);
+            yield saveChangeInCategoryContent(topContentDispatch, topContentEditState, category.categoryId, updatedContent, deletedTags);
             editToggle();
             ToastNotification.addSuccessMessage(t('Content updated successfully'));
         }
@@ -179,7 +197,11 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         try {
             const newContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl });
             setIsSaving(true);
-            yield saveAddedNewSectionContents(topContentDispatch, topContentEditState, newCategory, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, newContent);
+            const newCategoryContent = yield saveAddedNewSectionContents(topContentDispatch, topContentEditState, newCategory, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, newContent);
+            yield updateTopContentWithTags(tagManagmentDispatch, {
+                id: newCategoryContent.topContents[0].id,
+                tagList: localSelectedTags.map((t) => parseInt(t.id)),
+            }, tagManagementEditState);
             ToastNotification.addSuccessMessage(t('Category created successfully'));
             setIsAddingCategory(topContentDispatch, false);
         }
@@ -224,6 +246,7 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         setShowDuplicateError(false);
         setContentUrlIsValid(true);
         setIsAddingCategory(topContentDispatch, false);
+        setLocalSelectedTags(content.tags);
     };
     useDebounce(() => {
         onLocalContentUrlChange();
@@ -235,6 +258,7 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     useEffect(() => {
         setLocalContentTitle(content.contentTitle);
         setLocalContentUrl(content.contentUrl);
+        setLocalSelectedTags(content.tags);
     }, [content]);
     // To check if input has spaces
     const doesInputHasSpaces = isEmpty(localContentTitle.trim());
@@ -243,20 +267,23 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         isDuplicateTitle ||
         !(contentTitleIsValid && contentUrlIsValid && localContentTitle && localContentUrl) ||
         (!newCategory && content.mode === ContentMode.NEW_SECTION_CONTENT) ||
-        (localContentUrl === content.contentUrl && localContentTitle === content.contentTitle);
+        (localContentUrl === content.contentUrl &&
+            localContentTitle === content.contentTitle &&
+            isEqual(localTagsIds, oldTagsIds));
     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' : ''}` },
+        isPreview && content.mode !== ContentMode.ADD && content.mode !== ContentMode.NEW_SECTION_CONTENT && (React.createElement("li", { className: `push-bottom-narrow ${(snapshot === null || snapshot === void 0 ? void 0 : snapshot.isDragging) ? 'list-flat tc-drag' : ''}` },
             isArrangingContent && (React.createElement(Icon, { size: "sm" },
                 React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), color: "#06c", className: "pf-v5-u-mr-sm" }))),
             !isArrangingContent ? (React.createElement(React.Fragment, null,
                 React.createElement(TopContentSingleItemLink, { url: getTopContentUrl(content.contentUrl), title: content.contentTitle, contentId: content.topContentId, needsAttention: content.isAttentionNeeded, lastModifiedBy: lastModifiedBy, selectedVersion: selectedVersion }),
                 ' ',
                 React.createElement(Button, { variant: "link", isInline: true, icon: React.createElement(EditAltIcon, null), onClick: editToggle, title: 'Edit' }))) : (content.contentTitle),
-            React.createElement("div", null, lastModifiedBy))),
+            React.createElement("div", null, lastModifiedBy),
+            React.createElement("div", null, (content.tags || []).map((tag) => (React.createElement(Label, { isCompact: true, className: "pf-v5-u-mr-xs pf-v5-u-mt-sm", key: tag.id }, tag.tagName)))))),
         (!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" },
@@ -282,6 +309,11 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
                     " Duplicate url. This url is already added in ",
                     formatDuplicateWarning(duplicatUrlErrorArray),
                     "."))),
+            React.createElement(Flex, { className: "pf-v5-u-my-lg" },
+                React.createElement(FlexItem, { flex: { default: 'flex_1' } },
+                    React.createElement(FormGroup, { label: t('Tags') },
+                        React.createElement("div", { className: "pf-v5-c-form-control" },
+                            React.createElement(TagsSelector, { tagOptions: tagOptions, onChange: handleLocalTagChange, selectedTags: localSelectedTags }))))),
             React.createElement("span", { className: "top-content-single-item-footer" },
                 React.createElement("span", null,
                     React.createElement(Button, { variant: "primary", onClick: onSave, isDisabled: isSaveButtonDisabled || isSaving, isLoading: isSaving },

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":"AAeA,OAAO,KAA+C,MAAM,OAAO,CAAC;AA6BpE,wBAAgB,gBAAgB,sBAyT/B"}
+{"version":3,"file":"TopContentEditor.d.ts","sourceRoot":"","sources":["../../../../../src/components/TopContentManagement/TopContentEditor/TopContentEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA2D,MAAM,OAAO,CAAC;AA+BhF,wBAAgB,gBAAgB,sBA4V/B"}

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

@@ -8,14 +8,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Accordion, Alert, AlertVariant, Bullseye, Button, EmptyState, EmptyStateVariant, Spinner, Tooltip, } from '@patternfly/react-core';
-import { ToastNotification, TopContentSearch } from '@rh-support/components';
+import { TagsSelector, ToastNotification, TopContentSearch } from '@rh-support/components';
 import { getVersion, isRegularVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Trans, useTranslation } from 'react-i18next';
 import { CATEGORY_LIMIT } from '../../../constants/TopContent';
+import { TagManagementDispatchContext, TagManagementStateContext } from '../../../context/TagManagementContextProvider';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../context/TopContentProvider';
+import { fetchTopContentTags } from '../../../reducers/TagManagmentReducer';
 import { flagContentUsage, isMajorOrNamedVersion } from '../../../reducers/TopContentHelpers';
 import { CategoryMode, fetchTopContent, reArrangeCategory, resetChangeInCategory, resetContentWithSelectedProduct, resetDuplicatUrls, setAddNewSection, setIsAddingCategory, setIsSearchModeEnabled, setTopContentArrangingCategory, setTopContentArrangingContent, } from '../../../reducers/TopContentReducer';
 import CategoryLimit from '../CategoryLimit/CategoryLimit';
@@ -33,10 +35,13 @@ export function TopContentEditor() {
     const [newCategoryVersion, setNewCategoryVersion] = useState(undefined);
     const [searchQuery, setSearchQuery] = useState('');
     const topContentResultsRef = useRef(null);
+    const [filteredTags, setFilteredTags] = useState([]);
     const { topContentResponse, topContentEditState, isAddingCategory, isCatOnlyForMajorVersion, isSearchModeEnabled, selectedProduct, selectedVersion, categoryUsage, } = useTopContentContext();
+    const { tags } = useContext(TagManagementStateContext);
     const topContentDispatch = useTopContentDispatchContext();
+    const tagManagerDispatch = useContext(TagManagementDispatchContext);
     const flagContentEditState = useMemo(() => flagContentUsage(topContentEditState, categoryUsage, selectedVersion), [topContentEditState, categoryUsage, selectedVersion]);
-    const [filteredTC, setFilteredTC] = useState(flagContentEditState);
+    const [filteredByQueryTC, setFilteredByQueryTC] = useState(flagContentEditState);
     const onProductChange = (selectedProduct) => {
         resetContentWithSelectedProduct(topContentDispatch, selectedProduct);
     };
@@ -48,10 +53,27 @@ export function TopContentEditor() {
             return;
         fetchTopContent(topContentDispatch, selectedProduct, selectedVersion);
     };
+    const filteredTC = useMemo(() => {
+        if (isEmpty(filteredTags))
+            return filteredByQueryTC;
+        const filteredTagsIds = filteredTags.map((tag) => tag.id);
+        //filter top contents on basis of tags
+        const filteredData = filteredByQueryTC.flatMap((item) => {
+            const contents = item.content.filter((content) => (content.tags || []).some((tag) => filteredTagsIds.includes(tag.id)));
+            if (!isEmpty(contents))
+                return [Object.assign(Object.assign({}, item), { content: contents })];
+            return [];
+        });
+        return filteredData;
+    }, [filteredByQueryTC, filteredTags]);
     useEffect(() => {
-        !isSearchModeEnabled && setFilteredTC(flagContentEditState);
+        !isSearchModeEnabled && setFilteredByQueryTC(flagContentEditState);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [flagContentEditState]);
+    useEffect(() => {
+        fetchTopContentTags(tagManagerDispatch);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const onAddCategory = (isMajorVersionOnly, isCreatingNewSet = false, version, hasMajorContentCreatingMinorContent) => {
         hasMajorContentCreatingMinorContent && resetDuplicatUrls(topContentDispatch);
         setCategoryToOpen(null);
@@ -97,7 +119,8 @@ export function TopContentEditor() {
         !isAddingCategory &&
         selectedVersion &&
         flagContentEditState.length !== 0 &&
-        !isSearchModeEnabled;
+        !isSearchModeEnabled &&
+        isEmpty(filteredTags);
     const isContentOnlyForMajorVersion = !topContentResponse.isFetching &&
         flagContentEditState.length !== 0 &&
         isRegularVersion(selectedVersion) &&
@@ -105,7 +128,7 @@ export function TopContentEditor() {
         !isAddingCategory;
     const onSearch = (searchTerm, searchResults) => {
         setIsSearchModeEnabled(topContentDispatch, searchTerm ? true : false);
-        setFilteredTC(searchResults);
+        setFilteredByQueryTC(searchResults);
     };
     const minorSelectedNoMinorContentButAvailableMajorContent = isContentOnlyForMajorVersion && getVersion(selectedVersion).minor && flagContentEditState.length !== 0;
     const isCategoryLimitReached = filteredTC.length >= CATEGORY_LIMIT.MAX;
@@ -113,7 +136,12 @@ export function TopContentEditor() {
         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: flagContentEditState, onSearch: onSearch, topContentResultsWrapperRef: topContentResultsRef, searchQuery: searchQuery, setSearchQuery: setSearchQuery })),
+        !topContentResponse.isFetching && (React.createElement("div", { className: "toolbar" },
+            React.createElement(TopContentSearch, { dataTrackingId: "top-content-filter-manage", topContentData: flagContentEditState, onSearch: onSearch, topContentResultsWrapperRef: topContentResultsRef, searchQuery: searchQuery, setSearchQuery: setSearchQuery, className: "toolbar-content" }),
+            React.createElement("div", { className: "toolbar-content pf-v5-u-ml-md" },
+                React.createElement("label", { htmlFor: 'tag-selector' },
+                    React.createElement(Trans, null, "All tags")),
+                React.createElement(TagsSelector, { tagOptions: tags, onChange: setFilteredTags, selectedTags: filteredTags })))),
         React.createElement("div", { className: "top-content-manage-wrapper pf-v5-u-pt-md" },
             !topContentResponse.isFetching && React.createElement(TopContentSuggestion, { searchQuery: searchQuery }),
             topContentResponse.isFetching ? (React.createElement(Bullseye, null,
@@ -131,7 +159,8 @@ export function TopContentEditor() {
                                 category.catMode === CategoryMode.EXISTING_SECTION && (React.createElement(Draggable, { draggableId: `c${category.id}`, index: i, isDragDisabled: !isArrangingCats, key: `c-${i}-${category.id}` }, (provided, snapshot) => category.helperText ? (React.createElement(Tooltip, { content: React.createElement("div", null, category.helperText) },
                                     React.createElement(TopContentCategory, { isExpanded: isSearchModeEnabled
                                             ? true
-                                            : category.id === categoryToOpen, category: category, provided: provided, innerRef: provided.innerRef, isArrangingCats: isArrangingCats, snapshot: snapshot }))) : (React.createElement(TopContentCategory, { isExpanded: isSearchModeEnabled
+                                            : category.id === categoryToOpen, category: category, provided: provided, innerRef: provided.innerRef, isArrangingCats: isArrangingCats, snapshot: snapshot }))) : (React.createElement(TopContentCategory, { isExpanded: isSearchModeEnabled ||
+                                        !isEmpty(filteredTags)
                                         ? true
                                         : category.id === categoryToOpen, category: category, provided: provided, innerRef: provided.innerRef, isArrangingCats: isArrangingCats, snapshot: snapshot })))),
                                 category.catMode === CategoryMode.NEW_SECTION && (React.createElement(TopContentCategoryNew, { category: category, key: 'new-section', version: newCategoryVersion }))))),

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,qBAUjD"}
+{"version":3,"file":"TopContentManagement.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContentManagement.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,MAAM;CAAG;AAEnB,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,qBAYjD"}

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

@@ -1,11 +1,13 @@
 import { ErrorBoundary } from '@rh-support/components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { TagManagementContextProvider } from '../../context/TagManagementContextProvider';
 import { TopContentContextProvider } from '../../context/TopContentProvider';
 import { TopContentEditor } from './TopContentEditor/TopContentEditor';
 export function TopContentManagement(props) {
     const { t } = useTranslation();
     return (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } },
         React.createElement(TopContentContextProvider, null,
-            React.createElement(TopContentEditor, null))));
+            React.createElement(TagManagementContextProvider, null,
+                React.createElement(TopContentEditor, null)))));
 }

package/lib/esm/context/TagManagementContextProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ITagManagementState, TagManagementDisptachType } from '../reducers/TagManagmentReducer';
+export declare const TagManagementStateContext: React.Context<ITagManagementState>;
+export declare const TagManagementDispatchContext: React.Context<TagManagementDisptachType>;
+export declare function TagManagementContextProvider({ children }: {
+    children: any;
+}): React.JSX.Element;
+//# sourceMappingURL=TagManagementContextProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagManagementContextProvider.d.ts","sourceRoot":"","sources":["../../../src/context/TagManagementContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAEH,mBAAmB,EACnB,yBAAyB,EAE5B,MAAM,iCAAiC,CAAC;AAGzC,eAAO,MAAM,yBAAyB,oCAAsE,CAAC;AAC7G,eAAO,MAAM,4BAA4B,0CAA8C,CAAC;AAExF,wBAAgB,4BAA4B,CAAC,EAAE,QAAQ,EAAE;;CAAA,qBAOxD"}

package/lib/esm/context/TagManagementContextProvider.js

@@ -0,0 +1,10 @@
+import React, { useReducer } from 'react';
+import { initialTagManagementState, TagManagementReducer, } from '../reducers/TagManagmentReducer';
+const initialDispatchContext = null;
+export const TagManagementStateContext = React.createContext(initialTagManagementState);
+export const TagManagementDispatchContext = React.createContext(initialDispatchContext);
+export function TagManagementContextProvider({ children }) {
+    const [tagManagementState, dispatch] = useReducer(TagManagementReducer, initialTagManagementState);
+    return (React.createElement(TagManagementStateContext.Provider, { value: Object.assign({}, tagManagementState) },
+        React.createElement(TagManagementDispatchContext.Provider, { value: dispatch }, children)));
+}

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

@@ -0,0 +1,27 @@
+import { ITag, ITagPostBody, ITagPutBody, ITopContentUpdateTagBodyItem } from '@cee-eng/hydrajs/@types/models/tagModels';
+import { IAction, IApiResponseDetails } from '@rh-support/types/shared';
+export declare enum TagManagementReducerConstants {
+    getAllTags = "getAllTags",
+    createNewTag = "createNewTag",
+    updateTag = "updateTag",
+    deleteTag = "deleteTag",
+    resetTags = "resetTags"
+}
+interface ITagItemState extends ITag {
+    numberOfLinkedContents?: number;
+}
+export interface ITagManagementState {
+    tagResponse: IApiResponseDetails<ITag[]>;
+    tags: ITagItemState[];
+}
+export declare const initialTagManagementState: ITagManagementState;
+type IActionType = IAction<TagManagementReducerConstants, ITagManagementState>;
+export type TagManagementDisptachType = (value: IActionType) => void;
+export declare const TagManagementReducer: (state: ITagManagementState, action: IActionType) => ITagManagementState;
+export declare const fetchTopContentTags: (dispatch: TagManagementDisptachType) => Promise<void>;
+export declare const createNewTags: (dispatch: TagManagementDisptachType, tags: ITagPostBody[]) => Promise<void>;
+export declare const updateTag: (dispatch: TagManagementDisptachType, tag: ITagPutBody, tagsState: ITagItemState[]) => Promise<void>;
+export declare const deleteTag: (dispatch: TagManagementDisptachType, deletedTag: ITag, tagManagementState: ITagManagementState) => Promise<void>;
+export declare const updateTopContentWithTags: (dispatch: TagManagementDisptachType, content: ITopContentUpdateTagBodyItem, tagManagementState: ITagManagementState) => Promise<void>;
+export {};
+//# sourceMappingURL=TagManagmentReducer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagManagmentReducer.d.ts","sourceRoot":"","sources":["../../../src/reducers/TagManagmentReducer.ts"],"names":[],"mappings":"AACA,OAAO,EACH,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,4BAA4B,EAC/B,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,oBAAY,6BAA6B;IACrC,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,SAAS,cAAc;CAC1B;AAED,UAAU,aAAc,SAAQ,IAAI;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACnC;AACD,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC;IACzC,IAAI,EAAE,aAAa,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,yBAAyB,EAAE,mBAGvC,CAAC;AAEF,KAAK,WAAW,GAAG,OAAO,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,yBAAyB,GAAG,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;AAErE,eAAO,MAAM,oBAAoB,UAAW,mBAAmB,0BAAwB,mBAsBtF,CAAC;AAEF,eAAO,MAAM,mBAAmB,aAAoB,yBAAyB,kBAuC5E,CAAC;AAEF,eAAO,MAAM,aAAa,aAAoB,yBAAyB,QAAQ,YAAY,EAAE,kBAU5F,CAAC;AAEF,eAAO,MAAM,SAAS,aAAoB,yBAAyB,OAAO,WAAW,aAAa,aAAa,EAAE,kBAYhH,CAAC;AAEF,eAAO,MAAM,SAAS,aACR,yBAAyB,cACvB,IAAI,sBACI,mBAAmB,kBAc1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,aACvB,yBAAyB,WAC1B,4BAA4B,sBACjB,mBAAmB,kBAO1C,CAAC"}

package/lib/esm/reducers/TagManagmentReducer.js

@@ -0,0 +1,127 @@
+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 { pcm } from '@cee-eng/hydrajs';
+import { getApiResourceObject } from '@rh-support/utils';
+export var TagManagementReducerConstants;
+(function (TagManagementReducerConstants) {
+    TagManagementReducerConstants["getAllTags"] = "getAllTags";
+    TagManagementReducerConstants["createNewTag"] = "createNewTag";
+    TagManagementReducerConstants["updateTag"] = "updateTag";
+    TagManagementReducerConstants["deleteTag"] = "deleteTag";
+    TagManagementReducerConstants["resetTags"] = "resetTags";
+})(TagManagementReducerConstants || (TagManagementReducerConstants = {}));
+export const initialTagManagementState = {
+    tagResponse: getApiResourceObject([]),
+    tags: [],
+};
+export const TagManagementReducer = (state, action) => {
+    var _a, _b, _c, _d, _e;
+    switch (action.type) {
+        case TagManagementReducerConstants.resetTags: {
+            return initialTagManagementState;
+        }
+        case TagManagementReducerConstants.getAllTags: {
+            return Object.assign(Object.assign({}, state), { tagResponse: (_a = action === null || action === void 0 ? void 0 : action.payload) === null || _a === void 0 ? void 0 : _a.tagResponse, tags: (_b = action === null || action === void 0 ? void 0 : action.payload) === null || _b === void 0 ? void 0 : _b.tags });
+        }
+        case TagManagementReducerConstants.createNewTag: {
+            return Object.assign(Object.assign({}, state), { tags: [...state.tags, ...(_c = action === null || action === void 0 ? void 0 : action.payload) === null || _c === void 0 ? void 0 : _c.tags], tagResponse: getApiResourceObject([...state.tags, ...(_d = action === null || action === void 0 ? void 0 : action.payload) === null || _d === void 0 ? void 0 : _d.tags]) });
+        }
+        case TagManagementReducerConstants.updateTag: {
+            return Object.assign(Object.assign({}, state), { tags: (_e = action === null || action === void 0 ? void 0 : action.payload) === null || _e === void 0 ? void 0 : _e.tags });
+        }
+        default: {
+            return state;
+        }
+    }
+};
+export const fetchTopContentTags = (dispatch) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        dispatch({
+            type: TagManagementReducerConstants.getAllTags,
+            payload: {
+                tagResponse: getApiResourceObject([], true),
+                tags: [],
+            },
+        });
+        const [tagsResponse, tagsWithLinkedContentCount] = yield Promise.all([
+            pcm.topContentTag.getTopContentTags({}),
+            pcm.topContentTag.getAllLinkedTags(),
+        ]);
+        const tags = tagsResponse.map((tag) => {
+            const contentCount = tagsWithLinkedContentCount.find((t) => t.tagId === tag.id);
+            return Object.assign(Object.assign({}, tag), { numberOfLinkedContents: contentCount ? contentCount.numberOfLinkedContents : 0 });
+        });
+        dispatch({
+            type: TagManagementReducerConstants.getAllTags,
+            payload: {
+                tagResponse: getApiResourceObject(tags, false),
+                tags,
+            },
+        });
+    }
+    catch (err) {
+        dispatch({
+            type: TagManagementReducerConstants.getAllTags,
+            payload: {
+                tagResponse: getApiResourceObject([], false, true, err.message),
+                tags: [],
+            },
+        });
+    }
+});
+export const createNewTags = (dispatch, tags) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const response = yield pcm.topContentTag.postTopContentTags(tags);
+        dispatch({
+            type: TagManagementReducerConstants.createNewTag,
+            payload: { tags: response.tags },
+        });
+    }
+    catch (err) {
+        dispatch({ type: TagManagementReducerConstants.createNewTag, payload: { tags: [] } });
+    }
+});
+export const updateTag = (dispatch, tag, tagsState) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const { tags: editedTags } = yield pcm.topContentTag.patchTopContentTag([tag]);
+        const updatedTag = editedTags[0];
+        const updatedTagsState = tagsState.map((tag) => (tag.id === updatedTag.id ? Object.assign(Object.assign({}, tag), updatedTag) : tag));
+        dispatch({
+            type: TagManagementReducerConstants.updateTag,
+            payload: { tags: updatedTagsState, tagResponse: getApiResourceObject(updatedTagsState) },
+        });
+    }
+    catch (err) {
+        console.log(err);
+    }
+});
+export const deleteTag = (dispatch, deletedTag, tagManagementState) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield pcm.topContentTag.deleteTopContentTag(deletedTag.id);
+        const updatedTags = tagManagementState.tags.filter((t) => t.id !== deletedTag.id);
+        dispatch({
+            type: TagManagementReducerConstants.updateTag,
+            payload: {
+                tags: updatedTags,
+            },
+        });
+    }
+    catch (err) {
+        console.log(err);
+    }
+});
+export const updateTopContentWithTags = (dispatch, content, tagManagementState) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield pcm.topContentTag.updateTagsOfTopContent({ topContents: [content] });
+    }
+    catch (err) {
+        console.log(err);
+    }
+});

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

@@ -2,6 +2,7 @@ import { IProduct as IHydraProduct, IProduct } from '@cee-eng/hydrajs/@types/mod
 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 {
+    tagList?: (number | string)[];
     mode?: ContentMode;
     isAttentionNeeded?: boolean;
 }
@@ -92,9 +93,9 @@ export declare const fetchTopContentRecourseUsage: (dispatch: TopContentReducerD
 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;
-export declare const saveAddedNewSectionContents: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], selectedCategory: ITopContentCategory, selectedProduct: Partial<IProduct>, selectedVersion: string, isCatOnlyForMajorVersion: boolean, newContent: any, isCreatingNewSet?: boolean) => Promise<never>;
-export declare const saveAddToTopContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], id: number, categoryId: number, content: ITopContentItemState, index: number) => Promise<never>;
-export declare const saveChangeInCategoryContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], categoryId: number, content: ITopContentItemState) => Promise<never>;
+export declare const saveAddedNewSectionContents: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], selectedCategory: ITopContentCategory, selectedProduct: Partial<IProduct>, selectedVersion: string, isCatOnlyForMajorVersion: boolean, newContent: any, isCreatingNewSet?: boolean) => Promise<import("@cee-eng/hydrajs/@types/models/topContent/topContentModel").ITopContentBody>;
+export declare const saveAddToTopContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], id: number, categoryId: number, content: ITopContentItemState, index: number) => Promise<import("@cee-eng/hydrajs/@types/models/topContent/topContentModel").ITopContentBody>;
+export declare const saveChangeInCategoryContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], categoryId: number, content: ITopContentItemState, deletedTags?: any[]) => Promise<never>;
 export declare const reArrangeContent: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[], categoryId: number) => Promise<never>;
 export declare const reArrangeCategory: (dispatch: TopContentReducerDispatchType, topContentEditState: ITopContentEditState[]) => Promise<never>;
 export declare const fetchCategories: (dispatch: TopContentReducerDispatchType) => Promise<never>;

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

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { pcm } from '@cee-eng/hydrajs';
 import { getApiResourceObject, getVersion } from '@rh-support/utils';
+import { isEmpty } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import { intialTopContentContext } from '../context/TopContentProvider';
 import { getContentUrls } from './TopContentHelpers';
@@ -359,6 +360,7 @@ export const saveAddedNewSectionContents = (dispatch, topContentEditState, selec
                 contentUrls: getContentUrls(topContentEditState),
             },
         });
+        return res;
     }
     catch (e) {
         console.log(e);
@@ -403,6 +405,7 @@ export const saveAddToTopContent = (dispatch, topContentEditState, id, categoryI
                 contentUrls: getContentUrls(topContentEditState),
             },
         });
+        return res;
     }
     catch (e) {
         console.log(e);
@@ -410,21 +413,26 @@ export const saveAddToTopContent = (dispatch, topContentEditState, id, categoryI
     }
 });
 // user saves content updates
-export const saveChangeInCategoryContent = (dispatch, topContentEditState, categoryId, content) => __awaiter(void 0, void 0, void 0, function* () {
+export const saveChangeInCategoryContent = (dispatch, topContentEditState, categoryId, content, deletedTags) => __awaiter(void 0, void 0, void 0, function* () {
     const toUpdate = {
         id: content.topContentId,
         contentTitle: content.contentTitle,
         contentUrl: content.contentUrl,
         contentRank: content.contentRank,
+        tagList: content.tagList, // list of new tagIds which needs to be added in content
+        expiryDate: content.expiryDate,
         isActive: 1,
     };
     try {
+        if (deletedTags && !isEmpty(deletedTags)) {
+            yield Promise.all(deletedTags.map((t) => pcm.topContentTag.deleteTagFromTopContent(content.topContentId, t)));
+        }
         const updatedContent = yield pcm.topContent.patchTopContent({ topContents: [toUpdate] });
         topContentEditState.forEach((cat) => {
             if (cat.categoryId === categoryId) {
                 const index = cat.content.findIndex((c) => c.topContentId === content.topContentId);
                 if (index !== -1) {
-                    cat.content[index] = Object.assign(Object.assign({}, cat.content[index]), { mode: ContentMode.INITIAL, contentTitle: content.contentTitle, contentUrl: content.contentUrl, updatedBy: updatedContent.topContents[0].updatedBy, updatedOn: updatedContent.topContents[0].updatedOn });
+                    cat.content[index] = Object.assign(Object.assign({}, cat.content[index]), { mode: ContentMode.INITIAL, contentTitle: content.contentTitle, contentUrl: content.contentUrl, updatedBy: updatedContent.topContents[0].updatedBy, updatedOn: updatedContent.topContents[0].updatedOn, tags: content.tags, expiryDate: content.expiryDate });
                 }
             }
         });

package/lib/esm/scss/_main.scss

@@ -41,10 +41,15 @@
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
+        flex-wrap: wrap;
         padding: 1rem 1.2rem;
         background-color: #f0f0f0;
         border: 1px solid #d2d2d2;
 
+        .toolbar-content {
+            width: 49%;
+        }
+
         label {
             font-size: 14px;
             margin-bottom: 0;
@@ -176,6 +181,7 @@
 
     .pf-v5-c-tabs__item.pf-m-current {
         background-color: white;
+        min-width: 200px;
         a {
             color: black;
         }
@@ -212,6 +218,28 @@
     }
 }
 
+#manage-expired-content {
+    .expired-content-manage-wrapper {
+        border: 1px solid #ccc;
+        border-top: none;
+
+        dt {
+            margin: 0;
+        }
+    }
+}
+
+#tags-manager-content {
+    .tags-manager-wrapper {
+        border: 1px solid #ccc;
+        border-top: none;
+
+        dt {
+            margin: 0;
+        }
+    }
+}
+
 // specific overrides under manage because of a different implementation
 .pf-v5-c-select {
     .pf-v5-c-select__toggle-wrapper > form:first-child {

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

@@ -148,6 +148,30 @@ div.pf-v5-c-pagination__nav-page-select {
     border-bottom: 1px solid black;
 }
 
+.pf-v5-c-chip {
+    .pf-v5-svg {
+        font-size: 12px;
+    }
+}
+
+.pf-v5-c-switch__label {
+    color: black !important;
+    font-size: 16px;
+    font-weight: 400;
+    outline: none !important;
+}
+
+.pf-v5-c-menu__content {
+    width: 100%;
+}
+
 .pf-v5-c-accordion .pf-v5-c-accordion__toggle {
     padding: 1rem !important;
 }
+
+.pf-v5-c-chip-group__list {
+    padding: 0;
+    .pf-v5-c-chip-group__list-item {
+        margin: 0;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/manage",
-    "version": "2.1.83",
+    "version": "2.1.84",
     "description": "Customer Support Manage App",
     "author": "Jordan Eudy <jeudy100@gmail.com>",
     "license": "ISC",
@@ -45,7 +45,7 @@
         "prepublishOnly": "npm run build"
     },
     "peerDependencies": {
-        "@cee-eng/hydrajs": "4.17.17",
+        "@cee-eng/hydrajs": "4.17.21",
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
@@ -75,16 +75,16 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@cee-eng/hydrajs": "4.17.17",
+        "@cee-eng/hydrajs": "4.17.21",
         "@patternfly/patternfly": "5.1.0",
         "@patternfly/react-core": "5.1.1",
         "@patternfly/react-table": "5.1.1",
-        "@rh-support/components": "2.1.62",
-        "@rh-support/configs": "2.0.19",
-        "@rh-support/react-context": "2.1.70",
+        "@rh-support/components": "2.1.63",
+        "@rh-support/configs": "2.0.20",
+        "@rh-support/react-context": "2.1.71",
         "@rh-support/types": "2.0.4",
-        "@rh-support/user-permissions": "2.1.45",
-        "@rh-support/utils": "2.1.34",
+        "@rh-support/user-permissions": "2.1.46",
+        "@rh-support/utils": "2.1.35",
         "@types/react-beautiful-dnd": "^13.0.0",
         "lodash": ">=4.17.15",
         "mark.js": "^8.11.1",
@@ -102,5 +102,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "ecb9820a2fe40793e79c0f9f4786ec657070fe64"
+    "gitHead": "85dc8cf2f736478dc995cb52e1a5be8e608e2fb8"
 }