fix: non-owner roles can hit the Manage Form page (#1937)

Author: usingtechnology

app/frontend/src/components/forms/manage/ManageForm.vue

@@ -42,6 +42,13 @@ const canEditForm = computed(() =>
   permissions.value.includes(FormPermissions.FORM_UPDATE)
 );
 
+// The version/design history list is only returned to designers (backend gates
+// it on design_create). Gate the panel on DESIGN_READ so non-designer roles
+// (e.g. team_manager) don't see a section rendered with missing version data.
+const canViewDesignHistory = computed(() =>
+  permissions.value.includes(FormPermissions.DESIGN_READ)
+);
+
 const combinedVersionAndDraftCount = computed(() => {
   return (
     (form.value?.versions ? form.value.versions.length : 0) +
@@ -342,7 +349,11 @@ defineExpose({
     </v-expansion-panels>
 
     <!-- Form Design -->
-    <v-expansion-panels v-model="versionsPanel" class="nrmc-expand-collapse">
+    <v-expansion-panels
+      v-if="canViewDesignHistory"
+      v-model="versionsPanel"
+      class="nrmc-expand-collapse"
+    >
       <v-expansion-panel flat>
         <v-expansion-panel-title>
           <div

app/frontend/src/components/forms/manage/ManageLayout.vue

@@ -5,12 +5,11 @@ import { useI18n } from 'vue-i18n';
 
 import ManageForm from '~/components/forms/manage/ManageForm.vue';
 import ManageFormActions from '~/components/forms/manage/ManageFormActions.vue';
-import { useNotificationStore } from '~/store/notification';
 import { useFormStore } from '~/store/form';
 import { useRecordsManagementStore } from '~/store/recordsManagement';
 import { FormPermissions } from '~/utils/constants';
 
-const { locale, t } = useI18n({ useScope: 'global' });
+const { locale } = useI18n({ useScope: 'global' });
 
 const properties = defineProps({
   f: {
@@ -21,7 +20,6 @@ const properties = defineProps({
 
 const loading = ref(true);
 
-const notificationStore = useNotificationStore();
 const recordsManagementStore = useRecordsManagementStore();
 
 const { form, permissions, isRTL } = storeToRefs(useFormStore());
@@ -31,17 +29,15 @@ onMounted(async () => {
 
   const formStore = useFormStore();
 
-  await formStore.fetchForm(properties.f);
-
-  if (formStore.form.versions) {
-    await formStore.getFormPermissionsForUser(properties.f);
-  } else {
-    notificationStore.addNotification({
-      text: t('trans.baseSecure.401UnAuthorizedErrMsg'),
-    });
-  }
-
-  await recordsManagementStore.getFormRetentionPolicy(properties.f);
+  // Access to this page is already enforced by BaseSecure (IDP permission) and
+  // the backend form_read middleware, so anyone who reaches here is authorized.
+  // Load the user's form permissions unconditionally; the version list is only
+  // returned to designers, so it must not be used as an authorization signal.
+  await Promise.all([
+    formStore.fetchForm(properties.f),
+    formStore.getFormPermissionsForUser(properties.f),
+    recordsManagementStore.getFormRetentionPolicy(properties.f),
+  ]);
 
   if (permissions.value.includes(FormPermissions.DESIGN_READ))
     await formStore.fetchDrafts(properties.f);

app/frontend/tests/unit/components/forms/manage/ManageForm.spec.js

@@ -123,6 +123,61 @@ describe('ManageForm.vue', () => {
     expect(wrapper.vm.currentVersion).toEqual('N/A');
   });
 
+  it('hides the Form Design History panel without DESIGN_READ (e.g. team_manager)', async () => {
+    formStore.permissions = [
+      FormPermissions.FORM_READ,
+      FormPermissions.TEAM_UPDATE,
+    ];
+    const wrapper = mount(ManageForm, {
+      global: {
+        plugins: [router, pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(
+      wrapper.find('[data-test="canExpandFormDesignHistoryPanel"]').exists()
+    ).toBe(false);
+  });
+
+  it('shows the Form Design History panel with DESIGN_READ', async () => {
+    formStore.permissions = [FormPermissions.DESIGN_READ];
+    const wrapper = mount(ManageForm, {
+      global: {
+        plugins: [router, pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(
+      wrapper.find('[data-test="canExpandFormDesignHistoryPanel"]').exists()
+    ).toBe(true);
+  });
+
   it('currentVersion returns the current published version', async () => {
     formStore.form = ref({
       versions: [

app/frontend/tests/unit/components/forms/manage/ManageLayout.spec.js

@@ -7,6 +7,7 @@ import { beforeEach, expect, vi } from 'vitest';
 import getRouter from '~/router';
 import ManageLayout from '~/components/forms/manage/ManageLayout.vue';
 import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
 import { FormPermissions } from '~/utils/constants';
 import { ref } from 'vue';
 import { useAppStore } from '~/store/app';
@@ -127,4 +128,39 @@ describe('ManageLayout.vue', () => {
     expect(getFormPermissionsForUserSpy).toHaveBeenCalledTimes(1);
     expect(fetchDraftsSpy).toHaveBeenCalledTimes(1);
   });
+
+  // Regression: CCP-5326. The backend omits the `versions` list for non-designer
+  // roles (e.g. team_manager, who lack design_create), so the fetched form has no
+  // `versions` key. That must not be treated as "no permission" — the user is
+  // already authorized by BaseSecure + backend form_read middleware to be here.
+  it('loads permissions and shows no unauthorized alert when the form has no versions', async () => {
+    formStore.fetchForm.mockImplementation(() => {
+      // Mimic readForm returning a form payload without a `versions` key.
+      formStore.form = { id: 'f', name: 'myForm' };
+    });
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    const notificationStore = useNotificationStore(pinia);
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    mount(ManageLayout, {
+      props: {
+        f: 'f',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ManageFormActions: true,
+          ManageForm: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(getFormPermissionsForUserSpy).toHaveBeenCalledTimes(1);
+    expect(addNotificationSpy).not.toHaveBeenCalled();
+  });
 });