@abgov/nx-adsp 13.18.0 → 13.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.18.0",
+  "version": "13.18.2",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-admin-crud/files/src/views/__editViewFileName__.vue__tmpl__

@@ -3,10 +3,12 @@ import { reactive, ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
 import { GoabInput, GoabCheckbox } from '<%= goaImportPath %>';
+import { useApi } from '../composables/useApi';
 
 const route = useRoute();
 const router = useRouter();
 const kc = useKeycloak();
+const { apiFetch } = useApi();
 
 const idParam = computed(() => String(route.params.id ?? ''));
 const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
@@ -32,7 +34,7 @@ async function load() {
   loading.value = true;
   loadError.value = null;
   try {
-    const res = await fetch(`/api/<%= resource %>/${idParam.value}`);
+    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}`);
     if (!res.ok) throw new Error(`Failed to load (${res.status})`);
     const data = await res.json();
 <% fields.forEach(function (field) { -%>
@@ -67,7 +69,7 @@ async function onSubmit() {
   saving.value = true;
   saveError.value = null;
   try {
-    const res = await fetch(
+    const res = await apiFetch(
       isNew.value ? '/api/<%= resource %>' : `/api/<%= resource %>/${idParam.value}`,
       {
         method: isNew.value ? 'POST' : 'PUT',

package/src/generators/vue-admin-crud/files/src/views/__listViewFileName__.vue__tmpl__

@@ -2,8 +2,10 @@
 import { ref, onMounted } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
 import { WorkspaceTable } from '<%= goaImportPath %>';
+import { useApi } from '../composables/useApi';
 
 const kc = useKeycloak();
+const { apiFetch } = useApi();
 
 const columns = [
 <% fields.forEach(function (field) { -%>
@@ -21,7 +23,7 @@ async function load() {
   loading.value = true;
   error.value = null;
   try {
-    const res = await fetch('/api/<%= resource %>');
+    const res = await apiFetch('/api/<%= resource %>');
     if (!res.ok) throw new Error(`Failed to load (${res.status})`);
     const data = await res.json();
     // Accept either a bare array or a { results } envelope.

package/src/generators/vue-admin-crud/vue-admin-crud.spec.ts

@@ -61,7 +61,7 @@ describe('Vue Admin CRUD Generator', () => {
       .read('apps/test/src/views/RegionsListView.vue')
       .toString();
     expect(view).toContain('<h1>Regions</h1>');
-    expect(view).toContain("fetch('/api/regions')");
+    expect(view).toContain("apiFetch('/api/regions')");
     expect(view).toContain("import { WorkspaceTable } from '@proj/vue-components';");
     expect(view).toContain('<WorkspaceTable');
     // No pagination props bound -- this is the "reused without its pagination/
@@ -92,7 +92,7 @@ describe('Vue Admin CRUD Generator', () => {
     expect(view).not.toContain('errors.active');
     expect(view).toContain("method: isNew.value ? 'POST' : 'PUT'");
     expect(view).toContain("isNew.value ? '/api/regions'");
-    expect(view).toContain('fetch(`/api/regions/${idParam.value}`');
+    expect(view).toContain('apiFetch(`/api/regions/${idParam.value}`');
     expect(view).toContain("router.push('/regions')");
     expect(view).toContain('Create Regions');
     expect(view).toContain('Edit Regions');

package/src/generators/vue-app/files/AGENTS.md__tmpl__

@@ -236,31 +236,22 @@ mark what's meant to be edited.
    ```
 3. **For the `internal` layout: add a nav link to `src/App.vue`.** The generated shell only
    populates `accountItems`; primary navigation lives in `primaryItems` (or `secondaryItems`).
-   `AppSideMenu` is purely presentational — it doesn't know about routing, so `App.vue` owns
-   `current` detection and the `itemClick` handler:
+   `AppSideMenu` emits one `itemClick` for all slots — the generated `onItemClick` already
+   dispatches by `item.to`: items with a `to` route, items without sign in/out. Add only
+   `primaryItems`:
 
    ```typescript
-   // In <script setup>:
-   import { computed } from 'vue';
-   import { RouterView, useRoute, useRouter } from 'vue-router';
-   // ...existing imports...
-
-   const route = useRoute();    // already in the generated App.vue
-   const router = useRouter();
-
-   // Icon names come from the GoA icon set: design.alberta.ca/components/icons
+   // In <script setup> — route, router, and onItemClick are already in the generated App.vue:
+   // Icon names from the GoA icon set: design.alberta.ca/components/icons
    const primaryItems = computed(() => [
-     { label: 'Home',       to: '/',           icon: 'home',  current: route.path === '/' },
-     { label: 'My Feature', to: '/my-feature', icon: 'list',  current: route.path.startsWith('/my-feature') },
-   ]);
-
-   function onItemClick(item: { to?: string }) {
-     if (item.to) router.push(item.to);
-   }
+     { label: 'Home',       to: '/',           icon: 'home', current: route.path === '/' },
+     { label: 'My Feature', to: '/my-feature', icon: 'list', current: route.path.startsWith('/my-feature') },
+   ])
    ```
 
    ```html
-   <!-- In <template>, add :primary-items and @item-click to <AppSideMenu>: -->
+   <!-- In <template>, add :primary-items to <AppSideMenu>
+        (@item-click="onItemClick" is already wired in the generated shell): -->
    <AppSideMenu
      heading="..."
      :primary-items="primaryItems"

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
-import { RouterView, useRoute } from 'vue-router';
+import { RouterView, useRoute<% if (layout === 'internal') { %>, useRouter<% } %> } from 'vue-router';
 <% if (layout === 'internal') { %>
 import { AppLayout, AppSideMenu, SessionExpiredBanner } from '<%= goaImportPath %>';
 <% } else { %>
@@ -32,16 +32,21 @@ function signInAgain() {
 }
 <% if (layout === 'internal') { %>
 
-// AppSideMenu's account items are presentational -- it doesn't know about
-// Keycloak, it just renders whatever's passed and emits itemClick on click.
+// AppSideMenu's items are presentational — it doesn't know about Keycloak or
+// routing; it just renders whatever's passed and emits itemClick on click.
 const accountItems = computed(() => [
   kc.authenticated
     ? { label: kc.fullName ? `Sign out (${kc.fullName})` : 'Sign out' }
     : { label: 'Sign in' },
 ]);
 
-function onAccountItemClick() {
-  if (kc.authenticated) logout();
+const router = useRouter();
+
+// AppSideMenu emits one itemClick for ALL slots (primary, secondary, account).
+// Items with `to` are nav items — route. Items without are account actions — sign in/out.
+function onItemClick(item: { to?: string }) {
+  if (item.to) router.push(item.to);
+  else if (kc.authenticated) logout();
   else login();
 }
 <% } %>
@@ -52,7 +57,7 @@ function onAccountItemClick() {
   <AppSideMenu
     heading="<%= projectName %>"
     :account-items="accountItems"
-    @item-click="onAccountItemClick"
+    @item-click="onItemClick"
   >
     <SessionExpiredBanner
       v-model:show="session.expired"

package/src/generators/vue-app/files/src/router/index.ts__tmpl__

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
 import HomeView from '../views/HomeView.vue';
@@ -14,12 +15,23 @@ const router = createRouter({
   ],
 });
 
-router.beforeEach((to) => {
+router.beforeEach(async (to) => {
   if (to.meta.requiresAuth) {
     // Read fields off the reactive instance (don't destructure) — consistent with
     // the views and safe if this ever moves out of the per-navigation callback.
     const kc = useKeycloak();
-    if (!kc.ready) return true;
+    if (!kc.ready) {
+      // Keycloak init is async and may not have settled before the initial navigation
+      // fires (app.mount() triggers navigation synchronously). Block and wait rather
+      // than allowing through — a direct-URL load to a protected route would otherwise
+      // render the page unauthenticated with no login redirect.
+      await new Promise<void>((resolve) => {
+        const stop = watch(
+          () => kc.ready,
+          (ready) => { if (ready) { stop(); resolve() } },
+        )
+      })
+    }
     if (!kc.authenticated) {
       kc.keycloak?.login({ redirectUri: window.location.origin + to.fullPath });
       return false;

package/src/generators/vue-app/files/src/views/HomeView.vue__tmpl__

@@ -3,9 +3,9 @@ import { ref, onMounted, watch } from 'vue'
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js'
 import { useApi } from '../composables/useApi'
 
-// Keep the reactive instance — do NOT destructure (see App.vue): a destructured
-// `authenticated` freezes at its setup-time value, so the watch below would never
-// see the user sign in and apiFetch would always skip the token.
+// Keep the useKeycloak() result as an object — do NOT destructure it (see App.vue):
+// its fields are plain values in a reactive object and freeze at setup-time undefined
+// when extracted. `apiFetch` from useApi() is a plain function and is fine to destructure.
 const kc = useKeycloak()
 const { apiFetch } = useApi()
 const publicResource = ref('Not retrieved — is the backend service running?')

package/src/generators/vue-app/vue-app.spec.ts

@@ -206,7 +206,7 @@ describe('Vue App Generator', () => {
     expect(app).toContain('<AppSideMenu');
     expect(app).toContain('heading="test"');
     expect(app).toContain(':account-items="accountItems"');
-    expect(app).toContain('@item-click="onAccountItemClick"');
+    expect(app).toContain('@item-click="onItemClick"');
     // The content gutter is shared regardless of shell choice.
     expect(app).toContain('<AppLayout');
     // App.vue itself must not add a second skip-to-main-content landmark —
@@ -314,6 +314,18 @@ describe('Vue App Generator', () => {
     expect(homeView).not.toContain('Authorization');
   }, 30000);
 
+  it('router guard waits for Keycloak readiness before making auth decisions', async () => {
+    await generator(host, options);
+    const router = host.read('apps/test/src/router/index.ts').toString();
+    // Returning `true` when !kc.ready lets unauthenticated direct-URL loads through
+    // to protected routes before Keycloak has finished init. The guard must block
+    // and wait (async watch) instead of allowing.
+    expect(router).toContain('async');
+    expect(router).toContain('kc.ready');
+    expect(router).not.toMatch(/if\s*\(!kc\.ready\)\s*return\s*true/);
+    expect(router).toContain('watch');
+  }, 30000);
+
   it('index.html is at the Vite entry root and its mount target matches main.ts', async () => {
     await generator(host, options);
     // Vite's entry is <projectRoot>/index.html, not src/index.html — a template
@@ -353,6 +365,21 @@ describe('Vue App Generator', () => {
     expect(homeView).toContain('goa-hero-banner');
   }, 30000);
 
+  it('--layout=internal App.vue uses a unified onItemClick that routes nav items and signs in/out for account items', async () => {
+    // AppSideMenu emits one itemClick for all slots. A dedicated onAccountItemClick breaks
+    // once primaryItems are added — primary nav clicks fire login()/logout() instead of routing.
+    // The generated handler must dispatch by item.to.
+    await generator(host, { ...options, layout: 'internal' });
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain('onItemClick');
+    expect(app).toContain('router.push');
+    expect(app).not.toContain('onAccountItemClick');
+    // Routing branch: items with `to` navigate
+    expect(app).toContain('item.to');
+    // Auth branch: items without `to` fall through to sign-in/out
+    expect(app).toContain('kc.authenticated');
+  }, 30000);
+
   it('--layout=internal has no hero banner anywhere, including on HomeView', async () => {
     await generator(host, { ...options, layout: 'internal' });
     const homeView = host.read('apps/test/src/views/HomeView.vue').toString();

package/src/generators/vue-components/files/src/lib/patterns/AppSideMenu.vue__tmpl__

@@ -61,6 +61,8 @@ const emit = defineEmits<{ itemClick: [item: AppSideMenuItem] }>();
         slot="secondary"
         :icon="item.icon"
         :label="item.label"
+        :url="item.to"
+        :current="item.current"
         :badge="item.badge"
         @click.prevent="emit('itemClick', item)"
       />

package/src/generators/vue-detail-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { RecordDetailShell } from '<%= goaImportPath %>';
+import { useApi } from '../composables/useApi';
 
 // The fetched record's shape isn't known to this generator -- read fields
 // defensively rather than declaring (and likely getting wrong) a fake interface.
@@ -11,12 +12,13 @@ const error = ref<string | null>(null);
 
 const route = useRoute();
 const router = useRouter();
+const { apiFetch } = useApi();
 
 async function load() {
   loading.value = true;
   error.value = null;
   try {
-    const res = await fetch(`/api/<%= resource %>/${route.params.id}`);
+    const res = await apiFetch(`/api/<%= resource %>/${route.params.id}`);
     if (!res.ok) throw new Error(`Failed to load (${res.status})`);
     record.value = await res.json();
   } catch (e) {

package/src/generators/vue-detail-view/vue-detail-view.spec.ts

@@ -97,7 +97,7 @@ describe('Vue Detail View Generator', () => {
       .read('apps/test/src/views/ApplicationDetailView.vue')
       .toString();
     expect(view).toContain('heading="Application Detail"');
-    expect(view).toContain("fetch(`/api/applications/${route.params.id}`)");
+    expect(view).toContain("apiFetch(`/api/applications/${route.params.id}`)");
     expect(view).toContain(
       "<goa-badge type=\"information\" :content=\"String(record['status'] ?? '—')\" />",
     );

package/src/generators/vue-intake-view/files/shared/src/views/__reviewViewFileName__.vue__tmpl__

@@ -2,9 +2,11 @@
 import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { GoabCheckbox } from '<%= goaImportPath %>';
+import { useApi } from '../composables/useApi';
 
 const route = useRoute();
 const router = useRouter();
+const { apiFetch } = useApi();
 
 const idParam = computed(() => String(route.params.id ?? ''));
 
@@ -21,7 +23,7 @@ async function load() {
   loading.value = true;
   loadError.value = null;
   try {
-    const res = await fetch(`/api/<%= resource %>/${idParam.value}`);
+    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}`);
     if (!res.ok) throw new Error(`Failed to load (${res.status})`);
     record.value = await res.json();
   } catch (e) {
@@ -42,7 +44,7 @@ async function onSubmit() {
   submitting.value = true;
   submitError.value = null;
   try {
-    const res = await fetch(`/api/<%= resource %>/${idParam.value}/submit`, {
+    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}/submit`, {
       method: 'POST',
     });
     if (!res.ok) throw new Error(`Failed to submit (${res.status})`);

package/src/generators/vue-intake-view/files/steps/src/views/__stepViewFileName__.vue__tmpl__

@@ -2,6 +2,7 @@
 import { reactive, ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Stepper, StepErrorSummary, GoabInput } from '<%= goaImportPath %>';
+import { useApi } from '../composables/useApi';
 
 const STEPS = [
 <% stepperSteps.forEach(function (step) { -%>
@@ -11,6 +12,7 @@ const STEPS = [
 
 const route = useRoute();
 const router = useRouter();
+const { apiFetch } = useApi();
 
 const idParam = computed(() => String(route.params.id ?? ''));
 const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
@@ -48,7 +50,7 @@ async function load() {
   loading.value = true;
   loadError.value = null;
   try {
-    const res = await fetch(`/api/<%= resource %>/${idParam.value}`);
+    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}`);
     if (!res.ok) throw new Error(`Failed to load (${res.status})`);
     const data = await res.json();
     completedSteps.value = Array.isArray(data.completedSteps) ? data.completedSteps : [];
@@ -96,7 +98,7 @@ async function onSaveAndContinue() {
       ...form,
       completedSteps: [...new Set([...completedSteps.value, '<%- stepKey %>'])],
     };
-    const res = await fetch(
+    const res = await apiFetch(
       isNew.value ? '/api/<%= resource %>' : `/api/<%= resource %>/${idParam.value}`,
       {
         method: isNew.value ? 'POST' : 'PUT',

package/src/generators/vue-intake-view/vue-intake-view.spec.ts

@@ -123,7 +123,7 @@ describe('Vue Intake View Generator', () => {
     expect(review).toContain("record['fullName'] ?? '—'");
     expect(review).toContain("record['email'] ?? '—'");
     expect(review).toContain(':disabled="!declared || submitting || undefined"');
-    expect(review).toContain("fetch(`/api/applications/${idParam.value}/submit`");
+    expect(review).toContain("apiFetch(`/api/applications/${idParam.value}/submit`");
     expect(review).toContain('/applications/${idParam.value}/confirmation');
   }, 30000);
 

package/src/generators/vue-workspace-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { WorkspaceTable } from '<%= goaImportPath %>';
+import { useApi } from '../composables/useApi';
+
+const { apiFetch } = useApi();
 
 const columns = [
 <% columns.forEach(function (column) { -%>
@@ -39,7 +42,7 @@ async function load() {
       params.set('sortBy', sortBy.value);
       params.set('sortDir', sortDir.value);
     }
-    const res = await fetch(`/api/<%= resource %>?${params.toString()}`);
+    const res = await apiFetch(`/api/<%= resource %>?${params.toString()}`);
     if (!res.ok) throw new Error(`Failed to load (${res.status})`);
     const data = await res.json();
     // Accept either a bare array or a { results, total } page envelope.

package/src/generators/vue-workspace-view/vue-workspace-view.spec.ts

@@ -99,7 +99,7 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain(
       "{ key: 'lastSaved', label: 'Last saved', sortable: true }",
     );
-    expect(view).toContain('fetch(`/api/applications?${params.toString()}`)');
+    expect(view).toContain('apiFetch(`/api/applications?${params.toString()}`)');
     expect(view).toContain(
       "<goa-badge type=\"information\" :content=\"String(row['status'] ?? '—')\" />",
     );