Dev

ui/src/common/assets/icons.tsx

@@ -763,3 +763,11 @@ export const SEARCH_ICON = (
     />
   </svg>
 );
+
+export const LOG_OUT = (  
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M15.9148 7.66475C16.1344 7.44508 16.4906 7.44508 16.7102 7.66475L20.6477 11.6023C20.8674 11.8219 20.8674 12.1781 20.6477 12.3977L16.7102 16.3352C16.4906 16.5549 16.1344 16.5549 15.9148 16.3352C15.6951 16.1156 15.6951 15.7594 15.9148 15.5398L19.4545 12L15.9148 8.46025C15.6951 8.24058 15.6951 7.88442 15.9148 7.66475Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M9.1875 12C9.1875 11.6893 9.43934 11.4375 9.75 11.4375H20.25C20.5607 11.4375 20.8125 11.6893 20.8125 12C20.8125 12.3107 20.5607 12.5625 20.25 12.5625H9.75C9.43934 12.5625 9.1875 12.3107 9.1875 12Z" fill="#475161"/>
+  <path fillRule="evenodd" clipRule="evenodd" d="M4.5 4.3125C4.45027 4.3125 4.40258 4.33225 4.36742 4.36742C4.33225 4.40258 4.3125 4.45027 4.3125 4.5V19.5C4.3125 19.5497 4.33225 19.5974 4.36742 19.6326C4.40258 19.6677 4.45027 19.6875 4.5 19.6875H9.75C10.0607 19.6875 10.3125 19.9393 10.3125 20.25C10.3125 20.5607 10.0607 20.8125 9.75 20.8125H4.5C4.1519 20.8125 3.81806 20.6742 3.57192 20.4281C3.32578 20.1819 3.1875 19.8481 3.1875 19.5V4.5C3.1875 4.1519 3.32578 3.81806 3.57192 3.57192C3.81806 3.32578 4.1519 3.1875 4.5 3.1875H9.75C10.0607 3.1875 10.3125 3.43934 10.3125 3.75C10.3125 4.06066 10.0607 4.3125 9.75 4.3125H4.5Z" fill="#475161"/>
+  </svg>
+);  

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -26,6 +26,7 @@ export interface FieldTypes {
   label: string;
   value: any;
   id?: string;
+  isDisabled?: boolean;
 }
 export interface TableTypes {
   sortBy: any;

ui/src/components/ContentMapper/index.tsx

@@ -694,7 +694,13 @@ const ContentMapper = () => {
 
     const OptionValue: FieldTypes =
       OptionsForRow?.length === 0
-        ? { label: 'No matches found', value: 'No matches found' }
+        ? { 
+          label: data?.ContentstackFieldType, 
+          value: data?.ContentstackFieldType, 
+          isDisabled: data?.ContentstackFieldType === 'group' ||
+          data?.ContentstackFieldType === 'text' ||
+          data?.ContentstackFieldType === 'url' 
+        }
         : { label: `${selectedOption} matches`, value: `${selectedOption} matches` };
 
     const adjustedOptions = OptionsForRow.map((option: optionsType) => ({
@@ -713,23 +719,28 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={adjustedOptions}
+            isDisabled={
+              OptionValue?.isDisabled
+            }
           />
         </div>
-        <Icon
-          version="v2"
-          icon="Setting"
-          size="small"
-          onClick={() => {
-            // const value = {
-            //   ValidationRegex: data?.advanced?.ValidationRegex,
-            //   Mandatory: data?.advanced?.mandatory,
-            //   Multiple: data?.advanced?.multiple,
-            //   Unique: data?.advanced?.unique,
-            //   NonLocalizable: data?.advanced?.nonLocalizable
-            // };
-            handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data);
-          }}
-        />
+        {!OptionValue?.isDisabled && (
+          <Icon
+            version="v2"
+            icon="Setting"
+            size="small"
+            onClick={() => {
+              // const value = {
+              //   ValidationRegex: data?.advanced?.ValidationRegex,
+              //   Mandatory: data?.advanced?.mandatory,
+              //   Multiple: data?.advanced?.multiple,
+              //   Unique: data?.advanced?.unique,
+              //   NonLocalizable: data?.advanced?.nonLocalizable
+              // };
+              handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data);
+            }}
+          />
+        )}
       </div>
     );
   };

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

@@ -28,9 +28,6 @@ const defaultStack = {
 };
 
 const LoadStacks = (props: LoadFileFormatProps) => {
-
-  console.log("props", props);
-
   /****  ALL HOOKS HERE  ****/
 
   const newMigrationData = useSelector((state:RootState)=>state?.migration?.newMigrationData);

ui/src/components/LegacyCms/Actions/LoadPrefix.tsx

@@ -121,15 +121,8 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
           affix_confirmation: true
         });
 
-        //call for Step Change  
-        props.handleStepChange(props?.currentStep);
-        return;
-
-      }
-      else{
-        setIsError(true);
-        setErrorMessage('Affix should be valid and not a restricted keyword');
-        setIsRestrictedKey(true);
+        //call for Step Change
+        props?.handleStepChange(props?.currentStep);
         return;
       }
     } else {

ui/src/components/LegacyCms/Actions/LoadUploadFile.tsx

@@ -373,7 +373,7 @@ const LoadUploadFile = (props: LoadUploadFileProps) => {
             {showMessage  &&
               (
               <>
-                <Paragraph className={`${validationClassName} pb-2` } tagName='p' variant="p2" text={validationMessgae}/>
+                <Paragraph className={`${validationClassName}` } tagName='p' variant="p2" text={validationMessgae}/>
               </>
               )
             }

ui/src/components/MainHeader/index.scss

@@ -1,6 +1,21 @@
 @import '../../scss/variables';
 
 .mainheader {
+  [class*="Profile_card"] {
+    [class*="Dropdown__menu__list"] {
+      padding: 0;
+    }
+
+    [class*="Dropdown__menu__list__item"] {
+      pointer-events: none;
+      padding: 0;
+
+      [class*="profile-card__logout"] {
+        pointer-events: all;
+      }
+    }
+  }
+
   background-color: $color-brand-white-base;
   height: 3.5rem;
   justify-content: space-between;
@@ -10,13 +25,16 @@
   display: flex;
   align-items: center;
   z-index: 100;
+
   button {
     border: 0 none;
   }
+
   .logo {
     position: relative;
     text-align: center;
     width: 3.5rem;
+
     a {
       align-items: center;
       display: flex;
@@ -25,47 +43,57 @@
       padding: 0.5rem;
       text-decoration: none;
     }
+
     a:focus {
       border-radius: 5px;
       box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4;
     }
   }
+
   .organisationWrapper {
     margin-left: 1.063rem;
+
     &:focus {
       box-shadow: none;
     }
-  } 
+  }
+
   .Dropdown {
     &:focus {
       box-shadow: none;
     }
   }
+
   .Dropdown-wrapper {
     padding: 0 18px;
   }
+
   .Dropdown.Dropdown--hover .Dropdown__menu--primary {
     top: 2.5rem;
   }
+
   .organisationWrapper {
     &:focus {
       box-shadow: none;
     }
+
     .Dropdown__header__value {
       color: #475161;
       max-width: 11.1875rem;
       width: auto;
       color: $color-black-222 !important;
       line-height: $line-height-reset;
     }
+
     .Dropdown__menu--primary .Dropdown__menu__list__item,
     .Dropdown__menu--secondary .Dropdown__menu__list__item,
     .Dropdown__menu--tertiary .Dropdown__menu__list__item {
       max-width: 14.5rem;
     }
+
     .Dropdown__header__label {
       line-height: $line-height-reset;
       margin-bottom: 8px;
     }
   }
-}
+}

ui/src/components/MainHeader/index.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import { useEffect, useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
-import { Dropdown, Tooltip } from '@contentstack/venus-components';
+import { Dropdown, Tooltip} from '@contentstack/venus-components';
 import { useDispatch, useSelector } from 'react-redux';
 
 // Service
@@ -23,6 +23,7 @@ import {
 import { MainHeaderType } from './mainheader.interface';
 import { IDropDown } from '../../context/app/app.interface';
 
+import ProfileCard from '../ProfileHeader';
 // Styles
 import './index.scss';
 
@@ -129,12 +130,12 @@ const MainHeader = () => {
               <Dropdown
                 list={[
                   {
-                    action: handleLogout,
                     default: true,
-                    label: 'Logout'
+                    label: <ProfileCard/>,
                   }
                 ]}
                 type="click"
+                className="Profile_card"
               >
                 <div className="user-short-name flex-v-center flex-h-center">{name}</div>
               </Dropdown>

ui/src/components/Modal/index.tsx

@@ -159,7 +159,7 @@ const Modal = (props: ProjectModalProps) => {
                           <Textarea
                             {...input}
                             value={input?.value}
-                            onChange={(event: any): any => {
+                            onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
                               input.onChange(event);
                             }}
                             id="description"

ui/src/components/ProfileHeader/index.scss

@@ -0,0 +1,78 @@
+@import '../../scss/variables';
+
+.profile-card {
+  width: 300px;
+  padding: 16px;
+  // background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.profile-card__avatar {
+  margin-bottom: 16px;
+}
+
+.profile-card__initials {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background-color: #2c3e50;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  margin: 12px auto;
+
+}
+
+.profile-card__details {
+  margin-bottom: 16px;
+}
+
+.profile-card__name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #2c3e50;
+  margin-bottom: 5px;
+}
+
+.profile-card__email {
+  font-size: 14px;
+  color: #7f8c8d;
+  margin-bottom: 5px;
+}
+
+.profile-card__logout {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #2c3e50;
+  font-size: 14px;
+  height:56px;
+}
+
+.profile-card__logout-icon {
+  margin-right: 8px;
+  font-size: 16px;
+}
+
+.profile-card__logout-text {
+  text-decoration: underline;
+}
+
+.profile-gray-background {
+  min-height: 20px;
+  position: absolute;
+  width: 350px;
+  height: 64px;
+  top: 0;
+  left: 0;
+  background-color: #F9F8FF;
+  z-index: 1;
+}
+.profile-card__avatar {
+  z-index: 2;
+  position: relative;
+}

ui/src/components/ProfileHeader/index.tsx

@@ -0,0 +1,40 @@
+// Redux
+import { RootState } from '../../store';
+
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import {
+  clearLocalStorage,
+} from '../../utilities/functions';
+// Styles
+import './index.scss';
+import { LOG_OUT } from '../../common/assets';
+const ProfileCard = () => {
+  const user = useSelector((state:RootState)=>state?.authentication?.user);
+  const name = `${user?.first_name?.charAt(0)}${user?.last_name?.charAt(0)}`.toUpperCase() ?? '';
+  const navigate = useNavigate();
+   // Function for Logout
+   const handleLogout = () => {
+    if (clearLocalStorage()) {
+      navigate('/', { replace: true });
+    }
+  };
+  return (
+    <div className="profile-card">
+      <div className='profile-gray-background'/>
+      <div className="profile-card__avatar">
+        <div className="profile-card__initials">{name}</div>
+      </div>
+      <div className="profile-card__details">
+        <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__logout" onClick={handleLogout}>
+        <span className="profile-card__logout-icon">{LOG_OUT}</span>
+        <span className="profile-card__logout-text">Log out</span>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileCard;