Empty object clean-up

Does not really make sense to have a user or a team object that is totally empty. Their properties might be empty, but their properties should always exist. This nicely cleans up the templates, too. Signed-off-by: michael sorens <msorens@chef.io>
chef · Aug 6, 2019 · d0e3f1e · d0e3f1e
1 parent be9f6c2
commit d0e3f1e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/components/automate-ui/src/app/pages/team-details/team-details.component.html b/components/automate-ui/src/app/pages/team-details/team-details.component.html
@@ -5,12 +5,12 @@
   <main>
     <chef-breadcrumbs>
       <chef-breadcrumb [link]="['/settings/teams']">Teams</chef-breadcrumb>
-      {{ team?.id }}
+      {{ team.id }}
     </chef-breadcrumbs>
 
     <chef-page-header>
-      <chef-heading *ngIf="isV1">{{ team?.id }}</chef-heading>
-      <chef-heading *ngIf="!isV1">{{ team?.name }}</chef-heading>
+      <chef-heading *ngIf="isV1">{{ team.id }}</chef-heading>
+      <chef-heading *ngIf="!isV1">{{ team.name }}</chef-heading>
       <table>
         <thead>
           <tr class="detail-row">
@@ -20,8 +20,8 @@
         </thead>
         <tbody>
           <tr class="detail-row">
-            <td *ngIf="isV1" class="id-column">{{ team?.name }}</td>
-            <td *ngIf="!isV1" class="id-column">{{ team?.id }}</td>
+            <td *ngIf="isV1" class="id-column">{{ team.name }}</td>
+            <td *ngIf="!isV1" class="id-column">{{ team.id }}</td>
           </tr>
         </tbody>
       </table>
@@ -32,7 +32,7 @@
       </chef-tab-selector>
     </chef-page-header>
     <ng-container *ngIf="tabValue === 'users'">
-      <section class="page-body" *ngIf="team?.id">
+      <section class="page-body" *ngIf="team.id">
         <div id="users-list">
           <div>
             <!-- TODO remove [overridePermissionsCheck]=true once the UI is able to check specific objects
@@ -63,7 +63,7 @@
             </chef-error>
           </chef-form-field>
         </form>
-          <chef-button [disabled]="isLoading || !updateNameForm.valid || updateNameForm.controls['name'].value === team?.name"
+          <chef-button [disabled]="isLoading || !updateNameForm.valid || updateNameForm.controls['name'].value === team.name"
             primary inline (click)="saveNameChange()">
             <chef-loading-spinner *ngIf="saving"></chef-loading-spinner>
             <span *ngIf="saving">Saving...</span>

diff --git a/components/automate-ui/src/app/pages/team-details/team-details.component.ts b/components/automate-ui/src/app/pages/team-details/team-details.component.ts
@@ -63,6 +63,12 @@ export class TeamDetailsComponent implements OnInit, OnDestroy {
     public fb: FormBuilder,
     private router: Router
   ) {
+    this.team = {
+      id: '',
+      name: '',
+      guid: null,
+      projects: []
+    };
     this.updateNameForm = fb.group({
       // Must stay in sync with error checks in team-details.component.html
       name: ['Loading...', [Validators.required, Validators.pattern(Regex.patterns.NON_BLANK)]]

diff --git a/components/automate-ui/src/app/pages/user-details/user-details.component.html b/components/automate-ui/src/app/pages/user-details/user-details.component.html
@@ -2,24 +2,24 @@
 <app-profile-sidebar *ngIf="!isAdminView"> </app-profile-sidebar>
 
 <div class="container">
-  <main *ngIf="isAdminView || user?.id">
+  <main *ngIf="isAdminView || user.id">
     <app-delete-object-modal
       [visible]="modalVisible"
       objectNoun="user"
-      [objectName]="user?.name"
+      [objectName]="user.name"
       (close)="closeDeleteConfirmationModal()"
       (deleteClicked)="deleteUser()">
     </app-delete-object-modal>
     <chef-breadcrumbs *ngIf="isAdminView">
       <chef-breadcrumb [link]="['/settings/users']">Users</chef-breadcrumb>
-      {{ user?.name }}
+      {{ user.name }}
     </chef-breadcrumbs>
 
     <chef-page-header>
       <div class="detail-row">
         <div class="name-column">
           <ng-container *ngIf="!editMode">
-            <div class="display3">{{ user?.name }}</div>
+            <div class="display3">{{ user.name }}</div>
           </ng-container>
           <ng-container *ngIf="editMode">
             <form [formGroup]="editForm">
@@ -35,7 +35,7 @@
             </form>
           </ng-container>
           <div class="container-big-header inline-container">
-            <span class="text"> {{ user?.id }}</span>
+            <span class="text"> {{ user.id }}</span>
           </div>
         </div>
         <div class="button-column">

diff --git a/components/automate-ui/src/app/pages/user-details/user-details.component.spec.ts b/components/automate-ui/src/app/pages/user-details/user-details.component.spec.ts
@@ -128,11 +128,7 @@ describe('UserDetailsComponent', () => {
       expect(component).toBeTruthy();
     });
 
-    it('has an empty user object', () => {
-      expect(component.user).toEqual({} as User);
-    });
-
-    it('dispatches an action to get its user data', () => {
+   it('dispatches an action to get its user data', () => {
       expect(store.dispatch).toHaveBeenCalledWith(
         new GetUser({ id: user.id }));
     });

diff --git a/components/automate-ui/src/app/pages/user-details/user-details.component.ts b/components/automate-ui/src/app/pages/user-details/user-details.component.ts
@@ -75,7 +75,11 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
     // TODO (tc) This needs to be refactored to resemble our other patterns
     // for specific object pages.
     // combineLatest depends on the user object existing already.
-    this.user = <User>{};
+    this.user = {
+      id: '',
+      name: '',
+      membership_id: ''
+    };
 
     this.done$ = <Observable<boolean>>combineLatest(
       store.select(allUsers),