diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
index 07876f2338b..63baa38f3f8 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@@ -20,6 +20,7 @@ type ExtraInfo = {
key?: string;
value: string | number;
isLink?: boolean;
+ placeholderText?: string;
};
type Props = {
@@ -185,7 +186,9 @@ const EntityPageInfo = ({
rel="noopener noreferrer"
target="_blank">
<>
- {info.value}
+
+ {info.placeholderText || info.value}
+
= ({
onSelect,
groupType = 'label',
}: DropDownListProp) => {
+ const isMounted = useRef(false);
const [searchedList, setSearchedList] = useState(dropDownList);
const [searchText, setSearchText] = useState(searchString);
const [activeTab, setActiveTab] = useState(1);
@@ -69,17 +70,6 @@ const DropDownList: FunctionComponent = ({
);
};
- const getActiveTab = () => {
- let tab = 0;
- listGroups.forEach((grp, i) => {
- if (getSearchedListByGroup(grp).length === 0) {
- tab = i + 1;
- }
- });
-
- return tab;
- };
-
useEffect(() => {
setSearchText(searchString);
}, [searchString]);
@@ -93,9 +83,25 @@ const DropDownList: FunctionComponent = ({
}, [searchText, dropDownList]);
useEffect(() => {
- setActiveTab(getActiveTab() + 1);
+ if (isMounted.current) {
+ const modifiedGrp = listGroups
+ .map((grp, index) => ({
+ grp: grp,
+ length: searchedList.filter((item) => grp === item.group).length,
+ tab: index + 1,
+ }))
+ .sort((a, b) => (a.length > b.length ? -1 : 1));
+
+ setActiveTab(
+ searchText ? (modifiedGrp.length > 0 ? modifiedGrp[0].tab : 1) : 1
+ );
+ }
}, [searchText]);
+ useEffect(() => {
+ isMounted.current = true;
+ }, []);
+
return (
<>
{searchedList.length > 0 && (
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx
index 4e54c8c900f..003fab4ec8e 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx
@@ -72,6 +72,7 @@ const MyPipelinePage = () => {
const [tasks, setTasks] = useState([]);
const [pipelineUrl, setPipelineUrl] = useState('');
const [displayName, setDisplayName] = useState('');
+ const [serviceType, setServiceType] = useState('');
// const [usage, setUsage] = useState('');
// const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
const [slashedPipelineName, setSlashedPipelineName] = useState<
@@ -121,7 +122,12 @@ const MyPipelinePage = () => {
const extraInfo = [
{ key: 'Owner', value: owner?.name || '' },
{ key: 'Tier', value: tier ? tier.split('.')[1] : '' },
- { key: 'Pipeline Url', value: pipelineUrl, isLink: true },
+ {
+ key: `${serviceType} Url`,
+ value: pipelineUrl,
+ placeholderText: displayName,
+ isLink: true,
+ },
// { key: 'Usage', value: usage },
// { key: 'Queries', value: `${weeklyUsageCount} past week` },
];
@@ -197,6 +203,7 @@ const MyPipelinePage = () => {
setTags(getTagsWithoutTier(tags));
getServiceById('pipelineServices', service?.id).then(
(serviceRes: AxiosResponse) => {
+ setServiceType(serviceRes.data.serviceType);
setSlashedPipelineName([
{
name: serviceRes.data.name,
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx
index 3631561c398..b9004f18b7d 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx
@@ -73,6 +73,7 @@ const MyDashBoardPage = () => {
const [charts, setCharts] = useState([]);
const [dashboardUrl, setDashboardUrl] = useState('');
const [displayName, setDisplayName] = useState('');
+ const [serviceType, setServiceType] = useState('');
// const [usage, setUsage] = useState('');
// const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
const [slashedDashboardName, setSlashedDashboardName] = useState<
@@ -122,7 +123,12 @@ const MyDashBoardPage = () => {
const extraInfo = [
{ key: 'Owner', value: owner?.name || '' },
{ key: 'Tier', value: tier ? tier.split('.')[1] : '' },
- { key: 'Dashboard Url', value: dashboardUrl, isLink: true },
+ {
+ key: `${serviceType} Url`,
+ value: dashboardUrl,
+ placeholderText: displayName,
+ isLink: true,
+ },
// { key: 'Usage', value: usage },
// { key: 'Queries', value: `${weeklyUsageCount} past week` },
];
@@ -198,6 +204,7 @@ const MyDashBoardPage = () => {
setTags(getTagsWithoutTier(tags));
getServiceById('dashboardServices', service?.id).then(
(serviceRes: AxiosResponse) => {
+ setServiceType(serviceRes.data.serviceType);
setSlashedDashboardName([
{
name: serviceRes.data.name,