refactor: improve Nuxt configuration and clean up imports

- Updated nuxt.config.ts to enhance environment variable handling and caching for OpenAPI types generation.
- Refactored useDebug composable to use the correct type for Monaco editor options.
- Removed unnecessary imports of Monaco editor from multiple Vue components.
- Updated keyrings.vue to change the label for the suspendedAt field to 'Expire' and adjusted the display for better clarity.

Author: tacxou

apps/web/nuxt.config.ts

@@ -1,5 +1,5 @@
 import { resolve } from 'path'
-import { readFileSync, writeFileSync } from 'fs'
+import { existsSync, readFileSync, statSync, writeFileSync } from 'fs'
 import openapiTS, { astToString, COMMENT_HEADER } from 'openapi-typescript'
 import { defineNuxtConfig } from 'nuxt/config'
 import { parse } from 'yaml'
@@ -8,8 +8,9 @@ import setupApp from './src/server/extension.setup'
 
 const SESAME_APP_API_URL = process.env.SESAME_APP_API_URL || 'http://localhost:4002'
 const SESAME_ALLOWED_HOSTS = process.env.SESAME_ALLOWED_HOSTS ? process.env.SESAME_ALLOWED_HOSTS.split(',') : []
+const IS_DEV = process.env.NODE_ENV === 'development'
 
-if (SESAME_ALLOWED_HOSTS.length === 0 && !/localhost/.test(SESAME_APP_API_URL) && process.env.NODE_ENV === 'development') {
+if (SESAME_ALLOWED_HOSTS.length === 0 && !/localhost/.test(SESAME_APP_API_URL) && IS_DEV) {
   SESAME_ALLOWED_HOSTS.push(new URL(SESAME_APP_API_URL).hostname)
 }
 
@@ -53,9 +54,9 @@ export default defineNuxtConfig({
     ...sslCfg,
   },
   devtools: {
-    enabled: process.env.NODE_ENV === 'development',
+    enabled: IS_DEV,
     timeline: {
-      enabled: true,
+      enabled: IS_DEV,
     },
   },
   css: ['~/assets/sass/global.sass'],
@@ -86,7 +87,7 @@ export default defineNuxtConfig({
     'nuxt-quasar-ui',
     '@vueuse/nuxt',
     'dayjs-nuxt',
-    '@nuxt/devtools',
+    ...(IS_DEV ? ['@nuxt/devtools'] : []),
     'nuxt-monaco-editor',
     ...setupApp(),
   ],
@@ -219,7 +220,7 @@ export default defineNuxtConfig({
       template: {
         preprocessOptions: {
           pug: {
-            pretty: true,
+            pretty: IS_DEV,
           },
         },
       },
@@ -279,10 +280,22 @@ export default defineNuxtConfig({
         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
+
+      if (!forceOpenapiRefresh && existsSync(openapiTypesPath)) {
+        const ageMs = Date.now() - statSync(openapiTypesPath).mtimeMs
+        if (ageMs < maxOpenapiTypesAgeMs) {
+          console.log('[OpenapiTS] Skip generation (cache still fresh).')
+          return
+        }
+      }
+
       console.log('[OpenapiTS] Generating .nuxt/types/service-api.d.ts...')
       try {
         const fileData = await openapiTS(`${SESAME_APP_API_URL}/swagger/json`)
-        writeFileSync('.nuxt/types/service-api.d.ts', `${COMMENT_HEADER}${astToString(fileData)}`)
+        writeFileSync(openapiTypesPath, `${COMMENT_HEADER}${astToString(fileData)}`)
         console.log('[OpenapiTS] Generated .nuxt/types/service-api.d.ts !')
       } catch (error) {
         console.debug('[OpenapiTS] Error while generating .nuxt/types/service-api.d.ts', error)

apps/web/src/composables/useDebug.ts

@@ -1,4 +1,4 @@
-import * as Monaco from 'monaco-editor'
+import type { editor } from 'monaco-editor'
 
 export function useDebug() {
   const $q = useQuasar()
@@ -50,7 +50,7 @@ export function useDebug() {
     }
   }
 
-  const monacoOptions = computed<Monaco.editor.IStandaloneEditorConstructionOptions>(() => {
+  const monacoOptions = computed<editor.IStandaloneEditorConstructionOptions>(() => {
     const existingMonacoEnvironment = (window as any).MonacoEnvironment ?? {}
     ;(window as any).MonacoEnvironment = {
       ...existingMonacoEnvironment,

apps/web/src/pages/identities/table/[_id]/jobs.vue

@@ -68,8 +68,6 @@ div
 </template>
 
 <script lang="ts">
-import * as Monaco from 'monaco-editor'
-
 export default defineNuxtComponent({
   name: 'JobsIndexPage',
   data() {

apps/web/src/pages/jobs/details.vue

@@ -64,8 +64,6 @@ div
 </template>
 
 <script lang="ts">
-import * as Monaco from 'monaco-editor'
-
 export default defineComponent({
   name: 'JobsIndexPage',
   data() {

apps/web/src/pages/jobs/table.vue

@@ -118,8 +118,6 @@ q-page.container.q-pa-sm
 </template>
 
 <script lang="ts">
-import * as Monaco from 'monaco-editor'
-
 export default defineComponent({
   name: 'JobsIndexPage',
   data() {

apps/web/src/pages/lifecycles/table.vue

@@ -105,8 +105,6 @@
 </template>
 
 <script lang="ts">
-import * as Monaco from 'monaco-editor'
-
 export default defineComponent({
   name: 'LifecyclesTablePage',
   data() {

apps/web/src/pages/settings/keyrings.vue

@@ -62,8 +62,8 @@ export default defineNuxtComponent({
         },
         {
           name: 'suspendedAt',
-          label: 'Suspendu le',
-          field: (row) => (row.suspendedAt ? this.$dayjs(row.suspendedAt).format('DD/MM/YYYY HH:mm:ss') : 'N/A'),
+          label: 'Expire',
+          field: (row) => (row.suspendedAt ? this.$dayjs(row.suspendedAt).format('DD/MM/YYYY HH:mm:ss') : 'Jamais'),
           align: 'left',
           sortable: true,
         },