ui: refactor the component device rename

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 · d3a90d4 · d3a90d4
1 parent 5af0610
commit d3a90d4
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 218 deletions.
diff --git a/ui/src/components/device/DeviceDetails.vue b/ui/src/components/device/DeviceDetails.vue
@@ -231,11 +231,24 @@ export default {
       deviceRenameShow: false,
       tagFormUpdateShow: false,
       deviceDeleteShow: false,
+      renameAction: 'rename',
       updateAction: 'deviceUpdate',
     };
   },
 
   computed: {
+    hasAuthorizationRename() {
+      const role = this.$store.getters['auth/role'];
+      if (role !== '') {
+        return hasPermission(
+          this.$authorizer.role[role],
+          this.$actions.device[this.renameAction],
+        );
+      }
+
+      return false;
+    },
+
     hasAuthorizationFormUpdate() {
       const role = this.$store.getters['auth/role'];
       if (role !== '') {

diff --git a/ui/src/components/device/DeviceRename.vue b/ui/src/components/device/DeviceRename.vue
@@ -1,45 +1,33 @@
 <template>
   <fragment>
-    <v-tooltip
-      :disabled="hasAuthorization"
-      bottom
-    >
-      <template #activator="{ on }">
-        <span v-on="on">
-          <v-list-item-title
-            data-test="rename-item"
-            v-on="on"
-          >
-            Rename
-          </v-list-item-title>
-        </span>
-
-        <span v-on="on">
-          <v-icon
-            :disabled="!hasAuthorization"
-            left
-            data-test="rename-icon"
-            v-on="on"
-          >
-            mdi-pencil
-          </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="rename-icon"
+        v-text="'mdi-pencil'"
+      />
+    </v-list-item-icon>
+
+    <v-list-item-content>
+      <v-list-item-title
+        class="text-left"
+        data-test="rename-title"
+        v-text="'Rename'"
+      />
+    </v-list-item-content>
 
     <v-dialog
       v-model="showDialog"
       max-width="450"
       @click:outside="close"
     >
       <v-card data-test="deviceRename-card">
-        <v-card-title class="headline primary">
-          Rename Device
-        </v-card-title>
+        <v-card-title
+          class="headline primary"
+          data-test="text-title"
+          v-text="'Rename Device'"
+        />
+
         <ValidationObserver
           ref="obs"
           v-slot="{ passes }"
@@ -58,28 +46,28 @@
                 :error-messages="errors"
                 require
                 :messages="messages"
+                data-test="hostname-field"
               />
             </ValidationProvider>
           </v-card-text>
 
           <v-card-actions>
             <v-spacer />
+
             <v-btn
               text
-              data-test="cancel-btn"
+              data-test="close-btn"
               @click="close()"
-            >
-              Close
-            </v-btn>
+              v-text="'Close'"
+            />
 
             <v-btn
               color="primary"
               text
               data-test="rename-btn"
               @click="passes(edit)"
-            >
-              Rename
-            </v-btn>
+              v-text="'Rename'"
+            />
           </v-card-actions>
         </ValidationObserver>
       </v-card>
@@ -94,13 +82,9 @@ import {
   ValidationProvider,
 } from 'vee-validate';
 
-import hasPermission from '@/components/filter/permission';
-
 export default {
   name: 'DeviceRenameComponent',
 
-  filters: { hasPermission },
-
   components: {
     ValidationProvider,
     ValidationObserver,
@@ -111,6 +95,7 @@ export default {
       type: String,
       required: true,
     },
+
     uid: {
       type: String,
       required: true,
@@ -127,7 +112,6 @@ export default {
       invalid: false,
       editName: '',
       messages: 'Examples: (foobar, foo-bar-ba-z-qux, foo-example, 127-0-0-1)',
-      action: 'rename',
     };
   },
 
@@ -143,24 +127,13 @@ export default {
 
     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.device[this.action],
-        );
-      }
-
-      return false;
-    },
   },
 
   created() {

diff --git a/ui/tests/unit/components/device/DeviceDetails.spec.js b/ui/tests/unit/components/device/DeviceDetails.spec.js
@@ -56,6 +56,7 @@ describe('DeviceDetails', () => {
         deviceDeleteShow: false,
       },
       computed: {
+        hasAuthorizationRename: true,
         hasAuthorizationFormUpdate: true,
       },
       components: {
@@ -80,7 +81,7 @@ describe('DeviceDetails', () => {
     {
       description: 'Offline Device',
       role: {
-        type: 'operator',
+        type: 'observer',
         permission: false,
       },
       variables: {
@@ -96,7 +97,8 @@ describe('DeviceDetails', () => {
         deviceDeleteShow: false,
       },
       computed: {
-        hasAuthorizationFormUpdate: true,
+        hasAuthorizationRename: false,
+        hasAuthorizationFormUpdate: false,
       },
       components: {
         'deviceRename-component': true,