feat(cli): Update the changed format looks nicer in the github comment (

#3216)

#### Motivation

The current gh comment for config changes looks not very good. Need to
update it clearer to read.

![image](https://github.com/linz/basemaps/assets/12163920/88fee870-0443-47fb-826d-46e3a5210884)


#### Modification

![image](https://github.com/linz/basemaps/assets/12163920/1bc13985-c076-401e-8a4f-f34d5a8cdf6f)

#### Checklist

- [ ] Tests updated
- [ ] Docs updated
- [ ] Issue linked in Title

packages/cli/src/cli/config/action.import.ts

@@ -332,6 +332,7 @@ export class CommandImport extends CommandLineAction {
     const styleUpdate = [];
     for (const change of this.changes) {
       if (mem.TileSet.is(change) && change.type === TileSetType.Vector) {
+        vectorUpdate.push(`## Vector data updates for ${change.id}`);
         const id = ConfigId.unprefix(ConfigPrefix.TileSet, change.id);
         for (const style of VectorStyles) {
           vectorUpdate.push(
@@ -340,9 +341,11 @@ export class CommandImport extends CommandLineAction {
         }
         const existingTileSet = await cfg.TileSet.get(change.id);
         const featureChanges = await diffVectorUpdate(change, existingTileSet);
-        vectorUpdate.push(featureChanges);
+        vectorUpdate.push(`## Feature updates for ${change.id}`);
+        vectorUpdate.push(...featureChanges);
       }
       if (mem.Style.is(change)) {
+        styleUpdate.push(`## Vector Style updated for ${change.id}`);
         const style = ConfigId.unprefix(ConfigPrefix.Style, change.id);
         styleUpdate.push(`* [${style}](${PublicUrlBase}?config=${this.config.value}&i=topographic&s=${style}&debug)\n`);
       }

packages/cli/src/cli/config/config.diff.ts

@@ -100,7 +100,10 @@ export function getVectorChanges(newLayer: StacLink | undefined, existingLayer:
 /**
  * Prepare and create pull request for the aerial tileset config
  */
-export async function diffVectorUpdate(tileSet: ConfigTileSet, existingTileSet: ConfigTileSet | null): Promise<string> {
+export async function diffVectorUpdate(
+  tileSet: ConfigTileSet,
+  existingTileSet: ConfigTileSet | null,
+): Promise<string[]> {
   // Vector layer only support for 3857 and only contain on layer inside
   const changes: string[] = [];
   const layer = tileSet.layers[0];
@@ -112,19 +115,17 @@ export async function diffVectorUpdate(tileSet: ConfigTileSet, existingTileSet:
 
   // Log all the new inserts for new tileset
   if (existingTileSet == null) {
-    changes.push(`New TileSet ts_${layer.name} with layer ${layer.name}.\n`);
     for (const l of ldsLayers) {
       const change = getVectorChanges(l, undefined);
       if (change != null) changes.push(change);
     }
-    return changes.join('\n');
+    return changes;
   }
 
   // Compare the different of existing tileset, we usually only have one layers in the vector tiles, so the loop won't fetch very much
   for (const l of existingTileSet.layers) {
     if (l[Epsg.Google.code] == null) continue;
     if (l.name !== layer.name) continue;
-    changes.push(`Update for TileSet ${existingTileSet.id} layer ${layer.name}.`);
     const existingCollectionPath = new URL('collection.json', l[Epsg.Google.code]);
     const existingCollection = await fsa.readJson<StacCollection>(existingCollectionPath);
     if (existingCollection == null) {
@@ -152,5 +153,5 @@ export async function diffVectorUpdate(tileSet: ConfigTileSet, existingTileSet:
     }
   }
 
-  return changes.join('\n');
+  return changes;
 }