Add fields-displayed property to enable only showing certain fields, …

…Update snapshots
owncloud · Mar 22, 2022 · 6d0392a · 6d0392a
1 parent d0af6c8
commit 6d0392a
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 13 deletions.
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -301,6 +301,15 @@ export default {
       required: false,
       default: undefined
     },
+    /**
+     * Define what fields should be displayed in the table
+     * If null, all fields are displayed
+     */
+    fieldsDisplayed: {
+      type: Array,
+      required: false,
+      default: null
+    },
     /**
      * Show that the table is sorted ascendingly/descendingly (no actual sorting takes place)
      */
@@ -434,13 +443,9 @@ export default {
           }
         ]
           .filter((field) => {
-            if (!Object.prototype.hasOwnProperty.call(firstResource, field.name)) {
-              return false
-            }
-            if (field.name !== 'indicators') {
-              return true
-            }
-            return this.resources.some((resource) => resource.indicators.length > 0)
+            const hasProperty = Object.prototype.hasOwnProperty.call(firstResource, field.name)
+            if (!this.fieldsDisplayed) return hasProperty
+            return hasProperty && this.fieldsDisplayed.includes(field.name)
           })
           .map((field) => {
             const sortField = sortFields.find((f) => f.name === field.name)

diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -17,6 +17,7 @@
         id="files-shared-via-link-table"
         v-model="selected"
         class="files-table"
+        :fields-displayed="['name', 'sharedWith', 'sdate']"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
         :are-paths-displayed="true"

diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -19,6 +19,7 @@
         id="files-shared-with-others-table"
         v-model="selected"
         class="files-table"
+        :fields-displayed="['name', 'sharedWith', 'sdate']"
         :class="{ 'files-table-squashed': !sidebarClosed }"
         :are-thumbnails-displayed="displayThumbnails"
         :are-paths-displayed="true"

diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/TrashBin.spec.js.snap b/packages/web-app-files/tests/unit/components/__snapshots__/TrashBin.spec.js.snap
@@ -8,6 +8,9 @@ exports[`Trashbin component when the view is not loading anymore when length of
         <!---->
       </th>
       <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-indicators" style="top: 0px;"><span class="oc-table-thead-content header-text">Shares</span>
+        <!---->
+      </th>
       <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-status" style="top: 0px;"><span class="oc-table-thead-content header-text">Status</span>
         <!---->
       </th>
@@ -29,6 +32,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
           </div>
         </div>
       </td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-indicators"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
@@ -48,6 +52,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
           </div>
         </div>
       </td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-indicators"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
@@ -67,6 +72,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
           </div>
         </div>
       </td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-indicators"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
         <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
@@ -77,7 +83,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
   </tbody>
   <tfoot class="oc-table-footer">
     <tr class="oc-table-footer-row">
-      <td colspan="4" class="oc-table-footer-cell">
+      <td colspan="5" class="oc-table-footer-cell">
         <pagination-stub pages="12" currentpage="21"></pagination-stub>
         <list-info-stub files="3" folders="0" class="oc-width-1-1 oc-my-s"></list-info-stub>
       </td>

diff --git a/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap b/packages/web-app-files/tests/unit/views/__snapshots__/Trashbin.spec.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Trashbin component when the view is not loading anymore when length of the paginated resources is greater than zero should load the resource table with correct props 1`] = `
+<table class="files-table oc-table oc-table-hover oc-table-sticky files-table-squashed" id="files-trashbin-table">
+  <thead class="oc-thead">
+    <tr tabindex="-1" class="oc-table-header-row">
+      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-table-header-cell oc-table-header-cell-select oc-pl-m " style="top: 0px;"><span class="oc-table-thead-content"><div class="resource-table-select-all"><span><input id="resource-table-select-all" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value=""> <label for="resource-table-select-all" class="oc-invisible-sr oc-cursor-pointer">Select all resources</label></span></div></span>
+        <!---->
+      </th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-nowrap oc-table-header-cell oc-table-header-cell-name" aria-sort="none" style="top: 0px;"><span class="oc-table-thead-content header-text">Name</span> <button aria-label="Sort by name" type="button" class="oc-button-sort oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-invisible"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></button></th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-indicators" style="top: 0px;"><span class="oc-table-thead-content header-text">Shares</span>
+        <!---->
+      </th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-status" style="top: 0px;"><span class="oc-table-thead-content header-text">Status</span>
+        <!---->
+      </th>
+      <th class="oc-th oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-header-cell oc-table-header-cell-actions oc-pr-m" style="top: 0px;"><span class="oc-table-thead-content header-text">Actions</span>
+        <!---->
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr tabindex="-1" data-item-id="file-id-1234" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-1234">
+      <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-1234" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-1234" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
+        <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
+          <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/1234" data-test-resource-name="file-path/file-name-1234" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-1234</span></span>
+            <!----></span></span>
+            <div class="oc-resource-indicators">
+              <router-link-stub to="[object Object]" class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></router-link-stub>
+            </div>
+          </div>
+        </div>
+      </td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-indicators"></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-1234"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+          <div id="context-menu-drop-file-id-1234" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
+        </div>
+      </td>
+    </tr>
+    <tr tabindex="-1" data-item-id="file-id-5896" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-5896">
+      <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-5896" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-5896" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
+        <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
+          <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/5896" data-test-resource-name="file-path/file-name-5896" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-5896</span></span>
+            <!----></span></span>
+            <div class="oc-resource-indicators">
+              <router-link-stub to="[object Object]" class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></router-link-stub>
+            </div>
+          </div>
+        </div>
+      </td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-indicators"></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-5896"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+          <div id="context-menu-drop-file-id-5896" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
+        </div>
+      </td>
+    </tr>
+    <tr tabindex="-1" data-item-id="file-id-9856" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-9856">
+      <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-9856" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-9856" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
+        <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
+          <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/9856" data-test-resource-name="file-path/file-name-9856" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-9856</span></span>
+            <!----></span></span>
+            <div class="oc-resource-indicators">
+              <router-link-stub to="[object Object]" class="parent-folder" style="cursor: pointer;"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="text">file-path</span></router-link-stub>
+            </div>
+          </div>
+        </div>
+      </td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-indicators"></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-status"></td>
+      <td class="oc-td oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-text-nowrap oc-table-data-cell oc-table-data-cell-actions oc-pr-m">
+        <div class="resource-table-actions"> <button aria-label="Show context menu" type="button" class="resource-table-btn-action-dropdown oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw" id="context-menu-trigger-file-id-9856"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></button>
+          <div id="context-menu-drop-file-id-9856" class="oc-drop oc-box-shadow-medium oc-rounded"></div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+  <tfoot class="oc-table-footer">
+    <tr class="oc-table-footer-row">
+      <td colspan="5" class="oc-table-footer-cell">
+        <pagination-stub pages="12" currentpage="21"></pagination-stub>
+        <list-info-stub files="3" folders="0" class="oc-width-1-1 oc-my-s"></list-info-stub>
+      </td>
+    </tr>
+  </tfoot>
+</table>
+`;
diff --git a/...ages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.js.snap b/...ages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.js.snap
@@ -2,18 +2,18 @@
 
 exports[`ApplicationsMenu component should render navigation with button and menu items in dropdown 1`] = `
 <nav id="applications-menu" aria-label="Main navigation" class="oc-flex oc-flex-middle">
-  <oc-button-stub id="_appSwitcherButton" appearance="raw" variation="inverse" aria-label="Application Switcher" class="oc-topbar-menu-burger">
-    <oc-icon-stub name="grid" size="large" class="oc-flex"></oc-icon-stub>
+  <oc-button-stub type="button" size="medium" arialabel="Application Switcher" submit="button" variation="inverse" appearance="raw" justifycontent="center" gapsize="medium" id="_appSwitcherButton" class="oc-topbar-menu-burger">
+    <oc-icon-stub name="grid" filltype="fill" accessiblelabel="" type="span" size="large" variation="passive" color="" class="oc-flex"></oc-icon-stub>
   </oc-button-stub>
-  <oc-drop-stub drop-id="app-switcher-dropdown" toggle="#_appSwitcherButton" mode="click" padding-size="small" close-on-click="">
+  <oc-drop-stub dropid="app-switcher-dropdown" toggle="#_appSwitcherButton" position="bottom-start" mode="click" closeonclick="true" paddingsize="small">
     <oc-list-stub class="applications-list">
       <li>
-        <oc-button-stub type="router-link" to="/files" appearance="raw" variation="passive" class=""><span class="icon-box"><oc-icon-stub name="folder"></oc-icon-stub></span> <span>Files</span>
+        <oc-button-stub type="router-link" size="medium" to="/files" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class=""><span class="icon-box"><oc-icon-stub name="folder" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Files</span>
           <!---->
         </oc-button-stub>
       </li>
       <li>
-        <oc-button-stub type="a" target="_blank" href="http://some.org" appearance="raw" variation="passive" class=""><span class="icon-box"><oc-icon-stub name="some-icon"></oc-icon-stub></span> <span>External</span>
+        <oc-button-stub type="a" size="medium" href="http://some.org" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" target="_blank" class=""><span class="icon-box"><oc-icon-stub name="some-icon" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>External</span>
           <!---->
         </oc-button-stub>
       </li>