From ec41f7be155b6b878b8a03f8f1abd364e28183ae Mon Sep 17 00:00:00 2001
From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com>
Date: Tue, 9 Aug 2022 18:19:17 +0530
Subject: [PATCH] Feat(UI): Added announcement filter option for activity
 feeds. (#6669)

* Added announcement filter option in thread filter dropdown for activity feeds

* Added alt props for icons and minor improvement in dropdownlist
---
 .../ActivityFeedList.util.tsx                 | 70 +++++++++++++++++--
 .../ui/src/components/Users/Users.util.tsx    | 27 ++++++-
 .../src/components/dropdown/DropDownList.tsx  | 13 ++--
 3 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.util.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.util.tsx
index 38fa76db504..a7341b33ca7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.util.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.util.tsx
@@ -5,22 +5,50 @@ export const filterList = [
   {
     name: 'All Activity',
     value: 'ALL',
-    icon: <SVGIcons alt="" icon={Icons.ALL_APPLICATION} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="All Activity"
+        className="tw-mr-2"
+        icon={Icons.ALL_APPLICATION}
+        width="16px"
+      />
+    ),
   },
   {
     name: 'My Data',
     value: 'OWNER',
-    icon: <SVGIcons alt="" icon={Icons.FOLDER} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="My Data"
+        className="tw-mr-2"
+        icon={Icons.FOLDER}
+        width="16px"
+      />
+    ),
   },
   {
     name: 'Mentions',
     value: 'MENTIONS',
-    icon: <SVGIcons alt="" icon={Icons.MENTIONS} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="Mentions"
+        className="tw-mr-2"
+        icon={Icons.MENTIONS}
+        width="16px"
+      />
+    ),
   },
   {
     name: 'Following',
     value: 'FOLLOWS',
-    icon: <SVGIcons alt="" icon={Icons.STAR} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="Following"
+        className="tw-mr-2"
+        icon={Icons.STAR}
+        width="16px"
+      />
+    ),
   },
 ];
 
@@ -28,17 +56,45 @@ export const threadFilterList = [
   {
     name: 'All Threads',
     value: 'ALL',
-    icon: <SVGIcons alt="" icon={Icons.ALL_APPLICATION} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="All Threads"
+        className="tw-mr-2"
+        icon={Icons.ALL_APPLICATION}
+        width="16px"
+      />
+    ),
   },
   {
     name: 'Task',
     value: 'Task',
-    icon: <SVGIcons alt="" icon={Icons.TASK} width="16px" />,
+    icon: (
+      <SVGIcons alt="Task" className="tw-mr-2" icon={Icons.TASK} width="16px" />
+    ),
   },
   {
     name: 'Conversation',
     value: 'Conversation',
-    icon: <SVGIcons alt="" icon={Icons.COMMENT_GREY} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="Conversation"
+        className="tw-mr-2"
+        icon={Icons.COMMENT_GREY}
+        width="16px"
+      />
+    ),
+  },
+  {
+    name: 'Announcement',
+    value: 'Announcement',
+    icon: (
+      <SVGIcons
+        alt="Announcement"
+        className="tw-mr-2"
+        icon={Icons.ANNOUNCEMENT_BLACK}
+        width="16px"
+      />
+    ),
   },
 ];
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx
index 4344450ecd5..e35b9cb5ad4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.util.tsx
@@ -5,16 +5,37 @@ export const userPageFilterList = [
   {
     name: 'My Data',
     value: 'OWNER',
-    icon: <SVGIcons alt="" icon={Icons.FOLDER} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="My Data"
+        className="tw-mr-2"
+        icon={Icons.FOLDER}
+        width="16px"
+      />
+    ),
   },
   {
     name: 'Mentions',
     value: 'MENTIONS',
-    icon: <SVGIcons alt="" icon={Icons.MENTIONS} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="Mentions"
+        className="tw-mr-2"
+        icon={Icons.MENTIONS}
+        width="16px"
+      />
+    ),
   },
   {
     name: 'Following',
     value: 'FOLLOWS',
-    icon: <SVGIcons alt="" icon={Icons.STAR} width="16px" />,
+    icon: (
+      <SVGIcons
+        alt="Following"
+        className="tw-mr-2"
+        icon={Icons.STAR}
+        width="16px"
+      />
+    ),
   },
 ];
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
index db162165e32..98af2344720 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
@@ -121,11 +121,14 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
         {item.type === 'user' ? (
           <UserTag id={item.value as string} name={item.name as string} />
         ) : (
-          <p
-            className={classNames('tw-truncate', widthClass)}
-            title={item.name as string}>
-            {item.name}
-          </p>
+          <>
+            {item.icon}
+            <p
+              className={classNames('tw-truncate', widthClass)}
+              title={item.name as string}>
+              {item.name}
+            </p>
+          </>
         )}
       </div>
     );