added project status and ui issue

ui/src/components/Card/index.tsx

@@ -3,6 +3,7 @@ import { useContext, useEffect, useState } from 'react';
 import { Tooltip } from '@contentstack/venus-components';
 import { useNavigate } from 'react-router-dom';
 // Utilities
+import { PROJECT_STATUS } from '../../utilities/constants';
 import { getDays, isEmptyString } from '../../utilities/functions';
 import { AppContext } from '../../context/app/app.context';
 // Interface
@@ -42,7 +43,7 @@ const CardList = ({ project }: ProjectType) => {
             <div className="ProjectCard__stats">
               <div className="ProjectCard__unit">
                 <span className="ProjectCard__stats-number">Project Status</span>
-                <span className="ProjectCard__stats-category">{project?.status}</span>
+                <span className="ProjectCard__stats-category">{PROJECT_STATUS?.[project?.status !== undefined ? project?.status : 0]}</span>
               </div>
             </div>
           </div>

ui/src/components/Common/AddStack/addStack.scss

@@ -6,3 +6,7 @@
     width: 200px !important;
   }
 }
+.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody {
+  overflow: visible;
+}
+

ui/src/components/Common/AddStack/addStack.tsx

@@ -78,7 +78,6 @@ const AddStack = (props: any): JSX.Element => {
         setIsLoading(false);
       });
   }, []);
-
   return (
     <>
       {isLoading ? (
@@ -110,7 +109,7 @@ const AddStack = (props: any): JSX.Element => {
                 <div className="ReactModal__add-stack">
                   <form onSubmit={handleSubmit}>
                     <ModalHeader title={addStackCMSData?.title} closeModal={props?.closeModal} />
-                    <ModalBody className="no-scroll">
+                    <ModalBody className="no-scroll selectWrapperBody">
                       <Field>
                         <ReactFinalField name="name" type="input">
                           {({ input, meta }): JSX.Element => {
@@ -204,6 +203,7 @@ const AddStack = (props: any): JSX.Element => {
                                   name="locale"
                                   width="300px"
                                   options={props?.locales}
+                                  maxMenuHeight={200}
                                   isClearable={true}
                                   version={'v2'}
                                   placeholder={addStackCMSData?.stack_locale_description}

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

@@ -141,8 +141,9 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       newMigrationData?.destination_stack?.selectedOrg?.value
     ); //org id will always be there
 
+
     //fetch all locales
-    const response = await getAllLocales(newMigrationData?.destination_stack?.selectedOrg?.value); //org id will always be there
+    const response = await getAllLocales(selectedOrganisation?.value); //org id will always be there
     const rawMappedLocalesMapped =
       validateObject(response?.data) && response?.data?.locales
         ? Object?.keys(response?.data?.locales)?.map((key) => ({
@@ -153,7 +154,6 @@ const LoadStacks = (props: LoadFileFormatProps) => {
             created_at: key
           }))
         : [];
-
     setAllLocales(rawMappedLocalesMapped);
 
     const stackArray = validateArray(stackData?.data?.stacks)
@@ -193,6 +193,12 @@ const LoadStacks = (props: LoadFileFormatProps) => {
 
     updateNewMigrationData(newMigrationDataObj);
   };
+
+  /****  ALL USEEffects  HERE  ****/
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   const handleCreateNewStack = () => {
     cbModal({
       component: (props: LoadFileFormatProps) => (
@@ -216,12 +222,6 @@ const LoadStacks = (props: LoadFileFormatProps) => {
       }
     });
   };
-  /****  ALL USEEffects  HERE  ****/
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
   return (
     <div className="">
       <div className="action-summary-wrapper ">

ui/src/components/DestinationStack/index.tsx

@@ -163,8 +163,8 @@ const DestinationStackComponent = ({
       //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(
-        projectData.status === PROJECT_STATUS.INPROGRESS ||
-          projectData.status === PROJECT_STATUS.SUCCESS
+        projectData?.status === 2 ||
+          projectData?.status === 5
       );
     };
     fetchCMSData();

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

@@ -128,6 +128,7 @@ const LoadPreFix = (props: LoadSelectCmsProps) => {
           version="v2"
           error={isError}
         />
+        {isError && <p className='errorMessage'>Affix should not be more than 5 chars</p>}
       </div>
       <div className="col-12 pt-2">
         <Button version="v2" disabled={!isCheckedBoxChecked} onClick={handleOnBlur}>

ui/src/components/LegacyCms/index.tsx

@@ -178,8 +178,8 @@ const LegacyCMSComponent = ({ legacyCMSData, projectData }: LegacyCMSComponentPr
       //Check for migration Status and lock.
       // Status where Migration is to be Locked:
       setIsMigrationLocked(
-        projectData.status === PROJECT_STATUS.INPROGRESS ||
-          projectData.status === PROJECT_STATUS.SUCCESS
+        projectData?.status === 2 ||
+          projectData?.status === 5
       );
     };
 

ui/src/components/LegacyCms/legacyCms.scss

@@ -1,4 +1,4 @@
-@import '../../scss/variables';
+@import '../../scss/variables'; 
 .service_list {
   text-align: center;
   display: flex;
@@ -67,6 +67,10 @@
   width: 100%;
   align-items: center;
   padding: 0 !important;
-  border: 1px solid #dde3ee;
+  border: 1px solid $color-brand-secondary-lightest;
   border-radius: var(--TermCount, 5px);
 }
+.errorMessage {
+  color: $color-brand-warning-medium;
+  font-size: 12px;
+}

ui/src/services/api/service.interface.ts

@@ -26,7 +26,7 @@ export interface MigrationResponse {
   prefix: string;
   name: string;
   description: string;
-  status: string;
+  status: number;
   created_at: string;
   updated_at: string;
   destination_stack_id: string;
@@ -51,7 +51,7 @@ export const defaultMigrationResponse: MigrationResponse = {
   former_owner_ids: [],
   name: '',
   description: '',
-  status: '',
+  status: 0,
   created_at: '',
   updated_at: '',
   destination_stack_id: '',

ui/src/utilities/constants.interface.ts

@@ -0,0 +1,3 @@
+export interface ObjectType {
+  [key: string]: string;
+}

ui/src/utilities/constants.ts

@@ -1,3 +1,4 @@
+import { ObjectType } from './constants.interface'
 export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL;
 export const assetsRelativeUrl = 'v3/assets';
 export const WEBSITE_BASE_URL = process.env.REACT_APP_WEBSITE_BASE_URL;
@@ -62,12 +63,15 @@ export const UPLOAD_FILE_RELATIVE_URL = process.env.REACT_APP_UPLOAD_SERVER;
 
 export const UPLOAD_FILE_URL = `${UPLOAD_FILE_RELATIVE_URL}upload`;
 
-export const PROJECT_STATUS = {
-  DRAFT: 'Draft',
-  READY: 'Ready',
-  INPROGRESS: 'InProgress',
-  FAILED: 'Failed',
-  SUCCESS: 'Success'
+
+export const PROJECT_STATUS:ObjectType  = {
+  '0': 'Draft',
+  '1': 'Ready to test',
+  '2': 'Testing inprogress',
+  '3': 'Ready for migration',
+  '4': 'Migration inprogress',
+  '5': 'Migration successful',
+  '6': 'Migration terminated'
 };
 
 export const isOfflineCMSDataRequired = process.env.REACT_APP_OFFLINE_CMS