contentstack · RohitKini · Aug 27, 2024 · Aug 23, 2024 · Aug 23, 2024 · Aug 23, 2024
diff --git a/ui/src/cmsData/add_stack.json b/ui/src/cmsData/add_stack.json
@@ -12,7 +12,7 @@
   "stack_locale_description": "Select a language",
   "stack_locales": "Set Master Language",
   "stack_name": "Name",
-  "stack_name_placeholder": "Enter stack Name",
+  "stack_name_placeholder": "Enter stack name",
   "tags": [],
   "title": "Create New Stack",
   "updated_at": "2024-02-13T04:44:57.846Z",

diff --git a/ui/src/cmsData/region_login.json b/ui/src/cmsData/region_login.json
@@ -5,6 +5,7 @@
   "description": "Please select Contentstack <strong>North America (AWS, Azure or GCP)</strong> or Contentstack <strong>Europe (AWS or Azure)</strong> to continue.",
   "regions": [
     {
+      "region": "NA",
       "service_icon": {
         "uid": "bltbe45879eac0025d8",
         "created_at": "2023-10-31T06:59:22.783Z",
@@ -28,6 +29,7 @@
       "_metadata": { "uid": "cs32a9ba30ec1496ef" }
     },
     {
+      "region": "AZURE_NA",
       "service_icon": {
         "uid": "blt85d2a7024c613199",
         "created_at": "2023-10-31T07:00:56.567Z",
@@ -51,6 +53,7 @@
       "_metadata": { "uid": "cs77a3bf15c456afbb" }
     },
     {
+      "region": "EU",
       "service_icon": {
           "uid": "blt57dafa9c1472b46f",
           "created_at": "2024-07-29T10:57:59.058Z",
@@ -79,6 +82,7 @@
       }
     },
     {
+      "region": "AZURE_EU",
       "service_icon": {
         "uid": "bltbe45879eac0025d8",
         "created_at": "2023-10-31T06:59:22.783Z",
@@ -102,6 +106,7 @@
       "_metadata": { "uid": "csf578f8fbea1ae0c0" }
     },
     {
+      "region": "GCP_NA",
       "service_icon": {
         "uid": "blt85d2a7024c613199",
         "created_at": "2023-10-31T07:00:56.567Z",

diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss
@@ -9,6 +9,10 @@
   border: 1px solid $color-brand-secondary-lightest;
   transition: box-shadow 0.3s ease;
   width: 20rem;
+  &:hover {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 0 2px 0 rgba(0, 0, 0, .14);
+    cursor: pointer;
+  }
 }
 
 /**
@@ -41,6 +45,7 @@
   padding: 0;
   white-space: normal; 
   -webkit-line-clamp: 2;
+  line-clamp: 2;  
   -webkit-box-orient: vertical;
 }
 
@@ -63,7 +68,6 @@
  * Styles for the content of the ProjectCard component.
  */
 .ProjectCard__content {
-  // margin: 0 1rem 2rem;
   padding: 0;
   text-align: center;
 }

diff --git a/ui/src/components/Common/Card/card.scss b/ui/src/components/Common/Card/card.scss
@@ -149,3 +149,10 @@
 .centered-card-title{
   margin: 10px;
 }
+
+.centered-card-title {
+  margin: 10px;
+  p {
+    color: $color-stepper-title;
+  }
+}
diff --git a/ui/src/components/ContentMapper/index.tsx b/ui/src/components/ContentMapper/index.tsx
@@ -341,7 +341,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
           };
         }
       });
-      setExistingField(updatedExstingField);
+      //setExistingField(updatedExstingField);
     }
   }, [tableData, otherCmsTitle]);
 
@@ -676,7 +676,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
     }
 
     const fieldLabel = data?.ContentstackFieldType === 'url' || data?.ContentstackFieldType === 'group'
-      ? data?.ContentstackFieldType : option?.[0]?.label
+      ? data?.ContentstackFieldType : initialOption?.label
 
     return (
       <div className="table-row">
@@ -703,7 +703,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
           data?.otherCmsField !== 'url' &&
           data?.otherCmsType !== 'reference' &&
           <Tooltip 
-            content="Advance propertise" 
+            content="Advanced properties" 
             position="top"
             disabled={
               data?.otherCmsField === 'title' ||
@@ -712,7 +712,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
           >
             <Icon
               version="v2"
-              icon="Setting"
+              icon="Sliders"
               size="small"
               onClick={() =>
                 handleAdvancedSetting(fieldLabel, advancePropertise, data?.uid, data)
@@ -884,7 +884,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
           for (const item of array) {
             const fieldTypeToMatch = fieldsOfContentstack[item?.otherCmsType as keyof Mapping];
             if (item.id === data?.id) {
-              for (const key of existingField[groupArray[0]?.uid]?.value.schema || []) {
+              for (const key of existingField[groupArray[0]?.uid]?.value?.schema || []) {
 
                 if (checkConditions(fieldTypeToMatch, key, item)) {                            
                   OptionsForRow.push(getMatchingOption(key, true, `${updatedDisplayName} > ${key.display_name}` || ''));
@@ -951,7 +951,7 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
       'multiline': 'multiline',
       'HTML Rich text Editor': 'allow_rich_text',
       'JSON Rich Text Editor': 'json',
-      'Rich Text': 'json',
+      'Rich Text': 'allow_rich_text',
       'Group': 'Group',
       'URL': 'url',
       'file': 'file',
@@ -1130,14 +1130,25 @@ const ContentMapper = forwardRef(({projectData}: ContentMapperComponentProps, re
           />
         </div>
         {!OptionValue?.isDisabled && (
-          <Icon
+          <Tooltip
+            content="Advanced properties" 
+            position="top"
+            disabled={
+              data?.otherCmsField === 'title' ||
+              data?.otherCmsField === 'url'
+            }
+          >
+            <Icon
             version="v2"
-            icon="Setting"
+            icon="Sliders"
             size="small"
             onClick={() => {
-              handleAdvancedSetting(data?.ContentstackFieldType, advancePropertise, data?.uid, data);
+              handleAdvancedSetting(initialOption?.label, advancePropertise, data?.uid, data);
             }}
           />
+
+          </Tooltip>
+
         )}
       </div>
     );

diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx
@@ -226,19 +226,23 @@ const Login: FC<IProps> = () => {
 
   useEffect(() => { 
     const handlePopState = (event: PopStateEvent) => {
-      event.preventDefault();
-      window.history.pushState(null, '', window.location.href);
+      if (isBlock) {
+        event.preventDefault();
+        window.history.pushState(null, '', window.location.href);
+      }
     };
-    if(isBlock){
+
+    if (isBlock) {
       window.history.pushState(null, '', window.location.href);
     }
-    window.history.pushState(null, '', window.location.href);
-    window.addEventListener('popstate',handlePopState);
-
+
+    window.addEventListener('popstate', handlePopState);
+  
     return () => {
       window.removeEventListener('popstate', handlePopState);
     };
-  },[isBlock]);
+  }, [isBlock]);
+
 
   return (
     <AccountPage data={accountData}>

diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx
@@ -80,15 +80,17 @@ const Projects = () => {
   const fetchData = async () => {
     //check if offline CMS data field is set to true, if then read data from cms data file.
     getCMSDataFromFile(CS_ENTRIES.PROJECTS)
-      .then((data) => setData(data))
-      .catch((err) => {
-        console.error(err);
-        setData({});
-      });
-
-    // fetchProjects();
+    .then((data) => setData(data))
+    .catch((err) => {
+      console.error(err);
+      setData({});
+    });
   };
 
+  useEffect(()=>{
+    dispatch(getUserDetails());
+  },[dispatch]);
+
   useEffect(() => {
     fetchData();
   }, []);

diff --git a/ui/src/pages/RegionalLogin/index.tsx b/ui/src/pages/RegionalLogin/index.tsx
@@ -1,14 +1,13 @@
 // Libraries
 import { useEffect, useState } from 'react';
 import parse from 'html-react-parser';
-import { useNavigate } from 'react-router-dom';
 
 // Services
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
 
 // Utilities
 import { validateArray } from '../../utilities/functions';
-import { CS_ENTRIES, REGIONS } from '../../utilities/constants';
+import { CS_ENTRIES } from '../../utilities/constants';
 
 // Interface
 import { RegionType } from './regionalLogin.interface';
@@ -19,8 +18,6 @@ import './index.scss';
 const RegionalLogin = () => {
   const [data, setData] = useState<RegionType>({});
 
-  const navigate = useNavigate();
-
   const fetchData = async () => {
     //check if offline CMS data field is set to true, if then read data from cms data file.
     await getCMSDataFromFile(CS_ENTRIES.REGIONS)
@@ -35,81 +32,54 @@ const RegionalLogin = () => {
     fetchData();
   }, []);
 
-  const loginClick = (regionName: string, serviceName: string) => {
-    let loginUrl: string;
-
-    switch (true) {
-      case regionName === 'North America' && serviceName === 'Microsoft Azure':
-        loginUrl = `/login?region=${REGIONS.AZURE_NA}`;
-        break;
-      case regionName === 'Europe' && serviceName === 'Amazon Web Services':
-        loginUrl = `/login?region=${REGIONS.EU}`;
-        break;
-      case regionName === 'Europe' && serviceName === 'Microsoft Azure':
-        loginUrl = `/login?region=${REGIONS.AZURE_EU}`;
-        break;
-      case regionName === 'North America' && serviceName === 'Google Cloud Platform':
-        loginUrl = `/login?region=${REGIONS.GCP_NA}`;
-        break;
-      default:
-        loginUrl = `/login?region=${REGIONS.NA}`;
-        break;
-    }
-    navigate(loginUrl);
-  };
-
   const { description, heading, regions } = data;
 
   return (
-    <div className="d-flex vh-100 align-items-center justify-content-center flex-column">
-      <div className="container mx-auto">
-        <div className="text-center mt-4">
-          {heading && <h1>{heading}</h1>}
-          {description && description != '' && (
-            <div className="textStone600 pt-3 lh-condensed">{parse(description)}</div>
-          )}
-        </div>
+    <div className="d-flex vh-100 justify-content-center flex-column">
+      <div className="mx-3">
+        <div className='container-fluid'>
+          <div className="text-center mt-4">
+            {heading && <h1>{heading}</h1>}
+            {description && description != '' && (
+              <div className="textStone600 pt-3 lh-condensed">{parse(description)}</div>
+            )}
+          </div>
 
-        <div className="row pt-6 justify-content-center">
-          {regions &&
-            validateArray(regions) &&
-            regions?.map((region, index) => (
-              <div key={`${index.toString()}`} className="col-md-4 col-lg-2 mb-4">
-                <div className="card h-100">
-                  <div className="cardBody">
-                    <div className="d-flex align-items-center flex-grow-1">
-                      {region?.service_icon?.url && (
-                        <img
-                          src={region?.service_icon?.url}
-                          className="thumb me-2"
-                          alt={region?.service_icon?.title}
-                        />
-                      )}
-                      {region?.service_title && (
-                        <p className="mb-0 body-6 fw-bold">{region?.service_title}</p>
-                      )}
+          <div className="row pt-6 justify-content-center">
+            {regions &&
+              validateArray(regions) &&
+              regions?.map((region, index) => (
+                <div key={`${index.toString()}`} className="col-md-4 col-lg-2 mb-4">
+                  <div className="card h-100">
+                    <div className="cardBody">
+                      <div className="d-flex align-items-center flex-grow-1">
+                        {region?.service_icon?.url && (
+                          <img
+                            src={region?.service_icon?.url}
+                            className="thumb me-2"
+                            alt={region?.service_icon?.title}
+                          />
+                        )}
+                        {region?.service_title && (
+                          <p className="mb-0 body-6 fw-bold">{region?.service_title}</p>
+                        )}
+                      </div>
+                      {region?.region_title && <h2 className="pt-3">{region?.region_title}</h2>}
                     </div>
-                    {region?.region_title && <h2 className="pt-3">{region?.region_title}</h2>}
+                    {region?.cta?.title && (
+                      <div className="CardFooter pb-3">
+                        <a
+                          href={`/login?region=${region?.region}`}
+                          className="body-4 fw-bold stretched-link"
+                        >
+                          <span className="link-basic-icon link-arrow">{region?.cta?.title}</span>
+                        </a>
+                      </div>
+                    )}
                   </div>
-                  {region?.cta?.title && (
-                    <div className="CardFooter pb-3">
-                      <a
-                        // href={loginUrl}
-                        className="body-4 fw-bold stretched-link"
-                        onClick={() =>
-                          loginClick(
-                            region?.region_title as string,
-                            region?.service_title as string
-                          )
-                        }
-                      >
-                        <span className="link-basic-icon link-arrow">{region?.cta?.title}</span>
-                      </a>
-                    </div>
-                  )}
                 </div>
-              </div>
-            ))}
+              ))}
+          </div>
         </div>
       </div>
     </div>

diff --git a/ui/src/pages/RegionalLogin/regionalLogin.interface.ts b/ui/src/pages/RegionalLogin/regionalLogin.interface.ts
@@ -8,6 +8,7 @@ export interface RegionType {
 
 interface Region {
   cta?: CTA;
+  region?: string;
   region_title?: string;
   service_icon?: Image;
   service_title?: string;

diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss
@@ -300,9 +300,11 @@ h4,
 h5,
 h6 {
   color: $color-font-black;
+  font-family: $font-family-primary;
 }
 p {
   color: $color-font-gray;
+  font-family: $font-family-primary;
   line-height: $line-height-default !important;
   margin: 0;
 }