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

…Update snapshots
owncloud · Mar 21, 2022 · af56f4b · af56f4b
1 parent 26ad941
commit af56f4b
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
@@ -299,6 +299,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)
  */
@@ -427,13 +436,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>