From 28bfe452c5f64c717e0b224122596fd5a19e345a Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Wed, 19 Jul 2023 13:09:42 -0600
Subject: [PATCH] leo/batch-of-changes -jul-19

---
 .../panel-element-source.component.html             |  2 +-
 .../panel-element-source.component.scss             |  4 ++++
 .../panel-privacy/panel-privacy.component.html      |  2 ++
 .../panel-privacy/panel-privacy.component.scss      |  4 ++++
 src/app/cdk/panel/panel/panel.component.ts          | 13 ++++++++++++-
 src/app/cdk/panel/panels/panels.component.html      |  4 ++--
 src/app/cdk/platform-info/browserlist.regexp.ts     |  3 +--
 .../cdk/side-bar/side-bar/side-bar.component.html   |  4 +++-
 .../cdk/side-bar/side-bar/side-bar.component.scss   |  5 +++++
 .../affiliation-stack.component.scss                |  2 ++
 .../components/top-bar/top-bar.component.html       |  6 +++---
 src/app/types/record-biography.endpoint.ts          | 10 +++++-----
 12 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/app/cdk/panel/panel-element-source/panel-element-source.component.html b/src/app/cdk/panel/panel-element-source/panel-element-source.component.html
index 40c3cd6d11..958873f44d 100644
--- a/src/app/cdk/panel/panel-element-source/panel-element-source.component.html
+++ b/src/app/cdk/panel/panel-element-source/panel-element-source.component.html
@@ -1,5 +1,5 @@
 <strong i18n="@@shared.sourceColon">Source: </strong>
-<p>
+<p class="overflow-wrap">
   <ng-container *ngIf="assertion">
     {{ assertion }}
     <i i18n="@@shared.onBehalfOf">via</i>
diff --git a/src/app/cdk/panel/panel-element-source/panel-element-source.component.scss b/src/app/cdk/panel/panel-element-source/panel-element-source.component.scss
index b7fa49c496..566e267be4 100644
--- a/src/app/cdk/panel/panel-element-source/panel-element-source.component.scss
+++ b/src/app/cdk/panel/panel-element-source/panel-element-source.component.scss
@@ -11,3 +11,7 @@ mat-divider {
   margin-top: 8px;
   margin-bottom: 8px;
 }
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+}
\ No newline at end of file
diff --git a/src/app/cdk/panel/panel-privacy/panel-privacy.component.html b/src/app/cdk/panel/panel-privacy/panel-privacy.component.html
index b1889d1163..ab6bf10f06 100644
--- a/src/app/cdk/panel/panel-privacy/panel-privacy.component.html
+++ b/src/app/cdk/panel/panel-privacy/panel-privacy.component.html
@@ -8,6 +8,7 @@
     >visibility</mat-icon
   >
   <mat-icon
+    aria-hidden="false"
     class="trusted"
     *ngIf="visibility === 'LIMITED'"
     [attr.aria-label]="label"
@@ -15,6 +16,7 @@
     >visibility</mat-icon
   >
   <mat-icon
+    aria-hidden="false"
     class="private"
     [attr.aria-label]="label"
     *ngIf="visibility === 'PRIVATE'"
diff --git a/src/app/cdk/panel/panel-privacy/panel-privacy.component.scss b/src/app/cdk/panel/panel-privacy/panel-privacy.component.scss
index d92e5be64c..44af99dc07 100644
--- a/src/app/cdk/panel/panel-privacy/panel-privacy.component.scss
+++ b/src/app/cdk/panel/panel-privacy/panel-privacy.component.scss
@@ -4,3 +4,7 @@
   top: -4px;
   margin-top: -6px;
 }
+
+mat-icon {
+  padding-inline-start: 16px;
+}
\ No newline at end of file
diff --git a/src/app/cdk/panel/panel/panel.component.ts b/src/app/cdk/panel/panel/panel.component.ts
index 8e1a784cea..0178bf5e43 100644
--- a/src/app/cdk/panel/panel/panel.component.ts
+++ b/src/app/cdk/panel/panel/panel.component.ts
@@ -32,6 +32,7 @@ import { UserService } from 'src/app/core'
 import { WINDOW } from 'src/app/cdk/window'
 import { TogglzService } from '../../../core/togglz/togglz.service'
 import { getAriaLabel } from '../../../constants'
+import { RecordBiographyService } from 'src/app/core/record-biography/record-biography.service'
 
 @Component({
   selector: 'app-panel',
@@ -136,7 +137,8 @@ export class PanelComponent implements OnInit {
     private _peerReviewService: RecordPeerReviewService,
     private _researchResourcesService: RecordResearchResourceService,
     private _worksService: RecordWorksService,
-    private _verificationEmailModalService: VerificationEmailModalService
+    private _verificationEmailModalService: VerificationEmailModalService,
+    private _recordBiographyService: RecordBiographyService
   ) {}
 
   ngOnInit(): void {
@@ -299,6 +301,15 @@ export class PanelComponent implements OnInit {
           )
           .subscribe()
         break
+      case 'top-bar':
+        this._recordBiographyService.postBiography({
+          visibility: {
+            visibility: visibility,
+          },
+          biography: {
+            value: this.userRecord.biography.biography.value,
+          }
+        }).subscribe()
     }
     this.visibilityError = false
   }
diff --git a/src/app/cdk/panel/panels/panels.component.html b/src/app/cdk/panel/panels/panels.component.html
index d3dc915685..abc18d402d 100644
--- a/src/app/cdk/panel/panels/panels.component.html
+++ b/src/app/cdk/panel/panels/panels.component.html
@@ -110,7 +110,7 @@ <h3 class="activity-header orc-font-body-large">
         </mat-icon>
         <ng-container *ngIf="!isMobile" i18n="@@shared.add"> Add </ng-container>
       </button>
-      <mat-menu #menuAdd="matMenu">
+      <mat-menu #menuAdd="matMenu" xPosition="before">
         <ng-container *ngIf="type === 'education' || type === 'qualification'">
           <button mat-menu-item (click)="add('education')">
             <ng-container i18n="@@shared.addEducation"
@@ -227,7 +227,7 @@ <h3 class="activity-header orc-font-body-large">
           Sort
         </ng-container>
       </button>
-      <mat-menu #menu="matMenu">
+      <mat-menu #menu="matMenu" xPosition="before">
         <button
           mat-menu-item
           (click)="sortChange(option)"
diff --git a/src/app/cdk/platform-info/browserlist.regexp.ts b/src/app/cdk/platform-info/browserlist.regexp.ts
index dd011b22dc..954be17405 100644
--- a/src/app/cdk/platform-info/browserlist.regexp.ts
+++ b/src/app/cdk/platform-info/browserlist.regexp.ts
@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.html b/src/app/cdk/side-bar/side-bar/side-bar.component.html
index a22a46ecee..d54cc35d53 100644
--- a/src/app/cdk/side-bar/side-bar/side-bar.component.html
+++ b/src/app/cdk/side-bar/side-bar/side-bar.component.html
@@ -228,7 +228,9 @@ <h3 header class="orc-font-body" i18n="@@record.keywords">Keywords</h3>
             </app-panel-element>
           </ng-container>
           <ng-container *ngIf="!keywordOpenState">
-            {{ getKeywords(userRecord.keyword.keywords).join(', ') }}
+            <div class="overflow-wrap">
+              {{ getKeywords(userRecord.keyword.keywords).join(', ') }}
+            </div>
           </ng-container>
         </ng-container>
       </app-panel-data>
diff --git a/src/app/cdk/side-bar/side-bar/side-bar.component.scss b/src/app/cdk/side-bar/side-bar/side-bar.component.scss
index 772572d147..bac7dcacaa 100644
--- a/src/app/cdk/side-bar/side-bar/side-bar.component.scss
+++ b/src/app/cdk/side-bar/side-bar/side-bar.component.scss
@@ -26,3 +26,8 @@ app-panel:first-of-type {
 .mobile {
   height: 187px;
 }
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+
+}
\ No newline at end of file
diff --git a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss
index b411238802..9432be4de9 100644
--- a/src/app/record/components/affiliation-stack/affiliation-stack.component.scss
+++ b/src/app/record/components/affiliation-stack/affiliation-stack.component.scss
@@ -24,6 +24,7 @@
 
   h4 {
     margin: 0;
+    padding-inline-end: 16px;
   }
 
   h4.mobile {
@@ -32,6 +33,7 @@
 
   mat-icon {
     margin-inline-end: 4px;
+    flex-shrink: 0;
   }
 
   .vl {
diff --git a/src/app/record/components/top-bar/top-bar.component.html b/src/app/record/components/top-bar/top-bar.component.html
index 47664c7085..91bf2cf682 100644
--- a/src/app/record/components/top-bar/top-bar.component.html
+++ b/src/app/record/components/top-bar/top-bar.component.html
@@ -114,6 +114,8 @@ <h1 class="name" *ngIf="creditName">
       [userRecord]="userRecord"
       [type]="'top-bar'"
       id="biography-panel"
+      [visibility]="userRecord.biography.visibility.visibility"
+      [editableVisibilityControl]="true"
     >
       <h2
         header
@@ -123,9 +125,7 @@ <h1 class="name" *ngIf="creditName">
         Biography
       </h2>
       <app-panel-data *ngIf="!!userRecord.biography.biography">
-        <app-panel-element
-          [visibility]="userRecord.biography.visibility.visibility"
-        >
+        <app-panel-element>
           <span
             id="biography-value"
             class="mat-body-1"
diff --git a/src/app/types/record-biography.endpoint.ts b/src/app/types/record-biography.endpoint.ts
index ce73d65b50..5cb0a114f6 100644
--- a/src/app/types/record-biography.endpoint.ts
+++ b/src/app/types/record-biography.endpoint.ts
@@ -6,15 +6,15 @@ import {
 } from './common.endpoint'
 
 export interface Biography {
-  lastModifiedDate: LastModifiedDate
-  createdDate: CreatedDate
-  content: string
+  lastModifiedDate?: LastModifiedDate
+  createdDate?: CreatedDate
+  content?: string
   visibility: string
   path?: any
 }
 
 export interface BiographyEndPoint {
   visibility: Visibility
-  biography: Value
-  errors: string[]
+  biography?: Value
+  errors?: string[]
 }