From de7776e1285bd99a9d8c1902e242eb1c4256f449 Mon Sep 17 00:00:00 2001
From: William Newman <3382274+newmanw@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:50:50 -0600
Subject: [PATCH] Swagger module

---
 web-app/src/app/routing.module.ts             |  3 ++
 .../src/app/swagger/swagger.component.html    | 11 +++++
 .../src/app/swagger/swagger.component.scss    | 10 ++++
 .../src/app/swagger/swagger.component.spec.ts | 25 ++++++++++
 web-app/src/app/swagger/swagger.component.ts  | 46 +++++++++++++++++++
 web-app/src/app/swagger/swagger.module.ts     | 37 +++++++++++++++
 6 files changed, 132 insertions(+)
 create mode 100644 web-app/src/app/swagger/swagger.component.html
 create mode 100644 web-app/src/app/swagger/swagger.component.scss
 create mode 100644 web-app/src/app/swagger/swagger.component.spec.ts
 create mode 100644 web-app/src/app/swagger/swagger.component.ts
 create mode 100644 web-app/src/app/swagger/swagger.module.ts

diff --git a/web-app/src/app/routing.module.ts b/web-app/src/app/routing.module.ts
index ae6908c07..7658db64f 100644
--- a/web-app/src/app/routing.module.ts
+++ b/web-app/src/app/routing.module.ts
@@ -13,6 +13,9 @@ const appRoutes: Routes =[{
   },{
     path: 'profile',
     loadChildren: () => import('./user/profile/profile.module').then(m => m.ProfileModule)
+  },{
+    path: 'swagger',
+    loadChildren: () => import('./swagger/swagger.module').then(m => m.SwaggerModule)
   },{
     path: '',
     redirectTo: 'landing',
diff --git a/web-app/src/app/swagger/swagger.component.html b/web-app/src/app/swagger/swagger.component.html
new file mode 100644
index 000000000..4e191d82d
--- /dev/null
+++ b/web-app/src/app/swagger/swagger.component.html
@@ -0,0 +1,11 @@
+<mat-toolbar color="primary">
+  <div class="container">
+    <button mat-icon-button (click)="onBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+
+    <span class="title">Mage Swagger API</span>
+  </div>
+</mat-toolbar>
+
+<div class="swagger-container"></div>
\ No newline at end of file
diff --git a/web-app/src/app/swagger/swagger.component.scss b/web-app/src/app/swagger/swagger.component.scss
new file mode 100644
index 000000000..9f5c34782
--- /dev/null
+++ b/web-app/src/app/swagger/swagger.component.scss
@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.title  {
+  margin-left: 16px;
+}
\ No newline at end of file
diff --git a/web-app/src/app/swagger/swagger.component.spec.ts b/web-app/src/app/swagger/swagger.component.spec.ts
new file mode 100644
index 000000000..864b41402
--- /dev/null
+++ b/web-app/src/app/swagger/swagger.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SwaggerComponent } from './swagger.component';
+
+describe('SwaggerComponent', () => {
+  let component: SwaggerComponent;
+  let fixture: ComponentFixture<SwaggerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SwaggerComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SwaggerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
\ No newline at end of file
diff --git a/web-app/src/app/swagger/swagger.component.ts b/web-app/src/app/swagger/swagger.component.ts
new file mode 100644
index 000000000..420a2902d
--- /dev/null
+++ b/web-app/src/app/swagger/swagger.component.ts
@@ -0,0 +1,46 @@
+import { AfterViewInit, Component, ElementRef } from '@angular/core';
+import { LocalStorageService } from '../http/local-storage.service';
+import SwaggerUI from 'swagger-ui';
+import { Router } from '@angular/router';
+
+const DisableAuthorizePlugin = function () {
+  return {
+    wrapComponents: {
+      AuthorizeBtnContainer: () => () => null,
+      ServersContainer: () => () => null,
+      authorizeOperationBtn: () => () => null
+    }
+  };
+};
+
+@Component({
+  selector: 'swagger',
+  templateUrl: './swagger.component.html',
+  styleUrls: ['./swagger.component.scss']
+})
+export class SwaggerComponent implements AfterViewInit {
+
+  constructor(
+    private el: ElementRef,
+    private router: Router,
+    private localStorageService: LocalStorageService
+  ) {
+  }
+
+  ngAfterViewInit() {
+    SwaggerUI({
+      url: '/api/docs/openapi.yaml',
+      domNode: this.el.nativeElement.querySelector('.swagger-container'),
+      deepLinking: false,
+      plugins: [DisableAuthorizePlugin],
+      requestInterceptor: (request) => {
+        request.headers['Authorization'] = `Bearer ${this.localStorageService.getToken()}`
+        return request
+      },
+    });
+  }
+
+  onBack() : void {
+    this.router.navigate(['about']);
+  }
+}
\ No newline at end of file
diff --git a/web-app/src/app/swagger/swagger.module.ts b/web-app/src/app/swagger/swagger.module.ts
new file mode 100644
index 000000000..5b15cc371
--- /dev/null
+++ b/web-app/src/app/swagger/swagger.module.ts
@@ -0,0 +1,37 @@
+import { NgModule } from "@angular/core";
+import { SwaggerComponent } from "./swagger.component";
+import { RouterModule, Routes } from "@angular/router";
+import { MatIconModule } from "@angular/material/icon";
+import { CommonModule } from "@angular/common";
+import { MatButtonModule } from "@angular/material/button";
+import { MatToolbarModule } from "@angular/material/toolbar";
+
+const routes: Routes = [{
+  path: '',
+  component: SwaggerComponent
+}];
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule
+  ]
+})
+class AngularModule { }
+
+@NgModule({
+  declarations: [
+    SwaggerComponent
+  ],
+  imports: [
+    AngularModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [ RouterModule ]
+})
+export class SwaggerModule {
+}
\ No newline at end of file