test(cypress): meta-sync align with new UI changes

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

packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableTables.vue

@@ -22,6 +22,7 @@
 
               <v-spacer />
               <x-btn
+                btn.class="nc-btn-metasync-reload"
                 outlined
                 tooltip="Reload list"
                 small
@@ -41,7 +42,7 @@
               >
                 Reload
               </x-btn>-->
-              <x-btn
+              <!--x-btn
                 outlined
                 :loading="updating"
                 :disabled="updating || !edited"
@@ -52,7 +53,7 @@
                 @click="saveModels()"
               >
                 Save
-              </x-btn>
+              </!--x-btn-->
             </v-toolbar>
 
             <div class="d-flex d-100 justify-center">
@@ -64,13 +65,13 @@
                     </th>
                     <!--                    <th>APIs</th>-->
                     <th class="grey--text">
-                      Actions
+                      Sync state
                     </th>
                     <th />
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="model in diff" :key="model.title">
+                  <tr v-for="model in diff" :key="model.title" :class="`nc-metasync-row-${model.tn}`">
                     <!--                    v-if="model.alias.toLowerCase().indexOf(filter.toLowerCase()) > -1">-->
                     <td>
                       <v-tooltip bottom>
@@ -88,7 +89,7 @@
                     @change="edited = true"
                   />
                 </td>-->
-                    <td>
+                    <!--td>
                       <x-icon
                         small
                         color="primary"
@@ -96,7 +97,7 @@
                       >
                         mdi-reload
                       </x-icon>
-                    </td>
+                    </!--td-->
 
                     <td>
                       <span
@@ -104,6 +105,12 @@
 
                         class="caption error--text"
                       >{{ model.detectedChanges.map(m => m.msg).join(', ') }}</span>
+                      <span
+                        v-else
+                        class="caption grey--text"
+                      >
+                        {{ 'No change identified' }}
+                      </span>
                     <!--                  <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
                     </td>
                   </tr>
@@ -186,7 +193,7 @@
             <v-spacer />
 
             <v-tooltip bottom>
-              <template #activator="{on}">
+              <!-- template #activator="{on}">
                 <v-alert
                   v-if="isNewOrDeletedModelFound"
                   dense
@@ -213,10 +220,10 @@
                 Metadata for API creation & management is in sync with
                 '{{ dbAliasList[dbsTab].connection.database }}' Database.
               </template>
-              <template v-else>
+              <template-- v-else>
                 Metadata for API creation & management isn't sync with
                 '{{ dbAliasList[dbsTab].connection.database }}' Database.
-              </template>
+              </template-->
             </v-tooltip>
             <v-spacer />
           </div>
@@ -237,7 +244,7 @@
 
             <x-btn
               x-large
-              btn.class="mx-auto primary"
+              btn.class="mx-auto primary nc-btn-metasync-sync-now"
               tooltip="Sync metadata"
               @click="syncMetaDiff"
             >

scripts/cypress/integration/common/1e_meta_sync.js

@@ -12,22 +12,17 @@ export const genTest = (type, xcdb) => {
       // loginPage.loginAndOpenProject(type);
     });
 
-    function openMetaTab(msg) {
+    function openMetaTab() {
       // open Project metadata tab
       //
       mainPage.navigationDraw(mainPage.PROJ_METADATA).click();
       cy.get(".nc-meta-mgmt-metadata-tab")
-        .should('exist')
+        .should("exist")
         .click({ force: true });
       // kludge, at times test failed to open tab on click
       cy.get(".nc-meta-mgmt-metadata-tab")
-        .should('exist')
+        .should("exist")
         .click({ force: true });
-
-      // validate alert message 
-      cy.get(".v-alert")
-        .contains(msg)
-        .should("exist");
     }
 
     function closeMetaTab() {
@@ -39,74 +34,97 @@ export const genTest = (type, xcdb) => {
       cy.refreshTableTab();
     }
 
-    function metaSyncValidate(scenario, context) {
-      if (scenario === 'out of sync') {
-        openMetaTab(`Tables metadata is out of sync`);
-        cy.get('.nc-btn-sync-meta-data').should('exist').click();
-        cy.toastWait(`Table metadata ${context} successfully`);
-
-      } else {
-        openMetaTab(`Tables metadata is in sync`);
-      }
-      closeMetaTab();  
+    function metaSyncValidate(tbl, msg) {
+      cy.get(".nc-btn-metasync-reload").should("exist").click({ force: true });
+      cy.get(`.nc-metasync-row-${tbl}`).contains(msg).should("exist");
+      cy.get(".nc-btn-metasync-sync-now")
+        .should("exist")
+        .click({ force: true });
+      cy.toastWait(`Table metadata recreated successfully`);
+      // cy.get(`.nc-metasync-row-${tbl}`).should("exist");
     }
 
-    beforeEach(() => {
-      // ensure tables are in sync before each operation
-      openMetaTab(`Tables metadata is in sync`);
+    before(() => {
+      openMetaTab();
+    });
+
+    after(() => {
       closeMetaTab();
-    })
+    });
 
     it(`Create table`, () => {
       // Create Table
-      cy.task("queryDb", `CREATE TABLE sakila.table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);
-      cy.task("queryDb", `CREATE TABLE sakila.table2 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`);      
-      metaSyncValidate('out of sync', 'added');      
-    })
+      cy.task(
+        "queryDb",
+        `CREATE TABLE sakila.table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`
+      );
+      cy.task(
+        "queryDb",
+        `CREATE TABLE sakila.table2 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))`
+      );
+      metaSyncValidate("table1", "New table");
+      // metaSyncValidate("table2", "Table added");
+    });
 
     it(`Add relation`, () => {
       // Add relation (FK)
-      cy.task("queryDb", `ALTER TABLE sakila.table1 ADD INDEX fk1_idx (col1 ASC) VISIBLE`)
-      cy.task("queryDb", `ALTER TABLE sakila.table1 ADD CONSTRAINT fk1 FOREIGN KEY (col1) REFERENCES sakila.table2 (id) ON DELETE NO ACTION ON UPDATE NO ACTION`);
+      cy.task(
+        "queryDb",
+        `ALTER TABLE sakila.table1 ADD INDEX fk1_idx (col1 ASC) VISIBLE`
+      );
+      cy.task(
+        "queryDb",
+        `ALTER TABLE sakila.table1 ADD CONSTRAINT fk1 FOREIGN KEY (col1) REFERENCES sakila.table2 (id) ON DELETE NO ACTION ON UPDATE NO ACTION`
+      );
       // fix me
-      metaSyncValidate('in sync');
-    })
+      metaSyncValidate("table1", "New relation added");
+    });
 
     it(`Remove relation`, () => {
       // Remove relation (FK)
       cy.task("queryDb", `ALTER TABLE sakila.table1 DROP FOREIGN KEY fk1`);
       cy.task("queryDb", `ALTER TABLE sakila.table1 DROP INDEX fk1_idx`);
       // fix me
-      metaSyncValidate('in sync');
-    })
+      metaSyncValidate("table1", "Relation removed");
+    });
 
     it(`Add column`, () => {
       // Add Column
-      cy.task("queryDb", `ALTER TABLE sakila.table1 ADD COLUMN newCol VARCHAR(45) NULL AFTER id`);
+      cy.task(
+        "queryDb",
+        `ALTER TABLE sakila.table1 ADD COLUMN newCol VARCHAR(45) NULL AFTER id`
+      );
       // fix me
-      metaSyncValidate('in sync');
-    })
+      metaSyncValidate("table1", "New column(newCol)");
+    });
 
     it(`Rename column`, () => {
       // Rename Column
-      cy.task("queryDb", `ALTER TABLE sakila.table1 CHANGE COLUMN newCol newColName VARCHAR(45) NULL DEFAULT NULL`);
+      cy.task(
+        "queryDb",
+        `ALTER TABLE sakila.table1 CHANGE COLUMN newCol newColName VARCHAR(45) NULL DEFAULT NULL`
+      );
       // fix me
-      metaSyncValidate('in sync');
-    })
+      metaSyncValidate(
+        "table1",
+        "New column(newColName), Column removed(newCol)"
+      );
+    });
 
     it(`Delete column`, () => {
       // Remove Column
       cy.task("queryDb", `ALTER TABLE sakila.table1 DROP COLUMN newColName`);
       // fix me
-      metaSyncValidate('in sync');
-    })
+      metaSyncValidate("table1", "Column removed(newColName)");
+    });
 
     it(`Delete table`, () => {
       // DROP TABLE
       cy.task("queryDb", `DROP TABLE sakila.table1`);
       cy.task("queryDb", `DROP TABLE sakila.table2`);
-      metaSyncValidate('out of sync', 'deleted');
-    })
+      metaSyncValidate("table1", "Table removed");
+      // metaSyncValidate("table2", "out of sync");
+    });
   });
 };