FORMS-1642 - Wide Layout Mode as default when users land on form (bcg…

…ov#1540)

app/frontend/src/components/designer/FormViewerActions.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { computed, onMounted, inject, ref } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ManageSubmissionUsers from '~/components/forms/submission/ManageSubmissionUsers.vue';
@@ -61,7 +61,7 @@ const properties = defineProps({
   },
 });
 
-const isWideLayout = ref(false);
+const isWideLayout = ref(properties.wideFormLayout);
 
 const formStore = useFormStore();
 
@@ -74,14 +74,19 @@ const showEditToggle = computed(
     properties.permissions.includes(FormPermissions.SUBMISSION_UPDATE)
 );
 
-onMounted(() => {
-  setWideLayout(isWideLayout.value);
-});
-
 function toggleWideLayout() {
   isWideLayout.value = !isWideLayout.value;
   setWideLayout(isWideLayout.value);
 }
+// Sync the local copy with the prop when it changes
+watch(
+  () => properties.wideFormLayout,
+  (newValue) => {
+    isWideLayout.value = newValue;
+    setWideLayout(newValue);
+  },
+  { immediate: true }
+);
 </script>
 
 <template>

app/frontend/src/components/forms/FormSubmission.vue

@@ -46,6 +46,7 @@ onMounted(async () => {
   await formStore.getFormPermissionsForUser(form.value.id);
   loading.value = false;
   // set wide layout
+  isWideLayout.value = form.value.wideFormLayout;
   setWideLayout(isWideLayout.value);
 });
 

app/frontend/tests/unit/components/designer/FormViewerActions.spec.js

@@ -73,6 +73,26 @@ describe('FormDisclaimer.vue', () => {
     expect(wrapper.vm.showEditToggle).toBeTruthy();
   });
 
+  it('when props.wideFormLayout is set from parent call setWideLayout', async () => {
+    const setWideLayout = vi.fn();
+    setWideLayout.mockImplementation(() => {});
+    const wrapper = mount(FormViewerActions, {
+      props: {
+        wideFormLayout: true,
+      },
+      global: {
+        plugins: [pinia],
+        provide: {
+          setWideLayout: setWideLayout,
+        },
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.vm.isWideLayout).toBeTruthy();
+    expect(setWideLayout).toBeCalledTimes(1);
+  });
+
   it('toggleWideLayout will toggle isWideLayout and call setWideLayout', async () => {
     const setWideLayout = vi.fn();
     setWideLayout.mockImplementation(() => {});

app/frontend/tests/unit/components/forms/FormSubmission.spec.js

@@ -54,6 +54,7 @@ describe('FormSubmission.vue', () => {
     formStore.form = {
       id: 0,
       name: 'This is a form title',
+      wideFormLayout: true,
     };
     const fetchSubmissionSpy = vi.spyOn(formStore, 'fetchSubmission');
     fetchSubmissionSpy.mockImplementation(() => {});
@@ -88,6 +89,8 @@ describe('FormSubmission.vue', () => {
     expect(wrapper.text()).toContain('trans.formSubmission.submitted');
     expect(wrapper.text()).toContain('trans.formSubmission.submission');
     expect(wrapper.html()).toContain(formStore.form.name);
+    expect(setWideLayout).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.isWideLayout).toBeTruthy();
   });
 
   it('onDelete should push to the FormSubmissions page', async () => {