Merge pull request #6003 from cernbox/up_app_provider

Improvements for app provider

changelog/unreleased/bugfix-no-context-menu-app-provider

@@ -0,0 +1,6 @@
+Bugfix: Show context menu for all file extensions
+
+The context menu was failing to build for file extensions that did not have a match in the apps from the app provider.
+
+https://github.com/owncloud/web/issues/6002
+https://github.com/owncloud/web/pull/6003

changelog/unreleased/bugfix-no-scroll-app-provider

@@ -0,0 +1,6 @@
+Bugfix: Do not scroll on apps open in app provider
+
+Apps opened from the app provider were taking more than the window size, prompting the use of the scrollbar.
+
+https://github.com/owncloud/web/issues/5960
+https://github.com/owncloud/web/pull/6003

changelog/unreleased/enhancement-app-provider-feedback

@@ -0,0 +1,5 @@
+Enhancement: Show errors when failing to open app in app provider
+
+The error message provided by wopi is now displayed to the user, giving some context on why it failed to open a file.
+
+https://github.com/owncloud/web/pull/6003

packages/web-app-external/src/App.vue

@@ -1,27 +1,27 @@
 <template>
   <main
-    class="uk-height-viewport"
+    class="uk-height-1-1"
     :class="{
       'uk-flex uk-flex-center uk-flex-middle': loading || loadingError
     }"
   >
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <loading-screen v-if="loading" />
-    <error-screen v-else-if="loadingError" />
+    <error-screen v-else-if="loadingError" :message="errorMessage" />
     <iframe
       v-if="appUrl && method === 'GET'"
       :src="appUrl"
-      class="uk-width-1-1 uk-height-viewport"
+      class="uk-width-1-1 uk-height-1-1"
       :title="iFrameTitle"
     />
-    <div v-if="appUrl && method === 'POST' && formParameters">
+    <div v-if="appUrl && method === 'POST' && formParameters" class="uk-height-1-1">
       <form :action="appUrl" target="app-iframe" method="post">
         <input ref="subm" type="submit" :value="formParameters" class="oc-hidden" />
         <div v-for="(item, key, index) in formParameters" :key="index">
           <input :name="key" :value="item" type="hidden" />
         </div>
       </form>
-      <iframe name="app-iframe" class="uk-width-1-1 uk-height-viewport" :title="iFrameTitle" />
+      <iframe name="app-iframe" class="uk-width-1-1 uk-height-1-1" :title="iFrameTitle" />
     </div>
   </main>
 </template>
@@ -60,6 +60,7 @@ export default {
   data: () => ({
     loading: false,
     loadingError: false,
+    errorMessage: false,
     appUrl: '',
     method: '',
     formParameters: {}
@@ -123,11 +124,14 @@ export default {
     })
 
     if (response.status !== 200) {
+      const err = await response.json()
+      this.errorMessage = err.message
       this.loading = false
       this.loadingError = true
-      console.error('Error fetching app information', response.status, response.message)
+      console.error('Error fetching app information', response.status, this.errorMessage)
       return
     }
+
     const data = await response.json()
 
     if (!data.app_url || !data.method) {

packages/web-app-external/src/components/ErrorScreen.vue

@@ -1,6 +1,23 @@
 <template>
   <div class="uk-text-center">
     <oc-icon size="xxlarge" name="warning" />
-    <p v-translate>Error when loading the application</p>
+    <h1 v-translate class="oc-text-lead">Error when loading the application</h1>
+    <p v-if="message">{{ message }}</p>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'ErrorScreen',
+  props: {
+    /**
+     * error message
+     */
+    message: {
+      default: '',
+      type: String,
+      required: false
+    }
+  }
+}
+</script>

packages/web-app-external/tests/unit/__snapshots__/app.spec.js.snap

@@ -1,38 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`The app provider extension should be able to load an iFrame via get 1`] = `
-<main class="uk-height-viewport">
+<main class="uk-height-1-1">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
-  <!----> <iframe src="https://example.test/d12ab86/loe009157-MzBw" title="&quot;exampleApp&quot; app content area" class="uk-width-1-1 uk-height-viewport"></iframe>
+  <!----> <iframe src="https://example.test/d12ab86/loe009157-MzBw" title="&quot;exampleApp&quot; app content area" class="uk-width-1-1 uk-height-1-1"></iframe>
   <!---->
 </main>
 `;
 
 exports[`The app provider extension should be able to load an iFrame via post 1`] = `
-<main class="uk-height-viewport">
+<main class="uk-height-1-1">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
   <!---->
   <!---->
-  <div>
+  <div class="uk-height-1-1">
     <form action="https://example.test/d12ab86/loe009157-MzBw" target="app-iframe" method="post"><input type="submit" class="oc-hidden" value="[object Object]">
       <div><input name="access_token" type="hidden" value="asdfsadfsadf"></div>
       <div><input name="access_token_ttl" type="hidden" value="123456"></div>
-    </form> <iframe name="app-iframe" title="&quot;exampleApp&quot; app content area" class="uk-width-1-1 uk-height-viewport"></iframe>
+    </form> <iframe name="app-iframe" title="&quot;exampleApp&quot; app content area" class="uk-width-1-1 uk-height-1-1"></iframe>
   </div>
 </main>
 `;
 
 exports[`The app provider extension should fail for unauthenticated users 1`] = `
-<main class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle">
+<main class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
-  <errorscreen-stub></errorscreen-stub>
+  <loadingscreen-stub></loadingscreen-stub>
   <!---->
   <!---->
 </main>
 `;
 
 exports[`The app provider extension should show a loading spinner while loading 1`] = `
-<main class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle">
+<main class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
   <loadingscreen-stub></loadingscreen-stub>
   <!---->
@@ -41,9 +41,9 @@ exports[`The app provider extension should show a loading spinner while loading
 `;
 
 exports[`The app provider extension should show a meaningful message if an error occurs during loading 1`] = `
-<main class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle">
+<main class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
   <h1 class="oc-invisible-sr">"exampleApp" app page</h1>
-  <errorscreen-stub></errorscreen-stub>
+  <loadingscreen-stub></loadingscreen-stub>
   <!---->
   <!---->
 </main>

packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap

@@ -3,6 +3,7 @@
 exports[`The external app error screen component displays an icon and a paragraph 1`] = `
 <div class="uk-text-center">
   <ocicon-stub size="xxlarge" name="warning"></ocicon-stub>
-  <p data-msgid="Error when loading the application" data-current-language="en_US">Error when loading the application</p>
+  <h1 class="oc-text-lead" data-msgid="Error when loading the application" data-current-language="en_US">Error when loading the application</h1>
+  <!---->
 </div>
 `;

packages/web-app-files/src/mixins/fileActions.js

@@ -207,8 +207,12 @@ export default {
         return []
       }
 
+      const filteredMimeTypes = this.mimeTypes.find((t) => t.mime_type === mimeType)
+      if (filteredMimeTypes === undefined) {
+        return []
+      }
       const { app_providers: appProviders = [], default_application: defaultApplication } =
-        this.mimeTypes.find((t) => t.mime_type === mimeType)
+        filteredMimeTypes
 
       return appProviders.map((app) => {
         const label = this.$gettext('Open in %{ appName }')