ocket8888 commented on code in PR #7358:
URL: https://github.com/apache/trafficcontrol/pull/7358#discussion_r1149749519


##########
experimental/traffic-portal/src/app/api/server.service.ts:
##########
@@ -186,4 +187,33 @@ export class ServerService extends APIService {
 
                return this.put(`servers/${id}/status`, {offlineReason, 
status}).toPromise();
        }
+
+       /**
+        * Creating new Status.
+        *
+        * @param payload containes name and description for the status.

Review Comment:
   spelling/grammar <del>c</del>ontain<del>e</del>s ... -> <ins>C</ins>ontains 
...



##########
experimental/traffic-portal/src/app/api/server.service.ts:
##########
@@ -186,4 +187,33 @@ export class ServerService extends APIService {
 
                return this.put(`servers/${id}/status`, {offlineReason, 
status}).toPromise();
        }
+
+       /**
+        * Creating new Status.
+        *
+        * @param payload containes name and description for the status.
+        * @returns The 'response' property of the TO status response. See TO 
API docs.
+        */
+       public async createStatus(payload: RequestStatus): 
Promise<ResponseStatus> {
+               return this.post<ResponseStatus>("statuses", 
payload).toPromise();
+       }
+
+       /**
+        * Updates status Details.
+        *
+        * @param payload containes name and description for the status., 
unique identifier thereof.
+        * @param id The Status ID
+        */
+       public async updateStatusDetail(payload: ResponseStatus, id: number): 
Promise<ResponseStatus> {

Review Comment:
   this follows the pattern `{{operation}}{{thing}}Detail` but every other 
method is just `{{operation}}{{thing}}` - why?
   
   Also note that a `ResponseStatus` includes an `id`, so you don't need the 
second argument here.



##########
experimental/traffic-portal/src/app/api/server.service.ts:
##########
@@ -186,4 +187,33 @@ export class ServerService extends APIService {
 
                return this.put(`servers/${id}/status`, {offlineReason, 
status}).toPromise();
        }
+
+       /**
+        * Creating new Status.
+        *
+        * @param payload containes name and description for the status.
+        * @returns The 'response' property of the TO status response. See TO 
API docs.
+        */
+       public async createStatus(payload: RequestStatus): 
Promise<ResponseStatus> {
+               return this.post<ResponseStatus>("statuses", 
payload).toPromise();
+       }
+
+       /**
+        * Updates status Details.
+        *
+        * @param payload containes name and description for the status., 
unique identifier thereof.

Review Comment:
   same as above
   
   also, though, has an extra phrase: `, unique identifier thereof.` which 
doesn't seem to belong there. 



##########
experimental/traffic-portal/src/app/core/core.module.ts:
##########
@@ -124,6 +128,10 @@ export const ROUTES: Routes = [
                RegionsTableComponent,
                RegionDetailComponent,
                CacheGroupDetailsComponent,
+               StatusesTableComponent,
+               StatusDetailsComponent,
+               TypesTableComponent,
+               TypeDetailComponent,

Review Comment:
   these lines duplicate the "Types" component declarations (which appear 
below).



##########
experimental/traffic-portal/src/app/core/statuses/status-details/status-details.component.spec.ts:
##########
@@ -0,0 +1,76 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HttpClientModule } from "@angular/common/http";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { RouterTestingModule } from "@angular/router/testing";
+import { Observable, ReplaySubject, of } from "rxjs";
+
+import { ServerService } from "src/app/api";
+import { NavigationService } from 
"src/app/shared/navigation/navigation.service";
+
+import { StatusDetailsComponent } from "./status-details.component";
+
+/**
+ * Define the MockDialog
+ */
+class MockDialog {
+
+       /**
+        * Fake opens the dialog
+        *
+        * @returns unknown
+        */
+       public open(): unknown {
+               return {
+                       afterClosed: (): Observable<boolean> => of(true)
+               };
+       }
+}
+
+describe("StatusDetailsComponent", () => {
+       let component: StatusDetailsComponent;
+       let fixture: ComponentFixture<StatusDetailsComponent>;
+
+       beforeEach(async () => {
+
+               const navSvc = jasmine.createSpyObj([], { headerHidden: new 
ReplaySubject<boolean>(), headerTitle: new ReplaySubject<string>() });
+
+               await TestBed.configureTestingModule({
+                       declarations: [StatusDetailsComponent],
+                       imports: [
+                               HttpClientModule,
+                               RouterTestingModule,
+                               FormsModule,
+                               ReactiveFormsModule
+                       ],
+                       providers: [
+                               { provide: MatDialog, useClass: MockDialog },
+                               { provide: NavigationService, useValue: navSvc 
},
+                               ServerService
+                       ]
+               })
+                       .compileComponents();
+               fixture = TestBed.createComponent(StatusDetailsComponent);
+               component = fixture.componentInstance;
+               fixture.detectChanges();
+       });
+
+       it("should create", () => {
+               expect(component).toBeTruthy();
+       });

Review Comment:
   the test case should cover more than just the component's creation



##########
experimental/traffic-portal/.eslintrc.json:
##########
@@ -237,7 +237,12 @@
                                                "enableFixer": false
                                        }
                                ],
-                               "@typescript-eslint/unbound-method": "error",
+                               "@typescript-eslint/unbound-method": [
+                                       "error",
+                                       {
+                                               "ignoreStatic": true
+                                       }
+                               ],

Review Comment:
   We can't add this exception in general, because [the `this` variable in 
"static" methods is bound to the class 
itself](https://www.typescriptlang.org/play?#code/MYGwhgzhAEAqCmEAu0DeAoaXoAcCuARiAJbDTJhKnQCOeiSAFAJQBc0AbgPbEAmambEOBcAdhC4h4AOhBcA5oyQALYhGYBuQVgC+6PegTJpdBiyA)
   
   If a method is _truly_ static in that it doesn't reference `this` at all, 
then it's safe to use unbound, but unlike, say, Python, TypeScript/JavaScript 
doesn't distinguish between "static" methods and "class" methods, so in general 
this is still unsafe.



##########
experimental/traffic-portal/src/app/api/server.service.ts:
##########
@@ -186,4 +187,33 @@ export class ServerService extends APIService {
 
                return this.put(`servers/${id}/status`, {offlineReason, 
status}).toPromise();
        }
+
+       /**
+        * Creating new Status.
+        *
+        * @param payload containes name and description for the status.
+        * @returns The 'response' property of the TO status response. See TO 
API docs.
+        */
+       public async createStatus(payload: RequestStatus): 
Promise<ResponseStatus> {
+               return this.post<ResponseStatus>("statuses", 
payload).toPromise();
+       }
+
+       /**
+        * Updates status Details.
+        *
+        * @param payload containes name and description for the status., 
unique identifier thereof.
+        * @param id The Status ID
+        */
+       public async updateStatusDetail(payload: ResponseStatus, id: number): 
Promise<ResponseStatus> {
+               return this.put<ResponseStatus>(`statuses/${id}`, 
payload).toPromise();
+       }
+
+       /**
+        * Deletes an existing Status.
+        *
+        * @param id The Status ID
+        */
+       public async deleteStatus(id: number): Promise<void> {

Review Comment:
   This should also accept an entire `ResponseStatus`



##########
experimental/traffic-portal/src/app/core/statuses/status-details/status-details.component.ts:
##########
@@ -0,0 +1,152 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ResponseStatus } from "trafficops-types";
+
+import { ServerService } from "src/app/api";
+import { DecisionDialogComponent, DecisionDialogData } from 
"src/app/shared/dialogs/decision-dialog/decision-dialog.component";
+import { NavigationService } from 
"src/app/shared/navigation/navigation.service";
+
+/**
+ * StatusDetailsComponent is the controller for a status "details" page.
+ */
+@Component({
+       selector: "tp-status-details",
+       styleUrls: ["./status-details.component.scss"],
+       templateUrl: "./status-details.component.html",
+})
+export class StatusDetailsComponent implements OnInit {
+
+       /** Status ID expected from the route param using which we identify 
whether we are creating new status or load existing status */
+       public id: string | number | null = null;

Review Comment:
   `null` doesn't represent a valid Status identifier, so I think it'd be best 
to not allow that to ever be the case.
   
   Also if instead of using `string` you used a literal type i.e. `"new"`, it 
would make type checking much easier, because you would know that if it isn't 
the string `"new"` then it's not a string at all.



##########
experimental/traffic-portal/src/app/core/statuses/status-details/status-details.component.ts:
##########
@@ -0,0 +1,152 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ResponseStatus } from "trafficops-types";
+
+import { ServerService } from "src/app/api";
+import { DecisionDialogComponent, DecisionDialogData } from 
"src/app/shared/dialogs/decision-dialog/decision-dialog.component";
+import { NavigationService } from 
"src/app/shared/navigation/navigation.service";
+
+/**
+ * StatusDetailsComponent is the controller for a status "details" page.
+ */
+@Component({
+       selector: "tp-status-details",
+       styleUrls: ["./status-details.component.scss"],
+       templateUrl: "./status-details.component.html",
+})
+export class StatusDetailsComponent implements OnInit {
+
+       /** Status ID expected from the route param using which we identify 
whether we are creating new status or load existing status */
+       public id: string | number | null = null;
+
+       /** Loader status for the actions */
+       public loading = false;
+
+       /** All details of status requested */
+       public statusDetails!: ResponseStatus;
+
+       /** Reactive form intialized to creat / edit status details */
+       public statusDetailsForm: FormGroup = new FormGroup({
+               description: new FormControl("", Validators.required),
+               name: new FormControl("", Validators.required),
+       });
+
+       /**
+        * Constructor.
+        *
+        * @param serverService The Servers API which is used to provide row 
data.
+        * @param route A reference to the route of this view which is used to 
get the 'id' query parameter of status.
+        * @param router Angular router
+        * @param dialog Dialog manager
+        * @param fb Form builder
+        * @param navSvc Manages the header
+        */
+       constructor(
+               private readonly serverService: ServerService,
+               private readonly route: ActivatedRoute,
+               private readonly router: Router,
+               private readonly dialog: MatDialog,
+               private readonly navSvc: NavigationService,
+       ) {
+               // Getting id from the route
+               this.id = this.route.snapshot.paramMap.get("id");
+       }
+
+       /** Initializes table data, loading it from Traffic Ops. */
+       public ngOnInit(): void {
+
+               // we check whether params is a number if not we shall assume 
user wants to add a new status.
+               if (this.id !== "new") {
+                       this.loading = true;
+                       this.statusDetailsForm.addControl("id", new 
FormControl(""));
+                       this.statusDetailsForm.addControl("lastUpdated", new 
FormControl(""));
+                       this.getStatusDetails();
+               } else {
+                       this.navSvc.headerTitle.next("New Status");
+               }
+       }
+
+       /**
+        * Reloads the servers table data.
+        *
+        * @param id is the id passed in route for this page if this is a edit 
view.
+        */
+       public async getStatusDetails(): Promise<void> {
+               const id = Number(this.id); // id Type 'null' is not assignable 
to type 'string'
+               this.statusDetails = await this.serverService.getStatuses(id);
+
+               // Set page title with status Name
+               this.navSvc.headerTitle.next(`Status 
#${this.statusDetails.name}`);
+
+               // Patch the form with existing data we got from service 
requested above.
+               this.statusDetailsForm.patchValue(this.statusDetails);
+               this.loading = false;
+       }
+
+       /**
+        * On submitting the form we check for whether we are performing Create 
or Edit
+        */
+       public onSubmit(): void {
+               if (this.id === "new") {
+                       this.createStatus();
+
+               } else {
+                       this.updateStatus();
+               }
+       }
+
+       /**
+        * For Creating a new status
+        */
+       public createStatus(): void {
+               
this.serverService.createStatus(this.statusDetailsForm.value).then((res: 
ResponseStatus) => {

Review Comment:
   we should use `async`/`await` instead of `.then`



##########
experimental/traffic-portal/src/app/core/statuses/status-details/status-details.component.ts:
##########
@@ -0,0 +1,152 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ResponseStatus } from "trafficops-types";
+
+import { ServerService } from "src/app/api";
+import { DecisionDialogComponent, DecisionDialogData } from 
"src/app/shared/dialogs/decision-dialog/decision-dialog.component";
+import { NavigationService } from 
"src/app/shared/navigation/navigation.service";
+
+/**
+ * StatusDetailsComponent is the controller for a status "details" page.
+ */
+@Component({
+       selector: "tp-status-details",
+       styleUrls: ["./status-details.component.scss"],
+       templateUrl: "./status-details.component.html",
+})
+export class StatusDetailsComponent implements OnInit {
+
+       /** Status ID expected from the route param using which we identify 
whether we are creating new status or load existing status */
+       public id: string | number | null = null;
+
+       /** Loader status for the actions */
+       public loading = false;
+
+       /** All details of status requested */
+       public statusDetails!: ResponseStatus;
+
+       /** Reactive form intialized to creat / edit status details */
+       public statusDetailsForm: FormGroup = new FormGroup({
+               description: new FormControl("", Validators.required),
+               name: new FormControl("", Validators.required),
+       });
+
+       /**
+        * Constructor.
+        *
+        * @param serverService The Servers API which is used to provide row 
data.
+        * @param route A reference to the route of this view which is used to 
get the 'id' query parameter of status.
+        * @param router Angular router
+        * @param dialog Dialog manager
+        * @param fb Form builder
+        * @param navSvc Manages the header
+        */
+       constructor(
+               private readonly serverService: ServerService,
+               private readonly route: ActivatedRoute,
+               private readonly router: Router,
+               private readonly dialog: MatDialog,
+               private readonly navSvc: NavigationService,
+       ) {
+               // Getting id from the route
+               this.id = this.route.snapshot.paramMap.get("id");
+       }
+
+       /** Initializes table data, loading it from Traffic Ops. */
+       public ngOnInit(): void {
+
+               // we check whether params is a number if not we shall assume 
user wants to add a new status.
+               if (this.id !== "new") {
+                       this.loading = true;
+                       this.statusDetailsForm.addControl("id", new 
FormControl(""));
+                       this.statusDetailsForm.addControl("lastUpdated", new 
FormControl(""));
+                       this.getStatusDetails();
+               } else {
+                       this.navSvc.headerTitle.next("New Status");
+               }
+       }
+
+       /**
+        * Reloads the servers table data.
+        *
+        * @param id is the id passed in route for this page if this is a edit 
view.
+        */
+       public async getStatusDetails(): Promise<void> {
+               const id = Number(this.id); // id Type 'null' is not assignable 
to type 'string'
+               this.statusDetails = await this.serverService.getStatuses(id);
+
+               // Set page title with status Name
+               this.navSvc.headerTitle.next(`Status 
#${this.statusDetails.name}`);
+
+               // Patch the form with existing data we got from service 
requested above.
+               this.statusDetailsForm.patchValue(this.statusDetails);
+               this.loading = false;
+       }
+
+       /**
+        * On submitting the form we check for whether we are performing Create 
or Edit
+        */
+       public onSubmit(): void {
+               if (this.id === "new") {
+                       this.createStatus();
+
+               } else {
+                       this.updateStatus();
+               }
+       }
+
+       /**
+        * For Creating a new status
+        */
+       public createStatus(): void {
+               
this.serverService.createStatus(this.statusDetailsForm.value).then((res: 
ResponseStatus) => {
+                       if (res) {
+                               this.statusDetails = res;
+                               this.router.navigate(["/core/statuses"]);
+                       }
+               });
+       }
+
+       /**
+        * For updating the Status
+        */
+       public updateStatus(): void {
+               
this.serverService.updateStatusDetail(this.statusDetailsForm.value, 
Number(this.id));
+       }
+
+       /**
+        * Deleteting status
+        */
+       public async deleteStatus(): Promise<void> {
+               const ref = this.dialog.open<DecisionDialogComponent, 
DecisionDialogData, boolean>(DecisionDialogComponent, {
+                       data: {
+                               message: `This action CANNOT be undone. This 
will permanently delete '${this.statusDetails?.name}'.`,

Review Comment:
   this coalescence operator should be unnecessary



##########
experimental/traffic-portal/src/app/core/statuses/status-details/status-details.component.ts:
##########
@@ -0,0 +1,152 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ResponseStatus } from "trafficops-types";
+
+import { ServerService } from "src/app/api";
+import { DecisionDialogComponent, DecisionDialogData } from 
"src/app/shared/dialogs/decision-dialog/decision-dialog.component";
+import { NavigationService } from 
"src/app/shared/navigation/navigation.service";
+
+/**
+ * StatusDetailsComponent is the controller for a status "details" page.
+ */
+@Component({
+       selector: "tp-status-details",
+       styleUrls: ["./status-details.component.scss"],
+       templateUrl: "./status-details.component.html",
+})
+export class StatusDetailsComponent implements OnInit {
+
+       /** Status ID expected from the route param using which we identify 
whether we are creating new status or load existing status */
+       public id: string | number | null = null;
+
+       /** Loader status for the actions */
+       public loading = false;
+
+       /** All details of status requested */
+       public statusDetails!: ResponseStatus;
+
+       /** Reactive form intialized to creat / edit status details */
+       public statusDetailsForm: FormGroup = new FormGroup({
+               description: new FormControl("", Validators.required),
+               name: new FormControl("", Validators.required),
+       });
+
+       /**
+        * Constructor.
+        *
+        * @param serverService The Servers API which is used to provide row 
data.
+        * @param route A reference to the route of this view which is used to 
get the 'id' query parameter of status.
+        * @param router Angular router
+        * @param dialog Dialog manager
+        * @param fb Form builder
+        * @param navSvc Manages the header
+        */
+       constructor(
+               private readonly serverService: ServerService,
+               private readonly route: ActivatedRoute,
+               private readonly router: Router,
+               private readonly dialog: MatDialog,
+               private readonly navSvc: NavigationService,
+       ) {
+               // Getting id from the route
+               this.id = this.route.snapshot.paramMap.get("id");
+       }
+
+       /** Initializes table data, loading it from Traffic Ops. */
+       public ngOnInit(): void {
+
+               // we check whether params is a number if not we shall assume 
user wants to add a new status.
+               if (this.id !== "new") {
+                       this.loading = true;
+                       this.statusDetailsForm.addControl("id", new 
FormControl(""));
+                       this.statusDetailsForm.addControl("lastUpdated", new 
FormControl(""));
+                       this.getStatusDetails();
+               } else {
+                       this.navSvc.headerTitle.next("New Status");
+               }
+       }
+
+       /**
+        * Reloads the servers table data.
+        *
+        * @param id is the id passed in route for this page if this is a edit 
view.
+        */
+       public async getStatusDetails(): Promise<void> {
+               const id = Number(this.id); // id Type 'null' is not assignable 
to type 'string'
+               this.statusDetails = await this.serverService.getStatuses(id);
+
+               // Set page title with status Name
+               this.navSvc.headerTitle.next(`Status 
#${this.statusDetails.name}`);
+
+               // Patch the form with existing data we got from service 
requested above.
+               this.statusDetailsForm.patchValue(this.statusDetails);
+               this.loading = false;
+       }
+
+       /**
+        * On submitting the form we check for whether we are performing Create 
or Edit
+        */
+       public onSubmit(): void {
+               if (this.id === "new") {
+                       this.createStatus();
+
+               } else {
+                       this.updateStatus();
+               }
+       }
+
+       /**
+        * For Creating a new status
+        */
+       public createStatus(): void {
+               
this.serverService.createStatus(this.statusDetailsForm.value).then((res: 
ResponseStatus) => {
+                       if (res) {
+                               this.statusDetails = res;
+                               this.router.navigate(["/core/statuses"]);
+                       }
+               });
+       }
+
+       /**
+        * For updating the Status
+        */
+       public updateStatus(): void {
+               
this.serverService.updateStatusDetail(this.statusDetailsForm.value, 
Number(this.id));
+       }
+
+       /**
+        * Deleteting status
+        */
+       public async deleteStatus(): Promise<void> {
+               const ref = this.dialog.open<DecisionDialogComponent, 
DecisionDialogData, boolean>(DecisionDialogComponent, {
+                       data: {
+                               message: `This action CANNOT be undone. This 
will permanently delete '${this.statusDetails?.name}'.`,
+                               title: `Delete Status: 
${this.statusDetails?.name}`

Review Comment:
   same as above



##########
experimental/traffic-portal/src/app/core/statuses/statuses-table/statuses-table.component.spec.ts:
##########
@@ -0,0 +1,48 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HttpClientModule } from "@angular/common/http";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+
+import { APITestingModule } from "src/app/api/testing";
+
+import { StatusesTableComponent } from "./statuses-table.component";
+
+describe("StatusesTableComponent", () => {
+       let component: StatusesTableComponent;
+       let fixture: ComponentFixture<StatusesTableComponent>;
+
+       beforeEach(async () => {
+               await TestBed.configureTestingModule({
+                       declarations: [StatusesTableComponent],
+                       imports: [
+                               HttpClientModule,
+                               RouterTestingModule.withRoutes([
+                                       { component: StatusesTableComponent, 
path: "" },
+                               ]),
+                               APITestingModule
+                       ]
+               })
+                       .compileComponents();
+
+               fixture = TestBed.createComponent(StatusesTableComponent);
+               component = fixture.componentInstance;
+               fixture.detectChanges();
+       });
+
+       it("should create", () => {
+               expect(component).toBeTruthy();
+       });

Review Comment:
   this should test more than just component instantiation



##########
experimental/traffic-portal/src/app/core/statuses/statuses-table/statuses-table.component.ts:
##########
@@ -0,0 +1,98 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, OnInit } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { ResponseStatus } from "trafficops-types";
+
+import { ServerService } from "src/app/api";
+import { ContextMenuItem } from 
"src/app/shared/generic-table/generic-table.component";
+import { NavigationService } from 
"src/app/shared/navigation/navigation.service";
+
+/**
+ * StatusesTableComponent is the controller for the statuses page - which
+ * principally contains a table.
+ */
+@Component({
+       selector: "tp-statuses-table",
+       styleUrls: ["./statuses-table.component.scss"],
+       templateUrl: "./statuses-table.component.html",
+})
+export class StatusesTableComponent implements OnInit {
+
+       /** All of the statues which should appear in the table. */
+       public statuses: ResponseStatus[] = [];
+
+       /** Definitions of the table's columns according to the ag-grid API */
+       public columnDefs = [
+               {
+                       field: "name",
+                       headerName: "Name",
+                       hide: false
+               },
+               {
+                       field: "description",
+                       headerName: "Description",
+                       hide: false
+               }];
+
+       /** The current search text. */
+       public searchText = "";
+
+       /** Definitions for the context menu items (which act on statuses 
data). */
+       public contextMenuItems: Array<ContextMenuItem<ResponseStatus>> = [
+               {
+                       href: (u: ResponseStatus): string => `${u.id}`,
+                       name: "View Status Details"
+               },
+               {
+                       href: (): string => "new",

Review Comment:
   `href` is allowed to just be a string if it's a constant value



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to