New Features:

1. Settings now asks for GitHub Sync
2. New service for GitHub tasks
New Pages:
Bugs Corrected:
To Be Corrected:
0. On product delete, delete trace results
1. On product delete, delete flamegraph result

src/app/interfaces/git-sync-data.ts

@@ -0,0 +1,5 @@
+export interface GitSyncData {
+  key: string;
+  repo: string;
+  branch: string;
+}

src/app/pages/settings/settings.page.html

@@ -17,30 +17,36 @@
           <ion-card-content>
             <p  class="text-white"> Add a GitHub key to sync with your GitHub repo. You will be able to create tests with DevProbeAI. <a class="text-blue-500" href="https://github.com/settings/tokens">Get A GitHub Key Here !!!</a> </p>
           </ion-card-content>
+            <ion-card>
           <ion-card-content>
             <ion-label>GitHub Key</ion-label>
             <ion-input [(ngModel)]="gitKey" placeholder="Enter your key here..."  class="text-white"></ion-input>
           </ion-card-content>
+            </ion-card>
         </ion-card>
           <ion-card class="p-5">
             <ion-card-title class="text-2xl">2. Repo Name</ion-card-title>
             <ion-card-content>
               <p  class="text-white"> Add the name of the repo you want to sync with DevProbeAI. </p>
             </ion-card-content>
+            <ion-card>
             <ion-card-content>
               <ion-label>Repo Name</ion-label>
               <ion-input [(ngModel)]="repoName" placeholder="Enter your repo name here..."  class="text-white"></ion-input>
             </ion-card-content>
+            </ion-card>
           </ion-card>
           <ion-card class="p-5">
             <ion-card-title class="text-2xl">3. Branch Name</ion-card-title>
             <ion-card-content>
               <p class="text-white"> Add the name of the branch you want to sync with DevProbeAI. </p>
             </ion-card-content>
+            <ion-card>
             <ion-card-content>
               <ion-label>Branch Name</ion-label>
               <ion-input [(ngModel)]="branchName" placeholder="Enter your branch name here..."  class="text-white"></ion-input>
             </ion-card-content>
+            </ion-card>
         </ion-card>
           <ion-button  color='primary' class="min-w-full" (click)="syncRepo()">Sync Repo</ion-button>
         </ion-card>

src/app/pages/settings/settings.page.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import {AuthService} from "../../services/auth.service";
 import {Router} from "@angular/router";
-import {AlertController} from "@ionic/angular";
+import {AlertController, LoadingController} from "@ionic/angular";
+import {GithubService} from "../../services/github.service";
+import {User} from "../../interfaces/user";
+import {GitSyncData} from "../../interfaces/git-sync-data";
 
 @Component({
   selector: 'app-settings',
@@ -13,25 +16,63 @@ export class SettingsPage implements OnInit {
   repoName: string = '';
   branchName: string = '';
 
+  user: User = {};
+  orgname: string = '';
+
   constructor(
     private authService:AuthService,
     private router:Router,
-    private alertCtrl:AlertController
+    private alertCtrl:AlertController,
+    private githubService: GithubService,
+    private loadingCtrl: LoadingController
   ) { }
 
   ngOnInit() {
   }
 
+  async ionViewWillEnter() {
+
+    //Get User
+    this.user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user') || '{}') : null;
+    if (!this.user) {
+      await this.showAlert('No user found', 'Error');
+      return;
+    }
+
+    this.orgname = this.user.orgName || '';
+
+    await this.getSyncRepo();
+  }
+
   async logout() {
     await this.authService.logoutUser();
     await this.router.navigate(['/login']);
   }
 
+  async getSyncRepo() {
+    await this.showLoading();
+
+    const gitSyncData:GitSyncData =  await this.githubService.getSyncRepo(this.orgname);
+    if (gitSyncData) {
+      this.gitKey = gitSyncData.key;
+      this.repoName = gitSyncData.repo;
+      this.branchName = gitSyncData.branch;
+    }
+
+    await this.hideLoading();
+  }
+
   async syncRepo() {
+    await this.showLoading();
     if (!this.gitKey || !this.repoName || !this.branchName || this.gitKey === '' || this.repoName === '' || this.branchName === '') {
       await this.showAlert('Please fill in all fields', 'Error');
       return;
     }
+
+    await this.githubService.syncRepo(this.orgname, this.gitKey, this.repoName, this.branchName);
+
+    await this.hideLoading();
+
   }
 
   /**
@@ -48,4 +89,21 @@ export class SettingsPage implements OnInit {
     await alert.present();
   }
 
+
+  /**
+   * Show a loading spinner.
+   */
+  async showLoading() {
+    const loading = await this.loadingCtrl.create({
+    });
+    await loading.present();
+  }
+
+  /**
+   * Hide the loading spinner.
+   */
+  async hideLoading() {
+    await this.loadingCtrl.dismiss();
+  }
+
 }

src/app/services/github.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import {doc, Firestore, getDoc, setDoc} from "@angular/fire/firestore";
+import {HttpClient} from "@angular/common/http";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GithubService {
+
+  constructor(
+    private firestore:Firestore,
+    private httpClient:HttpClient
+  ) { }
+
+  async syncRepo(orgName:string,gitKey: string, repoName: string, branchName: string) {
+    const docRef = doc(this.firestore, 'teams', orgName);
+    const docSnap = await getDoc(docRef);
+
+    if (docSnap.exists()) {
+      const data = docSnap.data();
+      data['gitHub'] = {
+        key: gitKey,
+        repo: repoName,
+        branch: branchName
+      }
+      await setDoc(docRef, data);
+    }
+  }
+
+  async getSyncRepo(orgName:string) {
+    const docRef = doc(this.firestore, 'teams', orgName);
+    const docSnap = await getDoc(docRef);
+
+    if (docSnap.exists()) {
+      const data = docSnap.data();
+      return data['gitHub'];
+    }
+    return null;
+  }
+
+
+
+}

www/index.html

@@ -21,6 +21,6 @@
 
 <body>
   <app-root></app-root>
-<script src="runtime.a962ba6999a39963.js" type="module"></script><script src="polyfills.e9ea84778c1ce49f.js" type="module"></script><script src="main.9b47c2fd39f6f311.js" type="module"></script></body>
+<script src="runtime.0d8f211d1254d6f2.js" type="module"></script><script src="polyfills.e9ea84778c1ce49f.js" type="module"></script><script src="main.e1edb63313b27b47.js" type="module"></script></body>
 
 </html>