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

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"
+      />
+    ),
   },
 ];
 

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"
+      />
+    ),
   },
 ];

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)}
+            {item.icon}
-            title={item.name as string}>
+            <p
-            {item.name}
+              className={classNames('tw-truncate', widthClass)}
-          </p>
+              title={item.name as string}>
+              {item.name}
+            </p>
+          </>
         )}
       </div>
     );