refactor(ui): update new Snackbar implementation

This commit updates the new Snackbar implementation, based on a plugin.
The new component, the plugin, and its helper were updated.
The component was added to `AppLayout.vue`, along with the old Snackbar.

Author: luizhf42

ui/src/components/Snackbar/SnackbarNew.vue

@@ -3,27 +3,20 @@
     v-model="show"
     location="top"
     :timeout="4000"
-    :color="type"
-    ransition="slide-x-transition"
+    :color="color"
+    transition="slide-x-transition"
   >
-    {{ message }}
+    <p class="w-100 text-center">{{ message }}</p>
   </v-snackbar>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { useStore } from "@/store";
+import { computed } from "vue";
+import { plugin } from "@/plugins/snackbar";
 
-const store = useStore();
-const show = ref(false);
-const message = ref("");
-const type = ref("");
+const show = computed(() => plugin.getShow());
 
-store.subscribe((mutation, state) => {
-  if (mutation.type === "snackbar/showMessage") {
-    message.value = state.snackbar.message;
-    type.value = state.snackbar.type;
-    show.value = true;
-  }
-});
+const message = computed(() => plugin.getMessage());
+const type = computed(() => plugin.getType());
+const color = computed(() => type.value);
 </script>

ui/src/helpers/snackbar.ts

@@ -1,8 +1,6 @@
 import { inject } from "vue";
-import { PluginInterface, InjectionKey } from "@/plugins/snackbar";
+import { InjectionKey, type ISnackbarPlugin } from "@/plugins/snackbar";
 
-function useSnackbar(): PluginInterface {
-  return inject(InjectionKey) as PluginInterface;
-}
+const useSnackbar = (): ISnackbarPlugin => inject(InjectionKey) as ISnackbarPlugin;
 
 export default useSnackbar;

ui/src/layouts/AppLayout.vue

@@ -118,6 +118,7 @@
     </v-navigation-drawer>
 
     <Snackbar />
+    <SnackbarNew />
 
     <AppBar v-model="showNavigationDrawer" data-test="app-bar" />
 
@@ -164,6 +165,7 @@ import Namespace from "@/components/Namespace/Namespace.vue";
 import AppBar from "../components/AppBar/AppBar.vue";
 import QuickConnection from "../components/QuickConnection/QuickConnection.vue";
 import NamespaceAdd from "@/components/Namespace/NamespaceAdd.vue";
+import SnackbarNew from "@/components/Snackbar/SnackbarNew.vue";
 import Snackbar from "@/components/Snackbar/Snackbar.vue";
 
 const router = useRouter();

ui/src/plugins/snackbar.ts

@@ -1,35 +1,56 @@
-import { App, Plugin } from "vue";
+import { App, Plugin, reactive } from "vue";
 
-const InjectionKey = "snackbar";
+const InjectionKey = Symbol("snackbar");
 
-interface PluginInterface {
-  showInfo(message: string);
-  showSuccess(message: string);
-  showWarning(message: string);
-  showError(message: string);
+type SnackbarType = "success" | "error" | "info" | "warning";
+
+interface SnackbarState {
+  message: string;
+  type: SnackbarType;
+  show: boolean;
+}
+
+interface ISnackbarPlugin {
+  showSuccess: (msg: string) => void;
+  showError: (msg: string) => void;
+  showInfo: (msg: string) => void;
+  showWarning: (msg: string) => void;
+  getMessage: () => string;
+  getType: () => SnackbarType;
+  getShow: () => boolean;
 }
 
+const state = reactive<SnackbarState>({
+  message: "",
+  type: "info",
+  show: false,
+});
+
+const showSnackbar = (type: SnackbarType, message: string) => {
+  state.message = message;
+  state.type = type;
+  state.show = true;
+
+  setTimeout(() => {
+    state.show = false;
+  }, 4000);
+};
+
+const plugin: ISnackbarPlugin = {
+  showSuccess: (msg: string) => showSnackbar("success", msg),
+  showError: (msg: string) => showSnackbar("error", msg),
+  showInfo: (msg: string) => showSnackbar("info", msg),
+  showWarning: (msg: string) => showSnackbar("warning", msg),
+  getMessage: () => state.message,
+  getType: () => state.type,
+  getShow: () => state.show,
+};
+
 const SnackbarPlugin: Plugin = {
   install(app: App) {
-    const store = app.config.globalProperties.$store;
-
-    const plugin = {
-      showInfo(message: string) {
-        store.commit("snackbar/showMessage", { type: "info", message });
-      },
-      showSuccess(message: string) {
-        store.commit("snackbar/showMessage", { type: "success", message });
-      },
-      showWarning(message: string) {
-        store.commit("snackbar/showMessage", { type: "warning", message });
-      },
-      showError(message: string) {
-        store.commit("snackbar/showMessage", { type: "error", message });
-      },
-    } as PluginInterface;
-
     app.provide(InjectionKey, plugin);
   },
 };
 
-export { InjectionKey, type PluginInterface, SnackbarPlugin };
+export { SnackbarPlugin, InjectionKey, plugin };
+export type { SnackbarState, ISnackbarPlugin };

ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap

@@ -246,6 +246,8 @@ exports[`App Layout Component > Renders the component 1`] = `
     <!---->
     <!---->
     <!---->
+    <!---->
+    <!---->
     <header class="v-toolbar v-toolbar--flat v-toolbar--floating v-toolbar--density-default v-theme--dark v-locale--is-ltr v-app-bar bg-background border-b-thin" style="top: 0px; z-index: 1004; transform: translateY(0px); position: fixed; transition: none; left: 0px; width: calc(100% - 0px - 0px);" data-test="app-bar">
       <!---->
       <div class="v-toolbar__content" style="height: 64px;">