Contentstack new logo and regions update and [CMG-728]

CODEOWNERS

@@ -1 +1,9 @@
-* @contentstack/security-admin
+* @contentstack/tso-migration-pr-reviewers
+
+.github/workflows/sca-scan.yml @contentstack/security-admin
+
+**/.snyk @contentstack/security-admin
+
+.github/workflows/policy-scan.yml @contentstack/security-admin
+
+.github/workflows/issues-jira.yml @contentstack/security-admin

api/src/services/migration.service.ts

@@ -694,6 +694,29 @@ const startMigration = async (req: Request): Promise<any> => {
         );
         break;
       }
+      case CMS.AEM: {
+        await aemService.createAssets({ projectId, packagePath, destinationStackId: project?.current_test_stack_id });
+        await aemService.createEntry({
+          packagePath,
+          contentTypes,
+          master_locale: project?.stackDetails?.master_locale,
+          destinationStackId: project?.destination_stack_id,
+          projectId,
+          keyMapper: project?.mapperKeys,
+          project
+        })
+        await aemService?.createLocale(
+          req,
+          project?.destination_stack_id,
+          projectId,
+          project
+        );
+        await aemService?.createVersionFile(
+          project?.destination_stack_id
+        );
+        break;
+      }
+
       default:
         break;
     }

ui/src/cmsData/main_header.json

@@ -21,13 +21,13 @@
       "content_type": "image/svg+xml",
       "file_size": "10160",
       "tags": [],
-      "filename": "icon-cs-mobile.svg",
-      "url": "https://images.contentstack.io/v3/assets/blt7359e2a55efae483/blt0b9a8281aeac3ec0/664c27d3c9024c35b5ad593a/CS_logo.png",
+      "filename": "contentstack-logo.svg",
+      "url": "https://images.contentstack.io/v3/assets/blt77d44a06c81b1730/blt2e24a315fedaeaf7/68bc10f25f14881bc908b6c2/CS_OnlyLogo.webp",
       "ACL": [],
       "is_dir": false,
       "parent_uid": "blt8e7f7872baa3a09e",
       "_version": 1,
-      "title": "icon-cs-mobile.svg"
+      "title": "Contentstack"
     },
     "url": "/projects"
   }

ui/src/cmsData/region_login.json

@@ -2,7 +2,7 @@
   "title": "Account Login",
   "url": "/region-login",
   "heading": "Account Login",
-  "description": "Please select Contentstack <strong>North America (AWS, Azure or GCP)</strong> or Contentstack <strong>Europe (AWS or Azure)</strong> to continue",
+  "description": "Select <strong>North America</strong> (AWS, Azure or GCP); <strong>Europe</strong> (AWS, Azure or GCP); <strong>Australia</strong> (AWS) to continue.",
   "regions": [
     {
       "region": "NA",
@@ -128,6 +128,54 @@
       "region_title": "Europe",
       "cta": { "title": "Continue", "url": "/login" },
       "_metadata": { "uid": "cs7c90ee35480e165e" }
+    },
+    {
+      "region": "GCP_EU",
+      "service_icon": {
+        "uid": "blt85d2a7024c613199",
+        "created_at": "2023-10-31T07:00:56.567Z",
+        "updated_at": "2023-10-31T07:00:56.567Z",
+        "created_by": "bltb317ebe35429ebe6",
+        "updated_by": "bltb317ebe35429ebe6",
+        "content_type": "image/svg+xml",
+        "file_size": "821",
+        "tags": [],
+        "filename": "google-cloud_1.svg",
+        "url": "https://images.contentstack.io/v3/assets/bltd3620ec6418ad3ad/blt57dafa9c1472b46f/66a775b7d14106640a554ec7/google-cloud_1.svg",
+        "ACL": [],
+        "is_dir": false,
+        "parent_uid": null,
+        "_version": 1,
+        "title": "google-cloud_1.svg"
+      },
+      "service_title": "Google Cloud Platform",
+      "region_title": "Europe",
+      "cta": { "title": "Continue", "url": "/login" },
+      "_metadata": { "uid": "cs7c90ee35480e165e" }
+    },
+    {
+      "region": "AU",
+      "service_icon": {
+        "uid": "bltbe45879eac0025d8",
+        "created_at": "2023-10-31T06:59:22.783Z",
+        "updated_at": "2023-10-31T06:59:22.783Z",
+        "created_by": "bltb317ebe35429ebe6",
+        "updated_by": "bltb317ebe35429ebe6",
+        "content_type": "image/svg+xml",
+        "file_size": "92431",
+        "tags": [],
+        "filename": "aws.svg",
+        "url": "https://images.contentstack.io/v3/assets/bltd3620ec6418ad3ad/bltbe45879eac0025d8/6540a5ca1680320407c3a753/aws.svg",
+        "ACL": [],
+        "is_dir": false,
+        "parent_uid": null,
+        "_version": 1,
+        "title": "AWS"
+      },
+      "service_title": "Amazon Web Services",
+      "region_title": "Australia",
+      "cta": { "title": "Continue", "url": "/login" },
+      "_metadata": { "uid": "csf578f8fbea1ae0c0" }
     }
   ],
   "tags": [],

ui/src/components/AccountPage/index.scss

@@ -7,18 +7,19 @@
  * It contains styles for the layout, logo, background image, action section, content, heading, and circles.
  */
 .AccountPage {
-  align-items: stretch;
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
+
 
   &__logo {
-    display: inline-block;
-    height: 3.75rem;
-    left: 4%;
+    background-color: $color-gray-bg;
+    left: 0;
+    padding: 1rem;
     position: relative;
-    top: 5%;
+    top: 0;
+    width: 100%;
     z-index: 10;
+    img {
+      height: 1.5rem;
+    }
   }
 
   &__intro {
@@ -31,29 +32,22 @@
   }
 
   &__action {
-    flex: 0 0 65%;
-    max-width: 65%;
-    position: relative;
-    width: 65%;
-    z-index: 10;
-
-    &::before {
-      backdrop-filter: blur(104px);
-      background: $color-brand-white-base;
-      /* background: rgba(249, 251, 253, 0.5); */
-      content: '';
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
+    align-items: center;
+    background-color: $color-brand-white-base;
+    display: flex;
+    height: calc(100vh - 3.6rem);
+    justify-content: center;
   }
 
   &__content {
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 20;
+    // left: 50%;
+    // position: absolute;
+    // top: 50%;
+    // transform: translate(-50%, -50%);
+    // z-index: 20;
+    align-items: center;
+    display: flex;
+    justify-content: center;
   }
 
   &__heading {
@@ -175,6 +169,8 @@
   color: $color-font-base;
   font-size: 0.75rem;
   letter-spacing: 0.02em;
-  left: 2.5rem;
+  left: 0;
   position: absolute;
+  right: 0;
+  text-align: center;
 }

ui/src/components/AccountPage/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
 // Interface
 import { AccountObj } from './accountPage.interface';
 
@@ -15,17 +16,17 @@ const AccountPage = (props: AccountObj): JSX.Element => {
 
   const currentYear = new Date().getFullYear();
 
-  return (
-    // eslint-disable-next-line react/no-unknown-property
-    <div className="AccountPage" heap-ignore="true">
-      <div className="AccountPage__intro">
-        <img src="/images/ContentstackLogo.png" alt="Contentstack" className="AccountPage__logo" />
-        <div className="AccountPage__heading">
-          <h1 className="AccountPage__heading_title">{heading}</h1>
+  return (    
+    <div className="AccountPage">
+      <div className="AccountPage__logo">
+        <div className="container">
+          <img src="https://images.contentstack.io/v3/assets/blt77d44a06c81b1730/blt2e24a315fedaeaf7/68bc10f25f14881bc908b6c2/CS_OnlyLogo.webp?environment=production&width=128&quality=85&format=webp" alt="Contentstack" />
+          <img src="/images/ContentstackLogo.svg" alt="Contentstack" />
         </div>
       </div>
+
       <div className="AccountPage__action">
-        <div className="AccountPage__content">{props?.children}</div>
+        {props?.children}
         <p className="copyright_text">{`© ${currentYear} ${copyrightText}`}</p>
       </div>
     </div>

ui/src/components/MainHeader/index.scss

@@ -40,7 +40,6 @@
     a {
       align-items: center;
       display: flex;
-      height: 2.5rem;
       justify-content: center;
       padding: 0.5rem;
       text-decoration: none;

ui/src/components/MainHeader/index.tsx

@@ -169,7 +169,7 @@ const MainHeader = () => {
           <div className="logo" onClick={handleonClick}>
             <Tooltip position="right" content="Projects" wrapperElementType="div">
               <Link to={`${logo?.url}`} onClick={(e) => e.preventDefault()}>
-                <img src={logo?.image?.url} width={32} alt="Contentstack" />
+                <img src={logo?.image?.url} width={28} alt="Contentstack" />
               </Link>
             </Tooltip>
           </div>

ui/src/pages/Login/index.scss

@@ -3,7 +3,7 @@
 
 /* Login page , Reset Password , Forgot password , two-factor Authentication */
 .AccountForm {
-  width: 26.25rem;
+  width: 26.3rem;
 
   /* &.app-login {
 		width: 26.25rem;

ui/src/pages/Login/index.tsx

@@ -290,7 +290,7 @@ const Login: FC<IProps> = () => {
           <FinalForm
             onSubmit={onSubmit}
             render={({ handleSubmit }): JSX.Element => (
-              <form className="ml-16" onSubmit={handleSubmit}>
+              <form onSubmit={handleSubmit}>
                 <Field>
                   <FinalField name="tfa_token" validate={TFAValidation}>
                     {({ input, meta }): JSX.Element => (
@@ -366,7 +366,7 @@ const Login: FC<IProps> = () => {
       ) : (
         <div className="AccountForm AccountForm_login app-login">
           {login?.title && <h2 className="mb-40">{login?.title}</h2>}
-          <div className="ml-16">
+          <div>
             <FinalForm
               onSubmit={onSubmit}
               render={({ handleSubmit }): JSX.Element => {

ui/src/pages/RegionalLogin/index.tsx

@@ -41,7 +41,7 @@ const RegionalLogin = () => {
   return (
     <div className="d-flex vh-100 justify-content-center flex-column">
       <div className="mx-3">
-        <div className="container-fluid">
+        <div className="container">
           <div className="text-center mt-4">
             {heading && <h1>{heading}</h1>}
             {description && description != '' && (
@@ -53,7 +53,7 @@ const RegionalLogin = () => {
             {regions &&
               validateArray(regions) &&
               regions?.map((region, index) => (
-                <div key={`${index.toString()}`} className="col-md-4 col-lg-2 mb-4">
+                <div key={`${index.toString()}`} className="col-md-4 col-lg-3 mb-4">
                   <div className="card h-100">
                     <div className="cardBody">
                       <div className="d-flex align-items-center flex-grow-1">

ui/src/scss/_variables.scss

@@ -8,7 +8,7 @@ $color-base-white-5: #ffffff;
 $color-base-white-10: #f7f9fc;
 $color-base-black-base: #000000;
 $color-base-black-51: #00000033;
-$color-base-black-31: #0000001f;
+$color-base-black-31: #0000001f; 
 $color-base-black-36: #00000024;
 $color-base-purple: #c33cf8;
 $color-brand-draft-base: #0469e3;
@@ -34,6 +34,7 @@ $color-font-gray: #637392;
 $color-black-2121: #212121;
 $color-black-222: #222222;
 $color-placeholder: #767676;
+$color-gray-bg: #1a1919;
 
 $font-family-primary: 'Inter', sans-serif;
 $font-family-secondary: 'Montserrat', sans-serif;

ui/src/utilities/constants.ts

@@ -26,15 +26,19 @@ export const REGIONS = {
   AZURE_NA: 'AZURE_NA',
   EU: 'EU',
   AZURE_EU: 'AZURE_EU',
-  GCP_NA: 'GCP_NA'
+  GCP_NA: 'GCP_NA',
+  GCP_EU: 'GCP_EU',
+  AU: 'AU'
 };
 
 export const CS_URL: ObjectType = {
   NA: 'https://app.contentstack.com/#!',
   EU: 'https://eu-app.contentstack.com/#!',
   AZURE_NA: 'https://azure-na-app.contentstack.com/#!',
   AZURE_EU: 'https://azure-eu-app.contentstack.com/#!',
-  GCP_NA: 'https://gcp-na-app.contentstack.com/#!'
+  GCP_NA: 'https://gcp-na-app.contentstack.com/#!',
+  GCP_EU: 'https://gcp-eu-app.contentstack.com/#!',
+  AU: 'https://au-app.contentstack.com/#!'
 };
 
 export const HEADERS = {