[full-ci] Simplify Files-AppBar #6662

pascalwengerter · 2022-03-24T21:15:54Z

Description

The idea is to simplify the AppBar.vue component, which currently is bloated with a lot of edgecases depending on the currently active view instead of rendering based on props.
Even if it means some more duplication now (as tradeoff from a lot of conditional statements) it's a necessary step to eventually build a abstracted FilesList-layout (which would then definitely reduce duplication & complexity).

Done

Extract breadcrumb creation into TypeScript helper
Used AppBar via props & slots and move business logic to view layer
Moved FileDrop component to CreateAndUpload component to reduce shared logic
Created new EmptyTrashbin.vue component for use in Trashbin/Appbar

Related Issues

Fixes ViewOptions sometimes not correctly aligned #6685

Caveats

"ViewOptions" is left-aligned if no create/batch actions (was the case before this PR already but can conveniently be fixed in this) (ViewOptions sometimes not correctly aligned #6685) @pascalwengerter
Shares-page: When switching between the shares-pages, there's a tiny visual glitch when the page gets rerendered (including appBar). Maybe we can add a SharesLayout and render pages into it to avoid it?
Renaming a folder via the breadcrumb-contextaction now re-renders the ResourceTable (? 🤔 )
ViewOptions conditional rendering is suboptimal (showing 'Toggle hidden files' on Spaces Projects overview) @pascalwengerter
AppBar => naming for static slot is not good => renamed to content
Breadcrumbs showing contextActions for root node & additional arrow-right for last node

update-docs · 2022-03-24T21:15:57Z

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

packages/web-app-files/src/views/Personal.vue

packages/web-app-files/src/helpers/breadcrumbs.ts

pascalwengerter · 2022-03-28T21:09:59Z

packages/web-app-files/tests/integration/specs/pagination.spec.js

@@ -51,22 +51,6 @@ describe('User can navigate in files list using pagination', () => {
        Files: StoreFiles
      }
    })
-    const appBar = document.createElement('div')


Interestingly, we could get rid of this weird workaround here now 😅

pascalwengerter · 2022-03-28T21:11:00Z

packages/web-app-files/tests/integration/specs/appBar.spec.js

@@ -37,12 +37,6 @@ describe('AppBar contains set of actions and informations', () => {
      render(
        AppBar,
        {
-          setup: () => {


Not sure how to proceed here, we'd have to either render a full view or provide breadcrumb prop items to complete the rendering and fulfill the test criteria

packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap

packages/web-app-files/tests/unit/views/views.shared.ts

pascalwengerter · 2022-03-28T21:13:55Z

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

    SideBar
  },
  mixins: [Mixins],
-  data() {


No idea of these were actually necessary or long-forgotten leftovers?

If they are not referenced in the template ... happy they go

ownclouders · 2022-03-28T21:21:27Z

Results for oCISFiles1 https://drone.owncloud.com/owncloud/web/24236/52/1

💥 The acceptance tests failed on retry. Please find the screenshots inside ...

webUICreateFilesFolders-createFile_feature-L13.png

webUICreateFilesFolders-createFile_feature-L19.png

webUICreateFilesFolders-createFile_feature-L25.png

webUICreateFilesFolders-createFile_feature-L31.png

webUIDeleteFilesFolders-deleteFilesFolders_feature-L253.png

webUIDeleteFilesFolders-deleteFilesFolders_feature-L77.png

webUIFilesCopy-copy_feature-L131.png

webUIFilesCopy-copy_feature-L142.png

webUIFilesCopy-copy_feature-L28.png

webUIFilesCopy-copy_feature-L70.png

webUIFilesCopy-copy_feature-L71.png

webUIFilesCopy-copy_feature-L72.png

webUIFilesCopy-copy_feature-L73.png

webUIFilesCopy-copy_feature-L76.png

webUIMarkdownEditor-markdownFile_feature-L13.png

webUIMarkdownEditor-markdownFile_feature-L21.png

webUIMarkdownEditor-markdownFile_feature-L29.png

webUIMarkdownEditor-markdownFile_feature-L37.png

webUIMarkdownEditor-markdownFile_feature-L44.png

webUIMarkdownEditor-markdownFile_feature-L50.png

webUIMarkdownEditor-markdownFile_feature-L56.png

webUIMarkdownEditor-markdownFile_feature-L70.png

webUIMarkdownEditor-markdownFile_feature-L71.png

webUIMarkdownEditor-markdownFile_feature-L80.png

webUIMarkdownEditor-markdownFile_feature-L81.png

webUIMarkdownEditor-markdownFile_feature-L82.png

webUIMarkdownEditor-markdownFile_feature-L83.png

webUIMarkdownEditor-markdownFile_feature-L84.png

dschmidt · 2022-03-29T15:53:07Z

changelog/unreleased/bugfix-appbar-viewoptions-alignement

@@ -0,0 +1,6 @@
+Bugfix: AppBar ViewOptions alignement


Suggested change

Bugfix: AppBar ViewOptions alignement

Bugfix: AppBar ViewOptions alignment

dschmidt · 2022-03-29T15:54:16Z

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

    SideBar
  },
  mixins: [Mixins],
-  data() {


If they are not referenced in the template ... happy they go

…ViewOptions in Spaces/Projects view

…unit test

fschade

LGTM if ci is happy 🚀

sonarcloud · 2022-03-29T16:13:59Z

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

52.4% Coverage
3.2% Duplication

pascalwengerter mentioned this pull request Mar 28, 2022

Adjust the topbar layout on the spaces overview #6642

Merged

9 tasks

pascalwengerter force-pushed the simplify-appbar branch 2 times, most recently from 74524d7 to e5b9e8a Compare March 28, 2022 15:15

pascalwengerter marked this pull request as ready for review March 28, 2022 15:15

pascalwengerter requested a review from fschade as a code owner March 28, 2022 15:15

pascalwengerter changed the title ~~[WIP] - Simplify Files-AppBar~~ Simplify Files-AppBar Mar 28, 2022