Sorting tiles before they're stored on the component

src/app/executions/execution/execution-detail/execution-detail.component.ts

@@ -89,11 +89,16 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   refreshTiles(newTiles: Tile[]) {
-      this.tiles = new Map<string, Tile>(newTiles.map(tile => {return [tile.name, tile]}));
-      for (const controlName in this.tilesFormGroup.controls) {
-        this.tilesFormGroup.removeControl(controlName);
-      }
-      Array.from(this.tiles.keys()).forEach(tile => this.tilesFormGroup.addControl(tile, new FormControl(true)));
+    // Sort newTiles by name before they're stored on this component
+    this.tiles = new Map<string, Tile>(
+      newTiles
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }))
+        .map(tile => [tile.name, tile])
+    );
+    for (const controlName in this.tilesFormGroup.controls) {
+      this.tilesFormGroup.removeControl(controlName);
+    }
+    Array.from(this.tiles.keys()).forEach(tile => this.tilesFormGroup.addControl(tile, new FormControl(true)));
   }
 
   copyToClipboard(text: string): void {