Fixes

frontend/src/app/components/company/company.component.html

@@ -205,11 +205,12 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
         <tr mat-row *matRowDef="let row; columns: membersTableDisplayedColumns;" class="company-member-row"></tr>
     </table>
 
-    <!--<mat-slide-toggle style="margin-top: 20px;" *ngIf="currentUser && currentUser.role === 'ADMIN'"
+    <mat-slide-toggle style="margin-top: 20px;" *ngIf="currentUser && currentUser.role === 'ADMIN'"
         name="showTestConnections"
         data-testid="company-test-connections-switch"
-        [(ngModel)]="company.show_test_connections">
+        [(ngModel)]="company.show_test_connections"
+        (change)="changeShowTestConnections($event.checked)">
         Show test connections
-    </mat-slide-toggle>-->
+    </mat-slide-toggle>
 </div>
 

frontend/src/app/components/company/company.component.ts

@@ -207,4 +207,16 @@ export class CompanyComponent {
       });
     }
   }
+
+  changeShowTestConnections(checked: boolean) {
+    const displayMode = checked ? 'on' : 'off';
+    this.submitting = true;
+    this._company.updateShowTestConnections(displayMode).subscribe(() => {
+      this.submitting = false;
+      this.angulartics2.eventTrack.next({
+        action: 'Company: show test connections is updated successfully',
+      });
+    });
+
+  }
 }

frontend/src/app/components/user-settings/user-settings.component.html

@@ -85,6 +85,15 @@ <h1 class="mat-h1">
             </form>
         </div>
 
+        <mat-slide-toggle style="margin-top: 20px;"
+            name="showTestConnections"
+            data-testid="user-settings-test-connections-switch"
+            [disabled]="submittingChangedShowTestConnections"
+            [(ngModel)]="showTestConnections"
+            (change)="changeShowTestConnections($event.checked)">
+            Show test connections
+        </mat-slide-toggle>
+
         <div>
             <div class="user-settings__section-heading">
                 <strong>API keys</strong>

frontend/src/app/components/user-settings/user-settings.component.ts

@@ -51,6 +51,8 @@ export class UserSettingsComponent implements OnInit {
   public currentUser: User = null;
   public submittingChangedName: boolean;
   public userName: string;
+  public submittingChangedShowTestConnections: boolean;
+  public showTestConnections: 'on' | 'off';
   public emailVerificationWarning: Alert = {
     id: 10000001,
     type: AlertType.Warning,
@@ -92,6 +94,7 @@ export class UserSettingsComponent implements OnInit {
         this.currentUser =user;
         this.userName = user.name;
         this.is2FAEnabledToggle = user.is_2fa_enabled;
+        this.showTestConnections = user.show_test_connections;
       });
     this.getAPIkeys();
   }
@@ -174,6 +177,18 @@ export class UserSettingsComponent implements OnInit {
       });
   }
 
+  changeShowTestConnections(checked: boolean) {
+    const displayMode = checked ? 'on' : 'off';
+    this.submittingChangedShowTestConnections = true;
+    this._userService.updateShowTestConnections(displayMode).subscribe(() => {
+      this.submittingChangedShowTestConnections = false;
+      this.angulartics2.eventTrack.next({
+        action: 'Company: show test connections is updated successfully',
+      });
+    });
+
+  }
+
   getAPIkeys() {
     this._userService.getAPIkeys().subscribe(res => this.apiKeys = res);
   }

frontend/src/app/services/company.service.ts

@@ -201,4 +201,30 @@ export class CompanyService {
         })
       );
   }
+
+  updateShowTestConnections(displayMode: 'on' | 'off') {
+    return this._http.put<any>(`/company/connections/display`, undefined, { params: { displayMode }})
+      .pipe(
+        map(res => {
+          if (displayMode === 'on') {
+            this._notifications.showSuccessSnackbar('Test connections now are displayed to your company members.');
+          } else {
+            this._notifications.showSuccessSnackbar('Test connections now are hidden from your company members.');
+          }
+          this.company.next('');
+          return res
+        }),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [
+            {
+              type: AlertActionType.Button,
+              caption: 'Dismiss',
+              action: (id: number) => this._notifications.dismissAlert()
+            }
+          ]);
+          return EMPTY;
+        })
+      );
+  }
 }

frontend/src/app/services/user.service.ts

@@ -313,4 +313,29 @@ export class UserService {
       })
     );
   }
+
+  updateShowTestConnections(displayMode: 'on' | 'off') {
+    return this._http.put<any>(`/user/test/connections/display`, undefined, { params: { displayMode } })
+      .pipe(
+        map(res => {
+          if (displayMode === 'on') {
+            this._notifications.showSuccessSnackbar('Test connections now are displayed to you.');
+          } else {
+            this._notifications.showSuccessSnackbar('Test connections now are hidden from you.');
+          }
+          return res
+        }),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showAlert(AlertType.Error, {abstract: err.error.message, details: err.error.originalMessage}, [
+            {
+              type: AlertActionType.Button,
+              caption: 'Dismiss',
+              action: (id: number) => this._notifications.dismissAlert()
+            }
+          ]);
+          return EMPTY;
+        })
+      );
+  }
 }