Feature/dropdown field choices

ui/src/components/DestinationStack/Actions/LoadStacks.tsx

@@ -192,7 +192,7 @@ const LoadStacks = (props: LoadFileFormatProps) => {
         (a: IDropDown, b: IDropDown) =>
           new Date(b?.created_at)?.getTime() - new Date(a?.created_at)?.getTime()
       );
-
+      
       setAllStack(stackArray);      
       //Set selected Stack
       const selectedStackData = validateArray(stackArray)

ui/src/components/MainHeader/index.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import { useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { cbModal, Dropdown, Tooltip} from '@contentstack/venus-components';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -164,9 +164,9 @@ const MainHeader = () => {
             {logo?.image?.url ? (
               <div className="logo">
                 <Tooltip position="right" content="Projects" wrapperElementType="div">
-                  {/* <Link to={`${logo?.url}`}> */}
+                  <Link to={`${logo?.url}`}>
                     <img src={logo?.image?.url} width={32} alt="Contentstack" />
-                  {/* </Link> */}
+                  </Link>
                 </Tooltip>
               </div>
             ) : (
@@ -189,18 +189,22 @@ const MainHeader = () => {
 
           {(location.pathname == '/projects' || location.pathname.includes('/projects/')) && <div className="flex-end">
             <div className="Dropdown-wrapper">
-              <Dropdown
-                list={[
-                  {
-                    default: true,
-                    label: <ProfileCard/>,
-                  }
-                ]}
-                type="click"
-                className="Profile_card"
-              >
-                <div className="user-short-name flex-v-center flex-h-center">{name}</div>
-              </Dropdown>
+              <Tooltip content={'Profile'} position='top'>
+                <Dropdown
+                  list={[
+                    {
+                      default: true,
+                      label: <ProfileCard/>,
+                    }
+                  ]}
+                  type="click"
+                  className="Profile_card"
+                >
+                  <div className="user-short-name flex-v-center flex-h-center">{name}</div>
+                </Dropdown>
+
+              </Tooltip>
+
             </div>
           </div>}
     </div>

ui/src/components/ProfileHeader/index.tsx

@@ -29,6 +29,11 @@ const ProfileCard = () => {
         <div className="profile-card__name">{user?.first_name} {user?.last_name}</div>
         <div className="profile-card__email">{user?.email}</div>
       </div>
+
+      <div className="profile-card__email">Region : {user?.region}</div>
+      <div>
+
+      </div>
       <div
         className="profile-card__logout"
         role="button"

ui/src/components/ProjectsHeader/index.tsx

@@ -27,8 +27,8 @@ const ProjectsHeader = ({
         <Search
           placeholder={searchPlaceholder}
           type="secondary"
-          onChange={(search: string) =>
-            setSearchText(search?.trim())
+          onChange={(search: string) =>{
+            setSearchText(search)}
           }
           width="large"
           onClear={true}
@@ -37,7 +37,7 @@ const ProjectsHeader = ({
           debounceSearch={true}
           id="search-project-input"
           version="v2"
-          disabled={allProject && allProject?.length <= 0 && searchText?.length <= 0}
+          //disabled={allProject && allProject?.length <= 0 }
         />
       </div>
       {/* {allProject && allProject?.length > 0 ? (

ui/src/context/app/app.interface.ts

@@ -45,6 +45,7 @@ export interface User {
   mobile_number: string;
   country_code: string;
   organizations: Organization[];
+  region:string;
 }
 export interface FileDetails {
   isLocalPath?: boolean;
@@ -221,7 +222,7 @@ export interface IAppContext {
   authToken: string;
   setAuthToken: (token: string) => void;
   user: User;
-  updateUser: (user: User) => void;
+  setUser: (user: User) => void;
   organisationsList: IDropDown[];
   updateOrganisationsList: (list: IDropDown[]) => void;
   selectedOrganisation: IDropDown;
@@ -264,7 +265,8 @@ export const DEFAULT_USER: User = {
   last_name: '',
   mobile_number: '',
   country_code: '',
-  organizations: []
+  organizations: [],
+  region:''
 };
 
 export const DEFAULT_FILE: IFile = {
@@ -413,7 +415,7 @@ export const DEFAULT_APP_CONTEXT: IAppContext = {
     return;
   },
   user: DEFAULT_USER,
-  updateUser: function (): void {
+  setUser: function (): void {
     return;
   },
   isAuthenticated: false,

ui/src/context/app/app.provider.tsx

@@ -139,7 +139,7 @@ const AppContextProvider: FC<IProps> = ({ children }) => {
     authToken: authToken,
     setAuthToken: (token: string) => setAuthToken(() => token),
     user: user,
-    updateUser: (user: User) => setUser(user),
+    setUser: (user: User) => setUser(user),
     isAuthenticated: isAuthenticated,
     setIsAuthenticated: (flag: boolean) => setIsAuthenticated(flag),
     newMigrationData: newMigration,

ui/src/pages/Login/index.tsx

@@ -3,7 +3,7 @@ import { FC,useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { getUserDetails, setAuthToken } from '../../store/slice/authSlice';
+import { getUserDetails, setAuthToken, setUser } from '../../store/slice/authSlice';
 import {
   Button,
   Field,
@@ -36,6 +36,7 @@ import AccountPage from '../../components/AccountPage';
 
 // Styles
 import './index.scss';
+import { RootState } from '../../store';
 
 const Login: FC<IProps> = () => {
   const [data, setData] = useState<LoginType>({});
@@ -56,7 +57,7 @@ const Login: FC<IProps> = () => {
   }, []);
 
   const { login, two_factor_authentication: twoFactorAuthentication } = data;
-
+  const user = useSelector((state:RootState)=>state?.authentication?.user);
   const accountData = {
     heading: data?.heading,
     subtitle: data?.subtitle,
@@ -162,7 +163,11 @@ const Login: FC<IProps> = () => {
         authToken: response?.data?.app_token,
         isAuthenticated: true
        }
-
+      const userObj  = {
+        ...user,
+        region : region,
+      }
+      dispatch( setUser(userObj));
       dispatch(setAuthToken(authenticationObj));
 
       setLoginStates((prev) => ({ ...prev, submitted: true }));

ui/src/pages/Projects/index.tsx

@@ -4,7 +4,7 @@ import { PageLayout, EmptyState, Button, Icon, cbModal,  StackCardSkeleton} from
 import { jsonToHtml } from '@contentstack/json-rte-serializer';
 import HTMLReactParser from 'html-react-parser';
 import { useLocation } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import {useSelector } from 'react-redux';
 
 // Redux
 import { RootState } from '../../store';

ui/src/store/slice/authSlice.tsx

@@ -80,7 +80,10 @@ const authSlice = createSlice({
             state.isAuthenticated = action?.payload?.isAuthenticated;
         },
         setUser : (state, action) => {
-            state.user = action?.payload;
+          state.user = {
+            ...state.user,             
+            ...action?.payload,        
+          };
         },
         reInitiliseState: (state) => {
             state.authToken = '';
@@ -101,7 +104,10 @@ const authSlice = createSlice({
     },
     extraReducers: (builder) => {
         builder.addCase(getUserDetails?.fulfilled,(state, action:any)=>{          
-            state.user = action?.payload?.user;
+          state.user = {
+            ...state.user,          
+            ...action.payload.user, 
+          };
             state.organisationsList = action?.payload?.organisationsList;
             state.selectedOrganisation = action?.payload?.selectedOrganisation ;
             state.isAuthenticated = !isEmptyString(state?.authToken || '');