feat: Instance Admin Panel: Configuration Settings (#2800)

* feat: Instance Admin Panel: Configuration Settings

* refactor: seprate Google and Github form into independent components.

* feat: add admin auth wrapper and access denied page.

* style: design updates.

web/store/instance/instance.store.ts

@@ -2,7 +2,7 @@ import { observable, action, computed, makeObservable, runInAction } from "mobx"
 // store
 import { RootStore } from "../root";
 // types
-import { IInstance } from "types/instance";
+import { IInstance, IInstanceConfiguration, IFormattedInstanceConfiguration } from "types/instance";
 // services
 import { InstanceService } from "services/instance.service";
 
@@ -11,19 +11,21 @@ export interface IInstanceStore {
   error: any | null;
   // issues
   instance: IInstance | null;
-  configurations: any | null;
+  configurations: IInstanceConfiguration[] | null;
   // computed
+  formattedConfig: IFormattedInstanceConfiguration | null;
   // action
   fetchInstanceInfo: () => Promise<IInstance>;
   updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
   fetchInstanceConfigurations: () => Promise<any>;
+  updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
 }
 
 export class InstanceStore implements IInstanceStore {
   loader: boolean = false;
   error: any | null = null;
   instance: IInstance | null = null;
-  configurations: any | null = null;
+  configurations: IInstanceConfiguration[] | null = null;
   // service
   instanceService;
   rootStore;
@@ -36,17 +38,31 @@ export class InstanceStore implements IInstanceStore {
       instance: observable.ref,
       configurations: observable.ref,
       // computed
-      //   getIssueType: computed,
+      formattedConfig: computed,
       // actions
       fetchInstanceInfo: action,
       updateInstanceInfo: action,
       fetchInstanceConfigurations: action,
+      updateInstanceConfigurations: action,
     });
 
     this.rootStore = _rootStore;
     this.instanceService = new InstanceService();
   }
 
+  /**
+   * computed value for instance configurations data for forms.
+   * @returns configurations in the form of {key, value} pair.
+   */
+  get formattedConfig() {
+    if (!this.configurations) return null;
+
+    return this.configurations?.reduce((formData: IFormattedInstanceConfiguration, config) => {
+      formData[config.key] = config.value;
+      return formData;
+    }, {});
+  }
+
   /**
    * fetch instace info from API
    */
@@ -58,7 +74,7 @@ export class InstanceStore implements IInstanceStore {
       });
       return instance;
     } catch (error) {
-      console.log("Error while fetching the instance");
+      console.log("Error while fetching the instance info");
       throw error;
     }
   };
@@ -104,7 +120,37 @@ export class InstanceStore implements IInstanceStore {
       });
       return configurations;
     } catch (error) {
-      console.log("Error while fetching the instance");
+      console.log("Error while fetching the instance configurations");
+      throw error;
+    }
+  };
+
+  /**
+   * update instance configurations
+   * @param data
+   */
+  updateInstanceConfigurations = async (data: Partial<IFormattedInstanceConfiguration>) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.instanceService.updateInstanceConfigurations(data);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.configurations = this.configurations ? [...this.configurations, ...response] : response;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
       throw error;
     }
   };