Fix: Fixing UI Bugs #2203 #2204 #2205 #2191 #2097 (#2214)

* Fix: Fixing UI Bugs  #2203 #2204 #2205 #2191

* Fixing #2097

openmetadata-ui/src/main/resources/ui/src/AppState.ts

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { makeAutoObservable } from 'mobx';
+import { action, makeAutoObservable, observable } from 'mobx';
 import { ClientAuth, NewUser } from 'Models';
 import { CurrentTourPageType } from './enums/tour.enum';
 import {
@@ -40,7 +40,26 @@ class AppState {
   activeTabforTourDatasetPage = 1;
 
   constructor() {
-    makeAutoObservable(this);
+    makeAutoObservable(this, {
+      users: observable,
+      newUser: observable,
+      authDisabled: observable,
+      authProvider: observable,
+      userDetails: observable,
+      userTeams: observable,
+
+      inPageSearchText: observable,
+      explorePageTab: observable,
+
+      isTourOpen: observable,
+      currentTourPage: observable,
+      activeTabforTourDatasetPage: observable,
+      updateUserTeam: action,
+    });
+  }
+
+  updateUserTeam(data: Array<UserTeams>) {
+    this.userTeams = data;
   }
 }
 

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

@@ -43,15 +43,7 @@ const ManageTab: FunctionComponent<Props> = ({
   onSave,
   hasEditAccess,
 }: Props) => {
-  const [loading, setLoading] = useState<boolean>(false);
-  const [status, setStatus] = useState<'initial' | 'waiting' | 'success'>(
-    'initial'
-  );
-  const [activeTier, setActiveTier] = useState(currentTier);
-  const [listVisible, setListVisible] = useState(false);
-
-  const [tierData, setTierData] = useState<Array<CardWithListItems>>([]);
-  const [listOwners] = useState(() => {
+  const getOwnerList = () => {
     const user = !isEmpty(appState.userDetails)
       ? appState.userDetails
       : appState.users.length
@@ -103,7 +95,16 @@ const ManageTab: FunctionComponent<Props> = ({
           ]
         : teams;
     }
-  });
+  };
+  const [loading, setLoading] = useState<boolean>(false);
+  const [status, setStatus] = useState<'initial' | 'waiting' | 'success'>(
+    'initial'
+  );
+  const [activeTier, setActiveTier] = useState(currentTier);
+  const [listVisible, setListVisible] = useState(false);
+
+  const [tierData, setTierData] = useState<Array<CardWithListItems>>([]);
+  const [listOwners, setListOwners] = useState(getOwnerList());
   const [owner, setOwner] = useState(currentUser);
   const [isLoadingTierData, setIsLoadingTierData] = useState<boolean>(false);
 
@@ -204,6 +205,10 @@ const ManageTab: FunctionComponent<Props> = ({
     }
   }, [currentTier, currentUser]);
 
+  useEffect(() => {
+    setListOwners(getOwnerList());
+  }, [appState.users, appState.userDetails, appState.userTeams]);
+
   return (
     <div
       className="tw-max-w-3xl tw-mx-auto"

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

@@ -113,6 +113,8 @@ const TagsPage = () => {
         )
       ) {
         errData['name'] = 'Name already exists';
+      } else if (data.name.length < 2 || data.name.length > 25) {
+        errData['name'] = 'Name size must be between 2 and 25';
       }
       setErrorDataCategory(errData);
 

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

@@ -76,6 +76,7 @@ const TeamsPage = () => {
           setCurrentTeam(res.data.data[0]);
         }
         setTeams(res.data.data);
+        AppState.updateUserTeam(res.data.data);
       })
       .catch((err: AxiosError) => {
         if (err?.response?.data.code) {
@@ -339,7 +340,9 @@ const TeamsPage = () => {
               onClick={() => {
                 changeCurrentTeam(team.name);
               }}>
-              <p className="tw-text-center tag-category label-category tw-self-center">
+              <p
+                className="tw-text-center tag-category label-category tw-self-center tw-truncate"
+                title={team.displayName}>
                 {team.displayName}
               </p>
             </div>

openmetadata-ui/src/main/resources/ui/src/utils/UsedDataUtils.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { AxiosResponse } from 'axios';
 import AppState from '../AppState';
 import { getTeams } from '../axiosAPIs/teamsAPI';
 import { getUsers } from '../axiosAPIs/userAPI';
@@ -24,7 +25,7 @@ const getAllUsersList = (arrQueryFields = ''): void => {
 };
 
 const getAllTeams = (): void => {
-  getTeams().then((res) => {
+  getTeams().then((res: AxiosResponse) => {
     AppState.userTeams = res.data.data;
   });
 };