fix(design): Fix/545 reset frontend filter on table/view change (#551)

* fix: reset localViewFilter on every table/view change

Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>

* test: add test for FE filter info
- adjust and extend test command
- add test scenario

Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>

---------

Signed-off-by: Florian Steffens <florian.steffens@nextcloud.com>

cypress/e2e/tables-fe-filters.cy.js

@@ -0,0 +1,67 @@
+let localUser
+
+describe('The Home Page', () => {
+
+	before(function() {
+		cy.createRandomUser().then(user => {
+			localUser = user
+		})
+	})
+
+	beforeEach(function() {
+		cy.login(localUser)
+		cy.visit('apps/tables')
+	})
+
+	it('FE Search in table', () => {
+		cy.get('.app-navigation-entry-link').contains('Tutorial').click({ force: true })
+
+		// test case-sensitive
+		cy.contains('Edit a row').should('exist')
+		cy.get('.searchAndFilter input').type('tables')
+		cy.contains('Edit a row').should('not.exist')
+		cy.contains('Read the docs').should('exist')
+
+		// test not case-sensitive
+		cy.get('.searchAndFilter input').clear()
+		cy.get('.searchAndFilter input').type('TABLES')
+		cy.contains('Edit a row').should('not.exist')
+		cy.contains('Read the docs').should('exist')
+
+		// test search for number regarding a check field
+		cy.get('.searchAndFilter input').clear()
+		cy.get('.searchAndFilter input').type('3')
+		cy.contains('Edit a row').should('not.exist')
+		cy.contains('Read the docs').should('exist')
+	})
+
+	it('Reset FE filter on table or view change', () => {
+		// create a table and view, so we can change the active table and view later on
+		cy.createTable('first table')
+		cy.createTextLineColumn('colA', true)
+
+		cy.createTable('second table')
+		cy.createTextLineColumn('col1', true)
+
+		// change between tables
+		cy.loadTable('first table')
+		cy.sortTableColumn('colA')
+		cy.get('.info').contains('Reset local adjustments').should('be.visible')
+		cy.loadTable('second table')
+		cy.get('.info').contains('Reset local adjustments').should('not.exist')
+
+		// change from view to table
+		cy.createView('view for second table')
+		cy.sortTableColumn('col1')
+		cy.get('.info').contains('Reset local adjustments').should('be.visible')
+		cy.loadTable('second table')
+		cy.get('.info').contains('Reset local adjustments').should('not.exist')
+
+		// change from table to view
+		cy.loadTable('first table')
+		cy.sortTableColumn('colA')
+		cy.get('.info').contains('Reset local adjustments').should('be.visible')
+		cy.loadView('view for second table')
+		cy.get('.info').contains('Reset local adjustments').should('not.exist')
+	})
+})

cypress/support/commands.js

@@ -31,7 +31,7 @@ addCommands()
 
 Cypress.Commands.add('createTable', (title) => {
 	cy.contains('.app-menu-entry--label', 'Tables').click()
-	cy.contains('button', 'Create new table').click()
+	cy.get('button[aria-label="Create new table"]').click()
 	cy.get('.tile').contains('Custom table').click({ force: true })
 	cy.get('.modal__content input[type="text"]').clear().type(title)
 	cy.contains('button', 'Create table').click()
@@ -45,7 +45,11 @@ Cypress.Commands.add('createView', (title) => {
 
 	cy.get('.modal-container #settings-section_title input').type(title)
 
+	cy.intercept({ method: 'POST', url: '**/apps/tables/view' }).as('createView')
+	cy.intercept({ method: 'PUT', url: '**/apps/tables/view/*' }).as('updateView')
 	cy.contains('button', 'Create View').click()
+	cy.wait('@createView')
+	cy.wait('@updateView')
 
 	cy.contains('.app-navigation-entry-link span', title).should('exist')
 })
@@ -55,8 +59,21 @@ Cypress.Commands.add('clickOnTableThreeDotMenu', (optionName) => {
 	cy.get('.v-popper__popper li button span').contains(optionName).click({ force: true })
 })
 
+Cypress.Commands.add('sortTableColumn', (columnTitle, mode = 'ASC') => {
+	cy.get('th').contains(columnTitle).click()
+	if (mode === 'ASC') {
+		cy.get('ul li.action button[aria-label="Sort asc"]').click()
+	} else {
+		cy.get('ul li.action button[aria-label="Sort desc"]').click()
+	}
+})
+
 Cypress.Commands.add('loadTable', (name) => {
-	cy.get('.app-navigation-entry-link').contains(name).click({ force: true })
+	cy.get('.app-navigation-entry a[title="' + name + '"]').click({ force: true })
+})
+
+Cypress.Commands.add('loadView', (name) => {
+	cy.get('.app-navigation-entry a[title="' + name + '"]').click({ force: true })
 })
 
 Cypress.Commands.add('unifiedSearch', (term) => {

src/modules/main/sections/MainWrapper.vue

@@ -110,7 +110,7 @@ export default {
 			if (!this.lastActiveElement || this.element.id !== this.lastActiveElement.id || this.isView !== this.lastActiveElement.isView || force) {
 				this.localLoading = true
 
-				if (this.isView) this.viewSetting = {}
+				this.viewSetting = {}
 
 				await this.$store.dispatch('loadColumnsFromBE', {
 					view: this.isView ? this.element : null,