@abgov/nx-adsp 13.18.0 → 13.18.1

package/package.json

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

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/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 —
@@ -353,6 +353,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();