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

- moved the play button tooltip to SessionPlay
- add tooltip text for not recorded sessions
- refactor SessionPlay props

Author: luizhf42

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) {