yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-22 16:08:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sachin Chaurasiya 2022-03-24 00:52:54 +05:30 committed by GitHub
parent 9c71754b25
commit 6ce65141a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 257 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
openmetadata-ui/src/main/resources/ui/src/jsons/en.ts
View File

@ -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',

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

@ -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) => {

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

@ -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(
(res: AxiosResponse) => {
getFeedCount(getEntityFeedLink(EntityType.TOPIC, topicFQN))
.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(() => {
showToast({
variant: 'error',
body: 'Error while fetching entity feeds',
});
.catch((err: AxiosError) => {
const errMsg =
err.response?.data?.message ||
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';
showToast({
variant: 'error',
body: errMsg,
});
const errMsg =
err.response?.data?.message ||
jsonData['api-error-messages']['fetch-topic-details-error'];
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.';
showToast({
variant: 'error',
body: errMsg,
});
err.response?.data?.message ||
jsonData['api-error-messages']['update-entity-follow-error'];
handleShowErrorToast(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.';
showToast({
variant: 'error',
body: errMsg,
});
err.response?.data?.message ||
jsonData['api-error-messages']['update-entity-unfollow-error'];
handleShowErrorToast(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 =
err.response?.data.message || 'Error while updating description.';
showToast({
variant: 'error',
body: errMsg,
});
const msg =
err.response?.data?.message ||
jsonData['api-error-messages']['update-description-error'];
handleShowErrorToast(msg);
});
};
@ -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 =
err.response?.data.message || 'Error while updating entity.';
const msg =
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.';
showToast({
variant: 'error',
body: errMsg,
});
err.response?.data?.message ||
jsonData['api-error-messages']['update-tags-error'];
handleShowErrorToast(errMsg);
});
};
@ -367,31 +412,41 @@ const TopicDetailsPage: FunctionComponent = () => {
}
});
});
getEntityFeedCount();
} else {
handleShowErrorToast(
jsonData['api-error-messages']['add-feed-error']
);
}
})
.catch(() => {
showToast({
variant: 'error',
body: 'Error while posting feed',
});
.catch((err: AxiosError) => {
const errMsg =
err.response?.data?.message ||
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({
variant: 'success',
body: 'Conversation created successfully',
});
handleShowSuccessToast(
jsonData['api-success-messages']['create-conversation']
);
} else {
handleShowErrorToast(
jsonData['api-error-messages']['create-conversation-error']
);
}
})
.catch(() => {
showToast({
variant: 'error',
body: 'Error while creating the conversation',
});
.catch((err: AxiosError) => {
const errMsg =
err.response?.data?.message ||
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) => {
const message = error?.message;
showToast({
variant: 'error',
body: message ?? onUpdatedConversastionError,
});
.catch((error: AxiosError) => {
const message =
error?.response?.data?.message ||
jsonData['api-error-messages'][
'fetch-updated-conversation-error'
];
handleShowErrorToast(message);
});
showToast({
variant: 'success',
body: onConfirmText,
});
handleShowSuccessToast(
jsonData['api-success-messages']['delete-message']
);
})
.catch((error) => {
const message = error?.message;
showToast({ variant: 'error', body: message ?? onErrorText });
.catch((error: AxiosError) => {
const message =
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();
}, []);