-->
<template>
<div class="file-list-filters">
- <div class="file-list-filters__filter">
+ <div class="file-list-filters__filter" data-cy-files-filters>
<span v-for="filter of visualFilters"
:key="filter.id"
ref="filterElements" />
</div>
<ul v-if="activeChips.length > 0" class="file-list-filters__active" :aria-label="t('files', 'Active filters')">
<li v-for="(chip, index) of activeChips" :key="index">
- <NcChip :icon-svg="chip.icon"
+ <NcChip :aria-label-close="t('files', 'Remove filter')"
+ :icon-svg="chip.icon"
:text="chip.text"
@close="chip.onclick" />
</li>
-->
<template>
<NcAppNavigationItem v-if="storageStats"
- :aria-label="t('files', 'Storage informations')"
+ :aria-description="t('files', 'Storage information')"
:class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0}"
:loading="loadingStorageStats"
:name="storageStatsTitle"
<!-- Progress bar -->
<NcProgressBar v-if="storageStats.quota >= 0"
slot="extra"
+ :aria-label="t('files', 'Storage quota')"
:error="storageStats.relative > 80"
:value="Math.min(storageStats.relative, 100)" />
</NcAppNavigationItem>
<template #search>
<NcAppNavigationSearch v-model="searchQuery" :label="t('files', 'Filter filenames…')" />
</template>
- <template #list>
- <NcAppNavigationItem v-for="view in parentViews"
- :key="view.id"
- :allow-collapse="true"
- :data-cy-files-navigation-item="view.id"
- :exact="useExactRouteMatching(view)"
- :icon="view.iconClass"
- :name="view.name"
- :open="isExpanded(view)"
- :pinned="view.sticky"
- :to="generateToNavigation(view)"
- @update:open="onToggleExpand(view)">
- <!-- Sanitized icon as svg if provided -->
- <NcIconSvgWrapper v-if="view.icon" slot="icon" :svg="view.icon" />
-
- <!-- Child views if any -->
- <NcAppNavigationItem v-for="child in childViews[view.id]"
- :key="child.id"
- :data-cy-files-navigation-item="child.id"
- :exact-path="true"
- :icon="child.iconClass"
- :name="child.name"
- :to="generateToNavigation(child)">
+ <template #default>
+ <NcAppNavigationList :aria-label="t('files', 'Views')">
+ <NcAppNavigationItem v-for="view in parentViews"
+ :key="view.id"
+ :allow-collapse="true"
+ :data-cy-files-navigation-item="view.id"
+ :exact="useExactRouteMatching(view)"
+ :icon="view.iconClass"
+ :name="view.name"
+ :open="isExpanded(view)"
+ :pinned="view.sticky"
+ :to="generateToNavigation(view)"
+ @update:open="onToggleExpand(view)">
<!-- Sanitized icon as svg if provided -->
- <NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
+ <NcIconSvgWrapper v-if="view.icon" slot="icon" :svg="view.icon" />
+
+ <!-- Child views if any -->
+ <NcAppNavigationItem v-for="child in childViews[view.id]"
+ :key="child.id"
+ :data-cy-files-navigation-item="child.id"
+ :exact-path="true"
+ :icon="child.iconClass"
+ :name="child.name"
+ :to="generateToNavigation(child)">
+ <!-- Sanitized icon as svg if provided -->
+ <NcIconSvgWrapper v-if="child.icon" slot="icon" :svg="child.icon" />
+ </NcAppNavigationItem>
</NcAppNavigationItem>
- </NcAppNavigationItem>
+ </NcAppNavigationList>
+
+ <!-- Settings modal-->
+ <SettingsModal :open="settingsOpened"
+ data-cy-files-navigation-settings
+ @close="onSettingsClose" />
</template>
<!-- Non-scrollable navigation bottom elements -->
<NavigationQuota />
<!-- Files settings modal toggle-->
- <NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
- :name="t('files', 'Files settings')"
+ <NcAppNavigationItem :name="t('files', 'Files settings')"
data-cy-files-navigation-settings-button
@click.prevent.stop="openSettings">
<IconCog slot="icon" :size="20" />
</NcAppNavigationItem>
</ul>
</template>
-
- <!-- Settings modal-->
- <SettingsModal :open="settingsOpened"
- data-cy-files-navigation-settings
- @close="onSettingsClose" />
</NcAppNavigation>
</template>
import IconCog from 'vue-material-design-icons/Cog.vue'
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
import NcAppNavigationSearch from '@nextcloud/vue/dist/Components/NcAppNavigationSearch.js'
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
import NavigationQuota from '../components/NavigationQuota.vue'
NavigationQuota,
NcAppNavigation,
NcAppNavigationItem,
+ NcAppNavigationList,
NcAppNavigationSearch,
NcIconSvgWrapper,
SettingsModal,
--- /dev/null
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { User } from '@nextcloud/cypress'
+import { getRowForFile, navigateToFolder } from './FilesUtils'
+import { FilesNavigationPage } from '../../pages/FilesNavigation'
+import { FilesFilterPage } from '../../pages/FilesFilters'
+
+describe('files: Filter in files list', { testIsolation: true }, () => {
+ const appNavigation = new FilesNavigationPage()
+ const filesFilters = new FilesFilterPage()
+ let user: User
+
+ beforeEach(() => cy.createRandomUser().then(($user) => {
+ user = $user
+
+ cy.mkdir(user, '/folder')
+ cy.uploadContent(user, new Blob([]), 'text/plain', '/file.txt')
+ cy.uploadContent(user, new Blob([]), 'text/csv', '/spreadsheet.csv')
+ cy.uploadContent(user, new Blob([]), 'text/plain', '/folder/text.txt')
+ cy.login(user)
+ cy.visit('/apps/files')
+ }))
+
+ it('filters current view by name', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+
+ // Set up a search query
+ appNavigation.searchInput()
+ .type('folder')
+
+ // See that only the folder is visible
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('not.exist')
+ getRowForFile('spreadsheet.csv').should('not.exist')
+ })
+
+ it('can reset name filter', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+
+ // Set up a search query
+ appNavigation.searchInput()
+ .type('folder')
+
+ // See that only the folder is visible
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('not.exist')
+
+ // reset the filter
+ appNavigation.searchInput().should('have.value', 'folder')
+ appNavigation.searchClearButton().should('exist').click()
+ appNavigation.searchInput().should('have.value', '')
+
+ // All are visible again
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+ })
+
+ it('filters current view by type', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+ getRowForFile('spreadsheet.csv').should('be.visible')
+
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+ cy.findByRole('menuitemcheckbox', { name: 'Spreadsheets' })
+ .should('be.visible')
+ .click()
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+
+ // See that only the spreadsheet is visible
+ getRowForFile('spreadsheet.csv').should('be.visible')
+ getRowForFile('file.txt').should('not.exist')
+ getRowForFile('folder').should('not.exist')
+ })
+
+ it('can reset filter by type', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+ cy.findByRole('menuitemcheckbox', { name: 'Spreadsheets' })
+ .should('be.visible')
+ .click()
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+
+ // See folder is not visible
+ getRowForFile('folder').should('not.exist')
+
+ // clear filter
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+ cy.findByRole('menuitem', { name: /clear filter/i })
+ .should('be.visible')
+ .click()
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+
+ // See folder is visible again
+ getRowForFile('folder').should('be.visible')
+ })
+
+ it('can reset filter by clicking chip button', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+ cy.findByRole('menuitemcheckbox', { name: 'Spreadsheets' })
+ .should('be.visible')
+ .click()
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+
+ // See folder is not visible
+ getRowForFile('folder').should('not.exist')
+
+ // clear filter
+ filesFilters.removeFilter('Spreadsheets')
+
+ // See folder is visible again
+ getRowForFile('folder').should('be.visible')
+ })
+
+ it('keeps name filter when changing the directory', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+
+ // Set up a search query
+ appNavigation.searchInput()
+ .type('folder')
+
+ // See that only the folder is visible
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('not.exist')
+
+ // go to that folder
+ navigateToFolder('folder')
+
+ // see that the folder is also filtered
+ getRowForFile('text.txt').should('not.exist')
+ })
+
+ it('keeps type filter when changing the directory', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .should('be.visible')
+ .click()
+ cy.findByRole('menuitemcheckbox', { name: 'Folders' })
+ .should('be.visible')
+ .click()
+ filesFilters.filterContainter()
+ .findByRole('button', { name: 'Type' })
+ .click()
+
+ // See that only the folder is visible
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('not.exist')
+
+ // see filter is active
+ filesFilters.activeFilters().contains(/Folder/).should('be.visible')
+
+ // go to that folder
+ navigateToFolder('folder')
+
+ // see filter is still active
+ filesFilters.activeFilters().contains(/Folder/).should('be.visible')
+
+ // see that the folder is filtered
+ getRowForFile('text.txt').should('not.exist')
+ })
+
+ it('resets filter when changing the view', () => {
+ // All are visible by default
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+
+ // Set up a search query
+ appNavigation.searchInput()
+ .type('folder')
+
+ // See that only the folder is visible
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('not.exist')
+
+ // go to other view
+ appNavigation.views()
+ .findByRole('link', { name: /Personal Files/i })
+ .click()
+ // wait for view changed
+ cy.url().should('match', /apps\/files\/personal/)
+
+ // see that the folder is not filtered
+ getRowForFile('folder').should('be.visible')
+ getRowForFile('file.txt').should('be.visible')
+
+ // see the filter bar is gone
+ appNavigation.searchInput().should('have.value', '')
+ })
+})
+++ /dev/null
-/**
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import type { User } from '@nextcloud/cypress'
-import { getRowForFile, navigateToFolder } from './FilesUtils'
-import { UnifiedSearchPage } from '../../pages/UnifiedSearch.ts'
-
-describe('files: Search and filter in files list', { testIsolation: true }, () => {
- const unifiedSearch = new UnifiedSearchPage()
- let user: User
-
- beforeEach(() => cy.createRandomUser().then(($user) => {
- user = $user
-
- cy.mkdir(user, '/a folder')
- cy.uploadContent(user, new Blob([]), 'text/plain', '/b file')
- cy.uploadContent(user, new Blob([]), 'text/plain', '/a folder/c file')
- cy.login(user)
- cy.visit('/apps/files')
- }))
-
- it('files app supports local search', () => {
- unifiedSearch.openLocalSearch()
- unifiedSearch.localSearchInput()
- .should('not.have.css', 'display', 'none')
- .and('not.be.disabled')
- })
-
- it('filters current view', () => {
- // All are visible by default
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('be.visible')
-
- // Set up a search query
- unifiedSearch.openLocalSearch()
- unifiedSearch.typeLocalSearch('a folder')
-
- // See that only the folder is visible
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('not.exist')
- })
-
- it('resets filter when changeing the directory', () => {
- // All are visible by default
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('be.visible')
-
- // Set up a search query
- unifiedSearch.openLocalSearch()
- unifiedSearch.typeLocalSearch('a folder')
-
- // See that only the folder is visible
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('not.exist')
-
- // go to that folder
- navigateToFolder('a folder')
-
- // see that the folder is not filtered
- getRowForFile('c file').should('be.visible')
- })
-
- it('resets filter when changeing the view', () => {
- // All are visible by default
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('be.visible')
-
- // Set up a search query
- unifiedSearch.openLocalSearch()
- unifiedSearch.typeLocalSearch('a folder')
-
- // See that only the folder is visible
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('not.exist')
-
- // go to other view
- cy.get('[data-cy-files-navigation-item="personal"] a').click({ force: true })
- // wait for view changed
- cy.url().should('match', /apps\/files\/personal/)
-
- // see that the folder is not filtered
- getRowForFile('a folder').should('be.visible')
- getRowForFile('b file').should('be.visible')
-
- // see the filter bar is gone
- unifiedSearch.localSearchInput().should('not.exist')
- })
-})
--- /dev/null
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Page object model for the files filters
+ */
+export class FilesFilterPage {
+
+ filterContainter() {
+ return cy.get('[data-cy-files-filters]')
+ }
+
+ activeFiltersList() {
+ return cy.findByRole('list', { name: 'Active filters' })
+ }
+
+ activeFilters() {
+ return this.activeFiltersList().findAllByRole('listitem')
+ }
+
+ removeFilter(name: string | RegExp) {
+ const el = typeof name === 'string'
+ ? this.activeFilters().should('contain.text', name)
+ : this.activeFilters().should('match', name)
+ el.should('exist')
+ // click the button
+ el.findByRole('button', { name: 'Remove filter' })
+ .should('exist')
+ .click({ force: true })
+ }
+
+}
--- /dev/null
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Page object model for the files app navigation
+ */
+export class FilesNavigationPage {
+
+ navigation() {
+ return cy.findByRole('navigation', { name: 'Files' })
+ }
+
+ searchInput() {
+ return this.navigation().findByRole('searchbox', { name: /filter filenames/i })
+ }
+
+ searchClearButton() {
+ return this.navigation().findByRole('button', { name: /clear search/i })
+ }
+
+ settingsToggle() {
+ return this.navigation().findByRole('link', { name: 'Files settings' })
+ }
+
+ views() {
+ return this.navigation().findByRole('list', { name: 'Views' })
+ }
+
+ quota() {
+ return this.navigation().find('[data-cy-files-navigation-settings-quota]')
+ }
+
+}
projects / nextcloud-server.git / commitdiff