[full-ci] Small 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-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-container/index.html.ejs

@@ -10,35 +10,77 @@
     <link href="<%- data.bundle.css[s] %>" rel="stylesheet">
   <% }); %>
   <script src="js/require.js"></script>
-  <noscript>
-    <style>
-      #enable-js-banner {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        padding: 0.5rem;
-        background-color: #467391;
-      }
-      #banner-content {
-        color: white;
-      }
-    </style>
-  </noscript>
+  <style>
+    .splash-banner {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 0.5rem;
+      height: 100%;
+    }
+    #splash-loading{
+      height: 100%;
+    }
+    .splash-loading-hide {
+      display: none;
+    }
+    #loading {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      border: 2px solid #4c5f79;
+      border-radius: 50%;
+      border-top-color: #fff;
+      animation: spin 1s ease-in-out infinite;
+      -webkit-animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-webkit-keyframes spin {
+      to { -webkit-transform: rotate(360deg); }
+    }
+  </style>
 </head>
 <body>
+  <div id="splash-loading" class="splash-banner splash-loading-hide">
+    <div id="loading"></div>
+  </div>
   <div id="owncloud"></div>
   <noscript>
-    <div id="enable-js-banner"><h3 id="banner-content">Please enable JavaScript</h3></div>
+    <div class="splash-banner"><h3>Please enable JavaScript</h3></div>
   </noscript>
   <script>
-    requirejs.config({
-      baseUrl: <%- JSON.stringify(data.roots.js) %>,
-      paths: <%- JSON.stringify(data.bundle.js) %>
-    })
+    var loader = document.getElementById('splash-loading')
+    var loaderTimer = setTimeout(function () {  
+      loader.classList.remove('splash-loading-hide')
+    }, 1000);
+
+    function displayError() {
+      loader.classList.remove('splash-loading-hide')
+      loader.innerHTML = "<h3>Oops. Something went wrong.</h3>"
+    }
+
+    if (typeof requirejs === 'undefined') {
+      displayError()
+    } else {
+      requirejs.config({
+        baseUrl: <%- JSON.stringify(data.roots.js) %>,
+        paths: <%- JSON.stringify(data.bundle.js) %>
+      })
 
-    requirejs(['web-runtime'], function (runtime) {
-      runtime.bootstrap('config.json').then(runtime.renderSuccess).catch(runtime.renderFailure)
-    })
+      requirejs(['web-runtime'], function (runtime) {
+        clearTimeout(loaderTimer)
+        document.getElementById('splash-loading').classList.add('splash-loading-hide')
+        runtime.bootstrap('config.json').then(runtime.renderSuccess).catch(runtime.renderFailure)
+      }, function(e) {
+        displayError()
+        throw e
+      })
+    }
+
   </script>
 </body>
 </html>

packages/web-runtime/src/pages/oidcCallback.vue

@@ -12,8 +12,8 @@
         <p v-translate>Please contact the administrator if this error persists.</p>
       </div>
       <div v-show="!error" class="oc-login-card-body">
-        <h3 v-translate class="oc-login-card-title">Redirecting</h3>
-        <p v-translate>Please wait a while. You are being redirected.</p>
+        <h3 v-translate class="oc-login-card-title">Logging you in</h3>
+        <p v-translate>Please wait, you are being redirected.</p>
       </div>
       <div class="oc-login-card-footer">
         <p>{{ configuration.theme.general.slogan }}</p>

packages/web-runtime/src/store/apps.js

@@ -46,11 +46,13 @@ const mutations = {
     const editor = {
       app,
       icon: extension.icon,
+      img: extension.img,
       newTab: extension.newTab || false,
       routeName: extension.routeName,
       routes: extension.routes || [],
       extension: extension.extension,
-      handler: extension.handler
+      handler: extension.handler,
+      canBeDefault: extension.canBeDefault === true
     }
 
     state.fileEditors.push(editor)
@@ -94,7 +96,8 @@ const mutations = {
     const app = {
       name: appInfo.name || appInfo.id,
       id: appInfo.id,
-      icon: appInfo.icon || 'check_box_outline_blank'
+      icon: appInfo.icon || 'check_box_outline_blank',
+      img: appInfo.img || null
     }
     state.meta[app.id] = app
   },

rollup.config.js

@@ -22,6 +22,7 @@ import globals from 'rollup-plugin-node-globals'
 import ts from 'rollup-plugin-ts'
 
 const production = !process.env.ROLLUP_WATCH
+const sourcemap = process.env.SOURCE_MAP === 'true'
 
 const plugins = [
   del({
@@ -32,6 +33,7 @@ const plugins = [
   postcss({
     extract: path.join('css', 'web.css'),
     minimize: production,
+    sourceMap: sourcemap,
     config: false
   }),
   vue({
@@ -81,7 +83,7 @@ const plugins = [
     ]
   }),
   html({
-    title: 'ownCloud',
+    title: process.env.TITLE || "ownCloud",
     attributes: {
       html: { lang: 'en' },
       link: [],
@@ -197,6 +199,7 @@ export default {
   output: {
     dir: 'dist',
     format: 'amd',
+    sourcemap: sourcemap,
     chunkFileNames: path.join('js', 'chunks', production ? '[name]-[hash].js' : '[name].js'),
     entryFileNames: path.join('js', production ? '[name]-[hash].js' : '[name].js')
   },