Fixed : Add bots tab to group users with isBot set to true. (#2210)

openmetadata-ui/src/main/resources/ui/src/components/Modals/UserDetailsModal/UserDetailsModal.tsx

@@ -81,7 +81,7 @@ const UserDetailsModal = ({
               Role: {userData.isAdmin ? 'Admin' : 'User'}
             </p>
             {userData.teams && <div className="tw-filter-seperator tw-w-5/6" />}
-            <p className="tw-w-4/5 tw-mx-auto">
+            <div className="tw-w-4/5 tw-mx-auto">
               <span className="tw-flex tw-justify-center tw-flex-wrap">
                 {userData.teams && userData.teams.length > 0 ? (
                   userData.teams.map((team, i) => (
@@ -95,7 +95,7 @@ const UserDetailsModal = ({
                   <p>This user is not a part of any team!</p>
                 )}
               </span>
-            </p>
+            </div>
           </div>
         </div>
         <div className="tw-modal-footer" data-testid="cta-container">

openmetadata-ui/src/main/resources/ui/src/components/UserList/UserList.tsx

@@ -16,6 +16,7 @@ import { isUndefined, lowerCase } from 'lodash';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import PageLayout from '../../components/containers/PageLayout';
 import Loader from '../../components/Loader/Loader';
+import { UserType } from '../../enums/user.enum';
 import { Team } from '../../generated/entity/teams/team';
 import { User } from '../../generated/entity/teams/user';
 import { getCountBadge } from '../../utils/CommonUtils';
@@ -39,19 +40,60 @@ const UserList: FunctionComponent<Props> = ({
   const [userList, setUserList] = useState<Array<User>>(allUsers);
   const [users, setUsers] = useState<Array<User>>([]);
   const [admins, setAdmins] = useState<Array<User>>([]);
+  const [bots, setBots] = useState<Array<User>>([]);
   const [currentTeam, setCurrentTeam] = useState<Team>();
   const [currentTab, setCurrentTab] = useState<number>(1);
   const [selectedUser, setSelectedUser] = useState<User>();
   const [searchText, setSearchText] = useState('');
 
-  if (selectedUser) {
-    selectedUser;
-  }
-
   const handleSearchAction = (searchValue: string) => {
     setSearchText(searchValue);
   };
 
+  const isIncludes = (name: string) => {
+    return lowerCase(name).includes(searchText);
+  };
+
+  const setCurrentTabList = (tab: number) => {
+    switch (tab) {
+      case 2:
+        setAdmins(
+          userList.filter(
+            (user) => user.isAdmin && isIncludes(user.displayName || user.name)
+          )
+        );
+
+        break;
+
+      case 3:
+        setBots(
+          userList.filter(
+            (user) => user.isBot && isIncludes(user.displayName || user.name)
+          )
+        );
+
+        break;
+      case 1:
+      default:
+        setUsers(
+          userList.filter(
+            (user) =>
+              !user.isAdmin &&
+              !user.isBot &&
+              isIncludes(user.displayName || user.name)
+          )
+        );
+
+        break;
+    }
+  };
+
+  const setAllTabList = () => {
+    setUsers(userList.filter((user) => !user.isAdmin && !user.isBot));
+    setAdmins(userList.filter((user) => user.isAdmin));
+    setBots(userList.filter((user) => user.isBot));
+  };
+
   const selectTeam = (team?: Team) => {
     setCurrentTeam(team);
     if (team) {
@@ -106,11 +148,7 @@ const UserList: FunctionComponent<Props> = ({
   const handleTabChange = (tab: number) => {
     setSearchText('');
     setCurrentTab(tab);
-    if (tab === 1) {
+    setAllTabList();
-      setAdmins(userList.filter((user) => user.isAdmin));
-    } else {
-      setUsers(userList.filter((user) => !user.isAdmin));
-    }
   };
 
   const getTabs = () => {
@@ -138,6 +176,15 @@ const UserList: FunctionComponent<Props> = ({
               Admins
               {getCountBadge(admins.length, '', currentTab === 2)}
             </button>
+            <button
+              className={`tw-pb-2 tw-px-4 tw-gh-tabs ${getActiveTabClass(3)}`}
+              data-testid="assets"
+              onClick={() => {
+                handleTabChange(3);
+              }}>
+              Bots
+              {getCountBadge(bots.length, '', currentTab === 3)}
+            </button>
           </div>
           <div className="tw-w-4/12 tw-pt-2">
             <Searchbar
@@ -154,42 +201,23 @@ const UserList: FunctionComponent<Props> = ({
   };
 
   useEffect(() => {
-    setUsers(userList.filter((user) => !user.isAdmin));
+    setAllTabList();
-    setAdmins(userList.filter((user) => user.isAdmin));
   }, [userList]);
 
   useEffect(() => {
-    if (!currentTeam) {
+    if (currentTeam) {
+      const userIds = (currentTeam.users || []).map((userData) => userData.id);
+      const filteredUsers = allUsers.filter((user) =>
+        userIds.includes(user.id)
+      );
+      setUserList(filteredUsers);
+    } else {
       setUserList(allUsers);
     }
   }, [allUsers]);
 
-  const isIncludes = (name: string) => {
-    return lowerCase(name).includes(searchText);
-  };
-
   useEffect(() => {
-    if (currentTab === 1) {
+    setCurrentTabList(currentTab);
-      setUsers(
-        userList.filter((user) => {
-          if (!user.isAdmin && isIncludes(user.displayName || user.name)) {
-            return true;
-          }
-
-          return false;
-        })
-      );
-    } else {
-      setAdmins(
-        userList.filter((user) => {
-          if (user.isAdmin && isIncludes(user.displayName || user.name)) {
-            return true;
-          }
-
-          return false;
-        })
-      );
-    }
   }, [searchText]);
 
   const getLeftPanel = () => {
@@ -236,8 +264,24 @@ const UserList: FunctionComponent<Props> = ({
     );
   };
 
-  const getUserCards = (isAdmin = false) => {
+  const getUserCards = (type: UserType) => {
-    const listUserData = isAdmin ? admins : users;
+    let listUserData: Array<User> = [];
+
+    switch (type) {
+      case UserType.ISADMIN:
+        listUserData = admins;
+
+        break;
+      case UserType.ISBOT:
+        listUserData = bots;
+
+        break;
+      case UserType.ISUSER:
+      default:
+        listUserData = users;
+
+        break;
+    }
 
     return (
       <>
@@ -269,8 +313,9 @@ const UserList: FunctionComponent<Props> = ({
       {!isLoading ? (
         <>
           {getTabs()}
-          {currentTab === 1 && getUserCards()}
+          {currentTab === 1 && getUserCards(UserType.ISUSER)}
-          {currentTab === 2 && getUserCards(true)}
+          {currentTab === 2 && getUserCards(UserType.ISADMIN)}
+          {currentTab === 3 && getUserCards(UserType.ISBOT)}
           {!isUndefined(selectedUser) && (
             <UserDetailsModal
               header="User Details"

openmetadata-ui/src/main/resources/ui/src/enums/user.enum.ts

@@ -0,0 +1,18 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+export enum UserType {
+  ISBOT = 'isBot',
+  ISADMIN = 'isAdmin',
+  ISUSER = 'user',
+}