Fix UI Error Handling on Topic entity page (#3615)

openmetadata-ui/src/main/resources/ui/src/jsons/en.ts

@@ -41,6 +41,7 @@ const jsonData = {
     'fetch-table-details-error': 'Error while fetching table details!',
     'fetch-table-queries-error': 'Error while fetching table queries!',
     'fetch-tags-error': 'Error while fetching tags!',
+    'fetch-topic-details-error': 'Error while fetching topic details!',
 
     'update-owner-error': 'Error while updating owner',
 

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

@@ -585,8 +585,6 @@ const DatasetDetailsPage: FunctionComponent = () => {
     });
   };
 
-  // TODO: move all the error from below code to en.ts and use handleShowErrorToast to show error.
-
   const followTable = () => {
     addFollower(tableId, USERId)
       .then((res: AxiosResponse) => {

openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.component.tsx

@@ -44,11 +44,6 @@ import {
   getTopicDetailsPath,
   getVersionPath,
 } from '../../constants/constants';
-import {
-  onConfirmText,
-  onErrorText,
-  onUpdatedConversastionError,
-} from '../../constants/feed.constants';
 import { EntityType, TabSpecificField } from '../../enums/entity.enum';
 import { ServiceCategory } from '../../enums/service.enum';
 import { CreateThread } from '../../generated/api/feed/createThread';
@@ -56,6 +51,7 @@ import { Topic } from '../../generated/entity/data/topic';
 import { User } from '../../generated/entity/teams/user';
 import { TagLabel } from '../../generated/type/tagLabel';
 import useToastContext from '../../hooks/useToastContext';
+import jsonData from '../../jsons/en';
 import {
   addToRecentViewed,
   getCurrentUserId,
@@ -121,13 +117,38 @@ const TopicDetailsPage: FunctionComponent = () => {
     }
   };
 
+  const handleShowErrorToast = (errMessage: string) => {
+    showToast({
+      variant: 'error',
+      body: errMessage,
+    });
+  };
+
+  const handleShowSuccessToast = (message: string) => {
+    showToast({
+      variant: 'success',
+      body: message,
+    });
+  };
+
   const getEntityFeedCount = () => {
-    getFeedCount(getEntityFeedLink(EntityType.TOPIC, topicFQN)).then(
+    getFeedCount(getEntityFeedLink(EntityType.TOPIC, topicFQN))
-      (res: AxiosResponse) => {
+      .then((res: AxiosResponse) => {
+        if (res.data) {
           setFeedCount(res.data.totalCount);
           setEntityFieldThreadCount(res.data.counts);
-      }
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['fetch-entity-feed-count-error']
           );
+        }
+      })
+      .catch((err: AxiosError) => {
+        const errMsg =
+          err.response?.data?.message ||
+          jsonData['api-error-messages']['fetch-entity-feed-count-error'];
+        handleShowErrorToast(errMsg);
+      });
   };
 
   const fetchActivityFeed = () => {
@@ -135,26 +156,23 @@ const TopicDetailsPage: FunctionComponent = () => {
     getAllFeeds(getEntityFeedLink(EntityType.TOPIC, topicFQN))
       .then((res: AxiosResponse) => {
         const { data } = res.data;
+        if (data) {
           setEntityThread(data);
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['fetch-entity-feed-error']
+          );
+        }
       })
-      .catch(() => {
+      .catch((err: AxiosError) => {
-        showToast({
+        const errMsg =
-          variant: 'error',
+          err.response?.data?.message ||
-          body: 'Error while fetching entity feeds',
+          jsonData['api-error-messages']['fetch-entity-feed-error'];
-        });
+        handleShowErrorToast(errMsg);
       })
       .finally(() => setIsentityThreadLoading(false));
   };
 
-  useEffect(() => {
-    if (topicDetailsTabs[activeTab - 1].path !== tab) {
-      setActiveTab(getCurrentTopicTab(tab));
-    }
-    if (TabSpecificField.ACTIVITY_FEED === tab) {
-      fetchActivityFeed();
-    }
-  }, [tab]);
-
   const saveUpdatedTopicData = (updatedData: Topic): Promise<AxiosResponse> => {
     const jsonPatch = compare(topicDetails, updatedData);
 
@@ -168,6 +186,7 @@ const TopicDetailsPage: FunctionComponent = () => {
     setLoading(true);
     getTopicByFqn(topicFQN, ['owner', 'followers', 'tags'])
       .then((res: AxiosResponse) => {
+        if (res.data) {
           const {
             id,
             deleted,
@@ -229,19 +248,24 @@ const TopicDetailsPage: FunctionComponent = () => {
             serviceType: serviceType,
             timestamp: 0,
           });
-        setLoading(false);
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['fetch-table-details-error']
+          );
+          setIsError(true);
+        }
       })
       .catch((err: AxiosError) => {
         if (err.response?.status === 404) {
           setIsError(true);
         } else {
-          const errMsg = err.message || 'Error while fetching topic details';
+          const errMsg =
-          showToast({
+            err.response?.data?.message ||
-            variant: 'error',
+            jsonData['api-error-messages']['fetch-topic-details-error'];
-            body: errMsg,
+          handleShowErrorToast(errMsg);
-          });
         }
-
+      })
+      .finally(() => {
         setLoading(false);
       });
   };
@@ -249,54 +273,67 @@ const TopicDetailsPage: FunctionComponent = () => {
   const followTopic = () => {
     addFollower(topicId, USERId)
       .then((res: AxiosResponse) => {
+        if (res.data) {
           const { newValue } = res.data.changeDescription.fieldsAdded[0];
 
           setFollowers([...followers, ...newValue]);
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['update-entity-follow-error']
+          );
+        }
       })
       .catch((err: AxiosError) => {
         const errMsg =
-          err.response?.data.message || 'Error while following entity.';
+          err.response?.data?.message ||
-        showToast({
+          jsonData['api-error-messages']['update-entity-follow-error'];
-          variant: 'error',
+        handleShowErrorToast(errMsg);
-          body: errMsg,
-        });
       });
   };
+
   const unfollowTopic = () => {
     removeFollower(topicId, USERId)
       .then((res: AxiosResponse) => {
+        if (res.data) {
           const { oldValue } = res.data.changeDescription.fieldsDeleted[0];
 
           setFollowers(
             followers.filter((follower) => follower.id !== oldValue[0].id)
           );
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['update-entity-unfollow-error']
+          );
+        }
       })
       .catch((err: AxiosError) => {
         const errMsg =
-          err.response?.data.message || 'Error while unfollowing entity.';
+          err.response?.data?.message ||
-        showToast({
+          jsonData['api-error-messages']['update-entity-unfollow-error'];
-          variant: 'error',
+        handleShowErrorToast(errMsg);
-          body: errMsg,
-        });
       });
   };
 
   const descriptionUpdateHandler = (updatedTopic: Topic) => {
     saveUpdatedTopicData(updatedTopic)
       .then((res: AxiosResponse) => {
+        if (res.data) {
           const { description, version } = res.data;
           setCurrentVersion(version);
           setTopicDetails(res.data);
           setDescription(description);
           getEntityFeedCount();
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['update-description-error']
+          );
+        }
       })
       .catch((err: AxiosError) => {
-        const errMsg =
+        const msg =
-          err.response?.data.message || 'Error while updating description.';
+          err.response?.data?.message ||
-        showToast({
+          jsonData['api-error-messages']['update-description-error'];
-          variant: 'error',
+        handleShowErrorToast(msg);
-          body: errMsg,
-        });
       });
   };
 
@@ -304,21 +341,25 @@ const TopicDetailsPage: FunctionComponent = () => {
     return new Promise<void>((resolve, reject) => {
       saveUpdatedTopicData(updatedTopic)
         .then((res) => {
+          if (res.data) {
             setTopicDetails(res.data);
             setCurrentVersion(res.data.version);
             setOwner(res.data.owner);
             setTier(getTierTags(res.data.tags));
             getEntityFeedCount();
             resolve();
+          } else {
+            handleShowErrorToast(
+              jsonData['api-error-messages']['update-entity-error']
+            );
+          }
         })
         .catch((err: AxiosError) => {
-          const errMsg =
+          const msg =
-            err.response?.data.message || 'Error while updating entity.';
+            err.response?.data?.message ||
+            jsonData['api-error-messages']['update-entity-error'];
+          handleShowErrorToast(msg);
           reject();
-          showToast({
-            variant: 'error',
-            body: errMsg,
-          });
         });
     });
   };
@@ -326,18 +367,22 @@ const TopicDetailsPage: FunctionComponent = () => {
   const onTagUpdate = (updatedTopic: Topic) => {
     saveUpdatedTopicData(updatedTopic)
       .then((res: AxiosResponse) => {
+        if (res.data) {
           setTier(getTierTags(res.data.tags));
           setCurrentVersion(res.data.version);
           setTags(getTagsWithoutTier(res.data.tags));
           getEntityFeedCount();
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['update-tags-error']
+          );
+        }
       })
       .catch((err: AxiosError) => {
         const errMsg =
-          err.response?.data.message || 'Error while updating tags.';
+          err.response?.data?.message ||
-        showToast({
+          jsonData['api-error-messages']['update-tags-error'];
-          variant: 'error',
+        handleShowErrorToast(errMsg);
-          body: errMsg,
-        });
       });
   };
 
@@ -367,31 +412,41 @@ const TopicDetailsPage: FunctionComponent = () => {
               }
             });
           });
+          getEntityFeedCount();
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['add-feed-error']
+          );
         }
       })
-      .catch(() => {
+      .catch((err: AxiosError) => {
-        showToast({
+        const errMsg =
-          variant: 'error',
+          err.response?.data?.message ||
-          body: 'Error while posting feed',
+          jsonData['api-error-messages']['add-feed-error'];
-        });
+        handleShowErrorToast(errMsg);
       });
   };
 
   const createThread = (data: CreateThread) => {
     postThread(data)
       .then((res: AxiosResponse) => {
+        if (res.data) {
           setEntityThread((pre) => [...pre, res.data]);
           getEntityFeedCount();
-        showToast({
+          handleShowSuccessToast(
-          variant: 'success',
+            jsonData['api-success-messages']['create-conversation']
-          body: 'Conversation created successfully',
+          );
-        });
+        } else {
+          handleShowErrorToast(
+            jsonData['api-error-messages']['create-conversation-error']
+          );
+        }
       })
-      .catch(() => {
+      .catch((err: AxiosError) => {
-        showToast({
+        const errMsg =
-          variant: 'error',
+          err.response?.data?.message ||
-          body: 'Error while creating the conversation',
+          jsonData['api-error-messages']['create-conversation-error'];
-        });
+        handleShowErrorToast(errMsg);
       });
   };
 
@@ -400,6 +455,7 @@ const TopicDetailsPage: FunctionComponent = () => {
       .then(() => {
         getUpdatedThread(threadId)
           .then((data) => {
+            if (data) {
               setEntityThread((pre) => {
                 return pre.map((thread) => {
                   if (thread.id === data.id) {
@@ -413,26 +469,44 @@ const TopicDetailsPage: FunctionComponent = () => {
                   }
                 });
               });
+            } else {
+              handleShowErrorToast(
+                jsonData['api-error-messages'][
+                  'fetch-updated-conversation-error'
+                ]
+              );
+            }
           })
-          .catch((error) => {
+          .catch((error: AxiosError) => {
-            const message = error?.message;
+            const message =
-            showToast({
+              error?.response?.data?.message ||
-              variant: 'error',
+              jsonData['api-error-messages'][
-              body: message ?? onUpdatedConversastionError,
+                'fetch-updated-conversation-error'
-            });
+              ];
+            handleShowErrorToast(message);
           });
 
-        showToast({
+        handleShowSuccessToast(
-          variant: 'success',
+          jsonData['api-success-messages']['delete-message']
-          body: onConfirmText,
+        );
-        });
       })
-      .catch((error) => {
+      .catch((error: AxiosError) => {
-        const message = error?.message;
+        const message =
-        showToast({ variant: 'error', body: message ?? onErrorText });
+          error?.response?.data?.message ||
+          jsonData['api-error-messages']['delete-message-error'];
+        handleShowErrorToast(message);
       });
   };
 
+  useEffect(() => {
+    if (topicDetailsTabs[activeTab - 1].path !== tab) {
+      setActiveTab(getCurrentTopicTab(tab));
+    }
+    if (TabSpecificField.ACTIVITY_FEED === tab) {
+      fetchActivityFeed();
+    }
+  }, [tab]);
+
   useEffect(() => {
     getEntityFeedCount();
   }, []);