Fixed signup user count, post-login Loader and welcome modal changes (#201)

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 {
+import { getLoggedInUser, getUserByName } from '../axiosAPIs/userAPI';
-  getLoggedInUser,
+import Loader from '../components/Loader/Loader';
-  getTeams,
-  getUserByName,
-  getUsers,
-} from '../axiosAPIs/userAPI';
 import { FirstTimeUserModal } from '../components/Modals/FirstTimeUserModal/FirstTimeUserModal';
-import {
+import { oidcTokenKey, ROUTES } from '../constants/constants';
-  API_RES_MAX_SIZE,
-  oidcTokenKey,
-  ROUTES,
-  TIMEOUT,
-} 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<AuthProviderProps> = ({
     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<AuthProviderProps> = ({
             <Route
               path={ROUTES.CALLBACK}
               render={() => (
-                <Callback
+                <>
-                  userManager={userManager}
+                  <Callback
-                  onSuccess={(user) => {
+                    userManager={userManager}
-                    cookieStorage.setItem(oidcTokenKey, user.id_token, {
+                    onSuccess={(user) => {
-                      expires: getOidcExpiry(),
+                      cookieStorage.setItem(oidcTokenKey, user.id_token, {
-                    });
+                        expires: getOidcExpiry(),
-                    fetchUserByEmail(user as OidcUser);
+                      });
-                  }}
+                      fetchUserByEmail(user as OidcUser);
-                />
+                    }}
+                  />
+                  <Loader />
+                </>
               )}
             />
             {isSignedOut ? <Redirect to={ROUTES.SIGNIN} /> : null}

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.',
+  'A single place to Discover, Collaborate, and Get your data right',
-  'Discover all your data assets in a single place, collaborate with your co-workers.',
+  'Based on Open metadata standards',
-  'Understand your data assets and contribute to make it richer.',
+  'Understand your data and collaborate with your team',
 ];
 
 export const FirstTimeUserModal: FunctionComponent<Props> = ({
@@ -40,11 +41,27 @@ export const FirstTimeUserModal: FunctionComponent<Props> = ({
       <div className="tw-modal-backdrop tw-opacity-80" />
       <div
         className="tw-modal-container tw-modal-confetti tw-max-w-xl tw-max-h-90vh"
-        style={{ backgroundImage: `url(${BGConfetti})` }}>
+        style={{ backgroundImage: active === 0 ? `url(${BGConfetti})` : '' }}>
         <div className="tw-modal-header tw-border-0 tw-justify-center tw-pt-8 tw-pb-0">
-          <p className="tw-modal-title tw-text-h4 tw-font-semibold tw-text-primary-active tw-mt-32">
+          <div className="tw-flex tw-flex-col tw-justify-center tw-items-center tw-mt-14">
-            Welcome to OpenMetadata
+            {active === 0 ? (
-          </p>
+              // TODO: Replace it with Party popper icon
+              <SVGIcons
+                alt="OpenMetadata Logo"
+                icon={Icons.LOGO_SMALL}
+                width="50"
+              />
+            ) : (
+              <SVGIcons
+                alt="OpenMetadata Logo"
+                icon={Icons.LOGO_SMALL}
+                width="50"
+              />
+            )}
+            <p className="tw-modal-title tw-text-h4 tw-font-semibold tw-text-primary-active tw-mt-3">
+              Welcome to OpenMetadata
+            </p>
+          </div>
         </div>
         <div className="tw-modal-body tw-relative tw-h-40 tw-justify-start tw-items-center">
           {description.map((d, i) => (

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);

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);
+};