[full-ci] Upstream small CERNbox fixes

changelog/unreleased/bugfix-extension-img

@@ -0,0 +1,6 @@
+Bugfix: Show extension image
+
+Allow extensions to set an image as its logo, instead of an icon.
+If `img` is set, it will take precedence over `icon`.
+
+https://github.com/owncloud/web/pull/5985

changelog/unreleased/bugfix-hide-files-by-default

@@ -0,0 +1,5 @@
+Bugfix: Hidden files hidden by default
+
+Hide hidden files (files started with ".") by default, similar to oc10
+
+https://github.com/owncloud/web/pull/5985

changelog/unreleased/bugfix-order-extensions

@@ -0,0 +1,6 @@
+Bugfix: Order extensions and default
+
+Ensure the default extensions are displayed first.
+Ensure that extensions can be set as default or not.
+
+https://github.com/owncloud/web/pull/5985

changelog/unreleased/enhancement-build-options

@@ -0,0 +1,6 @@
+Enhancement: Build options
+
+Configure the startup title (displayed before the configuration is loaded) via env variable TITLE.
+Make the source map generation optional with the env variable SOURCE_MAP.
+
+https://github.com/owncloud/web/pull/5985

changelog/unreleased/enhancement-default-markdown-mediaviewer-extensions

@@ -0,0 +1,6 @@
+Enhancement: MarkdownEditor and MediaViewer can be default
+
+We have updated the extension handlers of two internal 
+apps to be able to be used as default actions.
+
+https://github.com/owncloud/web/pull/6148

changelog/unreleased/enhancement-feedback-on-startup

@@ -0,0 +1,6 @@
+Enhancement: Show feedback on startup
+
+Instead of displaying an empty page while all components load, display a spiner.
+Also show an error message if there was an error.
+
+https://github.com/owncloud/web/pull/5985

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

@@ -7,14 +7,19 @@
       data-testid="action-handler"
       v-on="getComponentListeners(action, items)"
     >
-      <oc-icon v-if="action.icon" data-testid="action-icon" :name="action.icon" size="medium" />
       <oc-img
-        v-else-if="action.img"
+        v-if="action.img"
         data-testid="action-img"
         :src="action.img"
         alt=""
         class="oc-icon oc-icon-m"
       />
+      <oc-icon
+        v-else-if="action.icon"
+        data-testid="action-icon"
+        :name="action.icon"
+        size="medium"
+      />
       <span class="oc-files-context-action-label" data-testid="action-label">{{
         action.label(filterParams)
       }}</span>

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

@@ -307,7 +307,7 @@ export default {
 
   created() {
     // Storage returns a string so we need to convert it into a boolean
-    const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'true'
+    const areHiddenFilesShown = window.localStorage.getItem('oc_hiddenFilesShown') || 'false'
     const areHiddenFilesShownBoolean = areHiddenFilesShown === 'true'
 
     if (areHiddenFilesShownBoolean !== this.areHiddenFilesShown) {

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

@@ -62,41 +62,50 @@ export default {
     },
 
     $_fileActions_editorActions() {
-      return this.apps.fileEditors.map((editor) => {
-        return {
-          label: () => {
-            const translated = this.$gettext('Open in %{app}')
-            return this.$gettextInterpolate(
-              translated,
-              { app: this.apps.meta[editor.app].name },
-              true
-            )
-          },
-          icon: this.apps.meta[editor.app].icon,
-          handler: ({ resources }) =>
-            this.$_fileActions_openEditor(
-              editor,
-              resources[0].path,
-              resources[0].id,
-              EDITOR_MODE_EDIT
-            ),
-          isEnabled: ({ resources }) => {
-            if (resources.length !== 1) {
-              return false
-            }
-            if (Array.isArray(editor.routes) && !checkRoute(editor.routes, this.$route.name)) {
-              return false
-            }
-
-            return resources[0].extension.toLowerCase() === editor.extension.toLowerCase()
-          },
-          canBeDefault: true,
-          componentType: 'oc-button',
-          class: `oc-files-actions-${kebabCase(
-            this.apps.meta[editor.app].name
-          ).toLowerCase()}-trigger`
-        }
-      })
+      return this.apps.fileEditors
+        .map((editor) => {
+          return {
+            label: () => {
+              const translated = this.$gettext('Open in %{app}')
+              return this.$gettextInterpolate(
+                translated,
+                { app: this.apps.meta[editor.app].name },
+                true
+              )
+            },
+            icon: this.apps.meta[editor.app].icon,
+            img: this.apps.meta[editor.app].img,
+            handler: ({ resources }) =>
+              this.$_fileActions_openEditor(
+                editor,
+                resources[0].path,
+                resources[0].id,
+                EDITOR_MODE_EDIT
+              ),
+            isEnabled: ({ resources }) => {
+              if (resources.length !== 1) {
+                return false
+              }
+              if (Array.isArray(editor.routes) && !checkRoute(editor.routes, this.$route.name)) {
+                return false
+              }
+
+              return resources[0].extension.toLowerCase() === editor.extension.toLowerCase()
+            },
+            canBeDefault: editor.canBeDefault,
+            componentType: 'oc-button',
+            class: `oc-files-actions-${kebabCase(
+              this.apps.meta[editor.app].name
+            ).toLowerCase()}-trigger`
+          }
+        })
+        .sort((first, second) => {
+          // Ensure default are listed first
+          if (second.canBeDefault !== first.canBeDefault && second.canBeDefault) {
+            return 1
+          }
+          return 0
+        })
     }
   },
 
@@ -214,7 +223,8 @@ export default {
         const label = this.$gettext('Open in %{ appName }')
         return {
           name: app.name,
-          img: app.icon,
+          icon: app.icon,
+          img: app.img,
           componentType: 'oc-button',
           class: `oc-files-actions-${app.name}-trigger`,
           isEnabled: () => true,

packages/web-app-files/tests/unit/components/ActionMenuItem.spec.js

@@ -31,14 +31,10 @@ describe('ActionMenuItem component', () => {
   })
   it('renders an image if there is one defined in the action', () => {
     const action = { ...fileActions.download, img: 'https://owncloud.tld/img.png' }
-    const wrapper1 = getShallowWrapper(action)
-    expect(wrapper1.find(selectors.icon).exists()).toBeTruthy()
-    expect(wrapper1.find(selectors.icon).attributes().name).toBe(action.icon)
-    delete action.icon
-    const wrapper2 = getShallowWrapper(action)
-    expect(wrapper2.find(selectors.icon).exists()).toBeFalsy()
-    expect(wrapper2.find(selectors.img).exists()).toBeTruthy()
-    expect(wrapper2.find(selectors.img).attributes().src).toBe(action.img)
+    const wrapper = getShallowWrapper(action)
+    expect(wrapper.find(selectors.icon).exists()).toBeFalsy()
+    expect(wrapper.find(selectors.img).exists()).toBeTruthy()
+    expect(wrapper.find(selectors.img).attributes().src).toBe(action.img)
   })
   it('renders the action label', () => {
     const action = fileActions.download

packages/web-app-markdown-editor/src/index.js

@@ -1,10 +1,5 @@
-// --- Components --------------------------------------------------------------
-
 import App from './App.vue'
-import t from '../l10n/translations'
-
-// --- Routing -----------------------------------------------------------------
-
+import translations from '../l10n/translations'
 import store from './store.js'
 
 const routes = [
@@ -17,6 +12,17 @@ const routes = [
   }
 ]
 
+const fileExtensionConfig = {
+  canBeDefault: true,
+  routes: [
+    'files-personal',
+    'files-favorites',
+    'files-shared-with-others',
+    'files-shared-with-me',
+    'files-public-list'
+  ]
+}
+
 const appInfo = {
   name: 'MarkdownEditor',
   id: 'markdown-editor',
@@ -30,13 +36,7 @@ const appInfo = {
           return $gettext('New plain text file…')
         }
       },
-      routes: [
-        'files-personal',
-        'files-favorites',
-        'files-shared-with-others',
-        'files-shared-with-me',
-        'files-public-list'
-      ]
+      ...fileExtensionConfig
     },
     {
       extension: 'md',
@@ -45,18 +45,11 @@ const appInfo = {
           return $gettext('New mark-down file…')
         }
       },
-      routes: [
-        'files-personal',
-        'files-favorites',
-        'files-shared-with-others',
-        'files-shared-with-me',
-        'files-public-list'
-      ]
+      ...fileExtensionConfig
     }
   ]
 }
 
-const translations = t
 export default {
   appInfo,
   routes,

packages/web-app-media-viewer/src/index.js

@@ -1,5 +1,4 @@
 import translations from '../l10n/translations'
-
 import App from './App.vue'
 
 // just a dummy function to trick gettext tools
@@ -32,45 +31,44 @@ const routesForFileExtensions = [
   'files-public-list'
 ]
 
+const fileExtensionConfig = {
+  canBeDefault: true,
+  routeName,
+  routes: routesForFileExtensions
+}
+
 const appInfo = {
   name: 'Mediaviewer',
   id: 'mediaviewer',
   icon: 'image',
   extensions: [
     {
       extension: 'png',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     },
     {
       extension: 'jpg',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     },
     {
       extension: 'jpeg',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     },
     {
       extension: 'gif',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     },
     {
       extension: 'mp4',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     },
     {
       extension: 'webm',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     },
     {
       extension: 'ogg',
-      routeName,
-      routes: routesForFileExtensions
+      ...fileExtensionConfig
     }
   ]
 }