Bring oc-table-files component and refactor views

.drone.star

@@ -92,6 +92,7 @@ config = {
 				'WEB_UI_CONFIG': '/var/www/owncloud/web/dist/config.json'
 			},
 			'visualTesting': True,
+			'screenShots': True
 		},
 		'webUIFederation': {
 			'suites': {
@@ -170,6 +171,7 @@ config = {
 				]
 			},
 			'extraEnvironment': {
+			        'EXPECTED_FAILURES_FILE': '/var/www/owncloud/web/tests/acceptance/expected-failures-XGA-with-oc10-server-oauth2-login.md',
 				'SCREEN_RESOLUTION': '768x1024'
 			},
 			'filterTags': '@smokeTest and not @skipOnXGAPortraitResolution and not @skip and not @skipOnOC10'
@@ -231,6 +233,7 @@ config = {
 				]
 			},
 			'extraEnvironment': {
+			        'EXPECTED_FAILURES_FILE': '/var/www/owncloud/web/tests/acceptance/expected-failures-Iphone-oc10-server-oauth2-login.md',
 				'SCREEN_RESOLUTION': '375x812'
 			},
 			'filterTags': '@smokeTest and not @skipOnIphoneResolution and not @skip and not @skipOnOC10'

changelog/unreleased/bugfix-mediaviewer-upper-case-file-extensions

@@ -0,0 +1,6 @@
+Bugfix: Open mediaviewer for upper case file extensions
+
+We fixed a bug where the mediaviewer didn't open for files which had an uppercase (or mixed case) file extension.
+
+https://github.com/owncloud/web/issues/4647
+https://github.com/owncloud/web/pull/4627

changelog/unreleased/change-new-files-list

@@ -0,0 +1,5 @@
+Change: New files list
+
+We integrated the new oc-table-files component from our design system. This includes breaking changes in how we load resources in our files app. We refactored our files app codebase into views, so that only subcomponents live in the components directory.
+
+https://github.com/owncloud/web/pull/4627

nightwatch.conf.js

@@ -36,7 +36,6 @@ const SCREENSHOTS = !!process.env.SCREENSHOTS
 
 const VISUAL_TEST = !!process.env.VISUAL_TEST
 const UPDATE_VRT_SCREENSHOTS = !!process.env.UPDATE_VRT_SCREENSHOTS
-
 function generateScreenshotFilePath(nightwatchClient, basePath, imagePath) {
   return path.join(process.cwd(), basePath, imagePath)
 }

package.json

@@ -44,7 +44,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
-    "chromedriver": "^87.0.0",
+    "chromedriver": "^89.0.0",
     "core-js": "3",
     "cucumber": ">=6.0.5",
     "cucumber-pretty": ">=6.0.0",

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

@@ -3,7 +3,7 @@ import App from './App.vue'
 
 const routes = [
   {
-    name: 'draw-io-edit',
+    name: 'edit',
     path: '/edit/:filePath',
     components: {
       fullscreen: App
@@ -27,17 +27,24 @@ const appInfo = {
         }
       },
       routes: [
-        'files-list',
+        'files-personal',
         'files-favorites',
         'files-shared-with-others',
         'files-shared-with-me',
-        'public-files'
+        'files-public-list'
       ]
     },
     {
       extension: 'vsdx',
       newTab: true,
-      routeName: 'draw-io-edit'
+      routeName: 'draw-io-edit',
+      routes: [
+        'files-personal',
+        'files-favorites',
+        'files-shared-with-others',
+        'files-shared-with-me',
+        'files-public-list'
+      ]
     }
   ]
 }

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

@@ -0,0 +1,203 @@
+<template>
+  <div id="files" class="uk-flex uk-height-1-1">
+    <div
+      ref="filesListWrapper"
+      tabindex="-1"
+      class="files-list-wrapper uk-width-expand"
+      :class="{ 'uk-visible@m': _sidebarOpen }"
+      @dragover="$_ocApp_dragOver"
+    >
+      <app-bar id="files-app-bar" :style="{ top: $_topBarVisible ? '60px' : '0' }" />
+      <upload-progress
+        v-show="$_uploadProgressVisible"
+        id="files-upload-progress"
+        class="oc-p-s uk-background-muted"
+      />
+      <router-view id="files-view" />
+    </div>
+    <sidebar
+      v-if="_sidebarOpen"
+      id="files-sidebar"
+      class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@xl"
+      @reset="setHighlightedFile(null)"
+    />
+  </div>
+</template>
+<script>
+import Mixins from './mixins'
+import MixinRoutes from './mixins/routes'
+import { mapActions, mapGetters, mapMutations } from 'vuex'
+import Sidebar from './components/Sidebar.vue'
+import AppBar from './components/AppBar.vue'
+import UploadProgress from './components/UploadProgress.vue'
+
+export default {
+  components: {
+    Sidebar,
+    AppBar,
+    UploadProgress
+  },
+  mixins: [Mixins, MixinRoutes],
+  data() {
+    return {
+      createFolder: false,
+      fileUploadName: '',
+      fileUploadProgress: 0,
+      upload: false,
+      fileName: '',
+      selected: [],
+      breadcrumbs: []
+    }
+  },
+  computed: {
+    ...mapGetters('Files', ['dropzone', 'highlightedFile', 'inProgress']),
+
+    _sidebarOpen() {
+      return this.highlightedFile !== null
+    },
+
+    $_topBarVisible() {
+      return !this.publicPage() && !this.$route.meta.verbose
+    },
+
+    $_uploadProgressVisible() {
+      return this.inProgress.length > 0
+    }
+  },
+  watch: {
+    $route() {
+      this.setHighlightedFile(null)
+      this.resetFileSelection()
+    }
+  },
+  created() {
+    this.$root.$on('upload-end', () => {
+      this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
+    })
+  },
+
+  beforeDestroy() {
+    this.SET_SIDEBAR_FOOTER_CONTENT_COMPONENT(null)
+  },
+
+  methods: {
+    ...mapActions('Files', ['dragOver', 'setHighlightedFile', 'resetFileSelection']),
+    ...mapActions(['showMessage']),
+    ...mapMutations('Files', ['SET_APP_SIDEBAR_EXPANDED_ACCORDION']),
+    ...mapMutations(['SET_SIDEBAR_FOOTER_CONTENT_COMPONENT']),
+
+    trace() {
+      console.info('trace', arguments)
+    },
+
+    openSideBar(file, sideBarName) {
+      this.setHighlightedFile(file)
+      this.SET_APP_SIDEBAR_EXPANDED_ACCORDION(sideBarName)
+    },
+
+    $_ocApp_dragOver() {
+      this.dragOver(true)
+    },
+
+    $_ocAppSideBar_onReload() {
+      this.$refs.filesList.$_ocFilesFolder_getFolder()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.files-list-wrapper {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content max-content 1fr;
+  gap: 0 0;
+  grid-template-areas:
+    'header'
+    'upload'
+    'main';
+
+  &:focus {
+    outline: none;
+  }
+}
+
+#files-sidebar {
+  position: sticky;
+  top: 60px;
+  max-height: calc(100vh - 60px);
+}
+
+#files-app-bar {
+  position: sticky;
+  height: auto;
+  z-index: 1;
+  grid-area: header;
+}
+
+#files-view {
+  grid-area: main;
+}
+
+#files-upload-progress {
+  grid-area: upload;
+}
+</style>
+
+<style lang="scss">
+// Hide files table columns
+.files-table {
+  .oc-table-header-cell-mdate,
+  .oc-table-data-cell-mdate,
+  .oc-table-header-cell-sdate,
+  .oc-table-data-cell-sdate,
+  .oc-table-header-cell-ddate,
+  .oc-table-data-cell-ddate,
+  .oc-table-header-cell-size,
+  .oc-table-data-cell-size,
+  .oc-table-header-cell-sharedWith,
+  .oc-table-data-cell-sharedWith,
+  .oc-table-header-cell-owner,
+  .oc-table-data-cell-owner,
+  .oc-table-header-cell-status,
+  .oc-table-data-cell-status {
+    display: none;
+
+    @media only screen and (min-width: 640px) {
+      display: table-cell;
+    }
+  }
+
+  .oc-table-header-cell-owner,
+  .oc-table-data-cell-owner {
+    display: none;
+
+    @media only screen and (min-width: 960px) {
+      display: table-cell;
+    }
+  }
+
+  &-squashed {
+    .oc-table-header-cell-mdate,
+    .oc-table-data-cell-mdate,
+    .oc-table-header-cell-sdate,
+    .oc-table-data-cell-sdate,
+    .oc-table-header-cell-ddate,
+    .oc-table-data-cell-ddate,
+    .oc-table-header-cell-size,
+    .oc-table-data-cell-size,
+    .oc-table-header-cell-sharedWith,
+    .oc-table-data-cell-sharedWith,
+    .oc-table-header-cell-owner,
+    .oc-table-data-cell-owner,
+    .oc-table-header-cell-status,
+    .oc-table-data-cell-status {
+      display: none;
+
+      @media only screen and (min-width: 1600px) {
+        display: table-cell;
+      }
+    }
+  }
+}
+</style>