From 652a12e4d7c30c1e8c5bc1f16fcbd535ae59fd86 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Tue, 6 Sep 2022 19:00:04 +0530
Subject: [PATCH] UI : Fix Tags page and minor ui issue (#7247)

* Fix Tags page and minor ui issue

* Fix cypress issue
---
 .../ActivityFeedList/ActivityFeedList.tsx     |  1 +
 .../Glossary/GlossaryV1.component.tsx         |  2 +-
 .../GlossaryDetails.component.tsx             | 21 +++++--------------
 .../ui/src/components/common/Card/Card.tsx    |  6 +++---
 .../resources/ui/src/pages/tags/index.tsx     | 19 ++++++++++-------
 5 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
index 3180495ca29..623d4c6e6dc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx
@@ -200,6 +200,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
             </Button>
             {showThreadTypeList && (
               <DropDownList
+                horzPosRight
                 dropDownList={threadFilterList}
                 value={threadType}
                 onSelect={handleThreadTypeDropDownChange}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
index 508e8247c61..063685b82d9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx
@@ -348,7 +348,7 @@ const GlossaryV1 = ({
                         : NO_PERMISSION_FOR_ACTION
                     }>
                     <button
-                      className="tw-mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md"
+                      className="tw-mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md tw-text-center"
                       disabled={!createGlossaryPermission}
                       onClick={handleAddGlossaryClick}>
                       <SVGIcons alt="plus" icon={Icons.ICON_PLUS_PRIMERY} />{' '}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
index a04b987bd55..a1b50077b5d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
@@ -279,18 +279,13 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
         placement="topRight"
         title={permissions.EditAll ? 'Add Reviewer' : NO_PERMISSION_FOR_ACTION}>
         <ButtonAntd
-          className="tw-p-0 add-reviewer-btn"
+          className="tw-p-0 flex-center"
           data-testid="add-new-reviewer"
           disabled={!permissions.EditAll}
+          size="small"
           type="text"
           onClick={() => setShowRevieweModal(true)}>
-          <SVGIcons
-            alt="edit"
-            className="tw--mt-1"
-            icon={Icons.EDIT}
-            title="Edit"
-            width="16px"
-          />
+          <SVGIcons alt="edit" icon={Icons.EDIT} title="Edit" width="16px" />
         </ButtonAntd>
       </Tooltip>
     );
@@ -307,19 +302,13 @@ const GlossaryDetails = ({ permissions, glossary, updateGlossary }: props) => {
               : NO_PERMISSION_FOR_ACTION
           }>
           <ButtonAntd
-            className="tw-p-0"
+            className="tw-p-0 flex-center"
             data-testid="owner-dropdown"
             disabled={!(permissions.EditOwner || permissions.EditAll)}
             size="small"
             type="text"
             onClick={handleSelectOwnerDropdown}>
-            <SVGIcons
-              alt="edit"
-              className="tw--mt-1"
-              icon={Icons.EDIT}
-              title="Edit"
-              width="16px"
-            />
+            <SVGIcons alt="edit" icon={Icons.EDIT} title="Edit" width="16px" />
           </ButtonAntd>
         </Tooltip>
         {listVisible && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/Card/Card.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/Card/Card.tsx
index fd08ee0f2b8..66900ebb9c4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/Card/Card.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/Card/Card.tsx
@@ -31,13 +31,13 @@ const Card = ({ children, heading, action, className }: CardProps) => {
         className
       )}
       data-testid={`${lowerCase(heading)}-card-container`}>
-      <Row className="tw-border-b tw-px-4 tw-py-3 tw-w-full">
+      <Row className="tw-border-b tw-px-4 tw-py-2 tw-w-full tw-items-center">
         <Col span={8}>
-          <span className="tw-font-semibold">{heading}</span>
+          <span className="tw-font-medium">{heading}</span>
         </Col>
         <Col offset={14}>{action}</Col>
       </Row>
-      <div className="tw-p-4">{children}</div>
+      <div className="tw-px-4 tw-py-2">{children}</div>
     </div>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index 1f6f6b32fab..afcecd52085 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
@@ -137,12 +137,15 @@ const TagsPage = () => {
     }
   };
 
-  const fetchCategories = () => {
+  const fetchCategories = (setCurrent?: boolean) => {
     setIsLoading(true);
     getTagCategories('usageCount')
       .then((res) => {
         if (res.data) {
           setCategoreis(res.data);
+          if (setCurrent) {
+            setCurrentCategory(res.data[0]);
+          }
         } else {
           throw jsonData['api-error-messages']['unexpected-server-response'];
         }
@@ -424,19 +427,21 @@ const TagsPage = () => {
   };
 
   useEffect(() => {
-    fetchCategories();
+    fetchCategories(true);
   }, []);
 
   useEffect(() => {
-    setCurrentCategory(categories[0]);
     if (currentCategory) {
-      setCurrentCategory(currentCategory);
       fetchCurrentCategoryPermission();
     }
-  }, [categories, currentCategory]);
+  }, [currentCategory]);
 
   useEffect(() => {
-    fetchCurrentCategory(tagCategoryName);
+    if (tagCategoryName) {
+      fetchCurrentCategory(tagCategoryName);
+    } else {
+      setCurrentCategory(categories[0]);
+    }
   }, [tagCategoryName]);
 
   const fetchLeftPanel = () => {
@@ -455,7 +460,7 @@ const TagsPage = () => {
                     : NO_PERMISSION_FOR_ACTION
                 }>
                 <button
-                  className="tw--mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md"
+                  className="tw--mt-1 tw-w-full tw-flex-center tw-gap-2 tw-py-1 tw-text-primary tw-border tw-rounded-md tw-text-center"
                   data-testid="add-category"
                   disabled={!createCategoryPermission}
                   onClick={() => {