Fix #5530: Upsert new files into files list

Check for http and https for external image icon sources Remove paddings in new and upload menus Remove line break for standalone new folder button Separate unit tests for AppBar and CreateAndUpload Fix file and folder upload postprocessing Fix search CI Minor dependency bumps
owncloud · Feb 24, 2022 · 2ebe252 · 2ebe252
1 parent 4b1faca
commit 2ebe252
Show file tree

Hide file tree

Showing 10 changed files with 441 additions and 288 deletions.
diff --git a/changelog/unreleased/bugfix-update-file-list-on-new-file b/changelog/unreleased/bugfix-update-file-list-on-new-file
@@ -0,0 +1,6 @@
+Bugfix: Update file list when creating new files
+
+We update the file list now when creating a file in an editor that openes in a new tab (like draw.io).
+
+https://github.com/owncloud/web/issues/5530
+https://github.com/owncloud/web/pull/6358
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
+    "@babel/core": "^7.17.5",
     "@babel/eslint-parser": "^7.16.5",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.16.5",
@@ -51,7 +51,7 @@
     "@playwright/test": "^1.17.2",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-html": "^0.2.0",
+    "@rollup/plugin-html": "^0.2.4",
     "@rollup/plugin-inject": "^4.0.4",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.3.0",
@@ -95,7 +95,7 @@
     "jest-serializer-vue": "^2.0.2",
     "join-path": "^1.1.1",
     "lodash": "^4.17.21",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.7",
     "pino": "^7.6.3",
     "pino-pretty": "^7.3.0",
     "playwright": "^1.17.1",

diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -15,7 +15,7 @@
         class="oc-icon oc-icon-m"
       />
       <oc-img
-        v-else-if="action.icon && action.icon.startsWith('https://')"
+        v-else-if="hasExternalImageIcon(action)"
         data-testid="action-img"
         :src="action.icon"
         alt=""
@@ -97,6 +97,10 @@ export default {
       return {
         click: callback
       }
+    },
+
+    hasExternalImageIcon(action) {
+      return action.icon && /^https?:\/\//i.test(action.icon)
     }
   }
 }

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -22,17 +22,13 @@
         padding-size="small"
       >
         <oc-list id="create-list">
-          <li class="create-list-folder oc-py-xs">
+          <li class="create-list-folder">
             <oc-button id="new-folder-btn" appearance="raw" @click="showCreateResourceModal">
               <oc-resource-icon :resource="{ isFolder: true, extension: '' }" />
               <translate>Folder</translate>
             </oc-button>
           </li>
-          <li
-            v-for="(newFileHandler, key) in newFileHandlersForRoute"
-            :key="key"
-            class="create-list-file oc-py-xs"
-          >
+          <li v-for="(newFileHandler, key) in newFileHandlers" :key="key" class="create-list-file">
             <oc-button
               appearance="raw"
               :class="['new-file-btn-' + newFileHandler.ext]"
@@ -46,7 +42,7 @@
             <li
               v-for="(mimetype, key) in mimetypesAllowedForCreation"
               :key="key"
-              class="create-list-file oc-py-xs"
+              class="create-list-file"
             >
               <oc-button
                 appearance="raw"
@@ -67,11 +63,11 @@
         variation="inverse"
         :aria-label="newButtonAriaLabel"
         :disabled="uploadOrFileCreationBlocked"
-        class="oc-background-primary-gradient"
+        class="oc-background-primary-gradient oc-text-nowrap"
         @click="showCreateResourceModal"
       >
         <oc-icon name="resource-type-folder" />
-        <translate style="display: ruby">New folder</translate>
+        <translate>New folder</translate>
       </oc-button>
     </template>
     <oc-button
@@ -93,7 +89,7 @@
       padding-size="small"
     >
       <oc-list id="upload-list">
-        <li class="oc-p-s">
+        <li>
           <folder-upload
             v-if="!isIE11()"
             :root-path="currentPath"
@@ -104,7 +100,7 @@
             @progress="uploadProgress"
           />
         </li>
-        <li class="oc-p-s">
+        <li>
           <file-upload
             :path="currentPath"
             :headers="headers"
@@ -125,7 +121,7 @@ import pathUtil from 'path'
 import Mixins from '../../mixins'
 import MixinFileActions, { EDITOR_MODE_CREATE } from '../../mixins/fileActions'
 import { buildResource, buildWebDavFilesPath, buildWebDavSpacesPath } from '../../helpers/resources'
-import { isLocationActive, isLocationPublicActive, isLocationSpacesActive } from '../../router'
+import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
 import { useActiveLocation } from '../../composables'
 
 import { DavProperties, DavProperty } from 'web-pkg/src/constants'
@@ -141,7 +137,7 @@ export default {
   mixins: [Mixins, MixinFileActions],
   props: {
     canUpload: { type: Boolean, default: false },
-    currentPath: { type: String, default: null },
+    currentPath: { type: String, required: true },
     hasFreeSpace: { type: Boolean, default: false },
     headers: { type: Object, default: null }
   },
@@ -154,15 +150,8 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'getToken',
-      'capabilities',
-      'configuration',
-      'newFileHandlers',
-      'quota',
-      'user'
-    ]),
-    ...mapGetters('Files', ['files', 'currentFolder', 'selectedFiles', 'publicLinkPassword']),
+    ...mapGetters(['getToken', 'capabilities', 'configuration', 'newFileHandlers', 'user']),
+    ...mapGetters('Files', ['files', 'currentFolder', 'publicLinkPassword']),
     ...mapState('Files', ['areHiddenFilesShown']),
 
     mimetypesAllowedForCreation() {
@@ -174,7 +163,7 @@ export default {
       return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
     },
     createFileActionsAvailable() {
-      return this.newFileHandlersForRoute.length > 0 || this.mimetypesAllowedForCreation.length > 0
+      return this.newFileHandlers.length > 0 || this.mimetypesAllowedForCreation.length > 0
     },
     newButtonTooltip() {
       if (!this.canUpload) {
@@ -214,27 +203,21 @@ export default {
 
     uploadOrFileCreationBlocked() {
       return !this.canUpload || !this.hasFreeSpace
-    },
-
-    newFileHandlersForRoute() {
-      return this.newFileHandlers.filter(({ routes = [] }) =>
-        isLocationActive(this.$router, ...routes.map((name) => ({ name })))
-      )
     }
   },
   methods: {
     ...mapActions('Files', ['loadIndicators']),
     ...mapActions(['openFile', 'showMessage', 'createModal', 'setModalInputErrorMessage']),
     ...mapMutations('Files', ['UPSERT_RESOURCE']),
 
-    uploadSuccess() {
-      this.$emit('success')
+    uploadSuccess(args, file) {
+      this.$emit('success', args, file)
     },
-    uploadError() {
-      this.$emit('error')
+    uploadError(error) {
+      this.$emit('error', error)
     },
-    uploadProgress() {
-      this.$emit('progress')
+    uploadProgress(progress) {
+      this.$emit('progress', progress)
     },
 
     showCreateResourceModal(
@@ -397,6 +380,8 @@ export default {
           )
         }
 
+        this.UPSERT_RESOURCE(buildResource(resource))
+
         if (this.newFileAction) {
           const fileId = resource.fileInfo[DavProperty.FileId]
 
@@ -406,9 +391,6 @@ export default {
           return
         }
 
-        resource = buildResource(resource)
-
-        this.UPSERT_RESOURCE(resource)
         this.hideModal()
 
         if (this.isPersonalLocation) {