ui: refactor the component tag 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 16, 2022 · c7abaf7 · c7abaf7
1 parent 13e3861
commit c7abaf7
Show file tree

Hide file tree

Showing 6 changed files with 288 additions and 289 deletions.
diff --git a/ui/src/components/tag/TagDelete.vue b/ui/src/components/tag/TagDelete.vue
@@ -1,46 +1,38 @@
 <template>
   <fragment>
-    <v-tooltip
-      :disabled="hasAuthorization"
-      bottom
-    >
-      <template #activator="{ on }">
-        <span v-on="on">
-          <v-list-item-title data-test="play-item">
-            Remove
-          </v-list-item-title>
-        </span>
-
-        <span v-on="on">
-          <v-icon
-            :disabled="!hasAuthorization"
-            left
-            data-test="play-icon"
-            v-on="on"
-          >
-            delete
-          </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="remove-icon"
+        v-text="'delete'"
+      />
+    </v-list-item-icon>
+
+    <v-list-item-content>
+      <v-list-item-title
+        class="text-left"
+        data-test="remove-title"
+        v-text="'Remove'"
+      />
+    </v-list-item-content>
 
     <v-dialog
       v-model="showDialog"
       max-width="400"
       @click:outside="close"
     >
       <v-card data-test="tagDelete-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 about to remove this tag.
-        </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 about to remove this tag.'"
+        />
 
         <v-card-actions>
           <v-spacer />
@@ -49,18 +41,16 @@
             text
             data-test="close-btn"
             @click="close"
-          >
-            Close
-          </v-btn>
+            v-text="'Close'"
+          />
 
           <v-btn
             color="red darken-1"
             text
             data-test="remove-btn"
-            @click="remove();"
-          >
-            Remove
-          </v-btn>
+            @click="remove()"
+            v-text="'Remove'"
+          />
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -69,13 +59,9 @@
 
 <script>
 
-import hasPermission from '@/components/filter/permission';
-
 export default {
   name: 'TagDeleteComponent',
 
-  filters: { hasPermission },
-
   props: {
     tagName: {
       type: String,
@@ -88,33 +74,15 @@ export default {
     },
   },
 
-  data() {
-    return {
-      action: 'remove',
-    };
-  },
-
   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.tag[this.action],
-        );
-      }
-
-      return false;
-    },
   },
 
   methods: {

diff --git a/ui/src/components/tag/TagList.vue b/ui/src/components/tag/TagList.vue
@@ -43,14 +43,33 @@
               />
             </v-list-item>
 
-            <v-list-item @click="showTagDelete(getListTags.indexOf(item))">
-              <TagDelete
-                :tag-name="item.name"
-                :show.sync="tagDeleteShow[getListTags.indexOf(item)]"
-                data-test="tagDelete-component"
-                @update="getTags()"
-              />
-            </v-list-item>
+            <v-tooltip
+              bottom
+              :disabled="hasAuthorizationRemove"
+            >
+              <template #activator="{ on, attrs }">
+                <div
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  <v-list-item
+                    :disabled="!hasAuthorizationRemove"
+                    @click="showTagDelete(getListTags.indexOf(item))"
+                  >
+                    <TagDelete
+                      :tag-name="item.name"
+                      :show.sync="tagDeleteShow[getListTags.indexOf(item)]"
+                      data-test="tagDelete-component"
+                      @update="getTags()"
+                    />
+                  </v-list-item>
+                </div>
+              </template>
+
+              <span>
+                You don't have this kind of authorization.
+              </span>
+            </v-tooltip>
           </v-card>
         </v-menu>
       </template>
@@ -63,9 +82,13 @@
 import TagFormDialog from '@/components/tag/TagFormDialog';
 import TagDelete from '@/components/tag/TagDelete';
 
+import hasPermission from '@/components/filter/permission';
+
 export default {
   name: 'TagListComponent',
 
+  filters: { hasPermission },
+
   components: {
     TagFormDialog,
     TagDelete,
@@ -75,6 +98,7 @@ export default {
     return {
       tagDialogShow: [],
       tagDeleteShow: [],
+      removeAction: 'remove',
       headers: [
         {
           text: 'Name',
@@ -99,6 +123,18 @@ export default {
     getNumberTags() {
       return this.$store.getters['tags/getNumberTags'];
     },
+
+    hasAuthorizationRemove() {
+      const role = this.$store.getters['auth/role'];
+      if (role !== '') {
+        return hasPermission(
+          this.$authorizer.role[role],
+          this.$actions.tag[this.removeAction],
+        );
+      }
+
+      return false;
+    },
   },
 
   created() {