@rh-support/manage 2.4.10-beta.6 → 2.5.0

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

@@ -1,4 +1,4 @@
-import { Button, ButtonVariant, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant, Title, } from '@patternfly/react-core';
+import { Button, ButtonVariant, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant, } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { isNumber, isRegularVersion } from '@rh-support/utils';
 import isEmpty from 'lodash/isEmpty';
@@ -10,14 +10,14 @@ export function NoTopContentFound({ version, product, dataLength, onAddCategory,
     // 1.1, 1.x are normal semver versions but we have versions line online or dedicated that don't follw semver
     const iSemverVersion = isRegularVersion(version) && isNumber(version.split('.')[1]);
     const getCreateSetMessage = () => (React.createElement(React.Fragment, null,
-        iSemverVersion && (React.createElement("p", { className: "pf-u-mb-md" },
+        iSemverVersion && (React.createElement("p", { className: "pf-v5-u-mb-md" },
             React.createElement(Trans, null, "Customers can't view any content while troubleshooting this version."))),
-        isXVersion && (React.createElement("p", { className: "pf-u-mb-md" },
+        isXVersion && (React.createElement("p", { className: "pf-v5-u-mb-md" },
             React.createElement(Trans, null,
                 "Customers will see content for ",
                 xVersion,
                 " when minor version content is unavailable."))),
-        React.createElement("p", { className: "pf-u-mb-md" },
+        React.createElement("p", { className: "pf-v5-u-mb-md" },
             React.createElement(Button, { variant: isXVersion ? ButtonVariant.secondary : ButtonVariant.primary, isInline: true, onClick: () => onAddCategory(false, true, version) },
                 React.createElement(Trans, null,
                     ' ',
@@ -38,22 +38,21 @@ export function NoTopContentFound({ version, product, dataLength, onAddCategory,
                 xVersion),
             ' ',
             "troubleshooting this version"),
-        React.createElement("div", { className: "pf-u-mt-lg" },
-            React.createElement(Button, { isInline: true, className: "pf-c-alert__action", variant: ButtonVariant.primary, onClick: () => onAddCategory(false, true, version, true) },
+        React.createElement("div", { className: "pf-v5-u-mt-lg" },
+            React.createElement(Button, { isInline: true, className: "pf-v5-c-alert__action", variant: ButtonVariant.primary, onClick: () => onAddCategory(false, true, version, true) },
                 React.createElement(Trans, null,
                     "Create new set for ",
                     version)))));
     const noContent = dataLength === 0 && !isContentOnlyForMajorVersion;
     const noMinorButHaveMajorContent = dataLength !== 0 && isContentOnlyForMajorVersion;
-    return (React.createElement(EmptyState, { variant: EmptyStateVariant.full },
-        React.createElement(EmptyStateIcon, { icon: SearchIcon }),
-        React.createElement(Title, { headingLevel: "h2", size: "lg", className: "pf-u-mb-md" }, isEmpty(product) || isEmpty(version) ? (React.createElement(Trans, null, "No top content found")) : isRegularVersion(version) && isNumber(version.split('.')[1]) && dataLength === 0 ? (React.createElement(Trans, null,
-            "No content available for ",
-            version,
-            " or ",
-            xVersion)) : (React.createElement(Trans, null,
-            "No content available for ",
-            version))),
+    return (React.createElement(EmptyState, { variant: EmptyStateVariant.xs },
+        React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, isEmpty(product) || isEmpty(version) ? (React.createElement(Trans, null, "No top content found")) : isRegularVersion(version) && isNumber(version.split('.')[1]) && dataLength === 0 ? (React.createElement(Trans, null,
+                "No content available for ",
+                version,
+                " or ",
+                xVersion)) : (React.createElement(Trans, null,
+                "No content available for ",
+                version))), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h2" }),
         React.createElement(EmptyStateBody, null,
             isEmpty(product) && React.createElement(Trans, null, "Please select a product and version to edit"),
             !isEmpty(product) && isEmpty(version) && React.createElement(Trans, null, "Please select a version to edit"),

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContent.tsx"],"names":[],"mappings":"AAKA,wBAAgB,UAAU,gBAMzB"}
+{"version":3,"file":"TopContent.d.ts","sourceRoot":"","sources":["../../../../src/components/TopContentManagement/TopContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,wBAAgB,UAAU,sBAMzB"}

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

@@ -1,7 +1,8 @@
 import { ITopContentCategory } from '@cee-eng/hydrajs/@types/models/topContent/topContentModel';
+import React from 'react';
 interface IProps {
     onCategoryChange: (val: ITopContentCategory) => void;
 }
-export declare function AddNewCategoryDropDown(props: IProps): JSX.Element;
+export declare function AddNewCategoryDropDown(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=AddNewCategoryDropDown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddNewCategoryDropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAShG,UAAU,MAAM;IACZ,gBAAgB,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,eA4EnD"}
+{"version":3,"file":"AddNewCategoryDropDown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/AddNewCategoryDropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2DAA2D,CAAC;AAIhG,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,MAAM;IACZ,gBAAgB,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBAiFnD"}

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

@@ -1,5 +1,6 @@
-import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core/deprecated';
 import { ToastNotification } from '@rh-support/components';
+import sortBy from 'lodash/sortBy';
 import React, { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
@@ -9,7 +10,11 @@ export function AddNewCategoryDropDown(props) {
     const { topContentEditState, categories } = useTopContentContext();
     const topContentDispatch = useTopContentDispatchContext();
     const allAddedCategories = topContentEditState.map((cat) => cat.categoryName);
-    const availableCategories = categories.data.filter((category) => !(allAddedCategories || []).includes(category.categoryName));
+    const availableCategories = sortBy(categories.data.filter((category) => !(allAddedCategories || []).includes(category.categoryName)), [
+        function (obj) {
+            return obj.categoryName.toLowerCase();
+        },
+    ]);
     const [isOpen, setIsOpen] = useState(false);
     const [selected, setSelected] = useState();
     const getCategoryOptions = (options) => {
@@ -47,5 +52,5 @@ export function AddNewCategoryDropDown(props) {
             React.createElement(Trans, null, "Category"),
             ' ',
             React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-        React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: onToggle, isOpen: isOpen, onClear: onClearCategory, onSelect: onSelect, onFilter: onFilter, selections: selected === null || selected === void 0 ? void 0 : selected.categoryName, placeholderText: t('Select an option or enter a new category') }, (categories.isFetching && { loadingVariant: 'spinner' }), { id: "new-category", "data-tracking-id": "new-category" }), getCategoryOptions(availableCategories))));
+        React.createElement(Select, Object.assign({ variant: SelectVariant.typeahead, onToggle: (_event, isExpanded) => onToggle(isExpanded), isOpen: isOpen, onClear: onClearCategory, onSelect: onSelect, onFilter: onFilter, selections: selected === null || selected === void 0 ? void 0 : selected.categoryName, placeholderText: t('Select an option or enter a new category') }, (categories.isFetching && { loadingVariant: 'spinner' }), { id: "new-category", "data-tracking-id": "new-category" }), getCategoryOptions(availableCategories))));
 }

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

@@ -11,6 +11,6 @@ interface IProps {
     onCancelArrangement?: () => void;
     onSaveArrangement?: () => void;
 }
-export declare function TopContentCategory(props: IProps): JSX.Element;
+export declare function TopContentCategory(props: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=TopContentCategory.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TopContentCategory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategory.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,OAAO,EAAgB,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAI5F,UAAU,MAAM;IACZ,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAgE/C"}
+{"version":3,"file":"TopContentCategory.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategory.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,OAAO,EAAgB,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAI5F,UAAU,MAAM;IACZ,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,sBAAsB,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,qBA6D/C"}

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

@@ -1,4 +1,4 @@
-import { AccordionContent, AccordionItem, AccordionToggle } from '@patternfly/react-core';
+import { AccordionContent, AccordionItem, AccordionToggle, Icon } from '@patternfly/react-core';
 import GripVerticalIcon from '@patternfly/react-icons/dist/js/icons/grip-vertical-icon';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import { scrollIntoView } from '@rh-support/utils';
@@ -36,7 +36,8 @@ export function TopContentCategory(props) {
     return (React.createElement("div", Object.assign({ ref: props.innerRef }, props.provided.draggableProps, props.provided.dragHandleProps), props.category.content.length > 0 && (React.createElement(AccordionItem, null,
         React.createElement(AccordionToggle, { id: props.category.categoryName, onClick: toggleExpanded, isExpanded: isExpanded },
             React.createElement("h3", { ref: headerRef },
-                props.isArrangingCats && (React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), size: "sm", className: "pf-u-mr-sm" })),
+                props.isArrangingCats && (React.createElement(Icon, { size: "md", className: "pf-v5-u-mr-sm" },
+                    React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag') }))),
                 props.category.categoryName,
                 " ",
                 props.category.isAttentionNeeded && React.createElement(NeedsAttention, null))),

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

@@ -1,8 +1,9 @@
+import React from 'react';
 import { ITopContentEditState } from '../../../../reducers/TopContentReducer';
 interface IProps {
     category: ITopContentEditState;
     version: string;
 }
-export declare function TopContentCategoryNew({ category, version }: IProps): JSX.Element;
+export declare function TopContentCategoryNew({ category, version }: IProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=TopContentCategoryNew.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TopContentCategoryNew.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategoryNew.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAgB,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAG5F,UAAU,MAAM;IACZ,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,eA2ClE"}
+{"version":3,"file":"TopContentCategoryNew.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentCategoryNew.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAG9E,OAAO,EAAgB,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAG5F,UAAU,MAAM;IACZ,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,qBA2ClE"}

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

@@ -40,7 +40,7 @@ export const TopContentComponent = (props) => {
         resetChangeInCategoryContent(topContentDispatch, topContentEditState, topContentResponse, props.category.id);
         setIsArrangingContent(false);
     };
-    const buttons = (React.createElement("div", { className: "pf-c-accordion__expanded-content-footer" },
+    const buttons = (React.createElement("div", { className: "pf-v5-c-accordion__expanded-content-footer" },
         !isArrangingContent && props.categoryMode !== CategoryMode.NEW_SECTION && (React.createElement("span", null,
             React.createElement(Button, { variant: "secondary", onClick: addContent, "data-tracking-id": "add-content-top-content" },
                 React.createElement(Trans, null, "Add content")),
@@ -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

@@ -1,11 +1,15 @@
+import { ISolrArticle, ISolrSolution } from '@cee-eng/hydrajs/@types/models/solr/solr';
+import React from 'react';
 import { DraggableStateSnapshot } from 'react-beautiful-dnd';
 import { ITopContentEditState } from '../../../../reducers/TopContentReducer';
 interface IProps {
     isArrangingContent: boolean;
     category: ITopContentEditState;
-    snapshot: DraggableStateSnapshot;
+    snapshot?: DraggableStateSnapshot;
     i: number;
 }
-export declare const TopContentSingleItem: ({ isArrangingContent, category, snapshot, i }: IProps) => JSX.Element;
+export declare function formatDuplicateWarning(arr: any): any;
+export declare function getDocsFromUrl(url: string): Promise<(ISolrSolution | ISolrArticle)[]>;
+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,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,gBAqYzF,CAAC"}
+{"version":3,"file":"TopContentSingleItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TopContentManagement/TopContentEditor/TopContentCategoryContent/TopContentSingleItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAiB,aAAa,EAAE,MAAM,0CAA0C,CAAC;AA8BtG,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAM7D,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,wBAAsB,cAAc,CAAC,GAAG,EAAE,MAAM,6CA2B/C;AAED,eAAO,MAAM,oBAAoB,kDAAmD,MAAM,sBAkiBzF,CAAC"}

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

@@ -8,22 +8,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { search } from '@cee-eng/hydrajs';
-import { Button, ValidatedOptions } from '@patternfly/react-core';
+import { Button, DatePicker, 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 { CustomTextInput, ToastNotification } from '@rh-support/components';
-import { formatDate, getDrupalResIdIfTypeFromUrl, getText } from '@rh-support/utils';
+import { TagsSelector, ToastNotification, useDebounce } from '@rh-support/components';
+import { formatDate, getDrupalResIdIfTypeFromUrl, getText, isFutureDate, isValidDate, 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, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { TagManagementStateContext } from '../../../../context/TagManagementContextProvider';
 import { useTopContentContext, useTopContentDispatchContext } from '../../../../context/TopContentProvider';
 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) {
@@ -34,7 +37,36 @@ function formatDuplicateWarning(arr) {
         return [...str, ' and ', arr.slice(-1)];
     }
 }
+export function getDocsFromUrl(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        try {
+            const nodeId = getDrupalResIdIfTypeFromUrl(url);
+            if (!nodeId)
+                return [];
+            const queryParam = {
+                q: '*:*',
+                start: 0,
+                rows: 1,
+            };
+            const expression = {
+                fq: ['documentKind:("Solution" OR "Article")', `id:${nodeId}`],
+                fl: 'id, allTitle, publishedTitle',
+            };
+            const response = yield search.solrSearchV2(queryParam, 'kcs', expression);
+            const docs = ((_a = response === null || response === void 0 ? void 0 : response.response) === null || _a === void 0 ? void 0 : _a.docs) || [];
+            if (docs.length == 0) {
+                throw new Error('');
+            }
+            return docs;
+        }
+        catch (err) {
+            throw err;
+        }
+    });
+}
 export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i }) => {
+    var _a, _b, _c;
     const [isPreview, setIsPreview] = useState(true);
     const [isFetchingSolrSearch, setIsFetchingSolrSearch] = useState(false);
     const editToggle = () => {
@@ -42,44 +74,49 @@ 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 { topContentEditState, isCatOnlyForMajorVersion, selectedProduct, selectedVersion, contentUrls, filteredTags, } = useTopContentContext();
+    const tagManagementEditState = useContext(TagManagementStateContext);
+    const { tags: tagOptions } = tagManagementEditState;
+    const ref = useRef(null);
     const topContentDispatch = useTopContentDispatchContext();
     const [localContentUrl, setLocalContentUrl] = useState(content.contentUrl);
     const [localContentTitle, setLocalContentTitle] = useState(content.contentTitle);
+    const [localSelectedTags, setLocalSelectedTags] = useState(content.tags || []);
+    const [localExpiryDate, setLocalExpiryDate] = useState((content === null || content === void 0 ? void 0 : content.expiryDate) || '');
     const [newCategory, setNewCategory] = useState(undefined);
     const [contentTitleIsValid, setContentTitleIsValid] = useState(true);
     const [contentUrlIsValid, setContentUrlIsValid] = useState(true);
     const [showDuplicateError, setShowDuplicateError] = useState(false);
     const [duplicatUrlErrorArray, setDuplicatUrlErrorArray] = useState([]);
     const [isSaving, setIsSaving] = useState(false);
+    const [shouldShowExpDateErr, setShouldShowExpDateErr] = useState(false);
+    const [datePickerFocused, setDatePickerFocused] = 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 expiryDateErrMsg = isEmpty(localExpiryDate) || isFutureDate(localExpiryDate) ? '' : t('Invalid expiry date');
     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;
+        var _a, _b;
         // throws toast warning and clears it after 4 seconds
         const throwWarningMessage = () => {
             const message = getText('Unable to automatically fetch title. Please enter manually');
-            ToastNotification.addWarningMessage(message, { autoClose: 4000 });
+            ToastNotification.addWarningMessage(message, '', { autoClose: 4000 });
         };
         try {
             const nodeId = getDrupalResIdIfTypeFromUrl(contentUrl);
             if (!nodeId)
                 return;
-            const queryParam = {
-                q: '*:*',
-                start: 0,
-                rows: 1,
-            };
-            const expression = {
-                fq: ['documentKind:("Solution" OR "Article")', `id:${nodeId}`],
-                fl: 'id, allTitle, publishedTitle',
-            };
-            const response = yield search.solrSearchV2(queryParam, 'kcs', expression);
-            const docs = ((_a = response === null || response === void 0 ? void 0 : response.response) === null || _a === void 0 ? void 0 : _a.docs) || [];
-            const contentTitle = ((_b = docs[0]) === null || _b === void 0 ? void 0 : _b.publishedTitle) || ((_c = docs[0]) === null || _c === void 0 ? void 0 : _c.allTitle);
+            const docs = yield getDocsFromUrl(contentUrl);
+            const contentTitle = ((_a = docs[0]) === null || _a === void 0 ? void 0 : _a.publishedTitle) || ((_b = docs[0]) === null || _b === void 0 ? void 0 : _b.allTitle);
             if (docs.length > 0 && docs[0].id === nodeId + '' && contentTitle) {
                 setLocalContentTitle(contentTitle);
                 setContentTitleIsValid(true);
@@ -95,34 +132,17 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     const checkDuplicateUrls = (contentUrl) => {
         const dupObjCopy = cloneDeep(contentUrls);
         const selectedCategory = category.categoryName;
-        // remove old url that is edited from obj
+        //we are storing encoded urls in contentUrls
+        const contentUrlEncoded = encodeURI(contentUrl);
         if (dupObjCopy[content.contentUrl] && dupObjCopy[content.contentUrl][selectedCategory] > 1) {
             dupObjCopy[content.contentUrl][selectedCategory]--;
         }
         else {
             delete dupObjCopy[content.contentUrl];
         }
-        //remove prev url from dup obj
-        if (dupObjCopy[localContentUrl]) {
-            if (dupObjCopy[localContentUrl][selectedCategory]) {
-                dupObjCopy[localContentUrl][selectedCategory]--;
-            }
-        }
-        //add new typed url to dup
-        if (dupObjCopy[contentUrl]) {
-            if (dupObjCopy[contentUrl][selectedCategory]) {
-                dupObjCopy[contentUrl][selectedCategory]++;
-            }
-            else {
-                dupObjCopy[contentUrl][selectedCategory] = 1;
-            }
-        }
-        else {
-            dupObjCopy[contentUrl] = { [selectedCategory]: 1 };
-        }
-        if (dupObjCopy[contentUrl][selectedCategory] > 1 || Object.keys(dupObjCopy[contentUrl]).length > 1) {
+        if (!isEmpty(dupObjCopy[contentUrlEncoded])) {
             const dupArrays = [];
-            for (const cat in dupObjCopy[contentUrl]) {
+            for (const cat in dupObjCopy[contentUrlEncoded]) {
                 if (cat !== 'undefined') {
                     cat === category.categoryName
                         ? dupArrays.unshift(React.createElement("strong", { key: `${cat}` }, "this section"))
@@ -138,11 +158,15 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         }
     };
     const onContentUrlChange = (contentUrl, event) => __awaiter(void 0, void 0, void 0, function* () {
-        setContentUrlIsValid(event.target.validity.valid);
+        setContentUrlIsValid(isValidUrl(contentUrl));
         checkDuplicateUrls(contentUrl);
         setLocalContentUrl(contentUrl);
+    });
+    const onLocalContentUrlChange = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (localContentUrl === content.contentUrl)
+            return;
         setIsFetchingSolrSearch(true);
-        yield updateContentTitleFromUrl(contentUrl);
+        yield updateContentTitleFromUrl(localContentUrl);
         setIsFetchingSolrSearch(false);
     });
     const onDelete = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -157,7 +181,10 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     });
     const onSaveAddContentToCategory = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            const newContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl });
+            const newContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl, tagList: localSelectedTags.map((t) => t.id), tags: localSelectedTags.map((t) => ({ id: t.id, tagName: t.tagName })) });
+            if (!isEmpty(localExpiryDate)) {
+                newContent.expiryDate = localExpiryDate;
+            }
             setIsSaving(true);
             yield saveAddToTopContent(topContentDispatch, topContentEditState, category.id, category.categoryId, newContent, i);
             ToastNotification.addSuccessMessage(t('Content added successfully'));
@@ -171,10 +198,15 @@ 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 })) });
+            if (!isEmpty(localExpiryDate)) {
+                updatedContent.expiryDate = localExpiryDate;
+            }
             setIsSaving(true);
-            yield saveChangeInCategoryContent(topContentDispatch, topContentEditState, category.categoryId, updatedContent, i);
+            yield saveChangeInCategoryContent(topContentDispatch, topContentEditState, category.categoryId, updatedContent, deletedTags);
             editToggle();
             ToastNotification.addSuccessMessage(t('Content updated successfully'));
         }
@@ -187,7 +219,10 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
     });
     const onSaveCreateNewCategory = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            const newContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl });
+            const newContent = Object.assign(Object.assign({}, content), { contentTitle: localContentTitle, contentUrl: localContentUrl, tagList: localSelectedTags.map((t) => t.id), tags: localSelectedTags.map((t) => ({ id: t.id, tagName: t.tagName })) });
+            if (!isEmpty(localExpiryDate)) {
+                newContent.expiryDate = localExpiryDate;
+            }
             setIsSaving(true);
             yield saveAddedNewSectionContents(topContentDispatch, topContentEditState, newCategory, selectedProduct, selectedVersion, isCatOnlyForMajorVersion, newContent);
             ToastNotification.addSuccessMessage(t('Category created successfully'));
@@ -219,6 +254,7 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         setNewCategory(category);
     };
     const onCancel = () => {
+        var _a;
         if (content.mode === ContentMode.NEW_SECTION_CONTENT) {
             fetchTopContent(topContentDispatch, selectedProduct, selectedVersion);
         }
@@ -234,51 +270,134 @@ export const TopContentSingleItem = ({ isArrangingContent, category, snapshot, i
         setShowDuplicateError(false);
         setContentUrlIsValid(true);
         setIsAddingCategory(topContentDispatch, false);
+        setLocalSelectedTags(content.tags);
+        setLocalExpiryDate((_a = content.expiryDate) !== null && _a !== void 0 ? _a : '');
+    };
+    const expiryDateValidator = (date) => {
+        const today = new Date();
+        if (date < today)
+            return t('Invalid expiry date');
+        return '';
+    };
+    const onExpiryDateChange = (event, str, date) => {
+        setLocalExpiryDate(str);
     };
+    useDebounce(() => {
+        onLocalContentUrlChange();
+    }, [localContentUrl], 1000);
     useEffect(() => {
         if (isArrangingContent)
             setIsPreview(true);
     }, [isArrangingContent]);
+    useEffect(() => {
+        var _a;
+        setLocalContentTitle(content.contentTitle);
+        setLocalContentUrl(content.contentUrl);
+        setLocalSelectedTags(content.tags || []);
+        setLocalExpiryDate((_a = content.expiryDate) !== null && _a !== void 0 ? _a : '');
+    }, [content]);
+    useEffect(() => {
+        var _a, _b;
+        const datePickerElement = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('#content-expiry-date input');
+        const tagsSelectorElement = (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.querySelector('#top-content-tag');
+        const handleFocusOnDatePicker = () => {
+            setDatePickerFocused(true);
+        };
+        const handleTagSelectorClick = () => {
+            !shouldShowExpDateErr && setShouldShowExpDateErr(true);
+        };
+        if (datePickerElement) {
+            datePickerElement.addEventListener('focusin', handleFocusOnDatePicker);
+        }
+        if (tagsSelectorElement) {
+            tagsSelectorElement.addEventListener('click', handleTagSelectorClick);
+        }
+        return () => {
+            if (datePickerElement) {
+                datePickerElement.removeEventListener('focusin', handleFocusOnDatePicker);
+            }
+            if (tagsSelectorElement) {
+                tagsSelectorElement.removeEventListener('click', handleTagSelectorClick);
+            }
+            setDatePickerFocused(false);
+            setShouldShowExpDateErr(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isPreview]);
     // To check if input has spaces
     const doesInputHasSpaces = isEmpty(localContentTitle.trim());
     // To disable save button if empty depending on spaces
     const isSaveButtonDisabled = doesInputHasSpaces ||
-        !(contentTitleIsValid && contentUrlIsValid && localContentTitle && localContentUrl) ||
+        isDuplicateTitle ||
+        !(contentTitleIsValid &&
+            contentUrlIsValid &&
+            localContentTitle &&
+            localContentUrl &&
+            ((isValidDate(localExpiryDate) && isEmpty(expiryDateValidator(new Date(localExpiryDate)))) ||
+                (isEmpty(localExpiryDate) && isEmpty((_a = content.expiryDate) !== null && _a !== void 0 ? _a : '')))) ||
         (!newCategory && content.mode === ContentMode.NEW_SECTION_CONTENT) ||
-        (localContentUrl === content.contentUrl && localContentTitle === content.contentTitle);
+        (localContentUrl === content.contentUrl &&
+            localContentTitle === content.contentTitle &&
+            isEqual(localTagsIds, oldTagsIds) &&
+            isEqual(localExpiryDate.split('T')[0], ((_b = content.expiryDate) === null || _b === void 0 ? void 0 : _b.split('T')[0]) || ''));
     const lastModifiedBy = t(`Last modified {{created}} by {{by}}`, {
         created: formatDate(content.updatedOn || content.createdOn),
         by: content.updatedBy || content.createdBy,
     });
     return (React.createElement(React.Fragment, null,
-        isPreview && content.mode !== ContentMode.ADD && content.mode !== ContentMode.NEW_SECTION_CONTENT && (React.createElement("li", { className: `push-bottom-narrow ${snapshot.isDragging ? 'list-flat tc-drag' : ''}` },
-            isArrangingContent && (React.createElement(GripVerticalIcon, { style: { cursor: 'move' }, title: t('Drag'), color: "#06c", size: "sm", className: "pf-u-mr-sm" })),
+        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))),
-        (!isPreview || content.mode === ContentMode.ADD || content.mode === ContentMode.NEW_SECTION_CONTENT) && (React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "card card-light push-bottom" },
+            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, color: filteredTags.some((t) => t.id === tag.id) ? 'gold' : 'grey' }, tag.tagName))),
+                !isEmpty((_c = content.expiryDate) !== null && _c !== void 0 ? _c : '') && !isFutureDate(content.expiryDate) && (React.createElement(Label, { isCompact: true, className: "pf-v5-u-mr-xs pf-v5-u-mt-sm", color: "red" },
+                    React.createElement(Trans, null, "Outdated Content")))))),
+        (!isPreview || content.mode === ContentMode.ADD || content.mode === ContentMode.NEW_SECTION_CONTENT) && (React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "card card-light push-bottom", ref: ref },
             content.mode === ContentMode.NEW_SECTION_CONTENT && (React.createElement(AddNewCategoryDropDown, { onCategoryChange: onAddedNewCategoryChange })),
             React.createElement("div", { className: "form-group" },
                 React.createElement("label", { htmlFor: localContentTitle },
                     "Heading",
                     ' ',
                     React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-                React.createElement("div", { className: "input-wrapper" },
-                    React.createElement(CustomTextInput, { isRequired: true, isSpaceAllowed: false, className: `form-control${!contentTitleIsValid ? ' form-invalid' : ''}`, type: "text", maxLength: 254, required: true, value: localContentTitle, isDisabled: isFetchingSolrSearch, "aria-label": t('Copy and paste the heading for consistency'), placeholder: t('Copy and paste the heading for consistency'), onChange: onContentTitleChange, validated: contentTitleIsValid ? ValidatedOptions.default : ValidatedOptions.error }))),
+                React.createElement(TextInput, { isRequired: true, type: "text", maxLength: 254, required: true, value: localContentTitle, isDisabled: isFetchingSolrSearch, "aria-label": t('Copy and paste the heading for consistency'), placeholder: t('Copy and paste the heading for consistency'), onFocus: () => setShouldShowExpDateErr(true), onChange: (e, v) => {
+                        onContentTitleChange(v, e);
+                        !shouldShowExpDateErr && setShouldShowExpDateErr(true);
+                    }, validated: contentTitleIsValid && !isDuplicateTitle
+                        ? ValidatedOptions.default
+                        : ValidatedOptions.error }),
+                isDuplicateTitle && (React.createElement("p", { className: "form-instructions form-invalid " },
+                    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-u-mr-sm" }),
+                    ' ',
+                    React.createElement(Trans, null, "Duplicate heading. Content with this heading is already present.")))),
             React.createElement("div", { className: "form-group" },
                 React.createElement("label", { htmlFor: localContentUrl },
                     "Link to content",
                     ' ',
                     React.createElement("span", { className: "form-required", "aria-hidden": true }, "*")),
-                React.createElement(CustomTextInput, { type: "url", maxLength: 254, isRequired: true, pattern: "^(http(s)?:\\/\\/)+[\\w\\-\\._~:\\/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$", isSpaceAllowed: false, className: `form-control${!contentUrlIsValid ? ' form-invalid' : ''}`, value: getTopContentUrl(localContentUrl), "aria-label": t('Entering a solution or article link first will automatically generate the heading for you'), placeholder: t('Entering a solution or article link first will automatically generate the heading for you'), onChange: onContentUrlChange, validated: contentUrlIsValid ? ValidatedOptions.default : ValidatedOptions.error }),
-                showDuplicateError && (React.createElement("p", { className: "form-instructions" },
-                    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-u-mr-sm" }),
+                React.createElement(TextInput, { type: "url", maxLength: 254, isRequired: true, pattern: "^(http(s)?:\\/\\/)+[\\w\\-\\._~:\\/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$", value: getTopContentUrl(localContentUrl), "aria-label": t('Entering a solution or article link first will automatically generate the heading for you'), placeholder: t('Entering a solution or article link first will automatically generate the heading for you'), onFocus: () => setShouldShowExpDateErr(true), onChange: (evt, val) => {
+                        onContentUrlChange(val, evt);
+                        !shouldShowExpDateErr && setShouldShowExpDateErr(true);
+                    }, validated: contentUrlIsValid ? ValidatedOptions.default : ValidatedOptions.error }),
+                showDuplicateError && (React.createElement("p", { className: "form-instructions form-invalid" },
+                    React.createElement(ExclamationCircleIcon, { color: "#c9190b", className: "pf-v5-u-mr-sm" }),
                     " Duplicate url. This url is already added in ",
                     formatDuplicateWarning(duplicatUrlErrorArray),
                     "."))),
-            React.createElement("span", { className: "pf-c-accordion__expanded-content-footer" },
+            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, placeholder: t('Select tags to improve discoverability'), id: "top-content-tag" })))),
+                React.createElement(FlexItem, null,
+                    React.createElement(FormGroup, { label: t('Expiry date') },
+                        React.createElement(DatePicker, { onBlur: onExpiryDateChange, onChange: onExpiryDateChange, value: !isEmpty(localExpiryDate) ? localExpiryDate.split('T')[0] : '', validators: [expiryDateValidator], id: "content-expiry-date", invalidFormatText: t('Invalid date format') }),
+                        shouldShowExpDateErr && !datePickerFocused && (React.createElement("p", { className: "form-instructions form-invalid pf-v5-u-font-size-sm pf-v5-u-danger-color-200 pf-v5-u-my-0" }, expiryDateErrMsg))))),
+            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 },
                         React.createElement(Trans, null, "Save")),