@abgov/nx-adsp 13.18.1 → 13.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.18.1",
+  "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/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/vue-app.spec.ts

@@ -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

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'] ?? '—')\" />",
     );