Merge pull request #631 from contentstack/feature/dropdown-field-choices

Feature/dropdown field choices

Author: sayalijoshi27

api/src/services/contentMapper.service.ts

@@ -1200,7 +1200,7 @@ const updateContentMapper = async (req: Request) => {
   )) as number;
 
   try {
-    ProjectModelLowdb.update((data: any) => {
+    await ProjectModelLowdb.update((data: any) => {
       data.projects[projectIndex].mapperKeys = content_mapper;
       data.projects[projectIndex].updated_at = new Date().toISOString();
     });

ui/package-lock.json

@@ -12,7 +12,7 @@
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "@types/react-redux": "^7.1.33",
-    "axios": "^1.8.2",
+    "axios": "^1.8.3",
     "bootstrap": "5.1.3",
     "chokidar": "^3.6.0",
     "final-form": "^4.20.10",

ui/package.json

@@ -182,3 +182,10 @@
   font-size: 14px;
   color: $color-stepper-title;
 }
+.Tag {
+  .Tag__item {
+    span {
+      line-height: $line-height-reset!important;
+    }
+  }  
+}

ui/src/components/AdvancePropertise/index.scss

@@ -169,7 +169,7 @@ const Fields: MappingFields = {
     options: {
       'Reference':'reference'
     },
-    type: 'reference',
+    type: '',
   },
   'dropdown': {
     label:'Dropdown',
@@ -205,12 +205,12 @@ const Fields: MappingFields = {
   'app':{
     label: 'Marketplace app',
     options: {'Marketplace app':'app'},
-    type:'app'
+    type:''
   },
   'extension':{
     label: 'Extension',
     options: {'Extension':'extension'},
-    type:'extension'
+    type:''
   }
 
 }
@@ -1240,7 +1240,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
 
   //utility function to map the source cms field type to content type field type
   function checkConditions(fieldTypeToMatch: string | string[], value: ContentTypesSchema, data: FieldMapType) {
-    const fieldTypes = new Set(['number', 'isodate', 'file', 'reference', 'boolean', 'group', 'link','global_field']);  
+    const fieldTypes = new Set(['number', 'isodate', 'file', 'reference', 'boolean', 'group', 'link','global_field','json','blocks']);  
     switch (fieldTypeToMatch) {
       case 'text':
         return (
@@ -1266,7 +1266,7 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
       case 'isodate':
         return value?.data_type === 'isodate';
       case 'json':
-        return value?.data_type === 'json';
+        return value?.data_type === 'json' && value?.field_metadata?.allow_json_rte;
       // case 'enum':
       //   return 'enum' in value;
       case 'radio':
@@ -1586,8 +1586,8 @@ const ContentMapper = forwardRef(({handleStepChange}: contentMapperProps, ref: R
         {(!OptionValue?.isDisabled || OptionValue?.label === 'Dropdown'||
          (data?.backupFieldType !== 'extension' && 
           data?.backupFieldType !== 'app' && 
-          data?.otherCmsField !== 'title' &&
-          data?.otherCmsField !== 'url')) && (
+          data?.backupFieldUid !== 'title' &&
+          data?.backupFieldUid !== 'url')) && (
           <div className='advanced-setting-button'>
             <Tooltip
               content="Advanced properties" 

ui/src/components/ContentMapper/index.tsx

@@ -88,9 +88,6 @@
         padding: 0.625rem 0;
         svg {
           margin-right: 0.375rem;
-          &.field-icon {
-            max-width: 12px;
-          }
         }
       }
       .chevron {

ui/src/components/SchemaModal/index.scss

@@ -12,36 +12,38 @@ import './index.scss';
 // Function for get icons
 const getTopLevelIcons = (field: FieldMapType) => {
   const icons: Icons = {
-    title: 'StarSmall',
-    text: 'SingleLineTextSmall',
-    multitext: 'MultiLineTextSmall',
-    rte: 'RichTextEditorSmall',
-    jsonRte: 'SuperchargedRte',
-    markdown: 'MarkdownSmall',
-    select: 'SelectSmall',
-    number: 'NumberSmall',
-    boolean: 'BooleanSmall',
-    isodate: 'DateSmall',
-    file: 'FileSmall',
-    reference: 'ReferenceSmall',
-    group: 'GroupSmall',
-    global_field: 'GlobalSmall',
-    blocks: 'ModularBlocksSmall',
-    link: 'LinkSmall',
+    title: 'Title',
+    text: 'SingleLineText',
+    multitext: 'MultiLineText',
+    rte: 'RichTextEditor',
+    jsonRte: 'JsonRichTextEditor',
+    markdown: 'Markdown',
+    select: 'Select',
+    number: 'Number',
+    boolean: 'Boolean',
+    isodate: 'Date',
+    file: 'File',
+    reference: 'Reference',
+    group: 'Group',
+    global_field: 'Global',
+    blocks: 'ModularBlocks',
+    link: 'Link',
     bullet: 'Bullet',
-    custom: 'CustomSmall',
-    tag: 'TagSmall',
-    experience_container: 'PersonalizationLogoGreySmall'
+    custom: 'Custom',
+    tag: 'Tag',
+    extension: 'Extension'
   };
 
   if (
-    field?.contentstackFieldType === 'Single Line Textbox' ||
-    field?.contentstackFieldType === 'single_line_text'
+    field?.contentstackFieldType === 'text'
   ) {
     return icons['title'];
   }
 
-  if (field?.contentstackFieldType === 'URL' || field?.contentstackFieldType === 'url') {
+  if (field?.contentstackFieldType === 'url') {
+    return icons['text'];
+  }
+  if (field?.contentstackFieldType === 'single_line_text') {
     return icons['text'];
   }
 
@@ -58,14 +60,11 @@ const getTopLevelIcons = (field: FieldMapType) => {
     return icons['select'];
   }
 
-  if (field?.contentstackFieldType === 'Date') {
+  if (field?.contentstackFieldType === 'isodate') {
     return icons['isodate'];
   }
 
-  if (
-    field?.contentstackFieldType === 'Multi Line Textbox' ||
-    field?.contentstackFieldType === 'multi_line_text'
-  ) {
+  if (field?.contentstackFieldType === 'multi_line_text') {
     return icons['multitext'];
   }
 
@@ -76,12 +75,12 @@ const getTopLevelIcons = (field: FieldMapType) => {
     return icons['rte'];
   }
 
-  if (
-    field?.contentstackFieldType === 'JSON Rich Text Editor' ||
-    field?.contentstackFieldType === 'json'
-  ) {
+  if (field?.contentstackFieldType === 'json') {
     return icons['jsonRte'];
   }
+  if (field?.contentstackFieldType === 'file') {
+    return icons['file'];
+  }
 
   if (field?.contentstackFieldType === 'Link') {
     return icons['link'];
@@ -99,6 +98,14 @@ const getTopLevelIcons = (field: FieldMapType) => {
     return icons['blocks'];
   }
 
+  if (field?.contentstackFieldType === 'app') {
+    return icons['custom'];
+  }
+
+  if (field?.contentstackFieldType === 'extension') {
+    return icons['extension'];
+  }
+
   return icons[field?.contentstackFieldType as keyof Icons];
 };
 
@@ -180,7 +187,7 @@ const TreeView = ({ schema = [] }: schemaType) => {
                   {hasNestedValue(field) && (
                     <Icon className={`chevron ${index ? '' : 'close'} `} icon="ChevronExtraSmall" />
                   )}
-                  <Icon icon={getTopLevelIcons(field) as string} className="field-icon" />
+                  <Icon icon={getTopLevelIcons(field) as string} className="field-icon" version='v2' size='small' />
                 </span>
                 <span className="field-title">
                   {getChildFieldName(field?.otherCmsField, item?.otherCmsField)}
@@ -222,7 +229,7 @@ const TreeView = ({ schema = [] }: schemaType) => {
                   >
                     <span className={`icons ${hasNested ? 'nested' : ''}`}>
                       {hasNested && <Icon className={'chevron'} icon="ChevronExtraSmall" />}
-                      <Icon className={'fieldicon'} icon={getTopLevelIcons(item) as string} />
+                      <Icon className={'fieldicon'} icon={getTopLevelIcons(item) as string} version='v2' size='small' />
                     </span>
                     <span className={`field-title`}>{item?.otherCmsField}</span>
                   </button>

ui/src/components/SchemaModal/index.tsx

@@ -21,6 +21,7 @@ export interface Icons {
   custom?: string;
   tag?: string;
   experience_container?: string;
+  extension?: string;
 }
 export interface SchemaProps {
   contentType?: string;