[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550) #11404

er-lim · 2025-02-12T10:21:41Z

🥞 Problème

La nouvelle barre de navigation n'était pas encore utilisée sur Pix Admin

🥓 Proposition

L'ajouter avec un feature toggle (FT_PIX_ADMIN_NEW_SIDEBAR_ENABLED) le temps que ça soit validé fonctionnellement.

🧃 Remarques

On en profite pour mettre un logo pour Pix Admin 😄

😋 Pour tester

En local

Ajouter dans votre .env côté API la variable FT_PIX_ADMIN_NEW_SIDEBAR_ENABLED=true
Vérifier que la nouvelle barre s'affiche.
Faire des tests de non régression sur ça.

En RA

Se connecter à la RA de Pix Admin
Vérifier qu'il n'y a pas de régressions sur les pages

pix-bot-github · 2025-02-12T10:22:57Z

Une fois les applications déployées, elles seront accessibles via les liens suivants :

Les variables d'environnement seront accessibles via les liens suivants :

AndreiaPena · 2025-02-12T14:49:00Z

Proposition mettre un aria-label avec le label en complet pour au moins le lire entièrement en lecteur d'écran

AndreiaPena · 2025-02-12T14:52:38Z

Proposition : sur la classe .page-body > remplacer padding par padding-top: var(--pix-spacing-3x);

Pour avoir ça :)

Et sur .page-header un border-radius: 5px; :D

AndreiaPena · 2025-02-12T14:58:07Z

D'ailleurs Profil cible n'a pas de fond blanc dans sa section et je trouve le résultat pas si mal !

On se rend compte que les blocs blancs prennent finalement beaucoup de place, et donc si on retire le padding, c'est déjà ça de gagné

Argument pour faire passer ce menu en PROD : on peut gagner un chouilla d'espace :p

Jeyffrey · 2025-02-12T15:26:11Z

admin/tests/integration/components/layout/sidebar_test.gjs

+  });
+
+  module('Target Profiles tab', function () {
+    module('when admin member have "SUPER_ADMIN", "SUPPORT" or "METIER" as role', function () {


question: ici les 3 rôles sont questionnés en un seul test, et pour les parcours autonomes c'est splité. Une raison ?

c'est corrigé, j'ai splité tous les tests par cohérence !

admin/translations/en.json

Jeyffrey · 2025-02-12T15:30:57Z

admin/app/components/layout/sidebar.gjs

+  @service accessControl;
+
+  get userFullName() {
+    const adminMember = this.currentUser?.adminMember;


question: si on est pas connecté, on est pas censé voir ce composant non ?

Suggested change

const adminMember = this.currentUser?.adminMember;

const adminMember = this.currentUser.adminMember;

En effet ! J'ai laissé car il faut sinon mettre à jour tous les tests d'acceptance pour mettre des firstname / lastname à chaque adminMember 😓

Jeyffrey · 2025-02-12T15:32:34Z

admin/tests/integration/components/layout/sidebar_test.gjs

+    const screen = await render(<template><Sidebar /></template>);
+
+    // then
+    assert.dom(screen.getByRole('link', { name: 'Se déconnecter' })).exists();


suggestion: stub le service session.invalidate et tester le click ?

J'ai enlevé l'action logout car le bouton ne fait qu'une redirection vers la page /logout

Faraopix · 2025-02-13T13:49:26Z

Les entrées dans la nav sont très collées-serrées par rapport à ce que je vois sur storybook ou sur les autres app :

J'ai fait un petit tour sinon, fonctionnellement je ne vois rien d'anormal 👍

Faraopix · 2025-02-13T13:52:15Z

Et je ne sais pas si ça a un rapport mais je vois que "Type" ne s'affiche pas en entier :

QuentinChapelain-ui · 2025-02-13T14:50:18Z

Hello sur les différents retours :

Proposition mettre un aria-label avec le label en complet pour au moins le lire entièrement en lecteur d'écran : + 1 pour moi
Pour le titre en haut de page, on peut enlever le fond blanc il n'apporte rien et rends moins ISO l'interface avec les autres plateforme orga et certif. Pour consrver un spacing et faciliter la lecture on peut comme sur app ajouter une ligne / seperateur en dessous de 1px gris pix-neutral-100.

Je rejoins le retour de Géraldine au sujet du spacing des items du menu, il y. effectivment un espace sur orga. C'est un ajustement local à admin ?

quand un item du menu est actif, l'icône devrait être fill. c'est le cas dans le DS : https://www.figma.com/design/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Nebulix?node-id=7018-10270&t=8xNyMEDFvAkP5DbK-1
Ajouter un spacing entre l'input et le bouton "Charger"

with sidebar entry

with pix admin logo

fixup! feat(api): use feature toggle for new sidebar in authenticated hbs

and correct padding for items

er-lim · 2025-02-13T16:42:16Z

Je fais un message groupé par rapport à tous vos retours (merci pour les feedbacks 🙏 ). J'en ai traité une partie :

Les entrées dans la nav sont très collées-serrées par rapport à ce que je vois sur storybook ou sur les autres app :

@Faraopix C'est corrigé !

Et je ne sais pas si ça a un rapport mais je vois que "Type" ne s'affiche pas en entier :

@Faraopix Non ça n'a pas de rapport, c'est le composant PixSelect qui n'a pas calculé la bonne taille par rapport aux options. Je ne l'ai pas traité 😛

Proposition mettre un aria-label avec le label en complet pour au moins le lire entièrement en lecteur

@AndreiaPena Fait !

Proposition : sur la classe .page-body > remplacer padding par padding-top: var(--pix-spacing-3x);
Et sur .page-header un border-radius: 5px; :D

@AndreiaPena C'est corrigé 😄

er-lim added the cross-team Toutes les équipes de dev label Feb 12, 2025

er-lim self-assigned this Feb 12, 2025

er-lim force-pushed the tech-add-pix-navigation-in-admin branch 4 times, most recently from a7018be to 808f67c Compare February 12, 2025 13:32

er-lim changed the title ~~[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-DUNNO)~~ [FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550) Feb 12, 2025

er-lim added 👀 Tech Review Needed 👀 Func Review Needed Need PO validation for this functionally 👀 Design Review Needed labels Feb 12, 2025

AndreiaPena approved these changes Feb 12, 2025

View reviewed changes

Jeyffrey reviewed Feb 12, 2025

View reviewed changes

er-lim force-pushed the tech-add-pix-navigation-in-admin branch 2 times, most recently from f6d2bf3 to 9a6537d Compare February 13, 2025 10:19

er-lim added 6 commits February 13, 2025 17:24

feat(api): add feat pix-admin-new-sidebar-enabled feature toggle

ae4704c

feat(admin): update translations

0026a9c

with sidebar entry

feat(admin): add sidebar component

703e185

with pix admin logo

feat(api): map is-pix-admin-new-sidebar-enabled feature toggle

d029f5f

feat(api): use feature toggle for new sidebar in authenticated hbs

5eed2af

fixup! feat(api): use feature toggle for new sidebar in authenticated hbs

feat(admin): add logo in login page

ca79062

er-lim force-pushed the tech-add-pix-navigation-in-admin branch from 7510ff7 to 8127766 Compare February 13, 2025 16:26

er-lim added 2 commits February 13, 2025 17:35

feat(admin): add aria label for sidebar

0777ecc

and correct padding for items

feat(admin): adjust page sizing

c1e0787

er-lim force-pushed the tech-add-pix-navigation-in-admin branch from 8127766 to c1e0787 Compare February 13, 2025 16:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550) #11404

[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550) #11404

er-lim commented Feb 12, 2025 •

edited

Loading

pix-bot-github commented Feb 12, 2025

AndreiaPena commented Feb 12, 2025

AndreiaPena commented Feb 12, 2025 •

edited

Loading

AndreiaPena commented Feb 12, 2025 •

edited

Loading

Jeyffrey Feb 12, 2025

er-lim Feb 13, 2025

Jeyffrey Feb 12, 2025

er-lim Feb 13, 2025

Jeyffrey Feb 12, 2025

er-lim Feb 13, 2025

Faraopix commented Feb 13, 2025

Faraopix commented Feb 13, 2025

QuentinChapelain-ui commented Feb 13, 2025 •

edited

Loading

er-lim commented Feb 13, 2025 •

edited

Loading

	const adminMember = this.currentUser?.adminMember;
	const adminMember = this.currentUser.adminMember;

[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550) #11404

Are you sure you want to change the base?

[FEATURE] Ajouter la nouvelle barre de navigation dans Pix Admin (PIX-16550) #11404

Conversation

er-lim commented Feb 12, 2025 • edited Loading

🥞 Problème

🥓 Proposition

🧃 Remarques

😋 Pour tester

En local

En RA

pix-bot-github commented Feb 12, 2025

AndreiaPena commented Feb 12, 2025

AndreiaPena commented Feb 12, 2025 • edited Loading

AndreiaPena commented Feb 12, 2025 • edited Loading

Jeyffrey Feb 12, 2025

Choose a reason for hiding this comment

er-lim Feb 13, 2025

Choose a reason for hiding this comment

Jeyffrey Feb 12, 2025

Choose a reason for hiding this comment

er-lim Feb 13, 2025

Choose a reason for hiding this comment

Jeyffrey Feb 12, 2025

Choose a reason for hiding this comment

er-lim Feb 13, 2025

Choose a reason for hiding this comment

Faraopix commented Feb 13, 2025

Faraopix commented Feb 13, 2025

QuentinChapelain-ui commented Feb 13, 2025 • edited Loading

er-lim commented Feb 13, 2025 • edited Loading

er-lim commented Feb 12, 2025 •

edited

Loading

AndreiaPena commented Feb 12, 2025 •

edited

Loading

AndreiaPena commented Feb 12, 2025 •

edited

Loading

QuentinChapelain-ui commented Feb 13, 2025 •

edited

Loading

er-lim commented Feb 13, 2025 •

edited

Loading