fix(files): handle empty view with error

[ShGKme]

• Resolves: "No files" display on Files tab w/ faulty federation shares or External Storage #45190
• Same issue for any errors: no permissions, not found, server unavailable etc.

Summary

Handles error during content fetching.

In Nextcloud 27 in case of an error it redirected to the / root and (sometimes) showed a toast message with an error.

server/apps/files/js/filelist.js

Lines 2256 to 2296 in ba452f9

	if (status === 401) {
	// We are not authentificated, so reload the page so that we get
	// redirected to the login page while saving the current url.
	location.reload();
	}
	// Firewall Blocked request?
	if (status === 403) {
	// Go home
	this.changeDirectory('/');
	OC.Notification.show(t('files', 'This operation is forbidden'), {type: 'error'});
	return false;
	}
	// Did share service die or something else fail?
	if (status === 500) {
	// Go home
	this.changeDirectory('/');
	OC.Notification.show(t('files', 'This directory is unavailable, please check the logs or contact the administrator'),
	{type: 'error'}
	);
	return false;
	}
	if (status === 503) {
	// Go home
	if (this.getCurrentDirectory() !== '/') {
	this.changeDirectory('/');
	// TODO: read error message from exception
	OC.Notification.show(t('files', 'Storage is temporarily not available'),
	{type: 'error'}
	);
	}
	return false;
	}
	if (status === 400 || status === 404 || status === 405) {
	// go back home
	this.changeDirectory('/');
	return false;
	}

After migrating to Vue, there is no error handling. It just shows a folder as an empty folder.

It is especially confusing when it was supposed to be a valid link:

• Unshared/deleted shared folder
• Unavailable storage

It looks like the folder is available, just empty.

I found redirecting to the root less convenient to a user in flavor of explicitly showing an error and a button to reload it.

But I'm not sure about the text/design.

Screenshots

Before	After

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[skjnldsv]

I've seen this code snippet before in our vue migration.
Maybe it should be a composable or mixin instead of a copy ? 🤔

[ShGKme]

It is not a direct copy, but addopted simular code (linked in the PR description).

Moving to an util (not a mixin/composable as this is not a part of Vue component).

[ShGKme]

Moved to utils

[ShGKme]

Maybe make sense to move to nextcloud-files

[ShGKme]

Icon is updated

[susnux]

Same here also available in @nextcloud/sharing, also version here only works with legacy ui.

[ShGKme]

Rebased onto master, squashed

[ShGKme]

/backport to stable30

[ShGKme]

/backport to stable29

[backportbot]

The backport to stable29 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable29
git pull origin stable29

# Create the new backport branch
git checkout -b backport/48625/stable29

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts, resolve them
git cherry-pick 2696715d 080a8c7f 18d52323 ed9fdbad

# Push the cherry pick commit to the remote repository and open a pull request
git push origin backport/48625/stable29

Error: No changes found in backport branch

---

Learn more about backports at https://docs.nextcloud.com/server/stable/go.php?to=developer-backports.