@rh-support/manage 2.1.82 → 2.1.84

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

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

package/lib/esm/components/TopContentManagement/TopContentEditor/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,9 +136,14 @@ 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 && !isSearchModeEnabled && React.createElement(TopContentSuggestion, null),
+            !topContentResponse.isFetching && React.createElement(TopContentSuggestion, { searchQuery: searchQuery }),
             topContentResponse.isFetching ? (React.createElement(Bullseye, null,
                 React.createElement(EmptyState, { variant: EmptyStateVariant.full },
                     React.createElement(Spinner, { size: "lg" })))) : (!topContentResponse.isFetching &&
@@ -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/TopContentEditor/TopContentSuggestion/TopContentSuggestion.d.ts

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

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

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

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

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

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

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

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

@@ -1,12 +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("section", { id: "manage-top-content" },
-        React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } },
-            React.createElement(TopContentContextProvider, null,
+    return (React.createElement(ErrorBoundary, { errorMsgInfo: { message: t('There was an error loading suggestions') } },
+        React.createElement(TopContentContextProvider, 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);
+    }
+});