From 7aeffc8e8c2571e1a15bbb94ec5f21e073095d0c Mon Sep 17 00:00:00 2001 From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com> Date: Sun, 15 Aug 2021 23:30:06 +0530 Subject: [PATCH] Fixed misc issues (#178) * Fixed misc issues * Tags usage fixed * Fixed owner and tier issues --- .../ui/src/auth-provider/AuthProvider.tsx | 1 + .../FirstTimeUserModal/FirstTimeUserModal.tsx | 105 ++++++++++++++++++ .../components/my-data-details/ManageTab.tsx | 13 +-- .../components/searched-data/SearchedData.tsx | 15 ++- .../tags-container/tags-container.tsx | 2 +- .../ui/src/components/tags/tags.styles.ts | 2 +- .../resources/ui/src/components/tags/tags.tsx | 2 +- .../resources/ui/src/interface/types.d.ts | 3 + .../ui/src/pages/my-data-details/index.tsx | 3 +- .../resources/ui/src/pages/tags/index.tsx | 18 ++- .../main/resources/ui/src/styles/tailwind.css | 2 +- .../main/resources/ui/src/utils/APIUtils.js | 4 + .../resources/ui/src/utils/CommonUtils.ts | 16 +++ .../resources/ui/src/utils/TableUtils.tsx | 49 +++++++- 14 files changed, 213 insertions(+), 22 deletions(-) create mode 100644 catalog-rest-service/src/main/resources/ui/src/components/Modals/FirstTimeUserModal/FirstTimeUserModal.tsx diff --git a/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx b/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx index 6e319d33dc1..320c3a33e5a 100644 --- a/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx @@ -121,6 +121,7 @@ const AuthProvider: FunctionComponent = ({ .then((res: AxiosResponse) => { if (res.data) { appState.userDetails = res.data; + fetchAllUsers(); handledVerifiedUser(); } else { cookieStorage.removeItem(oidcTokenKey); diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Modals/FirstTimeUserModal/FirstTimeUserModal.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Modals/FirstTimeUserModal/FirstTimeUserModal.tsx new file mode 100644 index 00000000000..2ddb8420000 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/components/Modals/FirstTimeUserModal/FirstTimeUserModal.tsx @@ -0,0 +1,105 @@ +import classNames from 'classnames'; +import React, { FunctionComponent, useState } from 'react'; +import { Button } from '../../buttons/Button/Button'; + +type Props = { + onSave: () => void; + onCancel: () => void; +}; + +const description = [ + 'OpenMetadata is a Centralized Metadata Store.', + 'Discover all your data assets in a single place, collaborate with your co-workers.', + 'Understand your data assets and contribute to make it richer.', +]; + +export const FirstTimeUserModal: FunctionComponent = ({ + onCancel, +}: Props) => { + const [active, setActive] = useState(0); + const [lastSlide, setLastSlide] = useState(false); + + const previousClick = () => { + if (lastSlide) { + // to somthing + } else { + setActive((pre) => pre - 1); + } + }; + + const nextClick = () => { + if (lastSlide) { + onCancel(); + } else { + setActive((pre) => { + const newVal = pre + 1; + description.length - 1 === newVal && setLastSlide(true); + + return newVal; + }); + } + }; + + return ( + +
+
+
+

+ Welcome to OpenMetadata +

+
+
+ {description.map((d, i) => ( +

+ {d} +

+ ))} +
+
+ + + +
+
+
+ ); +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx index 963dd7df8f6..1292f5b0ef9 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx @@ -20,6 +20,7 @@ import { TableDetail } from 'Models'; import React, { FunctionComponent, useEffect, useState } from 'react'; import appState from '../../AppState'; import cardData from '../../jsons/tiersData.json'; +import { getUserTeams } from '../../utils/CommonUtils'; import SVGIcons from '../../utils/SvgUtils'; import { Button } from '../buttons/Button/Button'; import CardListItem from '../card-list/CardListItem/CardWithListItems'; @@ -53,13 +54,11 @@ const ManageTab: FunctionComponent = ({ : appState.users.length ? appState.users[0] : undefined; - const teams = (appState.userDetails.teams || appState.userTeams).map( - (team) => ({ - name: team.name, - value: team.id, - group: 'Teams', - }) - ); + const teams = getUserTeams().map((team) => ({ + name: team?.displayName || team.name, + value: team.id, + group: 'Teams', + })); return user ? [{ name: user.displayName, value: user.id }, ...teams] diff --git a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx index ac5639d6a2d..a5c63a25f2e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx @@ -20,6 +20,10 @@ import PropTypes from 'prop-types'; import React, { ReactNode } from 'react'; import { PAGE_SIZE } from '../../constants/constants'; import { pluralize } from '../../utils/CommonUtils'; +import { + getOwnerFromId, + getTierFromSearchTableTags, +} from '../../utils/TableUtils'; import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder'; import TableDataCard from '../common/table-data-card/TableDataCard'; import PageContainer from '../containers/PageContainer'; @@ -74,12 +78,17 @@ const SearchedData: React.FC = ({ description={table.description} fullyQualifiedName={table.fullyQualifiedName} name={table.name} - owner={table.tableEntity.owner?.name} + owner={getOwnerFromId(table.owner)?.name} serviceType={table.serviceType || '--'} tableType={table.tableType} tags={table.tags} - tier={table.tier?.split('.')[1]} - usage={table.weeklyStats} + tier={ + ( + table.tier || + getTierFromSearchTableTags(table.tags) + )?.split('.')[1] + } + usage={table.weeklyPercentileRank} /> ))} diff --git a/catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx b/catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx index 82bed6674b9..a8ff55a75cb 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx @@ -159,7 +159,7 @@ const TagsContainer: FunctionComponent = ({ className={classNames( editable ? 'tw-bg-white tw-p-1 tw-border-2 tw-border-primary tw-cursor-text' - : null + : 'tw-cursor-pointer' )} onClick={(event) => { if (editable) { diff --git a/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.styles.ts b/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.styles.ts index 40a4a42fe28..196459e1e45 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.styles.ts +++ b/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.styles.ts @@ -17,7 +17,7 @@ export const tagStyles = { base: `tw-relative tw-inline-flex tw-text-xs tw-font-medium - tw-mr-2 tw-my-0.5 tw-cursor-pointer tw-rounded tw-whitespace-nowrap`, + tw-mr-2 tw-my-0.5 tw-rounded tw-whitespace-nowrap`, contained: 'tw-bg-tag', outlined: 'tw-bg-transparent', diff --git a/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.tsx b/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.tsx index 045c0c31750..17853fd0a61 100644 --- a/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/components/tags/tags.tsx @@ -39,7 +39,7 @@ const Tags: FunctionComponent = ({ {tag} {editable && ( ) => { e.preventDefault(); e.stopPropagation(); diff --git a/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts b/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts index cc66b6db399..b386c8a1f36 100644 --- a/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts +++ b/catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts @@ -169,6 +169,7 @@ declare module 'Models' { export type UserTeam = { description: string; + displayName?: string; href: string; id: string; name: string; @@ -197,7 +198,9 @@ declare module 'Models' { tags: string[]; tableEntity: TableEntity; dailyStats: number; + dailyPercentileRank: number; weeklyStats: number; + weeklyPercentileRank: number; service?: string; serviceType?: string; tier: string; diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx index 697ad79f96b..29cbabcf457 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx @@ -60,6 +60,7 @@ import { import { serviceTypeLogo } from '../../utils/ServiceUtils'; import SVGIcons from '../../utils/SvgUtils'; import { + getOwnerFromId, getTagsWithoutTier, getTierFromTableTags, getUsagePercentile, @@ -125,7 +126,7 @@ const MyDataDetailsPage = () => { setTableDetails(res.data); setTableId(id); setTier(getTierFromTableTags(tags)); - setOwner(owner); + setOwner(getOwnerFromId(owner?.id)); // need to check if already following or not with logedIn user id setIsFollowing( !!followers.filter(({ id }: { id: string }) => id === USERId).length diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx index 961e0cf0471..2f14beb36c1 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/tags/index.tsx @@ -320,14 +320,20 @@ const TagsPage = () => {
- + Usage: - - {tag.usageCount} - + {tag.usageCount ? ( + + {tag.usageCount} + + ) : ( + + Not used + + )}
{ newData.tableType = hit._source.table_type; newData.tags = hit._source.tags; newData.dailyStats = hit._source.daily_stats; + newData.dailyPercentileRank = hit._source.daily_percentile_rank; + newData.weeklyStats = hit._source.weekly_stats; + newData.weeklyPercentileRank = hit._source.weekly_percentile_rank; newData.service = hit._source.service; newData.serviceType = hit._source.service_type; newData.tableEntity = hit._source.table_entity; newData.tier = hit._source.tier; + newData.owner = hit._source.owner; return newData; }); diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts index d36076af92f..e24671d25a5 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts +++ b/catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.ts @@ -1,4 +1,5 @@ import { isEmpty } from 'lodash'; +import { UserTeam } from 'Models'; import AppState from '../AppState'; export const arraySorterByKey = ( @@ -68,3 +69,18 @@ export const pluralize = (count: number, noun: string, suffix = 's') => { count !== 1 && count !== 0 ? suffix : '' }`; }; + +export const getUserTeams = (): Array => { + let retVal: Array; + if (AppState.userDetails.teams) { + retVal = AppState.userDetails.teams.map((item) => { + const team = AppState.userTeams.find((obj) => obj.id === item.id); + + return { ...item, displayName: team?.displayName }; + }); + } else { + retVal = AppState.userTeams; + } + + return retVal; +}; diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx index 6b6091a89b5..5c3e236a07e 100644 --- a/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx @@ -1,7 +1,9 @@ -import { ColumnTags } from 'Models'; +import { ColumnTags, TableDetail } from 'Models'; import React from 'react'; +import AppState from '../AppState'; import PopOver from '../components/common/popover/PopOver'; import { ConstraintTypes } from '../enums/table.enum'; +import { getUserTeams } from './CommonUtils'; import { ordinalize } from './StringsUtils'; import SVGIcons from './SvgUtils'; @@ -57,6 +59,51 @@ export const getTagsWithoutTier = ( ); }; +export const getTierFromSearchTableTags = (tags: Array): string => { + const tierTag = tags.find( + (item) => + item.startsWith('Tier.Tier') && !isNaN(parseInt(item.substring(9).trim())) + ); + + return tierTag || ''; +}; + +export const getSearchTableTagsWithoutTier = ( + tags: Array +): Array => { + return tags.filter( + (item) => + !item.startsWith('Tier.Tier') || isNaN(parseInt(item.substring(9).trim())) + ); +}; + +export const getOwnerFromId = ( + id?: string +): TableDetail['owner'] | undefined => { + let retVal: TableDetail['owner']; + if (id) { + const user = AppState.users.find((item) => item.id === id); + if (user) { + retVal = { + name: user.displayName, + id: user.id, + type: 'user', + }; + } else { + const team = getUserTeams().find((item) => item.id === id); + if (team) { + retVal = { + name: team.displayName || team.name, + id: team.id, + type: 'team', + }; + } + } + } + + return retVal; +}; + export const getConstraintIcon = (constraint = '') => { let title: string, icon: string; switch (constraint) {