feat: add section label to import mapping

packages/webapp/src/containers/Import/ImportFileMapping.module.scss

@@ -1,6 +1,16 @@
+.group {
+  margin-top: 1.4rem;
+}
+
+.groupTitle {
+  margin-bottom: 1.2rem;
+  color: #738091;
+  font-weight: 700;
+  padding: 0 11px;
+}
+
 .table {
   width: 100%;
-  margin-top: 1.4rem;
 
   th.label,
   td.label{

packages/webapp/src/containers/Import/ImportFileMapping.tsx

@@ -27,7 +27,7 @@ export function ImportFileMapping() {
           {entityColumns.map((entityColumn, index) => (
             <ImportFileMappingGroup
               groupKey={entityColumn.groupKey}
-              groupName={entityColumn.groupName}
+              groupLabel={entityColumn.groupLabel}
               fields={entityColumn.fields}
             />
           ))}
@@ -40,7 +40,7 @@ export function ImportFileMapping() {
 
 interface ImportFileMappingGroupProps {
   groupKey: string;
-  groupName: string;
+  groupLabel: string;
   fields: any;
 }
 
@@ -50,12 +50,12 @@ interface ImportFileMappingGroupProps {
  */
 function ImportFileMappingGroup({
   groupKey,
-  groupName,
+  groupLabel,
   fields,
 }: ImportFileMappingGroupProps) {
   return (
-    <Box>
-      {groupName && <h3>{groupName}</h3>}
+    <Box className={styles.group}>
+      {groupLabel && <h3 className={styles.groupTitle}>{groupLabel}</h3>}
 
       <table className={clsx('bp4-html-table', styles.table)}>
         <thead>

packages/webapp/src/containers/Import/ImportFileProvider.tsx

@@ -17,7 +17,7 @@ export type EntityColumnField = {
 
 export interface EntityColumn {
   groupKey: string;
-  groupName: string;
+  groupLabel: string;
   fields: EntityColumnField[];
 }
 export type SheetColumn = string;