[full-ci] Drive aliases

changelog/unreleased/change-drive-aliases-in-urls

@@ -0,0 +1,9 @@
+Change: Drive aliases in URLs
+
+We changed the URL format to not use storageIds in the URL path anymore to identify spaces, but instead use drive aliases of spaces in the URL path.
+
+BREAKING CHANGE for users: this breaks existing bookmarks - they won't resolve anymore.
+BREAKING CHANGE for developers: the appDefaults composables from web-pkg now work with drive aliases, concatenated with relative item paths, instead of webdav paths. If you use the appDefaults composables in your application it's likely that your code needs to be adapted.
+
+https://github.com/owncloud/web/issues/6648
+https://github.com/owncloud/web/pull/7430

changelog/unreleased/enhancement-webdav-client

@@ -0,0 +1,7 @@
+Enhancement: webdav support in web-client package
+
+Only relevant for developers:
+We've added webdav support to the `web-client` package. This wraps the existing webdav requests from ownCloud SDK but
+handles the differentiation of public link and user-specific webdav requests internally.
+
+https://github.com/owncloud/web/pull/7430

package.json

@@ -96,6 +96,7 @@
     "jest-axe": "^5.0.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock-axios": "^4.5.0",
+    "jest-mock-extended": "^3.0.1",
     "jest-serializer-vue": "^2.0.2",
     "join-path": "^1.1.1",
     "license-checker-rseidelsohn": "^3.1.0",

packages/web-app-draw-io/src/App.vue

@@ -13,15 +13,16 @@
     />
   </main>
 </template>
-<script>
+<script lang="ts">
 import { mapActions } from 'vuex'
-import { basename } from 'path'
 import qs from 'qs'
 import { DateTime } from 'luxon'
 import { DavPermission, DavProperty } from 'web-pkg/src/constants'
 import { useAppDefaults } from 'web-pkg/src/composables'
+import { defineComponent } from '@vue/composition-api'
+import { basename } from 'path'
 
-export default {
+export default defineComponent({
   name: 'DrawIoEditor',
   setup() {
     return {
@@ -110,19 +111,21 @@ export default {
         '*'
       )
     },
-    checkPermissions() {
-      this.getFileInfo(this.filePath, [DavProperty.Permissions])
-        .then((v) => {
-          this.isReadOnly =
-            v.fileInfo[DavProperty.Permissions].indexOf(DavPermission.Updateable) === -1
-          this.loading = false
-        })
-        .catch((error) => {
-          this.errorPopup(error)
+    async checkPermissions() {
+      try {
+        const resource = await this.getFileInfo(this.currentFileContext, {
+          davProperties: [DavProperty.Permissions]
         })
+        this.isReadOnly = ![DavPermission.Updateable, DavPermission.FileUpdateable].some(
+          (p) => (resource.permissions || '').indexOf(p) > -1
+        )
+        this.loading = false
+      } catch (error) {
+        this.errorPopup(error)
+      }
     },
     load() {
-      this.getFileContents(this.filePath)
+      this.getFileContents(this.currentFileContext)
         .then((resp) => {
           this.currentETag = resp.headers.ETag
           this.$refs.drawIoEditor.contentWindow.postMessage(
@@ -138,9 +141,7 @@ export default {
           this.errorPopup(error)
         })
     },
-    importVisio() {
-      const url = this.getFileUrl(this.filePath)
-
+    async importVisio() {
       const getDescription = () =>
         this.$gettextInterpolate(
           this.$gettext('The diagram will open as a new .drawio file: %{file}'),
@@ -153,12 +154,14 @@ export default {
         title: this.$gettext('Diagram imported'),
         desc: getDescription()
       })
-      this.makeRequest('GET', url)
+      this.getFileContents(this.currentFileContext, {
+        responseType: 'arrayBuffer'
+      })
         .then((resp) => {
           // Not setting `currentETag` on imports allows to create new files
           // otherwise the ETag comparison fails with a 412 during the autosave/save event
           // this.currentETag = resp.headers.get('etag')
-          return resp.arrayBuffer()
+          return resp.body
         })
         .then((arrayBuffer) => {
           const blob = new Blob([arrayBuffer], { type: 'application/vnd.visio' })
@@ -180,7 +183,8 @@ export default {
         })
     },
     save(payload, auto = false) {
-      this.putFileContents(this.filePath, payload.xml, {
+      this.putFileContents(this.currentFileContext, {
+        content: payload.xml,
         previousEntityTag: this.currentETag
       })
         .then((resp) => {
@@ -228,7 +232,7 @@ export default {
       return DateTime.local().toFormat('YYYYMMDD[T]HHmmss')
     }
   }
-}
+})
 </script>
 <style scoped>
 #drawio-editor {

packages/web-app-draw-io/src/index.js

@@ -4,7 +4,7 @@ import App from './App.vue'
 const routes = [
   {
     name: 'draw-io',
-    path: '/:filePath*',
+    path: '/:driveAliasAndItem*',
     component: App,
     meta: {
       auth: false,

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

@@ -39,6 +39,10 @@ import LoadingScreen from './components/LoadingScreen.vue'
 import { computed, unref } from '@vue/composition-api'
 import { queryItemAsString, useAppDefaults, useRouteQuery } from 'web-pkg/src/composables'
 import { defineComponent } from '@vue/runtime-core'
+import { DavProperty } from 'web-pkg/src/constants'
+import { urlJoin } from 'web-pkg/src/utils'
+import qs from 'qs'
+import { configurationManager } from 'web-pkg/src/configuration'
 
 export default defineComponent({
   name: 'ExternalApp',
@@ -68,7 +72,7 @@ export default defineComponent({
     formParameters: {}
   }),
   computed: {
-    ...mapGetters(['capabilities', 'configuration']),
+    ...mapGetters(['capabilities']),
 
     pageTitle() {
       const translated = this.$gettext('"%{appName}" app page')
@@ -89,19 +93,25 @@ export default defineComponent({
   async created() {
     this.loading = true
     try {
-      const filePath = this.currentFileContext.path
-      const fileId = this.fileId || (await this.getFileResource(filePath)).fileId
+      const fileId =
+        this.fileId ||
+        (
+          await this.getFileInfo(this.currentFileContext, {
+            davProperties: [DavProperty.FileId]
+          })
+        ).fileId
 
       // fetch iframe params for app and file
-      const configUrl = this.configuration.server
-      const appOpenUrl = this.capabilities.files.app_providers[0].open_url.replace(/^\/+/, '')
-      const url =
-        configUrl +
-        appOpenUrl +
-        `?file_id=${fileId}` +
-        `&lang=${this.$language.current}` +
-        (this.applicationName ? `&app_name=${this.applicationName}` : '')
-
+      const baseUrl = urlJoin(
+        configurationManager.serverUrl,
+        this.capabilities.files.app_providers[0].open_url
+      )
+      const query = qs.stringify({
+        file_id: fileId,
+        lang: this.$language.current,
+        ...(this.applicationName && { app_name: this.applicationName })
+      })
+      const url = `${baseUrl}?${query}`
       const response = await this.makeRequest('POST', url)
 
       if (response.status !== 200) {

packages/web-app-external/src/index.js

@@ -10,7 +10,7 @@ const appInfo = {
 const routes = [
   {
     name: 'apps',
-    path: '/:filePath*',
+    path: '/:driveAliasAndItem*',
     component: App,
     meta: {
       auth: false,

packages/web-app-external/src/store/index.ts

@@ -1,4 +1,6 @@
 import { Commit } from 'vuex'
+import { urlJoin } from 'web-pkg/src/utils'
+import { configurationManager } from 'web-pkg/src/configuration'
 
 interface AppProvider {
   icon: string
@@ -32,9 +34,11 @@ const actions = {
     if (!rootGetters.capabilities.files.app_providers[0]?.enabled) {
       return
     }
-    const serverUrl = rootGetters.configuration.server
-    const appList = rootGetters.capabilities.files.app_providers[0].apps_url
-    const url = serverUrl + appList.replace('/app', 'app')
+
+    const url = urlJoin(
+      configurationManager.serverUrl,
+      rootGetters.capabilities.files.app_providers[0].apps_url
+    )
 
     const response = await fetch(url)
 

packages/web-app-files/src/components/ActionMenuItem.vue

@@ -3,11 +3,11 @@
     <oc-button
       v-oc-tooltip="showTooltip || action.hideLabel ? action.label(filterParams) : ''"
       :type="action.componentType"
-      v-bind="getComponentProps(action, items)"
+      v-bind="componentProps"
       :class="[action.class, 'action-menu-item']"
       data-testid="action-handler"
       size="small"
-      v-on="getComponentListeners(action, items)"
+      v-on="componentListeners"
     >
       <oc-img
         v-if="action.img"
@@ -17,7 +17,7 @@
         class="oc-icon oc-icon-m"
       />
       <oc-img
-        v-else-if="hasExternalImageIcon(action)"
+        v-else-if="hasExternalImageIcon"
         data-testid="action-img"
         :src="action.icon"
         alt=""
@@ -51,8 +51,11 @@
   </li>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api'
+import { SpaceResource } from 'web-client/src/helpers'
+
+export default defineComponent({
   name: 'ActionMenuItem',
   props: {
     action: {
@@ -63,6 +66,11 @@ export default {
       type: Array,
       required: true
     },
+    space: {
+      type: Object as PropType<SpaceResource>,
+      required: false,
+      default: null
+    },
     appearance: {
       type: String,
       default: 'raw'
@@ -81,35 +89,40 @@ export default {
   computed: {
     filterParams() {
       return {
+        space: this.space,
         resources: this.items
       }
-    }
-  },
-  methods: {
-    getComponentProps(action, resources) {
+    },
+    hasExternalImageIcon() {
+      return this.action.icon && /^https?:\/\//i.test(this.action.icon)
+    },
+    componentProps() {
       const props = {
         appearance: this.appearance,
-        ...(action.isDisabled && { disabled: action.isDisabled() }),
-        ...(action.variation && { variation: action.variation })
+        ...(this.action.isDisabled && { disabled: this.action.isDisabled() }),
+        ...(this.action.variation && { variation: this.action.variation })
       }
 
-      if (action.componentType === 'router-link' && action.route) {
+      if (this.action.componentType === 'router-link' && this.action.route) {
         return {
           ...props,
-          to: action.route({ resources })
+          to: this.action.route(this.filterParams)
         }
       }
 
       return props
     },
-
-    getComponentListeners(action, resources) {
-      if (typeof action.handler !== 'function' || action.componentType !== 'button') {
+    componentListeners() {
+      if (typeof this.action.handler !== 'function' || this.action.componentType !== 'button') {
         return {}
       }
 
-      const callback = () => action.handler({ resources, ...action.handlerData })
-      if (action.keepOpen) {
+      const callback = () =>
+        this.action.handler({
+          ...this.filterParams,
+          ...this.action.handlerData
+        })
+      if (this.action.keepOpen) {
         return {
           click: (event) => {
             event.stopPropagation()
@@ -120,13 +133,9 @@ export default {
       return {
         click: callback
       }
-    },
-
-    hasExternalImageIcon(action) {
-      return action.icon && /^https?:\/\//i.test(action.icon)
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .action-menu-item {