ui: refactor the component session record delete

This commit refactors the component to block click actions on the listing when the user does not have permission. Also, tests are modified to accommodate the changes made. Signed-off-by: Leonardo R.S. Joao <leonardo.joao@ossystems.com.br>
shellhub-io · Feb 21, 2022 · 026fe10 · 026fe10
1 parent 4082743
commit 026fe10
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 186 deletions.
diff --git a/ui/src/components/session/SessionDeleteRecord.vue b/ui/src/components/session/SessionDeleteRecord.vue
@@ -1,65 +1,55 @@
 <template>
   <fragment>
-    <v-tooltip
-      :disabled="hasAuthorization"
-      bottom
-    >
-      <template #activator="{ on }">
-        <span v-on="on">
-          <v-list-item-title data-test="play-item">
-            Delete Session Record
-          </v-list-item-title>
-        </span>
-
-        <span v-on="on">
-          <v-icon
-            :disabled="!hasAuthorization"
-            left
-            data-test="play-icon"
-            v-on="on"
-          >
-            mdi-playlist-remove
-          </v-icon>
-        </span>
-      </template>
-
-      <span v-if="!hasAuthorization">
-        You don't have this kind of authorization.
-      </span>
-    </v-tooltip>
+    <v-list-item-icon class="mr-0">
+      <v-icon
+        left
+        data-test="removeRecord-icon"
+        v-text="'mdi-playlist-remove'"
+      />
+    </v-list-item-icon>
+
+    <v-list-item-content>
+      <v-list-item-title
+        class="text-left"
+        data-test="removeRecord-title"
+        v-text="'Delete Session Record'"
+      />
+    </v-list-item-content>
 
     <v-dialog
       v-model="showDialog"
       max-width="400"
       @click:outside="close"
     >
       <v-card data-test="sessionDeleteRecord-card">
-        <v-card-title class="headline primary">
-          Are you sure?
-        </v-card-title>
-
-        <v-card-text class="mt-4 mb-3 pb-1">
-          You are going to delete the logs recorded for this session.
-        </v-card-text>
+        <v-card-title
+          class="headline primary"
+          data-test="text-title"
+          v-text="'Are you sure?'"
+        />
+
+        <v-card-text
+          class="mt-4 mb-3 pb-1"
+          data-test="text-text"
+          v-text="'You are going to delete the logs recorded for this session.'"
+        />
 
         <v-card-actions>
           <v-spacer />
           <v-btn
             text
             data-test="cancel-btn"
             @click="close()"
-          >
-            Cancel
-          </v-btn>
+            v-text="'Cancel'"
+          />
 
           <v-btn
             color="red darken-1"
             text
             data-test="delete-btn"
             @click="deleteRecord()"
-          >
-            Delete
-          </v-btn>
+            v-text="'Delete'"
+          />
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -68,13 +58,9 @@
 
 <script>
 
-import hasPermission from '@/components/filter/permission';
-
 export default {
   name: 'SessionDeleteRecordComponent',
 
-  filters: { hasPermission },
-
   props: {
     uid: {
       type: String,
@@ -87,33 +73,15 @@ export default {
     },
   },
 
-  data() {
-    return {
-      action: 'removeRecord',
-    };
-  },
-
   computed: {
     showDialog: {
       get() {
-        return this.show && this.hasAuthorization;
+        return this.show;
       },
       set(value) {
         this.$emit('update:show', value);
       },
     },
-
-    hasAuthorization() {
-      const role = this.$store.getters['auth/role'];
-      if (role !== '') {
-        return hasPermission(
-          this.$authorizer.role[role],
-          this.$actions.session[this.action],
-        );
-      }
-
-      return false;
-    },
   },
 
   methods: {

diff --git a/ui/src/components/session/SessionDetails.vue b/ui/src/components/session/SessionDetails.vue
@@ -103,17 +103,34 @@
               />
             </v-list-item>
 
-            <v-list-item
-              v-if="session.recorded"
-              @click.stop="openDialog('sessionDeleteRecord')"
+            <v-tooltip
+              bottom
+              :disabled="hasAuthorizationRemoveRecord"
             >
-              <SessionDeleteRecord
-                :uid="session.uid"
-                :show.sync="sessionDeleteRecord"
-                data-test="sessionDeleteRecord-component"
-                @update="refresh"
-              />
-            </v-list-item>
+              <template #activator="{ on, attrs }">
+                <div
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  <v-list-item
+                    v-if="session.recorded"
+                    :disabled="!hasAuthorizationRemoveRecord"
+                    @click.stop="openDialog('sessionDeleteRecord')"
+                  >
+                    <SessionDeleteRecord
+                      :uid="session.uid"
+                      :show.sync="sessionDeleteRecord"
+                      data-test="sessionDeleteRecord-component"
+                      @update="refresh"
+                    />
+                  </v-list-item>
+                </div>
+              </template>
+
+              <span>
+                You don't have this kind of authorization.
+              </span>
+            </v-tooltip>
           </v-card>
         </v-menu>
       </v-toolbar>
@@ -269,6 +286,7 @@ export default {
       sessionDeleteRecord: false,
       hide: true,
       playAction: 'play',
+      removeRecordAction: 'removeRecord',
     };
   },
 
@@ -288,6 +306,18 @@ export default {
 
       return false;
     },
+
+    hasAuthorizationRemoveRecord() {
+      const role = this.$store.getters['auth/role'];
+      if (role !== '') {
+        return hasPermission(
+          this.$authorizer.role[role],
+          this.$actions.session[this.removeRecordAction],
+        );
+      }
+
+      return false;
+    },
   },
 
   async created() {