[full-ci] Warn when using incompatible browser

[diocas]

We had many users complaining that things were not working and there was no clear reason why... So we decided to warn them.

There's a new compilation env variable to set a link to documentation, in case you have it.
Also, in case the browser still somewhat supports most of the code, users can still force launch it to check it.

I've opened the PR to see your comments, suggestions and interest, but @elizavetaRa is still going to confirm with our users that it displays the error properly (e.g maybe the css will not be well formatted or the regex won't match?)
If there are necessary changes, we'll update the PR.

[ownclouders]

Results for oCISSharingPublic1 https://drone.owncloud.com/owncloud/web/30321/67/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUISharingPublicBasic-publicLinkEdit_feature-L89.png

webUISharingPublicBasic-publicLinkPublicActions_feature-L19.png

[pascalwengerter]

@diocas why not reuse

web/packages/web-runtime/src/layouts/Application.vue

Line 100 in 83d136c

ieDeprecationWarning() {

(the way you're doing it now may bring problems in terms of a11y because it can never be translated the way translations are currently handled)?

[diocas]

As far as I understood from @elizavetaRa , who is handling our user tickets, they never reach that point.. But, if we do, yes, we could re-use that (but I would suggest maybe to still use the regex)
Our users are reporting issues mainly in 2y old Safari's, if I understood correctly.

The error is not translated, just like the generic error is not translated. Not very user friendly, but not sure we want to spend much effort now in doing that.

[elizavetaRa]

@pascalwengerter Our users with older browsers see either white/black screen or the "Oops, something went wrong" error, which means runtimeFailure. I could reproduce first on Edge 85 and second on Firefox 75 (Ubuntu), screenshot attached

Regarding translations, the "Oops, something went wrong" is also not translated in my understanding, so why not show a more meaningful error if we detect an unsupported browser? This way we warn the user but still give the possibility to try it out (and optionally a link to list of supported browsers)

[kulmann]

Really nice, thank you for the contribution! 🤩

[kulmann]

@diocas could you please rebase to current master? Or should I take over myself?

[diocas]

Done

[kulmann]

@diocas why not reuse

web/packages/web-runtime/src/layouts/Application.vue

Line 100 in 83d136c

ieDeprecationWarning() {

(the way you're doing it now may bring problems in terms of a11y because it can never be translated the way translations are currently handled)?

This PR catches the "old browser" scenario way earlier and is based on our project configuration. I'd even go a step further and remove the IE deprecation warning from the Application layout, in favour of this solution.

[kulmann]

I've added [full-ci] to the PR title. Could you amend the last commit and force-push @diocas ? Or trigger CI again with another commit. Would like to see a full CI run for being able to tell what fails in CI. (we have 2 flaky tests related to the datepicker today... if only those were failing I'd force-merge this PR).

[kulmann]

Looks like there were only datepicker-related issues in tests, which had nothing to do with this PR (see #8058 ) - could you rebase to most current master again? Sorry 🙈

[diocas]

Looks like it stopped in smth unrelated again, no?

[kulmann]

Looks like it stopped in smth unrelated again, no?

Yes, a flaky unit test -.- I restarted the CI, that's sufficient in this case.

[kulmann]

I looked into the failing acceptance tests. A test selector for the publicLinkPasswordPage is not specific enough. Please apply the following patch to make the tests pass:

diff --git a/tests/acceptance/pageObjects/publicLinkPasswordPage.js b/tests/acceptance/pageObjects/publicLinkPasswordPage.js
index f9280ca05..bd3f21132 100644
--- a/tests/acceptance/pageObjects/publicLinkPasswordPage.js
+++ b/tests/acceptance/pageObjects/publicLinkPasswordPage.js
@@ -54,14 +54,15 @@ module.exports = {
       selector: '.oc-login-authorize-button'
     },
     resourceProtectedText: {
-      selector: '//*[@class="oc-card-header"]',
+      selector: '//*[contains(@class, "oc-link-resolve")]//*[@class="oc-card-header"]',
       locateStrategy: 'xpath'
     },
     linkResolveErrorTitle: {
       selector: '.oc-link-resolve-error-title'
     },
     publicLinkPasswordSection: {
-      selector: '//*[@class="oc-card-header"]//*[text()="This resource is password-protected"]',
+      selector:
+        '//*[contains(@class, "oc-link-resolve")]//*[@class="oc-card-header"]//*[text()="This resource is password-protected"]',
       locateStrategy: 'xpath'
     }
   }

(reason why it failed: //*[@class="oc-card-header"] also exists in your browser not supported element and is the first one that is found in the DOM)

[kulmann]

7.4: Pulling from owncloudci/php seems like drone is in weekend mode.... (┛ಠ_ಠ)┛彡┻━┻

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
0.0% Duplication