refactor(ui): migrate components and views to use new Snackbar

ui/src/components/Account/AccountCreated.vue

@@ -39,9 +39,9 @@
 <script setup lang="ts">
 import { computed, PropType, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { INotificationsSuccess } from "@/interfaces/INotifications";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
 
 const props = defineProps({
   messageKind: {
@@ -62,6 +62,7 @@ const emit = defineEmits(["show"]);
 const store = useStore();
 const router = useRouter();
 const route = useRoute();
+const snackbar = useSnackbar();
 
 const token = computed(() => store.getters["users/getSignToken"]);
 
@@ -78,9 +79,9 @@ const buttonDataTest = computed(() => (isNormalMessage.value ? "resendEmail-btn"
 const resendEmail = async () => {
   try {
     await store.dispatch("users/resendEmail", props.username);
-    store.dispatch("snackbar/showSnackbarSuccessAction", INotificationsSuccess.resendEmail);
+    snackbar.showSuccess("Email successfully sent.");
   } catch (error) {
-    store.dispatch("snackbar/showSnackbarErrorDefault");
+    snackbar.showError("Failed to send email.");
     handleError(error);
   }
 };

ui/src/components/AppBar/Notifications/Notification.vue

@@ -111,11 +111,12 @@ import axios, { AxiosError } from "axios";
 import { useStore } from "@/store";
 import { authorizer, actions } from "@/authorizer";
 import hasPermission from "@/utils/permission";
-import { INotificationsError } from "@/interfaces/INotifications";
 import DeviceActionButton from "@/components/Devices/DeviceActionButton.vue";
 import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
 
 const store = useStore();
+const snackbar = useSnackbar();
 defineProps({
   style: {
     type: [String, Object],
@@ -180,23 +181,17 @@ const getNotifications = async () => {
             break;
           }
           case axiosError.response?.status === 403: {
-            store.dispatch("snackbar/showSnackbarErrorAssociation");
+            snackbar.showError("You don't have permission to view notifications.");
             handleError(error);
             break;
           }
           default: {
-            store.dispatch(
-              "snackbar/showSnackbarErrorLoading",
-              INotificationsError.notificationList,
-            );
+            snackbar.showError("Failed to load notifications.");
             handleError(error);
           }
         }
       } else {
-        store.dispatch(
-          "snackbar/showSnackbarErrorLoading",
-          INotificationsError.notificationList,
-        );
+        snackbar.showError("Failed to load notifications.");
         handleError(error);
       }
     }

ui/src/components/AuthMFA/MfaDisable.vue

@@ -165,9 +165,10 @@ import axios, { AxiosError } from "axios";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import Logo from "@/assets/logo-inverted.png";
-import { INotificationsSuccess } from "@/interfaces/INotifications";
+import useSnackbar from "@/helpers/snackbar";
 
 const store = useStore();
+const snackbar = useSnackbar();
 const verificationCode = ref("");
 const recoveryCode = ref("");
 const el = ref<number>(1);
@@ -188,10 +189,7 @@ const mfaValidate = async () => {
       default:
         break;
     }
-    store.dispatch(
-      "snackbar/showSnackbarSuccessAction",
-      INotificationsSuccess.cancelMfa,
-    );
+    snackbar.showSuccess("MFA disabled successfully.");
     showDialog.value = false;
   } catch (error) {
     if (axios.isAxiosError(error)) {

ui/src/components/AuthMFA/MfaForceRecoveryMail.vue

@@ -56,11 +56,12 @@ import { useField } from "vee-validate";
 import { computed, ref } from "vue";
 import axios, { AxiosError } from "axios";
 import { useStore } from "@/store";
-import { INotificationsSuccess } from "@/interfaces/INotifications";
 import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
 
 const dialog = ref(false);
 const store = useStore();
+const snackbar = useSnackbar();
 const email = computed(() => store.getters["auth/email"]);
 const {
   value: recoveryEmail,
@@ -91,10 +92,7 @@ const updateUserData = async () => {
   try {
     await store.dispatch("users/patchData", data);
     store.dispatch("auth/changeUserData", data);
-    store.dispatch(
-      "snackbar/showSnackbarSuccessAction",
-      INotificationsSuccess.profileData,
-    );
+    snackbar.showSuccess("Recovery email updated successfully.");
   } catch (error) {
     if (axios.isAxiosError(error)) {
       const axiosError = error as AxiosError;

ui/src/components/AuthMFA/MfaSettings.vue

@@ -255,9 +255,10 @@ import axios, { AxiosError } from "axios";
 import { useClipboard } from "@vueuse/core";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
-import { INotificationsCopy, INotificationsSuccess } from "@/interfaces/INotifications";
+import useSnackbar from "@/helpers/snackbar";
 
 const store = useStore();
+const snackbar = useSnackbar();
 const el = ref<number>(1);
 const emit = defineEmits(["enabled", "resetForm"]);
 const showDialog = defineModel({ default: false });
@@ -300,10 +301,7 @@ const updateUserData = async () => {
   try {
     await store.dispatch("users/patchData", data);
     store.dispatch("auth/changeRecoveryEmail", data.recovery_email);
-    store.dispatch(
-      "snackbar/showSnackbarSuccessAction",
-      INotificationsSuccess.profileData,
-    );
+    snackbar.showSuccess("Recovery email updated successfully.");
     emit("resetForm");
   } catch (error) {
     if (axios.isAxiosError(error)) {
@@ -349,10 +347,7 @@ const copyRecoveryCodes = () => {
   const { copy } = useClipboard();
   copy(codesText);
 
-  store.dispatch(
-    "snackbar/showSnackbarCopy",
-    INotificationsCopy.recoveryCodes,
-  );
+  snackbar.showInfo("Recovery codes copied to clipboard.");
 };
 
 const downloadRecoveryCodes = () => {

ui/src/components/AuthMFA/RecoveryHelper.vue

@@ -97,15 +97,16 @@
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
-import { INotificationsSuccess } from "@/interfaces/INotifications";
 import useCountdown from "@/utils/countdownTimeout";
+import useSnackbar from "@/helpers/snackbar";
 
 const dialog = ref(false);
 const checkbox = ref(false);
 const invalid = reactive({ title: "", msg: "", timeout: false });
 const tokenCountdownAlert = ref(true);
 const isCountdownFinished = ref(false);
 const store = useStore();
+const snackbar = useSnackbar();
 const disableTimeout = computed(() => store.getters["auth/getDisableTokenTimeout"]);
 const recoveryCode = computed(() => store.getters["auth/stateRecoveryCode"]);
 const { startCountdown, countdown } = useCountdown();
@@ -124,16 +125,11 @@ watch(countdown, (newValue) => {
 const disableMFA = async () => {
   try {
     await store.dispatch("auth/disableMfa", { recovery_code: recoveryCode.value });
-    store.dispatch(
-      "snackbar/showSnackbarSuccessAction",
-      INotificationsSuccess.recoveryHelper,
-    );
+    snackbar.showSuccess("MFA disabled successfully.");
     store.commit("auth/accountRecoveryHelper");
     dialog.value = false;
   } catch (error) {
-    store.commit(
-      "snackbar/setSnackbarErrorDefault",
-    );
+    snackbar.showError("An error occurred while disabling MFA.");
     handleError(error);
   }
 };

ui/src/components/Box/BoxMessage.vue

@@ -52,8 +52,10 @@ import { useStore } from "@/store";
 import DeviceAdd from "../Devices/DeviceAdd.vue";
 import FirewallRuleAdd from "../firewall/FirewallRuleAdd.vue";
 import PublicKeyAdd from "../PublicKeys/PublicKeyAdd.vue";
-import { INotificationsError } from "@/interfaces/INotifications";
 import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
+
+const snackbar = useSnackbar();
 
 const items = {
   device: {
@@ -204,10 +206,7 @@ const refreshFirewallRule = async () => {
   try {
     await store.dispatch("firewallRules/refresh");
   } catch (error: unknown) {
-    store.dispatch(
-      "snackbar/showSnackbarErrorLoading",
-      INotificationsError.firewallRuleList,
-    );
+    snackbar.showError("Failed to refresh firewall rules list.");
     handleError(error);
   }
 };
@@ -216,10 +215,7 @@ const refreshPublicKey = async () => {
   try {
     await store.dispatch("publicKeys/refresh");
   } catch (error: unknown) {
-    store.dispatch(
-      "snackbar/showSnackbarErrorLoading",
-      INotificationsError.publicKeyList,
-    );
+    snackbar.showError("Failed to refresh public keys list.");
     handleError(error);
   }
 };

ui/src/components/Connector/ConnectorDelete.vue

@@ -46,12 +46,9 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import {
-  INotificationsError,
-  INotificationsSuccess,
-} from "@/interfaces/INotifications";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
 
 const props = defineProps({
   uid: {
@@ -67,20 +64,15 @@ const props = defineProps({
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
 const store = useStore();
+const snackbar = useSnackbar();
 const remove = async () => {
   try {
     await store.dispatch("connectors/remove", props.uid);
-    store.dispatch(
-      "snackbar/showSnackbarSuccessAction",
-      INotificationsSuccess.connectorDelete,
-    );
+    snackbar.showSuccess("Successfully removed connector.");
     showDialog.value = false;
     emit("update");
   } catch (error: unknown) {
-    store.dispatch(
-      "snackbar/showSnackbarErrorAction",
-      INotificationsError.connectorDelete,
-    );
+    snackbar.showError("Failed to remove connector.");
     handleError(error);
   }
 };

ui/src/components/Connector/ConnectorForm.vue

@@ -112,15 +112,12 @@ import * as yup from "yup";
 import { computed, ref, watch } from "vue";
 import { envVariables } from "@/envVariables";
 import { useStore } from "@/store";
-import {
-  INotificationsError,
-  INotificationsSuccess,
-} from "@/interfaces/INotifications";
 import { IConnectorPayload } from "@/interfaces/IConnector";
 import { parseCertificate, parsePrivateKeySsh } from "@/utils/validate";
 import hasPermission from "@/utils/permission";
 import { actions, authorizer } from "@/authorizer";
 import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
 
 const props = defineProps({
   isEditing: {
@@ -154,7 +151,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["update", "close"]);
-
+const snackbar = useSnackbar();
 const localDialog = ref(props.showDialog);
 
 watch(() => props.showDialog, (newValue) => {
@@ -344,18 +341,12 @@ const saveConnector = async () => {
   }
   try {
     await props.storeMethod(payload);
-    store.dispatch(
-      "snackbar/showSnackbarSuccessAction",
-      props.isEditing ? INotificationsSuccess.connectorEdit : INotificationsSuccess.connectorAdd,
-    );
+    snackbar.showSuccess(props.isEditing ? "Connector edited successfully" : "Connector added successfully");
     emit("update");
     emit("close");
     localDialog.value = false;
   } catch (error) {
-    store.dispatch(
-      "snackbar/showSnackbarErrorAction",
-      props.isEditing ? INotificationsError.connectorEdit : INotificationsError.connectorAdd,
-    );
+    snackbar.showError(props.isEditing ? "Failed to edit connector" : "Failed to add connector");
     handleError(error);
   }
 };