Fix issue 5955 non-joinable team also visible at the time of signup (#5957)

* Fix issue 5955 non-joinable team also visible at the time of signup

* miner fix for submit button

* Fix issue 5960 Teams and users page shows no team available even if team is available

* addressing comment

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

@@ -17,7 +17,8 @@ import AsyncSelect from 'react-select/async';
 import { getSuggestedTeams } from '../../axiosAPIs/miscAPI';
 import { getTeams } from '../../axiosAPIs/teamsAPI';
 import { PAGE_SIZE } from '../../constants/constants';
-import { EntityReference as UserTeams } from '../../generated/entity/teams/user';
+import { Team } from '../../generated/entity/teams/team';
+import { EntityReference } from '../../generated/type/entityReference';
 import { formatTeamsResponse } from '../../utils/APIUtils';
 import { getEntityName } from '../../utils/CommonUtils';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
@@ -37,27 +38,28 @@ const TeamsSelectable = ({ onSelectionChange }: Props) => {
     onSelectionChange(selectedOptions.map((option) => option.value));
   };
 
+  const getOptions = (teams: Team[]) => {
+    return teams
+      .filter((team) => team.isJoinable)
+      .map((team) => ({
+        label: getEntityName(team as EntityReference),
+        value: team.id,
+      }));
+  };
+
   const loadOptions = (text: string) => {
     return new Promise<SelectableOption[]>((resolve) => {
       if (text) {
         getSuggestedTeams(text).then((res) => {
-          const teams: UserTeams[] = formatTeamsResponse(
+          const teams: Team[] = formatTeamsResponse(
             res.data.suggest['metadata-suggest'][0].options
           );
-          const options = teams.map((team) => ({
-            label: getEntityName(team),
-            value: team.id,
-          }));
-          resolve(options);
+          resolve(getOptions(teams));
         });
       } else {
         getTeams('', PAGE_SIZE).then((res) => {
-          const teams: UserTeams[] = res.data.data || [];
-          const options = teams.map((team) => ({
-            label: getEntityName(team),
-            value: team.id,
-          }));
-          resolve(options);
+          const teams: Team[] = res.data.data || [];
+          resolve(getOptions(teams));
         });
       }
     });

openmetadata-ui/src/main/resources/ui/src/pages/TeamsAndUsersPage/TeamsAndUsersPage.component.tsx

@@ -283,7 +283,16 @@ const TeamsAndUsersPage = () => {
             setCurrentTeam(res.data.data[0]);
             setIsRightPanelLoading(false);
           } else {
-            setCurrentTeam({} as Team);
+            const team = res.data.data.find(
+              (t: Team) =>
+                t.name === teamAndUser || t.displayName === teamAndUser
+            );
+            if (!isUndefined(team)) {
+              getCurrentTeamUsers(team.name);
+              setCurrentTeam(team);
+            } else {
+              setCurrentTeam({} as Team);
+            }
           }
           setTeams(res.data.data);
           AppState.updateUserTeam(res.data.data);

openmetadata-ui/src/main/resources/ui/src/pages/signup/index.tsx

@@ -12,7 +12,6 @@
  */
 
 import { AxiosError, AxiosResponse } from 'axios';
-import classNames from 'classnames';
 import { CookieStorage } from 'cookie-storage';
 import { UserProfile } from 'Models';
 import React, { useEffect, useState } from 'react';
@@ -45,7 +44,6 @@ const Signup = () => {
     email: appState.newUser.email || '',
   });
   const [countTeams, setCountTeams] = useState<number>(0);
-  const [teamError, setTeamError] = useState<boolean>(false);
 
   const history = useHistory();
 
@@ -109,43 +107,17 @@ const Signup = () => {
 
   const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (countTeams) {
-      setTeamError(!selectedTeams.length);
-      if (details.name && details.displayName && selectedTeams.length > 0) {
-        createNewUser({
-          ...details,
-          teams: selectedTeams as Array<string>,
-          profile: {
-            images: getImages(appState.newUser.picture ?? ''),
-          },
-        });
-      }
-    } else {
-      if (details.name && details.displayName) {
-        createNewUser({
-          ...details,
-          teams: selectedTeams as Array<string>,
-          profile: {
-            images: getImages(appState.newUser.picture ?? ''),
-          },
-        });
-      }
+    if (details.name && details.displayName) {
+      createNewUser({
+        ...details,
+        teams: selectedTeams as Array<string>,
+        profile: {
+          images: getImages(appState.newUser.picture ?? ''),
+        },
+      });
     }
   };
 
-  const errorMsg = (value: string) => {
-    return (
-      <div
-        className="tw-notification tw-bg-error tw-mt-2 tw-justify-start tw-w-full tw-p-2"
-        data-testid="toast">
-        <div className="tw-font-semibold tw-flex-shrink-0">
-          <SVGIcons alt="info" icon="error" title="Info" width="16px" />
-        </div>
-        <div className="tw-font-semibold tw-px-1">{value}</div>
-      </div>
-    );
-  };
-
   useEffect(() => {
     getTeams('', 0)
       .then((res) => {
@@ -163,11 +135,6 @@ const Signup = () => {
         setTeamCount(0);
       });
   }, []);
-  useEffect(() => {
-    if (selectedTeams.length) {
-      setTeamError(false);
-    }
-  }, [selectedTeams]);
 
   return (
     <>
@@ -250,17 +217,11 @@ const Signup = () => {
                     />
                   </div>
                   <div className="tw-mb-4">
-                    <label
-                      className={classNames(
-                        'tw-block tw-text-body tw-text-grey-body tw-mb-2',
-                        {
-                          'required-field': countTeams,
-                        }
-                      )}>
+                    <label className="tw-block tw-text-body tw-text-grey-body tw-mb-2">
                       Select teams
                     </label>
                     <TeamsSelectable onSelectionChange={setSelectedTeams} />
-                    {teamError && errorMsg('Atleast one team is required')}
+
                     {countTeams === 0 ? (
                       <div
                         className="tw-notification tw-bg-info tw-mt-2 tw-justify-start tw-w-full tw-p-2"

openmetadata-ui/src/main/resources/ui/src/utils/APIUtils.js

@@ -73,6 +73,7 @@ export const formatTeamsResponse = (hits) => {
       displayName: d._source.displayName,
       type: d._source.entityType,
       id: d._source.id,
+      isJoinable: d._source.isJoinable,
     };
   });
 };