From 5ddca3ff84dd62576becee40e268b348b80cbbf3 Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Wed, 15 Jan 2025 10:56:44 +0100
Subject: [PATCH] fix(ME): improve appearance and fonctionality of
 logout/profile buttons in sidebar

---
 .../src/e2e/dashboard.cy.ts                   |  6 +--
 .../dashboard/sidebar/sidebar.component.html  | 43 +++++++++----------
 .../dashboard/sidebar/sidebar.component.ts    | 18 ++++++--
 .../src/assets/system-shut.svg                | 11 -----
 4 files changed, 38 insertions(+), 40 deletions(-)
 delete mode 100644 apps/metadata-editor/src/assets/system-shut.svg

diff --git a/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts b/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
index 07e5185ad8..7a0f58dc86 100644
--- a/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
+++ b/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
@@ -523,9 +523,7 @@ describe('dashboard (authenticated)', () => {
     it('should navigate to the account settings page', () => {
       cy.visit('/catalog/search')
       cy.get('md-editor-sidebar')
-        .find('gn-ui-button')
-        .first()
-        .find('a')
+        .find('[data-cy=account-link]')
         .invoke('removeAttr', 'target')
         .click()
       cy.url().should('include', '/admin.console')
@@ -549,7 +547,7 @@ describe('Logging in and out', () => {
     })
     it('logs out the user', () => {
       cy.get('gn-ui-avatar').should('be.visible')
-      cy.get('md-editor-sidebar').find('gn-ui-button').eq(1).click()
+      cy.get('md-editor-sidebar').find('[data-cy=logout-button]').click()
       cy.url().should('include', '/catalog.signin?redirect=')
       cy.get('gn-ui-avatar').should('not.exist')
     })
diff --git a/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html b/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html
index d20f4982ee..0daad02611 100644
--- a/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html
+++ b/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.html
@@ -16,31 +16,30 @@
     <ng-container *ngIf="platformService.getMe() | async as user">
       <div
         *ngIf="user && user.name"
-        class="basis-1/12 mb-2 flex flex-col justify-center items-center"
+        class="mb-3 gap-2 flex flex-col justify-center items-center"
+        [style.--gn-ui-button-height]="'40px'"
+        [style.--gn-ui-button-width]="'40px'"
+        [style.--gn-ui-button-rounded]="'40px'"
       >
-        <gn-ui-button
-          type="default"
-          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer mb-1"
+        <a
+          [href]="settingsUrl"
+          target="_blank"
+          class="gn-ui-btn-black"
+          data-cy="account-link"
         >
-          <a [href]="settingsUrl" target="_blank">
-            <gn-ui-user-preview
-              [user]="user"
-              [avatarPlaceholder]="placeholder$ | async"
-              extraClass="w-10 h-10"
-            ></gn-ui-user-preview>
-          </a>
-        </gn-ui-button>
+          <gn-ui-user-preview
+            [user]="user"
+            [avatarPlaceholder]="placeholder$ | async"
+          ></gn-ui-user-preview>
+        </a>
         <gn-ui-button
-          type="default"
-          class="w-10 h-10 flex justify-center items-center hover:cursor-pointer"
-          (click)="logOut()"
+          type="black"
+          class="flex justify-center items-center"
+          data-cy="logout-button"
+          (buttonClick)="logOut()"
+          [title]="'editor.sidebar.logout' | translate"
         >
-          <img
-            src="assets/system-shut.svg"
-            [alt]="'editor.sidebar.logout' | translate"
-            [title]="'editor.sidebar.logout' | translate"
-            class="w-4 h-4 hover:invert-[.5]"
-          />
+          <ng-icon name="iconoirSystemShut" size="16px" />
         </gn-ui-button>
       </div>
     </ng-container>
@@ -52,7 +51,7 @@
         <gn-ui-button
           *ngIf="organisations[0].logoUrl?.href"
           type="default"
-          class="flex flex-col gap-3 items-center gap-2"
+          class="flex flex-col items-center gap-2"
           [routerLink]="['/organizations', organisations[0].id]"
         >
           <img
diff --git a/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts b/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts
index c842bb1ef5..bb4bb0921e 100644
--- a/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts
+++ b/apps/metadata-editor/src/app/dashboard/sidebar/sidebar.component.ts
@@ -7,11 +7,15 @@ import {
   AuthService,
   AvatarServiceInterface,
 } from '@geonetwork-ui/api/repository'
-import { LetDirective } from '@ngrx/component'
 import { UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
-import { Observable, combineLatest } from 'rxjs'
+import { combineLatest, Observable } from 'rxjs'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
+import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
+import { RouterLink } from '@angular/router'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { iconoirSystemShut } from '@ng-icons/iconoir'
+import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
 
 @Component({
   selector: 'md-editor-sidebar',
@@ -23,8 +27,16 @@ import { Organization } from '@geonetwork-ui/common/domain/model/record'
     DashboardMenuComponent,
     CommonModule,
     TranslateModule,
-    LetDirective,
     UiElementsModule,
+    ButtonComponent,
+    RouterLink,
+    NgIcon,
+    FeatureSearchModule,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSystemShut,
+    }),
   ],
 })
 export class SidebarComponent implements OnInit {
diff --git a/apps/metadata-editor/src/assets/system-shut.svg b/apps/metadata-editor/src/assets/system-shut.svg
deleted file mode 100644
index ce81ac10de..0000000000
--- a/apps/metadata-editor/src/assets/system-shut.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2888_7502)">
-<path d="M8 4.66663V11.3333" stroke="#F5F5F4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.00016 14.6667C11.6821 14.6667 14.6668 11.6819 14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337C4.31826 1.33337 1.3335 4.31814 1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667Z" stroke="#F5F5F4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_2888_7502">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>