[CMG-103] - UI for Mapping with group field

ui/src/cmsData/login.json

@@ -3,7 +3,7 @@
   "locale": "en-us",
   "uid": "blt058427c4131df78a",
   "_in_progress": false,
-  "copyrightText": "© 2023-2024 Contentstack Inc. All rights reserved.",
+  "copyrightText": "Contentstack Inc. All rights reserved.",
   "created_at": "2024-02-22T11:20:53.435Z",
   "created_by": "bltb317ebe35429ebe6",
   "heading": "Stacks Not Suites",

ui/src/components/AccountPage/index.tsx

@@ -10,6 +10,9 @@ import './index.scss';
 const AccountPage = (props: AccountObj): JSX.Element => {
   const { heading, subtitle, copyrightText } = props.data;
 
+  const currentYear = new Date().getFullYear();
+  const previousYear = currentYear - 1;
+
   return (
     // eslint-disable-next-line react/no-unknown-property
     <div className="AccountPage" heap-ignore="true">
@@ -32,8 +35,8 @@ const AccountPage = (props: AccountObj): JSX.Element => {
         <span className="AccountPage__circle AccountPage__circle_seven"></span>
       </div>
       <div className="AccountPage__action">
-        <div className="AccountPage__content">{props.children}</div>
-        <p className='copyright_text'>{copyrightText}</p>
+        <div className="AccountPage__content">{props?.children}</div>
+        <p className='copyright_text'>{`© ${previousYear}-${currentYear} ${copyrightText}`}</p>
       </div>
     </div>
   );

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

@@ -47,6 +47,7 @@ export interface ContentType {
 
 export interface FieldMapType {
   ContentstackFieldType: string;
+  child?: FieldMapType[] | undefined;
   backupFieldType: string;
   contentstackField: string;
   contentstackFieldUid: string;

ui/src/components/ContentMapper/index.tsx

@@ -140,6 +140,8 @@ const ContentMapper = () => {
 
   const [searchContentType, setSearchContentType] = useState('');
 
+  const [selectedFields, setSelectedFields] = useState<FieldMapType[]>([]);
+
   /** ALL HOOKS Here */
   const { projectId = '' } = useParams();
   const navigate = useNavigate();
@@ -387,6 +389,7 @@ const ContentMapper = () => {
   interface UidMap {
     [key: string]: boolean;
   }
+
   const rowIds = tableData.reduce<UidMap>((acc, item) => {
     acc[item?.id] = true;
     return acc;
@@ -474,7 +477,7 @@ const ContentMapper = () => {
             maxWidth="290px"
             isClearable={false}
             options={option}
-            // isDisabled={data?.otherCmsField === 'title' || data?.otherCmsField === 'url'}
+            isDisabled={data?.ContentstackFieldType === "group"}
           />
         </div>
         <Icon
@@ -652,6 +655,7 @@ const ContentMapper = () => {
       selectedContentType?.otherCmsUid &&
       OtherContentType?.label
     ) {
+
       setcontentTypeMapped((prevSelected) => ({
         ...prevSelected,
         [otherCmsTitle]: OtherContentType?.label
@@ -867,10 +871,11 @@ const ContentMapper = () => {
             <InfiniteScrollTable
               loading={loading}
               canSearch={true}
-              data={tableData}
+              data={tableData?.length ? [...tableData] : []}
               columns={columns}
               uniqueKey={'id'}
-              isRowSelect={true}
+              isRowSelect
+              // fullRowSelect
               itemStatusMap={itemStatusMap}
               totalCounts={totalCounts}
               searchPlaceholder={searchPlaceholder}
@@ -903,7 +908,6 @@ const ContentMapper = () => {
                 ),
                 showExportCta: true
               }}
-              rowDisableProp={{ key: '_invalid', value: true }}
             />
           </div>
 

ui/src/components/SchemaModal/index.scss

@@ -1,16 +1,20 @@
 @import '../../scss/variables';
 
+.schema {
+  min-height: 290px;
+}
 .entries-outline {
+  margin-left: 0.8rem;
   ul {
     padding: 0.625rem;
     padding-bottom: 0.3125rem;
     padding-top: 0;
     transition: opacity 0.2s linear;
     li {
-      color: #475161;
+      color: $color-font-base;
       cursor: pointer;
-      font-size: 1rem;
-      font-weight: 500;
+      font-size: $size-font-large;
+      font-weight: $font-weight-medium;
       padding: 0;
       white-space: nowrap;
       .iconsholder {
@@ -27,16 +31,56 @@
               path {
                 stroke: $color-brand-primary-base;
               }
+              &.chevron {
+                path {
+                  fill: $color-brand-primary-base;
+                  stroke: $color-brand-primary-base;
+                }
+              }
             }
           }
         }
+        .icons {
+          * {
+            pointer-events: none;
+            stroke: $color-font-active;
+          }
+          &.nested {
+            margin-left: -0.9375rem;
+          }
+        } 
+        &.active {
+          .icons {
+            svg {
+              path {
+                stroke: $color-brand-primary-base;
+              }
+              &.chevron {
+                path {
+                  fill: $color-brand-primary-base;
+                  stroke: $color-brand-primary-base;
+                }
+              }
+            }
+          }
+          & > .title {
+            color: $color-brand-primary-base;
+            font-weight: $font-weight-semi-bold;
+          }
+        }
       }
       .title {
-        color: #475161;
-        font-weight: 400;
+        color: $color-font-base;
+        font-size: $size-font-large;
+        font-weight: $font-weight-regular;
+        line-height: $line-height-reset!important;
         opacity: 1;
+        overflow: hidden;
+        padding: 0.625rem 0;
+        text-overflow: ellipsis;
         text-transform: capitalize;
         transition: opacity 0.5s linear, width 300ms linear;
+        white-space: nowrap;
         width: 12.5rem;
       }
       .icons {
@@ -45,9 +89,34 @@
         justify-content: flex-start;
         padding: 0.625rem 0;
         svg {
-          margin-right: 0.625rem;
+          margin-right: 0.375rem;
+          &.field-icon {
+            max-width: 12px;
+          }
         }
       }
+      .chevron {
+        display: inline-block;
+        transition: all 0.3s linear;
+        &.close {
+          transform: rotate(-90deg);
+      }
+      }
+      & > ul {
+        padding-left: 0.125rem;
+        & > li {
+          & > ul {
+            padding-left: 1.5625rem;
+          }
+        }
+      }
+    }
+    &.close {
+      height: 0 !important;
+      opacity: 0 !important;
+      overflow: hidden;
+      padding: 0 0.625rem;
+      transition: opacity 0.8s linear;
     }
   }
 }