From 4ddbeb6d0618616bbbab5e577850ac7892f19ff7 Mon Sep 17 00:00:00 2001
From: Pavlo Tkach <3469726+ptkach@users.noreply.github.com>
Date: Wed, 27 Mar 2024 14:55:57 -0400
Subject: [PATCH] Add console registrar field focus handler, split whois
 address field (#2388)

---
 .../app/navigation/navigation.component.html  |  2 +-
 .../registrarSelector.component.html          |  1 +
 .../registrar/registrarSelector.component.ts  | 11 +++++------
 .../settings/contact/contact.component.scss   | 10 +++++-----
 .../app/settings/contact/contact.component.ts | 19 ++++++++++---------
 .../src/app/settings/whois/whois.component.ts |  5 ++++-
 .../settings/whois/whoisEdit.component.html   | 12 +++++++++++-
 7 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/console-webapp/src/app/navigation/navigation.component.html b/console-webapp/src/app/navigation/navigation.component.html
index 745372fdb..561f86705 100644
--- a/console-webapp/src/app/navigation/navigation.component.html
+++ b/console-webapp/src/app/navigation/navigation.component.html
@@ -18,7 +18,7 @@
     *matTreeNodeDef="let node; when: hasChild"
     (click)="onClick(node)"
   >
-    <div class="mat-tree-node" [class.active]="router.url.endsWith(node.path)">
+    <div class="mat-tree-node" [class.active]="router.url.includes(node.path)">
       <button
         class="console-app__nav-icon_expand"
         mat-icon-button
diff --git a/console-webapp/src/app/registrar/registrarSelector.component.html b/console-webapp/src/app/registrar/registrarSelector.component.html
index 6d05f3094..548959a93 100644
--- a/console-webapp/src/app/registrar/registrarSelector.component.html
+++ b/console-webapp/src/app/registrar/registrarSelector.component.html
@@ -13,6 +13,7 @@
       [ngModel]="registrarInput()"
       (ngModelChange)="registrarInput.set($event)"
       [ngModelOptions]="{ standalone: true }"
+      (focus)="onFocus()"
       [matAutocomplete]="auto"
     />
     <mat-autocomplete
diff --git a/console-webapp/src/app/registrar/registrarSelector.component.ts b/console-webapp/src/app/registrar/registrarSelector.component.ts
index 22f4ec358..c76c5e721 100644
--- a/console-webapp/src/app/registrar/registrarSelector.component.ts
+++ b/console-webapp/src/app/registrar/registrarSelector.component.ts
@@ -34,15 +34,14 @@ export class RegistrarSelectorComponent {
         option.toLowerCase().includes(filterValue)
       );
     });
-    this.onSelect(registrarService.registrarId());
+  }
+
+  onFocus() {
+    // We reset the list of options after selection, so that user doesn't have to clear it out
+    this.filteredOptions = this.allRegistrarIds();
   }
 
   onSelect(registrarId: string) {
     this.registrarService.updateSelectedRegistrar(registrarId);
-
-    // We reset the list of options after selection, so that user doesn't have to clear it out
-    setTimeout(() => {
-      this.filteredOptions = this.allRegistrarIds();
-    }, 10);
   }
 }
diff --git a/console-webapp/src/app/settings/contact/contact.component.scss b/console-webapp/src/app/settings/contact/contact.component.scss
index d4a8c5e59..0bb303007 100644
--- a/console-webapp/src/app/settings/contact/contact.component.scss
+++ b/console-webapp/src/app/settings/contact/contact.component.scss
@@ -20,6 +20,11 @@
     mat-table {
       min-width: 800px;
     }
+    .contact__name-column-title {
+      color: #5f6368;
+      font-weight: 500;
+      padding: 10px 0;
+    }
   }
   &__empty-contacts {
     display: flex;
@@ -38,9 +43,4 @@
     right: 20px;
     top: 5px;
   }
-  .contact__name-column-title {
-    color: #5f6368;
-    font-weight: 500;
-    padding: 10px 0;
-  }
 }
diff --git a/console-webapp/src/app/settings/contact/contact.component.ts b/console-webapp/src/app/settings/contact/contact.component.ts
index ba51f6f13..ed5ca2e2f 100644
--- a/console-webapp/src/app/settings/contact/contact.component.ts
+++ b/console-webapp/src/app/settings/contact/contact.component.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, effect } from '@angular/core';
+import { Component, effect, ViewEncapsulation } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { take } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
@@ -27,6 +27,7 @@ import {
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export default class ContactComponent {
   public static PATH = 'contact';
@@ -68,18 +69,18 @@ export default class ContactComponent {
     public contactService: ContactService,
     private registrarService: RegistrarService
   ) {
+    effect(() => {
+      if (this.contactService.contacts()) {
+        this.dataSource = new MatTableDataSource<ViewReadyContact>(
+          this.contactService.contacts().map(contactTypeToViewReadyContact)
+        );
+      }
+    });
     effect(() => {
       if (this.registrarService.registrarId()) {
         this.contactService.isContactDetailsView = false;
         this.contactService.isContactNewView = false;
-        this.contactService
-          .fetchContacts()
-          .pipe(take(1))
-          .subscribe((contacts) => {
-            this.dataSource = new MatTableDataSource<ViewReadyContact>(
-              contacts.map(contactTypeToViewReadyContact)
-            );
-          });
+        this.contactService.fetchContacts().pipe(take(1)).subscribe();
       }
     });
   }
diff --git a/console-webapp/src/app/settings/whois/whois.component.ts b/console-webapp/src/app/settings/whois/whois.component.ts
index 565549969..fe5934289 100644
--- a/console-webapp/src/app/settings/whois/whois.component.ts
+++ b/console-webapp/src/app/settings/whois/whois.component.ts
@@ -36,9 +36,12 @@ export default class WhoisComponent {
     if (registrar?.localizedAddress?.state) {
       result += `${registrar?.localizedAddress?.state} `;
     }
-    if (registrar?.localizedAddress?.street) {
+    if (registrar?.localizedAddress?.countryCode) {
       result += registrar?.localizedAddress?.countryCode;
     }
+    if (registrar?.localizedAddress?.zip) {
+      result += registrar?.localizedAddress?.zip;
+    }
     return result;
   });
 
diff --git a/console-webapp/src/app/settings/whois/whoisEdit.component.html b/console-webapp/src/app/settings/whois/whoisEdit.component.html
index 1813af845..fa78dcafe 100644
--- a/console-webapp/src/app/settings/whois/whoisEdit.component.html
+++ b/console-webapp/src/app/settings/whois/whoisEdit.component.html
@@ -51,7 +51,17 @@
       </mat-form-field>
 
       <mat-form-field appearance="outline">
-        <mat-label>Street Address: </mat-label>
+        <mat-label>Street Address (line 1): </mat-label>
+        <input
+          matInput
+          type="text"
+          [ngModelOptions]="{ standalone: true }"
+          [(ngModel)]="registrarInEdit.localizedAddress.street![0]"
+        />
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Street Address (line 2): </mat-label>
         <input
           matInput
           type="text"