Fixed misc issues (#178)

* Fixed misc issues

* Tags usage fixed

* Fixed owner and tier issues

catalog-rest-service/src/main/resources/ui/src/auth-provider/AuthProvider.tsx

@@ -121,6 +121,7 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({
       .then((res: AxiosResponse) => {
         if (res.data) {
           appState.userDetails = res.data;
+          fetchAllUsers();
           handledVerifiedUser();
         } else {
           cookieStorage.removeItem(oidcTokenKey);

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<Props> = ({
+  onCancel,
+}: Props) => {
+  const [active, setActive] = useState<number>(0);
+  const [lastSlide, setLastSlide] = useState<boolean>(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 (
+    <dialog className="tw-modal">
+      <div className="tw-modal-backdrop tw-opacity-80" />
+      <div className="tw-modal-container tw-max-w-xl tw-max-h-90vh tw-bg-gradient-to-bl tw-to-primary-lite tw-from-secondary-lite">
+        <div className="tw-modal-header tw-border-0 tw-justify-center tw-pt-8">
+          <p className="tw-modal-title tw-text-h4 tw-font-semibold tw-text-primary-active">
+            Welcome to OpenMetadata
+          </p>
+        </div>
+        <div className="tw-modal-body tw-relative tw-h-64 tw-justify-center tw-items-center">
+          {description.map((d, i) => (
+            <p
+              className={classNames(
+                i === active
+                  ? 'tw-opacity-100 tw-relative tw-transition-opacity tw-delay-200'
+                  : 'tw-opacity-0 tw-absolute',
+                'tw-text-xl tw-font-medium tw-text-center'
+              )}
+              key={i}>
+              {d}
+            </p>
+          ))}
+        </div>
+        <div className="tw-modal-footer tw-border-0 tw-justify-between">
+          <Button
+            className={classNames(
+              'tw-bg-primary-active tw-text-white',
+              active === 0 ? 'tw-invisible' : null
+            )}
+            size="regular"
+            theme="primary"
+            variant="contained"
+            onClick={previousClick}>
+            {lastSlide ? (
+              'Take a Tour'
+            ) : (
+              <>
+                <i className="fas fa-arrow-left tw-text-sm tw-align-middle tw-pr-1.5" />{' '}
+                <span>Previous</span>
+              </>
+            )}
+          </Button>
+
+          <Button
+            className="tw-bg-primary-active tw-text-white"
+            size="regular"
+            theme="primary"
+            variant="contained"
+            onClick={nextClick}>
+            {lastSlide ? (
+              'Skip and go to landing page'
+            ) : (
+              <>
+                <span>Next</span>
+                <i className="fas fa-arrow-right tw-text-sm tw-align-middle tw-pl-1.5" />
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </dialog>
+  );
+};

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<Props> = ({
       : appState.users.length
       ? appState.users[0]
       : undefined;
-    const teams = (appState.userDetails.teams || appState.userTeams).map(
+    const teams = getUserTeams().map((team) => ({
-      (team) => ({
+      name: team?.displayName || team.name,
-        name: team.name,
+      value: team.id,
-        value: team.id,
+      group: 'Teams',
-        group: 'Teams',
+    }));
-      })
-    );
 
     return user
       ? [{ name: user.displayName, value: user.id }, ...teams]

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<SearchedDataProp> = ({
                             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]}
+                            tier={
-                            usage={table.weeklyStats}
+                              (
+                                table.tier ||
+                                getTierFromSearchTableTags(table.tags)
+                              )?.split('.')[1]
+                            }
+                            usage={table.weeklyPercentileRank}
                           />
                         </div>
                       ))}

catalog-rest-service/src/main/resources/ui/src/components/tags-container/tags-container.tsx

@@ -159,7 +159,7 @@ const TagsContainer: FunctionComponent<TagsContainerProps> = ({
       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) {

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

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

@@ -39,7 +39,7 @@ const Tags: FunctionComponent<TagProps> = ({
       <span className={classNames(textBaseStyle, textLayoutStyles)}>{tag}</span>
       {editable && (
         <span
-          className="tw-py-1 tw-px-2 tw-rounded"
+          className="tw-py-1 tw-px-2 tw-rounded tw-cursor-pointer"
           onClick={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
             e.preventDefault();
             e.stopPropagation();

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;

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

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

@@ -320,14 +320,20 @@ const TagsPage = () => {
                                 </button>
                               </div>
                               <div className="tw-mt-1">
-                                <span className="tw-text-gray-400 tw-mr-1">
+                                <span className="tw-text-grey-muted tw-mr-1">
                                   Usage:
                                 </span>
-                                <Link
+                                {tag.usageCount ? (
-                                  className="link-text tw-align-middle"
+                                  <Link
-                                  to={`/explore?tags=${tag.fullyQualifiedName}`}>
+                                    className="link-text tw-align-middle"
-                                  {tag.usageCount}
+                                    to={`/explore?tags=${tag.fullyQualifiedName}`}>
-                                </Link>
+                                    {tag.usageCount}
+                                  </Link>
+                                ) : (
+                                  <span className="tw-no-description">
+                                    Not used
+                                  </span>
+                                )}
                               </div>
                             </td>
                             <td

catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css

@@ -285,7 +285,7 @@
   }
 
   .signup-box {
-    @apply tw-m-auto tw-w-120;
+    @apply tw-m-auto tw-w-120 tw-bg-white;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
   }
 

catalog-rest-service/src/main/resources/ui/src/utils/APIUtils.js

@@ -13,10 +13,14 @@ export const formatDataResponse = (hits) => {
     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;
   });

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<UserTeam> => {
+  let retVal: Array<UserTeam>;
+  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;
+};

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>): string => {
+  const tierTag = tags.find(
+    (item) =>
+      item.startsWith('Tier.Tier') && !isNaN(parseInt(item.substring(9).trim()))
+  );
+
+  return tierTag || '';
+};
+
+export const getSearchTableTagsWithoutTier = (
+  tags: Array<string>
+): Array<string> => {
+  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) {