refactor(ui): refactor session recording store

Author: luizhf42

ui/src/components/Setting/SettingNamespace.vue

@@ -145,7 +145,10 @@
               </template>
             </v-card>
             <v-col class="d-flex align-center justify-end bg-background">
-              <SettingSecurity :hasTenant="hasTenant()" data-test="security-setting-component" />
+              <SettingSessionRecording
+                :hasTenant="hasTenant()"
+                data-test="session-recording-setting-component"
+              />
             </v-col>
           </v-row>
           <v-divider />
@@ -187,7 +190,7 @@ import { useField } from "vee-validate";
 import hasPermission from "@/utils/permission";
 import { actions, authorizer } from "@/authorizer";
 import { useStore } from "@/store";
-import SettingSecurity from "./SettingSecurity.vue";
+import SettingSessionRecording from "./SettingSessionRecording.vue";
 import NamespaceDelete from "../Namespace/NamespaceDelete.vue";
 import NamespaceEdit from "../Namespace/NamespaceEdit.vue";
 import {

…c/components/Setting/SettingSecurity.vue …ents/Setting/SettingSessionRecording.vueui/src/components/Setting/SettingSecurity.vue renamed to ui/src/components/Setting/SettingSessionRecording.vue ui/src/components/Setting/SettingSecurity.vue renamed to ui/src/components/Setting/SettingSessionRecording.vue

@@ -2,10 +2,10 @@
   <v-switch
     hide-details
     inset
-    v-model="sessionRecord"
+    v-model="sessionRecordingStatus"
     :disabled="!hasAuthorization"
     color="primary"
-    data-test="security-switch"
+    data-test="session-recording-switch"
   />
 </template>
 
@@ -25,15 +25,15 @@ const props = defineProps({
 });
 const store = useStore();
 
-const sessionRecord = ref(store.getters["security/get"]);
+const sessionRecordingStatus = ref(store.getters["sessionRecording/getStatus"]);
 
-watch(sessionRecord, async (value: boolean) => {
+watch(sessionRecordingStatus, async (value: boolean) => {
   const data = {
     id: localStorage.getItem("tenant"),
     status: value,
   };
   try {
-    await store.dispatch("security/set", data);
+    await store.dispatch("sessionRecording/setStatus", data);
     store.dispatch(
       "snackbar/showSnackbarSuccessAction",
       INotificationsSuccess.namespaceEdit,
@@ -58,12 +58,12 @@ const hasAuthorization = computed(() => {
 onMounted(async () => {
   try {
     if (props.hasTenant) {
-      await store.dispatch("security/get");
+      await store.dispatch("sessionRecording/getStatus");
     }
   } catch (error: unknown) {
     store.dispatch("snackbar/showSnackbarErrorDefault");
     handleError(error);
   }
 });
-defineExpose({ sessionRecord });
+defineExpose({ sessionRecordingStatus });
 </script>

ui/src/store/api/users.ts

@@ -16,7 +16,10 @@ export const postRecoverPassword = async (username: string) => usersApi.recoverP
 
 export const postValidationAccount = async (data: IUser) => usersApi.getValidateAccount(data.email, data.token);
 
-export const setSessionRecordStatus = async (data: IUserPutSecurity) => usersApi.setSessionRecord(data.id, { session_record: data.status });
+export const setSessionRecordStatus = async (data: IUserPutSessionRecording) => usersApi.setSessionRecord(
+  data.id,
+  { session_record: data.status },
+);
 
 export const getSessionRecordStatus = async () => usersApi.checkSessionRecord();
 

ui/src/store/index.ts

@@ -11,7 +11,7 @@ import { support, SupportState } from "./modules/support";
 import { spinner, SpinnerState } from "./modules/spinner";
 import { snackbar, SnackbarState } from "./modules/snackbar";
 import { sessions, SessionsState } from "./modules/sessions";
-import { security, SecurityState } from "./modules/security";
+import { sessionRecording, SessionRecordingState } from "./modules/session_recording";
 import { publicKeys, PublicKeysState } from "./modules/public_keys";
 import { privateKey, PrivateKeyState } from "./modules/private_key";
 import { notifications, NotificationsState } from "./modules/notifications";
@@ -43,7 +43,7 @@ export interface State {
   notifications: NotificationsState;
   privateKey: PrivateKeyState;
   publicKeys: PublicKeysState;
-  security: SecurityState;
+  sessionRecording: SessionRecordingState;
   sessions: SessionsState;
   snackbar: SnackbarState;
   spinner: SpinnerState;
@@ -73,7 +73,7 @@ export const store = createStore<State>({
     notifications,
     privateKey,
     publicKeys,
-    security,
+    sessionRecording,
     sessions,
     snackbar,
     spinner,

ui/src/store/modules/security.ts

@@ -0,0 +1,36 @@
+import { Module } from "vuex";
+import * as usersApi from "../api/users";
+import { State } from "..";
+
+export interface SessionRecordingState {
+  enabled: boolean,
+}
+
+export const sessionRecording: Module<SessionRecordingState, State> = {
+  namespaced: true,
+  state: {
+    enabled: true,
+  },
+
+  getters: {
+    isEnabled: (state) => state.enabled,
+  },
+
+  mutations: {
+    setEnabled: (state, status) => {
+      state.enabled = status;
+    },
+  },
+
+  actions: {
+    async setStatus(context, data) {
+      await usersApi.setSessionRecordStatus(data);
+      context.commit("setEnabled", data.status);
+    },
+
+    async getStatus(context) {
+      const res = await usersApi.getSessionRecordStatus();
+      context.commit("setEnabled", res.data);
+    },
+  },
+};

ui/src/store/modules/session_recording.ts

@@ -3,7 +3,7 @@ import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import MockAdapter from "axios-mock-adapter";
 import SettingNamespace from "@/components/Setting/SettingNamespace.vue";
-import { namespacesApi, usersApi, apiKeysApi } from "@/api/http";
+import { namespacesApi, usersApi } from "@/api/http";
 import { store, key } from "@/store";
 import { router } from "@/router";
 import { envVariables } from "@/envVariables";
@@ -17,11 +17,8 @@ describe("Setting Namespace", () => {
   const vuetify = createVuetify();
 
   let mockNamespace: MockAdapter;
-
   let mockUser: MockAdapter;
 
-  let mockApiKeys: MockAdapter;
-
   const members = [
     {
       id: "507f1f77bcf86cd799439011",
@@ -61,25 +58,6 @@ describe("Setting Namespace", () => {
     },
   };
 
-  const session = true;
-
-  const getKeyResponse = [
-    {
-      id: "3e5a5194-9dec-4a32-98db-7434c6d49df1",
-      tenant_id: "fake-tenant",
-      user_id: "507f1f77bcf86cd799439011",
-      name: "my api key",
-      expires_in: 1707958989,
-    },
-    {
-      id: "3e5a5194-9dec-4a32-98db-7434c6d49df2",
-      tenant_id: "fake-tenant",
-      user_id: "507f1f77bcf86cd799439011",
-      name: "my api key",
-      expires_in: 1707958989,
-    },
-  ];
-
   beforeEach(async () => {
     window.matchMedia = vi.fn().mockImplementation((query) => ({
       matches: false,
@@ -98,19 +76,13 @@ describe("Setting Namespace", () => {
 
     mockNamespace = new MockAdapter(namespacesApi.getAxios());
     mockUser = new MockAdapter(usersApi.getAxios());
-    mockApiKeys = new MockAdapter(apiKeysApi.getAxios());
 
     mockNamespace.onGet("http://localhost:3000/api/namespaces/fake-tenant").reply(200, namespaceData);
     mockUser.onGet("http://localhost:3000/api/users/security").reply(200, session);
     mockUser.onGet("http://localhost:3000/api/auth/user").reply(200, authData);
-    mockUser.onGet("http://localhost:3000/api/auth/user").reply(200, authData);
-    mockApiKeys.onGet("http://localhost:3000/api/namespaces/fake-tenant/api-key").reply(200, getKeyResponse, { "x-total-count": 2 });
 
     store.commit("auth/authSuccess", authData);
-    store.commit("auth/changeData", authData);
     store.commit("namespaces/setNamespace", namespaceData);
-    store.commit("security/setSecurity", session);
-    store.commit("apiKeys/setKeyList", { data: getKeyResponse, headers: { "x-total-count": 2 } });
 
     wrapper = mount(SettingNamespace, {
       global: {
@@ -154,7 +126,7 @@ describe("Setting Namespace", () => {
     "record-icon",
     "record-title",
     "record-description",
-    "security-setting-component",
+    "session-recording-setting-component",
     "delete-leave-item",
     "delete-leave-icon",
     "delete-leave-title",