Fixed #695 Owner field in dataset page should be clickable to get more info. (#715)

catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -21,6 +21,7 @@ type ExtraInfo = {
   value: string | number;
   isLink?: boolean;
   placeholderText?: string;
+  openInNewTab?: boolean;
 };
 
 type Props = {
@@ -184,17 +185,19 @@ const EntityPageInfo = ({
                       className="link-text"
                       href={info.value as string}
                       rel="noopener noreferrer"
-                      target="_blank">
+                      target={info.openInNewTab ? '_blank' : '_self'}>
                       <>
                         <span className="tw-mr-1">
                           {info.placeholderText || info.value}
                         </span>
-                        <SVGIcons
+                        {info.openInNewTab && (
-                          alt="external-link"
+                          <SVGIcons
-                          className="tw-align-middle"
+                            alt="external-link"
-                          icon="external-link"
+                            className="tw-align-middle"
-                          width="12px"
+                            icon="external-link"
-                        />
+                            width="12px"
+                          />
+                        )}
                       </>
                     </a>
                   ) : (

catalog-rest-service/src/main/resources/ui/src/constants/constants.ts

@@ -43,6 +43,7 @@ const PLACEHOLDER_ROUTE_SERVICE_FQN = ':serviceFQN';
 const PLACEHOLDER_ROUTE_SERVICE_TYPE = ':serviceType';
 const PLACEHOLDER_ROUTE_SEARCHQUERY = ':searchQuery';
 const PLACEHOLDER_ROUTE_TAB = ':tab';
+const PLACEHOLDER_ROUTE_TEAM = ':team';
 
 export const pagingObject = { after: '', before: '' };
 
@@ -106,6 +107,7 @@ export const ROUTES = {
   WORKFLOWS: '/workflows',
   SQL_BUILDER: '/sql-builder',
   TEAMS: '/teams',
+  TEAM_DETAILS: `/teams/${PLACEHOLDER_ROUTE_TEAM}`,
   SETTINGS: '/settings',
   STORE: '/store',
   FEEDS: '/feeds',
@@ -186,6 +188,12 @@ export const getPipelineDetailsPath = (pipelineFQN: string) => {
 
   return path;
 };
+export const getTeamDetailsPath = (teamName: string) => {
+  let path = ROUTES.TEAM_DETAILS;
+  path = path.replace(PLACEHOLDER_ROUTE_TEAM, teamName);
+
+  return path;
+};
 
 export const LIST_TYPES = ['numbered-list', 'bulleted-list'];
 

catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts

@@ -130,6 +130,7 @@ declare module 'Models' {
       name?: string;
       id: string;
       type: 'user' | 'team';
+      displayName?: string;
     };
     tags: Array<ColumnTags>;
     usageSummary: UsageSummary;

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

@@ -25,7 +25,10 @@ import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdo
 import ManageTab from '../../components/my-data-details/ManageTab';
 import TagsContainer from '../../components/tags-container/tags-container';
 import Tags from '../../components/tags/tags';
-import { getServiceDetailsPath } from '../../constants/constants';
+import {
+  getServiceDetailsPath,
+  getTeamDetailsPath,
+} from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Pipeline } from '../../generated/entity/data/pipeline';
 import { Task } from '../../generated/entity/data/task';
@@ -120,13 +123,23 @@ const MyPipelinePage = () => {
   ];
 
   const extraInfo = [
-    { key: 'Owner', value: owner?.name || '' },
+    {
+      key: 'Owner',
+      value:
+        owner?.type === 'team'
+          ? getTeamDetailsPath(owner?.name || '')
+          : owner?.name || '',
+      placeholderText: owner?.displayName || '',
+      isLink: owner?.type === 'team',
+      openInNewTab: false,
+    },
     { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
     {
       key: `${serviceType} Url`,
       value: pipelineUrl,
       placeholderText: displayName,
       isLink: true,
+      openInNewTab: true,
     },
     // { key: 'Usage', value: usage },
     // { key: 'Queries', value: `${weeklyUsageCount} past week` },

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

@@ -25,7 +25,10 @@ import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdo
 import ManageTab from '../../components/my-data-details/ManageTab';
 import TagsContainer from '../../components/tags-container/tags-container';
 import Tags from '../../components/tags/tags';
-import { getServiceDetailsPath } from '../../constants/constants';
+import {
+  getServiceDetailsPath,
+  getTeamDetailsPath,
+} from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { Chart } from '../../generated/entity/data/chart';
 import { Dashboard, TagLabel } from '../../generated/entity/data/dashboard';
@@ -121,13 +124,23 @@ const MyDashBoardPage = () => {
   ];
 
   const extraInfo = [
-    { key: 'Owner', value: owner?.name || '' },
+    {
+      key: 'Owner',
+      value:
+        owner?.type === 'team'
+          ? getTeamDetailsPath(owner?.name || '')
+          : owner?.name || '',
+      placeholderText: owner?.displayName || '',
+      isLink: owner?.type === 'team',
+      openInNewTab: false,
+    },
     { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
     {
       key: `${serviceType} Url`,
       value: dashboardUrl,
       placeholderText: displayName,
       isLink: true,
+      openInNewTab: true,
     },
     // { key: 'Usage', value: usage },
     // { key: 'Queries', value: `${weeklyUsageCount} past week` },

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

@@ -44,6 +44,7 @@ import SchemaTab from '../../components/my-data-details/SchemaTab';
 import {
   getDatabaseDetailsPath,
   getServiceDetailsPath,
+  getTeamDetailsPath,
 } from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import {
@@ -118,7 +119,9 @@ const MyDataDetailsPage = () => {
   });
   const [tableTags, setTableTags] = useState<Array<ColumnTags>>([]);
   const [isEdit, setIsEdit] = useState(false);
-  const [owner, setOwner] = useState<Table['owner']>();
+  const [owner, setOwner] = useState<
+    Table['owner'] & { displayName?: string }
+  >();
   const [tableJoinData, setTableJoinData] = useState<TableJoins>({
     startDate: new Date(),
     dayCount: 0,
@@ -178,8 +181,20 @@ const MyDataDetailsPage = () => {
   const extraInfo: Array<{
     key?: string;
     value: string | number;
+    isLink?: boolean;
+    placeholderText?: string;
+    openInNewTab?: boolean;
   }> = [
-    { key: 'Owner', value: owner?.name || '' },
+    {
+      key: 'Owner',
+      value:
+        owner?.type === 'team'
+          ? getTeamDetailsPath(owner?.name || '')
+          : owner?.name || '',
+      placeholderText: owner?.displayName || '',
+      isLink: owner?.type === 'team',
+      openInNewTab: false,
+    },
     { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
     { key: 'Usage', value: usage },
     { key: 'Queries', value: `${weeklyUsageCount} past week` },

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

@@ -16,6 +16,7 @@
 */
 
 import { AxiosError, AxiosResponse } from 'axios';
+import classNames from 'classnames';
 import { isNull } from 'lodash';
 import { ServiceCollection, ServiceData, ServiceTypes } from 'Models';
 import React, { useEffect, useState } from 'react';
@@ -55,6 +56,7 @@ import {
 import { DatabaseService } from '../../generated/entity/services/databaseService';
 import { MessagingService } from '../../generated/entity/services/messagingService';
 import { PipelineService } from '../../generated/entity/services/pipelineService';
+import { useAuth } from '../../hooks/authHooks';
 import useToastContext from '../../hooks/useToastContext';
 import { getCountBadge, getTabClasses } from '../../utils/CommonUtils';
 import { getFrequencyTime, serviceTypeLogo } from '../../utils/ServiceUtils';
@@ -79,7 +81,7 @@ export type ApiData = {
 
 const ServicesPage = () => {
   const showToast = useToastContext();
-
+  const { isAdminUser } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [serviceName, setServiceName] =
     useState<ServiceTypes>('databaseServices');
@@ -462,7 +464,11 @@ const ServicesPage = () => {
                   className="tw-card"
                   position="right"
                   title={TITLE_FOR_NON_ADMIN_ACTION}>
-                  <div className="tw-inline-block" style={{ width: '100%' }}>
+                  <div
+                    className={classNames('tw-inline-block', {
+                      'tw-opacity-40': !isAdminUser,
+                    })}
+                    style={{ width: '100%' }}>
                     <div
                       className="tw-cursor-pointer tw-flex tw-flex-col tw-justify-center tw-items-center tw-py-6"
                       data-testid="add-services"

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

@@ -19,7 +19,7 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { compare } from 'fast-json-patch';
 import { observer } from 'mobx-react';
 import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import AppState from '../../AppState';
 import {
   createTeam,
@@ -37,6 +37,7 @@ import FormModal from '../../components/Modals/FormModal';
 import { ModalWithMarkdownEditor } from '../../components/Modals/ModalWithMarkdownEditor/ModalWithMarkdownEditor';
 import {
   ERROR404,
+  getTeamDetailsPath,
   TITLE_FOR_NON_ADMIN_ACTION,
 } from '../../constants/constants';
 import { Team } from '../../generated/entity/teams/team';
@@ -49,6 +50,8 @@ import Form from './Form';
 import UserCard from './UserCard';
 
 const TeamsPage = () => {
+  const { team } = useParams() as Record<string, string>;
+  const history = useHistory();
   const [teams, setTeams] = useState<Array<Team>>([]);
   const [currentTeam, setCurrentTeam] = useState<Team>();
   const [error, setError] = useState<string>('');
@@ -58,22 +61,6 @@ const TeamsPage = () => {
   const [isAddingTeam, setIsAddingTeam] = useState<boolean>(false);
   const [isAddingUsers, setIsAddingUsers] = useState<boolean>(false);
   const [userList, setUserList] = useState<Array<User>>([]);
-  const fetchTeams = () => {
-    setIsLoading(true);
-    getTeams(['users', 'owns'])
-      .then((res: AxiosResponse) => {
-        setTeams(res.data.data);
-        setCurrentTeam(res.data.data[0]);
-        setIsLoading(false);
-      })
-      .catch((err: AxiosError) => {
-        if (err?.response?.data.code) {
-          setError(ERROR404);
-        }
-        setIsLoading(false);
-      });
-  };
-
   const fetchCurrentTeam = (name: string, update = false) => {
     if (currentTeam?.name !== name || update) {
       setIsLoading(true);
@@ -91,6 +78,24 @@ const TeamsPage = () => {
     }
   };
 
+  const fetchTeams = () => {
+    setIsLoading(true);
+    getTeams(['users', 'owns'])
+      .then((res: AxiosResponse) => {
+        if (!team) {
+          setCurrentTeam(res.data.data[0]);
+        }
+        setTeams(res.data.data);
+        setIsLoading(false);
+      })
+      .catch((err: AxiosError) => {
+        if (err?.response?.data.code) {
+          setError(ERROR404);
+        }
+        setIsLoading(false);
+      });
+  };
+
   const createNewTeam = (data: Team) => {
     createTeam(data)
       .then((res: AxiosResponse) => {
@@ -147,6 +152,9 @@ const TeamsPage = () => {
   const getActiveTabClass = (tab: number) => {
     return tab === currentTab ? 'active' : '';
   };
+  const changeCurrentTeam = (name: string) => {
+    history.push(getTeamDetailsPath(name));
+  };
 
   const getTabs = () => {
     return (
@@ -200,7 +208,7 @@ const TeamsPage = () => {
     return (
       <>
         <div
-          className="tw-grid xl:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4"
+          className="tw-grid xl:tw-grid-cols-4 md:tw-grid-cols-3 tw-gap-4"
           data-testid="user-card-container">
           {currentTeam?.users?.map((user, index) => {
             const User = {
@@ -245,7 +253,7 @@ const TeamsPage = () => {
     return (
       <>
         <div
-          className="tw-grid xl:tw-grid-cols-4 md:tw-grid-cols-2 tw-gap-4"
+          className="tw-grid xl:tw-grid-cols-4 md:tw-grid-cols-3 tw-gap-4"
           data-testid="dataset-card">
           {' '}
           {currentTeam?.owns?.map((dataset, index) => {
@@ -287,8 +295,7 @@ const TeamsPage = () => {
               )}`}
               key={team.name}
               onClick={() => {
-                fetchCurrentTeam(team.name);
+                changeCurrentTeam(team.name);
-                setCurrentTab(1);
               }}>
               <p className="tw-text-center tag-category tw-self-center">
                 {team.displayName}
@@ -351,6 +358,11 @@ const TeamsPage = () => {
     setUserList(AppState.users);
   }, [AppState.users]);
 
+  useEffect(() => {
+    fetchCurrentTeam(team);
+    setCurrentTab(1);
+  }, [team]);
+
   return (
     <>
       {error ? (

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

@@ -19,7 +19,10 @@ import PageContainer from '../../components/containers/PageContainer';
 import Loader from '../../components/Loader/Loader';
 import ManageTab from '../../components/my-data-details/ManageTab';
 import SchemaEditor from '../../components/schema-editor/SchemaEditor';
-import { getServiceDetailsPath } from '../../constants/constants';
+import {
+  getServiceDetailsPath,
+  getTeamDetailsPath,
+} from '../../constants/constants';
 import { EntityType } from '../../enums/entity.enum';
 import { User } from '../../generated/entity/teams/user';
 import { useAuth } from '../../hooks/authHooks';
@@ -351,7 +354,16 @@ const MyTopicDetailPage = () => {
             isTagEditable
             entityName={name}
             extraInfo={[
-              { key: 'Owner', value: owner?.name || '' },
+              {
+                key: 'Owner',
+                value:
+                  owner?.type === 'team'
+                    ? getTeamDetailsPath(owner?.name || '')
+                    : owner?.name || '',
+                placeholderText: owner?.displayName || '',
+                isLink: owner?.type === 'team',
+                openInNewTab: false,
+              },
               { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
               ...getConfigDetails(),
             ]}

catalog-rest-service/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx

@@ -52,6 +52,7 @@ const AuthenticatedAppRouter: FunctionComponent = () => {
       <Route exact component={WorkflowsPage} path={ROUTES.WORKFLOWS} />
       <Route exact component={SQLBuilderPage} path={ROUTES.SQL_BUILDER} />
       <Route exact component={TeamsPage} path={ROUTES.TEAMS} />
+      <Route exact component={TeamsPage} path={ROUTES.TEAM_DETAILS} />
       <Route exact component={SettingsPage} path={ROUTES.SETTINGS} />
       <Route exact component={StorePage} path={ROUTES.STORE} />
       {/* <Route exact component={FeedsPage} path={ROUTES.FEEDS} /> */}

catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -100,7 +100,8 @@ export const getOwnerFromId = (
       const team = AppState.userTeams.find((item) => item.id === id);
       if (team) {
         retVal = {
-          name: team.displayName || team.name,
+          name: team.name,
+          displayName: team.displayName || team.name,
           id: team.id,
           type: 'team',
         };