Dynamic app provider apps (#11103)

packages/web-app-external/package.json

@@ -11,6 +11,8 @@
   "peerDependencies": {
     "@ownclouders/web-client": "workspace:*",
     "@ownclouders/web-pkg": "workspace:*",
+    "lodash-es": "4.17.21",
+    "pinia": "2.1.7",
     "uuid": "9.0.1",
     "vue-concurrency": "5.0.1",
     "vue3-gettext": "2.4.0",

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

@@ -26,20 +26,30 @@
 
 <script lang="ts">
 import { stringify } from 'qs'
-import { PropType, computed, defineComponent, unref, nextTick, ref, watch, VNodeRef } from 'vue'
+import {
+  PropType,
+  computed,
+  defineComponent,
+  unref,
+  nextTick,
+  ref,
+  watch,
+  VNodeRef,
+  onMounted
+} from 'vue'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 import { urlJoin } from '@ownclouders/web-client'
 import {
   isSameResource,
-  queryItemAsString,
   useCapabilityStore,
   useConfigStore,
   useMessages,
   useRequest,
-  useRouteQuery
+  useAppProviderService,
+  useRoute
 } from '@ownclouders/web-pkg'
 import {
   isProjectSpaceResource,
@@ -54,31 +64,34 @@ export default defineComponent({
     resource: { type: Object as PropType<Resource>, required: true },
     isReadOnly: { type: Boolean, required: true }
   },
-  emits: ['update:applicationName'],
-  setup(props, { emit }) {
+  setup(props) {
     const language = useGettext()
     const { $gettext } = language
     const { showErrorMessage } = useMessages()
     const capabilityStore = useCapabilityStore()
     const configStore = useConfigStore()
-
+    const route = useRoute()
+    const appProviderService = useAppProviderService()
     const { makeRequest } = useRequest()
 
-    const appNameQuery = useRouteQuery('app')
+    const appName = computed(() => {
+      const lowerCaseAppName = unref(route)
+        .name.toString()
+        .replace('external-', '')
+        .replace('-apps', '')
+      return appProviderService.appNames.find(
+        (appName) => appName.toLowerCase() === lowerCaseAppName
+      )
+    })
+
     const appUrl = ref()
     const formParameters = ref({})
     const method = ref()
     const subm: VNodeRef = ref()
 
-    const applicationName = computed(() => {
-      const appName = queryItemAsString(unref(appNameQuery))
-      emit('update:applicationName', appName)
-      return appName
-    })
-
     const iFrameTitle = computed(() => {
       return $gettext('"%{appName}" app content area', {
-        appName: unref(applicationName)
+        appName: unref(appName)
       })
     })
 
@@ -106,7 +119,7 @@ export default defineComponent({
         const query = stringify({
           file_id: fileId,
           lang: language.current,
-          ...(unref(applicationName) && { app_name: encodeURIComponent(unref(applicationName)) }),
+          ...(unref(appName) && { app_name: encodeURIComponent(unref(appName)) }),
           ...(viewMode && { view_mode: viewMode })
         })
 
@@ -168,19 +181,13 @@ export default defineComponent({
         }
       } catch (e) {}
     }
-    watch(
-      applicationName,
-      (newAppName, oldAppName) => {
-        if (determineOpenAsPreview(newAppName) && newAppName !== oldAppName) {
-          window.addEventListener('message', catchClickMicrosoftEdit)
-        } else {
-          window.removeEventListener('message', catchClickMicrosoftEdit)
-        }
-      },
-      {
-        immediate: true
+    onMounted(() => {
+      if (determineOpenAsPreview(unref(appName))) {
+        window.addEventListener('message', catchClickMicrosoftEdit)
+      } else {
+        window.removeEventListener('message', catchClickMicrosoftEdit)
       }
-    )
+    })
 
     watch(
       [props.resource],
@@ -191,7 +198,7 @@ export default defineComponent({
 
         let viewMode = props.isReadOnly ? 'view' : 'write'
         if (
-          determineOpenAsPreview(unref(applicationName)) &&
+          determineOpenAsPreview(unref(appName)) &&
           (isShareSpaceResource(props.space) ||
             isPublicSpaceResource(props.space) ||
             isProjectSpaceResource(props.space))

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

@@ -0,0 +1,82 @@
+<template>
+  <main
+    class="external-redirect oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle"
+  >
+    <h1 class="oc-invisible-sr" v-text="pageTitle" />
+    <div class="oc-card oc-card-body oc-text-center oc-width-large">
+      <h2 key="external-redirect-loading">
+        <span v-text="$gettext('One moment please…')" />
+      </h2>
+      <p v-text="$gettext('You are being redirected.')" />
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, unref, watch } from 'vue'
+import { queryItemAsString, useRouteMeta, useRouteParam, useRouteQuery } from '@ownclouders/web-pkg'
+import { useRouter } from 'vue-router'
+import { omit } from 'lodash-es'
+import { useGettext } from 'vue3-gettext'
+import { useApplicationReadyStore } from './piniaStores'
+import { storeToRefs } from 'pinia'
+
+export default defineComponent({
+  setup() {
+    const { $gettext } = useGettext()
+
+    const appNameQuery = useRouteQuery('app')
+    const appNameParam = useRouteParam('appCatchAll')
+    const appName = computed(() => {
+      if (unref(appNameParam)) {
+        return unref(appNameParam)
+      }
+      return queryItemAsString(unref(appNameQuery))
+    })
+    const router = useRouter()
+    const { isReady } = storeToRefs(useApplicationReadyStore())
+
+    watch(
+      isReady,
+      (ready) => {
+        if (!ready) {
+          return
+        }
+
+        router.replace({
+          name: `external-${unref(appName).toLowerCase()}-apps`,
+          query: omit(unref(router.currentRoute).query, 'app')
+        })
+      },
+      { immediate: true }
+    )
+
+    const title = useRouteMeta('title')
+    const pageTitle = computed(() => {
+      return $gettext(unref(title))
+    })
+
+    return {
+      pageTitle
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.external-redirect {
+  .oc-card {
+    background: var(--oc-color-background-highlight);
+    border-radius: 15px;
+
+    &-body {
+      h2 {
+        margin-top: 0;
+      }
+      p {
+        font-size: var(--oc-font-size-large);
+      }
+    }
+  }
+}
+</style>