Add the configuration screen for Giphy

src/api/admin/AdminNebService.ts

@@ -49,14 +49,18 @@ export class AdminNebService {
     @Path(":id/integration/:type/enabled")
     public async setIntegrationEnabled(@QueryParam("scalar_token") scalarToken: string, @PathParam("id") nebId: number, @PathParam("type") integrationType: string, request: SetEnabledRequest): Promise<any> {
         await AdminService.validateAndGetAdminTokenOwner(scalarToken);
-        return NebStore.setIntegrationEnabled(nebId, integrationType, request.enabled);
+        await NebStore.setIntegrationEnabled(nebId, integrationType, request.enabled);
+        Cache.for(CACHE_NEB).clear();
+        return {}; // 200 OK
     }
 
     @POST
     @Path(":id/integration/:type/config")
     public async setIntegrationConfig(@QueryParam("scalar_token") scalarToken: string, @PathParam("id") nebId: number, @PathParam("type") integrationType: string, newConfig: any): Promise<any> {
         await AdminService.validateAndGetAdminTokenOwner(scalarToken);
-        return NebStore.setIntegrationConfig(nebId, integrationType, newConfig);
+        await NebStore.setIntegrationConfig(nebId, integrationType, newConfig);
+        Cache.for(CACHE_NEB).clear();
+        return {}; // 200 OK
     }
 
     @GET

web/app/admin/neb/config/config-context.ts

@@ -0,0 +1,8 @@
+import { BSModalContext } from "ngx-modialog/plugins/bootstrap";
+import { FE_Integration } from "../../../shared/models/integration";
+import { FE_NebConfiguration } from "../../../shared/models/admin-responses";
+
+export class NebBotConfigurationDialogContext extends BSModalContext {
+    public integration: FE_Integration;
+    public neb: FE_NebConfiguration;
+}

web/app/admin/neb/config/config-dialog.scss

@@ -0,0 +1,3 @@
+.label-block {
+  margin-bottom: 15px;
+}

web/app/admin/neb/config/giphy/giphy.component.html

@@ -0,0 +1,33 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Giphy Configuration</h4>
+    </div>
+    <div class="dialog-content" *ngIf="isLoading">
+        <my-spinner></my-spinner>
+    </div>
+    <div class="dialog-content" *ngIf="!isLoading">
+        <label class="label-block">
+            Api Key
+            <span class="text-muted ">The API key from <a href="https://developers.giphy.com/" target="_blank">developers.giphy.com</a>.</span>
+            <input type="text" class="form-control"
+                   placeholder="your_api_key_here"
+                   [(ngModel)]="config.api_key" [disabled]="isUpdating"/>
+        </label>
+        <label class="label-block">
+            Image Size
+            <span class="text-muted ">GIFs can be large, and sometimes it is more desirable to have them downsized.</span>
+            <label class="checkbox">
+                <input type="checkbox" [(ngModel)]="config.use_downsized" [disabled]="isUpdating" />
+                Use downsized images
+            </label>
+        </label>
+    </div>
+    <div class="dialog-footer" *ngIf="!isLoading">
+        <button type="button" (click)="save()" title="save" class="btn btn-primary btn-sm">
+            <i class="far fa-save"></i> Save
+        </button>
+        <button type="button" (click)="dialog.close()" title="close" class="btn btn-secondary btn-sm">
+            <i class="far fa-times-circle"></i> Cancel
+        </button>
+    </div>
+</div>

web/app/admin/neb/config/giphy/giphy.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from "@angular/core";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { NebBotConfigurationDialogContext } from "../config-context";
+import { AdminNebApiService } from "../../../../shared/services/admin/admin-neb-api.service";
+import { FE_NebConfiguration } from "../../../../shared/models/admin-responses";
+import { FE_Integration } from "../../../../shared/models/integration";
+
+interface GiphyConfig {
+    api_key: string;
+    use_downsized: boolean;
+}
+
+@Component({
+    templateUrl: "./giphy.component.html",
+    styleUrls: ["./giphy.component.scss", "../config-dialog.scss"],
+})
+export class AdminNebGiphyConfigComponent implements ModalComponent<NebBotConfigurationDialogContext>, OnInit {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public config: GiphyConfig;
+    public integration: FE_Integration;
+    public neb: FE_NebConfiguration;
+
+    constructor(public dialog: DialogRef<NebBotConfigurationDialogContext>,
+                private adminNebApi: AdminNebApiService,
+                private toaster: ToasterService) {
+        this.neb = dialog.context.neb;
+        this.integration = dialog.context.integration;
+    }
+
+    public ngOnInit() {
+        this.adminNebApi.getIntegrationConfiguration(this.neb.id, this.integration.type).then(config => {
+            this.config = config;
+            this.isLoading = false;
+        }).catch(err => {
+            console.error(err);
+            this.toaster.pop("error", "Error loading configuration");
+        });
+    }
+
+    public save() {
+        this.isUpdating = true;
+        this.adminNebApi.setIntegrationConfiguration(this.neb.id, this.integration.type, this.config).then(() => {
+            this.toaster.pop("success", "Configuration updated");
+            this.dialog.close();
+        }).catch(err => {
+            this.isUpdating = false;
+            console.error(err);
+            this.toaster.pop("error", "Error updating integration");
+        });
+    }
+}

web/app/admin/neb/edit/edit.component.html

@@ -20,7 +20,7 @@
                     <td>{{ bot.displayName }}</td>
                     <td>{{ bot.description }}</td>
                     <td class="text-right">
-                        <span class="editButton" (click)="editBot(widget)"
+                        <span class="editButton" (click)="editBot(bot)"
                               *ngIf="bot.isEnabled && hasConfig(bot) && !isUpstream">
                             <i class="fa fa-pencil-alt"></i>
                         </span>

web/app/admin/neb/edit/edit.component.ts

@@ -5,6 +5,9 @@ import { ActivatedRoute } from "@angular/router";
 import { ToasterService } from "angular2-toaster";
 import { FE_Integration } from "../../../shared/models/integration";
 import { NEB_HAS_CONFIG } from "../../../shared/models/neb";
+import { Modal, overlayConfigFactory } from "ngx-modialog";
+import { AdminNebGiphyConfigComponent } from "../config/giphy/giphy.component";
+import { NebBotConfigurationDialogContext } from "../config/config-context";
 
 
 @Component({
@@ -21,7 +24,10 @@ export class AdminEditNebComponent implements OnInit, OnDestroy {
     private subscription: any;
     private overlappingTypes: string[] = [];
 
-    constructor(private nebApi: AdminNebApiService, private route: ActivatedRoute, private toaster: ToasterService) {
+    constructor(private nebApi: AdminNebApiService,
+                private route: ActivatedRoute,
+                private modal: Modal,
+                private toaster: ToasterService) {
     }
 
     public ngOnInit() {
@@ -39,7 +45,7 @@ export class AdminEditNebComponent implements OnInit, OnDestroy {
     }
 
     public hasConfig(bot: FE_Integration): boolean {
-        return NEB_HAS_CONFIG.indexOf(bot.type) !== -1;
+        return NEB_HAS_CONFIG.indexOf(bot.type) !== -1 && !this.isUpstream;
     }
 
     public async toggleBot(bot: FE_Integration) {
@@ -59,7 +65,7 @@ export class AdminEditNebComponent implements OnInit, OnDestroy {
         }
 
         // Only update the service configuration if
-        if (bot.isEnabled) {
+        if (bot.isEnabled && !this.isUpstream) {
             if (this.hasConfig(bot)) {
                 this.editBot(bot);
             } else {
@@ -75,7 +81,13 @@ export class AdminEditNebComponent implements OnInit, OnDestroy {
     }
 
     public editBot(bot: FE_Integration) {
-        console.log(bot);
+        this.modal.open(AdminNebGiphyConfigComponent, overlayConfigFactory({
+            neb: this.nebConfig,
+            integration: bot,
+
+            isBlocking: true,
+            size: 'lg',
+        }, NebBotConfigurationDialogContext));
     }
 
     private loadNeb(nebId: number) {

web/app/app.module.ts

@@ -54,6 +54,7 @@ import { AdminNebComponent } from "./admin/neb/neb.component";
 import { AdminEditNebComponent } from "./admin/neb/edit/edit.component";
 import { AdminAddSelfhostedNebComponent } from "./admin/neb/add-selfhosted/add-selfhosted.component";
 import { AdminNebAppserviceConfigComponent } from "./admin/neb/appservice-config/appservice-config.component";
+import { AdminNebGiphyConfigComponent } from "./admin/neb/config/giphy/giphy.component";
 
 @NgModule({
     imports: [
@@ -102,6 +103,7 @@ import { AdminNebAppserviceConfigComponent } from "./admin/neb/appservice-config
         AdminEditNebComponent,
         AdminAddSelfhostedNebComponent,
         AdminNebAppserviceConfigComponent,
+        AdminNebGiphyConfigComponent,
 
         // Vendor
     ],
@@ -125,6 +127,7 @@ import { AdminNebAppserviceConfigComponent } from "./admin/neb/appservice-config
         AdminWidgetEtherpadConfigComponent,
         AdminWidgetJitsiConfigComponent,
         AdminNebAppserviceConfigComponent,
+        AdminNebGiphyConfigComponent,
     ]
 })
 export class AppModule {