feat(ui): add tooltip to SessionPlay for not recorded sessions

ui/src/components/Sessions/SessionList.vue

@@ -18,22 +18,12 @@
       <template v-slot:rows>
         <tr v-for="(session, index) in sessions" :key="index">
           <td class="text-center">
-            <v-tooltip location="bottom" :disabled="hasAuthorizationPlay()">
-              <template v-slot:activator="{ props }">
-                <div v-bind="props">
-                  <SessionPlay
-                    :disabled="!session.authenticated || !session.recorded"
-                    :uid="session.uid"
-                    :device="session.device"
-                    :notHasAuthorization="!hasAuthorizationPlay()"
-                    :recorded="session.authenticated && session.recorded"
-                    @update="refreshSessions"
-                    data-test="sessionPlay-component"
-                  />
-                </div>
-              </template>
-              <span> You don't have this kind of authorization. </span>
-            </v-tooltip>
+            <SessionPlay
+              :authenticated="session.authenticated"
+              :uid="session.uid"
+              :recorded="session.recorded"
+              data-test="session-play-component"
+            />
           </td>
 
           <td class="text-center" v-if="session.device">
@@ -273,15 +263,6 @@ const hasAuthorizationRemoveRecord = () => {
 
   return false;
 };
-
-const hasAuthorizationPlay = () => {
-  const role = store.getters["auth/role"];
-  if (role !== "") {
-    return hasPermission(authorizer.role[role], actions.session.play);
-  }
-
-  return false;
-};
 </script>
 
 <style scoped>

ui/src/components/Sessions/SessionPlay.vue

@@ -1,16 +1,23 @@
 <template>
   <div>
-    <v-btn
-      color="primary"
-      prepend-icon="mdi-play"
-      variant="outlined"
-      density="comfortable"
-      data-test="connect-btn"
-      @click="openDialog"
-      :disabled="!isCommunity && props.disabled"
-    >
-      Play
-    </v-btn>
+    <v-tooltip location="bottom" :disabled="disableTooltip">
+      <template v-slot:activator="{ props }">
+        <div v-bind="props">
+          <v-btn
+            color="primary"
+            prepend-icon="mdi-play"
+            variant="outlined"
+            density="comfortable"
+            data-test="connect-btn"
+            @click="openDialog"
+            :disabled="!isCommunity && disabled"
+          >
+            Play
+          </v-btn>
+        </div>
+      </template>
+      <span>{{ tooltipMessage }}</span>
+    </v-tooltip>
 
     <v-dialog
       :transition="false"
@@ -37,36 +44,36 @@ import {
   computed,
   ref,
 } from "vue";
+import hasPermission from "@/utils/permission";
+import { actions, authorizer } from "@/authorizer";
 import { envVariables } from "@/envVariables";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import Player from "./Player.vue";
 import useSnackbar from "@/helpers/snackbar";
 
-const props = defineProps({
-  uid: {
-    type: String,
-    required: true,
-  },
-  recorded: {
-    type: Boolean,
-    required: true,
-  },
-  notHasAuthorization: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = defineProps<{
+  uid: string;
+  recorded: boolean;
+  authenticated: boolean;
+}>();
 
 const showDialog = ref(false);
 const store = useStore();
 const snackbar = useSnackbar();
+const disabled = computed(() => !props.recorded || !props.authenticated);
 const logs = ref<string | null>(null);
 const isCommunity = computed(() => envVariables.isCommunity);
+const tooltipMessage = computed(() => props.recorded
+  ? "You don't have permission to play this session."
+  : "This session was not recorded.");
+
+const hasAuthorizationToPlay = () => {
+  const role = store.getters["auth/role"];
+  return !!role && hasPermission(authorizer.role[role], actions.session.play);
+};
+
+const disableTooltip = computed(() => isCommunity.value || (hasAuthorizationToPlay() && props.recorded));
 
 const getSessionLogs = async () => {
   if (props.recorded) {

ui/tests/views/__snapshots__/Sessions.spec.ts.snap

@@ -26,17 +26,16 @@ exports[`Sessions View > Renders the component 1`] = `
             <tbody data-v-046d4556="">
               <tr data-v-459ab1b4="">
                 <td data-v-459ab1b4="" class="text-center">
-                  <div data-v-459ab1b4="" aria-describedby="v-tooltip-v-0">
-                    <div data-v-b535dca5="" data-v-459ab1b4="" device="[object Object]" data-test="sessionPlay-component"><button data-v-b535dca5="" type="button" class="v-btn v-theme--light text-primary v-btn--density-comfortable v-btn--size-default v-btn--variant-outlined" data-test="connect-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-play mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Play </span>
+                  <div data-v-b535dca5="" data-v-459ab1b4="" data-test="session-play-component">
+                    <div data-v-b535dca5="" aria-describedby="v-tooltip-v-0"><button data-v-b535dca5="" type="button" class="v-btn v-theme--light text-primary v-btn--density-comfortable v-btn--size-default v-btn--variant-outlined" data-test="connect-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-play mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Play </span>
                         <!---->
                         <!---->
-                      </button>
-                      <!---->
-                      <!---->
-                    </div>
+                      </button></div>
+                    <!--teleport start-->
+                    <!--teleport end-->
+                    <!---->
+                    <!---->
                   </div>
-                  <!--teleport start-->
-                  <!--teleport end-->
                 </td>
                 <td data-v-459ab1b4="" class="text-center">
                   <p data-v-459ab1b4="" tabindex="0" class="link">00-00-00-00-00-01</p>