From 8e2cc9f8938db001970c1700b13031d6fa05f2ab Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 25 Jun 2024 22:54:18 -0700
Subject: [PATCH] refactor: Forms 1121 composition api forms manage (#1386)

* AddTeamMember updated

AddTeamMember has been updated to the composition API. An issue with debounce has been fixes as it wasn't actually working. Tests now cover 100% of the script.

* ApiKey updated

ApiKey updated to the composition API with tests for full coverage

* DocumentTemplate updated

DocumentTemplate has been updated to the composition API. Some functions were moved to a composable. Tests were added for the composable, and tests are updated for DocumentTemplate.

* Update EmailManagement.vue

EmailManagement updated to the composition API

* EmailTemplate updated

EmailTemplate has been updated to the composition API and tests have been created for it

* Update ManageForm

ManageForm has been updated to the composition API and tests have been added.

* Update ManageFormActions

ManageFormActions is updated to the composition API and has added test coverage

* Update ManageLayout

ManageLayout updated to the composition API with added coverage

* Update ManageVersions

ManageVersions has been upgraded to the composition API and coverage has been added completely for it except for the template.

* Update ShareForm

ShareForm has been updated to the composition API and tests have been created for full coverage. Added the package vitest-canvas-mock so that we can mock the canvas required for the qr code generation.

* Update Subscription

Subscription.vue has been updated to the composition API and tests have been created for full coverage.

* Update TeamManagement

TeamManagement has been updated to the composition API and has full test coverage

* fixed Design.spec.js

removed console.log from identityProviders store
added BaseSecure stub to Design.spec.js

* Update ShareForm

The shared URL did not have the full URL.
---
 app/frontend/package-lock.json                |   40 +-
 app/frontend/package.json                     |    3 +-
 .../src/components/designer/FloatButton.vue   |    2 +-
 .../components/forms/manage/AddTeamMember.vue |  305 ++--
 .../src/components/forms/manage/ApiKey.vue    |  174 +-
 .../forms/manage/DocumentTemplate.vue         |  404 +++--
 .../forms/manage/EmailManagement.vue          |   41 +-
 .../components/forms/manage/EmailTemplate.vue |  112 +-
 .../components/forms/manage/ManageForm.vue    |  237 ++-
 .../forms/manage/ManageFormActions.vue        |   99 +-
 .../components/forms/manage/ManageLayout.vue  |   57 +-
 .../forms/manage/ManageVersions.vue           |  456 +++---
 .../src/components/forms/manage/ShareForm.vue |   83 +-
 .../components/forms/manage/Subscription.vue  |  131 +-
 .../forms/manage/TeamManagement.vue           |  713 ++++----
 .../src/composables/documentTemplate.js       |   67 +
 app/frontend/src/composables/form.js          |   22 +
 app/frontend/src/router.js                    |   11 +-
 .../forms/manage/AddTeamMember.spec.js        |  925 +++++++++--
 .../components/forms/manage/ApiKey.spec.js    |  196 +++
 .../forms/manage/DocumentTemplate.spec.js     |  648 +++++++-
 .../forms/manage/EmailTemplate.spec.js        |  102 ++
 .../forms/manage/ManageForm.spec.js           |  448 ++++-
 .../forms/manage/ManageFormActions.spec.js    |  300 ++++
 .../forms/manage/ManageLayout.spec.js         |   39 +-
 .../forms/manage/ManageVersions.spec.js       |  836 +++++++++-
 .../components/forms/manage/ShareForm.spec.js |  124 ++
 .../forms/manage/Subscription.spec.js         |   57 +
 .../forms/manage/TeamManagement.spec.js       | 1440 ++++++++++++++++-
 .../unit/composables/documentTemplate.spec.js |  127 ++
 .../tests/unit/composables/form.spec.js       |   26 +
 .../tests/unit/fixtures/idir_user.json        |   62 +
 app/frontend/tests/unit/fixtures/roles.json   |  504 ++++++
 app/frontend/tests/unit/setup.js              |    2 +
 .../tests/unit/views/form/Create.spec.js      |   16 +
 .../tests/unit/views/form/Design.spec.js      |    5 +-
 app/frontend/vite.config.mjs                  |    6 +-
 37 files changed, 7042 insertions(+), 1778 deletions(-)
 create mode 100644 app/frontend/src/composables/documentTemplate.js
 create mode 100644 app/frontend/src/composables/form.js
 create mode 100644 app/frontend/tests/unit/components/forms/manage/ApiKey.spec.js
 create mode 100644 app/frontend/tests/unit/components/forms/manage/EmailTemplate.spec.js
 create mode 100644 app/frontend/tests/unit/components/forms/manage/ManageFormActions.spec.js
 create mode 100644 app/frontend/tests/unit/components/forms/manage/ShareForm.spec.js
 create mode 100644 app/frontend/tests/unit/components/forms/manage/Subscription.spec.js
 create mode 100644 app/frontend/tests/unit/composables/documentTemplate.spec.js
 create mode 100644 app/frontend/tests/unit/composables/form.spec.js
 create mode 100644 app/frontend/tests/unit/fixtures/idir_user.json
 create mode 100644 app/frontend/tests/unit/fixtures/roles.json

diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index ed5230553..5b89bcac0 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -55,7 +55,8 @@
         "vite": "^5.2.6",
         "vite-plugin-eslint": "^1.8.1",
         "vite-plugin-vuetify": "^2.0.3",
-        "vitest": "^0.32.2"
+        "vitest": "^0.32.2",
+        "vitest-canvas-mock": "^0.3.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1919,6 +1920,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfontparser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
+      "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
+      "dev": true
+    },
     "node_modules/cssstyle": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
@@ -3509,6 +3516,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/jest-canvas-mock": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
+      "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
+      "dev": true,
+      "dependencies": {
+        "cssfontparser": "^1.2.1",
+        "moo-color": "^1.0.2"
+      }
+    },
     "node_modules/js-beautify": {
       "version": "1.14.6",
       "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.6.tgz",
@@ -3857,6 +3874,15 @@
         "node": "*"
       }
     },
+    "node_modules/moo-color": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
+      "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.1.4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5765,6 +5791,18 @@
         }
       }
     },
+    "node_modules/vitest-canvas-mock": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz",
+      "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==",
+      "dev": true,
+      "dependencies": {
+        "jest-canvas-mock": "~2.5.2"
+      },
+      "peerDependencies": {
+        "vitest": "*"
+      }
+    },
     "node_modules/vitest/node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
diff --git a/app/frontend/package.json b/app/frontend/package.json
index 42fdb9f7c..76a987ddd 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -76,6 +76,7 @@
     "vite": "^5.2.6",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-vuetify": "^2.0.3",
-    "vitest": "^0.32.2"
+    "vitest": "^0.32.2",
+    "vitest-canvas-mock": "^0.3.3"
   }
 }
diff --git a/app/frontend/src/components/designer/FloatButton.vue b/app/frontend/src/components/designer/FloatButton.vue
index 6478547b7..58ef2ac5d 100644
--- a/app/frontend/src/components/designer/FloatButton.vue
+++ b/app/frontend/src/components/designer/FloatButton.vue
@@ -393,7 +393,7 @@ export default {
       <router-link
         v-slot="{ navigate }"
         :to="{
-          name: 'PublishForm',
+          name: 'FormManage',
           query: { f: formId, fd: false, d: draftId },
         }"
         custom
diff --git a/app/frontend/src/components/forms/manage/AddTeamMember.vue b/app/frontend/src/components/forms/manage/AddTeamMember.vue
index 12848ae56..66c79de9a 100644
--- a/app/frontend/src/components/forms/manage/AddTeamMember.vue
+++ b/app/frontend/src/components/forms/manage/AddTeamMember.vue
@@ -1,159 +1,180 @@
-<script>
-import _ from 'lodash';
-import { mapState, mapActions } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { onBeforeUnmount } from 'vue';
+import { watch } from 'vue';
+import { computed } from 'vue';
+import { ref } from 'vue';
 import { i18n } from '~/internationalization';
 
 import userService from '~/services/userService';
-import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 import { Regex } from '~/utils/constants';
 
-export default {
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['new-users', 'adding-users'],
-  data() {
-    return {
-      addingUsers: false,
-      isLoading: false,
-      model: null,
-      search: null,
-      selectedIdp: null,
-      selectedRoles: [],
-      showError: false,
-      entries: [],
-      debounceSearch: _.debounce(this.searchUsers, 250),
-    };
-  },
-  computed: {
-    ...mapState(useAuthStore, ['identityProvider']),
-    ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
-    ...mapState(useIdpStore, ['loginButtons', 'primaryIdp']),
-    FORM_ROLES() {
-      const idpRoles = this.listRoles(this.selectedIdp);
-      return Object.values(idpRoles).sort();
-    },
-    autocompleteLabel() {
-      return this.isPrimary(this.selectedIdp)
-        ? i18n.t('trans.addTeamMember.enterUsername')
-        : i18n.t('trans.addTeamMember.enterExactUsername');
-    },
-  },
-  watch: {
-    search(val) {
-      if (val && val !== this.model) {
-        this.debounceSearch(val);
-      }
+});
 
-      if (!val) {
-        this.entries = [];
-      }
-    },
-    selectedIdp(newIdp, oldIdp) {
-      if (newIdp !== oldIdp) {
-        this.selectedRoles = [];
-        this.model = null;
-        this.entries = [];
-        this.showError = false;
-      }
-    },
-    selectedRoles(newRoles, oldRoles) {
-      if (newRoles !== oldRoles) {
-        this.entries = [];
-        this.showError = false;
-      }
-    },
+const emit = defineEmits(['new-users', 'adding-users']);
 
-    addingUsers() {
-      this.$emit('adding-users', this.addingUsers);
-    },
-  },
-  created() {
-    this.initializeSelectedIdp();
-  },
-  methods: {
-    ...mapActions(useIdpStore, [
-      'isPrimary',
-      'listRoles',
-      'teamMembershipSearch',
-    ]),
-    // workaround so we can use computed value (primaryIdp) in created()
-    initializeSelectedIdp() {
-      this.selectedIdp = this.primaryIdp?.code;
-    },
-    // show users in dropdown that have a text match on multiple properties
-    filterObject(_itemTitle, queryText, item) {
-      return Object.values(item)
-        .filter((v) => v)
-        .some((v) => {
-          if (typeof v === 'string')
-            return v.toLowerCase().includes(queryText.toLowerCase());
-          else {
-            return Object.values(v).some(
-              (nestedValue) =>
-                typeof nestedValue === 'string' &&
-                nestedValue.toLowerCase().includes(queryText.toLowerCase())
-            );
-          }
-        });
-    },
+const idpStore = useIdpStore();
+
+const debounceTime = 250;
+let debounceTimer = null;
+const addingUsers = ref(false);
+const isLoading = ref(false);
+const model = ref(null);
+const search = ref(null);
+const selectedIdp = ref(null);
+const selectedRoles = ref([]);
+const showError = ref(false);
+const entries = ref([]);
+
+const { isRTL, lang } = storeToRefs(useFormStore());
+const { loginButtons, primaryIdp } = storeToRefs(idpStore);
+
+const FORM_ROLES = computed(() => {
+  const idpRoles = idpStore.listRoles(selectedIdp.value);
+  return Object.values(idpRoles).sort();
+});
+
+const autocompleteLabel = computed(() => {
+  return idpStore.isPrimary(selectedIdp.value)
+    ? i18n.t('trans.addTeamMember.enterUsername')
+    : i18n.t('trans.addTeamMember.enterExactUsername');
+});
+
+watch(selectedIdp, (newIdp, oldIdp) => {
+  if (newIdp !== oldIdp) {
+    selectedRoles.value = [];
+    model.value = null;
+    entries.value = [];
+    showError.value = false;
+  }
+});
+
+watch(selectedRoles, (newRoles, oldRoles) => {
+  if (newRoles !== oldRoles) {
+    entries.value = [];
+    showError.value = false;
+  }
+});
+
+watch(addingUsers, () => {
+  emit('adding-users', addingUsers.value);
+});
 
-    save() {
-      if (this.selectedRoles.length === 0) {
-        this.showError = true;
-        return;
+initializeSelectedIdp();
+
+onBeforeUnmount(() => {
+  clearTimeout(debounceTimer);
+});
+
+// workaround so we can use computed value (primaryIdp) in created()
+function initializeSelectedIdp() {
+  selectedIdp.value = primaryIdp.value?.code;
+}
+
+// show users in dropdown that have a text match on multiple properties
+function filterObject(_itemTitle, queryText, item) {
+  return Object.values(item)
+    .filter((v) => v)
+    .some((v) => {
+      if (typeof v === 'string')
+        return v.toLowerCase().includes(queryText.toLowerCase());
+      else {
+        return Object.values(v).some(
+          (nestedValue) =>
+            typeof nestedValue === 'string' &&
+            nestedValue.toLowerCase().includes(queryText.toLowerCase())
+        );
       }
-      this.showError = false;
-      // emit user (object) to the parent component
-      this.$emit('new-users', [this.model], this.selectedRoles);
-      // reset search field
-      this.model = null;
-      this.addingUsers = false;
-    },
+    });
+}
+
+function save() {
+  if (selectedRoles.value.length === 0) {
+    showError.value = true;
+    return;
+  }
+  showError.value = false;
+  // emit user (object) to the parent component
+  emit('new-users', [model.value], selectedRoles.value);
+  // reset search field
+  model.value = null;
+  addingUsers.value = false;
+}
 
-    async searchUsers(input) {
-      if (!input) return;
-      this.isLoading = true;
-      try {
-        let params = {};
-        params.idpCode = this.selectedIdp;
-        let teamMembershipConfig = this.teamMembershipSearch(this.selectedIdp);
-        if (teamMembershipConfig) {
-          if (input.length < teamMembershipConfig.text.minLength)
-            throw new Error(i18n.t(teamMembershipConfig.text.message));
-          if (input.includes('@')) {
-            if (!new RegExp(Regex.EMAIL).test(input))
-              throw new Error(i18n.t(teamMembershipConfig.email.message));
-            else params.email = input;
-          } else {
-            params.username = input;
-          }
-        } else {
-          params.search = input;
-        }
-        const response = await userService.getUsers(params);
-        this.entries = response.data;
-      } catch (error) {
-        this.entries = [];
-        /* eslint-disable no-console */
-        console.error(
-          i18n.t('trans.manageSubmissionUsers.getUsersErrMsg', {
-            error: error,
-          })
-        ); // eslint-disable-line no-console
-      } finally {
-        this.isLoading = false;
+function debounceSearch(input) {
+  if (debounceTimer) clearTimeout(debounceTimer);
+
+  debounceTimer = setTimeout(() => {
+    searchUsers(input);
+  }, debounceTime);
+}
+
+async function searchUsers(input) {
+  if (!input) {
+    entries.value = [];
+    return;
+  }
+  if (input === model.value) {
+    return;
+  }
+  isLoading.value = true;
+  try {
+    let params = {};
+    params.idpCode = selectedIdp.value;
+    let teamMembershipConfig = idpStore.teamMembershipSearch(selectedIdp.value);
+    if (teamMembershipConfig) {
+      if (input.length < teamMembershipConfig.text.minLength)
+        throw new Error(i18n.t(teamMembershipConfig.text.message));
+      if (input.includes('@')) {
+        if (!new RegExp(Regex.EMAIL).test(input))
+          throw new Error(i18n.t(teamMembershipConfig.email.message));
+        else params.email = input;
+      } else {
+        params.username = input;
       }
-    },
-  },
-};
+    } else {
+      params.search = input;
+    }
+    const response = await userService.getUsers(params);
+    entries.value = response.data;
+  } catch (error) {
+    entries.value = [];
+    /* eslint-disable no-console */
+    console.error(
+      i18n.t('trans.manageSubmissionUsers.getUsersErrMsg', {
+        error: error,
+      })
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+defineExpose({
+  addingUsers,
+  debounceSearch,
+  debounceTime,
+  debounceTimer,
+  emit,
+  filterObject,
+  model,
+  save,
+  search,
+  searchUsers,
+  selectedIdp,
+  selectedRoles,
+  showError,
+});
 </script>
 
+/* c8 ignore start */
 <template>
   <span :class="{ 'dir-rtl': isRTL }">
     <span v-if="addingUsers" style="margin-right: 656px" elevation="1">
@@ -201,6 +222,7 @@ export default {
               :loading="isLoading"
               return-object
               :class="{ label: isRTL }"
+              @update:search="debounceSearch"
             >
               <!-- no data -->
               <template #no-data>
@@ -270,7 +292,7 @@ export default {
             </v-btn>
             <v-btn
               variant="outlined"
-              :class="isRTL ? 'mr-2' : 'ml-2'"
+              :class="isRTL ? 'mr-3' : 'ml-3'"
               :title="$t('trans.addTeamMember.cancel')"
               @click="
                 addingUsers = false;
@@ -311,6 +333,7 @@ export default {
     </span>
   </span>
 </template>
+/* c8 ignore end */
 
 <style scoped>
 .v-radio :deep(label),
diff --git a/app/frontend/src/components/forms/manage/ApiKey.vue b/app/frontend/src/components/forms/manage/ApiKey.vue
index 69135661f..8523304be 100644
--- a/app/frontend/src/components/forms/manage/ApiKey.vue
+++ b/app/frontend/src/components/forms/manage/ApiKey.vue
@@ -1,99 +1,85 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import { ref } from 'vue';
 
-import BaseCopyToClipboard from '~/components/base/BaseCopyToClipboard.vue';
-import BaseDialog from '~/components/base/BaseDialog.vue';
 import { useFormStore } from '~/store/form';
 import { FormPermissions } from '~/utils/constants';
 
-export default {
-  components: {
-    BaseCopyToClipboard,
-    BaseDialog,
-  },
-  data() {
-    return {
-      loading: false,
-      showConfirmationDialog: false,
-      showDeleteDialog: false,
-      showSecret: false,
-      filesApiAccess: false,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, [
-      'apiKey',
-      'form',
-      'permissions',
-      'isRTL',
-      'lang',
-    ]),
-    canDeleteKey() {
-      return (
-        this.permissions.includes(FormPermissions.FORM_API_DELETE) &&
-        this.apiKey
-      );
-    },
-    canGenerateKey() {
-      return this.permissions.includes(FormPermissions.FORM_API_CREATE);
-    },
-    canReadSecret() {
-      return (
-        this.permissions.includes(FormPermissions.FORM_API_READ) && this.apiKey
-      );
-    },
-    secret() {
-      return this.apiKey?.secret ? this.apiKey.secret : '';
-    },
-  },
-  created() {
-    if (this.canGenerateKey) {
-      this.readKey();
-    }
-  },
-  methods: {
-    ...mapActions(useFormStore, [
-      'deleteApiKey',
-      'generateApiKey',
-      'readApiKey',
-      'filesApiKeyAccess',
-    ]),
-    async createKey() {
-      this.loading = true;
-      await this.generateApiKey(this.form.id);
-      this.showSecret = false;
-      this.loading = false;
-      this.showConfirmationDialog = false;
-    },
+const loading = ref(false);
+const showConfirmationDialog = ref(false);
+const showDeleteDialog = ref(false);
+const showSecret = ref(false);
+const filesApiAccess = ref(false);
 
-    async deleteKey() {
-      this.loading = true;
-      await this.deleteApiKey(this.form.id);
-      this.filesApiAccess = false;
-      this.loading = false;
-      this.showDeleteDialog = false;
-    },
+const formStore = useFormStore();
 
-    async readKey() {
-      this.loading = true;
-      await this.readApiKey(this.form.id);
-      this.filesApiAccess = this.apiKey?.filesApiAccess;
-      this.loading = false;
-    },
+const { apiKey, form, permissions, isRTL, lang } = storeToRefs(formStore);
 
-    async updateKey() {
-      this.loading = true;
-      await this.filesApiKeyAccess(this.form.id, this.filesApiAccess);
-      this.loading = false;
-    },
+const canDeleteKey = computed(() => {
+  return (
+    permissions.value.includes(FormPermissions.FORM_API_DELETE) && apiKey.value
+  );
+});
 
-    showHideKey() {
-      this.showSecret = !this.showSecret;
-    },
-  },
-};
+const canGenerateKey = computed(() => {
+  return permissions.value.includes(FormPermissions.FORM_API_CREATE);
+});
+
+const canReadSecret = computed(() => {
+  return (
+    permissions.value.includes(FormPermissions.FORM_API_READ) && apiKey.value
+  );
+});
+
+const secret = computed(() =>
+  apiKey.value?.secret ? apiKey.value.secret : ''
+);
+
+if (canGenerateKey.value) {
+  readKey();
+}
+
+async function createKey() {
+  loading.value = true;
+  await formStore.generateApiKey(form.value.id);
+  showSecret.value = false;
+  loading.value = false;
+  showConfirmationDialog.value = false;
+}
+
+async function deleteKey() {
+  loading.value = true;
+  await formStore.deleteApiKey(form.value.id);
+  filesApiAccess.value = false;
+  loading.value = false;
+  showDeleteDialog.value = false;
+}
+
+async function readKey() {
+  loading.value = true;
+  await formStore.readApiKey(form.value.id);
+  filesApiAccess.value = apiKey.value?.filesApiAccess;
+  loading.value = false;
+}
+
+async function updateKey() {
+  loading.value = true;
+  await formStore.filesApiKeyAccess(form.value.id, filesApiAccess.value);
+  loading.value = false;
+}
+
+defineExpose({
+  canDeleteKey,
+  canGenerateKey,
+  canReadSecret,
+  createKey,
+  deleteKey,
+  readKey,
+});
 </script>
 
+/* c8 ignore start */
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
     <div v-if="!canGenerateKey" class="mt-3 mb-6">
@@ -165,14 +151,19 @@ export default {
                 density="default"
                 :icon="showSecret ? 'mdi:mdi-eye-off' : 'mdi:mdi-eye'"
                 data-test="canReadAPIKey"
-                :title="$t('trans.apiKey.hideSecret')"
-                @click="showHideKey"
+                :title="
+                  showSecret
+                    ? $t('trans.apiKey.hideSecret')
+                    : $t('trans.apiKey.showSecret')
+                "
+                @click="showSecret = !showSecret"
               />
             </template>
-            <span v-if="showSecret" :lang="lang">{{
-              $t('trans.apiKey.hideSecret')
+            <span :lang="lang">{{
+              showSecret
+                ? $t('trans.apiKey.hideSecret')
+                : $t('trans.apiKey.showSecret')
             }}</span>
-            <span v-else :lang="lang">{{ $t('trans.apiKey.showSecret') }}</span>
           </v-tooltip>
 
           <BaseCopyToClipboard
@@ -271,3 +262,4 @@ export default {
     </v-col>
   </v-row>
 </template>
+/* c8 ignore end */
diff --git a/app/frontend/src/components/forms/manage/DocumentTemplate.vue b/app/frontend/src/components/forms/manage/DocumentTemplate.vue
index 3d3ea87ca..146904ff4 100644
--- a/app/frontend/src/components/forms/manage/DocumentTemplate.vue
+++ b/app/frontend/src/components/forms/manage/DocumentTemplate.vue
@@ -1,231 +1,203 @@
-<script>
-import { mapState, mapWritableState, mapActions } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+
+import {
+  fetchDocumentTemplates,
+  getDocumentTemplate,
+  /* getMimeType, */
+  readFile,
+} from '~/composables/documentTemplate';
 import { useFormStore } from '~/store/form';
 import { formService } from '~/services';
 import { i18n } from '~/internationalization';
 import { useNotificationStore } from '~/store/notification';
 import { NotificationTypes } from '~/utils/constants';
+import { onMounted } from 'vue';
 
-export default {
-  data() {
-    return {
-      loading: false,
-      validFileExtensions: ['txt', 'docx', 'html', 'odt', 'pptx', 'xlsx'],
-      isValidFile: true,
-      isFileInputEmpty: true,
-      uploadedFile: null, // File uploaded into the File Input
-      cdogsTemplate: null, // File content as base64 (retrieved from backend)
-      headers: [
-        { title: 'File Name', key: 'filename' },
-        { title: 'Date Created', key: 'createdAt' },
-        { title: 'Actions', key: 'actions', align: 'end' },
-      ],
-      documentTemplates: [],
-      enablePreview: false,
-      techdocsLinkTemplateUpload:
-        'https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Functionalities/CDOGS-Template-Upload/',
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
-    ...mapWritableState(useFormStore, ['form']),
-    validationRules() {
-      return [
-        this.isValidFile || i18n.t('trans.documentTemplate.invalidFileMessage'),
-      ];
-    },
-  },
-  mounted() {
-    this.fetchDocumentTemplates();
-  },
-  methods: {
-    ...mapActions(useNotificationStore, ['addNotification']),
-    async fetchDocumentTemplates() {
-      this.loading = true;
-      try {
-        const result = await formService.documentTemplateList(this.form.id);
-        // Clear existing templates before adding new ones
-        this.documentTemplates = [];
+let cdogsTemplate = ref(null);
+const documentTemplates = ref([]);
+const enablePreview = ref(false);
+const fileInput = ref(null);
+const headers = ref([
+  { title: 'File Name', key: 'filename' },
+  { title: 'Date Created', key: 'createdAt' },
+  { title: 'Actions', key: 'actions', align: 'end' },
+]);
+const loading = ref(true);
+const isFileInputEmpty = ref(true);
+const isValidFile = ref(true);
+const techdocsLinkTemplateUpload = ref(
+  'https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Functionalities/CDOGS-Template-Upload/'
+);
+let uploadedFile = null; // File uploaded into the File Input
+const validFileExtensions = ['txt', 'docx', 'html', 'odt', 'pptx', 'xlsx'];
 
-        // Iterate through each document in the result
-        result.data.forEach((doc) => {
-          this.documentTemplates.push({
-            filename: doc.filename,
-            createdAt: doc.createdAt,
-            templateId: doc.id,
-            actions: '',
-          });
-        });
-        // disable preview for microsoft docs
-        if (this.documentTemplates.length > 0) {
-          // get file extension
-          const fileExtension = this.documentTemplates[0].filename
-            .split('.')
-            .pop();
-          if (
-            fileExtension === 'docx' ||
-            fileExtension === 'pptx' ||
-            fileExtension === 'xlsx' ||
-            fileExtension === 'odt'
-          ) {
-            this.enablePreview = false;
-          } else {
-            this.enablePreview = true;
-          }
-        }
-      } catch (e) {
-        this.addNotification({
-          text: i18n.t('trans.documentTemplate.fetchError'),
-          consoleError: i18n.t('trans.documentTemplate.fetchError', {
-            error: e.message,
-          }),
-        });
-      } finally {
-        this.loading = false;
-      }
-    },
+const notificationStore = useNotificationStore();
+
+const { form, isRTL, lang } = storeToRefs(useFormStore());
 
-    handleFileInput(event) {
-      if (event && event.length > 0) {
-        this.isFileInputEmpty = false;
-        this.uploadedFile = event[0];
-        const fileExtension = event[0].name.split('.').pop();
-        if (this.validFileExtensions.includes(fileExtension)) {
-          this.isValidFile = true;
-        } else {
-          this.isValidFile = false;
-        }
+const validationRules = computed(() => [
+  isValidFile.value || i18n.t('trans.documentTemplate.invalidFileMessage'),
+]);
+
+onMounted(async () => {
+  await fetchTemplates();
+});
+
+async function fetchTemplates() {
+  loading.value = true;
+  try {
+    documentTemplates.value = [];
+    documentTemplates.value = await fetchDocumentTemplates(form.value.id);
+    // disable preview for microsoft docs
+    if (documentTemplates.value.length > 0) {
+      // get file extension
+      const fileExtension = documentTemplates.value[0].filename
+        .split('.')
+        .pop();
+      if (
+        fileExtension === 'docx' ||
+        fileExtension === 'pptx' ||
+        fileExtension === 'xlsx' ||
+        fileExtension === 'odt'
+      ) {
+        enablePreview.value = false;
       } else {
-        this.isFileInputEmpty = true;
-        this.isValidFile = true;
+        enablePreview.value = true;
       }
-    },
-    async handleFileUpload() {
-      this.loading = true;
-      const fileContentAsBase64 = await new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(this.uploadedFile);
-        reader.onload = () => {
-          // Strip the Data URL scheme part (everything up to, and including, the comma)
-          const base64Content = reader.result.split(',')[1];
-          resolve(base64Content);
-        };
-        reader.onerror = (error) => {
-          reject(error);
-        };
-      });
-      const data = {
-        filename: this.uploadedFile.name,
-        template: fileContentAsBase64,
-      };
-      try {
-        const result = await formService.documentTemplateCreate(
-          this.form.id,
-          data
-        );
-        this.cdogsTemplate = result.data;
-        this.fetchDocumentTemplates();
+    }
+  } catch (e) {
+    notificationStore.addNotification({
+      text: i18n.t('trans.documentTemplate.fetchError'),
+      consoleError: i18n.t('trans.documentTemplate.fetchError', {
+        error: e.message,
+      }),
+    });
+  } finally {
+    loading.value = false;
+  }
+}
 
-        // Reset the file input
-        if (this.$refs.fileInput) {
-          this.$refs.fileInput.reset();
-        }
-        this.addNotification({
-          text: i18n.t('trans.documentTemplate.uploadSuccess'),
-          ...NotificationTypes.SUCCESS,
-        });
-      } catch (e) {
-        this.addNotification({
-          text: i18n.t('trans.documentTemplate.uploadError'),
-          consoleError: i18n.t('trans.documentTemplate.uploadError', {
-            error: e.message,
-          }),
-        });
-      } finally {
-        this.loading = false;
-      }
-    },
-    async handleDelete(item) {
-      this.loading = true;
-      try {
-        await formService.documentTemplateDelete(this.form.id, item.templateId);
-        this.fetchDocumentTemplates();
-        this.addNotification({
-          text: i18n.t('trans.documentTemplate.deleteSuccess'),
-          ...NotificationTypes.SUCCESS,
-        });
-      } catch (e) {
-        this.addNotification({
-          text: i18n.t('trans.documentTemplate.deleteError'),
-          consoleError: i18n.t('trans.documentTemplate.deleteError', {
-            error: e.message,
-          }),
-        });
-      } finally {
-        this.loading = false;
-      }
-    },
-    async handleFileAction(item, action) {
-      this.loading = true;
-      try {
-        const result = await formService.documentTemplateRead(
-          this.form.id,
-          item.templateId
-        );
-        const base64EncodedData = result.data.template.data
-          .map((byte) => String.fromCharCode(byte))
-          .join('');
-        // Decode the base64 string to binary data
-        const binaryString = atob(base64EncodedData);
-        const len = binaryString.length;
-        const bytes = new Uint8Array(len);
-        for (let i = 0; i < len; i++) {
-          bytes[i] = binaryString.charCodeAt(i);
-        }
-        const blob = new Blob([bytes], {
-          type: this.getMimeType(item.filename),
-        });
-        const url = window.URL.createObjectURL(blob);
+function handleFileInput(event) {
+  if (event && event.length > 0) {
+    isFileInputEmpty.value = false;
+    uploadedFile = event[0];
+    const fileExtension = event[0].name.split('.').pop();
+    if (validFileExtensions.includes(fileExtension)) {
+      isValidFile.value = true;
+    } else {
+      isValidFile.value = false;
+    }
+  } else {
+    isFileInputEmpty.value = true;
+    isValidFile.value = true;
+  }
+}
 
-        if (action === 'preview') {
-          // Open the file in a new tab
-          window.open(url, '_blank');
-          window.URL.revokeObjectURL(url);
-        } else if (action === 'download') {
-          // Create an anchor element and trigger download
-          const a = document.createElement('a');
-          a.href = url;
-          a.download = item.filename;
-          document.body.appendChild(a);
-          a.click();
-          window.URL.revokeObjectURL(url);
-          a.remove();
-        }
-      } catch (e) {
-        this.addNotification({
-          text: i18n.t('trans.documentTemplate.fetchError'),
-          consoleError: i18n.t('trans.documentTemplate.fetchError', {
-            error: e.message,
-          }),
-        });
-      } finally {
-        this.loading = false;
-      }
-    },
-    getMimeType(filename) {
-      const extension = filename.slice(filename.lastIndexOf('.') + 1);
-      const mimeTypes = {
-        txt: 'text/plain',
-        docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        html: 'text/html',
-        odt: 'application/vnd.oasis.opendocument.text',
-        pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-      };
-      return mimeTypes[extension];
-    },
-  },
-};
+async function handleFileUpload() {
+  loading.value = true;
+  const fileContentAsBase64 = await readFile(uploadedFile);
+  const data = {
+    filename: uploadedFile.name,
+    template: fileContentAsBase64,
+  };
+  try {
+    const result = await formService.documentTemplateCreate(
+      form.value.id,
+      data
+    );
+    cdogsTemplate.value = result.data;
+
+    await fetchTemplates();
+
+    // Reset the file input
+    if (fileInput.value) {
+      fileInput.value.reset();
+    }
+    notificationStore.addNotification({
+      text: i18n.t('trans.documentTemplate.uploadSuccess'),
+      ...NotificationTypes.SUCCESS,
+    });
+  } catch (e) {
+    notificationStore.addNotification({
+      text: i18n.t('trans.documentTemplate.uploadError'),
+      consoleError: i18n.t('trans.documentTemplate.uploadError', {
+        error: e.message,
+      }),
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleDelete(item) {
+  loading.value = true;
+  try {
+    await formService.documentTemplateDelete(form.value.id, item.templateId);
+    await fetchTemplates();
+    notificationStore.addNotification({
+      text: i18n.t('trans.documentTemplate.deleteSuccess'),
+      ...NotificationTypes.SUCCESS,
+    });
+  } catch (e) {
+    notificationStore.addNotification({
+      text: i18n.t('trans.documentTemplate.deleteError'),
+      consoleError: i18n.t('trans.documentTemplate.deleteError', {
+        error: e.message,
+      }),
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleFileAction(item, action) {
+  loading.value = true;
+  try {
+    const url = await getDocumentTemplate(
+      form.value.id,
+      item.templateId,
+      item.filename
+    );
+
+    if (action === 'preview') {
+      // Open the file in a new tab
+      window.open(url, '_blank');
+      window.URL.revokeObjectURL(url);
+    } else if (action === 'download') {
+      // Create an anchor element and trigger download
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = item.filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      a.remove();
+    }
+  } catch (e) {
+    notificationStore.addNotification({
+      text: i18n.t('trans.documentTemplate.fetchError'),
+      consoleError: i18n.t('trans.documentTemplate.fetchError', {
+        error: e.message,
+      }),
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({
+  cdogsTemplate,
+  enablePreview,
+  fileInput,
+  handleDelete,
+  handleFileAction,
+  handleFileInput,
+  isFileInputEmpty,
+  isValidFile,
+  uploadedFile,
+});
 </script>
 
 <template>
diff --git a/app/frontend/src/components/forms/manage/EmailManagement.vue b/app/frontend/src/components/forms/manage/EmailManagement.vue
index 163cac91d..224c9cb0f 100644
--- a/app/frontend/src/components/forms/manage/EmailManagement.vue
+++ b/app/frontend/src/components/forms/manage/EmailManagement.vue
@@ -1,38 +1,23 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
 
 import EmailTemplate from '~/components/forms/manage/EmailTemplate.vue';
 import { useFormStore } from '~/store/form';
 
-export default {
-  name: 'EmailManagement',
-
-  components: {
-    EmailTemplate,
-  },
-
-  props: {
-    formId: {
-      required: true,
-      type: String,
-    },
+const properties = defineProps({
+  formId: {
+    required: true,
+    type: String,
   },
+});
 
-  computed: {
-    ...mapState(useFormStore, ['form', 'isRTL', 'lang']),
-  },
+const formStore = useFormStore();
+const { form, isRTL, lang } = storeToRefs(formStore);
 
-  async created() {
-    await Promise.all([
-      this.fetchEmailTemplates(this.formId),
-      this.fetchForm(this.formId),
-    ]);
-  },
-
-  methods: {
-    ...mapActions(useFormStore, ['fetchEmailTemplates', 'fetchForm']),
-  },
-};
+Promise.all([
+  formStore.fetchEmailTemplates(properties.formId),
+  formStore.fetchForm(properties.formId),
+]);
 </script>
 
 <template>
diff --git a/app/frontend/src/components/forms/manage/EmailTemplate.vue b/app/frontend/src/components/forms/manage/EmailTemplate.vue
index 6572bae6b..e294a9c7d 100644
--- a/app/frontend/src/components/forms/manage/EmailTemplate.vue
+++ b/app/frontend/src/components/forms/manage/EmailTemplate.vue
@@ -1,76 +1,66 @@
-<script>
-import { mapActions, mapState } from 'pinia';
-import { i18n } from '~/internationalization';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
-export default {
-  name: 'EmailTemplate',
+const { t } = useI18n({ useScope: 'global' });
 
-  props: {
-    title: {
-      required: true,
-      type: String,
-    },
-    type: {
-      required: true,
-      type: String,
-    },
+const properties = defineProps({
+  title: {
+    required: true,
+    type: String,
+  },
+  type: {
+    required: true,
+    type: String,
   },
+});
 
-  data() {
-    return {
-      // If any field on the form changes, then enable the Save button. Note:
-      // Will stay enabled if the field is changed back to its original value.
-      formChanged: false,
+const emailTemplateForm = ref(null);
+const formChanged = ref(false);
+/* c8 ignore start */
+const bodyRules = ref([
+  (v) => !!v || t('trans.emailTemplate.validBodyRequired'),
+]);
+const subjectRules = ref([
+  (v) => !!v || t('trans.emailTemplate.validSubjectRequired'),
+]);
+const titleRules = ref([
+  (v) => !!v || t('trans.emailTemplate.validTitleRequired'),
+]);
+/* c8 ignore end */
 
-      // Validation rules.
-      bodyRules: [
-        (v) => !!v || i18n.t('trans.emailTemplate.validBodyRequired'),
-      ],
-      subjectRules: [
-        (v) => !!v || i18n.t('trans.emailTemplate.validSubjectRequired'),
-      ],
-      titleRules: [
-        (v) => !!v || i18n.t('trans.emailTemplate.validTitleRequired'),
-      ],
-    };
-  },
+const formStore = useFormStore();
 
-  computed: {
-    ...mapState(useFormStore, ['emailTemplates', 'lang']),
+const { emailTemplates, lang } = storeToRefs(formStore);
 
-    emailTemplate() {
-      return this.emailTemplates.find((t) => t.type === this.type);
-    },
-  },
+const emailTemplate = computed(() =>
+  emailTemplates.value.find((t) => t.type === properties.type)
+);
 
-  methods: {
-    ...mapActions(useFormStore, ['updateEmailTemplate']),
-    ...mapActions(useNotificationStore, ['addNotification']),
+async function saveEmailTemplate() {
+  try {
+    if (emailTemplateForm.value.validate()) {
+      await formStore.updateEmailTemplate(emailTemplate.value);
+    }
 
-    async saveEmailTemplate() {
-      try {
-        if (this.$refs.emailTemplateForm.validate()) {
-          await this.updateEmailTemplate(this.emailTemplate);
-        }
+    formChanged.value = false;
+  } catch (error) {
+    const notificationStore = useNotificationStore();
+    notificationStore.addNotification({
+      text: t('trans.emailTemplate.saveEmailTemplateErrMsg'),
+      consoleError: t('trans.emailTemplate.saveEmailTemplateConsoleErrMsg', {
+        formId: emailTemplate.value.formId,
+        error: error,
+      }),
+    });
+  }
+}
 
-        this.formChanged = false;
-      } catch (error) {
-        this.addNotification({
-          text: i18n.t('trans.emailTemplate.saveEmailTemplateErrMsg'),
-          consoleError: i18n.t(
-            'trans.emailTemplate.saveEmailTemplateConsoleErrMsg',
-            {
-              formId: this.emailTemplate.formId,
-              error: error,
-            }
-          ),
-        });
-      }
-    },
-  },
-};
+defineExpose({ saveEmailTemplate });
 </script>
 
 <template>
diff --git a/app/frontend/src/components/forms/manage/ManageForm.vue b/app/frontend/src/components/forms/manage/ManageForm.vue
index 610069ed8..b4a105e69 100644
--- a/app/frontend/src/components/forms/manage/ManageForm.vue
+++ b/app/frontend/src/components/forms/manage/ManageForm.vue
@@ -1,5 +1,6 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
 
 import ApiKey from '~/components/forms/manage/ApiKey.vue';
 import DocumentTemplate from '~/components/forms/manage/DocumentTemplate.vue';
@@ -12,130 +13,121 @@ import { useNotificationStore } from '~/store/notification';
 import { FormPermissions, NotificationTypes } from '~/utils/constants';
 import FormProfile from '~/components/designer/FormProfile.vue';
 
-export default {
-  components: {
-    ApiKey,
-    DocumentTemplate,
-    ExternalAPIs,
-    FormSettings,
-    ManageVersions,
-    Subscription,
-    FormProfile,
-  },
-  data() {
-    return {
-      apiKeyPanel: 1,
-      cdogsPanel: 1,
-      externalAPIsPanel: 1,
-      formSettingsDisabled: true,
-      settingsFormValid: false,
-      settingsPanel: 1,
-      versionsPanel: 0,
-      subscriptionsPanel: 0,
-      subscription: false,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, [
-      'apiKey',
-      'drafts',
-      'form',
-      'permissions',
-      'isRTL',
-      'lang',
-      'subscriptionData',
-    ]),
-    canEditForm() {
-      return this.permissions.includes(FormPermissions.FORM_UPDATE);
-    },
-    combinedVersionAndDraftCount() {
-      return (
-        (this.form?.versions ? this.form.versions.length : 0) +
-        (this.drafts && Array.isArray(this.drafts) ? this.drafts.length : 0)
-      );
-    },
-    currentVersion() {
-      let cv = 'N/A';
-      if (this.form?.versions && this.form.versions.length) {
-        const vers = this.form.versions.find((v) => v.published);
-        if (vers) {
-          cv = vers.version;
-        }
-      }
-      return cv;
-    },
-    versionState() {
-      if (this.form?.versions && this.form.versions.some((v) => v.published)) {
-        return `Published (ver ${this.currentVersion})`;
-      } else {
-        return 'Unpublished';
-      }
-    },
-    canManageAPI() {
-      return this.permissions.some((p) =>
-        [
-          FormPermissions.FORM_API_CREATE,
-          FormPermissions.FORM_API_READ,
-          FormPermissions.FORM_API_UPDATE,
-          FormPermissions.FORM_API_DELETE,
-        ].includes(p)
-      );
-    },
-    isSubscribed() {
-      if (this.form && this.form.subscribe && this.form.subscribe.enabled) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-  },
-  async mounted() {
-    if (this.canEditForm) {
-      await this.readFormSubscriptionData(this.form.id);
+const apiKeyPanel = ref(1);
+const cdogsPanel = ref(1);
+const externalAPIsPanel = ref(1);
+const formSettingsDisabled = ref(true);
+const settingsForm = ref(null);
+const settingsPanel = ref(1);
+const subscription = ref(false);
+const subscriptionsPanel = ref(0);
+const versionsPanel = ref(0);
+
+const formStore = useFormStore();
+const notificationStore = useNotificationStore();
+
+const { apiKey, drafts, form, permissions, isRTL, lang, subscriptionData } =
+  storeToRefs(formStore);
+
+const canEditForm = computed(() =>
+  permissions.value.includes(FormPermissions.FORM_UPDATE)
+);
+
+const combinedVersionAndDraftCount = computed(() => {
+  return (
+    (form.value?.versions ? form.value.versions.length : 0) +
+    (drafts.value && Array.isArray(drafts.value) ? drafts.value.length : 0)
+  );
+});
+
+const currentVersion = computed(() => {
+  let cv = 'N/A';
+  if (form.value?.versions && form.value.versions.length) {
+    const vers = form.value.versions.find((v) => v.published);
+    if (vers) {
+      cv = vers.version;
     }
-  },
-  methods: {
-    ...mapActions(useFormStore, [
-      'fetchForm',
-      'updateForm',
-      'readFormSubscriptionData',
-    ]),
-    ...mapActions(useNotificationStore, ['addNotification']),
-    cancelSettingsEdit() {
-      this.formSettingsDisabled = true;
-      this.fetchForm(this.form.id);
-    },
+  }
+  return cv;
+});
+
+const versionState = computed(() => {
+  if (form.value?.versions && form.value.versions.some((v) => v.published)) {
+    return `Published (ver ${currentVersion.value})`;
+  } else {
+    return 'Unpublished';
+  }
+});
+
+const canManageAPI = computed(() => {
+  return permissions.value.some((p) =>
+    [
+      FormPermissions.FORM_API_CREATE,
+      FormPermissions.FORM_API_READ,
+      FormPermissions.FORM_API_UPDATE,
+      FormPermissions.FORM_API_DELETE,
+    ].includes(p)
+  );
+});
+
+const isSubscribed = computed(() => {
+  if (form.value && form.value.subscribe && form.value.subscribe.enabled) {
+    return true;
+  } else {
+    return false;
+  }
+});
 
-    enableSettingsEdit() {
-      this.settingsPanel = 0;
-      this.formSettingsDisabled = false;
-    },
+onMounted(async () => {
+  if (canEditForm.value) {
+    await formStore.readFormSubscriptionData(form.value.id);
+  }
+});
 
-    async updateSettings() {
-      try {
-        const { valid } = await this.$refs.settingsForm.validate();
+async function cancelSettingsEdit() {
+  formSettingsDisabled.value = true;
+  await formStore.fetchForm(form.value.id);
+}
+
+function enableSettingsEdit() {
+  settingsPanel.value = 0;
+  formSettingsDisabled.value = false;
+}
+
+async function updateSettings() {
+  try {
+    if (settingsForm.value.validate()) {
+      await formStore.updateForm();
+      formSettingsDisabled.value = true;
+      notificationStore.addNotification({
+        text: 'Your form settings have been updated successfully.',
+        ...NotificationTypes.SUCCESS,
+      });
+      await formStore.fetchForm(form.value.id);
+    }
+  } catch (error) {
+    notificationStore.addNotification({
+      text: 'An error occurred while attempting to update the settings for this form.',
+      consoleError: `Error updating settings for ${form.value.id}: ${error}`,
+    });
+  }
+}
+
+function onSubscription(value) {
+  subscriptionsPanel.value = value;
+}
 
-        if (valid) {
-          await this.updateForm();
-          this.formSettingsDisabled = true;
-          this.addNotification({
-            text: 'Your form settings have been updated successfully.',
-            ...NotificationTypes.SUCCESS,
-          });
-          this.fetchForm(this.form.id);
-        }
-      } catch (error) {
-        this.addNotification({
-          text: 'An error occurred while attempting to update the settings for this form.',
-          consoleError: `Error updating settings for ${this.form.id}: ${error}`,
-        });
-      }
-    },
-    onSubscription(value) {
-      this.subscriptionsPanel = value;
-    },
-  },
-};
+defineExpose({
+  currentVersion,
+  cancelSettingsEdit,
+  enableSettingsEdit,
+  formSettingsDisabled,
+  isSubscribed,
+  onSubscription,
+  settingsPanel,
+  subscriptionsPanel,
+  updateSettings,
+});
 </script>
 
 <template>
@@ -178,7 +170,6 @@ export default {
         <v-expansion-panel-text>
           <v-form
             ref="settingsForm"
-            v-model="settingsFormValid"
             :disabled="formSettingsDisabled"
             lazy-validation
           >
diff --git a/app/frontend/src/components/forms/manage/ManageFormActions.vue b/app/frontend/src/components/forms/manage/ManageFormActions.vue
index bd34a19b0..2208ecb52 100644
--- a/app/frontend/src/components/forms/manage/ManageFormActions.vue
+++ b/app/frontend/src/components/forms/manage/ManageFormActions.vue
@@ -1,5 +1,7 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import ShareForm from '~/components/forms/manage/ShareForm.vue';
@@ -7,50 +9,55 @@ import { useFormStore } from '~/store/form';
 
 import { FormPermissions } from '~/utils/constants';
 
-export default {
-  components: {
-    BaseDialog,
-    ShareForm,
-  },
-  data() {
-    return {
-      showDeleteDialog: false,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['form', 'permissions', 'isRTL', 'lang']),
-    canDeleteForm() {
-      return this.permissions.includes(FormPermissions.FORM_DELETE);
-    },
-    canManageEmail() {
-      return this.permissions.includes(FormPermissions.EMAIL_TEMPLATE_UPDATE);
-    },
-    canManageTeam() {
-      return this.permissions.includes(FormPermissions.TEAM_UPDATE);
-    },
-    canViewSubmissions() {
-      const perms = [
-        FormPermissions.SUBMISSION_READ,
-        FormPermissions.SUBMISSION_UPDATE,
-      ];
-      return this.permissions.some((p) => perms.includes(p));
-    },
-    isPublished() {
-      return (
-        this.form?.versions?.length &&
-        this.form.versions.some((v) => v.published)
-      );
-    },
-  },
-  methods: {
-    ...mapActions(useFormStore, ['deleteCurrentForm']),
-    async deleteForm() {
-      this.showDeleteDialog = false;
-      await this.deleteCurrentForm();
-      this.$router.push({ name: 'UserForms' });
-    },
-  },
-};
+const showDeleteDialog = ref(false);
+
+const formStore = useFormStore();
+
+const { form, permissions, isRTL, lang } = storeToRefs(formStore);
+
+const router = useRouter();
+
+const canDeleteForm = computed(() =>
+  permissions.value.includes(FormPermissions.FORM_DELETE)
+);
+
+const canManageEmail = computed(() =>
+  permissions.value.includes(FormPermissions.EMAIL_TEMPLATE_UPDATE)
+);
+
+const canManageTeam = computed(() =>
+  permissions.value.includes(FormPermissions.TEAM_UPDATE)
+);
+
+const canViewSubmissions = computed(() => {
+  const perms = [
+    FormPermissions.SUBMISSION_READ,
+    FormPermissions.SUBMISSION_UPDATE,
+  ];
+  return permissions.value.some((p) => perms.includes(p));
+});
+
+const isPublished = computed(() => {
+  return (
+    form.value?.versions?.length && form.value.versions.some((v) => v.published)
+  );
+});
+
+async function deleteForm() {
+  showDeleteDialog.value = false;
+  await formStore.deleteCurrentForm();
+  router.push({ name: 'UserForms' });
+}
+
+defineExpose({
+  canDeleteForm,
+  canManageEmail,
+  canManageTeam,
+  canViewSubmissions,
+  isPublished,
+  deleteForm,
+  showDeleteDialog,
+});
 </script>
 
 <template>
diff --git a/app/frontend/src/components/forms/manage/ManageLayout.vue b/app/frontend/src/components/forms/manage/ManageLayout.vue
index b599e6d63..7c15314cd 100644
--- a/app/frontend/src/components/forms/manage/ManageLayout.vue
+++ b/app/frontend/src/components/forms/manage/ManageLayout.vue
@@ -1,46 +1,39 @@
-<script>
-import { mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { onMounted } from 'vue';
+import { ref } from 'vue';
 
 import ManageForm from '~/components/forms/manage/ManageForm.vue';
 import ManageFormActions from '~/components/forms/manage/ManageFormActions.vue';
 import { useFormStore } from '~/store/form';
 import { FormPermissions } from '~/utils/constants';
 
-export default {
-  components: {
-    ManageForm,
-    ManageFormActions,
+const properties = defineProps({
+  f: {
+    type: String,
+    required: true,
   },
-  props: {
-    f: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      loading: true,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['form', 'permissions', 'isRTL', 'lang']),
-  },
-  async mounted() {
-    this.loading = true;
+});
 
-    const formStore = useFormStore();
+const loading = ref(true);
 
-    await Promise.all([
-      formStore.fetchForm(this.f),
-      formStore.getFormPermissionsForUser(this.f),
-    ]);
+const { form, permissions, isRTL, lang } = storeToRefs(useFormStore());
 
-    if (this.permissions.includes(FormPermissions.DESIGN_READ))
-      await formStore.fetchDrafts(this.f);
+onMounted(async () => {
+  loading.value = true;
 
-    this.loading = false;
-  },
-};
+  const formStore = useFormStore();
+
+  await Promise.all([
+    formStore.fetchForm(properties.f),
+    formStore.getFormPermissionsForUser(properties.f),
+  ]);
+
+  if (permissions.value.includes(FormPermissions.DESIGN_READ))
+    await formStore.fetchDrafts(properties.f);
+
+  loading.value = false;
+});
 </script>
 
 <template>
diff --git a/app/frontend/src/components/forms/manage/ManageVersions.vue b/app/frontend/src/components/forms/manage/ManageVersions.vue
index f3cf5c995..bd1bac20c 100644
--- a/app/frontend/src/components/forms/manage/ManageVersions.vue
+++ b/app/frontend/src/components/forms/manage/ManageVersions.vue
@@ -1,251 +1,234 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { onMounted } from 'vue';
+import { computed, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
-import { i18n } from '~/internationalization';
+import { exportFormSchema } from '~/composables/form';
+import { formService } from '~/services';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
-import { formService } from '~/services';
 import { FormPermissions } from '~/utils/constants';
 
-export default {
-  components: {
-    BaseDialog,
-    BaseInfoCard,
+const { t } = useI18n({ useScope: 'global' });
+
+const router = useRouter();
+
+const formDesigner = inject('formDesigner');
+const draftId = inject('draftId');
+
+const formStore = useFormStore();
+const notificationStore = useNotificationStore();
+
+const { drafts, form, permissions, isRTL, lang } = storeToRefs(formStore);
+
+const headers = ref([
+  {
+    title: t('trans.manageVersions.version'),
+    align: 'start',
+    key: 'version',
   },
-  inject: ['formDesigner', 'draftId', 'formId'],
-  data() {
-    return {
-      headers: [
-        {
-          title: i18n.t('trans.manageVersions.version'),
-          align: 'start',
-          key: 'version',
-        },
-        {
-          title: i18n.t('trans.manageVersions.status'),
-          align: 'start',
-          key: 'status',
-        },
-        {
-          title: i18n.t('trans.manageVersions.dateCreated'),
-          align: 'start',
-          key: 'createdAt',
-        },
-        {
-          title: i18n.t('trans.manageVersions.createdBy'),
-          align: 'start',
-          key: 'createdBy',
-        },
-        {
-          title: i18n.t('trans.manageVersions.actions'),
-          align: 'end',
-          key: 'action',
-          filterable: false,
-          sortable: false,
-          width: 200,
-        },
-      ],
-      formSchema: {
-        display: 'form',
-        type: 'form',
-        components: [],
-      },
-      publishOpts: {
-        publishing: true,
-        version: '',
-        id: '',
-      },
-      showHasDraftsDialog: false,
-      showPublishDialog: false,
-      showDeleteDraftDialog: false,
-      rerenderTable: 0,
-    };
+  {
+    title: t('trans.manageVersions.status'),
+    align: 'start',
+    key: 'status',
   },
-  computed: {
-    ...mapState(useFormStore, [
-      'drafts',
-      'form',
-      'permissions',
-      'isRTL',
-      'lang',
-    ]),
-    hasDraft() {
-      return this.drafts?.length > 0;
-    },
-    hasVersions() {
-      return this.form?.versions?.length;
-    },
-    versionList() {
-      if (this.hasDraft) {
-        // reformat draft object and then join with versions array
-        const reDraft = this.drafts.map((obj, idx) => {
-          obj.published = false;
-          obj.version = this.form.versions.length + this.drafts.length - idx;
-          obj.isDraft = true;
-          delete obj.formVersionId;
-          delete obj.schema;
-
-          return obj;
-        });
-        const merged = reDraft.concat(this.form.versions);
-        return this.form ? merged : [];
-      } else {
-        return this.form ? this.form.versions : [];
-      }
-    },
-    canPublish() {
-      return this.permissions.includes(FormPermissions.FORM_UPDATE);
-    },
+  {
+    title: t('trans.manageVersions.dateCreated'),
+    align: 'start',
+    key: 'createdAt',
   },
-  async created() {
-    if (this.formDesigner) {
-      await this.turnOnPublish();
-    }
+  {
+    title: t('trans.manageVersions.createdBy'),
+    align: 'start',
+    key: 'createdBy',
   },
-  methods: {
-    ...mapActions(useNotificationStore, ['addNotification']),
-    ...mapActions(useFormStore, [
-      'deleteDraft',
-      'fetchDrafts',
-      'fetchForm',
-      'publishDraft',
-      'toggleVersionPublish',
-    ]),
-    createVersion(formId, versionId) {
-      if (this.hasDraft) {
-        this.showHasDraftsDialog = true;
-      } else {
-        this.$router.push({
-          name: 'FormDesigner',
-          query: { f: formId, v: versionId, newVersion: true },
-        });
-      }
-    },
+  {
+    title: t('trans.manageVersions.actions'),
+    align: 'end',
+    key: 'action',
+    filterable: false,
+    sortable: false,
+    width: 200,
+  },
+]);
 
-    cancelPublish() {
-      this.showPublishDialog = false;
-      document.documentElement.style.overflow = 'auto';
-      if (this.hasDraft) {
-        const idx = this.drafts.map((d) => d.id).indexOf(this.publishOpts.id);
-        if (idx !== -1) {
-          this.drafts[idx].published = !this.drafts[idx].published;
-        }
-      }
-      if (this.form.versions) {
-        const idx = this.form.versions
-          .map((d) => d.id)
-          .indexOf(this.publishOpts.id);
+const rerenderTable = ref(0);
+const showDeleteDraftDialog = ref(false);
+const showHasDraftsDialog = ref(false);
+const showPublishDialog = ref(false);
+
+let formSchema = ref({
+  display: 'form',
+  type: 'form',
+  components: [],
+});
+
+const publishOpts = ref({
+  publishing: true,
+  version: '',
+  id: '',
+});
+
+const hasDraft = computed(() => drafts.value?.length > 0);
+const hasVersions = computed(() => form.value?.versions?.length);
+const versionList = computed(() => {
+  if (hasDraft.value) {
+    // If there are existing drafts
+    const formattedDrafts = drafts.value.map((draft, idx) => {
+      draft.version = form.value.versions.length + drafts.value.length - idx;
+      draft.published = draft.published ? draft.published : false;
+      draft.isDraft = true;
+      delete draft.formVersionId;
+      return draft;
+    });
+    return formattedDrafts.concat(form.value.versions);
+  } else {
+    return form.value ? form.value.versions : [];
+  }
+});
+const canPublish = computed(() =>
+  permissions.value.includes(FormPermissions.FORM_UPDATE)
+);
+
+async function deleteCurrentDraft() {
+  showDeleteDraftDialog.value = false;
+  await formStore.deleteDraft({
+    formId: form.value.id,
+    draftId: drafts.value[0].id,
+  });
+  await formStore.fetchDrafts(form.value.id);
+}
+
+async function onExportClick(formVersionId, isDraft) {
+  await getFormSchema(formVersionId, isDraft);
+  exportFormSchema(form.value.name, formSchema.value, form.value.snake);
+}
+
+async function getFormSchema(id, isDraft = false) {
+  try {
+    let res = !isDraft
+      ? await formService.readVersion(form.value.id, id)
+      : await formService.readDraft(form.value.id, id);
+    formSchema.value = { ...formSchema.value, ...res.data.schema };
+  } catch (error) {
+    notificationStore.addNotification({
+      text: 'An error occurred while loading the form design.',
+      consoleError: `Error loading form ${form.value.id} schema (version / draft: ${id}): ${error}`,
+    });
+  }
+}
+
+function createVersion(formId, versionId) {
+  if (hasDraft.value) {
+    showHasDraftsDialog.value = true;
+  } else {
+    router.push({
+      name: 'FormDesigner',
+      query: { f: formId, v: versionId, newVersion: true },
+    });
+  }
+}
+
+function cancelPublish() {
+  showPublishDialog.value = false;
+  document.documentElement.style.overflow = 'auto';
+  if (hasDraft.value) {
+    const idx = drafts.value.map((d) => d.id).indexOf(publishOpts.value.id);
+    if (idx !== -1) {
+      drafts.value[idx].published = !drafts.value[idx].published;
+    }
+  }
+  if (form.value.versions) {
+    const idx = form.value.versions
+      .map((d) => d.id)
+      .indexOf(publishOpts.value.id);
+    if (idx !== -1) {
+      form.value.versions[idx].published = !form.value.versions[idx].published;
+    }
+  }
+  rerenderTable.value += 1;
+}
+
+async function updatePublish() {
+  showPublishDialog.value = false;
+  document.documentElement.style.overflow = 'auto';
+  // if publishing a draft version
+  if (publishOpts.value.isDraft) {
+    await formStore.publishDraft({
+      formId: form.value.id,
+      draftId: publishOpts.value.id,
+    });
+    // Refresh draft in form version list
+    formStore.fetchDrafts(form.value.id);
+  }
+  // else, we toggle status of a version
+  else {
+    await formStore.toggleVersionPublish({
+      formId: form.value.id,
+      versionId: publishOpts.value.id,
+      publish: publishOpts.value.publishing,
+    });
+  }
+  // Refresh form version list
+  formStore.fetchForm(form.value.id);
+}
+
+function togglePublish(value, id, version, isDraft) {
+  publishOpts.value = {
+    publishing: value,
+    version: version,
+    id: id,
+    isDraft: isDraft,
+  };
+  showPublishDialog.value = true;
+}
+
+function turnOnPublish() {
+  if (versionList.value) {
+    for (const item of versionList.value) {
+      if (item.id === draftId) {
+        publishOpts.value = {
+          publishing: true,
+          version: item.version,
+          id: item.id,
+          isDraft: item.isDraft,
+        };
+        // toggle switch state in data table
+        const idx = drafts.value.map((d) => d.id).indexOf(item.id);
         if (idx !== -1) {
-          this.form.versions[idx].published =
-            !this.form.versions[idx].published;
+          drafts.value[idx].published = true;
         }
+        document.documentElement.style.overflow = 'hidden';
+        showPublishDialog.value = true;
       }
-      this.rerenderTable += 1;
-    },
-    togglePublish(value, id, version, isDraft) {
-      this.publishOpts = {
-        publishing: value,
-        version: version,
-        id: id,
-        isDraft: isDraft,
-      };
-      this.showPublishDialog = true;
-    },
-
-    turnOnPublish() {
-      if (this.versionList) {
-        for (const item of this.versionList) {
-          if (item.id === this.draftId) {
-            this.publishOpts = {
-              publishing: true,
-              version: item.version,
-              id: item.id,
-              isDraft: item.isDraft,
-            };
-            // toggle switch state in data table
-            const idx = this.drafts.map((d) => d.id).indexOf(item.id);
-            if (idx !== -1) {
-              this.drafts[idx].published = true;
-            }
-            document.documentElement.style.overflow = 'hidden';
-            this.showPublishDialog = true;
-          }
-        }
-      }
-    },
-
-    async updatePublish() {
-      this.showPublishDialog = false;
-      document.documentElement.style.overflow = 'auto';
-      // if publishing a draft version
-      if (this.publishOpts.isDraft) {
-        await this.publishDraft({
-          formId: this.form.id,
-          draftId: this.publishOpts.id,
-        });
-        // Refresh draft in form version list
-        this.fetchDrafts(this.form.id);
-      }
-      // else, we toggle status of a version
-      else {
-        await this.toggleVersionPublish({
-          formId: this.form.id,
-          versionId: this.publishOpts.id,
-          publish: this.publishOpts.publishing,
-        });
-      }
-      // Refresh form version list
-      this.fetchForm(this.form.id);
-    },
-
-    async deleteCurrentDraft() {
-      this.showDeleteDraftDialog = false;
-      await this.deleteDraft({
-        formId: this.form.id,
-        draftId: this.drafts[0].id,
-      });
-      this.fetchDrafts(this.form.id);
-    },
-
-    async onExportClick(id, isDraft) {
-      await this.getFormSchema(id, isDraft);
-      let snek = this.form.snake;
-      if (!this.form.snake) {
-        snek = this.form.name
-          .replace(/\s+/g, '_')
-          .replace(/[^-_0-9a-z]/gi, '')
-          .toLowerCase();
-      }
+    }
+  }
+}
 
-      const a = document.createElement('a');
-      a.href = `data:application/json;charset=utf-8,${encodeURIComponent(
-        JSON.stringify(this.formSchema)
-      )}`;
-      a.download = `${snek}_schema.json`;
-      a.style.display = 'none';
-      a.classList.add('hiddenDownloadTextElement');
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    },
-
-    async getFormSchema(id, isDraft = false) {
-      try {
-        let res = !isDraft
-          ? await formService.readVersion(this.form.id, id)
-          : await formService.readDraft(this.form.id, id);
-        this.formSchema = { ...this.formSchema, ...res.data.schema };
-      } catch (error) {
-        this.addNotification({
-          text: 'An error occurred while loading the form design.',
-          consoleError: `Error loading form ${this.form.id} schema (version / draft: ${id}): ${error}`,
-        });
-      }
-    },
-  },
-};
+onMounted(() => {
+  if (formDesigner) {
+    turnOnPublish();
+  }
+});
+
+defineExpose({
+  createVersion,
+  deleteCurrentDraft,
+  formSchema,
+  onExportClick,
+  publishOpts,
+  rerenderTable,
+  showDeleteDraftDialog,
+  showHasDraftsDialog,
+  showPublishDialog,
+  togglePublish,
+  updatePublish,
+  versionList,
+});
 </script>
 
 <template>
@@ -270,6 +253,8 @@ export default {
       ></v-icon
       >{{ $t('trans.manageVersions.infoB') }}
     </div>
+
+    <!-- Actions -->
     <v-data-table
       :key="rerenderTable"
       hover
@@ -351,7 +336,6 @@ export default {
         {{ item.createdBy }}
       </template>
 
-      <!-- Actions -->
       <template #item.action="{ item }">
         <!-- Edit draft version -->
         <span v-if="item.isDraft">
@@ -381,7 +365,7 @@ export default {
           </v-tooltip>
         </span>
 
-        <!-- export -->
+        <!-- Export version -->
         <span>
           <v-tooltip location="bottom">
             <template #activator="{ props }">
@@ -403,7 +387,7 @@ export default {
           </v-tooltip>
         </span>
 
-        <!-- create new version -->
+        <!-- Create draft from version -->
         <span v-if="!item.isDraft">
           <v-tooltip location="bottom">
             <template #activator="{ props }">
@@ -440,7 +424,7 @@ export default {
           </v-tooltip>
         </span>
 
-        <!-- delete draft version -->
+        <!-- Delete version -->
         <span v-else>
           <v-tooltip location="bottom">
             <template #activator="{ props }">
diff --git a/app/frontend/src/components/forms/manage/ShareForm.vue b/app/frontend/src/components/forms/manage/ShareForm.vue
index 4d60050b4..d51396158 100644
--- a/app/frontend/src/components/forms/manage/ShareForm.vue
+++ b/app/frontend/src/components/forms/manage/ShareForm.vue
@@ -1,52 +1,49 @@
-<script>
+<script setup>
+import { storeToRefs } from 'pinia';
 import QrcodeVue from 'qrcode.vue';
-import { mapState } from 'pinia';
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
 import BaseCopyToClipboard from '~/components/base/BaseCopyToClipboard.vue';
 import { NotificationTypes } from '~/utils/constants';
 import { useFormStore } from '~/store/form';
 
-export default {
-  components: {
-    BaseCopyToClipboard,
-    QrcodeVue,
-  },
-  props: {
-    formId: {
-      type: String,
-      required: true,
-    },
-    warning: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      dialog: false,
-      qrLevel: 'M',
-      qrSize: 900,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL', 'lang']),
-    formLink() {
-      return `${window.location.origin}${
-        import.meta.env.BASE_URL
-      }/form/submit?f=${this.formId}`;
-    },
-    NOTIFICATIONS_TYPES() {
-      return NotificationTypes;
-    },
+const router = useRouter();
+
+const properties = defineProps({
+  formId: {
+    type: String,
+    required: true,
   },
-  methods: {
-    downloadQr() {
-      let link = document.createElement('a');
-      link.download = 'qrcode.png';
-      link.href = document.querySelector('.qrCodeContainer canvas').toDataURL();
-      link.click();
-    },
+  warning: {
+    type: Boolean,
+    default: false,
   },
-};
+});
+
+const dialog = ref(false);
+const qrLevel = ref('M');
+const qrSize = ref(900);
+
+const { isRTL, lang } = storeToRefs(useFormStore());
+
+const formLink = computed(() => {
+  const url = router.resolve({
+    name: 'FormSubmit',
+    query: { f: properties.formId },
+  });
+  return `${window.location.origin}${url.href}`;
+});
+const NOTIFICATIONS_TYPES = computed(() => NotificationTypes);
+
+function downloadQr() {
+  let link = document.createElement('a');
+  link.download = 'qrcode.png';
+  link.href = document.querySelector('.qrCodeContainer canvas').toDataURL();
+  link.click();
+}
+
+defineExpose({ dialog, formLink, downloadQr });
 </script>
 
 <template>
@@ -68,7 +65,7 @@ export default {
       <span :lang="lang">{{ $t('trans.shareForm.shareForm') }}</span>
     </v-tooltip>
 
-    <v-dialog v-model="dialog" width="900">
+    <v-dialog v-model="dialog" width="900" data-cy="shareFormDialog">
       <v-card>
         <v-card-title class="text-h5 pb-0" :lang="lang">{{
           $t('trans.shareForm.shareLink')
diff --git a/app/frontend/src/components/forms/manage/Subscription.vue b/app/frontend/src/components/forms/manage/Subscription.vue
index 24a89e22d..8aabeed02 100644
--- a/app/frontend/src/components/forms/manage/Subscription.vue
+++ b/app/frontend/src/components/forms/manage/Subscription.vue
@@ -1,81 +1,66 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 
-export default {
-  data() {
-    return {
-      loading: false,
-      showConfirmationDialog: false,
-      showDeleteDialog: false,
-      showSecret: false,
-      valid: false,
-      subscriptionFormValid: false,
-      endpointUrlRules: [
-        (v) => !!v || this.$t('trans.formSettings.validEndpointRequired'),
-        (v) =>
-          (v &&
-            new RegExp(
-              /^(ht|f)tp(s?):\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g
-            ).test(v)) ||
-          this.$t('trans.formSettings.validEndpointRequired'),
-      ],
-      endpointTokenRules: [
-        (v) => !!v || this.$t('trans.formSettings.validBearerTokenRequired'),
-      ],
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, [
-      'apiKey',
-      'form',
-      'lang',
-      'permissions',
-      'subscriptionData',
-      'version',
-    ]),
-  },
-  methods: {
-    ...mapActions(useFormStore, [
-      'updateSubscription',
-      'readFormSubscriptionData',
-    ]),
-    ...mapActions(useNotificationStore, ['addNotification']),
-    async updateSettings() {
-      try {
-        const { valid } = await this.$refs.subscriptionForm.validate();
+const { t } = useI18n({ useScope: 'global' });
 
-        if (valid) {
-          let subscriptionData = {
-            ...this.subscriptionData,
-            formId: this.form.id,
-          };
-          await this.updateSubscription({
-            formId: this.form.id,
-            subscriptionData: subscriptionData,
-          });
+const showSecret = ref(false);
+const subscriptionForm = ref(null);
+const subscriptionFormValid = ref(false);
+/* c8 ignore start */
+const endpointUrlRules = ref([
+  (v) => !!v || t('trans.formSettings.validEndpointRequired'),
+  (v) =>
+    (v &&
+      new RegExp(
+        /^(ht|f)tp(s?):\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g
+      ).test(v)) ||
+    t('trans.formSettings.validEndpointRequired'),
+]);
+const endpointTokenRules = ref([
+  (v) => !!v || t('trans.formSettings.validBearerTokenRequired'),
+]);
+/* c8 ignore end */
 
-          this.readFormSubscriptionData(this.form.id);
-        }
-      } catch (error) {
-        this.addNotification({
-          text: this.$t('trans.subscribeEvent.saveSettingsErrMsg'),
-          consoleError: this.$t(
-            'trans.subscribeEvent.updateSettingsConsoleErrMsg',
-            {
-              formId: this.form.id,
-              error: error,
-            }
-          ),
-        });
-      }
-    },
-    showHideKey() {
-      this.showSecret = !this.showSecret;
-    },
-  },
-};
+const formStore = useFormStore();
+const notificationStore = useNotificationStore();
+
+const { form, lang, subscriptionData } = storeToRefs(formStore);
+
+async function updateSettings() {
+  try {
+    const { valid } = await subscriptionForm.value.validate();
+    if (valid) {
+      let subData = {
+        ...subscriptionData.value,
+        formId: form.value.id,
+      };
+      await formStore.updateSubscription({
+        formId: form.value.id,
+        subscriptionData: subData,
+      });
+
+      formStore.readFormSubscriptionData(form.value.id);
+    }
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.subscribeEvent.saveSettingsErrMsg'),
+      consoleError: t('trans.subscribeEvent.updateSettingsConsoleErrMsg', {
+        formId: form.value.id,
+        error: error,
+      }),
+    });
+  }
+}
+
+function showHideKey() {
+  showSecret.value = !showSecret.value;
+}
+
+defineExpose({ showHideKey, showSecret, updateSettings });
 </script>
 
 <template>
diff --git a/app/frontend/src/components/forms/manage/TeamManagement.vue b/app/frontend/src/components/forms/manage/TeamManagement.vue
index 8e2c0059c..f466087a1 100644
--- a/app/frontend/src/components/forms/manage/TeamManagement.vue
+++ b/app/frontend/src/components/forms/manage/TeamManagement.vue
@@ -1,12 +1,12 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import BaseDialog from '~/components/base/BaseDialog.vue';
 import BaseFilter from '~/components/base/BaseFilter.vue';
 import AddTeamMember from '~/components/forms/manage/AddTeamMember.vue';
-import { i18n } from '~/internationalization';
 import { rbacService, roleService } from '~/services';
-import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useIdpStore } from '~/store/identityProviders';
 import { useNotificationStore } from '~/store/notification';
@@ -16,373 +16,384 @@ import {
   IdentityMode,
 } from '~/utils/constants';
 
-export default {
-  components: {
-    BaseDialog,
-    BaseFilter,
-    AddTeamMember,
-  },
-  props: {
-    formId: {
-      type: String,
-      required: true,
-    },
+const { t } = useI18n({ useScope: 'global' });
+
+const properties = defineProps({
+  formId: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      filterData: [],
-      filterIgnore: [
-        {
-          key: 'actions',
-        },
-      ],
-      formUsers: [],
-      isAddingUsers: false,
-      itemsToDelete: [],
-      loading: true,
-      roleList: [],
-      search: '',
-      selectedUsers: [],
-      showColumnsDialog: false,
-      showDeleteDialog: false,
-      tableData: [],
-      updating: false,
-    };
+});
+
+const filterData = ref([]);
+const filterIgnore = ref([
+  {
+    key: 'actions',
   },
-  computed: {
-    ...mapState(useAuthStore, ['user']),
-    ...mapState(useFormStore, ['form', 'permissions', 'isRTL', 'lang']),
-    ...mapState(useIdpStore, ['listRoles']),
-    canManageTeam() {
-      return this.permissions.includes(FormPermissions.TEAM_UPDATE);
-    },
-    roleOrder() {
-      return Object.values(FormRoleCodes);
-    },
-    DeleteMessage() {
-      return this.itemsToDelete.length > 1
-        ? i18n.t('trans.teamManagement.delSelectedMembersWarning')
-        : i18n.t('trans.teamManagement.delSelectedMemberWarning');
+]);
+const formUsers = ref([]);
+const isAddingUsers = ref(false);
+const itemsToDelete = ref([]);
+const loading = ref(true);
+const roleList = ref([]);
+const search = ref('');
+const selectedUsers = ref([]);
+const showColumnsDialog = ref(false);
+const showDeleteDialog = ref(false);
+const tableData = ref([]);
+const updating = ref(false);
+
+const formStore = useFormStore();
+const idpStore = useIdpStore();
+const notificationStore = useNotificationStore();
+
+const { form, permissions, isRTL, lang } = storeToRefs(formStore);
+
+const canManageTeam = computed(() =>
+  permissions.value.includes(FormPermissions.TEAM_UPDATE)
+);
+const roleOrder = computed(() => Object.values(FormRoleCodes));
+const DeleteMessage = computed(() => {
+  return itemsToDelete.value.length > 1
+    ? t('trans.teamManagement.delSelectedMembersWarning')
+    : t('trans.teamManagement.delSelectedMemberWarning');
+});
+const DEFAULT_HEADERS = computed(() => {
+  const headers = [
+    { title: t('trans.teamManagement.fullName'), key: 'fullName' },
+    { title: t('trans.teamManagement.username'), key: 'username' },
+    {
+      title: t('trans.teamManagement.identityProvider'),
+      key: 'identityProvider.code',
     },
-    DEFAULT_HEADERS() {
-      const headers = [
-        { title: i18n.t('trans.teamManagement.fullName'), key: 'fullName' },
-        { title: i18n.t('trans.teamManagement.username'), key: 'username' },
-        {
-          title: i18n.t('trans.teamManagement.identityProvider'),
-          key: 'identityProvider.code',
-        },
-      ];
-      return headers
-        .concat(
-          this.roleList
-            .filter(
-              (role) =>
-                this.form.userType === IdentityMode.TEAM ||
-                role.code !== FormRoleCodes.FORM_SUBMITTER
-            )
-            .map((role) => ({
-              filterable: false,
-              title: role.display,
-              key: role.code,
-              description: role.description,
-            }))
-            .sort((a, b) =>
-              this.roleOrder.indexOf(a.value) > this.roleOrder.indexOf(b.value)
-                ? 1
-                : -1
-            )
+  ];
+  return headers
+    .concat(
+      roleList.value
+        .filter(
+          (role) =>
+            form.value.userType === IdentityMode.TEAM ||
+            role.code !== FormRoleCodes.FORM_SUBMITTER
         )
-        .concat({ title: '', key: 'actions', width: '1rem', sortable: false });
-    },
-    FILTER_HEADERS() {
-      return this.DEFAULT_HEADERS.filter(
-        (h) => !this.filterIgnore.some((fd) => fd.key === h.key)
-      );
-    },
-    HEADERS() {
-      let headers = this.DEFAULT_HEADERS;
-      if (this.filterData.length > 0) {
-        headers = headers.filter(
-          (h) =>
-            this.filterData.some((fd) => fd === h.key) ||
-            this.filterIgnore.some((ign) => ign.key === h.key)
-        );
-      }
-      return headers;
-    },
-    PRESELECTED_DATA() {
-      return this.filterData.length === 0
-        ? this.FILTER_HEADERS.map((fd) => fd.key)
-        : this.filterData;
-    },
-  },
-  mounted() {
-    this.loadItems();
-  },
-  methods: {
-    ...mapActions(useFormStore, ['fetchForm', 'getFormPermissionsForUser']),
-    ...mapActions(useNotificationStore, ['addNotification']),
-    ...mapActions(useIdpStore, ['findByCode']),
-    async loadItems() {
-      this.loading = true;
-
-      await Promise.all([
-        await this.fetchForm(this.formId),
-        await this.getFormPermissionsForUser(this.formId),
-        await this.getRolesList(),
-        await this.getFormUsers(),
-      ]);
-
-      this.loading = false;
-    },
+        .map((role) => ({
+          filterable: false,
+          title: role.display,
+          key: role.code,
+          description: role.description,
+        }))
+        .sort((a, b) => {
+          return roleOrder.value.indexOf(a.key) > roleOrder.value.indexOf(b.key)
+            ? 1
+            : -1;
+        })
+    )
+    .concat({ title: '', key: 'actions', width: '1rem', sortable: false });
+});
 
-    async getRolesList() {
-      try {
-        const response = await roleService.list();
-        this.roleList = response.data;
-      } catch (error) {
-        this.addNotification({
-          text: error.message,
-          consoleError:
-            this.$t('trans.teamManagement.getRolesErrMsg') + `${error}`,
-        });
-        this.roleList = [];
-      }
-    },
+const FILTER_HEADERS = computed(() => {
+  return DEFAULT_HEADERS.value.filter(
+    (h) => !filterIgnore.value.some((fd) => fd.key === h.key)
+  );
+});
 
-    async getFormUsers() {
-      try {
-        if (!this.canManageTeam) {
-          throw new Error(
-            this.$t('trans.teamManagement.insufficientPermissnMsg')
-          );
-        }
-        const formUsersResponse = await rbacService.getFormUsers({
-          formId: this.formId,
-          roles: '*',
-        });
-        this.formUsers = formUsersResponse?.data?.map((user) => {
-          user.idp = this.findByCode(user.user_idpCode);
-          return user;
-        });
-      } catch (error) {
-        this.addNotification({
-          text: error.message,
-          consoleError:
-            this.$t('trans.teamManagement.getUserErrMsg') + `${error}`,
-        });
-        this.formUsers = [];
-      } finally {
-        this.createTableData(); // Force refresh table based on latest API response
-      }
-    },
+const HEADERS = computed(() => {
+  let headers = DEFAULT_HEADERS.value;
+  if (filterData.value.length > 0) {
+    headers = headers.filter(
+      (h) =>
+        filterData.value.some((fd) => fd === h.key) ||
+        filterIgnore.value.some((ign) => ign.key === h.key)
+    );
+  }
+  return headers;
+});
+
+const PRESELECTED_DATA = computed(() => {
+  return filterData.value.length === 0
+    ? FILTER_HEADERS.value.map((fd) => fd.key)
+    : filterData.value;
+});
+
+onMounted(() => {
+  loadItems();
+});
+
+async function loadItems() {
+  loading.value = true;
+
+  await Promise.all([
+    await formStore.fetchForm(properties.formId),
+    await formStore.getFormPermissionsForUser(properties.formId),
+    await getRolesList(),
+    await getFormUsers(),
+  ]);
+
+  loading.value = false;
+}
+
+async function getRolesList() {
+  try {
+    const response = await roleService.list();
+    roleList.value = response.data;
+  } catch (error) {
+    notificationStore.addNotification({
+      text: error.message,
+      consoleError: t('trans.teamManagement.getRolesErrMsg') + `${error}`,
+    });
+    roleList.value = [];
+  }
+}
+
+async function getFormUsers() {
+  try {
+    if (!canManageTeam.value) {
+      throw new Error(t('trans.teamManagement.insufficientPermissnMsg'));
+    }
+    const formUsersResponse = await rbacService.getFormUsers({
+      formId: properties.formId,
+      roles: '*',
+    });
+
+    formUsers.value = formUsersResponse?.data?.map((user) => {
+      user.idp = idpStore.findByCode(user.user_idpCode);
+      return user;
+    });
+  } catch (error) {
+    notificationStore.addNotification({
+      text: error.message,
+      consoleError: t('trans.teamManagement.getUserErrMsg') + `${error}`,
+    });
+    formUsers.value = [];
+  } finally {
+    createTableData(); // Force refresh table based on latest API response
+  }
+}
+
+function createTableData() {
+  tableData.value = formUsers.value.map((user) => {
+    const row = {
+      id: user.userId,
+      formId: properties.formId,
+      fullName: user.fullName,
+      userId: user.userId,
+      username: user.username,
+      identityProvider: user.idp,
+    };
+    roleList.value
+      .map((role) => role.code)
+      .forEach((role) => (row[role] = user.roles.includes(role)));
+    return row;
+  });
+}
+
+function disableRole(header, user, userType) {
+  if (header === FormRoleCodes.FORM_SUBMITTER && userType !== IdentityMode.TEAM)
+    return true;
+  // if the header isn't in the IDPs roles, then disable
+  const idpRoles = idpStore.listRoles(user.identityProvider?.code);
+  return idpRoles && !idpRoles.includes(header);
+}
+
+async function toggleRole(user) {
+  await setUserForms(user.id, {
+    formId: user.formId,
+    ...user,
+    userId: user.id,
+  });
+  selectedUsers.value = [];
+}
+
+/**
+ * @ setUserForms
+ * Sets `userId`'s roles for the form
+ * @param {String} userId The userId to be updated
+ */
+async function setUserForms(userId, user) {
+  try {
+    updating.value = true;
+    const userRoles = generateFormRoleUsers(user);
+    await rbacService.setUserForms(userRoles, {
+      formId: properties.formId,
+      userId: userId,
+    });
+  } catch (error) {
+    notificationStore.addNotification({
+      text:
+        error &&
+        error.response &&
+        error.response.data &&
+        error.response.data.detail
+          ? error.response.data.detail
+          : t('trans.teamManagement.setUserFormsErrMsg'),
+      consoleError: t('trans.teamManagement.setUserFormsConsoleErrMsg', {
+        formId: properties.formId,
+        error: error,
+      }),
+    });
+  } finally {
+    await formStore.getFormPermissionsForUser(properties.formId);
+    await getFormUsers();
+    updating.value = false;
+  }
+}
 
-    createTableData() {
-      this.tableData = this.formUsers.map((user) => {
-        const row = {
-          id: user.userId,
-          formId: this.formId,
+function generateFormRoleUsers(user) {
+  return Object.keys(user)
+    .filter((role) => roleOrder.value.includes(role) && user[role])
+    .map((role) => ({
+      formId: user.formId,
+      role: role,
+      userId: user.userId,
+    }));
+}
+
+function addingUsers(adding) {
+  isAddingUsers.value = adding;
+}
+
+function addNewUsers(users, roles) {
+  if (Array.isArray(users) && users.length) {
+    users.forEach((user) => {
+      // if user isnt already in the table
+      if (!tableData.value.some((obj) => obj.userId === user.id)) {
+        const u = {
+          formId: properties.formId,
+          userId: user.id,
+          form_submitter:
+            Array.isArray(roles) && roles.length
+              ? roles.includes(FormRoleCodes.FORM_SUBMITTER)
+              : false,
+          form_designer:
+            Array.isArray(roles) && roles.length
+              ? roles.includes(FormRoleCodes.FORM_DESIGNER)
+              : false,
+          submission_approver:
+            Array.isArray(roles) && roles.length
+              ? roles.includes(FormRoleCodes.SUBMISSION_APPROVER)
+              : false,
+          submission_reviewer:
+            Array.isArray(roles) && roles.length
+              ? roles.includes(FormRoleCodes.SUBMISSION_REVIEWER)
+              : false,
+          team_manager:
+            Array.isArray(roles) && roles.length
+              ? roles.includes(FormRoleCodes.TEAM_MANAGER)
+              : false,
+          owner:
+            Array.isArray(roles) && roles.length
+              ? roles.includes(FormRoleCodes.OWNER)
+              : false,
           fullName: user.fullName,
-          userId: user.userId,
           username: user.username,
-          identityProvider: user.idp,
         };
-        this.roleList
-          .map((role) => role.code)
-          .forEach((role) => (row[role] = user.roles.includes(role)));
-        return row;
-      });
-    },
 
-    disableRole(header, user, userType) {
-      if (
-        header === FormRoleCodes.FORM_SUBMITTER &&
-        userType !== IdentityMode.TEAM
-      )
-        return true;
-      // if the header isn't in the IDPs roles, then disable
-      const idpRoles = this.listRoles(user.identityProvider?.code);
-      return idpRoles && !idpRoles.includes(header);
-    },
+        // create new object for table row
+        tableData.value.push(u);
 
-    async toggleRole(user) {
-      await this.setUserForms(user.id, {
-        formId: user.formId,
-        ...user,
-        userId: user.id,
-      });
-      this.selectedUsers = [];
-    },
-
-    /**
-     * @ setUserForms
-     * Sets `userId`'s roles for the form
-     * @param {String} userId The userId to be updated
-     */
-    async setUserForms(userId, user) {
-      try {
-        this.updating = true;
-        const userRoles = this.generateFormRoleUsers(user);
-        await rbacService.setUserForms(userRoles, {
-          formId: this.formId,
-          userId: userId,
-        });
-      } catch (error) {
-        this.addNotification({
+        if (Array.isArray(roles) && roles.length) setUserForms(user.id, u);
+      } else {
+        notificationStore.addNotification({
           text:
-            error &&
-            error.response &&
-            error.response.data &&
-            error.response.data.detail
-              ? error.response.data.detail
-              : this.$t('trans.teamManagement.setUserFormsErrMsg'),
-          consoleError: this.$t(
-            'trans.teamManagement.setUserFormsConsoleErrMsg',
-            {
-              formId: this.formId,
-              error: error,
-            }
-          ),
+            `${user.username}@${user.idpCode}` +
+            t('trans.teamManagement.idpMessage'),
         });
-      } finally {
-        await this.getFormPermissionsForUser(this.formId);
-        await this.getFormUsers();
-        this.updating = false;
       }
-    },
-
-    generateFormRoleUsers(user) {
-      return Object.keys(user)
-        .filter((role) => this.roleOrder.includes(role) && user[role])
-        .map((role) => ({
-          formId: user.formId,
-          role: role,
-          userId: user.userId,
-        }));
-    },
+    });
+  }
+}
 
-    addingUsers(adding) {
-      this.isAddingUsers = adding;
-    },
+function onShowColumnDialog() {
+  FILTER_HEADERS.value.sort(
+    (a, b) =>
+      PRESELECTED_DATA.value.findIndex((x) => x === b.key) -
+      PRESELECTED_DATA.value.findIndex((x) => x === a.key)
+  );
+  showColumnsDialog.value = true;
+}
 
-    addNewUsers(users, roles) {
-      if (Array.isArray(users) && users.length) {
-        users.forEach((user) => {
-          // if user isnt already in the table
-          if (!this.tableData.some((obj) => obj.userId === user.id)) {
-            const u = {
-              formId: this.formId,
-              userId: user.id,
-              form_submitter:
-                Array.isArray(roles) && roles.length
-                  ? roles.includes(FormRoleCodes.FORM_SUBMITTER)
-                  : false,
-              form_designer:
-                Array.isArray(roles) && roles.length
-                  ? roles.includes(FormRoleCodes.FORM_DESIGNER)
-                  : false,
-              submission_approver:
-                Array.isArray(roles) && roles.length
-                  ? roles.includes(FormRoleCodes.SUBMISSION_APPROVER)
-                  : false,
-              submission_reviewer:
-                Array.isArray(roles) && roles.length
-                  ? roles.includes(FormRoleCodes.SUBMISSION_REVIEWER)
-                  : false,
-              team_manager:
-                Array.isArray(roles) && roles.length
-                  ? roles.includes(FormRoleCodes.TEAM_MANAGER)
-                  : false,
-              owner:
-                Array.isArray(roles) && roles.length
-                  ? roles.includes(FormRoleCodes.OWNER)
-                  : false,
-              fullName: user.fullName,
-              username: user.username,
-            };
-
-            // create new object for table row
-            this.tableData.push(u);
-
-            if (Array.isArray(roles) && roles.length)
-              this.setUserForms(user.id, u);
-          } else {
-            this.addNotification({
-              text:
-                `${user.username}@${user.idpCode}` +
-                i18n.t('trans.teamManagement.idpMessage'),
-            });
-          }
-        });
-      }
-    },
-    onShowColumnDialog() {
-      this.FILTER_HEADERS.sort(
-        (a, b) =>
-          this.PRESELECTED_DATA.findIndex((x) => x.text === b.text) -
-          this.PRESELECTED_DATA.findIndex((x) => x.text === a.text)
-      );
-      this.showColumnsDialog = true;
-    },
+function onRemoveClick(item = null) {
+  if (tableData.value.length === 1) {
+    userError();
+    return;
+  }
+  if (item) {
+    itemsToDelete.value = Array.isArray(item)
+      ? tableData.value.filter((td) => item.includes(td.id))
+      : [item];
+  }
+  showDeleteDialog.value = true;
+}
 
-    onRemoveClick(item = null) {
-      if (this.tableData.length === 1) {
-        this.userError();
-        return;
-      }
-      if (item) {
-        this.itemsToDelete = Array.isArray(item)
-          ? this.tableData.filter((td) => item.includes(td.id))
-          : [item];
-      }
-      this.showDeleteDialog = true;
-    },
+function userError() {
+  notificationStore.addNotification({
+    text: t('trans.teamManagement.formOwnerRemovalWarning'),
+    consoleError: t('trans.teamManagement.formOwnerRemovalWarning'),
+  });
+}
 
-    userError() {
-      this.addNotification({
-        text: i18n.t('trans.teamManagement.formOwnerRemovalWarning'),
-        consoleError: i18n.t('trans.teamManagement.formOwnerRemovalWarning'),
-      });
-    },
+async function removeUser() {
+  showDeleteDialog.value = false;
+  try {
+    updating.value = true;
+    let ids = itemsToDelete.value.map((item) => item.id);
+    await rbacService.removeMultiUsers(ids, {
+      formId: properties.formId,
+    });
+    await formStore.getFormPermissionsForUser(properties.formId);
+    await getFormUsers();
+  } catch (error) {
+    notificationStore.addNotification({
+      text:
+        error &&
+        error.response &&
+        error.response.data &&
+        error.response.data.detail
+          ? error.response.data.detail
+          : t('trans.teamManagement.removeUsersErrMsg'),
+      consoleError: t('trans.teamManagement.removeUserConsoleErrMsg', {
+        formId: properties.formId,
+        error: error,
+      }),
+    });
+  } finally {
+    selectedUsers.value = [];
+    itemsToDelete.value = [];
+    updating.value = false;
+  }
+}
 
-    async removeUser() {
-      this.showDeleteDialog = false;
-      try {
-        this.updating = true;
-        let ids = this.itemsToDelete.map((item) => item.id);
-        await rbacService.removeMultiUsers(ids, {
-          formId: this.formId,
-        });
-        await this.getFormPermissionsForUser(this.formId);
-        await this.getFormUsers();
-      } catch (error) {
-        this.addNotification({
-          text:
-            error &&
-            error.response &&
-            error.response.data &&
-            error.response.data.detail
-              ? error.response.data.detail
-              : i18n.t('trans.teamManagement.removeUsersErrMsg'),
-          consoleError: i18n.t('trans.teamManagement.removeUserConsoleErrMsg', {
-            formId: this.formId,
-            error: error,
-          }),
-        });
-      } finally {
-        this.selectedUsers = [];
-        this.itemsToDelete = [];
-        this.updating = false;
-      }
-    },
+function updateFilter(data) {
+  filterData.value = data ? data : [];
+  showColumnsDialog.value = false;
+}
 
-    updateFilter(data) {
-      this.filterData = data ? data : [];
-      this.showColumnsDialog = false;
-    },
-  },
-};
+defineExpose({
+  addingUsers,
+  addNewUsers,
+  canManageTeam,
+  createTableData,
+  DEFAULT_HEADERS,
+  DeleteMessage,
+  disableRole,
+  FILTER_HEADERS,
+  filterData,
+  filterIgnore,
+  formUsers,
+  generateFormRoleUsers,
+  getFormUsers,
+  HEADERS,
+  isAddingUsers,
+  itemsToDelete,
+  onRemoveClick,
+  onShowColumnDialog,
+  PRESELECTED_DATA,
+  removeUser,
+  selectedUsers,
+  setUserForms,
+  showColumnsDialog,
+  toggleRole,
+  updateFilter,
+});
 </script>
 
 <template>
@@ -394,7 +405,7 @@ export default {
         <h1 class="mr-auto" :lang="lang">
           {{ $t('trans.teamManagement.teamManagement') }}
         </h1>
-        <h3>{{ formId ? form.name : '' }}</h3>
+        <h3>{{ form.name }}</h3>
       </div>
       <div style="z-index: 50">
         <span>
diff --git a/app/frontend/src/composables/documentTemplate.js b/app/frontend/src/composables/documentTemplate.js
new file mode 100644
index 000000000..337f1425a
--- /dev/null
+++ b/app/frontend/src/composables/documentTemplate.js
@@ -0,0 +1,67 @@
+import { formService } from '~/services';
+
+export async function fetchDocumentTemplates(formId) {
+  let documentTemplates = [];
+
+  const result = await formService.documentTemplateList(formId);
+  // Iterate through each document in the result
+  result.data.forEach((doc) => {
+    documentTemplates.push({
+      filename: doc.filename,
+      createdAt: doc.createdAt,
+      templateId: doc.id,
+      actions: '',
+    });
+  });
+
+  return documentTemplates;
+}
+
+export async function getDocumentTemplate(formId, templateId, filename) {
+  const { data } = await formService.documentTemplateRead(formId, templateId);
+  if (!data) throw new Error('There was no data in the document.');
+
+  const base64EncodedData = data.template.data
+    .map((byte) => String.fromCharCode(byte))
+    .join('');
+  // Decode the base64 string to binary data
+  const binaryString = atob(base64EncodedData);
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  const blob = new Blob([bytes], {
+    type: getMimeType(filename),
+  });
+
+  return window.URL.createObjectURL(blob);
+}
+
+export function getMimeType(filename) {
+  const extension = filename.slice(filename.lastIndexOf('.') + 1);
+  const mimeTypes = {
+    txt: 'text/plain',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    html: 'text/html',
+    odt: 'application/vnd.oasis.opendocument.text',
+    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  };
+  return mimeTypes[extension];
+}
+
+export async function readFile(uploadedFile) {
+  return await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(uploadedFile);
+    reader.onload = () => {
+      // Strip the Data URL scheme part (everything up to, and including, the comma)
+      const base64Content = reader.result.split(',')[1];
+      resolve(base64Content);
+    };
+    reader.onerror = (error) => {
+      reject(error);
+    };
+  });
+}
diff --git a/app/frontend/src/composables/form.js b/app/frontend/src/composables/form.js
new file mode 100644
index 000000000..f0c90b910
--- /dev/null
+++ b/app/frontend/src/composables/form.js
@@ -0,0 +1,22 @@
+export function exportFormSchema(formName, formSchema, snake) {
+  let snek = snake;
+  if (!snek) {
+    snek = formName
+      .replace(/\s+/g, '_')
+      .replace(/[^-_0-9a-z]/gi, '')
+      .toLowerCase();
+  }
+
+  const a = document.createElement('a');
+  a.href = `data:application/json;charset=utf-8,${encodeURIComponent(
+    JSON.stringify(formSchema.value)
+  )}`;
+  a.download = `${snek}_schema.json`;
+  a.style.display = 'none';
+  a.classList.add('hiddenDownloadTextElement');
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+
+  return { snek };
+}
diff --git a/app/frontend/src/router.js b/app/frontend/src/router.js
index dbdbfbd87..dbceac624 100644
--- a/app/frontend/src/router.js
+++ b/app/frontend/src/router.js
@@ -148,7 +148,16 @@ export default function getRouter(basePath = '/') {
               requiresAuth: 'primary',
               hasLogin: true,
             },
-            props: createProps,
+            props: (route) => {
+              return {
+                ...route.query,
+                ...route.params,
+                fd:
+                  String(route.query.fd).toLowerCase() === 'true' ||
+                  String(route.query.formDesigner) === 'true' ||
+                  route.query.fd === true,
+              };
+            },
           },
           {
             path: 'preview',
diff --git a/app/frontend/tests/unit/components/forms/manage/AddTeamMember.spec.js b/app/frontend/tests/unit/components/forms/manage/AddTeamMember.spec.js
index 9f4d41542..918c35ea4 100644
--- a/app/frontend/tests/unit/components/forms/manage/AddTeamMember.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/AddTeamMember.spec.js
@@ -1,17 +1,19 @@
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { flushPromises, mount } from '@vue/test-utils';
-import { expect } from 'vitest';
+import { afterEach, expect, vi } from 'vitest';
 
 import AddTeamMember from '~/components/forms/manage/AddTeamMember.vue';
 import { useIdpStore } from '~/store/identityProviders';
 import { FormRoleCodes, AppPermissions } from '~/utils/constants';
+import userService from '~/services/userService';
 
 const IDIR = {
   active: true,
   login: true,
   code: 'idir',
   display: 'IDIR',
+  extra: {},
   idp: 'idir',
   permissions: [
     AppPermissions.VIEWS_FORM_STEPPER,
@@ -52,6 +54,65 @@ const BCEIDBASIC = {
   login: true,
   code: 'bceid-basic',
   display: 'Basic BCeID',
+  extra: {
+    addTeamMemberSearch: {
+      email: {
+        exact: true,
+        message: 'trans.manageSubmissionUsers.exactBCEIDSearch',
+      },
+      text: {
+        message: 'trans.manageSubmissionUsers.searchInputLength',
+        minLength: 6,
+      },
+    },
+    userSearch: {
+      detail: 'Could not retrieve BCeID users. Invalid options provided.',
+      filters: [
+        {
+          name: 'filterIdpUserId',
+          param: 'idpUserId',
+          required: 0,
+        },
+        {
+          name: 'filterIdpCode',
+          param: 'idpCode',
+          required: 0,
+        },
+        {
+          name: 'filterUsername',
+          param: 'username',
+          exact: true,
+          required: 2,
+        },
+        {
+          name: 'filterFullName',
+          param: 'fullName',
+          required: 0,
+        },
+        {
+          name: 'filterFirstName',
+          param: 'firstName',
+          required: 0,
+        },
+        {
+          name: 'filterLastName',
+          param: 'lastName',
+          required: 0,
+        },
+        {
+          name: 'filterEmail',
+          exact: true,
+          param: 'email',
+          required: 2,
+        },
+        {
+          name: 'filterSearch',
+          param: 'search',
+          required: 0,
+        },
+      ],
+    },
+  },
   idp: 'bceidbasic',
   permissions: [AppPermissions.VIEWS_USER_SUBMISSIONS],
   primary: false,
@@ -73,6 +134,66 @@ const BCEIDBUSINESS = {
   login: true,
   code: 'bceid-business',
   display: 'Business BCeID',
+  extra: {
+    addTeamMemberSearch: {
+      email: {
+        exact: true,
+        message: 'trans.manageSubmissionUsers.exactBCEIDSearch',
+      },
+      text: {
+        message: 'trans.manageSubmissionUsers.searchInputLength',
+        minLength: 6,
+      },
+    },
+    formAccessSettings: 'idim',
+    userSearch: {
+      detail: 'Could not retrieve BCeID users. Invalid options provided.',
+      filters: [
+        {
+          name: 'filterIdpUserId',
+          param: 'idpUserId',
+          required: 0,
+        },
+        {
+          name: 'filterIdpCode',
+          param: 'idpCode',
+          required: 0,
+        },
+        {
+          name: 'filterUsername',
+          param: 'username',
+          exact: true,
+          required: 2,
+        },
+        {
+          name: 'filterFullName',
+          param: 'fullName',
+          required: 0,
+        },
+        {
+          name: 'filterFirstName',
+          param: 'firstName',
+          required: 0,
+        },
+        {
+          name: 'filterLastName',
+          param: 'lastName',
+          required: 0,
+        },
+        {
+          name: 'filterEmail',
+          exact: true,
+          param: 'email',
+          required: 2,
+        },
+        {
+          name: 'filterSearch',
+          param: 'search',
+          required: 0,
+        },
+      ],
+    },
+  },
   idp: 'bceidbusiness',
   permissions: [
     AppPermissions.VIEWS_FORM_EXPORT,
@@ -106,6 +227,7 @@ const PUBLIC = {
   login: false,
   code: 'public',
   display: 'Public',
+  extra: {},
   idp: 'public',
   permissions: [],
   primary: false,
@@ -134,6 +256,15 @@ describe('AddTeamMember.vue', () => {
     fullName: 'FULL NAME',
   };
 
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+  });
+
   it('shows the add new member button if the button has not been clicked', async () => {
     const pinia = createTestingPinia({ stubActions: false });
 
@@ -152,10 +283,7 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      selectedIdp: IDIR.code,
-    });
-
+    wrapper.vm.selectedIdp = IDIR.code;
     await flushPromises();
 
     expect(wrapper.text()).toContain('trans.addTeamMember.addNewMember');
@@ -179,7 +307,7 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({ addingUsers: true });
+    wrapper.vm.addingUsers = true;
 
     await flushPromises();
 
@@ -225,7 +353,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({ addingUsers: true, selectedIdp: IDIR.code });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
@@ -273,10 +402,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
@@ -333,10 +460,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
@@ -392,10 +517,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: IDIR.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
@@ -403,10 +526,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
@@ -463,10 +584,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: IDIR.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
@@ -474,10 +593,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
@@ -533,10 +650,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
@@ -553,10 +668,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).not.toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: IDIR.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
@@ -564,10 +677,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
@@ -583,10 +694,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).not.toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: IDIR.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
@@ -634,10 +743,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
@@ -653,10 +760,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).not.toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
@@ -713,10 +818,8 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
@@ -733,10 +836,8 @@ describe('AddTeamMember.vue', () => {
       expect(wrapper.text()).not.toContain(frc);
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
@@ -792,24 +893,18 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
-    wrapper.setData({
-      model: exampleUser,
-      selectedRoles: [FormRoleCodes.FORM_SUBMITTER],
-    });
+    wrapper.vm.model = exampleUser;
+    wrapper.vm.selectedRoles = [FormRoleCodes.FORM_SUBMITTER];
 
     expect(wrapper.vm.model).toEqual(exampleUser);
     expect(wrapper.vm.selectedRoles).toEqual([FormRoleCodes.FORM_SUBMITTER]);
 
-    wrapper.setData({
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
@@ -856,24 +951,18 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
-    wrapper.setData({
-      model: exampleUser,
-      selectedRoles: [FormRoleCodes.FORM_SUBMITTER],
-    });
+    wrapper.vm.model = exampleUser;
+    wrapper.vm.selectedRoles = [FormRoleCodes.FORM_SUBMITTER];
 
     expect(wrapper.vm.model).toEqual(exampleUser);
     expect(wrapper.vm.selectedRoles).toEqual([FormRoleCodes.FORM_SUBMITTER]);
 
-    wrapper.setData({
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
@@ -920,24 +1009,18 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBASIC.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
 
     await flushPromises();
 
-    wrapper.setData({
-      model: exampleUser,
-      selectedRoles: [FormRoleCodes.FORM_SUBMITTER],
-    });
+    wrapper.vm.model = exampleUser;
+    wrapper.vm.selectedRoles = [FormRoleCodes.FORM_SUBMITTER];
 
     expect(wrapper.vm.model).toEqual(exampleUser);
     expect(wrapper.vm.selectedRoles).toEqual([FormRoleCodes.FORM_SUBMITTER]);
 
-    wrapper.setData({
-      selectedIdp: IDIR.code,
-    });
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
@@ -984,28 +1067,656 @@ describe('AddTeamMember.vue', () => {
       },
     });
 
-    wrapper.setData({
-      addingUsers: true,
-      selectedIdp: BCEIDBUSINESS.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = BCEIDBUSINESS.code;
 
     await flushPromises();
 
-    wrapper.setData({
-      model: exampleUser,
-      selectedRoles: [FormRoleCodes.FORM_SUBMITTER],
-    });
+    wrapper.vm.model = exampleUser;
+    wrapper.vm.selectedRoles = [FormRoleCodes.FORM_SUBMITTER];
 
     expect(wrapper.vm.model).toEqual(exampleUser);
     expect(wrapper.vm.selectedRoles).toEqual([FormRoleCodes.FORM_SUBMITTER]);
 
-    wrapper.setData({
-      selectedIdp: IDIR.code,
-    });
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.selectedIdp = IDIR.code;
 
     await flushPromises();
 
     expect(wrapper.vm.model).toBeNull();
     expect(wrapper.vm.selectedRoles).toEqual([]);
   });
+
+  it('filterObject will return true if the query text exists', async () => {
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    let filteredObject = wrapper.vm.filterObject('', 'john', {
+      full_name: 'john doe',
+      email: 'email@email.com',
+    });
+
+    expect(filteredObject).toBeTruthy();
+
+    filteredObject = wrapper.vm.filterObject('', 'test', {
+      full_name: 'john doe',
+      email: 'email@email.com',
+    });
+
+    expect(filteredObject).toBeFalsy();
+  });
+
+  it('filterObject will return true if the query text exists inside a nested object', async () => {
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    let filteredObject = wrapper.vm.filterObject('', 'john', {
+      name: {
+        first: 'john',
+        last: 'doe',
+      },
+      email: 'email@email.com',
+    });
+
+    expect(filteredObject).toBeTruthy();
+
+    filteredObject = wrapper.vm.filterObject('', 'test', {
+      name: {
+        first: 'john',
+        last: 'doe',
+      },
+      email: 'email@email.com',
+    });
+
+    expect(filteredObject).toBeFalsy();
+  });
+
+  it('save will fail if there are no selected roles', async () => {
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedRoles = [];
+
+    wrapper.vm.save();
+
+    expect(wrapper.vm.showError).toBeTruthy();
+  });
+
+  it('save will emit the new users to add', async () => {
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.addingUsers = true;
+    wrapper.vm.model = 'john';
+    wrapper.vm.selectedRoles = ['owner'];
+
+    expect(wrapper.vm.addingUsers).toBeTruthy();
+    wrapper.vm.save();
+    expect(wrapper.emitted()).toHaveProperty('new-users');
+    expect(wrapper.emitted()).toEqual({
+      'new-users': [[['john'], ['owner']]],
+    });
+    expect(wrapper.vm.model).toEqual(null);
+    expect(wrapper.vm.addingUsers).toBeFalsy();
+  });
+
+  it('search users will simply return if the input is the same as the model', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.model = 'johndoe';
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
+    await wrapper.vm.searchUsers('johndoe');
+    expect(wrapper.vm.entries).toEqual([]);
+  });
+
+  it('search users will set the search parameters if there is no teamMembershipConfig', async () => {
+    const getUsersSpy = vi.spyOn(userService, 'getUsers');
+
+    getUsersSpy.mockImplementation((params) => {
+      return {
+        data: [params],
+      };
+    });
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedIdp = IDIR.code;
+    await wrapper.vm.searchUsers('johndoe');
+    expect(wrapper.vm.entries[0].search).toEqual('johndoe');
+  });
+
+  it('search users should throw error if the idp config text min length is too short', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
+    await wrapper.vm.searchUsers('john');
+    // eslint-disable-next-line no-console
+    expect(console.error).toHaveBeenLastCalledWith(
+      'trans.manageSubmissionUsers.getUsersErrMsg'
+    );
+  });
+
+  it('search users should throw error there is an @ and it is a bad email but success otherwise', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const getUsersSpy = vi.spyOn(userService, 'getUsers');
+
+    getUsersSpy.mockImplementation((params) => {
+      return {
+        data: [params],
+      };
+    });
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
+    await wrapper.vm.searchUsers('email@email');
+    // eslint-disable-next-line no-console
+    expect(console.error).toHaveBeenLastCalledWith(
+      'trans.manageSubmissionUsers.getUsersErrMsg'
+    );
+    await wrapper.vm.searchUsers('email@email.com');
+    expect(wrapper.vm.entries[0].email).toEqual('email@email.com');
+  });
+
+  it('search users should return the search value if it is valid', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const getUsersSpy = vi.spyOn(userService, 'getUsers');
+
+    getUsersSpy.mockImplementation((params) => {
+      return {
+        data: [params],
+      };
+    });
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
+    await wrapper.vm.searchUsers('johndoe');
+    expect(wrapper.vm.entries[0].username).toEqual('johndoe');
+  });
+
+  it('search users should return nothing if there is no input', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const getUsersSpy = vi.spyOn(userService, 'getUsers');
+
+    getUsersSpy.mockImplementation((params) => {
+      return {
+        data: [params],
+      };
+    });
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedIdp = BCEIDBASIC.code;
+    await wrapper.vm.searchUsers('');
+    expect(wrapper.vm.entries).toEqual([]);
+  });
+
+  it('clears timeout when unmounted', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const getUsersSpy = vi.spyOn(userService, 'getUsers');
+
+    getUsersSpy.mockImplementation((params) => {
+      return {
+        data: [params],
+      };
+    });
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.unmount();
+
+    expect(wrapper.vm.debounceTimer).toBeNull();
+  });
+
+  it('clears timeout if debounce timer is already set', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    const getUsersSpy = vi.spyOn(userService, 'getUsers');
+
+    getUsersSpy.mockImplementation((params) => {
+      return {
+        data: [params],
+      };
+    });
+    const pinia = createTestingPinia({ stubActions: false });
+
+    setActivePinia(pinia);
+    const idpStore = useIdpStore(pinia);
+
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+
+    const wrapper = mount(AddTeamMember, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [pinia],
+        stubs: {
+          VTooltip: {
+            name: 'VTooltip',
+            template: '<div class="v-tooltip-stub"><slot /></div>',
+          },
+          VBtn: {
+            name: 'VBtn',
+            template: '<div class="v-btn-stub"><slot /></div>',
+          },
+          VIcon: {
+            name: 'VIcon',
+            template: '<div class="v-icon-stub"><slot /></div>',
+          },
+          VChipGroup: {
+            name: 'VChipGroup',
+            template: '<div class="v-chip-group-stub"><slot /></div>',
+          },
+          VChip: {
+            name: 'VChip',
+            template: '<div class="v-chip-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.selectedIdp = IDIR.code;
+
+    expect(wrapper.vm.debounceTimer).toBeNull();
+    wrapper.vm.debounceSearch('this is some user');
+    expect(wrapper.vm.debounceTimer).not.toBeNull();
+    wrapper.vm.debounceTime = 1;
+    wrapper.vm.debounceSearch('this is another user');
+    expect(wrapper.vm.debounceTimer).not.toBeNull();
+
+    vi.runAllTimersAsync();
+
+    await flushPromises();
+    expect(getUsersSpy).toBeCalledTimes(1);
+  });
 });
diff --git a/app/frontend/tests/unit/components/forms/manage/ApiKey.spec.js b/app/frontend/tests/unit/components/forms/manage/ApiKey.spec.js
new file mode 100644
index 000000000..e58d6a1ca
--- /dev/null
+++ b/app/frontend/tests/unit/components/forms/manage/ApiKey.spec.js
@@ -0,0 +1,196 @@
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount } from '@vue/test-utils';
+import moment from 'moment';
+import { setActivePinia } from 'pinia';
+import { describe, beforeEach, vi } from 'vitest';
+
+import ApiKey from '~/components/forms/manage/ApiKey.vue';
+import { useFormStore } from '~/store/form';
+import { FormPermissions } from '~/utils/constants';
+
+const STUBS = {
+  BaseCopyToClipboard: {
+    name: 'BaseCopyToClipboard',
+    template: '<div class="base-copy-to-clipboard-stub"><slot /></div>',
+  },
+  BaseDialog: true,
+};
+
+const API_KEY = {
+  createdAt: moment(),
+  createdBy: 'APIKEY_TEST',
+  filesApiAccess: false,
+  formId: '1',
+  id: 1,
+  secret: 'THIS_IS_AN_API_KEY',
+  updatedAt: moment(),
+  updatedBy: null,
+};
+
+describe('ApiKey.vue', () => {
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+  });
+
+  it('renders', () => {
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain('trans.apiKey.formOwnerKeyAcess');
+    expect(wrapper.text()).toContain('trans.apiKey.disclaimer');
+    expect(wrapper.text()).toContain('trans.apiKey.infoA');
+    expect(wrapper.text()).toContain('trans.apiKey.infoB');
+    expect(wrapper.text()).toContain('trans.apiKey.infoC');
+    expect(wrapper.text()).toContain('trans.apiKey.infoD');
+    expect(wrapper.text()).toContain('trans.apiKey.generate');
+    expect(wrapper.text()).toContain('trans.apiKey.apiKey');
+    expect(wrapper.text()).toContain('trans.apiKey.secret');
+    expect(wrapper.text()).toContain('trans.apiKey.filesAPIAccess');
+  });
+
+  it('can delete key with the right permissions and can not without the right permissions', () => {
+    formStore.apiKey = API_KEY;
+
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.permissions = [FormPermissions.FORM_API_DELETE];
+
+    expect(wrapper.vm.canDeleteKey).toBeTruthy();
+
+    formStore.permissions = [];
+
+    expect(wrapper.vm.canDeleteKey).toBeFalsy();
+  });
+
+  it('can generate key with the right permissions and can not without the right permissions', () => {
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.permissions = [FormPermissions.FORM_API_CREATE];
+
+    expect(wrapper.vm.canGenerateKey).toBeTruthy();
+
+    formStore.permissions = [];
+
+    expect(wrapper.vm.canGenerateKey).toBeFalsy();
+  });
+
+  it('can read secret with the right permissions and can not without the right permissions', () => {
+    formStore.apiKey = API_KEY;
+
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.permissions = [FormPermissions.FORM_API_READ];
+
+    expect(wrapper.vm.canReadSecret).toBeTruthy();
+
+    formStore.permissions = [];
+
+    expect(wrapper.vm.canReadSecret).toBeFalsy();
+  });
+
+  it('returns the computed api key secret if it exists', () => {
+    formStore.apiKey = API_KEY;
+
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.vm.secret).toEqual(API_KEY.secret);
+  });
+
+  it('returns the computed api key secret if it exists', async () => {
+    const readApiKeySpy = vi.spyOn(formStore, 'readApiKey');
+    readApiKeySpy.mockImplementationOnce(() => {});
+    formStore.apiKey = API_KEY;
+    formStore.permissions = [FormPermissions.FORM_API_CREATE];
+
+    mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(readApiKeySpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('createKey should call generateApiKey', async () => {
+    const generateApiKeySpy = vi.spyOn(formStore, 'generateApiKey');
+    generateApiKeySpy.mockImplementationOnce(async () => {
+      formStore.apiKey = API_KEY;
+    });
+
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await wrapper.vm.createKey();
+    expect(generateApiKeySpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('deleteKey should call deleteApiKey', async () => {
+    const deleteApiKeySpy = vi.spyOn(formStore, 'deleteApiKey');
+    deleteApiKeySpy.mockImplementationOnce(async () => {
+      formStore.apiKey = API_KEY;
+    });
+
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await wrapper.vm.deleteKey();
+    expect(deleteApiKeySpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('updateKey should call filesApiKeyAccess', async () => {
+    const updateKeySpy = vi.spyOn(formStore, 'filesApiKeyAccess');
+    updateKeySpy.mockImplementationOnce(async () => {
+      formStore.apiKey = API_KEY;
+    });
+
+    const wrapper = mount(ApiKey, {
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await wrapper.vm.updateKey();
+    expect(updateKeySpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js b/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js
index a77c1002f..e9514c10b 100644
--- a/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js
@@ -1,89 +1,583 @@
+// @vitest-environment happy-dom
+// happy-dom is required to access window.URL
+
 import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount } from '@vue/test-utils';
+import moment from 'moment';
 import { setActivePinia } from 'pinia';
-import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
-import { beforeEach, expect, vi } from 'vitest';
+import { afterEach, beforeEach, expect, vi } from 'vitest';
 
-import getRouter from '~/router';
+import * as documentTemplateComposables from '~/composables/documentTemplate';
 import DocumentTemplate from '~/components/forms/manage/DocumentTemplate.vue';
+import { formService } from '~/services';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
+import getRouter from '~/router';
+import { ref } from 'vue';
+
+const STUBS = {
+  VDataTableServer: {
+    template: '<div class="v-data-table-server"><slot /></div>',
+    props: ['items', 'options', 'serverItemsLength', 'loading', 'pagination'],
+  },
+  VFileInput: {
+    template: '<div class="v-file-input"><slot /></div>',
+    props: ['value'],
+    methods: {
+      reset() {
+        this.$emit('update:value', null);
+      },
+    },
+  },
+};
 
 describe('DocumentTemplate.vue', () => {
-    // const formId = '123-456';
-    let router, pinia, formStore, notificationStore;
-    
-    beforeEach(() => {
-        pinia = createTestingPinia();
-        setActivePinia(pinia);
-
-        router = createRouter({
-            history: createWebHistory(),
-            routes: getRouter().getRoutes(),
-        });
-
-        formStore = useFormStore(pinia);
-        notificationStore = useNotificationStore(pinia);
-
-        formStore.$reset();
-        notificationStore.$reset();
-    });
-    
-    it('calls fetchDocumentTemplates on mount', () => {
-        const fetchDocumentTemplatesSpy = vi.spyOn(DocumentTemplate.methods, 'fetchDocumentTemplates');
-        fetchDocumentTemplatesSpy.mockImplementation(() => {});
-        const wrapper = mount(DocumentTemplate, {
-            global: {
-                plugins: [router, pinia]
-            }
-        });
-    
-        expect(wrapper.text()).toContain('trans.documentTemplate.info');
-        expect(fetchDocumentTemplatesSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('validates file extension correctly', async () => {
-        const wrapper = mount(DocumentTemplate, {
-            global: {
-                plugins: [router, pinia]
-            }
-        });
-        const invalidFile = new File([''], 'test.pdf', { type: 'application/pdf' });
-        const validFile = new File([''], 'test.txt', { type: 'text/plain' });
-
-        await wrapper.vm.handleFileInput([invalidFile]);
-        expect(wrapper.vm.isValidFile).toBe(false);
-
-        await wrapper.vm.handleFileInput([validFile]);
-        expect(wrapper.vm.isValidFile).toBe(true);
-    });
-
-    it('handles file upload correctly', async () => {
-        const wrapper = mount(DocumentTemplate, {
-            global: {
-                plugins: [router, pinia]
-            }
-        });
-
-        // Mock FileReader
-        window.FileReader = function () {
-            this.readAsDataURL = vi.fn();
-            this.onload = null;
-            this.onerror = null;
-            };
-        
-        vi.spyOn(wrapper.vm, 'handleFileUpload').mockImplementation(() => {
-        wrapper.vm.uploadedFile = new Blob(['test'], { type: 'text/plain' });
-        const reader = new FileReader();
-        reader.onload = () => {
-            const base64Content = 'base64testcontent';
-            wrapper.vm.cdogsTemplate = base64Content;
-        };
-        reader.onload();
-        });
-
-        await wrapper.vm.handleFileUpload();
-        expect(wrapper.vm.cdogsTemplate).toContain('base64testcontent');
+  let router, pinia, formStore, notificationStore;
+  let createObjectURLSpy = vi.spyOn(window.URL, 'createObjectURL');
+
+  beforeEach(() => {
+    pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    router = createRouter({
+      history: createWebHistory(),
+      routes: getRouter().getRoutes(),
+    });
+
+    formStore = useFormStore(pinia);
+    notificationStore = useNotificationStore(pinia);
+
+    formStore.$reset();
+    notificationStore.$reset();
+
+    // Explicitly mock/spy on global functions
+    createObjectURLSpy.mockImplementation(() => '#');
+  });
+
+  afterEach(() => {
+    createObjectURLSpy.mockRestore();
+  });
+
+  it('calls fetchDocumentTemplates on mount', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [
+        {
+          actions: '',
+          createdAt: moment().format(),
+          filename: 'filename.txt',
+          templateId: '1',
+        },
+      ];
+    });
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('trans.documentTemplate.info');
+    expect(fetchDocumentTemplatesSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('fetchDocumentTemplates should disable preview for microsoft docs', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [
+        {
+          actions: '',
+          createdAt: moment().format(),
+          filename: 'filename.docx',
+          templateId: '1',
+        },
+      ];
+    });
+
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.enablePreview).toBeFalsy();
+  });
+
+  it('fetchDocumentTemplates throwing an error should add notification', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      throw new Error();
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(addNotificationSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('validates file extension correctly', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [
+        {
+          actions: '',
+          createdAt: moment().format(),
+          filename: 'filename.txt',
+          templateId: '1',
+        },
+      ];
+    });
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+    const invalidFile = new File([''], 'test.pdf', { type: 'application/pdf' });
+    const validFile = new File([''], 'test.txt', { type: 'text/plain' });
+
+    await wrapper.vm.handleFileInput([invalidFile]);
+    expect(wrapper.vm.isValidFile).toBe(false);
+
+    await wrapper.vm.handleFileInput([validFile]);
+    expect(wrapper.vm.isValidFile).toBe(true);
+
+    await wrapper.vm.handleFileInput();
+    expect(wrapper.vm.isFileInputEmpty).toBeTruthy();
+    expect(wrapper.vm.isValidFile).toBeTruthy();
+  });
+
+  it('handles file upload correctly', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [
+        {
+          actions: '',
+          createdAt: moment().format(),
+          filename: 'filename.txt',
+          templateId: '1',
+        },
+      ];
+    });
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    // Mock FileReader
+    window.FileReader = function () {
+      this.readAsDataURL = vi.fn();
+      this.onload = null;
+      this.onerror = null;
+    };
+
+    vi.spyOn(wrapper.vm, 'handleFileUpload').mockImplementation(() => {
+      wrapper.vm.uploadedFile = new Blob(['test'], { type: 'text/plain' });
+      const reader = new FileReader();
+      reader.onload = () => {
+        const base64Content = 'base64testcontent';
+        wrapper.vm.cdogsTemplate = base64Content;
+      };
+      reader.onload();
+    });
+
+    await wrapper.vm.handleFileUpload();
+    expect(wrapper.vm.cdogsTemplate).toContain('base64testcontent');
+  });
+
+  it('handles file upload correctly', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [
+        {
+          actions: '',
+          createdAt: moment().format(),
+          filename: 'filename.txt',
+          templateId: '1',
+        },
+      ];
+    });
+    const documentTemplateListSpy = vi.spyOn(
+      formService,
+      'documentTemplateList'
+    );
+    documentTemplateListSpy.mockImplementation(() => {
+      return [
+        {
+          filename: 'filename.txt',
+          createdAt: moment().format(),
+          id: '1',
+        },
+      ];
+    });
+    const readFileSpy = vi.spyOn(documentTemplateComposables, 'readFile');
+    readFileSpy.mockImplementationOnce(
+      async () => 'SGVsbG8ge2QuZmlyc3ROYW1lfS4='
+    );
+    const documentTemplateCreateSpy = vi.spyOn(
+      formService,
+      'documentTemplateCreate'
+    );
+    documentTemplateCreateSpy.mockImplementation(() => {
+      return {
+        data: {
+          active: true,
+          createdAt: moment().format(),
+          createdBy: 'DocumentTemplate.spec.js',
+          filename: 'filename.txt',
+          formId: '1',
+          id: '1',
+          template: {
+            type: 'Buffer',
+            data: [
+              83, 71, 86, 115, 98, 71, 56, 103, 101, 50, 81, 117, 90, 109, 108,
+              121, 99, 51, 82, 79, 89, 87, 49, 108, 102, 83, 52, 61,
+            ],
+          },
+          updatedAt: moment().format(),
+          updatedBy: null,
+        },
+      };
+    });
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    wrapper.vm.documentTemplates = ref([]);
+
+    await flushPromises();
+
+    const mockInputElement = document.createElement('input');
+    mockInputElement.type = 'file';
+    mockInputElement.reset = vi.fn();
+
+    wrapper.vm.fileInput = ref(mockInputElement);
+    wrapper.vm.uploadedFile = {
+      name: 'cdogs.txt',
+    };
+
+    await wrapper.vm.handleFileUpload();
+
+    await flushPromises();
+
+    expect(wrapper.vm.fileInput.value).toBeUndefined();
+  });
+
+  it('when handleFileUpload throws an error, it will show a notification', async () => {
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [
+        {
+          actions: '',
+          createdAt: moment().format(),
+          filename: 'filename.txt',
+          templateId: '1',
+        },
+      ];
+    });
+    const documentTemplateListSpy = vi.spyOn(
+      formService,
+      'documentTemplateList'
+    );
+    documentTemplateListSpy.mockImplementation(() => {
+      return [
+        {
+          filename: 'filename.txt',
+          createdAt: moment().format(),
+          id: '1',
+        },
+      ];
+    });
+    const readFileSpy = vi.spyOn(documentTemplateComposables, 'readFile');
+    readFileSpy.mockImplementationOnce(
+      async () => 'SGVsbG8ge2QuZmlyc3ROYW1lfS4='
+    );
+    const documentTemplateCreateSpy = vi.spyOn(
+      formService,
+      'documentTemplateCreate'
+    );
+    documentTemplateCreateSpy.mockImplementation(() => {
+      throw new Error('Error');
+    });
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    wrapper.vm.documentTemplates = ref([]);
+
+    await flushPromises();
+
+    wrapper.vm.uploadedFile = {
+      name: 'cdogs.txt',
+    };
+
+    await wrapper.vm.handleFileUpload();
+
+    await flushPromises();
+
+    expect(addNotificationSpy).toHaveBeenCalledTimes(1);
+    expect(addNotificationSpy).toHaveBeenCalledWith({
+      consoleError: 'trans.documentTemplate.uploadError',
+      text: 'trans.documentTemplate.uploadError',
+    });
+  });
+
+  it('handles delete successfully', async () => {
+    let mockDatabase = [
+      {
+        formId: '1',
+        templateId: '1',
+      },
+      {
+        formId: '1',
+        templateId: '2',
+      },
+    ];
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return Array.from(mockDatabase);
+    });
+    const documentTemplateDeleteSpy = vi.spyOn(
+      formService,
+      'documentTemplateDelete'
+    );
+    documentTemplateDeleteSpy.mockImplementation(async (formId, templateId) => {
+      mockDatabase = mockDatabase.filter(
+        (item) => !(item.formId === formId && item.templateId === templateId)
+      );
+    });
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.form = { id: '1' };
+    // if there are doc templates
+    wrapper.vm.documentTemplates = ref(Array.from(mockDatabase));
+
+    await wrapper.vm.handleDelete({ templateId: '1' });
+    await flushPromises();
+    expect(
+      mockDatabase.find((item) => item.templateId === '1')
+    ).toBeUndefined();
+  });
+
+  it('delete should show a notification if an error occurs', async () => {
+    let mockDatabase = [
+      {
+        formId: '1',
+        templateId: '1',
+      },
+      {
+        formId: '1',
+        templateId: '2',
+      },
+    ];
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(() => {
+      return Array.from(mockDatabase);
+    });
+    const documentTemplateDeleteSpy = vi.spyOn(
+      formService,
+      'documentTemplateDelete'
+    );
+    documentTemplateDeleteSpy.mockImplementationOnce(async () => {
+      throw new Error('error should be thrown here');
+    });
+
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    formStore.form = { id: '1' };
+    // if there are doc templates
+    wrapper.vm.documentTemplates = ref(Array.from(mockDatabase));
+
+    // Execute handleDelete and expect it to complete without errors
+    await wrapper.vm.handleDelete({ templateId: '1' });
+
+    // Flush promises to ensure asynchronous operations are completed
+    await flushPromises();
+
+    // Ensure that addNotificationSpy was called with the correct parameters
+    expect(addNotificationSpy).toHaveBeenCalledTimes(2);
+    // For some reason even though documentTemplateDelete throws an error, it will continue on
+    // and fetchTemplates and addNotification, so addNotification gets called when it succeeds AND
+    // when it catches
+  });
+
+  it('successfully calls handleFileAction with preview', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+    const getDocumentTemplateSpy = vi.spyOn(
+      documentTemplateComposables,
+      'getDocumentTemplate'
+    );
+    getDocumentTemplateSpy.mockImplementationOnce(async () => {
+      return '#';
+    });
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    const windowOpenSpy = vi.spyOn(window, 'open');
+    windowOpenSpy.mockImplementation(() => {});
+    const appendChildSpy = vi.spyOn(document.body, 'appendChild');
+
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.handleFileAction(
+      { templateId: '1', filename: 'filename.txt' },
+      'preview'
+    );
+
+    await flushPromises();
+
+    expect(windowOpenSpy).toHaveBeenCalledTimes(1);
+    expect(appendChildSpy).toHaveBeenCalledTimes(0);
+    expect(addNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('successfully calls handleFileAction with download', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+    const getDocumentTemplateSpy = vi.spyOn(
+      documentTemplateComposables,
+      'getDocumentTemplate'
+    );
+    getDocumentTemplateSpy.mockImplementationOnce(async () => {
+      return '#';
     });
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    const windowOpenSpy = vi.spyOn(window, 'open');
+    windowOpenSpy.mockImplementation(() => {});
+    const appendChildSpy = vi.spyOn(document.body, 'appendChild');
+
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.handleFileAction(
+      { templateId: '1', filename: 'filename.txt' },
+      'download'
+    );
+
+    await flushPromises();
+
+    expect(windowOpenSpy).toHaveBeenCalledTimes(0);
+    expect(appendChildSpy).toHaveBeenCalledTimes(1);
+    expect(addNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('if handleFileAction throws an error, it should show a notification', async () => {
+    const fetchDocumentTemplatesSpy = vi.spyOn(
+      documentTemplateComposables,
+      'fetchDocumentTemplates'
+    );
+    fetchDocumentTemplatesSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+    const getDocumentTemplateSpy = vi.spyOn(
+      documentTemplateComposables,
+      'getDocumentTemplate'
+    );
+    getDocumentTemplateSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    const wrapper = mount(DocumentTemplate, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.handleFileAction(
+      { templateId: '1', filename: 'filename.txt' },
+      'preview'
+    );
 
+    expect(addNotificationSpy).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/app/frontend/tests/unit/components/forms/manage/EmailTemplate.spec.js b/app/frontend/tests/unit/components/forms/manage/EmailTemplate.spec.js
new file mode 100644
index 000000000..a2df1ab67
--- /dev/null
+++ b/app/frontend/tests/unit/components/forms/manage/EmailTemplate.spec.js
@@ -0,0 +1,102 @@
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
+import { beforeEach, vi } from 'vitest';
+import { ref } from 'vue';
+
+import EmailTemplate from '~/components/forms/manage/EmailTemplate.vue';
+import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
+
+const STUBS = {};
+
+describe('EmailTemplate.vue', () => {
+  let pinia = createTestingPinia();
+  setActivePinia(pinia);
+
+  const formStore = useFormStore(pinia);
+  const notificationStore = useNotificationStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+
+    formStore.emailTemplates = ref([
+      {
+        body: 'Thank you for your {{ form.name }} submission. You can view your submission details by visiting the following links:',
+        formId: '8e436682-35be-4a93-82bc-08408d8fa606',
+        subject: '{{ form.name }} Accepted',
+        title: '{{ form.name }} Accepted',
+        type: 'submissionConfirmation',
+      },
+    ]);
+  });
+
+  it('renders', () => {
+    const wrapper = mount(EmailTemplate, {
+      props: {
+        title: 'Test title',
+        type: 'submissionConfirmation',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test title');
+    expect(wrapper.text()).toContain('trans.emailTemplate.subject');
+    expect(wrapper.text()).toContain('trans.emailTemplate.title');
+    expect(wrapper.text()).toContain('trans.emailTemplate.body');
+    expect(wrapper.text()).toContain('trans.emailTemplate.save');
+  });
+
+  it('saveEmailTemplate succeeds', async () => {
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const updateEmailTemplateSpy = vi.spyOn(formStore, 'updateEmailTemplate');
+    updateEmailTemplateSpy.mockImplementation(async () => {
+      return {};
+    });
+    const wrapper = mount(EmailTemplate, {
+      props: {
+        title: 'Test title',
+        type: 'submissionConfirmation',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await wrapper.vm.saveEmailTemplate();
+
+    await flushPromises();
+
+    expect(updateEmailTemplateSpy).toHaveBeenCalledTimes(1);
+    expect(addNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('saveEmailTemplate shows a notification on failure', async () => {
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const updateEmailTemplateSpy = vi.spyOn(formStore, 'updateEmailTemplate');
+    updateEmailTemplateSpy.mockImplementation(async () => {
+      throw new Error();
+    });
+    const wrapper = mount(EmailTemplate, {
+      props: {
+        title: 'Test title',
+        type: 'submissionConfirmation',
+      },
+      global: {
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await wrapper.vm.saveEmailTemplate();
+
+    await flushPromises();
+
+    expect(updateEmailTemplateSpy).toHaveBeenCalledTimes(1);
+    expect(addNotificationSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/frontend/tests/unit/components/forms/manage/ManageForm.spec.js b/app/frontend/tests/unit/components/forms/manage/ManageForm.spec.js
index 30491db7c..ec93f2a50 100644
--- a/app/frontend/tests/unit/components/forms/manage/ManageForm.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/ManageForm.spec.js
@@ -1,68 +1,384 @@
-import ManageForm from "~/components/forms/manage/ManageForm.vue";
-import { useFormStore } from "~/store/form";
-import { mount } from "@vue/test-utils";
-import { createTestingPinia } from "@pinia/testing";
-import { setActivePinia } from "pinia";
-import { createRouter, createWebHistory } from "vue-router";
-import { beforeEach, expect, vi } from "vitest";
-import getRouter from "~/router";
+import { flushPromises, mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, expect, vi } from 'vitest';
+import { ref } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
+
+import ManageForm from '~/components/forms/manage/ManageForm.vue';
+import getRouter from '~/router';
+import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
 import { FormPermissions } from '~/utils/constants';
 
-describe("ManageForm.vue", () => {
-
-    const pinia = createTestingPinia();
-    const router = createRouter({
-        history: createWebHistory(),
-        routes: getRouter().getRoutes(),
-    });
-    
-    setActivePinia(pinia);
-    const formStore = useFormStore(pinia);
-    
-    beforeEach(() => {
-        formStore.$reset();
-    });
-    
-    it("does not call readFormSubscriptionData without permission", () => {
-        const readFormSpy = vi.spyOn(formStore, "readFormSubscriptionData");
-        formStore.permissions = [];
-        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',
-            },
-        },
-        });
-        expect(readFormSpy).not.toHaveBeenCalled();
-     });
-
-     it("calls readFormSubscriptionData with correct permissions", () => {
-        const readFormSpy = vi.spyOn(formStore, "readFormSubscriptionData");
-        formStore.permissions = [FormPermissions.FORM_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',
-            },
-        },
-        });
-        expect(readFormSpy).toBeCalledTimes(1);
-     });
-    
-});
\ No newline at end of file
+const STUBS = {
+  VDataTable: {
+    template: '<div class="v-data-table-stub"><slot /></div>',
+  },
+  FormSettings: {
+    template: '<v-text-field class="form-settings" />',
+  },
+  ApiKey: {
+    template: '<div class="api-key-stub"><slot /></div>',
+  },
+  ManageVersions: {
+    template: '<div class="manage-versions-stub"><slot /></div>',
+  },
+  Subscription: {
+    template: '<div class="subscription-stub"><slot /></div>',
+  },
+  FormProfile: {
+    template: '<v-text-field class="form-profile-stub" />',
+  },
+};
+
+describe('ManageForm.vue', () => {
+  const pinia = createTestingPinia();
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: getRouter().getRoutes(),
+  });
+
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+  const notificationStore = useNotificationStore(pinia);
+  const readFormSpy = vi.spyOn(formStore, 'readFormSubscriptionData');
+  const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+  beforeEach(() => {
+    formStore.$reset();
+    notificationStore.$reset();
+    readFormSpy.mockReset();
+    addNotificationSpy.mockReset();
+    readFormSpy.mockImplementationOnce(async () => {});
+  });
+
+  it('does not call readFormSubscriptionData without permission', () => {
+    formStore.permissions = [];
+    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,
+      },
+    });
+    expect(readFormSpy).not.toHaveBeenCalled();
+  });
+
+  it('calls readFormSubscriptionData with correct permissions', async () => {
+    formStore.permissions = [FormPermissions.FORM_UPDATE];
+    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(readFormSpy).toBeCalledTimes(1);
+  });
+
+  it('currentVersion returns N/A if the form has no versions', async () => {
+    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',
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.currentVersion).toEqual('N/A');
+  });
+
+  it('currentVersion returns the current published version', async () => {
+    formStore.form = ref({
+      versions: [
+        {
+          version: 1,
+          published: false,
+        },
+        {
+          version: 2,
+          published: true,
+        },
+      ],
+    });
+    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.vm.currentVersion).toEqual(2);
+  });
+
+  it('isSubscribed will return true if subscribe is enabled', async () => {
+    formStore.form = ref({
+      subscribe: {
+        enabled: true,
+      },
+    });
+    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.vm.isSubscribed).toBeTruthy();
+  });
+
+  it('isSubscribed will return false if subscribe is not enabled', async () => {
+    formStore.form = ref({
+      subscribe: {
+        enabled: false,
+      },
+    });
+    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.vm.isSubscribed).toBeFalsy();
+  });
+
+  it('cancelSettingsEdit should call fetchForm and disable form settings', async () => {
+    const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    fetchFormSpy.mockImplementationOnce(() => {});
+    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,
+      },
+    });
+
+    wrapper.vm.formSettingsDisabled = false;
+
+    await flushPromises();
+
+    expect(wrapper.vm.formSettingsDisabled).toBeFalsy();
+
+    await wrapper.vm.cancelSettingsEdit();
+    await flushPromises();
+    expect(wrapper.vm.formSettingsDisabled).toBeTruthy();
+    expect(fetchFormSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('enableSettingsEdit should set settings panel to 0 and enable form settings', async () => {
+    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.vm.formSettingsDisabled).toBeTruthy();
+
+    wrapper.vm.enableSettingsEdit();
+    await flushPromises();
+    expect(wrapper.vm.formSettingsDisabled).toBeFalsy();
+  });
+
+  it('onSubscription should set the value of the subscriptions panel', async () => {
+    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.vm.subscriptionsPanel).toEqual(0);
+
+    wrapper.vm.onSubscription(1);
+    await flushPromises();
+    expect(wrapper.vm.subscriptionsPanel).toEqual(1);
+  });
+
+  it('update settings should add a notification and fetch form if it succeeds', async () => {
+    formStore.form = ref({
+      id: '1',
+    });
+    const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    fetchFormSpy.mockImplementationOnce(() => {});
+    const updateFormSpy = vi.spyOn(formStore, 'updateForm');
+    updateFormSpy.mockImplementationOnce(() => {});
+    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,
+      },
+      attachToDocument: true,
+    });
+
+    wrapper.vm.settingsPanel = ref(0);
+    wrapper.vm.settingsFormValid = ref(true);
+    wrapper.vm.formSettingsDisabled = ref(false);
+
+    await flushPromises();
+
+    wrapper.vm.enableSettingsEdit();
+
+    await flushPromises();
+
+    await wrapper.vm.updateSettings();
+
+    expect(addNotificationSpy).toHaveBeenCalledTimes(1);
+    expect(fetchFormSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('update settings should add a notification and not fetch form if it fails', async () => {
+    formStore.form = ref({
+      id: '1',
+    });
+    const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    fetchFormSpy.mockImplementationOnce(() => {});
+    const updateFormSpy = vi.spyOn(formStore, 'updateForm');
+    updateFormSpy.mockImplementationOnce(() => {
+      throw new Error();
+    });
+    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,
+      },
+      attachToDocument: true,
+    });
+
+    wrapper.vm.settingsPanel = ref(0);
+    wrapper.vm.settingsFormValid = ref(true);
+    wrapper.vm.formSettingsDisabled = ref(false);
+
+    await flushPromises();
+
+    wrapper.vm.enableSettingsEdit();
+
+    await flushPromises();
+
+    await wrapper.vm.updateSettings();
+
+    expect(addNotificationSpy).toHaveBeenCalledTimes(1);
+    expect(fetchFormSpy).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/app/frontend/tests/unit/components/forms/manage/ManageFormActions.spec.js b/app/frontend/tests/unit/components/forms/manage/ManageFormActions.spec.js
new file mode 100644
index 000000000..7b7257561
--- /dev/null
+++ b/app/frontend/tests/unit/components/forms/manage/ManageFormActions.spec.js
@@ -0,0 +1,300 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, expect, vi } from 'vitest';
+import { useRouter } from 'vue-router';
+
+import ManageFormActions from '~/components/forms/manage/ManageFormActions.vue';
+import { useFormStore } from '~/store/form';
+import { FormPermissions } from '~/utils/constants';
+import { ref } from 'vue';
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    push: () => {},
+  })),
+}));
+
+const STUBS = {
+  ShareForm: {
+    template:
+      '<div class="share-form-stub" lang="trans.shareForm.shareForm"><slot /></div>',
+  },
+  RouterLink: {
+    template: '<div class="router-link-stub"><slot /></div>',
+  },
+};
+
+describe('ManageForm.vue', () => {
+  const pinia = createTestingPinia();
+
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+  });
+
+  it('renders', async () => {
+    formStore.permissions = [
+      FormPermissions.FORM_DELETE,
+      FormPermissions.EMAIL_TEMPLATE_UPDATE,
+      FormPermissions.TEAM_UPDATE,
+      FormPermissions.SUBMISSION_READ,
+      FormPermissions.SUBMISSION_UPDATE,
+    ];
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.html()).toContain('trans.shareForm.shareForm');
+    expect(wrapper.html()).toContain('trans.manageFormActions.viewSubmissions');
+    expect(wrapper.html()).toContain('trans.manageFormActions.teamManagement');
+    expect(wrapper.html()).toContain('trans.manageFormActions.emailManagement');
+    expect(wrapper.html()).toContain('trans.manageFormActions.deleteForm');
+  });
+
+  it('canDeleteForm returns true if permissions include FORM_DELETE false otherwise', async () => {
+    formStore.permissions = [FormPermissions.FORM_DELETE];
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.canDeleteForm).toBeTruthy();
+
+    formStore.permissions = [];
+
+    await flushPromises();
+
+    expect(wrapper.vm.canDeleteForm).toBeFalsy();
+  });
+
+  it('canManageEmail returns true if permissions include EMAIL_TEMPLATE_UPDATE false otherwise', async () => {
+    formStore.permissions = [FormPermissions.EMAIL_TEMPLATE_UPDATE];
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.canManageEmail).toBeTruthy();
+
+    formStore.permissions = [];
+
+    await flushPromises();
+
+    expect(wrapper.vm.canManageEmail).toBeFalsy();
+  });
+
+  it('canManageTeam returns true if permissions include TEAM_UPDATE false otherwise', async () => {
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.canManageTeam).toBeTruthy();
+
+    formStore.permissions = [];
+
+    await flushPromises();
+
+    expect(wrapper.vm.canManageTeam).toBeFalsy();
+  });
+
+  it('canViewSubmissions returns true if permissions include SUBMISSION_READ or SUBMISSION_UPDATE false otherwise', async () => {
+    formStore.permissions = [FormPermissions.SUBMISSION_READ];
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.canViewSubmissions).toBeTruthy();
+
+    formStore.permissions = [FormPermissions.SUBMISSION_UPDATE];
+
+    await flushPromises();
+
+    expect(wrapper.vm.canViewSubmissions).toBeTruthy();
+
+    formStore.permissions = [
+      FormPermissions.SUBMISSION_READ,
+      FormPermissions.SUBMISSION_UPDATE,
+    ];
+
+    await flushPromises();
+
+    expect(wrapper.vm.canViewSubmissions).toBeTruthy();
+
+    formStore.permissions = [];
+
+    await flushPromises();
+
+    expect(wrapper.vm.canViewSubmissions).toBeFalsy();
+  });
+
+  it('isPublished returns true if there is a form version that is published', async () => {
+    formStore.form = ref({
+      versions: [
+        {
+          version: 1,
+          published: false,
+        },
+        {
+          version: 2,
+          published: true,
+        },
+      ],
+    });
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.isPublished).toBeTruthy();
+  });
+
+  it('isPublished returns false if there is no form version that is published', async () => {
+    formStore.form = ref({});
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.isPublished).toBeFalsy();
+  });
+
+  it('deleteForm should hide the delete dialog, delete the current form, and push to a different page', async () => {
+    const deleteCurrentFormSpy = vi.spyOn(formStore, 'deleteCurrentForm');
+    deleteCurrentFormSpy.mockImplementationOnce(async () => {});
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const wrapper = mount(ManageFormActions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDate: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.deleteForm();
+
+    await flushPromises();
+
+    expect(wrapper.vm.showDeleteDialog).toBeFalsy();
+    expect(deleteCurrentFormSpy).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/frontend/tests/unit/components/forms/manage/ManageLayout.spec.js b/app/frontend/tests/unit/components/forms/manage/ManageLayout.spec.js
index 027d8f0a0..ffa573558 100644
--- a/app/frontend/tests/unit/components/forms/manage/ManageLayout.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/ManageLayout.spec.js
@@ -7,6 +7,8 @@ import { beforeEach, expect, vi } from 'vitest';
 import getRouter from '~/router';
 import ManageLayout from '~/components/forms/manage/ManageLayout.vue';
 import { useFormStore } from '~/store/form';
+import { FormPermissions } from '~/utils/constants';
+import { ref } from 'vue';
 
 describe('ManageLayout.vue', () => {
   const pinia = createTestingPinia();
@@ -39,9 +41,11 @@ describe('ManageLayout.vue', () => {
     expect(wrapper.text()).toMatch('trans.manageLayout.manageForm');
   });
 
-  it('calls the store actions', () => {
+  it('calls the store actions', async () => {
     const formId = '123-456';
     const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    const fetchDraftsSpy = vi.spyOn(formStore, 'fetchDrafts');
+    fetchDraftsSpy.mockImplementationOnce(() => {});
     const getFormPermissionsForUserSpy = vi.spyOn(
       formStore,
       'getFormPermissionsForUser'
@@ -59,8 +63,11 @@ describe('ManageLayout.vue', () => {
       },
     });
 
+    await flushPromises();
+
     expect(fetchFormSpy).toHaveBeenCalledTimes(1);
     expect(getFormPermissionsForUserSpy).toHaveBeenCalledTimes(1);
+    expect(fetchDraftsSpy).toHaveBeenCalledTimes(0);
   });
 
   it('shows the form name', async () => {
@@ -87,4 +94,34 @@ describe('ManageLayout.vue', () => {
 
     expect(wrapper.html()).toContain('myForm');
   });
+
+  it('calls the store actions also calls fetchDrafts if they have permissions to read the form design', async () => {
+    const formId = '123-456';
+    const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    const fetchDraftsSpy = vi.spyOn(formStore, 'fetchDrafts');
+    fetchDraftsSpy.mockImplementationOnce(() => {});
+    formStore.permissions = ref([FormPermissions.DESIGN_READ]);
+    mount(ManageLayout, {
+      props: {
+        f: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ManageFormActions: true,
+          ManageForm: true,
+        },
+      },
+    });
+
+    await flushPromises();
+
+    expect(fetchFormSpy).toHaveBeenCalledTimes(1);
+    expect(getFormPermissionsForUserSpy).toHaveBeenCalledTimes(1);
+    expect(fetchDraftsSpy).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js b/app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js
index ef8617522..eef6a06cd 100644
--- a/app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/ManageVersions.spec.js
@@ -1,99 +1,785 @@
+// @vitest-environment happy-dom
+// happy-dom is required to access window.URL
+
+import { flushPromises, mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, expect, vi } from 'vitest';
+import { nextTick, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import * as formComposables from '~/composables/form';
 import ManageVersions from '~/components/forms/manage/ManageVersions.vue';
-import { useFormStore } from "~/store/form";
-import { mount } from "@vue/test-utils";
-import { createTestingPinia } from "@pinia/testing";
-import { setActivePinia } from "pinia";
-import { createRouter, createWebHistory } from "vue-router";
-import { beforeEach, expect, vi } from "vitest";
-import getRouter from "~/router";
-
-describe("ManageVersions.vue", () => {
+import { formService } from '~/services';
+import { useFormStore } from '~/store/form';
+import { useNotificationStore } from '~/store/notification';
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    push: () => {},
+  })),
+}));
+
+const STUBS = {
+  RouterLink: {
+    template: '<div class="router-link-stub"><slot /></div>',
+  },
+};
+
+describe('ManageVersions.vue', () => {
   const pinia = createTestingPinia();
-  const router = createRouter({
-      history: createWebHistory(),
-      routes: getRouter().getRoutes(),
-  });
-  
+
   setActivePinia(pinia);
   const formStore = useFormStore(pinia);
-  
+  const notificationStore = useNotificationStore(pinia);
+
   beforeEach(() => {
-      formStore.$reset();
+    formStore.$reset();
+    notificationStore.$reset();
   });
 
-  it("publishes a draft when the status is toggled and continue is clicked", () => {
-    // spy on updatePublish method
-    const publishSpy = vi.spyOn(ManageVersions.methods, "updatePublish");
-    // mock a draft
-    formStore.drafts = [
+  it('renders', async () => {
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('trans.manageVersions.important');
+    expect(wrapper.text()).toContain('trans.manageVersions.infoA');
+    expect(wrapper.text()).toContain('trans.manageVersions.infoB');
+    expect(wrapper.text()).toContain('trans.manageVersions.version');
+    expect(wrapper.text()).toContain('trans.manageVersions.status');
+    expect(wrapper.text()).toContain('trans.manageVersions.dateCreated');
+    expect(wrapper.text()).toContain('trans.manageVersions.createdBy');
+    expect(wrapper.text()).toContain('trans.manageVersions.actions');
+  });
+
+  it('versionList will reformat the draft object and join with versions array', async () => {
+    const VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+    };
+    const DRAFT_ONE = {
+      id: '2',
+      isDraft: true,
+      published: false,
+      version: 5,
+    };
+    formStore.form = ref({
+      versions: [VERSION_ONE],
+    });
+    formStore.drafts = ref([DRAFT_ONE]);
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    let versionList = wrapper.vm.versionList;
+
+    expect(
+      versionList.find(
+        (version) =>
+          version.id === '1' &&
+          version.published === true &&
+          version.version === 1
+      )
+    ).toEqual(VERSION_ONE);
+
+    expect(
+      versionList.find(
+        (version) =>
+          version.id === '2' &&
+          version.isDraft === true &&
+          version.published === false &&
+          version.version === 2
+      )
+    ).toEqual({
+      id: '2',
+      isDraft: true,
+      published: false,
+      version: 2,
+    });
+
+    // If there are no drafts then it should just return the versions
+    formStore.drafts = [];
+    versionList = wrapper.vm.versionList;
+    expect(versionList).toEqual([VERSION_ONE]);
+
+    // If there are no drafts then it should just return the versions and no form then it returns an empty array
+    formStore.form = null;
+    formStore.drafts = [];
+    versionList = wrapper.vm.versionList;
+    expect(versionList).toEqual([]);
+  });
+
+  it('onMounted toggles publish if we have access to the form designer', async () => {
+    const VERSION_ONE = {
+      version: 1,
+      published: false,
+      id: '1',
+    };
+    formStore.form = ref({
+      versions: [VERSION_ONE],
+    });
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: true,
+          draftId: '1',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+    expect(wrapper.vm.showPublishDialog).toBeTruthy();
+  });
+
+  it('deleteCurrentDraft should hide the delete dialog and call delete draft and then fetchDrafts', async () => {
+    const VERSION_ONE = {
+      version: 1,
+      published: false,
+      id: '1',
+    };
+    formStore.form = ref({
+      id: '1',
+      versions: [VERSION_ONE],
+    });
+    formStore.drafts = ref([{ id: '1' }]);
+    const deleteDraftSpy = vi.spyOn(formStore, 'deleteDraft');
+    deleteDraftSpy.mockImplementationOnce(async () => {});
+    const fetchDraftsSpy = vi.spyOn(formStore, 'fetchDrafts');
+    fetchDraftsSpy.mockImplementationOnce(async () => {});
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.deleteCurrentDraft();
+
+    expect(wrapper.vm.showDeleteDraftDialog).toBeFalsy();
+    expect(deleteDraftSpy).toHaveBeenCalledTimes(1);
+    expect(fetchDraftsSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('createVersion will show the drafts dialog if there is a draft', async () => {
+    const VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+    };
+    const DRAFT_ONE = {
+      id: '2',
+      isDraft: true,
+      published: false,
+      version: 5,
+    };
+    formStore.form = ref({
+      versions: [VERSION_ONE],
+    });
+    formStore.drafts = ref([DRAFT_ONE]);
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.showHasDraftsDialog).toBeFalsy();
+
+    wrapper.vm.createVersion('1', '1');
+
+    expect(wrapper.vm.showHasDraftsDialog).toBeTruthy();
+  });
+
+  it('createVersion will push to the form designer if it does not have a draft', async () => {
+    const push = vi.fn();
+    useRouter.mockImplementationOnce(() => ({
+      push,
+    }));
+    const VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+    };
+    formStore.form = ref({
+      versions: [VERSION_ONE],
+    });
+    formStore.drafts = null;
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '1',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.createVersion('1', '1');
+
+    await flushPromises();
+
+    expect(push).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancel publish should stop showing the publish dialog and rerender the table and toggle the published value for a draft', async () => {
+    let VERSION_ONE = {
+      version: 1,
+      published: false,
+      id: '1',
+    };
+    let DRAFT_ONE = {
+      id: '2',
+      isDraft: true,
+      published: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+    };
+    formStore.drafts = [DRAFT_ONE];
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '1',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    // mock that we're publishing
+    wrapper.vm.publishOpts = {
+      id: '2',
+    };
+    wrapper.vm.showPublishDialog = true;
+
+    await nextTick();
+
+    // versionList sets the publishing to false by default so we need to set it again after it finishes rendering
+    formStore.form = {
+      versions: [VERSION_ONE],
+    };
+    formStore.drafts = [DRAFT_ONE];
+
+    expect(wrapper.vm.showPublishDialog).toBeTruthy();
+    expect(formStore.drafts).toEqual([DRAFT_ONE]);
+    expect(wrapper.vm.rerenderTable).toEqual(0);
+
+    wrapper.vm.cancelPublish();
+
+    expect(wrapper.vm.showPublishDialog).toBeFalsy();
+    expect(formStore.drafts).toEqual([
       {
-        id: '123-456',
-        version: '1',
+        id: '2',
+        isDraft: true,
         published: false,
+        version: 2,
       },
-    ];
+    ]);
+    expect(wrapper.vm.rerenderTable).toEqual(1);
+  });
+
+  it('cancel publish should stop showing the publish dialog and rerender the table and toggle the published value for a existing form version', async () => {
+    let VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+    };
     const wrapper = mount(ManageVersions, {
       global: {
-          plugins: [router, pinia],
-          mocks: {
-              $filters: {
-                formatDateLong: vi.fn().mockReturnValue("formatted date")
-              }
-            },
-          provide: {
-              formDesigner: false,
-              draftId: '123-456',
-              formId: '123-456',
-          },
-      },
-      });
-      // Call the togglePublish method (simulates user clicking the status toggle)
-      wrapper.vm.togglePublish(true, '123-456', '1', true);
-      // Find the BaseDialog with v-model="showPublishDialog"
-      const baseDialog = wrapper.findAllComponents({ name: 'BaseDialog' })
-      .find(w => w.props('type') === 'CONTINUE');
-      // Emit the continue-dialog event (simulate clicking continue in the dialog)
-      baseDialog.vm.$emit('continue-dialog');
-
-      expect(publishSpy).toHaveBeenCalled();
-  });
-
-  it("does not publish a draft when the status is toggled and cancel is clicked", () => {
-    // spy on updatePublish method
-    const publishSpy = vi.spyOn(ManageVersions.methods, "updatePublish");
-    // mock a draft
-    formStore.drafts = [
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    // mock that we're publishing
+    wrapper.vm.publishOpts = {
+      id: '1',
+    };
+    wrapper.vm.showPublishDialog = true;
+
+    await nextTick();
+
+    expect(wrapper.vm.showPublishDialog).toBeTruthy();
+    expect(formStore.form.versions).toEqual([VERSION_ONE]);
+    expect(wrapper.vm.rerenderTable).toEqual(0);
+
+    wrapper.vm.cancelPublish();
+
+    await flushPromises();
+
+    expect(wrapper.vm.showPublishDialog).toBeFalsy();
+    expect(formStore.form.versions).toEqual([
       {
-        id: '123-456',
-        version: '1',
+        version: 1,
         published: false,
+        id: '1',
+      },
+    ]);
+    expect(wrapper.vm.rerenderTable).toEqual(1);
+  });
+
+  it('togglePublish should set the publishOpts and show the publish dialog', async () => {
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '123-456',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.publishOpts).toEqual({
+      publishing: true,
+      version: '',
+      id: '',
+    });
+    wrapper.vm.togglePublish(true, '1', 1, false);
+
+    expect(wrapper.vm.publishOpts).toEqual({
+      publishing: true,
+      version: 1,
+      id: '1',
+      isDraft: false,
+    });
+    expect(wrapper.vm.showPublishDialog).toBeTruthy();
+  });
+
+  it('turnOnPublish should set the published value for a draft to true and show the showPublishDialog', async () => {
+    let VERSION_ONE = {
+      version: 1,
+      published: false,
+      id: '1',
+      isDraft: false,
+    };
+    let DRAFT_ONE = {
+      version: 2,
+      published: true,
+      id: '2',
+      isDraft: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+    };
+    formStore.drafts = [DRAFT_ONE];
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '2',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    formStore.form = {
+      versions: [VERSION_ONE],
+    };
+    formStore.drafts = [DRAFT_ONE];
+    wrapper.vm.turnOnPublish();
+
+    expect(wrapper.vm.publishOpts).toEqual({
+      publishing: true,
+      version: 2,
+      id: '2',
+      isDraft: true,
+    });
+  });
+
+  it('onExportClick should create element', async () => {
+    const exportFormSchemaSpy = vi.spyOn(formComposables, 'exportFormSchema');
+    exportFormSchemaSpy.mockImplementationOnce(() => {});
+    let VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+      isDraft: false,
+    };
+    let DRAFT_ONE = {
+      version: 2,
+      published: true,
+      id: '2',
+      isDraft: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+      name: 'this is a form title',
+    };
+    formStore.drafts = [DRAFT_ONE];
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '2',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.onExportClick('1', false);
+    expect(exportFormSchemaSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('getFormSchema should set the form schema for a version', async () => {
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const readVersionSpy = vi.spyOn(formService, 'readVersion');
+    readVersionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          schema: {
+            id: '1',
+            projectId: '123',
+          },
+        },
+      };
+    });
+    const readDraftSpy = vi.spyOn(formService, 'readDraft');
+    readDraftSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          schema: {
+            id: '1',
+            projectId: '123',
+          },
+        },
+      };
+    });
+    let VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+      isDraft: false,
+    };
+    let DRAFT_ONE = {
+      version: 2,
+      published: true,
+      id: '2',
+      isDraft: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+      name: 'this is a form title',
+    };
+    formStore.drafts = [DRAFT_ONE];
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '2',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.getFormSchema('1', false);
+
+    expect(readVersionSpy).toHaveBeenCalledTimes(1);
+    expect(readDraftSpy).toHaveBeenCalledTimes(0);
+    expect(addNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('getFormSchema should set the form schema for a draft', async () => {
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const readVersionSpy = vi.spyOn(formService, 'readVersion');
+    readVersionSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          schema: {
+            id: '1',
+            projectId: '123',
+          },
+        },
+      };
+    });
+    const readDraftSpy = vi.spyOn(formService, 'readDraft');
+    readDraftSpy.mockImplementationOnce(() => {
+      return {
+        data: {
+          schema: {
+            id: '1',
+            projectId: '123',
+          },
+        },
+      };
+    });
+    let VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+      isDraft: false,
+    };
+    let DRAFT_ONE = {
+      version: 2,
+      published: true,
+      id: '2',
+      isDraft: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+      name: 'this is a form title',
+    };
+    formStore.drafts = [DRAFT_ONE];
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '2',
+          formId: '123-456',
+        },
+        stubs: STUBS,
       },
-    ];
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.getFormSchema('1', true);
+
+    expect(readVersionSpy).toHaveBeenCalledTimes(0);
+    expect(readDraftSpy).toHaveBeenCalledTimes(1);
+    expect(addNotificationSpy).toHaveBeenCalledTimes(0);
+  });
+
+  it('updatePublish will publish a draft and then fetchDrafts if it is a draft', async () => {
+    const publishDraftSpy = vi.spyOn(formStore, 'publishDraft');
+    publishDraftSpy.mockImplementationOnce(() => {});
+    const toggleVersionPublishSpy = vi.spyOn(formStore, 'toggleVersionPublish');
+    toggleVersionPublishSpy.mockImplementationOnce(() => {});
+    const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    fetchFormSpy.mockImplementationOnce(() => {});
+    let VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+      isDraft: false,
+    };
+    let DRAFT_ONE = {
+      version: 2,
+      published: true,
+      id: '2',
+      isDraft: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+      name: 'this is a form title',
+    };
+    formStore.drafts = [DRAFT_ONE];
     const wrapper = mount(ManageVersions, {
       global: {
-          plugins: [router, pinia],
-          mocks: {
-              $filters: {
-                formatDateLong: vi.fn().mockReturnValue("formatted date")
-              }
-            },
-          provide: {
-              formDesigner: false,
-              draftId: '123-456',
-              formId: '123-456',
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
           },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '2',
+          formId: '123-456',
+        },
+        stubs: STUBS,
       },
-      });
-      // Call the togglePublish method (simulates user clicking the status toggle)
-      wrapper.vm.togglePublish(true, '123-456', '2', true);
-      // Find the BaseDialog with v-model="showPublishDialog"
-      const baseDialog = wrapper.findAllComponents({ name: 'BaseDialog' })
-      .find(w => w.props('type') === 'CONTINUE');
-      // Emit the close-dialog event (simulate clicking cancel in the dialog)
-      baseDialog.vm.$emit('close-dialog');
+    });
 
-      expect(publishSpy).not.toHaveBeenCalled();
+    await flushPromises();
+
+    wrapper.vm.publishOpts = {
+      isDraft: true,
+      id: '2',
+    };
+
+    await wrapper.vm.updatePublish();
+    expect(publishDraftSpy).toHaveBeenCalledTimes(1);
+    expect(toggleVersionPublishSpy).toHaveBeenCalledTimes(0);
+    expect(fetchFormSpy).toHaveBeenCalledTimes(1);
   });
 
+  it('updatePublish will publish an existing form version and then fetchDrafts if it is not a draft', async () => {
+    const publishDraftSpy = vi.spyOn(formStore, 'publishDraft');
+    publishDraftSpy.mockImplementationOnce(() => {});
+    const toggleVersionPublishSpy = vi.spyOn(formStore, 'toggleVersionPublish');
+    toggleVersionPublishSpy.mockImplementationOnce(() => {});
+    const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+    fetchFormSpy.mockImplementationOnce(() => {});
+    let VERSION_ONE = {
+      version: 1,
+      published: true,
+      id: '1',
+      isDraft: false,
+    };
+    let DRAFT_ONE = {
+      version: 2,
+      published: true,
+      id: '2',
+      isDraft: true,
+    };
+    formStore.form = {
+      versions: [VERSION_ONE],
+      name: 'this is a form title',
+    };
+    formStore.drafts = [DRAFT_ONE];
+    const wrapper = mount(ManageVersions, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        provide: {
+          formDesigner: false,
+          draftId: '2',
+          formId: '123-456',
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
 
+    wrapper.vm.publishOpts = {
+      isDraft: false,
+      id: '1',
+    };
+
+    await wrapper.vm.updatePublish();
+    expect(publishDraftSpy).toHaveBeenCalledTimes(0);
+    expect(toggleVersionPublishSpy).toHaveBeenCalledTimes(1);
+    expect(fetchFormSpy).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/app/frontend/tests/unit/components/forms/manage/ShareForm.spec.js b/app/frontend/tests/unit/components/forms/manage/ShareForm.spec.js
new file mode 100644
index 000000000..4be51d4c7
--- /dev/null
+++ b/app/frontend/tests/unit/components/forms/manage/ShareForm.spec.js
@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
+import { beforeEach, vi } from 'vitest';
+import { useRouter } from 'vue-router';
+
+import ShareForm from '~/components/forms/manage/ShareForm.vue';
+import { useFormStore } from '~/store/form';
+
+const STUBS = {
+  BaseCopyToClipboard: {
+    template: '<div class="base-copy-to-clipboard-stub"><slot /></div>',
+  },
+  QRcodeVue: {
+    name: 'qrcode-vue',
+    template:
+      '<div class="qrcode-vue-stub"><div class="qrCodeContainer"><canvas /><slot /></div></div>',
+  },
+  VCardText: {
+    template: '<div class="v-card-text-stub"><slot /></div>',
+  },
+  VCard: {
+    template: '<div class="v-card-stub"><slot /></div>',
+  },
+  VDialogTransition: {
+    template: '<div class="v-dialog-transition-stub"><slot /></div>',
+  },
+  VDialog: {
+    template: '<div class="v-dialog-stub"><slot /></div>',
+  },
+};
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    resolve: () => {},
+  })),
+}));
+
+describe('ShareForm.vue', () => {
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+  });
+
+  it('formLink resolves a URL and returns the href', async () => {
+    delete window.location;
+    window.location = new URL('https://submit.digital.gov.bc.ca/');
+    const resolve = vi.fn();
+    resolve.mockImplementation(() => {
+      return {
+        href: '/#',
+      };
+    });
+    useRouter.mockImplementationOnce(() => ({
+      resolve,
+    }));
+    const wrapper = mount(ShareForm, {
+      props: {
+        formId: '1',
+        warning: true,
+      },
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    const formLink = wrapper.vm.formLink;
+    expect(formLink).toEqual('https://submit.digital.gov.bc.ca/#');
+    expect(resolve).toHaveBeenCalledTimes(1);
+  });
+
+  it('downloadQr', async () => {
+    const resolve = vi.fn();
+    resolve.mockImplementation(() => {
+      return {
+        href: '#',
+      };
+    });
+    useRouter.mockImplementationOnce(() => ({
+      resolve,
+    }));
+    const toDataURL = vi.fn();
+    const querySelectorSpy = vi.spyOn(document, 'querySelector');
+    querySelectorSpy.mockImplementationOnce(() => {
+      return {
+        toDataURL,
+      };
+    });
+    const wrapper = mount(ShareForm, {
+      props: {
+        formId: '1',
+        warning: true,
+      },
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $filters: {
+            formatDateLong: vi.fn().mockReturnValue('formatted date'),
+          },
+        },
+        stubs: STUBS,
+      },
+    });
+
+    wrapper.vm.dialog = true;
+
+    await flushPromises();
+
+    wrapper.vm.downloadQr();
+    expect(toDataURL).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/frontend/tests/unit/components/forms/manage/Subscription.spec.js b/app/frontend/tests/unit/components/forms/manage/Subscription.spec.js
new file mode 100644
index 000000000..03f882412
--- /dev/null
+++ b/app/frontend/tests/unit/components/forms/manage/Subscription.spec.js
@@ -0,0 +1,57 @@
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount } from '@vue/test-utils';
+import { setActivePinia } from 'pinia';
+import { beforeEach, vi } from 'vitest';
+
+import Subscription from '~/components/forms/manage/Subscription.vue';
+import { useFormStore } from '~/store/form';
+
+describe('Subscription.vue', () => {
+  const pinia = createTestingPinia();
+  setActivePinia(pinia);
+  const formStore = useFormStore(pinia);
+
+  beforeEach(() => {
+    formStore.$reset();
+  });
+
+  it('showHideKey should toggle the value', async () => {
+    const wrapper = mount(Subscription, {
+      global: {
+        plugins: [pinia],
+      },
+    });
+
+    expect(wrapper.vm.showSecret).toBeFalsy();
+    wrapper.vm.showHideKey();
+    expect(wrapper.vm.showSecret).toBeTruthy();
+  });
+
+  it('updateSettings should update the subscription then readFormSubscription if the form is valid', async () => {
+    const updateSubscriptionSpy = vi.spyOn(formStore, 'updateSubscription');
+    updateSubscriptionSpy.mockImplementationOnce(async () => {});
+    const readFormSubscriptionDataSpy = vi.spyOn(
+      formStore,
+      'readFormSubscriptionData'
+    );
+    readFormSubscriptionDataSpy.mockImplementationOnce(async () => {});
+    // mock valid form subscription data
+    formStore.subscriptionData = {
+      endpointUrl: 'http://website.com/api/v1/test',
+      key: 'CLIENT_KEY',
+      endpointToken: 'ENDPOINT_TOKEN',
+    };
+    const wrapper = mount(Subscription, {
+      global: {
+        plugins: [pinia],
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.updateSettings();
+
+    expect(updateSubscriptionSpy).toHaveBeenCalledTimes(1);
+    expect(readFormSubscriptionDataSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/app/frontend/tests/unit/components/forms/manage/TeamManagement.spec.js b/app/frontend/tests/unit/components/forms/manage/TeamManagement.spec.js
index b364871ae..c5f210b1b 100644
--- a/app/frontend/tests/unit/components/forms/manage/TeamManagement.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/TeamManagement.spec.js
@@ -1,13 +1,264 @@
 import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import { setActivePinia } from 'pinia';
-import { mount } from '@vue/test-utils';
-import { createRouter, createWebHistory } from 'vue-router';
 import { beforeEach, expect, vi } from 'vitest';
+import { createRouter, createWebHistory } from 'vue-router';
 
 import getRouter from '~/router';
 import TeamManagement from '~/components/forms/manage/TeamManagement.vue';
+import { rbacService, roleService } from '~/services';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
+import { useIdpStore } from '~/store/identityProviders';
+import { useNotificationStore } from '~/store/notification';
+import {
+  AppPermissions,
+  FormPermissions,
+  FormRoleCodes,
+  IdentityMode,
+} from '~/utils/constants';
+
+const ROLES = require('../../../fixtures/roles.json');
+const IDIR_USER = require('../../../fixtures/idir_user.json');
+
+const STUBS = {
+  VTextField: {
+    template: '<div class="v-text-field-stub"><slot /></div>',
+  },
+  VSelect: {
+    template: '<div class="v-select-stub"><slot /></div>',
+  },
+  VDataTable: {
+    template: '<div class="v-data-table-stub"><slot /></div>',
+  },
+};
+
+const IDIR = {
+  active: true,
+  login: true,
+  code: 'idir',
+  display: 'IDIR',
+  extra: {},
+  idp: 'idir',
+  permissions: [
+    AppPermissions.VIEWS_FORM_STEPPER,
+    AppPermissions.VIEWS_ADMIN,
+    AppPermissions.VIEWS_FILE_DOWNLOAD,
+    AppPermissions.VIEWS_FORM_EMAILS,
+    AppPermissions.VIEWS_FORM_EXPORT,
+    AppPermissions.VIEWS_FORM_MANAGE,
+    AppPermissions.VIEWS_FORM_PREVIEW,
+    AppPermissions.VIEWS_FORM_SUBMISSIONS,
+    AppPermissions.VIEWS_FORM_TEAMS,
+    AppPermissions.VIEWS_FORM_VIEW,
+    AppPermissions.VIEWS_USER_SUBMISSIONS,
+  ],
+  primary: true,
+  roles: [
+    FormRoleCodes.OWNER,
+    FormRoleCodes.TEAM_MANAGER,
+    FormRoleCodes.FORM_DESIGNER,
+    FormRoleCodes.SUBMISSION_APPROVER,
+    FormRoleCodes.SUBMISSION_REVIEWER,
+    FormRoleCodes.FORM_SUBMITTER,
+  ],
+  tokenmap: {
+    idp: 'identity_provider',
+    email: 'email',
+    fullName: 'name',
+    lastName: 'family_name',
+    username: 'idir_username',
+    firstName: 'given_name',
+    idpUserId: 'idir_user_guid',
+    keycloakId: 'idir_user_guid',
+  },
+};
+
+const BCEIDBASIC = {
+  active: true,
+  login: true,
+  code: 'bceid-basic',
+  display: 'Basic BCeID',
+  extra: {
+    addTeamMemberSearch: {
+      email: {
+        exact: true,
+        message: 'trans.manageSubmissionUsers.exactBCEIDSearch',
+      },
+      text: {
+        message: 'trans.manageSubmissionUsers.searchInputLength',
+        minLength: 6,
+      },
+    },
+    userSearch: {
+      detail: 'Could not retrieve BCeID users. Invalid options provided.',
+      filters: [
+        {
+          name: 'filterIdpUserId',
+          param: 'idpUserId',
+          required: 0,
+        },
+        {
+          name: 'filterIdpCode',
+          param: 'idpCode',
+          required: 0,
+        },
+        {
+          name: 'filterUsername',
+          param: 'username',
+          exact: true,
+          required: 2,
+        },
+        {
+          name: 'filterFullName',
+          param: 'fullName',
+          required: 0,
+        },
+        {
+          name: 'filterFirstName',
+          param: 'firstName',
+          required: 0,
+        },
+        {
+          name: 'filterLastName',
+          param: 'lastName',
+          required: 0,
+        },
+        {
+          name: 'filterEmail',
+          exact: true,
+          param: 'email',
+          required: 2,
+        },
+        {
+          name: 'filterSearch',
+          param: 'search',
+          required: 0,
+        },
+      ],
+    },
+  },
+  idp: 'bceidbasic',
+  permissions: [AppPermissions.VIEWS_USER_SUBMISSIONS],
+  primary: false,
+  roles: [FormRoleCodes.FORM_SUBMITTER],
+  tokenmap: {
+    idp: 'identity_provider',
+    email: 'email',
+    fullName: 'name',
+    lastName: null,
+    username: 'bceid_username',
+    firstName: null,
+    idpUserId: 'bceid_user_guid',
+    keycloakId: 'bceid_user_guid',
+  },
+};
+
+const BCEIDBUSINESS = {
+  active: true,
+  login: true,
+  code: 'bceid-business',
+  display: 'Business BCeID',
+  extra: {
+    addTeamMemberSearch: {
+      email: {
+        exact: true,
+        message: 'trans.manageSubmissionUsers.exactBCEIDSearch',
+      },
+      text: {
+        message: 'trans.manageSubmissionUsers.searchInputLength',
+        minLength: 6,
+      },
+    },
+    formAccessSettings: 'idim',
+    userSearch: {
+      detail: 'Could not retrieve BCeID users. Invalid options provided.',
+      filters: [
+        {
+          name: 'filterIdpUserId',
+          param: 'idpUserId',
+          required: 0,
+        },
+        {
+          name: 'filterIdpCode',
+          param: 'idpCode',
+          required: 0,
+        },
+        {
+          name: 'filterUsername',
+          param: 'username',
+          exact: true,
+          required: 2,
+        },
+        {
+          name: 'filterFullName',
+          param: 'fullName',
+          required: 0,
+        },
+        {
+          name: 'filterFirstName',
+          param: 'firstName',
+          required: 0,
+        },
+        {
+          name: 'filterLastName',
+          param: 'lastName',
+          required: 0,
+        },
+        {
+          name: 'filterEmail',
+          exact: true,
+          param: 'email',
+          required: 2,
+        },
+        {
+          name: 'filterSearch',
+          param: 'search',
+          required: 0,
+        },
+      ],
+    },
+  },
+  idp: 'bceidbusiness',
+  permissions: [
+    AppPermissions.VIEWS_FORM_EXPORT,
+    AppPermissions.VIEWS_FORM_MANAGE,
+    AppPermissions.VIEWS_FORM_SUBMISSIONS,
+    AppPermissions.VIEWS_FORM_TEAMS,
+    AppPermissions.VIEWS_FORM_VIEW,
+    AppPermissions.VIEWS_USER_SUBMISSIONS,
+  ],
+  primary: false,
+  roles: [
+    FormRoleCodes.TEAM_MANAGER,
+    FormRoleCodes.SUBMISSION_REVIEWER,
+    FormRoleCodes.FORM_SUBMITTER,
+    FormRoleCodes.SUBMISSION_APPROVER,
+  ],
+  tokenmap: {
+    idp: 'identity_provider',
+    email: 'email',
+    fullName: 'name',
+    lastName: null,
+    username: 'bceid_username',
+    firstName: null,
+    idpUserId: 'bceid_user_guid',
+    keycloakId: 'bceid_user_guid',
+  },
+};
+
+const PUBLIC = {
+  active: true,
+  login: false,
+  code: 'public',
+  display: 'Public',
+  extra: {},
+  idp: 'public',
+  permissions: [],
+  primary: false,
+  roles: null,
+  tokenmap: null,
+};
 
 describe('TeamManagement.vue', () => {
   const formId = '123-456';
@@ -22,28 +273,1207 @@ describe('TeamManagement.vue', () => {
   setActivePinia(pinia);
   const authStore = useAuthStore(pinia);
   const formStore = useFormStore(pinia);
+  const idpStore = useIdpStore(pinia);
+  const notificationStore = useNotificationStore(pinia);
+  const fetchFormSpy = vi.spyOn(formStore, 'fetchForm');
+  const listRolesSpy = vi.spyOn(roleService, 'list');
 
   beforeEach(() => {
     authStore.$reset();
     formStore.$reset();
+    idpStore.$reset();
+    notificationStore.$reset();
+    fetchFormSpy.mockReset();
+    listRolesSpy.mockReset();
   });
 
   it('renders', () => {
-    const loadItemsSpy = vi.spyOn(TeamManagement.methods, 'loadItems');
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    const removeMultiUsersSpy = vi.spyOn(rbacService, 'removeMultiUsers');
+    fetchFormSpy.mockImplementationOnce(async () => {
+      return {
+        name: 'This is a form name',
+        userType: 'team',
+      };
+    });
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    getFormUsersSpy.mockImplementationOnce(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    removeMultiUsersSpy.mockImplementationOnce(async () => {});
     formStore.form = {
       name: 'This is a form title',
     };
-    loadItemsSpy.mockImplementation(() => {});
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
     const wrapper = mount(TeamManagement, {
       props: {
         formId: formId,
       },
       global: {
         plugins: [router, pinia],
+        stubs: STUBS,
       },
     });
 
     expect(wrapper.text()).toContain('trans.teamManagement.teamManagement');
-    expect(wrapper.html()).toContain(formStore.form.name);
+    expect(wrapper.text()).toContain(formStore.form.name);
+  });
+
+  it('DeleteMessage returns delSelectedMembersWarning if there is at least 2 items to delete otherwise it returns delSelectedMemberWarning', async () => {
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.vm.DeleteMessage).toEqual(
+      'trans.teamManagement.delSelectedMemberWarning'
+    );
+
+    wrapper.vm.itemsToDelete = ['something', 'something else'];
+
+    expect(wrapper.vm.DeleteMessage).toEqual(
+      'trans.teamManagement.delSelectedMembersWarning'
+    );
+  });
+
+  it('FILTER_HEADERS should return the DEFAULT_HEADERS without any of the values found in filterIgnore', async () => {
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.vm.FILTER_HEADERS).toEqual(
+      wrapper.vm.DEFAULT_HEADERS.filter(
+        (h) => !wrapper.vm.filterIgnore.some((fd) => fd.key === h.key)
+      )
+    );
+  });
+
+  it('HEADERS should return the DEFAULT_HEADERS but ignore anything found in filterData and filterIgnore', async () => {
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    // DEFAULT_HEADERS should only contain the default values
+    expect(wrapper.vm.HEADERS).toEqual([
+      { title: 'trans.teamManagement.fullName', key: 'fullName' },
+      { title: 'trans.teamManagement.username', key: 'username' },
+      {
+        title: 'trans.teamManagement.identityProvider',
+        key: 'identityProvider.code',
+      },
+      { title: '', key: 'actions', width: '1rem', sortable: false },
+    ]);
+
+    // If we filter that we only want the fullName, it should add what's in the filter
+    // and also ignore filtering anything in filterIgnore which currently is actions by default
+    wrapper.vm.filterData = ['fullName'];
+
+    expect(wrapper.vm.HEADERS).toEqual([
+      { title: 'trans.teamManagement.fullName', key: 'fullName' },
+      { title: '', key: 'actions', width: '1rem', sortable: false },
+    ]);
+  });
+
+  it('PRESELECTED_DATA should return the filterData if there is data or it will return the FILTER_HEADERS keys', async () => {
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    // By default there is no filterData so it should return FILTER_HEADERS keys
+
+    expect(wrapper.vm.PRESELECTED_DATA).toEqual(
+      wrapper.vm.FILTER_HEADERS.map((fd) => fd.key)
+    );
+
+    // If we add filterData though, it'll return filterData
+    wrapper.vm.filterData = ['fullName'];
+
+    expect(wrapper.vm.PRESELECTED_DATA).toEqual(['fullName']);
+  });
+
+  it('getFormUsers should throw an error if the user can not manage the team', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [];
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [];
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(addNotificationSpy).toBeCalledTimes(1);
+    expect(wrapper.vm.formUsers).toEqual([]);
+  });
+
+  it('getFormUsers should call rbacService.getFormUsers if it can manage the team and set formUsers', async () => {
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+
+    await flushPromises();
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await wrapper.vm.getFormUsers();
+
+    await flushPromises();
+
+    expect(addNotificationSpy).toBeCalledTimes(0);
+    // Gets called twice
+    expect(getFormUsersSpy).toBeCalledTimes(2);
+    // It should add the idp key to the formUser entries
+    expect(wrapper.vm.formUsers).toEqual(
+      [IDIR_USER].map((user) => {
+        user.idp = idpStore.findByCode(user.user_idpCode);
+        return user;
+      })
+    );
+  });
+
+  it('disableRole returns true if the specified header is FORM_SUBMITTER and userType is not team', async () => {
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+
+    await flushPromises();
+
+    expect(
+      wrapper.vm.disableRole(
+        FormRoleCodes.FORM_SUBMITTER,
+        {
+          identityProvider: {
+            code: 'idir',
+          },
+        },
+        IdentityMode.PUBLIC
+      )
+    ).toBeTruthy();
+  });
+
+  it('disableRole returns false if the header is not in the IDPs roles', async () => {
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    const idpStoreListRolesSpy = vi.spyOn(idpStore, 'listRoles');
+    idpStoreListRolesSpy.mockImplementationOnce(() => {
+      return [FormRoleCodes.OWNER];
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+
+    await flushPromises();
+
+    expect(
+      wrapper.vm.disableRole(
+        FormRoleCodes.OWNER,
+        {
+          identityProvider: {
+            code: 'idir',
+          },
+        },
+        IdentityMode.PUBLIC
+      )
+    ).toBeFalsy();
+    expect(idpStoreListRolesSpy).toBeCalledTimes(1);
+  });
+
+  it('toggleRole calls setUserForms which calls the rbacService.setUserForms then getFormPermissionsForUser', async () => {
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.toggleRole(IDIR_USER);
+
+    expect(setUserFormsSpy).toBeCalledTimes(1);
+    // It gets called once in the mounted function as well
+    expect(getFormPermissionsForUserSpy).toBeCalledTimes(2);
+    expect(wrapper.vm.selectedUsers).toEqual([]);
+  });
+
+  it('setUserForms should addNotification with detailed error if an error is thrown', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {
+      throw {
+        response: {
+          data: {
+            detail: 'DETAILED ERROR MESSAGE',
+          },
+        },
+      };
+    });
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.toggleRole(IDIR_USER);
+
+    expect(setUserFormsSpy).toBeCalledTimes(1);
+    // It gets called once in the mounted function as well
+    expect(getFormPermissionsForUserSpy).toBeCalledTimes(2);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledWith({
+      consoleError: 'trans.teamManagement.setUserFormsConsoleErrMsg',
+      text: 'DETAILED ERROR MESSAGE',
+    });
+    expect(wrapper.vm.selectedUsers).toEqual([]);
+  });
+
+  it('setUserForms should addNotification if an error is thrown', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {
+      throw new Error();
+    });
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.toggleRole(IDIR_USER);
+
+    expect(setUserFormsSpy).toBeCalledTimes(1);
+    // It gets called once in the mounted function as well
+    expect(getFormPermissionsForUserSpy).toBeCalledTimes(2);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledWith({
+      consoleError: 'trans.teamManagement.setUserFormsConsoleErrMsg',
+      text: 'trans.teamManagement.setUserFormsErrMsg',
+    });
+    expect(wrapper.vm.selectedUsers).toEqual([]);
+  });
+
+  it('generateFormRoleUsers returns the keys of a user filtered by role', async () => {
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    // Since this user doesn't have any roles added to the object it should return nothing
+    expect(wrapper.vm.generateFormRoleUsers(IDIR_USER)).toEqual([]);
+
+    let user = {
+      ...IDIR_USER,
+    };
+
+    user[FormRoleCodes.OWNER] = true;
+    user[FormRoleCodes.OWNER.TEAM_MANAGER] = false;
+    user[FormRoleCodes.OWNER.FORM_DESIGNER] = false;
+    user[FormRoleCodes.OWNER.SUBMISSION_APPROVER] = false;
+    user[FormRoleCodes.OWNER.SUBMISSION_REVIEWER] = false;
+    user[FormRoleCodes.OWNER.FORM_SUBMITTER] = false;
+    // If we use a modified user object and add the roles, map out the formId and userId and role.
+    expect(wrapper.vm.generateFormRoleUsers(user)).toEqual([
+      {
+        formId: IDIR_USER.formId,
+        role: FormRoleCodes.OWNER,
+        userId: IDIR_USER.userId,
+      },
+    ]);
+  });
+
+  it('addingUsers will set isAddingUsers to the specified value', async () => {
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.addingUsers(true);
+    expect(wrapper.vm.isAddingUsers).toBeTruthy();
+    wrapper.vm.addingUsers(false);
+    expect(wrapper.vm.isAddingUsers).toBeFalsy();
+  });
+
+  it('addNewUsers will addNotification if user is already in the table', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    wrapper.vm.tableData = [
+      {
+        ...IDIR_USER,
+      },
+    ];
+
+    wrapper.vm.addNewUsers([IDIR_USER], []);
+
+    expect(addNotificationSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledWith({
+      text: `${IDIR_USER.username}@${IDIR_USER.idpCode}trans.teamManagement.idpMessage`,
+    });
+  });
+
+  it('addNewUsers will add users to the table if they are not there using roles', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    wrapper.vm.addNewUsers(
+      [IDIR_USER],
+      [
+        FormRoleCodes.FORM_SUBMITTER,
+        FormRoleCodes.FORM_DESIGNER,
+        FormRoleCodes.SUBMISSION_APPROVER,
+        FormRoleCodes.SUBMISSION_REVIEWER,
+        FormRoleCodes.TEAM_MANAGER,
+        FormRoleCodes.OWNER,
+      ]
+    );
+
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('addNewUsers will add users to the table if they are not there', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    wrapper.vm.addNewUsers([IDIR_USER], []);
+
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('onShowColumnDialog will sort FILTER_HEADERS then set showColumnsDialog to true', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.FILTER_HEADERS).toEqual([
+      { title: 'trans.teamManagement.fullName', key: 'fullName' },
+      { title: 'trans.teamManagement.username', key: 'username' },
+      {
+        title: 'trans.teamManagement.identityProvider',
+        key: 'identityProvider.code',
+      },
+      {
+        description: 'Owns the form',
+        filterable: false,
+        key: 'owner',
+        title: 'Owner',
+      },
+      {
+        description: 'Manages Team members for the form',
+        filterable: false,
+        key: 'team_manager',
+        title: 'Team Manager',
+      },
+      {
+        description: 'Designs the form',
+        filterable: false,
+        key: 'form_designer',
+        title: 'Form Designer',
+      },
+      {
+        description:
+          "Can review all form submissions but can't edit the submission.",
+        filterable: false,
+        key: 'submission_approver',
+        title: 'Approver',
+      },
+      {
+        description: 'Can review and manage all form submissions',
+        filterable: false,
+        key: 'submission_reviewer',
+        title: 'Reviewer',
+      },
+    ]);
+
+    wrapper.vm.onShowColumnDialog();
+
+    expect(wrapper.vm.FILTER_HEADERS).toEqual([
+      {
+        description: 'Can review and manage all form submissions',
+        filterable: false,
+        key: 'submission_reviewer',
+        title: 'Reviewer',
+      },
+      {
+        description:
+          "Can review all form submissions but can't edit the submission.",
+        filterable: false,
+        key: 'submission_approver',
+        title: 'Approver',
+      },
+      {
+        description: 'Designs the form',
+        filterable: false,
+        key: 'form_designer',
+        title: 'Form Designer',
+      },
+      {
+        description: 'Manages Team members for the form',
+        filterable: false,
+        key: 'team_manager',
+        title: 'Team Manager',
+      },
+      {
+        description: 'Owns the form',
+        filterable: false,
+        key: 'owner',
+        title: 'Owner',
+      },
+      {
+        title: 'trans.teamManagement.identityProvider',
+        key: 'identityProvider.code',
+      },
+      { title: 'trans.teamManagement.username', key: 'username' },
+      { title: 'trans.teamManagement.fullName', key: 'fullName' },
+    ]);
+
+    expect(wrapper.vm.showColumnsDialog).toBeTruthy();
+  });
+
+  it('onRemoveClick will addNotification if there is only 1 user to remove', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    wrapper.vm.onRemoveClick();
+
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+
+  it('onRemoveClick will set itemsToDelete', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER, IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    wrapper.vm.onRemoveClick(['12345678-1234-1234-1234-123456789012']);
+
+    // should try to remove
+    expect(wrapper.vm.itemsToDelete).toEqual(
+      wrapper.vm.tableData.filter((td) =>
+        ['12345678-1234-1234-1234-123456789012'].includes(td.id)
+      )
+    );
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('onRemoveClick will set itemsToDelete to the item', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER, IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    wrapper.vm.onRemoveClick('12345678-1234-1234-1234-123456789012');
+
+    // should try to remove
+    expect(wrapper.vm.itemsToDelete).toEqual([
+      '12345678-1234-1234-1234-123456789012',
+    ]);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('removeUser will call removeMultiUsers, getFormPermissionsForUser', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const removeMultiUsersSpy = vi.spyOn(rbacService, 'removeMultiUsers');
+    removeMultiUsersSpy.mockImplementationOnce(async () => {});
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER, IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    await wrapper.vm.removeUser();
+
+    expect(removeMultiUsersSpy).toBeCalledTimes(1);
+    // Gets called twice because of getFormUsers
+    expect(getFormPermissionsForUserSpy).toBeCalledTimes(2);
+    expect(addNotificationSpy).toBeCalledTimes(0);
+  });
+
+  it('removeUser will addNotification with detailed message if an error occurs', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const removeMultiUsersSpy = vi.spyOn(rbacService, 'removeMultiUsers');
+    removeMultiUsersSpy.mockImplementationOnce(async () => {
+      throw {
+        response: {
+          data: {
+            detail: 'DETAILED ERROR MESSAGE',
+          },
+        },
+      };
+    });
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER, IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    await wrapper.vm.removeUser();
+
+    expect(removeMultiUsersSpy).toBeCalledTimes(1);
+    expect(getFormPermissionsForUserSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+
+  it('removeUser will addNotification if an error occurs', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const removeMultiUsersSpy = vi.spyOn(rbacService, 'removeMultiUsers');
+    removeMultiUsersSpy.mockImplementationOnce(async () => {
+      throw new Error();
+    });
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER, IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
+    await flushPromises();
+
+    await wrapper.vm.removeUser();
+
+    expect(removeMultiUsersSpy).toBeCalledTimes(1);
+    expect(getFormPermissionsForUserSpy).toBeCalledTimes(1);
+    expect(addNotificationSpy).toBeCalledTimes(1);
+  });
+
+  it('updateFilter sets filterData and hides the columns dialog', async () => {
+    listRolesSpy.mockImplementationOnce(async () => {
+      return {
+        data: ROLES,
+      };
+    });
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    idpStore.providers = [IDIR, BCEIDBASIC, BCEIDBUSINESS, PUBLIC];
+    const setUserFormsSpy = vi.spyOn(rbacService, 'setUserForms');
+    setUserFormsSpy.mockImplementationOnce(async () => {});
+    const removeMultiUsersSpy = vi.spyOn(rbacService, 'removeMultiUsers');
+    removeMultiUsersSpy.mockImplementationOnce(async () => {
+      throw {
+        response: {
+          data: {
+            detail: 'DETAILED ERROR MESSAGE',
+          },
+        },
+      };
+    });
+    const getFormPermissionsForUserSpy = vi.spyOn(
+      formStore,
+      'getFormPermissionsForUser'
+    );
+    getFormPermissionsForUserSpy.mockImplementationOnce(async () => {
+      return [FormPermissions.TEAM_UPDATE];
+    });
+    const getFormUsersSpy = vi.spyOn(rbacService, 'getFormUsers');
+    getFormUsersSpy.mockImplementation(async () => {
+      return {
+        data: [IDIR_USER, IDIR_USER],
+      };
+    });
+
+    formStore.permissions = [FormPermissions.TEAM_UPDATE];
+    const wrapper = shallowMount(TeamManagement, {
+      props: {
+        formId: formId,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.updateFilter(['something']);
+
+    expect(wrapper.vm.filterData).toEqual(['something']);
+    expect(wrapper.vm.showColumnsDialog).toBeFalsy();
+
+    wrapper.vm.updateFilter();
+
+    expect(wrapper.vm.filterData).toEqual([]);
+    expect(wrapper.vm.showColumnsDialog).toBeFalsy();
   });
 });
diff --git a/app/frontend/tests/unit/composables/documentTemplate.spec.js b/app/frontend/tests/unit/composables/documentTemplate.spec.js
new file mode 100644
index 000000000..30441497c
--- /dev/null
+++ b/app/frontend/tests/unit/composables/documentTemplate.spec.js
@@ -0,0 +1,127 @@
+// @vitest-environment happy-dom
+// happy-dom is required to access window.URL
+import { beforeEach, vi } from 'vitest';
+import {
+  fetchDocumentTemplates,
+  getDocumentTemplate,
+  readFile,
+} from '~/composables/documentTemplate';
+import { formService } from '~/services';
+
+describe('documentTemplate.js', () => {
+  describe('fetchDocumentTemplates', () => {
+    const documentTemplateListSpy = vi.spyOn(
+      formService,
+      'documentTemplateList'
+    );
+
+    let mockDatabase;
+
+    beforeEach(() => {
+      mockDatabase = [
+        {
+          filename: 'test.txt',
+          createdAt: '2024-06-03',
+          id: '1',
+        },
+      ];
+    });
+
+    it('should return an array of document templates from the form service', async () => {
+      documentTemplateListSpy.mockImplementationOnce(async () => {
+        return {
+          data: Array.from(mockDatabase),
+        };
+      });
+
+      const documentTemplates = await fetchDocumentTemplates('1');
+      expect(documentTemplates).toEqual(
+        mockDatabase.map((template) => {
+          return {
+            filename: template.filename,
+            createdAt: template.createdAt,
+            templateId: template.id,
+            actions: '',
+          };
+        })
+      );
+    });
+  });
+
+  describe('getDocumentTemplate', () => {
+    let createObjectURLSpy = vi.spyOn(window.URL, 'createObjectURL');
+
+    it('should throw an error if there was no data in the document', async () => {
+      const documentTemplateReadSpy = vi.spyOn(
+        formService,
+        'documentTemplateRead'
+      );
+      documentTemplateReadSpy.mockImplementationOnce(async () => {
+        return {};
+      });
+
+      await expect(
+        getDocumentTemplate('1', '1', 'filename.txt')
+      ).rejects.toThrowError('There was no data in the document.');
+    });
+
+    it('should create a valid url with valid data', async () => {
+      const documentTemplateReadSpy = vi.spyOn(
+        formService,
+        'documentTemplateRead'
+      );
+      documentTemplateReadSpy.mockImplementationOnce(async () => {
+        return {
+          data: {
+            active: true,
+            createdAt: '2024-06-03',
+            createdBy: 'TESTIDIR',
+            filename: 'cdogs.txt',
+            formId: '1',
+            id: '1',
+            template: {
+              type: 'Buffer',
+              data: [
+                83, 71, 86, 115, 98, 71, 56, 103, 101, 50, 81, 117, 90, 109,
+                108, 121, 99, 51, 82, 79, 89, 87, 49, 108, 102, 83, 52, 61,
+              ],
+            },
+            updatedAt: '2024-06-03',
+            updatedBy: null,
+          },
+        };
+      });
+      createObjectURLSpy.mockImplementation((data) => data);
+
+      const url = await getDocumentTemplate('1', '1', 'cdogs.txt');
+      const base64EncodedData = [
+        83, 71, 86, 115, 98, 71, 56, 103, 101, 50, 81, 117, 90, 109, 108, 121,
+        99, 51, 82, 79, 89, 87, 49, 108, 102, 83, 52, 61,
+      ]
+        .map((byte) => String.fromCharCode(byte))
+        .join('');
+      // Decode the base64 string to binary data
+      const binaryString = atob(base64EncodedData);
+      const len = binaryString.length;
+      const bytes = new Uint8Array(len);
+      for (let i = 0; i < len; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      expect(url).toEqual(new Blob([bytes], { type: 'text/plain' }));
+    });
+  });
+
+  describe('readFile', () => {
+    it('should return a valid file', async () => {
+      // no data
+      const mockInputElement = document.createElement('input');
+      mockInputElement.type = 'file';
+      const file = await readFile(mockInputElement);
+      expect(file).toEqual('');
+    });
+
+    it('should reject if there was an error reading the file', async () => {
+      // This needs to be implemented
+    });
+  });
+});
diff --git a/app/frontend/tests/unit/composables/form.spec.js b/app/frontend/tests/unit/composables/form.spec.js
new file mode 100644
index 000000000..880ad4d37
--- /dev/null
+++ b/app/frontend/tests/unit/composables/form.spec.js
@@ -0,0 +1,26 @@
+// @vitest-environment happy-dom
+// happy-dom is required to access window.URL
+import * as formComposables from '~/composables/form';
+
+describe('form.js', () => {
+  describe('exportFormSchema', () => {
+    it('should export some schema and return a snek', () => {
+      const { snek } = formComposables.exportFormSchema(
+        'this is a form name',
+        {
+          id: '1',
+          projectId: '123',
+        },
+        null
+      );
+
+      // it should transform the form name
+      expect(snek).toEqual(
+        'this is a form name'
+          .replace(/\s+/g, '_')
+          .replace(/[^-_0-9a-z]/gi, '')
+          .toLowerCase()
+      );
+    });
+  });
+});
diff --git a/app/frontend/tests/unit/fixtures/idir_user.json b/app/frontend/tests/unit/fixtures/idir_user.json
new file mode 100644
index 000000000..5e86b8b6f
--- /dev/null
+++ b/app/frontend/tests/unit/fixtures/idir_user.json
@@ -0,0 +1,62 @@
+{
+  "id": "12345678-1234-1234-1234-123456789012",
+  "userId": "12345678-1234-1234-1234-123456789012",
+  "idpUserId": "IDIRUSERGUID",
+  "username": "IDIRUSERNAME",
+  "fullName": "Surname, Given CITZ:EX",
+  "firstName": "Given",
+  "lastName": "Surname",
+  "email": "given.surname@gov.bc.ca",
+  "formId": "12345678-1234-1234-1234-123456789012",
+  "formName": "This is a form name",
+  "labels": [],
+  "user_idpCode": "idir",
+  "idpCode": "idir",
+  "identityProviders": [],
+  "form_login_required": [],
+  "idps": [],
+  "active": true,
+  "formVersionId": "12345678-1234-1234-1234-123456789012",
+  "version": 3,
+  "roles": [
+    "form_designer",
+    "form_submitter",
+    "owner",
+    "submission_approver",
+    "submission_reviewer",
+    "team_manager"
+  ],
+  "permissions": [
+    "design_create",
+    "design_delete",
+    "design_read",
+    "design_update",
+    "document_template_create",
+    "document_template_delete",
+    "document_template_read",
+    "email_template_read",
+    "email_template_update",
+    "form_api_create",
+    "form_api_delete",
+    "form_api_read",
+    "form_api_update",
+    "form_delete",
+    "form_read",
+    "form_update",
+    "submission_create",
+    "submission_delete",
+    "submission_read",
+    "submission_review",
+    "submission_update",
+    "team_read",
+    "team_update"
+  ],
+  "published": true,
+  "versionUpdatedAt": "2024-06-04T21:08:01.524Z",
+  "formDescription": "",
+  "idp": {
+    "code": "idir",
+    "display": "IDIR",
+    "hint": "idir"
+  }
+}
\ No newline at end of file
diff --git a/app/frontend/tests/unit/fixtures/roles.json b/app/frontend/tests/unit/fixtures/roles.json
new file mode 100644
index 000000000..a1c738678
--- /dev/null
+++ b/app/frontend/tests/unit/fixtures/roles.json
@@ -0,0 +1,504 @@
+[
+  {
+    "code": "submission_approver",
+    "display": "Approver",
+    "active": true,
+    "description": "Can review all form submissions but can't edit the submission.",
+    "createdBy": "migration-045",
+    "createdAt": "2024-04-30T21:06:09.175Z",
+    "updatedBy": null,
+    "updatedAt": "2024-04-30T21:06:09.175Z",
+    "permissions": [
+      {
+        "code": "form_read",
+        "display": "Form Read",
+        "active": true,
+        "description": "Can view the form (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_read",
+        "display": "Submission Read",
+        "active": true,
+        "description": "Can view (all) form submissions (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_review",
+        "display": "Submission Review",
+        "active": true,
+        "description": "Can add/read notes and update the status of a submission.",
+        "createdBy": "migration-045",
+        "createdAt": "2024-04-30T21:06:09.175Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T21:06:09.175Z"
+      },
+      {
+        "code": "team_read",
+        "display": "Team Read",
+        "active": true,
+        "description": "Can view the team members (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      }
+    ]
+  },
+  {
+    "code": "form_designer",
+    "display": "Form Designer",
+    "active": true,
+    "description": "Designs the form",
+    "createdBy": "migration-002",
+    "createdAt": "2024-04-30T04:43:03.647Z",
+    "updatedBy": null,
+    "updatedAt": "2024-04-30T04:43:03.647Z",
+    "permissions": [
+      {
+        "code": "design_create",
+        "display": "Design Create",
+        "active": true,
+        "description": "Can create a form design",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_delete",
+        "display": "Design Delete",
+        "active": true,
+        "description": "Can delete the form design",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_read",
+        "display": "Design Read",
+        "active": true,
+        "description": "Can view the form design (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_update",
+        "display": "Design Update",
+        "active": true,
+        "description": "Can edit/update the form design",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_read",
+        "display": "Form Read",
+        "active": true,
+        "description": "Can view the form (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      }
+    ]
+  },
+  {
+    "code": "owner",
+    "display": "Owner",
+    "active": true,
+    "description": "Owns the form",
+    "createdBy": "migration-002",
+    "createdAt": "2024-04-30T04:43:03.647Z",
+    "updatedBy": null,
+    "updatedAt": "2024-04-30T04:43:03.647Z",
+    "permissions": [
+      {
+        "code": "form_api_create",
+        "display": "API Key Create",
+        "active": true,
+        "description": "Can create an api key for a form",
+        "createdBy": "migration-019",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_api_delete",
+        "display": "API Key Delete",
+        "active": true,
+        "description": "Can remove the API key from a form",
+        "createdBy": "migration-019",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_api_read",
+        "display": "API Key Read",
+        "active": true,
+        "description": "Can view the API key for a form (unencrypted)",
+        "createdBy": "migration-019",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_api_update",
+        "display": "API Key Update",
+        "active": true,
+        "description": "Can update the API key for a form",
+        "createdBy": "migration-019",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_create",
+        "display": "Design Create",
+        "active": true,
+        "description": "Can create a form design",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_delete",
+        "display": "Design Delete",
+        "active": true,
+        "description": "Can delete the form design",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_read",
+        "display": "Design Read",
+        "active": true,
+        "description": "Can view the form design (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "design_update",
+        "display": "Design Update",
+        "active": true,
+        "description": "Can edit/update the form design",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "document_template_create",
+        "display": "Document Template Create",
+        "active": true,
+        "description": "Can create document templates for a form",
+        "createdBy": "migration-044",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "document_template_delete",
+        "display": "Document Template Delete",
+        "active": true,
+        "description": "Can delete document templates for a form",
+        "createdBy": "migration-044",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "document_template_read",
+        "display": "Document Template Read",
+        "active": true,
+        "description": "Can view document templates for a form",
+        "createdBy": "migration-044",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "email_template_read",
+        "display": "Email Template Read",
+        "active": true,
+        "description": "Can view the email templates for a form",
+        "createdBy": "migration-036",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "email_template_update",
+        "display": "Email Template Update",
+        "active": true,
+        "description": "Can update the email templates for a form",
+        "createdBy": "migration-036",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_delete",
+        "display": "Form Delete",
+        "active": true,
+        "description": "Can delete the form",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_read",
+        "display": "Form Read",
+        "active": true,
+        "description": "Can view the form (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "form_update",
+        "display": "Form Update",
+        "active": true,
+        "description": "Can edit/update the basic form metadata (not the design)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_create",
+        "display": "Submission Create",
+        "active": true,
+        "description": "Can fill out and submit this form",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_delete",
+        "display": "Submission Delete",
+        "active": true,
+        "description": "Can delete form submissions",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_read",
+        "display": "Submission Read",
+        "active": true,
+        "description": "Can view (all) form submissions (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_review",
+        "display": "Submission Review",
+        "active": true,
+        "description": "Can add/read notes and update the status of a submission.",
+        "createdBy": "migration-045",
+        "createdAt": "2024-04-30T21:06:09.175Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T21:06:09.175Z"
+      },
+      {
+        "code": "submission_update",
+        "display": "Submission Update",
+        "active": true,
+        "description": "Can edit/update form submissions",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "team_read",
+        "display": "Team Read",
+        "active": true,
+        "description": "Can view the team members (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "team_update",
+        "display": "Team Update",
+        "active": true,
+        "description": "Can update the team members (add, remove)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      }
+    ]
+  },
+  {
+    "code": "submission_reviewer",
+    "display": "Reviewer",
+    "active": true,
+    "description": "Can review and manage all form submissions",
+    "createdBy": "migration-002",
+    "createdAt": "2024-04-30T04:43:03.647Z",
+    "updatedBy": null,
+    "updatedAt": "2024-04-30T04:43:03.647Z",
+    "permissions": [
+      {
+        "code": "form_read",
+        "display": "Form Read",
+        "active": true,
+        "description": "Can view the form (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_delete",
+        "display": "Submission Delete",
+        "active": true,
+        "description": "Can delete form submissions",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_read",
+        "display": "Submission Read",
+        "active": true,
+        "description": "Can view (all) form submissions (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_review",
+        "display": "Submission Review",
+        "active": true,
+        "description": "Can add/read notes and update the status of a submission.",
+        "createdBy": "migration-045",
+        "createdAt": "2024-04-30T21:06:09.175Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T21:06:09.175Z"
+      },
+      {
+        "code": "submission_update",
+        "display": "Submission Update",
+        "active": true,
+        "description": "Can edit/update form submissions",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "team_read",
+        "display": "Team Read",
+        "active": true,
+        "description": "Can view the team members (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      }
+    ]
+  },
+  {
+    "code": "form_submitter",
+    "display": "Submitter",
+    "active": true,
+    "description": "Can fill out and submit the form",
+    "createdBy": "migration-002",
+    "createdAt": "2024-04-30T04:43:03.647Z",
+    "updatedBy": null,
+    "updatedAt": "2024-04-30T04:43:03.647Z",
+    "permissions": [
+      {
+        "code": "form_read",
+        "display": "Form Read",
+        "active": true,
+        "description": "Can view the form (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "submission_create",
+        "display": "Submission Create",
+        "active": true,
+        "description": "Can fill out and submit this form",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      }
+    ]
+  },
+  {
+    "code": "team_manager",
+    "display": "Team Manager",
+    "active": true,
+    "description": "Manages Team members for the form",
+    "createdBy": "migration-002",
+    "createdAt": "2024-04-30T04:43:03.647Z",
+    "updatedBy": null,
+    "updatedAt": "2024-04-30T04:43:03.647Z",
+    "permissions": [
+      {
+        "code": "form_read",
+        "display": "Form Read",
+        "active": true,
+        "description": "Can view the form (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "team_read",
+        "display": "Team Read",
+        "active": true,
+        "description": "Can view the team members (read-only)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      },
+      {
+        "code": "team_update",
+        "display": "Team Update",
+        "active": true,
+        "description": "Can update the team members (add, remove)",
+        "createdBy": "migration-002",
+        "createdAt": "2024-04-30T04:43:03.647Z",
+        "updatedBy": null,
+        "updatedAt": "2024-04-30T04:43:03.647Z"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/app/frontend/tests/unit/setup.js b/app/frontend/tests/unit/setup.js
index 6ab1d3ea4..d2061f6a7 100644
--- a/app/frontend/tests/unit/setup.js
+++ b/app/frontend/tests/unit/setup.js
@@ -1,3 +1,5 @@
+import 'vitest-canvas-mock';
+
 class ResizeObserverStub {
   observe() {}
   unobserve() {}
diff --git a/app/frontend/tests/unit/views/form/Create.spec.js b/app/frontend/tests/unit/views/form/Create.spec.js
index eeeb27018..baf063a73 100644
--- a/app/frontend/tests/unit/views/form/Create.spec.js
+++ b/app/frontend/tests/unit/views/form/Create.spec.js
@@ -51,6 +51,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
@@ -120,6 +124,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
@@ -179,6 +187,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
@@ -243,6 +255,10 @@ describe('Create.vue', () => {
             name: 'BasePanel',
             template: '<div class="base-panel-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
           FormDisclaimer: true,
           FormDesigner: {
             name: 'FormDesigner',
diff --git a/app/frontend/tests/unit/views/form/Design.spec.js b/app/frontend/tests/unit/views/form/Design.spec.js
index 6f516e6b6..60a8ee1fa 100644
--- a/app/frontend/tests/unit/views/form/Design.spec.js
+++ b/app/frontend/tests/unit/views/form/Design.spec.js
@@ -5,7 +5,6 @@ import { createTestingPinia } from '@pinia/testing';
 import { mount } from '@vue/test-utils';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ref } from 'vue';
 
 import { useFormStore } from '~/store/form';
 import Design from '~/views/form/Design.vue';
@@ -44,6 +43,10 @@ describe('Design.vue', () => {
             },
             template: '<div class="form-designer-stub"><slot /></div>',
           },
+          BaseSecure: {
+            name: 'BaseSecure',
+            template: '<div class="base-secure-stub"><slot /></div>',
+          },
         },
       },
     });
diff --git a/app/frontend/vite.config.mjs b/app/frontend/vite.config.mjs
index 2ef3f63f9..baab82126 100644
--- a/app/frontend/vite.config.mjs
+++ b/app/frontend/vite.config.mjs
@@ -3,6 +3,7 @@ import { resolve } from 'path';
 import { defineConfig, loadEnv } from 'vite';
 import eslint from 'vite-plugin-eslint';
 import vuetify from 'vite-plugin-vuetify';
+import { defineConfig as vitestDefineConfig } from 'vitest/config';
 
 const proxyObject = {
   target: 'http://localhost:8080',
@@ -59,11 +60,14 @@ export default defineConfig(({ command, mode }) => {
       ],
       environmentOptions: {
         url: 'http://localhost/',
+        jsdom: {
+          resources: 'usable',
+        },
       },
       globals: true,
       environment: 'jsdom',
       deps: {
-        inline: ['vuetify', 'i18n'],
+        inline: ['vuetify', 'i18n', 'vitest-canvas-mock'],
       },
     },
   };