fix(ui): make session recording switch reactive

Author: luizhf42

ui/src/components/Setting/SettingSessionRecording.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted } from "vue";
 import hasPermission from "@/utils/permission";
 import { actions, authorizer } from "@/authorizer";
 import { useStore } from "@/store";
@@ -23,11 +23,10 @@ const props = defineProps({
     default: false,
   },
 });
-const store = useStore();
 
-const sessionRecordingStatus = ref(store.getters["sessionRecording/getStatus"]);
+const store = useStore();
 
-watch(sessionRecordingStatus, async (value: boolean) => {
+const updateSessionRecordingStatus = async (value: boolean) => {
   const data = {
     id: localStorage.getItem("tenant"),
     status: value,
@@ -42,6 +41,13 @@ watch(sessionRecordingStatus, async (value: boolean) => {
     store.dispatch("snackbar/showSnackbarErrorDefault");
     handleError(error);
   }
+};
+
+const sessionRecordingStatus = computed({
+  get: () => store.getters["sessionRecording/isEnabled"],
+  set: async (value: boolean) => {
+    updateSessionRecordingStatus(value);
+  },
 });
 
 const hasAuthorization = computed(() => {
@@ -65,5 +71,6 @@ onMounted(async () => {
     handleError(error);
   }
 });
+
 defineExpose({ sessionRecordingStatus });
 </script>

ui/tests/components/Setting/SettingSessionRecording.spec.ts

@@ -1,5 +1,5 @@
 import { createVuetify } from "vuetify";
-import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import MockAdapter from "axios-mock-adapter";
 import SettingSessionRecording from "@/components/Setting/SettingSessionRecording.vue";
@@ -54,10 +54,8 @@ describe("Setting Session Recording", () => {
   it("Changes status in store when ref is mutated", async () => {
     mockUser.onPut("http://localhost:3000/api/users/security/fake-tenant-data").reply(200);
 
-    wrapper.vm.sessionRecordingStatus = false;
-
     const dispatchSpy = vi.spyOn(store, "dispatch");
-    await flushPromises();
+    wrapper.vm.sessionRecordingStatus = false;
 
     expect(dispatchSpy).toHaveBeenCalledWith("sessionRecording/setStatus", { id: "fake-tenant-data", status: false });
   });

ui/tests/components/Setting/__snapshots__/SettingNamespace.spec.ts.snap

@@ -170,16 +170,16 @@ exports[`Setting Namespace > Renders the component 1`] = `
             <!----><span class="v-card__underlay"></span>
           </div>
           <div data-v-80a16399="" class="v-col d-flex align-center justify-end bg-background">
-            <div data-v-80a16399="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-switch v-switch--inset" data-test="session-recording-setting-component">
+            <div data-v-80a16399="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-switch v-switch--inset" data-test="session-recording-setting-component">
               <!---->
               <div class="v-input__control">
-                <div class="v-selection-control v-selection-control--density-default">
-                  <div class="v-selection-control__wrapper">
-                    <div class="v-switch__track">
+                <div class="v-selection-control v-selection-control--dirty v-selection-control--density-default">
+                  <div class="v-selection-control__wrapper text-primary">
+                    <div class="v-switch__track bg-primary">
                       <!---->
                       <!---->
                     </div>
-                    <div class="v-selection-control__input"><input id="switch-v-6" aria-disabled="false" type="checkbox" aria-describedby="switch-v-6-messages" value="true">
+                    <div class="v-selection-control__input"><input checked="" id="switch-v-6" aria-disabled="false" type="checkbox" aria-describedby="switch-v-6-messages" value="true">
                       <div class="v-switch__thumb">
                         <transition-stub name="scale-transition" appear="false" persisted="false" css="true">
                           <!---->

ui/tests/components/Setting/__snapshots__/SettingSessionRecording.spec.ts.snap

@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Setting Session Recording > Renders the component 1`] = `
-"<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--disabled v-switch v-switch--inset" data-test="session-recording-switch">
+"<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-input--disabled v-switch v-switch--inset" data-test="session-recording-switch">
   <!---->
   <div class="v-input__control">
-    <div class="v-selection-control v-selection-control--disabled v-selection-control--density-default">
+    <div class="v-selection-control v-selection-control--dirty v-selection-control--disabled v-selection-control--density-default">
       <div class="v-selection-control__wrapper">
         <div class="v-switch__track">
           <!---->
           <!---->
         </div>
-        <div class="v-selection-control__input"><input disabled="" id="switch-v-0" aria-disabled="true" type="checkbox" aria-describedby="switch-v-0-messages" value="true">
+        <div class="v-selection-control__input"><input checked="" disabled="" id="switch-v-0" aria-disabled="true" type="checkbox" aria-describedby="switch-v-0-messages" value="true">
           <div class="v-switch__thumb">
             <transition-stub name="scale-transition" appear="false" persisted="false" css="true">
               <!---->