Merge pull request #47443 from nextcloud/fix/files-non-visual-loading…

…-info

fix(files): Node loading information should be accessible

apps/files/src/components/FileEntry/FileEntryCheckbox.vue

@@ -5,7 +5,7 @@
 <template>
  <td class="files-list__row-checkbox"
  @keyup.esc.exact="resetSelection">
- <NcLoadingIcon v-if="isLoading" />
+ <NcLoadingIcon v-if="isLoading" :name="loadingLabel" />
  <NcCheckboxRadioSwitch v-else
  :aria-label="ariaLabel"
  :checked="isSelected"
@@ -83,6 +83,11 @@ export default defineComponent({
  ? t('files', 'Toggle selection for file "{displayName}"', { displayName: this.source.basename })
  : t('files', 'Toggle selection for folder "{displayName}"', { displayName: this.source.basename })
  },
+ loadingLabel() {
+ return this.isFile
+ ? t('files', 'File is loading')
+ : t('files', 'Folder is loading')
+ },
  },
 
  methods: {

cypress/e2e/files/files-renaming.cy.ts

@@ -67,4 +67,49 @@ describe('files: Rename nodes', { testIsolation: true }, () => {
  // See validity
  .should(haveValidity(/reserved name/i))
  })
+
+ it('shows accessible loading information', () => {
+ const { resolve, promise } = Promise.withResolvers()
+
+ getRowForFile('file.txt').should('be.visible')
+
+ // intercept the rename (MOVE)
+ // the callback will wait until the promise resolve (so we have time to check the loading state)
+ cy.intercept(
+ 'MOVE',
+ /\/remote.php\/dav\/files\//,
+ async () => { await promise },
+ ).as('moveFile')
+
+ // Start the renaming
+ triggerActionForFile('file.txt', 'rename')
+ getRowForFile('file.txt')
+ .findByRole('textbox', { name: 'Filename' })
+ .should('be.visible')
+ .type('{selectAll}new-name.txt{enter}')
+
+ // Loading state is visible
+ getRowForFile('new-name.txt')
+ .findByRole('img', { name: 'File is loading' })
+ .should('be.visible')
+ // checkbox is not visible
+ getRowForFile('new-name.txt')
+ .findByRole('checkbox', { name: /^Toggle selection/ })
+ .should('not.exist')
+
+ cy.log('Resolve promise to preoceed with MOVE request')
+ .then(() => resolve(null))
+
+ // Ensure the request is done (file renamed)
+ cy.wait('@moveFile')
+
+ // checkbox visible again
+ getRowForFile('new-name.txt')
+ .findByRole('checkbox', { name: /^Toggle selection/ })
+ .should('exist')
+ // see the loading state is gone
+ getRowForFile('new-name.txt')
+ .findByRole('img', { name: 'File is loading' })
+ .should('not.exist')
+ })
 })

cypress/support/e2e.ts

@@ -5,6 +5,9 @@
 import 'cypress-axe'
 import './commands.ts'
 
+// Remove with Node 22
+import 'core-js/actual/promise/with-resolvers.js'
+
 // Fix ResizeObserver loop limit exceeded happening in Cypress only
 // @see https://github.com/cypress-io/cypress/issues/20341
 Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'))