fix(ui): Eliminating signup page error (#6471)

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

@@ -20,6 +20,7 @@ import { Team } from '../../generated/entity/teams/team';
 import { EntityReference } from '../../generated/type/entityReference';
 import { formatTeamsResponse } from '../../utils/APIUtils';
 import { getEntityName } from '../../utils/CommonUtils';
+import SVGIcons from '../../utils/SvgUtils';
 import { reactSingleSelectCustomStyle } from '../common/react-select-component/reactSelectCustomStyle';
 
 interface CustomOption extends SelectableOption {
@@ -27,17 +28,20 @@ interface CustomOption extends SelectableOption {
 }
 
 interface Props {
+  showTeamsAlert?: boolean;
   onSelectionChange: (teams: string[]) => void;
   filterJoinable?: boolean;
   placeholder?: string;
 }
 
 const TeamsSelectable = ({
+  showTeamsAlert,
   onSelectionChange,
   filterJoinable,
   placeholder = 'Search for teams',
 }: Props) => {
   const [teamSearchText, setTeamSearchText] = useState<string>('');
+  const [noTeam, setNoTeam] = useState<boolean>(false);
 
   const handleSelectionChange = (selectedOptions: SelectableOption[]) => {
     onSelectionChange(selectedOptions.map((option) => option.value));
@@ -72,6 +76,7 @@ const TeamsSelectable = ({
         }).then((res) => {
           const teams: Team[] =
             res.hits.hits.map((t: { _source: Team }) => t._source) || [];
+          showTeamsAlert && setNoTeam(teams.length === 0);
           resolve(getOptions(teams));
         });
       }
@@ -79,26 +84,40 @@ const TeamsSelectable = ({
   };
 
   return (
-    <AsyncSelect
-      cacheOptions
-      defaultOptions
-      isClearable
-      isMulti
-      aria-label="Select teams"
-      components={{
-        DropdownIndicator: null,
-      }}
-      inputValue={teamSearchText}
-      isOptionDisabled={(option) => !!(option as CustomOption).isDisabled}
-      loadOptions={loadOptions}
-      maxMenuHeight={200}
-      placeholder={placeholder}
-      styles={reactSingleSelectCustomStyle}
-      onChange={(value) => handleSelectionChange(value as SelectableOption[])}
-      onInputChange={(newText) => {
-        setTeamSearchText(newText);
-      }}
-    />
+    <>
+      <AsyncSelect
+        cacheOptions
+        defaultOptions
+        isClearable
+        isMulti
+        aria-label="Select teams"
+        components={{
+          DropdownIndicator: null,
+        }}
+        inputValue={teamSearchText}
+        isOptionDisabled={(option) => !!(option as CustomOption).isDisabled}
+        loadOptions={loadOptions}
+        maxMenuHeight={200}
+        placeholder={placeholder}
+        styles={reactSingleSelectCustomStyle}
+        onChange={(value) => handleSelectionChange(value as SelectableOption[])}
+        onInputChange={(newText) => {
+          setTeamSearchText(newText);
+        }}
+      />
+      {noTeam && (
+        <div
+          className="tw-notification tw-bg-info 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="info" title="Info" width="16px" />
+          </div>
+          <div className="tw-font-semibold tw-px-1">
+            There is no team available.
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 

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

@@ -14,11 +14,10 @@
 import { AxiosError, AxiosResponse } from 'axios';
 import { CookieStorage } from 'cookie-storage';
 import { UserProfile } from 'Models';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import appState from '../../AppState';
 import { getLoggedInUserPermissions } from '../../axiosAPIs/miscAPI';
-import { getTeams } from '../../axiosAPIs/teamsAPI';
 import { createUser } from '../../axiosAPIs/userAPI';
 import { Button } from '../../components/buttons/Button/Button';
 import PageContainer from '../../components/containers/PageContainer';
@@ -43,14 +42,9 @@ const Signup = () => {
     name: getNameFromEmail(appState.newUser.email),
     email: appState.newUser.email || '',
   });
-  const [countTeams, setCountTeams] = useState<number>(0);
 
   const history = useHistory();
 
-  const setTeamCount = (count = 0) => {
-    setCountTeams(count);
-  };
-
   const getUserPermissions = () => {
     getLoggedInUserPermissions()
       .then((res: AxiosResponse) => {
@@ -118,24 +112,6 @@ const Signup = () => {
     }
   };
 
-  useEffect(() => {
-    getTeams('', 0)
-      .then((res) => {
-        if (res.data) {
-          setTeamCount(res.data.paging?.total || 0);
-        } else {
-          throw jsonData['api-error-messages']['unexpected-server-response'];
-        }
-      })
-      .catch((err: AxiosError) => {
-        showErrorToast(
-          err,
-          jsonData['api-error-messages']['unexpected-server-response']
-        );
-        setTeamCount(0);
-      });
-  }, []);
-
   return (
     <>
       {!loading && (
@@ -222,26 +198,9 @@ const Signup = () => {
                     </label>
                     <TeamsSelectable
                       filterJoinable
+                      showTeamsAlert
                       onSelectionChange={setSelectedTeams}
                     />
-
-                    {countTeams === 0 ? (
-                      <div
-                        className="tw-notification tw-bg-info 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="info"
-                            title="Info"
-                            width="16px"
-                          />
-                        </div>
-                        <div className="tw-font-semibold tw-px-1">
-                          There is no team available.
-                        </div>
-                      </div>
-                    ) : null}
                   </div>
                   <div className="tw-flex tw-my-7 tw-justify-end">
                     <Button