feat: standardize menu part naming and improve menu item handling

- Updated the menu item structure to include a `name` property for better consistency and normalization.
- Refactored the menu rendering logic to utilize the `name` property instead of `label` for improved filtering and display.
- Introduced a normalization function to standardize menu part names across the application, enhancing menu configuration and visibility.
- Adjusted the default menu entries to align with the new naming conventions, ensuring consistency in menu part references.

Author: tacxou

apps/web/src/components/layouts/default/drawer.vue

@@ -18,7 +18,7 @@ div
                     q-icon(name="mdi-open-in-new" color="primary")
                   q-item-section Ouvrir dans un nouvel onglet
           q-separator
-        q-list(v-for="(part, i) in visibleMenuParts" :key="part.label")
+        q-list(v-for="(part, i) in visibleMenuParts" :key="part.name")
           div(v-for="menu in part.menus" :key="menu.path")
             q-item(
               clickable
@@ -99,7 +99,7 @@ export default defineNuxtComponent({
     const visibleMenuParts = computed(() => menuParts.value
       .map(part => ({
         ...part,
-        menus: getMenuByPart(part.label).filter(menu => menu.hideInMenuBar !== true),
+        menus: getMenuByPart(part.name!).filter(menu => menu.hideInMenuBar !== true),
       }))
       .filter(part => part.menus.length > 0))
 

apps/web/src/composables/useMenu.ts

@@ -17,6 +17,7 @@ type useMenuReturnType = {
 
 type MenuPartItem = {
   label: string
+  name?: string
   position: number
 }
 
@@ -54,14 +55,23 @@ function useMenu(identityStateStore: ReturnType<typeof useIdentityStateStore>):
       const overrideLabel = typeof overridePart?.label === 'string' ? overridePart.label : ''
       if (!overrideLabel) continue
 
-      const matchIndex = mergedParts.findIndex((part) => part.label === overrideLabel)
+      const overrideRawName = typeof overridePart?.name === 'string' ? overridePart.name : ''
+      const overrideName = overrideRawName.trim() ? normalizeNameFromLabel(overrideRawName) : normalizeNameFromLabel(overrideLabel)
+
+      const matchIndex = mergedParts.findIndex((part) => normalizeNameFromLabel(part.name || part.label) === overrideName)
       if (matchIndex >= 0) {
         mergedParts[matchIndex] = {
           ...mergedParts[matchIndex],
           ...(overridePart as any),
+          label: overrideLabel,
+          name: overrideName,
         }
       } else {
-        mergedParts.push(overridePart as any)
+        mergedParts.push({
+          ...(overridePart as any),
+          label: overrideLabel,
+          name: overrideName,
+        })
       }
     }
 
@@ -190,7 +200,8 @@ function useMenu(identityStateStore: ReturnType<typeof useIdentityStateStore>):
   }
 
   function getMenuByPart(part: string): MenuItem[] {
-    return getMenu().filter((menu) => menu.part === part)
+    const normalizedPart = normalizeNameFromLabel(part)
+    return getMenu().filter((menu) => normalizeNameFromLabel(menu.part) === normalizedPart)
   }
 
   async function initialize(): Promise<void> {

apps/web/src/constants/defaultMenuEntries.ts

@@ -6,6 +6,10 @@ import { IdentityState } from '~/constants/enums'
 export function getDefaultMenuEntries(): MenuItem[] {
   const { getStateBadge } = useIdentityStates()
 
+  function normalizeNameFromLabel(label: string): string {
+    return label.toLowerCase().trim().replace(/\s+/g, '_')
+  }
+
   return [
     {
       icon: 'mdi-account',
@@ -14,7 +18,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: '/identities/table?sort[metadata.lastUpdatedAt]=desc&skip=0',
       color: 'primary',
       badge: { color: 'primary' },
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -24,7 +28,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       name: 'exporter',
       path: '/identities/export',
       color: 'accent',
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       hideInMenuBar: true,
       acl: ['/management/identities'],
     },
@@ -34,7 +38,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       name: 'journal_des_jobs',
       path: '/jobs/table?filters[:state]=-1',
       color: 'info',
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       hideInMenuBar: false,
       acl: ['/core/jobs'],
     },
@@ -44,7 +48,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       name: 'cycle_de_vie_des_identités',
       path: '/lifecycles/table',
       color: 'info',
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       hideInMenuBar: false,
       acl: ['/management/lifecycle'],
     },
@@ -55,7 +59,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: '/audits/table',
       color: 'lime-8',
       hideInMenuBar: false,
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       acl: ['/core/audits'],
     },
     {
@@ -64,7 +68,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       name: 'detection_des_doublons',
       path: '/identities/fusion',
       color: 'positive',
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       hideInMenuBar: true,
       acl: ['/management/identities'],
     },
@@ -75,7 +79,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: '/identities/trash',
       color: 'grey-10',
       hideInMenuBar: true,
-      part: MenuPart.DONNEES,
+      part: normalizeNameFromLabel(MenuPart.DONNEES),
       acl: ['/management/identities'],
     },
     {
@@ -86,7 +90,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       color: 'warning',
       textColor: 'black',
       badge: getStateBadge(IdentityState.TO_VALIDATE),
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -98,7 +102,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       color: 'secondary',
       textColor: 'black',
       badge: getStateBadge(IdentityState.TO_COMPLETE),
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -109,7 +113,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: `/identities/table?readonly=1&sort[metadata.lastUpdatedAt]=desc&skip=0&filters[%23state]=${IdentityState.TO_SYNC}`,
       color: 'orange-8',
       badge: getStateBadge(IdentityState.TO_SYNC),
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -120,7 +124,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: `/identities/table?readonly=1&sort[metadata.lastUpdatedAt]=desc&skip=0&filters[%23state]=${IdentityState.PROCESSING}`,
       color: 'grey-8',
       badge: getStateBadge(IdentityState.PROCESSING),
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -131,7 +135,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: `/identities/table?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[%23state]=${IdentityState.SYNCED}`,
       badge: getStateBadge(IdentityState.SYNCED),
       color: 'positive',
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -146,7 +150,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
         color: 'linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%)',
         textColor: 'white',
       },
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -157,7 +161,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: `/identities/table?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[%23state]=${IdentityState.ON_ERROR}`,
       color: 'negative',
       badge: getStateBadge(IdentityState.ON_ERROR),
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -168,7 +172,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: `/identities/table?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[%23state]=${IdentityState.DONT_SYNC}`,
       color: 'black',
       badge: getStateBadge(IdentityState.DONT_SYNC),
-      part: MenuPart.ETATS,
+      part: normalizeNameFromLabel(MenuPart.ETATS),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },
@@ -178,7 +182,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       name: 'invitations_non_envoyées',
       path: '/identities/table?limit=10&skip=0&filters[%23initState]=0&sort[metadata.lastUpdatedAt]=desc',
       color: 'negative',
-      part: MenuPart.ACTIVATION,
+      part: normalizeNameFromLabel(MenuPart.ACTIVATION),
       badge: { color: 'negative' },
       hideInMenuBar: false,
       acl: ['/management/identities'],
@@ -190,7 +194,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: '/identities/table?limit=10&skip=0&filters[%23initState]=1&sort[metadata.lastUpdatedAt]=desc',
       color: 'warning',
       textColor: 'black',
-      part: MenuPart.ACTIVATION,
+      part: normalizeNameFromLabel(MenuPart.ACTIVATION),
       badge: { color: 'warning', textColor: 'black' },
       hideInMenuBar: false,
       acl: ['/management/identities'],
@@ -202,7 +206,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       path: '/identities/table?limit=10&skip=0&filters[%23initState]=2&sort[metadata.lastUpdatedAt]=desc',
       color: 'positive',
       textColor: 'white',
-      part: MenuPart.ACTIVATION,
+      part: normalizeNameFromLabel(MenuPart.ACTIVATION),
       badge: { color: 'positive' },
       hideInMenuBar: false,
       acl: ['/management/identities'],
@@ -213,7 +217,7 @@ export function getDefaultMenuEntries(): MenuItem[] {
       name: 'invitations_périmées',
       path: '/identities/outdated',
       color: 'accent',
-      part: MenuPart.ACTIVATION,
+      part: normalizeNameFromLabel(MenuPart.ACTIVATION),
       hideInMenuBar: false,
       acl: ['/management/identities'],
     },

apps/web/src/constants/variables.ts

@@ -3,32 +3,37 @@ export const MaxMenuBadgeCount = 99999
 export const DefaultMenuParts = [
   {
     label: 'Données',
+    name: 'données',
     position: 10,
   },
   {
     label: 'Listes',
+    name: 'listes',
     position: 20,
   },
   {
     label: 'Affectations',
+    name: 'affectations',
     position: 30,
   },
   {
     label: 'Etats',
+    name: 'etats',
     position: 40,
   },
   {
     label: 'Activation',
+    name: 'activation',
     position: 50,
   },
 ]
 
 export enum MenuPart {
-  DONNEES = 'Données',
-  LISTES = 'Listes',
-  AFFECTATIONS = 'Affectations',
-  ETATS = 'Etats',
-  ACTIVATION = 'Activation',
+  DONNEES = 'données',
+  LISTES = 'listes',
+  AFFECTATIONS = 'affectations',
+  ETATS = 'etats',
+  ACTIVATION = 'activation',
 }
 
 export const NewTargetId = '000000000000000000000000'

apps/web/src/pages/index.vue

@@ -3,13 +3,13 @@ q-page.container(padding)
   .column.no-wrap
     div(v-for="(part, i) in menuParts", :key="i")
       q-bar.q-pa-lg.q-mb-sm.transparent(
-        v-show='getMenuByPart(part.label).filter(i => i.hideInDashboard !== true).length' dense
+        v-show='getMenuByPart(part.name).filter(i => i.hideInDashboard !== true).length' dense
       )
         .text-h5 {{ part.label }}
 
       .row.q-col-gutter-md
         .col.col-12.col-sm-6.col-md-4.col-lg-3(
-          v-for="item in getMenuByPart(part.label).filter(i => i.hideInDashboard !== true)" :key="item.label"
+          v-for="item in getMenuByPart(part.name).filter(i => i.hideInDashboard !== true)" :key="item.label"
         )
           q-btn.q-py-md.fit(
             :style='getButtonStyle(item)'
@@ -47,7 +47,7 @@ q-page.container(padding)
                     q-item-label Debug
       q-separator.q-mt-md.q-mb-sm(
         v-if="i < menuParts.length - 1"
-        v-show='getMenuByPart(part.label).filter(i => i.hideInDashboard !== true).length'
+        v-show='getMenuByPart(part.name).filter(i => i.hideInDashboard !== true).length'
       )
   sesame-core-debug-menu-entry-dialog(
     v-model="debugDialogOpen"

apps/web/src/server/routes/config/ui.get.ts

@@ -2,6 +2,7 @@ import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import * as path from 'node:path'
 import { defineEventHandler } from 'h3'
 import { parse } from 'yaml'
+import { DefaultMenuParts } from '../../../constants/variables'
 import { getDefaultMenuEntries } from '../../../constants/defaultMenuEntries'
 
 type MenuEntry = Record<string, unknown>
@@ -44,17 +45,18 @@ async function readYamlFile(path: string): Promise<Record<string, unknown>> {
 
 let defaultMenuEntriesJsonGenerated = false
 
-async function ensureDefaultMenuEntriesJson(): Promise<void> {
+async function ensureDefaultMenuDataJson(): Promise<void> {
   if (defaultMenuEntriesJsonGenerated) return
   defaultMenuEntriesJsonGenerated = true
 
   const configDir = path.resolve(process.cwd(), 'config')
-  const outputPath = path.join(configDir, 'default-menu-entries.json')
+  const outputPath = path.join(configDir, 'default-menu-data.json')
 
   try {
     await mkdir(configDir, { recursive: true })
 
     const entries = getDefaultMenuEntries()
+    const parts = DefaultMenuParts
 
     const payload = {
       _meta: {
@@ -63,17 +65,18 @@ async function ensureDefaultMenuEntriesJson(): Promise<void> {
         generatedBy: 'sesame-orchestrator',
         note: 'FICHIER AUTO-GÉNÉRÉ AU DÉMARRAGE. NE PAS MODIFIER.',
       },
+      parts,
       entries,
     }
 
     await writeFile(outputPath, JSON.stringify(payload, null, 2), 'utf8')
   } catch (error) {
-    console.debug('[config/ui] Unable to write default menu entries json', error)
+    console.debug('[config/ui] Unable to write default menu data json', error)
   }
 }
 
 export default defineEventHandler(async () => {
-  await ensureDefaultMenuEntriesJson()
+  await ensureDefaultMenuDataJson()
 
   const menusFile = await readYamlFile('./config/menus.yml')
   const identitiesColumnsFile = await readYamlFile('./config/identities-columns.yml')