From 60a28ffef62a237cde1ea48ca05a6842f6139ba1 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 14 Jan 2022 19:10:27 +0530
Subject: [PATCH] Fix: Fixing UI Bugs  #2203 #2204 #2205 #2191 #2097 (#2214)

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

* Fixing #2097
---
 .../src/main/resources/ui/src/AppState.ts     | 23 +++++++++++++++--
 .../ManageTab/ManageTab.component.tsx         | 25 +++++++++++--------
 .../resources/ui/src/pages/tags/index.tsx     |  2 ++
 .../resources/ui/src/pages/teams/index.tsx    |  5 +++-
 .../resources/ui/src/utils/UsedDataUtils.ts   |  3 ++-
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/AppState.ts b/openmetadata-ui/src/main/resources/ui/src/AppState.ts
index f4011838437..799e767b0a2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/AppState.ts
+++ b/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;
   }
 }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ManageTab/ManageTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ManageTab/ManageTab.component.tsx
index 7c1bdbca5b9..ce95a9ac022 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ManageTab/ManageTab.component.tsx
+++ b/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"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
index bd3420032b4..bb543e012ec 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/tags/index.tsx
+++ b/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);
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
index 7f9bbe58e26..f219c946d31 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/index.tsx
+++ b/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>
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/UsedDataUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/UsedDataUtils.ts
index 69c73c28871..0f84930f800 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/UsedDataUtils.ts
+++ b/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;
   });
 };