refactor(ui): refactor new Snackbar component

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/src/store/modules/snackbar.ts

@@ -47,19 +47,6 @@ export const snackbar: Module<SnackbarState, State> = {
       state.snackbarSuccess = true;
     },
 
-    setSnackbarNoContent: (state, data) => {
-      state.snackbarMessageAndContentType = data;
-      state.snackbarSuccess = true;
-    },
-
-    setSnackbarSuccessDefault: (state) => {
-      state.snackbarMessageAndContentType = {
-        typeMessage: "default",
-        typeContent: "",
-      };
-      state.snackbarSuccess = true;
-    },
-
     unsetSnackbarSuccess: (state) => {
       state.snackbarSuccess = false;
     },
@@ -82,11 +69,6 @@ export const snackbar: Module<SnackbarState, State> = {
       state.snackbarError = true;
     },
 
-    setSnackbarErrorLicense: (state, data) => {
-      state.snackbarMessageAndContentType = data;
-      state.snackbarError = true;
-    },
-
     unsetSnackbarError: (state) => {
       state.snackbarError = false;
     },
@@ -99,11 +81,6 @@ export const snackbar: Module<SnackbarState, State> = {
       state.snackbarCopy = true;
     },
 
-    setSnackbarErrorIncorrect: (state, data) => {
-      state.snackbarMessageAndContentType = data;
-      state.snackbarError = true;
-    },
-
     unsetSnackbarCopy: (state) => {
       state.snackbarCopy = false;
     },
@@ -118,10 +95,6 @@ export const snackbar: Module<SnackbarState, State> = {
       commit("setSnackbarSuccessAction", data);
     },
 
-    showSnackbarSuccessDefault: ({ commit }) => {
-      commit("setSnackbarSuccessDefault");
-    },
-
     unsetShowStatusSnackbarSuccess: ({ commit }) => {
       commit("unsetSnackbarSuccess");
     },
@@ -142,14 +115,6 @@ export const snackbar: Module<SnackbarState, State> = {
       commit("setSnackbarErrorLoadingOrAction", data);
     },
 
-    showSnackbarNoContent: ({ commit }) => {
-      const data = {
-        typeMessage: "no-content",
-        typeContent: "",
-      };
-      commit("setSnackbarNoContent", data);
-    },
-
     showSnackbarErrorAction: ({ commit }, value) => {
       const data = {
         typeMessage: "action",
@@ -158,14 +123,6 @@ export const snackbar: Module<SnackbarState, State> = {
       commit("setSnackbarErrorLoadingOrAction", data);
     },
 
-    showSnackbarErrorLicense: ({ commit }, value) => {
-      const data = {
-        typeMessage: "licenseRequired",
-        typeContent: value,
-      };
-      commit("setSnackbarErrorLicense", data);
-    },
-
     showSnackbarErrorDefault: ({ commit }) => {
       commit("setSnackbarErrorDefault");
     },
@@ -181,13 +138,5 @@ export const snackbar: Module<SnackbarState, State> = {
     unsetShowStatusSnackbarCopy: ({ commit }) => {
       commit("unsetSnackbarCopy");
     },
-
-    showSnackbarErrorIncorrect: (context, value) => {
-      const data = {
-        typeMessage: "incorrect",
-        typeContent: value,
-      };
-      context.commit("setSnackbarErrorIncorrect", data);
-    },
   },
 };

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;">