refactor: streamline menu and identities column handling in configuration

- Removed YAML parsing for menus and identities columns from nuxt.config.ts, simplifying the configuration process.
- Updated app bar navigation to use 'href' for direct links and removed the backToIndex method for cleaner code.
- Adjusted drawer component to utilize 'to' for routing, aligning with Vue Router best practices.
- Enhanced useColumnsIdentities and useMenu composables to directly reference identitiesColumns and menus from the app configuration.

Author: tacxou

apps/web/nuxt.config.ts

@@ -2,7 +2,6 @@ import { resolve } from 'path'
 import { existsSync, readFileSync, statSync, writeFileSync } from 'fs'
 import openapiTS, { astToString, COMMENT_HEADER } from 'openapi-typescript'
 import { defineNuxtConfig } from 'nuxt/config'
-import { parse } from 'yaml'
 import * as consola from 'consola'
 import setupApp from './src/server/extension.setup'
 
@@ -266,20 +265,6 @@ export default defineNuxtConfig({
   },
   hooks: {
     ready: async (nuxt) => {
-      try {
-        const menus = parse(readFileSync('./config/menus.yml', 'utf8') || '{}')
-        nuxt.options.appConfig.menus = { ...menus || {} }
-      } catch (error) {
-        console.debug('[Nuxt] Error while reading menus.yml', error)
-      }
-
-      try {
-        const identitiesColumns = parse(readFileSync('./config/identities-columns.yml', 'utf8') || '{}')
-        nuxt.options.appConfig.identitiesColumns = { ...identitiesColumns || {} }
-      } catch (error) {
-        console.debug('[Nuxt] Error while reading identities-columns.yml', error)
-      }
-
       const forceOpenapiRefresh = /true|on|yes|1/i.test(`${process.env.SESAME_FORCE_OPENAPI_TYPES_REFRESH}`)
       const openapiTypesPath = '.nuxt/types/service-api.d.ts'
       const maxOpenapiTypesAgeMs = 1000 * 60 * 15

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

@@ -1,7 +1,7 @@
 <template lang="pug">
   q-header
     q-toolbar.bg-primary.text-white(style={ height: '32px' })
-      q-btn.q-pl-none(flat stretch @click="backToIndex()")
+      q-btn.q-pl-none(flat stretch href='/')
         q-avatar(square)
           q-img(src="/config/logo.png" error-src="/default.png" alt="Sesame logo")
         q-toolbar-title SESAME
@@ -104,9 +104,6 @@ export default defineNuxtComponent({
     }
   },
   methods: {
-    backToIndex() {
-      this.$router.push('/')
-    },
     async syncAll() {
       this.syncing({ count: this.badgesValues.TO_SYNC })
       this.$http.post('/core/backends/syncall', {

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

@@ -3,7 +3,7 @@ q-drawer.flex(v-model="drawer" side="left" :mini="true" :breakpoint="0" bordered
   template(#mini)
     q-scroll-area.fit.mini-slot.cursor-pointer
       q-list
-        q-item(href="/" clickable v-ripple)
+        q-item(to="/" clickable v-ripple)
           q-item-section(avatar)
             q-icon(name="mdi-home")
         q-separator

apps/web/src/composables/useColumnsIdentities.ts

@@ -79,6 +79,7 @@ type useColumnsIdentitesReturnType = {
 export function useColumnsIdentites(): useColumnsIdentitesReturnType {
   const dayjs = useDayjs()
   const config = useAppConfig()
+  const identitiesEntries = (config?.identitiesColumns?.entries as any[]) || []
 
   const columns = ref<QTableProps['columns'] & { type: string }[]>([
     {
@@ -87,7 +88,7 @@ export function useColumnsIdentites(): useColumnsIdentitesReturnType {
       field: 'state',
       align: 'left',
     },
-    ...config?.identitiesColumns?.entries || [],
+    ...identitiesEntries,
     {
       name: 'metadata.lastUpdatedAt',
       label: 'Date de modification',
@@ -111,14 +112,14 @@ export function useColumnsIdentites(): useColumnsIdentitesReturnType {
   })) as ColumnConfig[])
 
   const visibleColumns = ref<QTableProps['visibleColumns']>([
-    ...config?.identitiesColumns?.entries.map((col: any) => col.name) || [],
+    ...identitiesEntries.map((col: any) => col.name),
     'metadata.lastUpdatedAt',
     'metadata.createdAt',
     'state',
   ])
 
   const columnsType = ref<ColumnType[]>([
-    ...config?.identitiesColumns?.entries.map((col: any) => {
+    ...identitiesEntries.map((col: any) => {
       // console.log('Processing column config', col)
       return {
         name: col.name,

apps/web/src/composables/useMenu.ts

@@ -23,6 +23,7 @@ type MenuPartItem = {
 
 function useMenu(identityStateStore: ReturnType<typeof useIdentityStateStore>): useMenuReturnType {
   const menuParts = ref<MenuPartItem[]>(DefaultMenuParts)
+  const menuEntries = (config?.menus?.entries as any[]) || []
   const { hasPermission, hasPermissionStartsWith } = useAccessControl()
 
   if (config?.menus?.parts) {
@@ -158,7 +159,7 @@ function useMenu(identityStateStore: ReturnType<typeof useIdentityStateStore>):
       hideInMenuBar: false,
       _acl: '/management/identities',
     },
-    ...config?.menus?.entries
+    ...menuEntries
       .filter((entry: any) => {
         if (entry._acl) {
           return hasPermissionStartsWith([entry._acl])

apps/web/src/plugins/load-ui-config.client.ts

@@ -0,0 +1,29 @@
+type UiConfigPayload = {
+  menus?: {
+    entries?: Record<string, unknown>[]
+    parts?: Record<string, unknown>[]
+  }
+  identitiesColumns?: {
+    entries?: Record<string, unknown>[]
+  }
+}
+
+export default defineNuxtPlugin(async () => {
+  const appConfig = useAppConfig()
+  const mutableAppConfig = appConfig as Record<string, unknown>
+
+  try {
+    const payload = await $fetch<UiConfigPayload>('/config/ui')
+
+    mutableAppConfig.menus = {
+      entries: payload?.menus?.entries || [],
+      parts: payload?.menus?.parts || [],
+    }
+
+    mutableAppConfig.identitiesColumns = {
+      entries: payload?.identitiesColumns?.entries || [],
+    }
+  } catch (error) {
+    console.debug('[Nuxt] Error while loading ui config', error)
+  }
+})

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

@@ -0,0 +1,45 @@
+import { readFile } from 'node:fs/promises'
+import { defineEventHandler } from 'h3'
+import { parse } from 'yaml'
+
+type MenuEntry = Record<string, unknown>
+type MenuPart = Record<string, unknown>
+type IdentityColumnEntry = Record<string, unknown>
+
+type UiConfigPayload = {
+  menus: {
+    entries: MenuEntry[]
+    parts: MenuPart[]
+  }
+  identitiesColumns: {
+    entries: IdentityColumnEntry[]
+  }
+}
+
+function asArray(value: unknown): Record<string, unknown>[] {
+  return Array.isArray(value) ? (value as Record<string, unknown>[]) : []
+}
+
+async function readYamlFile(path: string): Promise<Record<string, unknown>> {
+  try {
+    const raw = await readFile(path, 'utf8')
+    return (parse(raw || '{}') as Record<string, unknown>) || {}
+  } catch {
+    return {}
+  }
+}
+
+export default defineEventHandler(async () => {
+  const menusFile = await readYamlFile('./config/menus.yml')
+  const identitiesColumnsFile = await readYamlFile('./config/identities-columns.yml')
+
+  return {
+    menus: {
+      entries: asArray(menusFile.entries),
+      parts: asArray(menusFile.parts),
+    },
+    identitiesColumns: {
+      entries: asArray(identitiesColumnsFile.entries),
+    },
+  } satisfies UiConfigPayload
+})