From 0dbbc9644b33183bc90147c06557b0ca145fca27 Mon Sep 17 00:00:00 2001 From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com> Date: Mon, 16 Aug 2021 13:59:08 +0530 Subject: [PATCH] Fixed signup user count, post-login Loader and welcome modal changes (#201) --- .../ui/src/auth-provider/AuthProvider.tsx | 56 ++++++------------- .../FirstTimeUserModal/FirstTimeUserModal.tsx | 31 +++++++--- .../resources/ui/src/pages/signup/index.tsx | 2 + .../resources/ui/src/utils/UsedDataUtils.ts | 22 ++++++++ 4 files changed, 64 insertions(+), 47 deletions(-) create mode 100644 catalog-rest-service/src/main/resources/ui/src/utils/UsedDataUtils.ts 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 5b0eef45955..89248f1612f 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 @@ -38,19 +38,10 @@ import { import appState from '../AppState'; import axiosClient from '../axiosAPIs'; import { fetchAuthorizerConfig } from '../axiosAPIs/miscAPI'; -import { - getLoggedInUser, - getTeams, - getUserByName, - getUsers, -} from '../axiosAPIs/userAPI'; +import { getLoggedInUser, getUserByName } from '../axiosAPIs/userAPI'; +import Loader from '../components/Loader/Loader'; import { FirstTimeUserModal } from '../components/Modals/FirstTimeUserModal/FirstTimeUserModal'; -import { - API_RES_MAX_SIZE, - oidcTokenKey, - ROUTES, - TIMEOUT, -} from '../constants/constants'; +import { oidcTokenKey, ROUTES } from '../constants/constants'; import { ClientErrors } from '../enums/axios.enum'; import { useAuth } from '../hooks/authHooks'; import useToastContext from '../hooks/useToastContext'; @@ -61,6 +52,7 @@ import { getOidcExpiry, getUserManagerConfig, } from '../utils/AuthProvider.util'; +import { fetchAllUsers } from '../utils/UsedDataUtils'; import { AuthProviderProps, OidcUser } from './AuthProvider.interface'; const cookieStorage = new CookieStorage(); @@ -111,25 +103,6 @@ const AuthProvider: FunctionComponent = ({ history.push(ROUTES.HOME); }; - // Moving this code here from App.tsx - const getAllUsersList = (): void => { - getUsers('', API_RES_MAX_SIZE).then((res) => { - appState.users = res.data.data; - }); - }; - - const getAllTeams = (): void => { - getTeams().then((res) => { - appState.userTeams = res.data.data; - }); - }; - - const fetchAllUsers = () => { - getAllUsersList(); - getAllTeams(); - setInterval(getAllUsersList, TIMEOUT.USER_LIST); - }; - const fetchUserByEmail = (user: OidcUser) => { getUserByName(getNameFromEmail(user.profile.email), userAPIQueryFields) .then((res: AxiosResponse) => { @@ -280,15 +253,18 @@ const AuthProvider: FunctionComponent = ({ ( - { - cookieStorage.setItem(oidcTokenKey, user.id_token, { - expires: getOidcExpiry(), - }); - fetchUserByEmail(user as OidcUser); - }} - /> + <> + { + cookieStorage.setItem(oidcTokenKey, user.id_token, { + expires: getOidcExpiry(), + }); + fetchUserByEmail(user as OidcUser); + }} + /> + + )} /> {isSignedOut ? : null} 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 index 4df02e0802d..55fd132f005 100644 --- 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 @@ -1,6 +1,7 @@ import classNames from 'classnames'; import React, { FunctionComponent, useState } from 'react'; import BGConfetti from '../../../assets/img/confetti-bg.jpeg'; +import SVGIcons, { Icons } from '../../../utils/SvgUtils'; import { Button } from '../../buttons/Button/Button'; type Props = { @@ -9,9 +10,9 @@ type Props = { }; 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.', + 'A single place to Discover, Collaborate, and Get your data right', + 'Based on Open metadata standards', + 'Understand your data and collaborate with your team', ]; export const FirstTimeUserModal: FunctionComponent = ({ @@ -40,11 +41,27 @@ export const FirstTimeUserModal: FunctionComponent = ({
+ style={{ backgroundImage: active === 0 ? `url(${BGConfetti})` : '' }}>
-

- Welcome to OpenMetadata -

+
+ {active === 0 ? ( + // TODO: Replace it with Party popper icon + + ) : ( + + )} +

+ Welcome to OpenMetadata +

+
{description.map((d, i) => ( diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/signup/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/signup/index.tsx index e0bcc727796..6c97e71d87b 100644 --- a/catalog-rest-service/src/main/resources/ui/src/pages/signup/index.tsx +++ b/catalog-rest-service/src/main/resources/ui/src/pages/signup/index.tsx @@ -27,6 +27,7 @@ import DropDown from '../../components/dropdown/DropDown'; import { imageTypes, ROUTES } from '../../constants/constants'; import { getNameFromEmail } from '../../utils/AuthProvider.util'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; +import { fetchAllUsers } from '../../utils/UsedDataUtils'; type Team = { id: string; displayName: string; @@ -78,6 +79,7 @@ const Signup = () => { if (res.data) { setLoading(false); appState.userDetails = res.data; + fetchAllUsers(); history.push(ROUTES.HOME); } else { setLoading(false); diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/UsedDataUtils.ts b/catalog-rest-service/src/main/resources/ui/src/utils/UsedDataUtils.ts new file mode 100644 index 00000000000..e23e26c3570 --- /dev/null +++ b/catalog-rest-service/src/main/resources/ui/src/utils/UsedDataUtils.ts @@ -0,0 +1,22 @@ +import AppState from '../AppState'; +import { getTeams, getUsers } from '../axiosAPIs/userAPI'; +import { API_RES_MAX_SIZE, TIMEOUT } from '../constants/constants'; + +// Moving this code here from App.tsx +const getAllUsersList = (): void => { + getUsers('', API_RES_MAX_SIZE).then((res) => { + AppState.users = res.data.data; + }); +}; + +const getAllTeams = (): void => { + getTeams().then((res) => { + AppState.userTeams = res.data.data; + }); +}; + +export const fetchAllUsers = () => { + getAllUsersList(); + getAllTeams(); + setInterval(getAllUsersList, TIMEOUT.USER_LIST); +};