moved add action to left pannel for teams and users page and allow admin to join any team even if its close (#4397)

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

@@ -34,7 +34,6 @@ import {
 } from '../../generated/entity/teams/user';
 import { useAuth } from '../../hooks/authHooks';
 import { TeamDetailsProp } from '../../interface/teamsAndUsers.interface';
-import AddUsersModal from '../../pages/teams/AddUsersModal';
 import UserCard from '../../pages/teams/UserCard';
 import { hasEditAccess } from '../../utils/CommonUtils';
 import { getInfoElements } from '../../utils/EntityUtils';
@@ -72,10 +71,7 @@ const TeamDetails = ({
   descriptionHandler,
   handleTeamUsersSearchAction,
   teamUserPaginHandler,
-  isAddingUsers,
   handleJoinTeamClick,
-  getUniqueUserList,
-  addUsersToTeam,
   handleAddUser,
   removeUserFromTeam,
 }: TeamDetailsProp) => {
@@ -524,27 +520,8 @@ const TeamDetails = ({
             data-testid="header">
             {getTeamHeading()}
             <div className="tw-flex">
-              {isActionAllowed() && (
-                <Fragment>
-                  <NonAdminAction
-                    position="bottom"
-                    title={TITLE_FOR_NON_ADMIN_ACTION}>
-                    <Button
-                      className="tw-h-8 tw-px-2"
-                      data-testid="add-teams"
-                      size="small"
-                      theme="primary"
-                      variant="outlined"
-                      onClick={() => {
-                        handleAddTeam(true);
-                      }}>
-                      Create New Team
-                    </Button>
-                  </NonAdminAction>
-                </Fragment>
-              )}
               {!isAlreadyJoinedTeam(currentTeam.id) ? (
-                currentTeam.isJoinable ? (
+                currentTeam.isJoinable || hasAccess ? (
                   <Button
                     className="tw-h-8 tw-px-2 tw-mb-4 tw-ml-2"
                     data-testid="join-teams"
@@ -672,17 +649,6 @@ const TeamDetails = ({
           onConfirm={handleRemoveUser}
         />
       )}
-
-      {isAddingUsers && (
-        <AddUsersModal
-          header={`Adding new users to ${
-            currentTeam?.displayName ?? currentTeam?.name
-          }`}
-          list={getUniqueUserList()}
-          onCancel={() => handleAddUser(false)}
-          onSave={(data) => addUsersToTeam(data)}
-        />
-      )}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/TeamsAndUsers/TeamsAndUsers.component.tsx

@@ -11,12 +11,17 @@
  *  limitations under the License.
  */
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { capitalize } from 'lodash';
 import React from 'react';
+import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants';
 import { UserType } from '../../enums/user.enum';
 import { TeamsAndUsersProps } from '../../interface/teamsAndUsers.interface';
+import AddUsersModal from '../../pages/teams/AddUsersModal';
 import { getActiveCatClass, getCountBadge } from '../../utils/CommonUtils';
 import { getActiveUsers } from '../../utils/TeamUtils';
+import { Button } from '../buttons/Button/Button';
+import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import PageLayout from '../containers/PageLayout';
 import Loader from '../Loader/Loader';
 import TeamDetails from '../TeamDetails/TeamDetails';
@@ -85,8 +90,25 @@ const TeamsAndUsers = ({
     return (
       <>
         <div className="tw-mb-8">
-          <div className="tw-mb-2 tw-border-b">
+          <div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
             <p className="tw-heading">Teams</p>
+            {hasAccess && (
+              <NonAdminAction
+                position="bottom"
+                title={TITLE_FOR_NON_ADMIN_ACTION}>
+                <Button
+                  className="tw-h-7 tw-px-2 tw-mb-4"
+                  data-testid="add-teams"
+                  size="small"
+                  theme="primary"
+                  variant="contained"
+                  onClick={() => {
+                    handleAddTeam(true);
+                  }}>
+                  <FontAwesomeIcon icon="plus" />
+                </Button>
+              </NonAdminAction>
+            )}
           </div>
           {teams.map((team) => (
             <div
@@ -116,8 +138,23 @@ const TeamsAndUsers = ({
         </div>
         {hasAccess && (
           <div>
-            <div className="tw-mb-2 tw-border-b">
+            <div className="tw-flex tw-justify-between tw-items-center tw-mb-2 tw-border-b">
               <p className="tw-heading">All Users</p>
+              {hasAccess && (
+                <NonAdminAction
+                  position="bottom"
+                  title={TITLE_FOR_NON_ADMIN_ACTION}>
+                  <Button
+                    className="tw-h-7 tw-px-2 tw-mb-4"
+                    data-testid="add-teams"
+                    size="small"
+                    theme="primary"
+                    variant="contained"
+                    onClick={handleAddNewUser}>
+                    <FontAwesomeIcon icon="plus" />
+                  </Button>
+                </NonAdminAction>
+              )}
             </div>
             {usersData.map((d) => (
               <div
@@ -156,7 +193,6 @@ const TeamsAndUsers = ({
           data-testid="team-and-user-container">
           {!isTeamVisible ? (
             <UserDetails
-              handleAddNewUser={handleAddNewUser}
               handleDeleteUser={handleDeleteUser}
               handleUserSearchTerm={handleUserSearchTerm}
               isUsersLoading={isUsersLoading}
@@ -165,21 +201,18 @@ const TeamsAndUsers = ({
             />
           ) : (
             <TeamDetails
-              addUsersToTeam={addUsersToTeam}
               createNewTeam={createNewTeam}
               currentTeam={currentTeam}
               currentTeamUserPage={currentTeamUserPage}
               currentTeamUsers={currentTeamUsers}
               descriptionHandler={descriptionHandler}
               errorNewTeamData={errorNewTeamData}
-              getUniqueUserList={getUniqueUserList}
               handleAddTeam={handleAddTeam}
               handleAddUser={handleAddUser}
               handleJoinTeamClick={handleJoinTeamClick}
               handleTeamUsersSearchAction={handleTeamUsersSearchAction}
               hasAccess={hasAccess}
               isAddingTeam={isAddingTeam}
-              isAddingUsers={isAddingUsers}
               isDescriptionEditable={isDescriptionEditable}
               isTeamMemberLoading={isTeamMemberLoading}
               removeUserFromTeam={removeUserFromTeam}
@@ -194,6 +227,17 @@ const TeamsAndUsers = ({
           )}
         </div>
       )}
+
+      {isAddingUsers && (
+        <AddUsersModal
+          header={`Adding new users to ${
+            currentTeam?.displayName ?? currentTeam?.name
+          }`}
+          list={getUniqueUserList()}
+          onCancel={() => handleAddUser(false)}
+          onSave={(data) => addUsersToTeam(data)}
+        />
+      )}
     </PageLayout>
   );
 };

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

@@ -14,15 +14,10 @@
 import { isUndefined } from 'lodash';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import {
-  getUserPath,
-  TITLE_FOR_NON_ADMIN_ACTION,
-} from '../../constants/constants';
+import { getUserPath } from '../../constants/constants';
 import { EntityReference, User } from '../../generated/entity/teams/user';
 import { getEntityName } from '../../utils/CommonUtils';
-import { Button } from '../buttons/Button/Button';
 import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
-import NonAdminAction from '../common/non-admin-action/NonAdminAction';
 import Searchbar from '../common/searchbar/Searchbar';
 import Loader from '../Loader/Loader';
 import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal';
@@ -34,7 +29,6 @@ type UserDetailsProps = {
   userSearchTerm: string;
   isUsersLoading: boolean;
   handleDeleteUser: (id: string) => void;
-  handleAddNewUser: () => void;
 };
 
 interface DeleteUserInfo {
@@ -48,7 +42,6 @@ const UserDetails = ({
   isUsersLoading,
   handleDeleteUser,
   handleUserSearchTerm,
-  handleAddNewUser,
 }: UserDetailsProps) => {
   const history = useHistory();
   const [deletingUser, setDeletingUser] = useState<DeleteUserInfo>();
@@ -130,19 +123,6 @@ const UserDetails = ({
             onSearch={handleUserSearchTerm}
           />
         </div>
-        <div>
-          <NonAdminAction position="bottom" title={TITLE_FOR_NON_ADMIN_ACTION}>
-            <Button
-              className="tw-h-8 tw-px-2"
-              data-testid="add-teams"
-              size="small"
-              theme="primary"
-              variant="contained"
-              onClick={handleAddNewUser}>
-              Create New User
-            </Button>
-          </NonAdminAction>
-        </div>
       </div>
       {getUserCards()}
 

openmetadata-ui/src/main/resources/ui/src/interface/teamsAndUsers.interface.ts

@@ -104,9 +104,6 @@ export interface TeamDetailsProp {
     cursorValue: string | number,
     activePage?: number
   ) => void;
-  isAddingUsers: boolean;
-  getUniqueUserList: () => Array<UserTeams>;
-  addUsersToTeam: (data: Array<UserTeams>) => void;
   handleAddUser: (data: boolean) => void;
   removeUserFromTeam: (id: string) => Promise<void>;
   handleJoinTeamClick: (id: string, data: Operation[]) => void;