contentstack · sayalijoshi27 · May 6, 2024 · May 3, 2024 · May 3, 2024 · May 3, 2024
diff --git a/api/src/constants/index.ts b/api/src/constants/index.ts
@@ -70,7 +70,10 @@ export const HTTP_TEXTS = {
     "Reseting the content mapping is restricted. Please verify the status and review preceding actions.",
   CONTENTMAPPER_NOT_FOUND:
     "Sorry, the requested content mapper id does not exists.",
+    ADMIN_LOGIN_ERROR:
+    "Sorry, You Don't have admin access in any of the Organisation" 
 };
+
 export const HTTP_RESPONSE_HEADERS = {
   "Access-Control-Allow-Origin": "*",
   "Content-Type": "application/json",

diff --git a/api/src/services/auth.service.ts b/api/src/services/auth.service.ts
@@ -24,7 +24,7 @@ const login = async (req: Request): Promise<LoginServiceType> => {
         method: "POST",
         url: `${config.CS_API[
           userData?.region as keyof typeof config.CS_API
-        ]!}/user-session`,
+        ]!}/user-session?include_orgs_roles=true`,
         headers: {
           "Content-Type": "application/json",
         },
@@ -48,6 +48,12 @@ const login = async (req: Request): Promise<LoginServiceType> => {
         status: err?.response?.status,
       };
     }
+    const orgs = (res?.data?.user?.organizations || [])
+    ?.filter((org: any) => org?.org_roles?.some((item: any) => item.admin))
+    ?.map(({ uid, name }: any) => ({ org_id: uid, org_name: name }));
+    if (!orgs.length) {
+      throw new BadRequestError(HTTP_TEXTS.ADMIN_LOGIN_ERROR);
+    }
 
     if (res?.status === HTTP_CODES.SUPPORT_DOC)
       return {

diff --git a/ui/public/index.html b/ui/public/index.html
@@ -46,9 +46,27 @@
       src="https://ui.contentstack.com/contentstack.min.js"
       async
     ></script>
+
+    <style type="text/css">
+      .skip-to-main-content-link {
+        position: absolute;
+        left: -9999px;
+        z-index: 999;
+        padding: 1em;
+        color: white;
+        opacity: 0;
+      }
+      .skip-to-main-content-link:focus {
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 1;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <a  href="#root" class="skip-to-main-content-link">Skip to main content</a>
+
     <div id="root"></div>
   </body>
 </html>
diff --git a/ui/src/components/Card/index.tsx b/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>

diff --git a/ui/src/components/Common/AddStack/addStack.scss b/ui/src/components/Common/AddStack/addStack.scss
@@ -6,3 +6,7 @@
     width: 200px !important;
   }
 }
+.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__body.selectWrapperBody {
+  overflow: visible;
+}
+
diff --git a/ui/src/components/Common/AddStack/addStack.tsx b/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}

diff --git a/ui/src/components/DestinationStack/Actions/LoadStacks.tsx b/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 ">

diff --git a/ui/src/components/DestinationStack/index.tsx b/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();

diff --git a/ui/src/components/LegacyCms/Actions/LoadPrefix.tsx b/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}>

diff --git a/ui/src/components/LegacyCms/index.tsx b/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
       );
     };
 

diff --git a/ui/src/components/LegacyCms/legacyCms.scss b/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;
+}
diff --git a/ui/src/pages/Home/index.tsx b/ui/src/pages/Home/index.tsx
@@ -34,7 +34,7 @@ const Home = () => {
 
   return (
     <div className="d-flex vh-100 align-items-center justify-content-center flex-column">
-      {heading && <Heading tagName="h1" text={heading} className="pb-2" />}
+      {heading && <Heading tagName="h1" text={heading} className="pb-2 large-font" />}
       {description && parse(description)}
 
       {cta && cta?.title && (

diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx
@@ -62,7 +62,7 @@ const RegionalLogin = () => {
     <div className="d-flex vh-100 align-items-center justify-content-center flex-column">
       <div className="container mx-auto">
         <div className="text-center">
-          {heading && <Heading tagName="h1" text={heading} className="pb-2" />}
+          {heading && <Heading tagName="h1" text={heading} className="pb-2 large-font" />}
           {description && description != '' && (
             <div className="textStone600 pt-3">{parse(description as string)}</div>
           )}

diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss
@@ -303,8 +303,10 @@ p {
   // overflow: hidden;
 }
 h1 {
-  font-size: 2.125rem;
-  font-weight: $font-weight-bold;
+  &.large-font {
+    font-size: 2.125rem;
+    font-weight: $font-weight-bold;
+  }
 }
 .pb-32 {
   padding-bottom: $px-32;

diff --git a/ui/src/services/api/service.interface.ts b/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: '',

diff --git a/ui/src/utilities/constants.interface.ts b/ui/src/utilities/constants.interface.ts
@@ -0,0 +1,3 @@
+export interface ObjectType {
+  [key: string]: string;
+}
diff --git a/ui/src/utilities/constants.ts b/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