From af6cd905e996064eb39110d4c3cfab1133a02a6d Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Tue, 19 Sep 2023 19:33:12 +0530 Subject: [PATCH] chore(ui): add layoutType in tags container (#13230) * chore(ui): add layoutType in tags container * chore: address comment --------- Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com> --- .../TagsContainerV2.interface.ts | 3 +- .../Tag/TagsContainerV2/TagsContainerV2.tsx | 75 +++++++++++++------ .../Tag/TagsViewer/TagsViewer.interface.ts | 6 ++ .../components/Tag/TagsViewer/TagsViewer.tsx | 13 +++- 4 files changed, 72 insertions(+), 25 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts index ae3f6077f97..7af4bac56d0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts @@ -15,7 +15,7 @@ import { ThreadType } from 'generated/api/feed/createThread'; import { TagSource } from 'generated/type/tagLabel'; import { EntityTags } from 'Models'; import { ReactElement } from 'react'; -import { DisplayType } from '../TagsViewer/TagsViewer.interface'; +import { DisplayType, LayoutType } from '../TagsViewer/TagsViewer.interface'; export type TagsContainerV2Props = { permission: boolean; @@ -29,6 +29,7 @@ export type TagsContainerV2Props = { showInlineEditButton?: boolean; children?: ReactElement; displayType?: DisplayType; + layoutType?: LayoutType; onSelectionChange?: (selectedTags: EntityTags[]) => Promise; onThreadLinkSelect?: (value: string, threadType?: ThreadType) => void; }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx index 6458527ece0..b625705797e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx @@ -35,6 +35,7 @@ import { ReactComponent as IconRequest } from '../../../assets/svg/request-icon. import TagSelectForm from '../TagsSelectForm/TagsSelectForm.component'; import TagsV1 from '../TagsV1/TagsV1.component'; import TagsViewer from '../TagsViewer/TagsViewer'; +import { LayoutType } from '../TagsViewer/TagsViewer.interface'; import { TagsContainerV2Props } from './TagsContainerV2.interface'; const TagsContainerV2 = ({ @@ -45,6 +46,7 @@ const TagsContainerV2 = ({ entityFqn, tagType, displayType, + layoutType, showHeader = true, showBottomEditButton, showInlineEditButton, @@ -59,19 +61,19 @@ const TagsContainerV2 = ({ const [isEditTags, setIsEditTags] = useState(false); const [tags, setTags] = useState(); - const isGlossaryType = useMemo( - () => tagType === TagSource.Glossary, - [tagType] - ); - - const showAddTagButton = useMemo( - () => permission && isEmpty(tags?.[tagType]), - [permission, tags?.[tagType]] - ); - - const selectedTagsInternal = useMemo( - () => tags?.[tagType].map(({ tagFQN }) => tagFQN), - [tags, tagType] + const { + isGlossaryType, + showAddTagButton, + selectedTagsInternal, + isHoriZontalLayout, + } = useMemo( + () => ({ + isGlossaryType: tagType === TagSource.Glossary, + showAddTagButton: permission && isEmpty(tags?.[tagType]), + selectedTagsInternal: tags?.[tagType].map(({ tagFQN }) => tagFQN), + isHoriZontalLayout: layoutType === LayoutType.HORIZONTAL, + }), + [tagType, permission, tags?.[tagType], tags, layoutType] ); const fetchGlossaryList = useCallback( @@ -167,12 +169,13 @@ const TagsContainerV2 = ({ ), - [displayType, showNoDataPlaceholder, tags?.[tagType]] + [displayType, showNoDataPlaceholder, tags?.[tagType], layoutType] ); const tagsSelectContainer = useMemo(() => { @@ -313,6 +316,33 @@ const TagsContainerV2 = ({ [permission, tags, tagType, handleAddClick] ); + const horizontalLayout = useMemo(() => { + return ( + + {showAddTagButton ? ( +
+ +
+ ) : null} + + {showInlineEditButton ? editTagButton : null} + + ); + }, [ + showAddTagButton, + displayType, + layoutType, + showNoDataPlaceholder, + tags?.[tagType], + showInlineEditButton, + handleAddClick, + ]); + useEffect(() => { setTags(getFilterTags(selectedTags)); }, [selectedTags]); @@ -323,13 +353,16 @@ const TagsContainerV2 = ({ data-testid={isGlossaryType ? 'glossary-container' : 'tags-container'}> {header} - {!isEditTags && ( - - {addTagButton} - {renderTags} - {showInlineEditButton && {editTagButton}} - - )} + {!isEditTags && + (isHoriZontalLayout ? ( + horizontalLayout + ) : ( + + {addTagButton} + {renderTags} + {showInlineEditButton && {editTagButton}} + + ))} {isEditTags && tagsSelectContainer} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.interface.ts index d07c6486f74..751f1952f83 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.interface.ts @@ -17,6 +17,7 @@ export interface TagsViewerProps { tags: EntityTags[]; sizeCap?: number; displayType?: DisplayType; + layoutType?: LayoutType; showNoDataPlaceholder?: boolean; } @@ -24,3 +25,8 @@ export enum DisplayType { READ_MORE = 'read-more', POPOVER = 'popover', } + +export enum LayoutType { + HORIZONTAL = 'horizontal', + VERTICAL = 'vertical', +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx index 95dd3305319..130e4195968 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { Button, Popover, Tag, Typography } from 'antd'; +import { Button, Popover, Space, Tag, Typography } from 'antd'; import classNames from 'classnames'; import { TAG_START_WITH } from 'constants/Tag.constants'; import { isEmpty, sortBy, uniqBy } from 'lodash'; @@ -27,12 +27,17 @@ import { LIST_SIZE, NO_DATA_PLACEHOLDER } from '../../../constants/constants'; import { TagSource } from '../../../generated/type/tagLabel'; import TagsV1 from '../TagsV1/TagsV1.component'; import './tags-viewer.less'; -import { DisplayType, TagsViewerProps } from './TagsViewer.interface'; +import { + DisplayType, + LayoutType, + TagsViewerProps, +} from './TagsViewer.interface'; const TagsViewer: FunctionComponent = ({ tags, sizeCap = LIST_SIZE, displayType = DisplayType.POPOVER, + layoutType = LayoutType.VERTICAL, showNoDataPlaceholder = true, }: TagsViewerProps) => { const { t } = useTranslation(); @@ -135,7 +140,9 @@ const TagsViewer: FunctionComponent = ({ return ( <> - {sortedTagsBySource.slice(0, sizeCap).map(getTagsElement)} + + {sortedTagsBySource.slice(0, sizeCap).map(getTagsElement)} + {displayType === DisplayType.POPOVER ? popoverRenderElement : readMoreRenderElement}