Fixed #701 UI: when there are not teams to assign, users listing is also not showing up. (#710)

* Fixed #701 UI: when there are not teams to assign, users listing is also not showing up.

* misc changes

* fixed typo

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">
                       <>
-                        <span className="tw-mr-1">{info.value}</span>
+                        <span className="tw-mr-1">
+                          {info.placeholderText || info.value}
+                        </span>
                         <SVGIcons
                           alt="external-link"
                           className="tw-align-middle"

catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDownList.tsx

@@ -17,7 +17,7 @@
 
 import classNames from 'classnames';
 import { isNil, lowerCase } from 'lodash';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
 import { getCountBadge } from '../../utils/CommonUtils';
 import { DropDownListItem, DropDownListProp } from './types';
 
@@ -31,6 +31,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
   onSelect,
   groupType = 'label',
 }: DropDownListProp) => {
+  const isMounted = useRef<boolean>(false);
   const [searchedList, setSearchedList] = useState(dropDownList);
   const [searchText, setSearchText] = useState(searchString);
   const [activeTab, setActiveTab] = useState<number>(1);
@@ -69,17 +70,6 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
     );
   };
 
-  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<DropDownListProp> = ({
   }, [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 && (

catalog-rest-service/src/main/resources/ui/src/pages/Pipeline-details/index.tsx

@@ -72,6 +72,7 @@ const MyPipelinePage = () => {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [pipelineUrl, setPipelineUrl] = useState<string>('');
   const [displayName, setDisplayName] = useState<string>('');
+  const [serviceType, setServiceType] = useState<string>('');
   // 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,

catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx

@@ -73,6 +73,7 @@ const MyDashBoardPage = () => {
   const [charts, setCharts] = useState<ChartType[]>([]);
   const [dashboardUrl, setDashboardUrl] = useState<string>('');
   const [displayName, setDisplayName] = useState<string>('');
+  const [serviceType, setServiceType] = useState<string>('');
   // 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,