Merge pull request #7173 from owncloud/continue-external-apps-fix

Continue external apps fix

changelog/unreleased/bugfix-external-app-title

@@ -0,0 +1,5 @@
+Bugfix: Re-introduce dynamic app name in document title
+
+The `external` app was missing the dynamic app name after some recent refactoring. It has been reintroduced.
+
+https://github.com/owncloud/web/pull/7173

changelog/unreleased/bugfix-external-apps

@@ -0,0 +1,6 @@
+Bugfix: External apps fixes
+
+Bug introduced in #6870. A method used to communicate with the backend was not properly added to the extension after being moved to a different location.
+
+https://github.com/owncloud/web/pull/7166
+https://github.com/owncloud/web/pull/7173

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

@@ -37,8 +37,9 @@ import { mapGetters } from 'vuex'
 import ErrorScreen from './components/ErrorScreen.vue'
 import LoadingScreen from './components/LoadingScreen.vue'
 import { DavProperties } from 'web-pkg/src/constants'
-import { buildResource } from '../../web-app-files/src/helpers/resources'
-import { useAppDefaults } from 'web-pkg/src/composables'
+import { buildResource } from 'files/src/helpers/resources'
+import { computed, unref } from '@vue/composition-api'
+import { queryItemAsString, useAppDefaults, useRouteQuery } from 'web-pkg/src/composables'
 
 // FIXME: hacky, get rid asap, just a workaround
 // same as packages/web-app-files/src/views/PublicFiles.vue
@@ -66,10 +67,14 @@ export default {
     LoadingScreen
   },
   setup() {
+    const appName = useRouteQuery('app')
+    const applicationName = computed(() => queryItemAsString(unref(appName)))
     return {
       ...useAppDefaults({
-        applicationId: 'external'
-      })
+        applicationId: 'external',
+        applicationName
+      }),
+      applicationName
     }
   },
 
@@ -87,18 +92,15 @@ export default {
     pageTitle() {
       const translated = this.$gettext('"%{appName}" app page')
       return this.$gettextInterpolate(translated, {
-        appName: this.appName
+        appName: this.applicationName
       })
     },
     iFrameTitle() {
       const translated = this.$gettext('"%{appName}" app content area')
       return this.$gettextInterpolate(translated, {
-        appName: this.appName
+        appName: this.applicationName
       })
     },
-    appName() {
-      return this.$route.query.app
-    },
     fileId() {
       return this.$route.query.fileId
     }
@@ -118,7 +120,7 @@ export default {
         configUrl +
         appOpenUrl +
         `?file_id=${fileId}` +
-        (this.appName ? `&app_name=${this.appName}` : '')
+        (this.applicationName ? `&app_name=${this.applicationName}` : '')
 
       const response = await this.makeRequest('POST', url)
 
@@ -130,19 +132,17 @@ export default {
         return
       }
 
-      const data = await response.json()
-
-      if (!data.app_url || !data.method) {
+      if (!response.data.app_url || !response.data.method) {
         this.errorMessage = this.$gettext('Error in app server response')
         this.loading = false
         this.loadingError = true
         console.error('Error in app server response')
         return
       }
 
-      this.appUrl = data.app_url
-      this.method = data.method
-      if (data.form_parameters) this.formParameters = data.form_parameters
+      this.appUrl = response.data.app_url
+      this.method = response.data.method
+      if (response.data.form_parameters) this.formParameters = response.data.form_parameters
 
       if (this.method === 'POST' && this.formParameters) {
         this.$nextTick(() => this.$refs.subm.click())

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

@@ -143,7 +143,7 @@ describe('The app provider extension', () => {
       Promise.resolve({
         ok: true,
         status: 200,
-        json: () => providerSuccessResponseGet
+        data: providerSuccessResponseGet
       })
     )
 
@@ -158,7 +158,7 @@ describe('The app provider extension', () => {
       Promise.resolve({
         ok: true,
         status: 200,
-        json: () => providerSuccessResponsePost
+        data: providerSuccessResponsePost
       })
     )
     const wrapper = createShallowMountWrapper(makeRequest)
@@ -178,7 +178,8 @@ function createShallowMountWrapper(makeRequest, options = {}) {
       $route
     },
     computed: {
-      currentFileContext: () => $route.params
+      currentFileContext: () => $route.params,
+      applicationName: () => $route.query.app
     },
     methods: {
       getFileInfo: mockFileInfo,

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -30,7 +30,7 @@
           </li>
           <li
             v-for="(newFileHandler, key) in newFileHandlers"
-            :key="key"
+            :key="`file-creation-item-${key}`"
             class="create-list-file oc-menu-item-hover"
           >
             <oc-button
@@ -48,7 +48,7 @@
           <template v-if="mimetypesAllowedForCreation">
             <li
               v-for="(mimetype, key) in mimetypesAllowedForCreation"
-              :key="key"
+              :key="`file-creation-item-external-${key}`"
               class="create-list-file oc-menu-item-hover"
             >
               <oc-button

packages/web-pkg/src/composables/appDefaults/useAppDefaults.ts

@@ -9,21 +9,24 @@ import {
   useAppNavigation,
   AppNavigationResult,
   contextQueryToFileContextProps,
-  contextRouteNameKey
+  contextRouteNameKey,
+  queryItemAsString
 } from './useAppNavigation'
 import { useAppConfig, AppConfigResult } from './useAppConfig'
 import { useAppFileHandling, AppFileHandlingResult } from './useAppFileHandling'
 import { useAppFolderHandling, AppFolderHandlingResult } from './useAppFolderHandling'
 import { useAppDocumentTitle } from './useAppDocumentTitle'
-import { usePublicLinkPassword, usePublicLinkContext } from '../authContext'
+import { usePublicLinkPassword, usePublicLinkContext, useRequest } from '../authContext'
 import { useClientService } from '../clientService'
+import { MaybeRef } from '../../utils'
 
 // TODO: this file/folder contains file/folder loading logic extracted from preview and drawio extensions
 // Discussion how to progress from here can be found in this issue:
 // https://github.com/owncloud/web/issues/3301
 
 interface AppDefaultsOptions {
   applicationId: string
+  applicationName?: MaybeRef<string>
   clientService?: ClientService
 }
 
@@ -46,14 +49,6 @@ export function useAppDefaults(options: AppDefaultsOptions): AppDefaultsResult {
   const publicLinkPassword = usePublicLinkPassword({ store })
 
   const currentFileContext = computed((): FileContext => {
-    const queryItemAsString = (queryItem: string | string[]) => {
-      if (Array.isArray(queryItem)) {
-        return queryItem[0]
-      }
-
-      return queryItem
-    }
-
     const path = `/${unref(currentRoute).params.filePath?.split('/').filter(Boolean).join('/')}`
 
     return {
@@ -64,7 +59,13 @@ export function useAppDefaults(options: AppDefaultsOptions): AppDefaultsResult {
     }
   })
 
-  useAppDocumentTitle({ store, document, applicationId, currentFileContext })
+  useAppDocumentTitle({
+    store,
+    document,
+    applicationId,
+    applicationName: options.applicationName,
+    currentFileContext
+  })
 
   return {
     isPublicLinkContext,
@@ -76,6 +77,7 @@ export function useAppDefaults(options: AppDefaultsOptions): AppDefaultsResult {
       isPublicLinkContext,
       publicLinkPassword
     }),
-    ...useAppFolderHandling({ clientService, store, isPublicLinkContext, publicLinkPassword })
+    ...useAppFolderHandling({ clientService, store, isPublicLinkContext, publicLinkPassword }),
+    ...useRequest({ clientService, store, currentRoute: unref(currentRoute) })
   }
 }

packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts

@@ -4,18 +4,21 @@ import { FileContext } from './types'
 import { useAppMeta } from './useAppMeta'
 import { useDocumentTitle } from './useDocumentTitle'
 import { Store } from 'vuex'
+import { MaybeRef } from '../../utils'
 
 interface AppDocumentTitleOptions {
   store: Store<any>
   document: Document
   applicationId: string
+  applicationName?: MaybeRef<string>
   currentFileContext: Ref<FileContext>
 }
 
 export function useAppDocumentTitle({
   store,
   document,
   applicationId,
+  applicationName,
   currentFileContext
 }: AppDocumentTitleOptions): void {
   const appMeta = useAppMeta({ applicationId, store })
@@ -24,7 +27,11 @@ export function useAppDocumentTitle({
     const fileName = basename(unref(unref(currentFileContext).fileName))
     const meta = unref(unref(appMeta).applicationMeta)
 
-    return [fileName, meta.name || meta.id, store.getters.configuration.currentTheme.general.name]
+    return [
+      fileName,
+      unref(applicationName) || meta.name || meta.id,
+      store.getters.configuration.currentTheme.general.name
+    ]
       .filter(Boolean)
       .join(' - ')
   })

packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts

@@ -51,7 +51,7 @@ export const contextQueryToFileContextProps = (
   }
 }
 
-const queryItemAsString = (queryItem: string | string[]) => {
+export const queryItemAsString = (queryItem: string | string[]) => {
   if (Array.isArray(queryItem)) {
     return queryItem[0]
   }