test(cypress) access control list

Signed-off-by: Raju Udava <sivadstala@gmail.com>

packages/nc-gui/components/project/projectMetadata/disableOrEnableModels.vue

@@ -60,7 +60,7 @@
           </v-tabs>
         </v-tab-item>
 
-        <v-tab :key="db.meta.dbAlias + 'acl'" :href="'#' + db.meta.dbAlias + 'acl'" class="text-capitalize caption">
+        <v-tab :key="db.meta.dbAlias + 'acl'" :href="'#' + db.meta.dbAlias + 'acl'" class="text-capitalize caption nc-ui-acl-tab">
           {{ db.connection.database | extractDbName }} UI Access Control
         </v-tab>
         <v-tab-item :key="db.meta.dbAlias + 'aclt'" :value=" db.meta.dbAlias + 'acl'">

packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue

@@ -27,6 +27,7 @@
             small
             color="primary"
             icon="refresh"
+            class="nc-acl-reload"
             @click="loadTableList()"
           >
             Reload
@@ -39,6 +40,7 @@
             small
             color="primary"
             icon="save"
+            class="nc-acl-save"
             @click="save()"
           >
             Save
@@ -67,12 +69,13 @@
                 <tr
                   v-if="table._tn.toLowerCase().indexOf(filter.toLowerCase()) > -1"
                   :key="table.tn"
+                  :class="`nc-acl-table-row nc-acl-table-row-${table.tn}`"
                 >
                   <td>
                     <v-tooltip bottom>
                       <template #activator="{on}">
-                        <v-icon small :color="viewIcons[table.show_as || table.type].color" v-on="on">
-                          {{ viewIcons[table.show_as || table.type].icon }}
+                        <v-icon small :color="viewIcons[table.type === 'vtable' ? table.show_as : table.type].color" v-on="on">
+                          {{ viewIcons[table.type === 'vtable' ? table.show_as : table.type].icon }}
                         </v-icon>   <span class="caption ml-2" v-on="on">{{ table._tn }}</span>
                       </template>
                       <span class="caption">{{ table.tn }}</span>
@@ -90,7 +93,7 @@
                         >
                           <v-checkbox
                             v-model="table.disabled[role]"
-                            class="pt-0 mt-0"
+                            :class="`pt-0 mt-0 nc-acl-${table.tn}-${role}-chkbox`"
                             dense
                             hide-details
                             :true-value="false"
@@ -100,10 +103,10 @@
                         </div>
                       </template>
 
-                      <span v-if="table.disabled[role]">Click to hide '{{ table.tn }}' for Role:{{
+                      <span v-if="table.disabled[role]">Click to make '{{ table.tn }}' visible for Role:{{
                         role
                       }} in UI dashboard</span>
-                      <span v-else>Click to make '{{ table.tn }}' visible for Role:{{ role }} in UI dashboard</span>
+                      <span v-else>Click to hide '{{ table.tn }}' for Role:{{ role }} in UI dashboard</span>
                     </v-tooltip>
                   </td>
                 </tr>

packages/nc-gui/helpers/viewIcons.js

@@ -1,8 +1,9 @@
 export default {
-  grid: { icon: 'mdi-grid-large', color: 'blue' },
-  table: { icon: 'mdi-grid-large', color: 'blue' },
-  form: { icon: 'mdi-form-select', color: 'pink' },
-  calendar: { icon: 'mdi-calendar', color: 'purple' },
-  gallery: { icon: 'mdi-camera-image', color: 'orange' },
-  kanban: { icon: 'mdi-tablet-dashboard', color: 'green' }
-}
+  grid: { icon: "mdi-grid-large", color: "blue" },
+  table: { icon: "mdi-grid-large", color: "blue" },
+  form: { icon: "mdi-form-select", color: "pink" },
+  calendar: { icon: "mdi-calendar", color: "purple" },
+  gallery: { icon: "mdi-camera-image", color: "orange" },
+  kanban: { icon: "mdi-tablet-dashboard", color: "green" },
+  view: { icon: "mdi-eye-circle-outline", color: "blue" }
+};

scripts/cypress/integration/common/5a_user_role.js

@@ -12,6 +12,8 @@ import {
   _editComment,
   _viewMenu,
   _topRightMenu,
+  disableTableAccess,
+  _accessControl,
 } from "../spec/roleValidation.spec";
 
 export const genTest = (type, xcdb) => {
@@ -50,6 +52,28 @@ export const genTest = (type, xcdb) => {
     addUser(roles.editor);
     addUser(roles.commenter);
     addUser(roles.viewer);
+
+    // Access contrl list- configuration
+    //
+    it(`Access control list- configuration`, () => {
+      // open Project metadata tab
+      //
+      mainPage.navigationDraw(mainPage.PROJ_METADATA).click();
+      cy.get(".nc-ui-acl-tab").click({ force: true });
+
+      // validate if it has 19 entries representing tables & views
+      cy.get(".nc-acl-table-row").should("have.length", 19);
+
+      // disable table & view access
+      //
+      disableTableAccess("language", "editor");
+      disableTableAccess("language", "commenter");
+      disableTableAccess("language", "viewer");
+
+      disableTableAccess("customer_list", "editor");
+      disableTableAccess("customer_list", "commenter");
+      disableTableAccess("customer_list", "viewer");
+    });
   });
 
   const roleValidation = (roleType) => {
@@ -92,6 +116,12 @@ export const genTest = (type, xcdb) => {
         _advSettings(roleType, false);
       });
 
+      it(`[${roles[roleType].name}] Access control`, () => {
+        // Access control validation
+        //
+        _accessControl(roleType, false);
+      });
+
       it(`[${roles[roleType].name}] Schema: create table, add/modify/delete column`, () => {
         // Schema related validations
         //  - Add/delete table

scripts/cypress/integration/common/5b_preview_role.js

@@ -12,6 +12,8 @@ import {
   _editComment,
   _viewMenu,
   _topRightMenu,
+  enableTableAccess,
+  _accessControl,
 } from "../spec/roleValidation.spec";
 
 export const genTest = (type, xcdb, roleType) => {
@@ -39,12 +41,29 @@ export const genTest = (type, xcdb, roleType) => {
       // mainPage.navigationDraw(mainPage.ROLE_VIEW).contains('Reset Preview').should('not.exist')
       // cy.get('.nc-preview-reset').should('not-exist')
       cy.closeTableTab("City");
+
+      // open Project metadata tab
+      //
+      mainPage.navigationDraw(mainPage.PROJ_METADATA).click();
+      cy.get(".nc-ui-acl-tab").click({ force: true });
+
+      // validate if it has 19 entries representing tables & views
+      cy.get(".nc-acl-table-row").should("have.length", 19);
+
+      // restore access
+      //
+      enableTableAccess("language", "editor");
+      enableTableAccess("language", "commenter");
+      enableTableAccess("language", "viewer");
+
+      enableTableAccess("customer_list", "editor");
+      enableTableAccess("customer_list", "commenter");
+      enableTableAccess("customer_list", "viewer");
     });
 
     const genTestSub = (roleType) => {
       it(`Role preview: ${roleType}: Enable preview`, () => {
         cy.get(`.nc-preview-${roleType}`).click();
-
       });
 
       it(`Role preview: ${roleType}: Advance settings`, () => {
@@ -53,6 +72,12 @@ export const genTest = (type, xcdb, roleType) => {
         _advSettings(roleType, true);
       });
 
+      it(`Role preview: ${roleType}: Access control`, () => {
+        // Access control validation
+        //
+        _accessControl(roleType, false);
+      });
+
       it(`Role preview: ${roleType}: Edit data`, () => {
         // Table data related validations
         //  - Add/delete/modify row

scripts/cypress/integration/spec/roleValidation.spec.js

@@ -215,3 +215,43 @@ export function _topRightMenu(roleType, previewMode) {
   cy.get(".nc-topright-menu").find(".nc-menu-account").should("exist");
   cy.get(".nc-topright-menu").find(".nc-menu-alert").should("exist");
 }
+
+// Access control list
+//
+export function disableTableAccess(tbl, role) {
+  const cls = `.nc-acl-${tbl}-${role}-chkbox`;
+  cy.get(cls).find("input").should("be.checked").click({ force: true });
+  cy.get(cls).find("input").should("not.be.checked");
+  cy.get(".nc-acl-save").next().click({ force: true });
+  cy.toastWait("Updated UI ACL for tables successfully");
+}
+
+export function enableTableAccess(tbl, role) {
+  const cls = `.nc-acl-${tbl}-${role}-chkbox`;
+  cy.get(cls).find("input").should("not.be.checked").click({ force: true });
+  cy.get(cls).find("input").should("be.checked");
+  cy.get(".nc-acl-save").next().click({ force: true });
+  cy.toastWait("Updated UI ACL for tables successfully");
+}
+
+export function _accessControl(roleType, previewMode) {
+  let validationString = roleType == "creator" ? "exist" : "not.exist";
+  cy.get(".nc-project-tree")
+    .find(".v-list-item__title:contains(Tables)", { timeout: 10000 })
+    .should("exist")
+    .first()
+    .click({ force: true });
+
+  cy.get(".nc-project-tree")
+    .contains("Language", { timeout: 6000 })
+    .should(validationString);
+
+  cy.get(".nc-project-tree")
+    .contains("CustomerList", { timeout: 6000 })
+    .should(validationString);
+
+  cy.get(".nc-project-tree")
+    .find(".v-list-item__title:contains(Tables)", { timeout: 10000 })
+    .first()
+    .click({ force: true });
+}