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>

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<void>;
   onThreadLinkSelect?: (value: string, threadType?: ThreadType) => void;
 };

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<TableTagsProps>();
 
-  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 = ({
       <Col span={24}>
         <TagsViewer
           displayType={displayType}
+          layoutType={layoutType}
           showNoDataPlaceholder={showNoDataPlaceholder}
           tags={tags?.[tagType] ?? []}
         />
       </Col>
     ),
-    [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 (
+      <Space>
+        {showAddTagButton ? (
+          <div onClick={handleAddClick}>
+            <TagsV1 startWith={TAG_START_WITH.PLUS} tag={TAG_CONSTANT} />
+          </div>
+        ) : null}
+        <TagsViewer
+          displayType={displayType}
+          layoutType={layoutType}
+          showNoDataPlaceholder={showNoDataPlaceholder}
+          tags={tags?.[tagType] ?? []}
+        />
+        {showInlineEditButton ? editTagButton : null}
+      </Space>
+    );
+  }, [
+    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 && (
-        <Row data-testid="entity-tags">
-          {addTagButton}
-          {renderTags}
-          {showInlineEditButton && <Col>{editTagButton}</Col>}
-        </Row>
-      )}
+      {!isEditTags &&
+        (isHoriZontalLayout ? (
+          horizontalLayout
+        ) : (
+          <Row data-testid="entity-tags">
+            {addTagButton}
+            {renderTags}
+            {showInlineEditButton && <Col>{editTagButton}</Col>}
+          </Row>
+        ))}
       {isEditTags && tagsSelectContainer}
 
       <Space align="baseline" className="m-t-xs w-full" size="middle">

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',
+}

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<TagsViewerProps> = ({
   tags,
   sizeCap = LIST_SIZE,
   displayType = DisplayType.POPOVER,
+  layoutType = LayoutType.VERTICAL,
   showNoDataPlaceholder = true,
 }: TagsViewerProps) => {
   const { t } = useTranslation();
@@ -135,7 +140,9 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
 
   return (
     <>
-      {sortedTagsBySource.slice(0, sizeCap).map(getTagsElement)}
+      <Space direction={layoutType} size={0}>
+        {sortedTagsBySource.slice(0, sizeCap).map(getTagsElement)}
+      </Space>
       {displayType === DisplayType.POPOVER
         ? popoverRenderElement
         : readMoreRenderElement}