Skip to content

fix: Scope CSS styles #2018

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
enjeck merged 4 commits into from
Aug 21, 2025
Merged

fix: Scope CSS styles #2018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf63076
fix: Scope smartpicker CSS styles
enjeck Aug 20, 2025
9bcc1bb
fix: Scope scss styles
enjeck Aug 20, 2025
49b3479
fix: Cypress errors, remove unneeded classes
enjeck Aug 21, 2025
185a2ad
fix(Cypress): component test
enjeck Aug 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions cypress.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,36 @@ export default defineConfig({
devServer: {
framework: 'vue',
bundler: 'vite',
viteConfig: {
plugins: [vue(), nodePolyfills()],
optimizeDeps: {
exclude: [
'vite-plugin-node-polyfills/shims/buffer',
'vite-plugin-node-polyfills/shims/global',
'vite-plugin-node-polyfills/shims/process'
],
force: true
},
define: {
global: 'globalThis',
},
},
},
setupNodeEvents(on, config) {
on('file:preprocessor', vitePreprocessor({
plugins: [vue(), nodePolyfills()],
configFile: false,
optimizeDeps: {
exclude: [
'vite-plugin-node-polyfills/shims/buffer',
'vite-plugin-node-polyfills/shims/global',
'vite-plugin-node-polyfills/shims/process'
],
force: true
},
define: {
global: 'globalThis',
},
}))
return config
},
Expand Down
2 changes: 1 addition & 1 deletion cypress/component/ContentReferenceWidget.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,5 +114,5 @@ function mountContentWidget(richObject) {
// Get some often used elements
cy.get('[data-cy="contentReferenceWidget"] .options').as('options')
cy.get('[data-cy="contentReferenceWidget"] .NcTable table').as('table')
cy.get('@table').find('tbody tr[data-cy="customTableRow"]').as('rows')
cy.get('@table').find('tr[data-cy="customTableRow"]').as('rows')
}
60 changes: 30 additions & 30 deletions cypress/e2e/view-filtering-selection.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,57 +25,57 @@ describe('Filtering in a view by selection columns', () => {
cy.createSelectionCheckColumn('check', null, false)

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'first row')
cy.fillInValueSelection('selection', 'sel1')
cy.fillInValueSelectionMulti('multi selection', ['A', 'B'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'second row')
cy.fillInValueSelection('selection', 'sel2')
cy.fillInValueSelectionMulti('multi selection', ['B'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'third row')
cy.fillInValueSelection('selection', 'sel3')
cy.fillInValueSelectionMulti('multi selection', ['C', 'B', 'D'])
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'fourth row')
cy.fillInValueSelectionMulti('multi selection', ['A'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'fifths row')
cy.fillInValueSelection('selection', 'sel4')
cy.fillInValueSelectionMulti('multi selection', ['D'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'sixths row')
cy.fillInValueSelection('selection', 'sel1')
cy.fillInValueSelectionMulti('multi selection', ['C', 'D'])
cy.fillInValueSelectionCheck('check')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// add row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'sevenths row')
cy.fillInValueSelection('selection', 'sel2')
cy.fillInValueSelectionMulti('multi selection', ['A', 'C', 'B', 'D'])
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()
})

it('Filter view for single selection', () => {
Expand All @@ -89,7 +89,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -156,7 +156,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -197,7 +197,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -238,15 +238,15 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
cy.get('ul.vs__dropdown-menu li span[title="Contains"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(2).click()
cy.get('ul.vs__dropdown-menu li span[title="A"]').click()

cy.get('button').contains('Add new filter').click()
cy.get('[data-cy="filterGroupAddFilterBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(3).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(4).click()
Expand Down Expand Up @@ -287,23 +287,23 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
cy.get('ul.vs__dropdown-menu li span[title="Contains"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(2).click()
cy.get('ul.vs__dropdown-menu li span[title="A"]').click()

cy.get('button').contains('Add new filter').click()
cy.get('[data-cy="filterGroupAddFilterBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(3).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(4).click()
cy.get('ul.vs__dropdown-menu li span[title="Contains"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(5).click()
cy.get('ul.vs__dropdown-menu li span[title="B"]').click()

cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(6).click()
cy.get('ul.vs__dropdown-menu li span[title="multi selection"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(7).click()
Expand Down Expand Up @@ -344,7 +344,7 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="check"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand Down Expand Up @@ -384,8 +384,8 @@ describe('Filtering in a view by selection columns', () => {
cy.get('.v-popper__popper li button span').contains('Create view').click({ force: true })
cy.get('.modal-container #settings-section_title input').type(title)

// ## add filter
cy.get('button').contains('Add new filter group').click()
// ## add filter
cy.get('[data-cy="filterFormFilterGroupBtn"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(0).click()
cy.get('ul.vs__dropdown-menu li span[title="check"]').click()
cy.get('.modal-container .filter-group .v-select.select').eq(1).click()
Expand All @@ -402,11 +402,11 @@ describe('Filtering in a view by selection columns', () => {
cy.contains('.app-navigation-entry-link span', title).should('exist')

// # insert a checked row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'checked row')
cy.fillInValueSelectionCheck('check')
cy.intercept({ method: 'GET', url: '**/apps/tables/view/*/row/*/present' }).as('isRowInViewPresent')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// ## check server response for /view/{viewId}/row/{id}/present
cy.wait('@isRowInViewPresent').then(({ response: { body: { present } } }) => {
Expand All @@ -417,10 +417,10 @@ describe('Filtering in a view by selection columns', () => {
cy.contains('[data-cy="ncTable"] [data-cy="customTableRow"]', 'checked row').should('be.visible')

// # insert a unchecked row
cy.get('button').contains('Create row').click()
cy.get('[data-cy="createRowBtn"]').click()
cy.fillInValueTextLine('title', 'unchecked row')
cy.intercept({ method: 'GET', url: '**/apps/tables/view/*/row/*/present' }).as('isRowInViewPresent')
cy.get('button').contains('Save').click()
cy.get('[data-cy="createRowSaveButton"]').click()

// ## check server response for /view/{viewId}/row/{id}/present
cy.wait('@isRowInViewPresent').then(({ response: { body: { present } } }) => {
Expand Down Expand Up @@ -448,7 +448,7 @@ describe('Filtering in a view by selection columns', () => {
// # inline edit row
// ## uncheck row
cy.intercept({ method: 'GET', url: '**/apps/tables/view/*/row/*/present' }).as('isRowInViewPresent')
cy.contains('[data-cy="ncTable"] [data-cy="customTableRow"]', 'first row').closest('[data-cy="customTableRow"]').find('.inline-editing-container .checkbox-radio-switch').click()
cy.contains('[data-cy="ncTable"] [data-cy="customTableRow"]', 'first row').closest('[data-cy="customTableRow"]').find('.inline-editing-container input').click({ force: true })

// ## check server response for /view/{viewId}/row/{id}/present
cy.wait('@isRowInViewPresent').then(({ response: { body: { present } } }) => {
Expand Down
2 changes: 1 addition & 1 deletion src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default {
}

</style>
<style lang="scss">
<style lang="scss" scoped>

h1 {
font-size: 1.98em;
Expand Down
1 change: 1 addition & 0 deletions src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
:close-after-click="true"
type="tertiary"
:aria-label="t('tables', 'Add new filter')"
data-cy="filterGroupAddFilterBtn"
@click="addFilter">
{{ t('tables', 'Add new filter') }}
<template #icon>
Expand Down
1 change: 1 addition & 0 deletions src/modules/main/partials/editViewPartials/sort/SortForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export default {
* - Not all columns that are sortable on the front-end are sortable on the back-end.
* - Example: "selection" fields — the front-end can sort them by value (since it has it),
* but the back-end only stores an ID and cannot easily JOIN the value for sorting.
* @param col {AbstractColumn} The column to check.
*/
canBeSorted(col) {
return ![
Expand Down
2 changes: 1 addition & 1 deletion src/modules/navigation/partials/NavigationTableItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ export default {
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>

.app-navigation-entry.active {
.icon-share {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default {
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.main-table-view {
width: max-content;
min-width: var(--app-content-width, 100%);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/View.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default {
},
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.main-view-view {
width: max-content;
min-width: var(--app-content-width, 100%);
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/ncTable/NcTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export default {
}
</style>

<style lang="scss">
<style lang="scss" scoped>
.image_container.widget-file {
height: auto !important;
}
Expand Down
2 changes: 1 addition & 1 deletion src/shared/components/ncTable/partials/TiptapMenuBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export default {
}
</script>

<style lang="scss">
<style lang="scss" scoped>

.character-count {
display: flex;
Expand Down
Loading